add login mechanic

This commit is contained in:
2024-01-11 01:00:43 +01:00
parent 6790fe5ef6
commit 05b9ddd5a1
7 changed files with 138 additions and 67 deletions

View File

@@ -17,14 +17,24 @@
UserSolid,
} from "flowbite-svelte-icons";
import ezppLogo from "../public/favicon.png";
import { currentPage } from "./storage/localStore";
import { currentPage, currentUser } from "./storage/localStore";
import { Page } from "./consts/pages";
import Login from "./pages/Login.svelte";
import Launch from "./pages/Launch.svelte";
import { Toaster } from "svelte-french-toast";
import type { User } from "./types/user";
let user: User | undefined = undefined;
let loggedIn = false;
currentUser.subscribe((newUser) => {
loggedIn = newUser != undefined;
user = newUser;
});
</script>
<Toaster></Toaster>
<div class="p-2 flex flex-row justify-between items-center">
<div class="flex flex-row items-center">
<img src={ezppLogo} alt="EZPPFarm Logo" class="w-12 h-12 mr-2" />
@@ -36,38 +46,43 @@
<div class="flex flex-row gap-2 w-fill cursor-pointer md:order-2">
<Avatar
class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
src={loggedIn ? "https://a.ez-pp.farm/1001" : "https://a.ez-pp.farm/0"}
src={loggedIn
? "https://a.ez-pp.farm/" + user?.id
: "https://a.ez-pp.farm/0"}
id="avatar-menu"
/>
</div>
<Dropdown placement="bottom" triggeredBy="#avatar-menu">
<DropdownHeader>
<span class="block text-sm">{loggedIn ? "Quetzalcoatl" : "Guest"}</span>
<span class="block text-sm">{loggedIn ? user?.name : "Guest"}</span>
<span
class="block truncate text-sm font-medium text-gray-500 dark:text-gray-200"
>
{loggedIn ? "me@horizonco.de" : "Please log in!"}
{loggedIn ? user?.email : "Please log in!"}
</span>
</DropdownHeader>
{#if loggedIn}
<DropdownItem
<!-- <DropdownItem
class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
>
<UserSolid class="select-none outline-none border-none" />
Profile
</DropdownItem>
</DropdownItem> -->
{/if}
<DropdownItem
<!-- <DropdownItem
class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
>
<UserSettingsSolid class="select-none outline-none border-none" />
Settings
</DropdownItem>
<DropdownDivider />
</DropdownItem>
<DropdownDivider />-->
{#if loggedIn}
<DropdownItem
class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
on:click={() => (loggedIn = false)}
on:click={() => {
currentUser.set(undefined);
currentPage.set(Page.Login);
}}
>
<ArrowRightFromBracketSolid
class="select-none outline-none border-none"
@@ -84,12 +99,12 @@
/>
Login
</DropdownItem>
<DropdownItem
<!-- <DropdownItem
class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
>
<UserPlusSolid class="select-none outline-none border-none" />
Register
</DropdownItem>
</DropdownItem> -->
{/if}
</Dropdown>
{/if}