feat: make sign in button dynamic and a separate component

mwmbl · Sep 19, 2024 · 7a6a7d8 · 7a6a7d8
1 parent e34a2ab
commit 7a6a7d8
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 11 deletions.
diff --git a/src/lib/components/custom/MobileMenu.svelte b/src/lib/components/custom/MobileMenu.svelte
@@ -3,10 +3,13 @@
 	import * as Sheet from '@/components/ui/sheet';
 
 	import RiMenu3Fill from '~icons/ri/menu-3-fill';
-	import RiUserLine from '~icons/ri/user-line';
 	import RiMoneyDollarCircleFill from '~icons/ri/money-dollar-circle-fill';
 
 	import Options from '@/components/custom/Options.svelte';
+	import SignInButton from '@/components/custom/SignInButton.svelte';
+
+	import { getCookies } from '@/cookies.svelte';
+	let cookies = getCookies();
 </script>
 
 <Sheet.Root>
@@ -29,10 +32,16 @@
 		<hr class="absolute left-0 top-[4.5rem] w-full" />
 		<div class="flex flex-col gap-4">
 			<div class="grid grid-cols-2 gap-4">
-				Sign in to start curating
-				<Button href="/account" class="max-w-min justify-self-end px-6">
-					<RiUserLine class="mr-2 min-h-5 min-w-5 text-white dark:text-black" /> Sign In
-				</Button>
+				<span>
+					{#if !cookies.assumeLoggedIn}
+						Sign in to start curating
+					{:else}
+						Logged in as <em>{cookies.username}</em>
+					{/if}
+				</span>
+				<div class="justify-self-end">
+					<SignInButton />
+				</div>
 			</div>
 			<div class="grid grid-cols-2 gap-4">
 				Donate to keep Mwmbl running

diff --git a/src/lib/components/custom/SignInButton.svelte b/src/lib/components/custom/SignInButton.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Button } from '@/components/ui/button';
+
+	import RiUserLine from '~icons/ri/user-line';
+
+	import { getCookies } from '@/cookies.svelte';
+	let cookies = getCookies();
+</script>
+
+{#if !cookies.assumeLoggedIn}
+	<Button href="/account" class="max-w-min px-6">
+		<RiUserLine class="mr-2 min-h-5 min-w-5 text-white dark:text-black" /> Sign In
+	</Button>
+{:else}
+	<Button href="/account" class="max-w-min px-6">
+		<RiUserLine class="mr-2 min-h-5 min-w-5 text-white dark:text-black" /> Account
+	</Button>
+{/if}
diff --git a/src/routes/(nosearch)/+layout.svelte b/src/routes/(nosearch)/+layout.svelte
@@ -7,6 +7,7 @@
 	import RiUserLine from '~icons/ri/user-line';
 
 	import MobileMenu from '@/components/custom/MobileMenu.svelte';
+	import SignInButton from '@/components/custom/SignInButton.svelte';
 </script>
 
 <header
@@ -18,9 +19,7 @@
 	</a>
 	<div class="hidden md:contents">
 		<Button variant="link" href="https://opencollective.com/mwmbl" class="px-2">Donate</Button>
-		<Button href="/account">
-			<RiUserLine class="mr-2 min-h-5 min-w-5 text-white dark:text-black" /> Sign In
-		</Button>
+		<SignInButton />
 	</div>
 	<div class="contents md:hidden">
 		<MobileMenu />

diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
@@ -13,6 +13,7 @@
 	import SearchResult from '@/components/custom/SearchResult.svelte';
 	import Options from '@/components/custom/Options.svelte';
 	import MobileMenu from '@/components/custom/MobileMenu.svelte';
+	import SignInButton from '@/components/custom/SignInButton.svelte';
 
 	let { data } = $props();
 </script>
@@ -34,9 +35,9 @@
 			<Search query={data.query} />
 		</div>
 		<div class="justify-self-end max-lg:col-start-1 max-lg:row-start-1">
-			<Button href="/account" class="max-lg:hidden">
-				<RiUserLine class="mr-2 min-h-5 min-w-5 text-white dark:text-black" /> Sign In
-			</Button>
+			<div class="hidden lg:contents">
+				<SignInButton />
+			</div>
 			<MobileMenu />
 		</div>
 		<div class="mb-0 flex flex-row gap-4 max-lg:row-start-3 lg:col-start-2 lg:col-end-2">