1 files changed, 62 insertions, 43 deletions

diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/LoginForm.svelte
index 499a457..bf6d9ad 100644
--- a/fe/src/lib/LoginForm.svelte
+++ b/fe/src/lib/LoginForm.svelte
@@ -1,66 +1,85 @@
-<script lang='ts'>
-import { token, user, preferences } from '../stores/auth';
-import Card from './Card.svelte';
+<script lang="ts">
+  import { token, user, preferences } from "../stores/auth";
+  import Card from "./Card.svelte";
 
-let credentials: CredentialObject = {
-    username: '',
-    password: ''
-}
+  let credentials: CredentialObject = {
+    username: "",
+    password: "",
+  };
 
-let error;
+  let error: string | null = null;
 
-interface CredentialObject {
+  interface CredentialObject {
     username: string;
     password: string;
-}
+  }
 
-function prepareCredentials ({ username, password }: CredentialObject): string {
+  function prepareCredentials({
+    username,
+    password,
+  }: CredentialObject): string {
     return btoa(`${username}:${password}`);
-}
+  }
 
-async function onSubmit (e) {
+  async function onSubmit(e: Event) {
     if (!credentials.username || !credentials.password) {
-        error = 'please enter your username and password';
-        return;
+      error = "please enter your username and password";
+      return;
     }
-   const auth = prepareCredentials(credentials);
+    const auth = prepareCredentials(credentials);
 
-   const response = await fetch('http://localhost:8080/api/v1/auth', {
-        method: 'POST',
-        headers: {
-            'Authorization': `Basic ${auth}`,
-        },
-   });
+    const response = await fetch("http://localhost:8080/api/v1/auth", {
+      method: "POST",
+      headers: {
+        Authorization: `Basic ${auth}`,
+      },
+    });
 
     if (response.status === 401) {
-        error = "Your username or password is wrong";
-        return;
+      error = "Your username or password is wrong";
+      return;
     }
 
     if (response.ok) {
-        const { token: apiToken, user: userData, preferences: userPreferences } = await response.json();
-        user.setUser(userData);
-        preferences.set(userPreferences);
-        token.authenticate(apiToken);
+      const {
+        token: apiToken,
+        user: userData,
+        preferences: userPreferences,
+      } = await response.json();
+      user.setUser(userData);
+      preferences.set(userPreferences);
+      token.authenticate(apiToken);
     }
 
     error = null;
-}
+  }
 </script>
 
 <Card>
-    <form class="form" on:submit|preventDefault={onSubmit}>
-        <div class='form input group'>
-            <label for="username">Username</label>
-            <input bind:value={credentials.username} id="username" name='username' type="text" autocomplete="username" />
-        </div>
-        <div class='form input group'>
-            <label for="password">Password</label>
-            <input bind:value={credentials.password} id="password" name='password' type="password" autocomplete="current-password"/>
-        </div>
-        {#if error}
-            <p class="error">{error}</p>
-        {/if}
-        <button type="submit">Log in</button>
-    </form>
+  <form class="form" on:submit|preventDefault={onSubmit}>
+    <div class="form input group">
+      <label for="username">Username</label>
+      <input
+        bind:value={credentials.username}
+        id="username"
+        name="username"
+        type="text"
+        autocomplete="username"
+      />
+    </div>
+    <div class="form input group">
+      <label for="password">Password</label>
+      <input
+        bind:value={credentials.password}
+        id="password"
+        name="password"
+        type="password"
+        autocomplete="current-password"
+      />
+    </div>
+    {#if error}
+      <p class="error">{error}</p>
+    {/if}
+    <button type="submit">Log in</button>
+  </form>
 </Card>