feat: Implement app state store & fix authentication for tvs

src/lib/pages/LoginPage.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
-	import { reiverrApi } from '../apis/reiverr/reiverrApi';
-	import { authenticationToken } from '../stores/localstorage.store';
+	import { getReiverrApiClient } from '../apis/reiverr/reiverr-api';
+	import Container from '../../Container.svelte';
+	import { appState } from '../stores/app-state.store';
 
-	let name: string;
-	let password: string;
+	let name: string = 'test';
+	let password: string = 'test';
 	let error: string | undefined = undefined;
 
+	let input0: HTMLInputElement;
+	let input1: HTMLInputElement;
+	let input2: HTMLInputElement;
+
 	function handleLogin() {
-		reiverrApi
-			.getApi()
+		getReiverrApiClient()
 			.POST('/auth', {
 				body: {
 					name,
@@ -19,10 +23,10 @@
 				if (res.error?.statusCode === 401) {
 					error = 'Invalid credentials. Please try again.';
 				} else if (res.error) {
-					error = res.error.message;
+					error = 'Error occurred: ' + res.error.message;
 				} else {
 					const token = res.data.accessToken;
-					authenticationToken.set(token);
+					appState.setToken(token);
 					window.location.reload();
 				}
 			})
@@ -32,17 +36,36 @@
 	}
 </script>
 
-<div class="flex flex-col">
+<Container class="flex flex-col" focusOnMount>
 	{#if error}
 		<div class="text-red-300">{error}</div>
 	{/if}
 
 	<div>
-		Name: <input class="bg-stone-900" type="text" bind:value={name} />
+		Server:
+		<Container on:click={() => input0?.focus()}>
+			<input
+				class="bg-stone-900"
+				type="text"
+				value={$appState.serverBaseUrl}
+				on:change={(e) => appState.setBaseUrl(e?.target?.value)}
+				bind:this={input0}
+			/>
+		</Container>
 	</div>
 
 	<div>
-		Password: <input class="bg-stone-900" type="password" bind:value={password} />
+		Name:
+		<Container on:click={() => input1?.focus()}>
+			<input class="bg-stone-900" type="text" bind:value={name} bind:this={input1} />
+		</Container>
 	</div>
-	<button on:click={handleLogin}>Submit</button>
-</div>
+
+	<div>
+		Password:
+		<Container on:click={() => input2?.focus()}>
+			<input class="bg-stone-900" type="password" bind:value={password} bind:this={input2} />
+		</Container>
+	</div>
+	<Container on:click={handleLogin}>Submit</Container>
+</Container>

src/lib/pages/ManagePage.svelte

@@ -1,5 +1,17 @@
-<script lang="ts">
-	import Container from '../../Container.svelte';
-</script>
-
-<Container>ManagePage</Container>
+<script lang="ts">
+	import Container from '../../Container.svelte';
+	import { appState } from '../stores/app-state.store';
+	import { useNavigate } from 'svelte-navigator';
+
+	const navigate = useNavigate();
+	function handleLogout() {
+		console.log('Hello world');
+		appState.setToken(undefined);
+		// window.location.replace('/');
+		window.location.reload();
+	}
+</script>
+
+<Container class="pl-24">
+	<Container on:click={handleLogout} class="hover:bg-red-500">Log Out</Container>
+</Container>