fixed login nav not updating

BetterLectio · Nov 20, 2023 · 7c2e38a · 7c2e38a
1 parent 43c9725
commit 7c2e38a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
@@ -18,6 +18,8 @@
 		checked = checked === 'checked' ? '' : 'checked';
 	}
 
+	export let authed = false;
+
 </script>
 
 <div class="drawer h-[calc(100%-4px)]">
@@ -71,7 +73,7 @@
 			</div>
 			<div class="navbar-center hidden desktop:flex">
 				<ul class="menu menu-horizontal p-0">
-					{#if $brugeren && localStorage.getItem('lectio-cookie')}
+					{#if authed}
 						<li><a class="text-sm font-bold hover:scale-110" href="/skema">Skema</a></li>
 						<li><a class="text-sm font-bold hover:scale-110" href="/opgaver">Opgaver</a></li>
 						<li><a class="text-sm font-bold hover:scale-110" href="/lektier">Lektier</a></li>
@@ -117,7 +119,7 @@
 				</p>
 			</div>
 			<div class="navbar-end sm:w-fit">
-				{#if $brugeren && localStorage.getItem('lectio-cookie')}
+				{#if authed}
 					<label for="søg-popup" class="btn-ghost btn gap-1 normal-case">
 						<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
 							<path
@@ -127,7 +129,7 @@
 					>
 				{/if}
 				<ThemeSelect tabindex="0" />
-				{#if $brugeren && localStorage.getItem('lectio-cookie') && cookie}
+				{#if authed && cookie && $brugeren}
 					<div class="dropdown dropdown-bottom dropdown-end hidden md:block">
 						<div tabindex="0" class="btn-ghost btn flex justify-end gap-1 font-normal normal-case">
 							<Avatar id={`S${ cookie.userId}`} navn={$brugeren.navn} size="w-10" />
@@ -210,7 +212,7 @@
 		<ul
 			class="menu w-80 relative z-50 min-h-screen h-fit bg-base-100/80 p-4 text-base-content pb-20 flex flex-col justify-between backdrop-blur-md flex-nowrap"
 		>
-			{#if $brugeren && localStorage.getItem('lectio-cookie') && cookie}
+			{#if authed && cookie && $brugeren}
 				<div>
 					<span class="md:hidden">
 						<Avatar id={`S${ cookie.userId}`} navn={$brugeren.navn} size="w-20 ml-4" />

diff --git a/src/lib/components/SideBar.svelte b/src/lib/components/SideBar.svelte
@@ -11,6 +11,8 @@
 		cookie = data;
 	});
 
+	export let authed = false;
+
 </script>
 
 <div
@@ -159,7 +161,7 @@
 				<path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/>
 			</svg>
 		</a>
-		{#if $brugeren && localStorage.getItem('lectio-cookie') && cookie}
+		{#if authed && cookie && $brugeren}
 			<a href="/indstillinger" class="btn mb-1 flex flex-col content-center h-14 w-full tooltip tooltip-right" data-tip="Indstillinger">
 				<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
 					<path

diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
@@ -6,23 +6,26 @@ export async function load({ cookies, url }) {
 	const redirectFromAuth = encodeURIComponent(url.href);
 	try {
 		const lectioCookie = cookies.get('lectio-cookie');
-		if (url.pathname !== '/auth') {
+		if (url.pathname !== '/auth' && url.pathname !== '/tos') {
 			if (!lectioCookie) {
+				// redirect to auth page and pass the redirect url
 				throw redirect(302, `/auth${redirectFromAuth ? `?redirect=${redirectFromAuth}` : ''}`);
 			}
+
 			// Check if the cookie is valid
 			const cookieIsValid = await validCookie(lectioCookie);
 			if (!cookieIsValid) {
 				// delete the cookie if it exists
 				if (cookies.get('lectio-cookie')) cookies.delete('lectio-cookie');
+
 				// redirect to auth page
 				throw redirect(302, `/auth${redirectFromAuth ? `?redirect=${redirectFromAuth}` : ''}`);
 			}
 		}
-		return { lectioCookie, pathname: url.pathname };
+		return { lectioCookie, pathname: url.pathname, authed: Boolean(lectioCookie) };
 	} catch (error) {
 		// redirect to auth page and pass the redirect url and delete the cookie
-		console.error('Cookie-check error: ',error);
+		console.error('Cookie-check error: ', error);
 		if (cookies.get('lectio-cookie')) cookies.delete('lectio-cookie');
 		throw redirect(302, `/auth${redirectFromAuth ? `?redirect=${redirectFromAuth}` : ''}`);
 	}

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -22,6 +22,8 @@
 	if (data.lectioCookie) localStorage.setItem('lectio-cookie', data.lectioCookie);
 	else localStorage.removeItem('lectio-cookie');
 
+	$: authed = Boolean(data.authed);
+
 	const app = $page.url.searchParams.get('app');
 	if (app === 'iOS') $mobile = 'iOS';
 	else if (app === 'none') localStorage.removeItem('mobile');
@@ -148,7 +150,7 @@
 
 	<PageLoadTopBar />
 	{#if $indstillinger?.sidebar && windowWidth > 768}
-		<SideBar />
+		<SideBar authed={authed}/>
 		<div class="md:ml-16">
 			<main class="md:w-[calc(100%-32px)] w-[calc(100%-16px)] md:pt-10 mx-2 md:mx-4 2xl:container 2xl:mx-auto 2xl:w-full">
 				<PageTransition pathname={data.pathname}>
@@ -157,7 +159,7 @@
 			</main>
 		</div>
 	{:else}
-		<NavBar>
+		<NavBar authed={authed}>
 			<main class="md:w-[calc(100%-32px)] w-[calc(100%-16px)] mx-2 md:mx-4 2xl:container 2xl:mx-auto 2xl:w-full">
 				<PageTransition pathname={data.pathname}>
 					<slot />