fix bugs, redo layout, reorg.

4 files changed, 222 insertions, 18 deletions

diff --git a/fe/src/lib/forms/AddForm.svelte b/fe/src/lib/forms/AddForm.svelte
index f85cce6..bbc8356 100644
--- a/fe/src/lib/forms/AddForm.svelte
+++ b/fe/src/lib/forms/AddForm.svelte
@@ -11,21 +11,10 @@
     const statistic: Statistic = newStatistic();
 
     function newStatistic(): Statistic {
-        let now = new Date(),
-            month,
-            day,
-            year;
-
-        month = `${now.getMonth() + 1}`;
-        day = `${now.getDate()}`;
-        year = now.getFullYear();
-        if (month.length < 2) month = "0" + month;
-        if (day.length < 2) day = "0" + day;
-
-        const date = [year, month, day].join("-");
+        let date = new Date().toString();
 
         return {
-            user_id: $user!.uuid,
+            user_id: $user!.id,
             date,
             quantity: 1
         };
@@ -37,7 +26,7 @@
 
     async function handleSubmitStat()
     {
-        const { date, quantity } = statistic;
+        const { user_id, date, quantity } = statistic;
         await fetch(apiURL("stats"), {
             method: "POST",
             headers: {
@@ -45,7 +34,7 @@
             },
             body: JSON.stringify({
                 date: new Date(date),
-                user_id: 2,
+                user_id,
                 quantity
             })
         });
@@ -54,12 +43,12 @@
 
 </script>
 
-<dialog {open} on:submit={handleSubmitStat}>
+<dialog id="addForm" {open} on:submit={handleSubmitStat}>
     <h2>Add Water</h2>
     <form method="dialog">
         <div class="form input group">
             <label for="date">Date:</label>
-            <input bind:value={statistic.date} id="date" name="date" type="date" />
+            <input bind:value={statistic.date} id="date" name="date" type="datetime-local" />
         </div>
         <div class="form input group">
             <label for="quantity">Quantity:</label>
@@ -75,4 +64,4 @@
         <button on:click={closeDialog}>Cancel</button>
         <button type="submit">Submit</button>
     </form>
-</dialog>
\ No newline at end of file
+</dialog>
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>
diff --git a/fe/src/lib/forms/PreferencesForm.svelte b/fe/src/lib/forms/PreferencesForm.svelte
new file mode 100644
index 0000000..79663d1
--- /dev/null
+++ b/fe/src/lib/forms/PreferencesForm.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { user, preferences, token } from "../../stores/auth";
+  import { createEventDispatcher, onDestroy, onMount } from "svelte";
+  import type { User } from "../../types";
+  import { apiURL } from "../../utils";
+
+  export let open: boolean;
+
+  let sizes: Array<any>;
+  let selectedSize: number = 1;
+  let color: string = "#000000";
+
+  const dispatch = createEventDispatcher();
+
+  const unsubscribe = preferences.subscribe(
+    (value: any) => {
+      if (value) {
+        color = value.color;
+        selectedSize = value.size_id;
+      }
+    },
+  );
+
+  function closeDialog() {
+    dispatch("close");
+  }
+
+  async function updateUserPreferences() {
+    const res = await fetch(apiURL("user/preferences"), {
+      method: "PATCH",
+      headers: {
+        Authorization: `Bearer ${$token}`,
+      },
+      body: JSON.stringify($preferences),
+    });
+  }
+
+  async function getUserPreferences() {
+    const res = await fetch(apiURL(`user/${($user as User)!.id}/preferences`),
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${$token}`,
+        },
+      },
+    );
+    const updatePreferences = await res.json();
+    preferences.set(updatePreferences);
+  }
+
+  async function onPreferencesSave(): Promise<void> {
+    preferences.update((value) => ({
+      ...value!,
+      size_id: selectedSize,
+      color: color,
+    }));
+
+    await updateUserPreferences();
+    await getUserPreferences();
+
+    dispatch("close");
+  }
+
+  onMount(() => {
+    fetch(apiURL("sizes"), {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${$token}`,
+      },
+    })
+      .then((res) => res.json())
+      .then((val) => (sizes = val));
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
+</script>
+
+<dialog {open} on:submit|preventDefault={onPreferencesSave}>
+  <h2>User Preferences</h2>
+  <form method="dialog">
+    <div class="form input group">
+      <label for="color">Color</label>
+      <input
+        id="color"
+        name="color"
+        type="color"
+        bind:value={color}
+      />
+    </div>
+    <div class="form input group">
+      <label for="size">Bottle Size</label>
+      <select
+        bind:value={selectedSize}
+      >
+        {#if sizes}
+          {#each sizes as size}
+            <option value={size.id}>{size.size} {size.unit}</option>
+          {/each}
+        {/if}
+      </select>
+    </div>
+    <button on:click={closeDialog}>Cancel</button>
+    <button type="submit">Save</button>
+  </form>
+</dialog>
+
+<style>
+  /* dialog {
+    background: white;
+    color: black;
+  }
+
+  input[type="color"] {
+    width: 4em;
+    height: 4em;
+  } */
+</style>
diff --git a/fe/src/lib/forms/index.ts b/fe/src/lib/forms/index.ts
new file mode 100644
index 0000000..ac4e63b
--- /dev/null
+++ b/fe/src/lib/forms/index.ts
@@ -0,0 +1,10 @@
+import AddForm from "./AddForm.svelte";
+import LoginForm from "./LoginForm.svelte";
+import PreferencesForm from "./PreferencesForm.svelte";
+
+
+export {
+  AddForm,
+  LoginForm,
+  PreferencesForm
+};
\ No newline at end of file