Implement password management and loading modal in login flow

Author: bluescorpian

frontend/src/App.svelte

@@ -1,8 +1,24 @@
 <script lang="ts">
-	import { Col, Container, Row } from "@sveltestrap/sveltestrap";
+	import {
+		Col,
+		Container,
+		Modal,
+		ModalBody,
+		ModalHeader,
+		Row,
+		Spinner,
+	} from "@sveltestrap/sveltestrap";
 	import SelectTrackedStatiosn from "./lib/SelectTrackedStations.svelte";
 	import Stations from "./lib/Stations.svelte";
 	import Login from "./lib/Login.svelte";
+	import { checkSavedPassword } from "./lib/auth.svelte";
+
+	let checkingPassword: boolean = $state(true);
+	let foundPassword: boolean = $state(false);
+	checkSavedPassword().then((fp) => {
+		foundPassword = fp;
+		checkingPassword = false;
+	});
 </script>
 
 <main>
@@ -23,5 +39,14 @@
 			></Row
 		>
 	</Container>
-	<Login></Login>
+	{#if checkingPassword}
+		<Modal isOpen={checkingPassword} centered={true}>
+			<ModalHeader>Logging In...</ModalHeader>
+			<ModalBody>
+				<Spinner></Spinner>
+			</ModalBody>
+		</Modal>
+	{:else if !foundPassword}
+		<Login></Login>
+	{/if}
 </main>

frontend/src/lib/Login.svelte

@@ -8,7 +8,7 @@
 		ModalFooter,
 		ModalHeader,
 	} from "@sveltestrap/sveltestrap";
-	import { authState } from "./auth.svelte";
+	import { authState, setPassword } from "./auth.svelte";
 
 	let open = $state(true);
 	let loggingIn = $state(false);
@@ -33,7 +33,7 @@
 			.then(async (res) => {
 				if (res.status === 200) {
 					authState.loggedIn = true;
-					authState.password = password;
+					setPassword(password);
 					open = false;
 				} else {
 					error = (await res.text()) || res.statusText;
@@ -46,8 +46,6 @@
 			.finally(() => {
 				loggingIn = false;
 			});
-		// authState.loggedIn = true;
-		// open = false;
 	}
 </script>
 
@@ -72,8 +70,10 @@
 			<Button color="primary" type="submit" disabled={loggingIn}
 				>Login</Button
 			>
-			<Button color="secondary" onclick={() => (open = false)}
-				>Guest</Button
+			<Button
+				color="secondary"
+				type="button"
+				onclick={() => (open = false)}>Guest</Button
 			>
 		</ModalFooter>
 	</form>

frontend/src/lib/SelectTrackedStations.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button, Input, InputGroup } from "@sveltestrap/sveltestrap";
-	import { authState } from "./auth.svelte";
+	import { authState, getPassword } from "./auth.svelte";
 
 	let loading = $state(true);
 	$effect(() => {
@@ -37,7 +37,7 @@
 			method: "POST",
 			headers: {
 				"Content-Type": "application/x-www-form-urlencoded",
-				Authorization: authState.password,
+				Authorization: getPassword() ?? "",
 			},
 			body: formData.toString(),
 		})

frontend/src/lib/auth.svelte.ts

@@ -1,4 +1,41 @@
-export let authState: { loggedIn: boolean; password: string } = $state({
+export let authState: { loggedIn: boolean } = $state({
 	loggedIn: false,
-	password: "",
 });
+
+export function getPassword(): string | null {
+	return localStorage.getItem("password");
+}
+
+export function setPassword(password: string) {
+	debugger;
+	localStorage.setItem("password", password);
+}
+
+export async function checkSavedPassword(): Promise<boolean> {
+	const savedPassword = localStorage.getItem("password");
+	if (savedPassword !== null) {
+		const formData = new URLSearchParams({
+			password: savedPassword,
+		});
+		return fetch(import.meta.env.VITE_API_URL + "/login", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/x-www-form-urlencoded",
+			},
+			body: formData.toString(),
+		})
+			.then(async (res) => {
+				if (res.status === 200) {
+					authState.loggedIn = true;
+					return true;
+				} else {
+					throw res;
+				}
+			})
+			.catch((err) => {
+				localStorage.removeItem("password");
+				return false;
+			});
+	}
+	return false;
+}