feat: add sign in and sign out logic

package.json

@@ -39,6 +39,7 @@
         "eslint-plugin-svelte": "^2.46.1",
         "globals": "^15.13.0",
         "jsdom": "^25.0.1",
+        "jwt-decode": "^4.0.0",
         "lucide-svelte": "^0.456.0",
         "msw": "^2.6.9",
         "postcss": "^8.4.49",

src/lib/backend-api.ts

@@ -90,7 +90,7 @@ export interface IAuthorController {
 }
 
 export interface IBackendController {
-    signIn(email: string, password: string): Promise<User>;
+    signIn(email: string, password: string): Promise<void>;
     signOut(): Promise<void>;
     requestEmailForgottenPassword(email: string): Promise<void>;
 

src/lib/components/composites/navigation-bar/NavigationBar.svelte

@@ -8,7 +8,7 @@
     import type { User } from "$lib/model/backend";
 
     interface Props {
-        user: User;
+        user?: User;
         backRef?: string | undefined;
         tabs: Tab[];
         defaultTabValue: (typeof tabs)[number]["value"];

src/lib/components/composites/navigation-bar/PaperNavigationBar.svelte

@@ -4,7 +4,7 @@
     import type { Paper, PaperSpec, User } from "$lib/model/backend";
 
     interface Props {
-        user: User;
+        user?: User;
         backRef?: string | undefined;
         paper: Paper | PaperSpec;
     }

src/lib/components/composites/navigation-bar/ProjectNavigationBar.svelte

@@ -5,7 +5,7 @@
 
     type TabValue = (typeof tabs)[number]["value"];
     interface Props {
-        user: User;
+        user?: User;
         project: Project;
         defaultTabValue: TabValue;
     }

src/lib/components/composites/navigation-bar/SimpleNavigationBar.svelte

@@ -4,7 +4,7 @@
     import type { User } from "$lib/model/backend";
 
     interface Props {
-        user: User;
+        user?: User;
         backRef?: string | undefined;
         title: string;
         tabs: Tab[];

src/lib/components/composites/navigation-bar/UserMenu.svelte

@@ -9,9 +9,10 @@
     import type { Icon } from "lucide-svelte";
     import type { User } from "$lib/model/backend";
     import UserAvatar from "$lib/components/composites/user-avatar/UserAvatar.svelte";
+    import { goto } from "$app/navigation";
 
     interface Props {
-        user: User;
+        user?: User;
     }
     const { user }: Props = $props();
 
@@ -47,6 +48,11 @@
             href: "/settings/account",
         },
     ];
+
+    function signOut() {
+        localStorage.removeItem("token");
+        goto("/signin");
+    }
 </script>
 
 <DropdownMenu.Root>
@@ -56,7 +62,11 @@
     <DropdownMenu.Content class="w-60" side="bottom" sideOffset={0} align="start">
         <DropdownMenu.Group>
             <DropdownMenu.GroupHeading>
-                {`${user.firstName} ${user.lastName}`}
+                {#if user}
+                    {`${user.firstName} ${user.lastName}`}
+                {:else}
+                    Loading User...
+                {/if}
             </DropdownMenu.GroupHeading>
             <DropdownMenu.Separator />
             <DropdownMenu.Group>
@@ -73,7 +83,7 @@
                 {/each}
             </DropdownMenu.Group>
             <DropdownMenu.Separator />
-            <DropdownMenu.Item>
+            <DropdownMenu.Item onclick={signOut}>
                 <LogOut class="mr-2 size-4" />
                 <span>Sign out</span>
                 <DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>

src/lib/components/composites/user-avatar/UserAvatar.svelte

@@ -5,14 +5,14 @@
     import X from "lucide-svelte/icons/x";
 
     interface Props {
-        user: User;
+        user?: User;
         reviewDecision?: ReviewDecision;
     }
 
     const { user, reviewDecision }: Props = $props();
 
     const getInitial = (text: string) => (text.length > 0 ? text[0].toUpperCase() : "");
-    const userInitials = `${getInitial(user.firstName)}${getInitial(user.lastName)}`;
+    const userInitials = `${getInitial(user?.firstName ?? "")}${getInitial(user?.lastName ?? "")}`;
 </script>
 
 <!--

src/lib/controller/backend-controller.ts

@@ -14,6 +14,7 @@ import type {
     AuthorSpec,
     Paper,
     PaperSpec,
+    SignInResponse,
 } from "../model/backend";
 import { AuthorController } from "./author-controller";
 import { HttpClient } from "./http-client";
@@ -33,9 +34,16 @@ export class BackendController implements IBackendController {
         return BackendController.instance;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async signIn(email: string, password: string): Promise<User> {
-        throw new Error("Method not implemented.");
+    async signIn(email: string, password: string): Promise<void> {
+        const payload = {
+            email: email,
+            password: password,
+        };
+        // TODO: Omit trailing slash, when backend doesn't hardcode unauthorized routes anymore
+        const response: SignInResponse = await this.client
+            .post("login/", payload)
+            .then((response) => response.json());
+        localStorage.setItem("token", response.token);
     }
 
     async signOut(): Promise<void> {

src/lib/controller/http-client.ts

@@ -1,3 +1,4 @@
+import { browser } from "$app/environment";
 import { PUBLIC_API_BASE_URL } from "$env/static/public";
 
 /**
@@ -37,12 +38,24 @@ export class HttpClient {
         body?: T,
         headers?: HeadersInit,
     ): Promise<Response> {
+        let jwt: string | null = null;
+        if (browser) {
+            jwt = localStorage.getItem("token");
+        }
+
+        const requestHeaders: Headers = new Headers({
+            "Content-Type": "application/json",
+            ...headers,
+        });
+        if (jwt) {
+            // TODO: Change to "Authorization" when backend is updated
+            // requestHeaders.set("Authorization", `Bearer ${jwt}`);
+            requestHeaders.set("authenticationToken", jwt);
+        }
+
         return fetch(`${this.basePath}/${path}`, {
             method,
-            headers: {
-                "Content-Type": "application/json",
-                ...headers,
-            },
+            headers: requestHeaders,
             body: body ? JSON.stringify(body) : undefined,
         });
     }

src/lib/current-user.ts

@@ -0,0 +1,28 @@
+import { goto } from "$app/navigation";
+import { jwtDecode } from "jwt-decode";
+import type { User } from "./model/backend";
+import { browser } from "$app/environment";
+
+/**
+ * Resolves the current user from the local storage token
+ *
+ * @param redirectOnMissing - When true, and the jwt is missing, the page will be redirected to the sign-in page
+ * @returns The currently signed in user - if they exist, otherwise undefined
+ */
+export function getCurrentUser(redirectOnMissing: boolean = true): User | undefined {
+    // If the script is not running in the browser, the local storage cannot be accessed
+    if (!browser) {
+        return undefined;
+    }
+
+    const jwt = localStorage.getItem("token");
+    if (jwt) {
+        return jwtDecode(jwt) as User;
+    }
+
+    // When no JWT is stored, redirect to the sign-in page
+    if (redirectOnMissing) {
+        goto("/signin");
+    }
+    return undefined;
+}

src/lib/model/backend.ts

@@ -88,3 +88,7 @@ export interface Author {
 }
 
 export type AuthorSpec = Omit<Author, "id">;
+
+export interface SignInResponse {
+    token: string;
+}

src/routes/(auth)/signin/+page.svelte

@@ -3,17 +3,33 @@
     import PasswordInput from "$lib/components/composites/input/PasswordInput.svelte";
     import { Button } from "$lib/components/primitives/button/index.js";
     import * as Card from "$lib/components/primitives/card/index.js";
+    import { BackendController } from "$lib/controller/backend-controller";
+    import CircleAlert from "lucide-svelte/icons/circle-alert";
+    import * as Alert from "$lib/components/primitives/alert/index.js";
+    import LoaderCircle from "lucide-svelte/icons/loader-circle";
+    import { goto } from "$app/navigation";
+    import { getCurrentUser } from "$lib/current-user";
 
     let email = $state("");
     let password = $state("");
+    let error = $state<string | undefined>(undefined);
+    let loading = $state(false);
+    const user = getCurrentUser();
 
-    function handleSubmit(event: Event) {
+    async function handleSubmit(event: Event) {
         event.preventDefault();
 
-        // Don't validate the input fields as they only need to match data on the server
-        const signInData = { email, password };
-        // TODO: CALL API TO SIGN IN
-        console.log("sign in with", signInData);
+        error = undefined;
+        loading = true;
+        await BackendController.getInstance()
+            .signIn(email, password)
+            .then(() => {
+                goto("/");
+            })
+            .catch((signInError) => {
+                error = signInError.message;
+            });
+        loading = false;
     }
 </script>
 
@@ -25,7 +41,16 @@
         <Card.Title class="text-3xl">Sign In</Card.Title>
         <Card.Description>Enter your credentials below to sign in to your account</Card.Description>
     </Card.Header>
-    <Card.Content class="flex flex-col w-full">
+    <Card.Content class="flex flex-col w-full gap-4">
+        {#if user}
+            <Alert.Root variant="default">
+                <CircleAlert class="size-4" />
+                <Alert.Title>Already Signed In</Alert.Title>
+                <Alert.Description>
+                    Do you want to preceed to the <a href="/" class="underline">Home Page</a>?
+                </Alert.Description>
+            </Alert.Root>
+        {/if}
         <form class="flex flex-col gap-5" onsubmit={handleSubmit}>
             <Input
                 class="w-full"
@@ -37,11 +62,25 @@
                 bind:value={email}
             />
             <PasswordInput class="w-full" showForgotPasswordLink bind:value={password} />
-            <Button type="submit" class="w-full">Sign In</Button>
+            {#if loading}
+                <Button type="submit" class="w-full" disabled>
+                    <LoaderCircle class="animate-spin" />
+                    Signing In
+                </Button>
+            {:else}
+                <Button type="submit" class="w-full">Sign In</Button>
+            {/if}
         </form>
-        <div class="mt-4 text-center text-sm">
+        <div class="text-center text-sm">
             You don't have an account?
             <a href="/signup" class="underline"> Sign Up </a>
         </div>
+        {#if error}
+            <Alert.Root variant="destructive">
+                <CircleAlert class="size-4" />
+                <Alert.Title>Error</Alert.Title>
+                <Alert.Description>{error}</Alert.Description>
+            </Alert.Root>
+        {/if}
     </Card.Content>
 </Card.Root>

src/routes/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import SimpleNavigationBar from "$lib/components/composites/navigation-bar/SimpleNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
-    const { data } = $props();
-    const { user } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>

src/routes/archivedprojects/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import SimpleNavigationBar from "$lib/components/composites/navigation-bar/SimpleNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
-    const { data } = $props();
-    const { user } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>

src/routes/componentsusage/+page.svelte

@@ -2,9 +2,11 @@
     import SimpleNavigationBar from "$lib/components/composites/navigation-bar/SimpleNavigationBar.svelte";
     import SearchBar from "$lib/components/composites/search-bar/SearchBar.svelte";
     import PaperListEntry from "$lib/components/composites/paper-components/PaperListEntry.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
     const { data } = $props();
-    const { user, paper, paper2 } = data;
+    const { paper, paper2 } = data;
+    const user = getCurrentUser();
 
     const searchPlaceholderText: string = "Search paper";
 </script>

src/routes/invitations/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import SimpleNavigationBar from "$lib/components/composites/navigation-bar/SimpleNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
-    const { data } = $props();
-    const { user } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>

src/routes/paper/[paperId]/+page.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import PaperNavigationBar from "$lib/components/composites/navigation-bar/PaperNavigationBar.svelte";
+    import { getCurrentUser } from "$lib/current-user.js";
 
     const { data } = $props();
-    const { user, paper } = data;
+    const { paper } = data;
+    const user = getCurrentUser();
 </script>
 
 <svelte:head>