fix bugs, redo layout, reorg.

1 files changed, 86 insertions, 0 deletions

diff --git a/fe/src/lib/forms/LoginForm.svelte b/fe/src/lib/forms/LoginForm.svelte
new file mode 100644
index 0000000..88d4479
--- /dev/null
+++ b/fe/src/lib/forms/LoginForm.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { token, user, preferences } from "../../stores/auth";
+  import Card from "../Card.svelte";
+  import { apiURL } from "../../utils";
+
+  let credentials: CredentialObject = {
+    username: "",
+    password: "",
+  };
+
+  let error: string | null = null;
+
+  interface CredentialObject {
+    username: string;
+    password: string;
+  }
+
+  function prepareCredentials({
+    username,
+    password,
+  }: CredentialObject): string {
+    return btoa(`${username}:${password}`);
+  }
+
+  async function onSubmit(e: Event) {
+    if (!credentials.username || !credentials.password) {
+      error = "please enter your username and password";
+      return;
+    }
+    const auth = prepareCredentials(credentials);
+
+    const response = await fetch(apiURL("auth"), {
+      method: "POST",
+      headers: {
+        Authorization: `Basic ${auth}`,
+      },
+    });
+
+    if (response.status === 401) {
+      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.setPreference(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>
+</Card>