fixes(frontend): Made the overlay transparent & redirect on login

The overlay that is used when the menubar is used is now actually
transparent

When logging in, actually always redirect to somewhere
(if not asked -> redirect to /)

frontend/index.html

@@ -17,8 +17,8 @@
 			<span class="arrow back">&lt;</span>
 		</button>
 		<div id="header-title" class="text-white text-lf text-semibold ps-4 shadow-md font-mono"></div>
-	  <div class="text-white text-lf ps-4 font-mono"> </div>
+		<div class="text-white text-lf ps-4 font-mono"> </div>
-  </header>
+	</header>
 
 	<!-- Sidebar -->
 	<aside id="sidebar"
@@ -34,9 +34,11 @@
 		</nav>
 	</aside>
 
+	<div class="fixed top-0 left-0 opacity-40" hidden> <!-- >this is used so tailwind create the class styles... -->
+	</div>
 	<!-- Overlay -->
 	<div id="overlay"
-		class="fixed top-14 left-0 right-0 bottom-0 bg-black bg-opacity-40 opacity-0 pointer-events-none transition-opacity duration-300 z-30">
+		class="fixed top-14 left-0 right-0 bottom-0 bg-black opacity-0 pointer-events-none transition-opacity duration-300 z-30">
 	</div>
 
 	<!-- Main content -->

frontend/src/carousel/index.ts

@@ -7,6 +7,7 @@ const overlay = document.querySelector('#overlay')!;
 menuBtn.addEventListener('click', () => {
 	sidebar.classList.toggle('-translate-x-full')
 	overlay.classList.toggle('opacity-0');
+	overlay.classList.toggle('opacity-40');
 	overlay.classList.toggle('pointer-events-none');
 	menuBtn.classList.toggle('flipped');
 });
@@ -14,4 +15,5 @@ menuBtn.addEventListener('click', () => {
 overlay.addEventListener('click', () => {
 	sidebar.classList.add('-translate-x-full');
 	overlay.classList.add('opacity-0', 'pointer-events-none');
+	overlay.classList.remove('opacity-40');
 });

frontend/src/pages/login/login.ts

@@ -17,7 +17,11 @@ import { updateUser } from "@app/auth";
 
 const TOTP_LENGTH = 6;
 
-async function handleOtp(app: HTMLElement, token: string, returnTo: string | null) {
+async function handleOtp(
+	app: HTMLElement,
+	token: string,
+	returnTo: string | null,
+) {
 	app.innerHTML = totpHtml;
 
 	const container = app.querySelector("#totp-container")!;
@@ -76,19 +80,18 @@ async function handleOtp(app: HTMLElement, token: string, returnTo: string | nul
 		if (code.length === TOTP_LENGTH && /^[0-9]+$/.test(code)) {
 			let res = await client.loginOtp({
 				loginOtpRequest: {
-					code, token,
+					code,
-				}
+					token,
-			})
+				},
+			});
 
 			if (res.kind === "success") {
 				Cookie.set("token", res.payload.token, {
 					path: "/",
 					sameSite: "lax",
 				});
-				if (returnTo !== null) navigateTo(returnTo);
+				navigateTo(returnTo ?? "/");
-				else navigateTo("/");
+			} else if (res.kind === "failed") {
-			}
-			else if (res.kind === "failed") {
 				showError(`Failed to authenticate: ${res.msg}`);
 			}
 		}
@@ -97,7 +100,6 @@ async function handleOtp(app: HTMLElement, token: string, returnTo: string | nul
 	inputs[0].focus();
 }
 
-
 async function handleLogin(
 	_url: string,
 	_args: RouteHandlerParams,
@@ -131,7 +133,7 @@ async function handleLogin(
 				if (returnTo !== null) {
 					bReturnTo.parentElement!.hidden = false;
 					bReturnTo.addEventListener("click", async () => {
-						if (returnTo !== null) navigateTo(returnTo);
+						navigateTo(returnTo ?? "/");
 					});
 				}
 			},
@@ -189,11 +191,15 @@ async function handleLogin(
 							setTitle(
 								`Welcome ${user.guest ? "[GUEST] " : ""}${user.name}`,
 							);
-							if (returnTo !== null) navigateTo(returnTo);
+							navigateTo(returnTo ?? "/");
 							break;
 						}
 						case "otpRequired": {
-							return await handleOtp(app!, res.payload.token, returnTo);
+							return await handleOtp(
+								app!,
+								res.payload.token,
+								returnTo,
+							);
 						}
 						case "failed": {
 							showError(`Failed to login: ${res.msg}`);
@@ -209,7 +215,9 @@ async function handleLogin(
 				document.querySelector<HTMLButtonElement>("#bGuestLogin");
 			bLoginAsGuest?.addEventListener("click", async () => {
 				try {
-					const res = await client.guestLogin({ guestLoginRequest: { name: undefined } });
+					const res = await client.guestLogin({
+						guestLoginRequest: { name: undefined },
+					});
 					switch (res.kind) {
 						case "success": {
 							Cookie.set("token", res.payload.token, {
@@ -224,7 +232,7 @@ async function handleLogin(
 							setTitle(
 								`Welcome ${user.guest ? "[GUEST] " : ""}${user.name}`,
 							);
-							if (returnTo !== null) navigateTo(returnTo);
+							navigateTo(returnTo ?? "/");
 							break;
 						}
 						case "failed": {