-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
843fec8
commit d4d2d8b
Showing
12 changed files
with
294 additions
and
134 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
This file was deleted.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import {signIn} from '@junobuild/core'; | ||
| import {addEventClick} from '../utils/render.utils'; | ||
|
|
||
| export const renderLogin = (app) => { | ||
| addEventClick({ | ||
| target: app, | ||
| selector: '#login', | ||
| fn: signIn | ||
| }); | ||
|
|
||
| app.innerHTML = `<button id="login" | ||
| class="flex items-center gap-2 border-black dark:border-lavender-blue-500 border-[3px] transition-all rounded-sm py-1 px-8 my-2 font-semibold text-white bg-lavender-blue-500 dark:bg-black shadow-[5px_5px_0px_rgba(0,0,0,1)] dark:shadow-[5px_5px_0px_#7888ff] hover:bg-lavender-blue-600 dark:hover:bg-lavender-blue-300 dark:hover:text-black active:bg-lavender-blue-400 dark:active:bg-lavender-blue-500 active:shadow-none active:translate-x-[5px] active:translate-y-[5px]"> | ||
| Sign in | ||
| </button> | ||
| `; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import {signOut} from '@junobuild/core'; | ||
| import {addEventClick} from '../utils/render.utils'; | ||
|
|
||
| export const renderLogout = (app) => { | ||
| addEventClick({ | ||
| target: app, | ||
| selector: '#logout', | ||
| fn: signOut | ||
| }); | ||
|
|
||
| app.innerHTML = `<button | ||
| id="logout" | ||
| type="button" | ||
| class="dark:text-white flex items-center gap-2 mt-24 hover:text-lavender-blue-500 active:text-lavender-blue-400"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| height="16" | ||
| viewBox="0 -960 960 960" | ||
| width="16" | ||
| fill="currentColor"> | ||
| <path d="M120-120v-720h360v80H200v560h280v80H120Zm520-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z" /> | ||
| </svg> | ||
| <span> | ||
| <small>Logout</small> | ||
| </span> | ||
| </button>`; | ||
| }; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,34 @@ | ||
| import javascriptLogo from '../public/javascript.svg'; | ||
| import viteLogo from '../public/vite.svg'; | ||
| import {setupCounter} from './counter.js'; | ||
| import {authSubscribe, initJuno} from '@junobuild/core'; | ||
| import {renderLogin} from './components/login'; | ||
| import {renderLogout} from './components/logout'; | ||
| import './style.css'; | ||
|
|
||
| document.querySelector('#app').innerHTML = ` | ||
| <div> | ||
| <a href="https://vitejs.dev" target="_blank" class="text-6xl"> | ||
| <img src="${viteLogo}" class="logo" alt="Vite logo" /> | ||
| </a> | ||
| <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"> | ||
| <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" /> | ||
| </a> | ||
| <h1>Hello Vite!</h1> | ||
| <div class="card" class="text-6xl"> | ||
| <button id="counter" type="button"></button> | ||
| </div> | ||
| <p class="text-6xl"> | ||
| Click on the Vite logo to learn more | ||
| </p> | ||
| </div> | ||
| `; | ||
| /** | ||
| * Global listener. When the user sign-in or sign-out, we re-render the app. | ||
| */ | ||
| authSubscribe((user) => { | ||
| const app = document.querySelector('#app'); | ||
|
|
||
| setupCounter(document.querySelector('#counter')); | ||
| if (user === null || user === undefined) { | ||
| renderLogin(app); | ||
| return; | ||
| } | ||
|
|
||
| renderLogout(app); | ||
| }); | ||
|
|
||
| /** | ||
| * When the app starts, we initialize Juno. | ||
| * @returns {Promise<void>} | ||
| */ | ||
| const onAppInit = async () => { | ||
| await initJuno({ | ||
| satelliteId: import.meta.env.VITE_SATELLITE_ID, | ||
| container: import.meta.env.VITE_CONTAINER, | ||
| workers: { | ||
| auth: true | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| document.addEventListener('DOMContentLoaded', onAppInit, {once: true}); |
Oops, something went wrong.