Add routes for preference, clean up and add types

21 files changed, 495 insertions, 218 deletions

diff --git a/api/internal/controllers/auth.go b/api/internal/controllers/auth.go
index 58653d0..ab2fbbb 100644
--- a/api/internal/controllers/auth.go
+++ b/api/internal/controllers/auth.go
@@ -38,23 +38,27 @@ func AuthHandler (c *gin.Context) {
 
         var user models.User
         var preference models.Preference
-        var size models.Size
 
-        row := db.QueryRow("SELECT name, uuid, password, color, size, unit FROM Users u INNER JOIN Preferences p ON p.user_id = u.id INNER JOIN Sizes s ON p.size_id = s.id WHERE u.name = ?", username)
-        if err := row.Scan(&user.Name, &user.UUID, &user.Password, &preference.Color, &size.Size, &size.Unit); err != nil {
+        row := db.QueryRow("SELECT id as 'id', name, uuid, password FROM Users WHERE name = ?", username)
+        if err := row.Scan(&user.ID, &user.Name, &user.UUID, &user.Password); err != nil {
                 if errors.Is(err, sql.ErrNoRows) {
-                        c.AbortWithStatus(http.StatusUnauthorized)
+                        c.JSON(http.StatusNotFound, gin.H{"error": err.Error()})
                         return
                 }
         }
 
+        row = db.QueryRow("SELECT id, color, size_id, user_id FROM Preferences where user_id = ?", user.ID)
+        if err := row.Scan(&preference.ID, &preference.Color, &preference.SizeID, &preference.UserID); err != nil {
+                if errors.Is(err, sql.ErrNoRows) {
+                        c.JSON(http.StatusNotFound, gin.H{"error": err.Error()})
+                }
+        }
+
         if err := bcrypt.CompareHashAndPassword([]byte(user.Password), []byte(password)); err != nil {
-                c.AbortWithStatus(http.StatusUnauthorized)
+                c.JSON(http.StatusUnauthorized, gin.H{"error": err.Error()})
                 return
         }
 
-        preference.Size = size
-
         // Generate a simple API token
         apiToken := generateToken()
         c.JSON(http.StatusOK, gin.H{"token": apiToken, "user": user, "preferences": preference})
diff --git a/api/internal/controllers/preferences.go b/api/internal/controllers/preferences.go
new file mode 100644
index 0000000..a1bcf4f
--- /dev/null
+++ b/api/internal/controllers/preferences.go
@@ -0,0 +1,45 @@
+package controllers
+
+import (
+        "github.com/gin-gonic/gin"
+        "net/http"
+        "database/sql"
+        "water/api/internal/database"
+        "water/api/internal/models"
+)
+
+func GetSizes(c *gin.Context) {
+                db := database.EstablishDBConnection()
+        defer func(db *sql.DB) {
+                err := db.Close()
+                if err != nil {
+                        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+                }
+        }(db)
+        
+        rows, err := db.Query("SELECT id, size, unit  FROM Sizes")
+        if err != nil {
+                c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+                return
+        }
+        defer func(rows *sql.Rows) {
+                err := rows.Close()
+                if err != nil {
+                        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+                        return
+                }
+        }(rows)
+
+        var data []models.Size
+
+        for rows.Next() {
+                var size models.Size
+                if err := rows.Scan(&size.ID, &size.Size, &size.Unit); err != nil {
+                        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+                        return
+                }
+                data = append(data, size)
+        }
+
+        c.JSON(http.StatusOK, data)
+}
diff --git a/api/internal/controllers/user.go b/api/internal/controllers/user.go
index 76dedc8..dbb09cf 100644
--- a/api/internal/controllers/user.go
+++ b/api/internal/controllers/user.go
@@ -1,17 +1,68 @@
 package controllers
 
 import (
-        "github.com/gin-gonic/gin"
+        "database/sql"
+        "errors"
+        "log"
         "net/http"
+        "water/api/internal/database"
+        "water/api/internal/models"
+
+        "github.com/gin-gonic/gin"
 )
 
 func GetUser(c *gin.Context) {
         c.JSON(http.StatusOK, gin.H{"message": "User found"})
 }
 func GetUserPreferences(c *gin.Context) {
-        c.JSON(http.StatusOK, gin.H{"message": "Preferences fetched successfully"})
+        db := database.EstablishDBConnection()
+        defer func(db *sql.DB) {
+                err := db.Close()
+                if err != nil {
+                        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+                        return
+                }
+        }(db)
+
+        var preference models.Preference
+
+        row := db.QueryRow("SELECT id, user_id, color, size_id FROM Preferences WHERE user_id = ?", c.Param("id"))
+        if err := row.Scan(&preference.ID, &preference.UserID, &preference.Color, &preference.SizeID); err != nil {
+                if errors.Is(err, sql.ErrNoRows) {
+                        c.JSON(http.StatusNotFound, gin.H{"error": err.Error()})
+                        return
+                } else {
+                        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+                        return
+                }
+        }
+
+        c.JSON(http.StatusOK, preference)
 }
 
 func UpdateUserPreferences(c *gin.Context) {
-        c.JSON(http.StatusOK, gin.H{"message": "Preferences updated successfully"})
-}
\ No newline at end of file
+        db := database.EstablishDBConnection()
+        defer func(db *sql.DB) {
+                err := db.Close()
+                if err != nil {
+                        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+                        return
+                }
+        }(db)
+
+        var newPreferences models.Preference
+        if err := c.BindJSON(&newPreferences); err != nil {
+                c.JSON(http.StatusUnprocessableEntity, gin.H{"error": err.Error()})
+                return
+        }
+
+        log.Printf("newPreferences: %v", newPreferences)
+
+        _, err := db.Exec("UPDATE Preferences SET color = ?, size_id = ? WHERE id = ?", newPreferences.Color, newPreferences.SizeID, newPreferences.ID)
+        if err != nil {
+                c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
+                return
+        }
+
+        c.Status(http.StatusNoContent)
+}
diff --git a/api/internal/middleware/middleware.go b/api/internal/middleware/middleware.go
index 819f1e5..aa27fb8 100644
--- a/api/internal/middleware/middleware.go
+++ b/api/internal/middleware/middleware.go
@@ -2,10 +2,11 @@ package middleware
 
 import (
         "errors"
-        "github.com/gin-gonic/gin"
         "log"
         "net/http"
         "strings"
+
+        "github.com/gin-gonic/gin"
 )
 
 func TokenRequired() gin.HandlerFunc {
@@ -27,7 +28,7 @@ func CORSMiddleware() gin.HandlerFunc {
                 c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
                 c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
                 c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With")
-                c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT")
+                c.Writer.Header().Set("Access-Control-Allow-Methods", "POST, OPTIONS, GET, PUT, PATCH")
 
                 if c.Request.Method == "OPTIONS" {
                         log.Println(c.Request.Header)
@@ -52,4 +53,4 @@ func checkForTokenInContext(c *gin.Context) (string, error) {
         }
 
         return parts[1], nil
-}
\ No newline at end of file
+}
diff --git a/api/internal/models/auth.go b/api/internal/models/auth.go
index 41344d5..fa7dbe4 100644
--- a/api/internal/models/auth.go
+++ b/api/internal/models/auth.go
@@ -3,7 +3,7 @@ package models
 import "time"
 
 type Token struct {
-        ID        int64     `json:"-"`
+        ID        int64     `json:"id"`
         UserID    int64     `json:"user_id"`
         Token     string    `json:"token"`
         CreatedAt time.Time `json:"created_at"`
diff --git a/api/internal/models/preferences.go b/api/internal/models/preferences.go
index cbbd47c..8022099 100644
--- a/api/internal/models/preferences.go
+++ b/api/internal/models/preferences.go
@@ -1,14 +1,14 @@
 package models
 
 type Preference struct {
-        ID     int64  `json:"-"`
+        ID     int64  `json:"id"`
         Color  string `json:"color"`
-        UserID int64  `json:"-"`
-        Size   Size   `json:"size"`
+        UserID int64  `json:"user_id"`
+        SizeID   int64   `json:"size_id"`
 }
 
 type Size struct {
-        ID   int64  `json:"-"`
+        ID   int64  `json:"id"`
         Size int64  `json:"size"`
         Unit string `json:"unit"`
 }
diff --git a/api/internal/models/statistics.go b/api/internal/models/statistics.go
index 457e6a0..7dceb3a 100644
--- a/api/internal/models/statistics.go
+++ b/api/internal/models/statistics.go
@@ -3,7 +3,7 @@ package models
 import "time"
 
 type Statistic struct {
-        ID       int64     `json:"-"`
+        ID       int64     `json:"id"`
         Date     time.Time `json:"date"`
         User     User      `json:"user"`
         Quantity int       `json:"quantity"`
diff --git a/api/internal/models/user.go b/api/internal/models/user.go
index 2a3e6fd..ca5daa4 100644
--- a/api/internal/models/user.go
+++ b/api/internal/models/user.go
@@ -3,7 +3,7 @@ package models
 import "github.com/google/uuid"
 
 type User struct {
-        ID       int64     `json:"-"`
+        ID       int64     `json:"id"`
         Name     string    `json:"name"`
         UUID     uuid.UUID `json:"uuid"`
         Password string    `json:"-"`
diff --git a/api/internal/router/router.go b/api/internal/router/router.go
index adf96d0..3c86b8c 100644
--- a/api/internal/router/router.go
+++ b/api/internal/router/router.go
@@ -17,13 +17,14 @@ func SetupRouter() *gin.Engine {
         api := r.Group("api/v1")
 
         api.POST("/auth", controllers.AuthHandler)
+        api.GET("/sizes", middleware.TokenRequired(), controllers.GetSizes)
+        api.PATCH("/user/preferences", controllers.UpdateUserPreferences)
 
-        user := api.Group("/user/:uuid")
+        user := api.Group("/user/:id")
         user.Use(middleware.TokenRequired())
         {
                 user.GET("", controllers.GetUser)
                 user.GET("preferences", controllers.GetUserPreferences)
-                user.PATCH("preferences", controllers.UpdateUserPreferences)
         }
 
         stats := api.Group("/stats")
diff --git a/fe/src/app.css b/fe/src/app.css
index de19b52..c24c713 100644
--- a/fe/src/app.css
+++ b/fe/src/app.css
@@ -109,6 +109,10 @@ button:focus-visible {
     padding: 1em;
 }
 
+.form.input.group input[type=color] {
+    padding: 0;
+}
+
 .form button[type=submit] {
     align-self: flex-end;
     background: var(--submit);
diff --git a/fe/src/http.ts b/fe/src/http.ts
index cc5a906..3b2a4f0 100644
--- a/fe/src/http.ts
+++ b/fe/src/http.ts
@@ -1,60 +1,92 @@
-export default class HttpClient {
-    private static instance: HttpClient;
+let instance;
+const baseUrl = import.meta.env?.VITE_API_BASE_URL ?? "http://localhost:8080/api/v1";
+
+class HttpClient {
     baseURL: string;
-    
-    private constructor(baseURL: string) {
+    commonHeaders: Headers;
+
+    constructor(baseURL: string) {
         this.baseURL = baseURL;
+        this.commonHeaders = new Headers({
+            "Content-Type": "application/json"
+        })
+        if (instance) {
+            throw new Error("New instance cannot be created!");
+        }
+
+        instance = this;
     }
-    
+
     private getURL(endpoint: string): URL {
-        return new URL(endpoint, this.baseURL)
+        return new URL(endpoint, this.baseURL);
     }
 
-    public static getInstance(): HttpClient {
-        if (!HttpClient.instance) {
-            const baseUrl = import.meta.env?.VITE_API_BASE_URL ?? 'http://localhost:8080/api/v1';
-            HttpClient.instance = new HttpClient(baseUrl);
-        }
+    private token(): string | null {
+        return localStorage.getItem('token');
+    }
 
-        return HttpClient.instance;
+    private async makeRequest(request: Request): Promise<Response> {
+        return fetch(request)
     }
 
-    async get({ endpoint }: IHttpParameters): Promise<Response> {
-        const url = this.getURL(endpoint);
-        const response = await fetch(url, {
-            method: 'GET',
-            headers: headers,
+    async get({ endpoint, headers }: IHttpParameters): Promise<Response> {
+        const url: URL = this.getURL(endpoint);
+        headers = Object.assign<Headers, Headers>(headers, this.commonHeaders);
+        const request: Request = new Request(url, {
+            method: "GET",
+            headers
         });
-        return response.json();
+
+        return this.makeRequest(request);
     }
 
-    async post({ endpoint }: IHttpParameters): Promise<Response> {
+    async post({ endpoint, authenticated, body, headers }: IHttpParameters): Promise<Response> {
         const url = this.getURL(endpoint);
-        const response = await fetch(url, {
-            method: 'POST',
+
+        if (authenticated) {
+            const token: string | null = this.token();
+            headers.append('Authorization', `Bearer ${token}`);
+        }
+
+        const request: Request = new Request(url, {
+            method: "POST",
             body: JSON.stringify(body),
-            headers: headers,
-        });
-        return response.json();
+            headers
+        })
+
+        return this.makeRequest(request);
     }
-    
+
     async patch({ endpoint, authenticated, headers }: IHttpParameters): Promise<Response> {
         const url = this.getURL(endpoint);
         if (authenticated) {
-            
+
         }
-        const response: Response = await fetch(url)
+        const response: Response = await fetch(url, {
+            method: "PATCH",
+            headers
+        });
     }
-    
-    async delete({ endpoint, authenticated }: IHttpParameters): Promise<Response> {
+
+    async delete({ endpoint, authenticated, headers }: IHttpParameters): Promise<Response> {
         const url = this.getURL(endpoint);
-        if (authenticated) { }
-        const response = await fetch()
+        if (authenticated) {
+
+        }
+        const response: Response = await fetch(url, {
+            method: "DELETE",
+            headers
+        })
     }
 }
 
 interface IHttpParameters {
     endpoint: string;
+    body: Record<string, any>;
     authenticated: boolean;
-    headers: Headers
+    headers: Headers;
 }
+
+let http: Readonly<HttpClient> = Object.freeze(new HttpClient(baseUrl));
+
+export default http;
diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte
index d7cd900..cd1e02c 100644
--- a/fe/src/lib/Card.svelte
+++ b/fe/src/lib/Card.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     export let title = "";
-    export let height: number | undefined = undefined;
 </script>
 
 <div class="card">
diff --git a/fe/src/lib/Chart.svelte b/fe/src/lib/Chart.svelte
new file mode 100644
index 0000000..b19d932
--- /dev/null
+++ b/fe/src/lib/Chart.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+import { onDestroy } from "svelte";
+import ChartJS from "chart.js/auto";
+
+export let data;
+export let labels;
+export let type = 'bar';
+
+let ref: HTMLCanvasElement;
+let chart
+
+function setupChart(result) {
+    [labels, data] = result;
+    chart = new ChartJS(ref, {
+        type,
+        data: {
+            labels,
+            datasets: [
+                {
+                    label: "Totals",
+                    data,
+                    backgroundColor: "rgba(255, 192, 192, 0.2)"
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                y: {
+                    suggestedMax: 30,
+                    beginAtZero: true,
+                    ticks: {
+                        autoSkip: true,
+                        stepSize: 5
+                    }
+                }
+            },
+            plugins: {
+                legend: {
+                    display: false
+                },
+                title: {
+                    display: true,
+                    text: "Weekly Breakdown"
+                },
+                subtitle: {
+                    display: true,
+                    text: "Water consumption over the last week",
+                    padding: {bottom: 10}
+                }
+            }
+        }
+    });
+    
+    onDestroy(() => {
+        if (chart) chart.destroy();
+        chart = null;
+    })
+}
+</script>
+
+<canvas bind:this={ref} />
\ No newline at end of file
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index 0a6b81b..5e81a5a 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     import { onDestroy, onMount } from "svelte";
-    import HttpClient from "../http";
+    import http from "../http";
     import { token } from "../stores/auth";
     import { addFormOpen } from "../stores/forms";
     import Table from "./Table.svelte";
-    import Chart from "chart.js/auto";
+    import ChartJS from "chart.js/auto";
+    import Chart from './Chart.svelte'
     import Card from "./Card.svelte";
     import Column from "./Column.svelte";
     import AddForm from "./forms/AddForm.svelte";
@@ -46,8 +47,8 @@
 
         if (res.ok) {
             const json = await res.json();
-            let labels = json.map(d => d.name);
-            let data = json.map(d => d.total);
+            let labels = json.map((d: any) => d.name);
+            let data = json.map((d: any) => d.total);
             return [labels, data];
         } else {
             throw new Error("There was a problem with your request");
@@ -65,8 +66,8 @@
 
         if (res.ok) {
             const json = await res.json();
-            let labels = json.map(d => d.date);
-            let data = json.map(d => d.total);
+            let labels = json.map((d: any) => d.date);
+            let data = json.map((d: any) => d.total);
             return [labels, data];
         } else {
             throw new Error("There was a problem with your request");
@@ -84,9 +85,9 @@
         fetchDailyUserStatistics().then(updateDailyUserTotalsChart).catch(err => console.error(err));
     }
 
-    function setupWeeklyTotalsChart(result) {
+    function setupWeeklyTotalsChart(result: any) {
         [lastSevenDays, lastSevenDaysData] = result;
-        lineChart = new Chart(lineCanvasRef, {
+        lineChart = new ChartJS(lineCanvasRef, {
             type: "line",
             data: {
                 labels: lastSevenDays,
@@ -129,10 +130,10 @@
         });
     }
 
-    function setupDailyUserTotalsChart(result) {
+    function setupDailyUserTotalsChart(result: any) {
         [userTotalsLabels, userTotalsData] = result;
 
-        barChart = new Chart(barCanvasRef, {
+        barChart = new ChartJS(barCanvasRef, {
             type: "bar",
             data: {
                 labels: userTotalsLabels,
@@ -177,13 +178,13 @@
         });
     }
 
-    function updateWeeklyTotalsChart(result) {
+    function updateWeeklyTotalsChart(result: any) {
         [, lastSevenDaysData] = result;
         lineChart.data.datasets[0].data = lastSevenDaysData;
         lineChart.update();
     }
 
-    function updateDailyUserTotalsChart(result) {
+    function updateDailyUserTotalsChart(result: any) {
         [, userTotalsData] = result;
         barChart.data.datasets[0].data = userTotalsData;
         barChart.update();
@@ -205,6 +206,7 @@
 
 <Column --width="500px">
     <Card --height="300px">
+        <!--<Chart />-->
         <canvas bind:this={barCanvasRef} />
     </Card>
     <Card --height="300px">
@@ -223,17 +225,3 @@
     </Card>
 </Column>
 <!-- <Chart /> -->
-
-
-<style>
-    dialog {
-        background: red;
-        box-shadow: 0 20px 5em 10px rgba(0, 0, 0, 0.8);
-    }
-
-    dialog::backdrop {
-        padding: 20px;
-        box-shadow: 20px 20px rgba(0, 0, 0, 0.8);
-        background-color: red;
-    }
-</style>
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
index f208f34..2728dd3 100644
--- a/fe/src/lib/Layout.svelte
+++ b/fe/src/lib/Layout.svelte
@@ -1,9 +1,13 @@
 <script>
-    import { authenticated, token } from "../stores/auth";
+    import { authenticated, token, user, preferences } from "../stores/auth";
     import PreferencesForm from "./PreferencesForm.svelte";
     import { addFormOpen } from "../stores/forms";
 
-    const logout = () => token.unauthenticate();
+    const logout = () => { 
+        preferences.reset();
+        user.reset();
+        token.unauthenticate();
+    }
     let preferenceFormOpen = false;
 
     function showPreferencesDialog() {
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/LoginForm.svelte
index bf6d9ad..8c3c288 100644
--- a/fe/src/lib/LoginForm.svelte
+++ b/fe/src/lib/LoginForm.svelte
@@ -47,7 +47,7 @@
         preferences: userPreferences,
       } = await response.json();
       user.setUser(userData);
-      preferences.set(userPreferences);
+      preferences.setPreference(userPreferences);
       token.authenticate(apiToken);
     }
 
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
index 95e04c1..875393c 100644
--- a/fe/src/lib/PreferencesForm.svelte
+++ b/fe/src/lib/PreferencesForm.svelte
@@ -1,51 +1,118 @@
 <script lang="ts">
-    import { preferences } from '../stores/auth';
-    import type { Size, Preference } from '../types';
-    import { createEventDispatcher } from 'svelte';
-   export let open: boolean; 
-
-    let preference: Preference = {
-        color: "#00FF00",
-        size: {
-            size: 8,
-            unit: 'oz'
-        }
-    }
-
-    const dispatch = createEventDispatcher();
-    
-    preferences.subscribe((value) => {
-        preference = value;
+  import { user, preferences, token } from "../stores/auth";
+  import { createEventDispatcher, onDestroy, onMount } from "svelte";
+  import type { User } from "../types";
+
+  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) => {
+        console.log('update value: ', value);
+      color = value.color;
+      selectedSize = value.size_id;
+    },
+  );
+
+  function closeDialog() {
+    dispatch("close");
+  }
+
+  async function updateUserPreferences() {
+    const res = await fetch("http://localhost:8080/api/v1/user/preferences", {
+      method: "PATCH",
+      headers: {
+        Authorization: `Bearer ${$token}`,
+      },
+      body: JSON.stringify($preferences),
     });
+  }
 
-    function onPreferencesSave(): void {
-        preferences.set(preference);
-        dispatch('close')
-    }
+  async function getUserPreferences() {
+    const res = await fetch(
+      `http://localhost:8080/api/v1/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("http://localhost:8080/api/v1/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={preference.color}/>
-        </div>
-        <div class="form input group">
-            <label for="size">Bottle Size</label>
-            <input id="size" name="size" type="number" min="8" max="48" step="8" bind:value={preference.size.size}/>
-        </div>
-        <button type="submit">Save</button>
-    </form>
+  <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 {
+  dialog {
     background: white;
     color: black;
-}
+  }
 
-input[type="color"] {
-   width: 100%;
-   height: 100%;
-}
+  input[type="color"] {
+    width: 4em;
+    height: 4em;
+  }
 </style>
diff --git a/fe/src/lib/errors.ts b/fe/src/lib/errors.ts
index d44bec5..81f7145 100644
--- a/fe/src/lib/errors.ts
+++ b/fe/src/lib/errors.ts
@@ -1,7 +1,5 @@
 export class UnauthorizedError extends Error {
-  constructor(message?: string, options?: ErrorOptions) {
-    super(message, options);
+  constructor(message?: string) {
+    super(message);
   }
 }
-
-
diff --git a/fe/src/lib/utils.ts b/fe/src/lib/utils.ts
index 22d4e9a..e78556c 100644
--- a/fe/src/lib/utils.ts
+++ b/fe/src/lib/utils.ts
@@ -1,5 +1,5 @@
 export function processFormInput(form: HTMLFormElement) {
-  const formData = new FormData(form);
+  const formData: FormData = new FormData(form);
   const data: Record<string, any> = {};
   for (let field of formData) {
     const [key, value] = field;
diff --git a/fe/src/stores/auth.ts b/fe/src/stores/auth.ts
index 0efc80b..63f027e 100644
--- a/fe/src/stores/auth.ts
+++ b/fe/src/stores/auth.ts
@@ -1,100 +1,87 @@
-import type { Invalidator, Subscriber, Unsubscriber } from 'svelte/store';
-import type { Preference } from '../types';
-import { writable, derived } from 'svelte/store';
+import type { Preference, TokenStore, Nullable, UserStore, User, PreferenceStore } from "../types";
+import { writable, derived } from "svelte/store";
 
-type Nullable<T> = T | null;
-
-interface User {
-  uuid: string;
-  username: string;
-}
-
-interface TokenStore {
-  subscribe: (run: Subscriber<Nullable<string>>, invalidate?: Invalidator<Nullable<string>>) => Unsubscriber,
-  authenticate: (newToken: string) => void,
-  unauthenticate: () => void
-}
-
-
-interface UserStore {
-  subscribe: (run: Subscriber<Nullable<User>>, invalidate?: Invalidator<Nullable<User>>) => Unsubscriber,
-  setUser: (user: User) => void,
-  reset: () => void
-}
-
-interface PreferenceStore {
-  subscribe: (run: Subscriber<Preference>, invalidate?: Invalidator<Preference>) => Unsubscriber,
-  set: (this: void, value: Preference) => void
-}
 
 function createTokenStore(): TokenStore {
-  const storedToken = localStorage.getItem("token");
-  const { subscribe, set } = writable<string | null>(storedToken);
-
-  function authenticate(newToken: string): void {
-    try {
-      localStorage.setItem("token", newToken);
-      set(newToken);
-    } catch (e) {
-      console.error('error', e);
+    const storedToken = localStorage.getItem("token");
+    const { subscribe, set } = writable<string | null>(storedToken);
+
+    function authenticate(newToken: string): void {
+        try {
+            localStorage.setItem("token", newToken);
+            set(newToken);
+        } catch (e) {
+            console.error("error", e);
+        }
+    }
+
+    function unauthenticate(): void {
+        localStorage.removeItem("token");
+        set(null);
     }
-  }
-
-  function unauthenticate(): void {
-    localStorage.removeItem("token");
-    set(null);
-  }
-
-  return {
-    subscribe,
-    authenticate,
-    unauthenticate
-  };
+
+    return {
+        subscribe,
+        authenticate,
+        unauthenticate
+    };
 }
 
 function onTokenChange($token: Nullable<string>): boolean {
-  return $token ? true : false;
+    return $token ? true : false;
 }
 
 function createUserStore(): UserStore {
-  const user = localStorage.getItem('user');
-  const userObj: Nullable<User> = user ? JSON.parse(user) : null;
-  const { subscribe, set } = writable<User | null>(userObj);
-
-  const setUser = (user: User) => {
-    localStorage.setItem('user', JSON.stringify(user));
-    set(user);
-  }
-
-  const reset = () => {
-    localStorage.removeItem('user');
-    set(null);
-  }
-
-  return {
-    subscribe,
-    setUser,
-    reset
-  }
+    const user = localStorage.getItem("user");
+    const userObj: Nullable<User> = user ? JSON.parse(user) : null;
+    const { subscribe, set } = writable<User | null>(userObj);
+
+    const setUser = (user: User) => {
+        localStorage.setItem("user", JSON.stringify(user));
+        set(user);
+    };
+
+    const reset = () => {
+        localStorage.removeItem("user");
+        set(null);
+    };
+
+    return {
+        subscribe,
+        setUser,
+        reset
+    };
 }
 
 
 function createPreferenceStore(): PreferenceStore {
-  const preferences = localStorage.getItem('preferences');
-  const preferenceObj: Preference = preferences ? JSON.parse(preferences) : {
-    color: "#FF0000",
-    size: {
-      size: 16,
-      unit: 'oz'
-    }
-  };
-
-  const { subscribe, set } = writable<Preference>(preferenceObj);
-
-  return {
-    subscribe,
-    set
-  }
+    const preferences = localStorage.getItem("preferences");
+    const preferenceObj: Preference = preferences ? JSON.parse(preferences) : {
+        id: 0,
+        color: "#FF0000",
+        size_id: 0,
+        user_id: 0
+    };
+
+    const { subscribe, set, update } = writable<Nullable<Preference>>(preferenceObj);
+
+    const setPreference = (preference: Preference) => {
+        localStorage.setItem("preference", JSON.stringify(preference));
+        set(preference);
+    };
+
+    const reset = () => {
+        localStorage.removeItem("preference");
+        set(null);
+    };
+
+    return {
+        set,
+        subscribe,
+        reset,
+        update,
+        setPreference,
+    };
 }
 
 export const token = createTokenStore();
diff --git a/fe/src/types.ts b/fe/src/types.ts
index 526e7eb..c8f2f00 100644
--- a/fe/src/types.ts
+++ b/fe/src/types.ts
@@ -1,14 +1,19 @@
-export interface Size {
-  size: number;
-  unit: string;
-}
+import type { Invalidator, Subscriber, Unsubscriber, Updater } from "svelte/store";
 
 export interface Preference {
+  id: number;
   color: string;
-  size: Size;
+  size_id: number;
+  user_id: number;
+}
+
+export interface Size {
+  size: number;
+  unit: string;
 }
 
 export interface User {
+  id: number;
   name: string;
   uuid: string;
 }
@@ -17,4 +22,32 @@ export interface Statistic {
   user_id: string;
   date: string;
   quantity: number;
-}
\ No newline at end of file
+}
+
+export type Nullable<T> = T | null;
+
+export interface User {
+    uuid: string;
+    username: string;
+}
+
+export interface TokenStore {
+    subscribe: (run: Subscriber<Nullable<string>>, invalidate?: Invalidator<Nullable<string>>) => Unsubscriber,
+    authenticate: (newToken: string) => void,
+    unauthenticate: () => void
+}
+
+
+export interface UserStore {
+    subscribe: (run: Subscriber<Nullable<User>>, invalidate?: Invalidator<Nullable<User>>) => Unsubscriber,
+    setUser: (user: User) => void,
+    reset: () => void
+}
+
+export interface PreferenceStore {
+    set: (this: void, value: Preference) => void;
+    subscribe: (this: void, run: Subscriber<Nullable<Preference>>, invalidate?: Invalidator<Nullable<Preference>>) => Unsubscriber;
+    reset: () => void;
+    update: (this: void, updater: Updater<Nullable<Preference>>) => void;
+    setPreference: (user: Preference) => void;
+}