From 15bfefc3d18e7479cc51e7b25fab97c876c07d4b Mon Sep 17 00:00:00 2001
From: Luca Favini <luca.favini.02@gmail.com>
Date: Mon, 22 Apr 2024 02:22:51 +0200
Subject: [PATCH 1/6] build(fe): add `svelte-french-toast` notifications
 library

---
 frontend/package-lock.json         | 25 ++++++++++++++++++++++++-
 frontend/package.json              |  3 ++-
 frontend/src/routes/+layout.svelte |  4 ++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a04a06b..48389b5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,7 +8,8 @@
       "name": "frontend",
       "version": "0.0.1",
       "dependencies": {
-        "axios": "^1.6.8"
+        "axios": "^1.6.8",
+        "svelte-french-toast": "^1.2.0"
       },
       "devDependencies": {
         "@iconify/svelte": "^3.1.6",
@@ -3506,6 +3507,17 @@
         }
       }
     },
+    "node_modules/svelte-french-toast": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/svelte-french-toast/-/svelte-french-toast-1.2.0.tgz",
+      "integrity": "sha512-5PW+6RFX3xQPbR44CngYAP1Sd9oCq9P2FOox4FZffzJuZI2mHOB7q5gJBVnOiLF5y3moVGZ7u2bYt7+yPAgcEQ==",
+      "dependencies": {
+        "svelte-writable-derived": "^3.1.0"
+      },
+      "peerDependencies": {
+        "svelte": "^3.57.0 || ^4.0.0"
+      }
+    },
     "node_modules/svelte-hmr": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
@@ -3518,6 +3530,17 @@
         "svelte": "^3.19.0 || ^4.0.0"
       }
     },
+    "node_modules/svelte-writable-derived": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/svelte-writable-derived/-/svelte-writable-derived-3.1.1.tgz",
+      "integrity": "sha512-w4LR6/bYZEuCs7SGr+M54oipk/UQKtiMadyOhW0PTwAtJ/Ai12QS77sLngEcfBx2q4H8ZBQucc9ktSA5sUGZWw==",
+      "funding": {
+        "url": "https://ko-fi.com/pixievoltno1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.2.1 || ^4.0.0-next.1 || ^5.0.0-next.94"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 44ce437..597c642 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -25,6 +25,7 @@
   },
   "type": "module",
   "dependencies": {
-    "axios": "^1.6.8"
+    "axios": "^1.6.8",
+    "svelte-french-toast": "^1.2.0"
   }
 }
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 29ebd68..e7bf348 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -3,10 +3,14 @@
 
   import Header from "../components/header.svelte";
   import Footer from "../components/footer.svelte";
+
+  import {Toaster} from "svelte-french-toast"
 </script>
 
 <Header />
 
+<Toaster />
+
 <div class="">
   <slot />
 </div>

From e8c62691764e6992fa1d9ecc5075e502312bc446 Mon Sep 17 00:00:00 2001
From: Luca Favini <luca.favini.02@gmail.com>
Date: Mon, 22 Apr 2024 02:37:49 +0200
Subject: [PATCH 2/6] refactor(fe/pages): improve error message using `toast`
 and remove `;`

---
 frontend/src/components/footer.svelte         |  2 +-
 frontend/src/components/header.svelte         |  2 +-
 frontend/src/components/theme.svelte          | 18 +++----
 frontend/src/routes/+layout.svelte            |  6 +--
 frontend/src/routes/+page.svelte              | 29 +++++------
 frontend/src/routes/login/+page.svelte        | 34 +++++++------
 frontend/src/routes/profile/+page.svelte      | 30 ++++++------
 frontend/src/routes/register/+page.svelte     | 42 ++++++++--------
 frontend/src/routes/review/+page.svelte       | 49 ++++++++++---------
 frontend/src/routes/reviews/+page.svelte      | 24 ++++-----
 frontend/src/routes/reviews/reviewCard.svelte | 10 ++--
 frontend/src/routes/toilets/+page.svelte      | 15 +++---
 frontend/src/routes/toilets/new/+page.svelte  | 29 +++++------
 frontend/src/routes/toilets/toiletCard.svelte |  8 +--
 14 files changed, 156 insertions(+), 142 deletions(-)

diff --git a/frontend/src/components/footer.svelte b/frontend/src/components/footer.svelte
index 731cad8..cb0f691 100644
--- a/frontend/src/components/footer.svelte
+++ b/frontend/src/components/footer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Icon from "@iconify/svelte";
+  import Icon from "@iconify/svelte"
   import Theme from "./theme.svelte"
 </script>
 <footer class="footer footer-center p-10 bg-base-100 text-base-content shadow-[0_-10px_15px_3px] shadow-primary/5 border-t border-primary/20 z-50">
diff --git a/frontend/src/components/header.svelte b/frontend/src/components/header.svelte
index 23f0777..7c2e88a 100644
--- a/frontend/src/components/header.svelte
+++ b/frontend/src/components/header.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Theme from "./theme.svelte";
+  import Theme from "./theme.svelte"
 </script>
 
 <div class="navbar bg-base-100 px-20 shadow-lg shadow-primary/10 border-b border-primary/20 fixed z-50">
diff --git a/frontend/src/components/theme.svelte b/frontend/src/components/theme.svelte
index 8614353..6a104de 100644
--- a/frontend/src/components/theme.svelte
+++ b/frontend/src/components/theme.svelte
@@ -1,8 +1,8 @@
 <script>
-  export let classes;
+  export let classes
 
-  let theme;
-  let check;
+  let theme
+  let check
 
   const themes = [
     "light",
@@ -37,17 +37,17 @@
     "dim",
     "nord",
     "sunset",
-  ];
+  ]
 
   function randomTheme() {
-    let random = Math.floor(Math.random() * themes.length);
+    let random = Math.floor(Math.random() * themes.length)
     while (theme == themes[random]) {
-      random = Math.floor(Math.random() * themes.length);
+      random = Math.floor(Math.random() * themes.length)
     }
-    theme = themes[random];
+    theme = themes[random]
     console.log(`The new theme is ${theme}!`)
-    check = false;
-    check = true;
+    check = false
+    check = true
   }
 
 </script>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index e7bf348..c1fe522 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,8 +1,8 @@
 <script>
-  import "../app.pcss";
+  import "../app.pcss"
 
-  import Header from "../components/header.svelte";
-  import Footer from "../components/footer.svelte";
+  import Header from "../components/header.svelte"
+  import Footer from "../components/footer.svelte"
 
   import {Toaster} from "svelte-french-toast"
 </script>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 7f27e2b..00c2a32 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,25 +1,26 @@
 <script>
-  import { onMount } from "svelte";
-  import axios from "axios";
-  import Icon from "@iconify/svelte";
+  import { onMount } from "svelte"
+  import axios from "axios"
+  import Icon from "@iconify/svelte"
+  import toast from "svelte-french-toast"
 
-  let loading = true;
+  let loading = true
 
-  let users_count;
-  let toilets_count;
-  let reviews_count;
+  let users_count
+  let toilets_count
+  let reviews_count
 
   onMount(async () => {
     try {
-      const response = await axios.get(`${import.meta.env.VITE_API_URL}/api/stats`);
-      users_count = response.data.users;
-      toilets_count = response.data.toilets;
-      reviews_count = response.data.reviews;
-      loading = false;
+      const response = await axios.get(`${import.meta.env.VITE_API_URL}/api/stats`)
+      users_count = response.data.users
+      toilets_count = response.data.toilets
+      reviews_count = response.data.reviews
+      loading = false
     } catch (error) {
-      console.error("Error fetching stats");
+      toast.error("Error fetching stats.")
     }
-  });
+  })
 </script>
 
 <div class="hero min-h-[calc(100vh-15rem)] bg-base-300">
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 144aca1..77d720a 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -1,42 +1,44 @@
 <script>
-  import axios from "axios";
-  import checkAuth from "../../components/checkAuth";
-  import Icon from "@iconify/svelte";
+  import axios from "axios"
+  import checkAuth from "../../components/checkAuth"
+  import Icon from "@iconify/svelte"
   import { onMount } from "svelte"
+  import toast from "svelte-french-toast"
 
-  let username = "";
-  let password = "";
+  let username = ""
+  let password = ""
 
-  let loading = true;
+  let loading = true
 
   onMount(async () => {
     if (await checkAuth()) {
-      alert("You are already logged in");
-      window.location.href = "/profile";
+      toast.error("You are already logged in")
+      window.location.href = "/profile"
     }
-    loading = false;
-  });
+    loading = false
+  })
 
   async function handleSubmit() {
-    loading = true;
+    loading = true
 
     try {
       const response = await axios.post(
         `${import.meta.env.VITE_API_URL}/api/login`,
         { username, password },
         { withCredentials: true }
-      );
+      )
 
       if (response.status === 200) {
-        window.location.href = "/profile";
+        toast.success("Logged in successfully")
+        window.location.href = "/profile"
       } else {
-        alert("Error creating review");
+        toast.error("Error logging in")
       }
 
     } catch (error) {
-      alert(`Error: ${error.response.data.error} - ${error.response.data.message}`);
+      toast.error("Error logging in")
     } finally {
-      loading = false;
+      loading = false
     }
   }
 
diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte
index 2076336..7cfec86 100644
--- a/frontend/src/routes/profile/+page.svelte
+++ b/frontend/src/routes/profile/+page.svelte
@@ -1,44 +1,46 @@
 <script>
   import Icon from "@iconify/svelte"
-  import axios from "axios";
-  import { onMount } from "svelte";
+  import axios from "axios"
+  import { onMount } from "svelte"
   import checkAuth from "../../components/checkAuth"
+  import toast from "svelte-french-toast"
 
   let promise = axios.get(
     `${import.meta.env.VITE_API_URL}/api/users/me`,
     { withCredentials: true }
-  );
+  )
 
-  let loading = true;
+  let loading = true
 
   onMount(async () => {
     if (!(await checkAuth())) {
-      alert("You are not logged in");
-      window.location.href = "/login";
+      toast.error("You are not logged in")
+      window.location.href = "/login"
     }
-    loading = false;
-  });
+    loading = false
+  })
 
   async function handleSubmit() {
-    loading = true;
+    loading = true
 
     try {
       const response = await axios.post(
         `${import.meta.env.VITE_API_URL}/api/logout`,
         {},
         { withCredentials: true }
-      );
+      )
 
       if (response.status === 200) {
-        window.location.href = "/";
+        toast.success("Logged out successfully")
+        window.location.href = "/"
       } else {
-        alert("Error logging out");
+        toast.error("Error logging out")
       }
 
     } catch (error) {
-      alert(`Error: ${error.response.data.error} - ${error.response.data.message}`);
+      toast.error("Error logging out")
     } finally {
-      loading = false;
+      loading = false
     }
   }
 
diff --git a/frontend/src/routes/register/+page.svelte b/frontend/src/routes/register/+page.svelte
index 5848a50..c0515a4 100644
--- a/frontend/src/routes/register/+page.svelte
+++ b/frontend/src/routes/register/+page.svelte
@@ -1,30 +1,31 @@
 <script>
-  import axios from "axios";
-  import Icon from "@iconify/svelte";
+  import axios from "axios"
+  import Icon from "@iconify/svelte"
   import checkAuth from "../../components/checkAuth"
-  import { onMount } from "svelte";
+  import { onMount } from "svelte"
+  import toast from "svelte-french-toast"
 
-  let username = "";
-  let password = "";
-  let confirmPassword = "";
+  let username = ""
+  let password = ""
+  let confirmPassword = ""
 
-  let loading = true;
+  let loading = true
 
   onMount(async () => {
     if (await checkAuth()) {
-      alert("You are already logged in");
-      window.location.href = "/profile";
+      toast.error("You are already logged in")
+      window.location.href = "/profile"
     }
-    loading = false;
-  });
+    loading = false
+  })
 
   async function handleSubmit() {
-    loading = true;
+    loading = true
 
     if (password !== confirmPassword) {
-      alert("Passwords do not match");
-      loading = false;
-      return;
+      toast.error("Passwords do not match")
+      loading = false
+      return
     }
 
     try {
@@ -32,18 +33,19 @@
         `${import.meta.env.VITE_API_URL}/api/users/create`,
         { username, password },
         { withCredentials: true }
-      );
+      )
 
       if (response.status === 201) {
-        window.location.href = "/profile";
+        toast.success("User created successfully")
+        window.location.href = "/profile"
       } else {
-        alert("Error creating user");
+        toast.error("Error creating user")
       }
 
     } catch (error) {
-      alert(`Error: ${error.response.data.error} - ${error.response.data.message}`);
+      toast.error("Error creating user")
     } finally {
-      loading = false;
+      loading = false
     }
   }
 
diff --git a/frontend/src/routes/review/+page.svelte b/frontend/src/routes/review/+page.svelte
index b704673..cd7a23b 100644
--- a/frontend/src/routes/review/+page.svelte
+++ b/frontend/src/routes/review/+page.svelte
@@ -1,36 +1,37 @@
 
 <script>
-  import { page } from "$app/stores";
+  import { page } from "$app/stores"
   import Icon from "@iconify/svelte"
   import axios from "axios"
   import { onMount } from "svelte"
-  import checkAuth from "../../components/checkAuth";
+  import checkAuth from "../../components/checkAuth"
+  import toast from "svelte-french-toast"
 
-  let toilet = $page.url.searchParams.get("t") || "";
+  let toilet = $page.url.searchParams.get("t") || ""
 
-  let loading = true;
+  let loading = true
 
   onMount(async () => {
     if (!toilet) {
-      window.location.href = "/toilets";
-      return;
+      window.location.href = "/toilets"
+      return
     }
 
     if (!(await checkAuth())) {
-      alert("You are not logged in");
-      window.location.href = "/login";
+      toast.error("You are not logged in")
+      window.location.href = "/login"
     }
-    loading = false;
-  });
-
-  let rating = 0;
-  let description = "";
-  let paper = false;
-  let soap = false;
-  let dryer = false;
-  let hotwater = false;
-  let clean = 0;
-  let temperature = 0;
+    loading = false
+  })
+
+  let rating = 0
+  let description = ""
+  let paper = false
+  let soap = false
+  let dryer = false
+  let hotwater = false
+  let clean = 0
+  let temperature = 0
 
   async function handleSubmit() {
 
@@ -39,17 +40,17 @@
         `${import.meta.env.VITE_API_URL}/api/reviews/create`,
         { toilet, rating, description, paper, soap, dryer, hotwater, clean, temperature },
         { withCredentials: true }
-      );
+      )
 
       if (response.status === 200) {
-        alert("Review created successfully!");
-        window.location.href = `/reviews?q=${toilet}`;
+        toast.success("Review created successfully")
+        window.location.href = `/reviews?q=${toilet}`
       } else {
-        alert("Error creating review");
+        toast.error("Error creating review")
       }
 
     } catch (error) {
-      alert(`Error: ${error.response.data.error} - ${error.response.data.message}`);
+      toast.error("Error creating review")
     }
 
   }
diff --git a/frontend/src/routes/reviews/+page.svelte b/frontend/src/routes/reviews/+page.svelte
index d0ef5f2..cc9b238 100644
--- a/frontend/src/routes/reviews/+page.svelte
+++ b/frontend/src/routes/reviews/+page.svelte
@@ -1,22 +1,21 @@
 <script>
-  import axios from "axios";
-  import Icon from "@iconify/svelte";
+  import axios from "axios"
+  import Icon from "@iconify/svelte"
   import ReviewCard from "./reviewCard.svelte"
+  import { replaceState } from "$app/navigation"
+  import { page } from "$app/stores"
 
-  import { replaceState } from "$app/navigation";
-  import { page } from "$app/stores";
+  let promise = axios.get(`${import.meta.env.VITE_API_URL}/api/reviews`)
 
-  let promise = axios.get(`${import.meta.env.VITE_API_URL}/api/reviews`);
-
-  let filter = $page.url.searchParams.get("q") || "";
+  let filter = $page.url.searchParams.get("q") || ""
 
   function updateFilter(event) {
     replaceState(`/reviews?q=${event.target.value}`)
-    filter = event.target.value;
+    filter = event.target.value
   }
 
   function isValid(review) {
-    const { toilet_id, title, place, building, author_name, description } = review;
+    const { toilet_id, title, place, building, author_name, description } = review
     return (
       toilet_id.toLowerCase().includes(filter) ||
       title.toLowerCase().includes(filter) ||
@@ -24,7 +23,7 @@
       building.toLowerCase().includes(filter) ||
       author_name.toLowerCase().includes(filter) ||
       description.toLowerCase().includes(filter)
-    );
+    )
   }
 
 </script>
@@ -65,5 +64,8 @@
     </div>
   </div>
 {:catch error}
-  <p style="color: red">Error: {JSON.stringify(error.response.data)}</p>
+  <div class="w-full py-28 bg-base-300 min-h-[calc(100vh-15rem)] flex justify-center align-middle flex-col">
+    <h1 class="mx-auto text-4xl text-center mb-3 font-bold">There was an <span class="text-primary">error</span> fetching reviews</h1>
+    <p class="mx-auto text-lg text-center mb-10 italic">Please try to refresh.</p>
+  </div>
 {/await}
diff --git a/frontend/src/routes/reviews/reviewCard.svelte b/frontend/src/routes/reviews/reviewCard.svelte
index 3d37713..c573b58 100644
--- a/frontend/src/routes/reviews/reviewCard.svelte
+++ b/frontend/src/routes/reviews/reviewCard.svelte
@@ -1,8 +1,8 @@
 <script>
   import Icon from "@iconify/svelte"
 
-  export let review;
-  export let filter;
+  export let review
+  export let filter
 
   const {
     id,
@@ -21,7 +21,7 @@
     hotwater,
     clean,
     temperature
-  } = review;
+  } = review
 
   let goodness = {
     0: ["Terrible", "bg-red-500", "text-red-900"],
@@ -30,10 +30,10 @@
     3: ["Average", "bg-yellow-400", "text-yellow-700"],
     4: ["Good", "bg-green-500", "text-green-800"],
     5: ["Very good", "bg-green-400", "text-green-700"]
-  };
+  }
 
   function formatDate(date) {
-    return new Date(date).toLocaleString();
+    return new Date(date).toLocaleString()
   }
 </script>
 
diff --git a/frontend/src/routes/toilets/+page.svelte b/frontend/src/routes/toilets/+page.svelte
index 63104e7..97526c0 100644
--- a/frontend/src/routes/toilets/+page.svelte
+++ b/frontend/src/routes/toilets/+page.svelte
@@ -1,20 +1,20 @@
 <script>
-  import axios from "axios";
+  import axios from "axios"
   import ToiletCard from "./toiletCard.svelte"
-  import Icon from "@iconify/svelte";
+  import Icon from "@iconify/svelte"
 
-  let promise = axios.get(`${import.meta.env.VITE_API_URL}/api/toilets`);
+  let promise = axios.get(`${import.meta.env.VITE_API_URL}/api/toilets`)
 
   let filter = ""
 
   function isValid(toilet) {
-    const { title, place, building, description } = toilet;
+    const { title, place, building, description } = toilet
     return (
       title.toLowerCase().includes(filter) ||
       place.toLowerCase().includes(filter) ||
       building.toLowerCase().includes(filter) ||
       description.toLowerCase().includes(filter)
-    );
+    )
   }
 
 </script>
@@ -56,5 +56,8 @@
     </div>
   </div>
 {:catch error}
-  <p style="color: red">Error: {JSON.stringify(error.response.data)}</p>
+  <div class="w-full py-28 bg-base-300 min-h-[calc(100vh-15rem)] flex justify-center align-middle flex-col">
+    <h1 class="mx-auto text-4xl text-center mb-3 font-bold">There was an <span class="text-primary">error</span> fetching toilets</h1>
+    <p class="mx-auto text-lg text-center mb-10 italic">Please try to refresh.</p>
+  </div>
 {/await}
diff --git a/frontend/src/routes/toilets/new/+page.svelte b/frontend/src/routes/toilets/new/+page.svelte
index 109941d..1035326 100644
--- a/frontend/src/routes/toilets/new/+page.svelte
+++ b/frontend/src/routes/toilets/new/+page.svelte
@@ -3,21 +3,22 @@
   import axios from "axios"
   import { onMount } from "svelte"
   import checkAuth from "../../../components/checkAuth"
+  import toast from "svelte-french-toast"
 
-  let title = "";
-  let building = "";
-  let place = "";
-  let description = "";
+  let title = ""
+  let building = ""
+  let place = ""
+  let description = ""
 
-  let loading = true;
+  let loading = true
 
   onMount(async () => {
     if (!(await checkAuth())) {
-      alert("You are not logged in");
-      window.location.href = "/login";
+      toast.error("You are not logged in")
+      window.location.href = "/login"
     }
-    loading = false;
-  });
+    loading = false
+  })
 
   async function handleSubmit() {
 
@@ -26,17 +27,17 @@
         `${import.meta.env.VITE_API_URL}/api/toilets/create`,
         { title, building, place, description },
         { withCredentials: true }
-      );
+      )
 
       if (response.status === 200) {
-        alert("Toilet created successfully!");
-        window.location.href = "/toilets";
+        toast.success("Toilet created successfully")
+        window.location.href = "/toilets"
       } else {
-        alert("Error creating toilet");
+        toast.error("Error creating toilet")
       }
 
     } catch (error) {
-      alert(`Error: ${error.response.data.error} - ${error.response.data.message}`);
+      toast.error("Error creating toilet")
     }
 
   }
diff --git a/frontend/src/routes/toilets/toiletCard.svelte b/frontend/src/routes/toilets/toiletCard.svelte
index be3a131..57ea3e7 100644
--- a/frontend/src/routes/toilets/toiletCard.svelte
+++ b/frontend/src/routes/toilets/toiletCard.svelte
@@ -1,7 +1,7 @@
 <script>
   import Icon from "@iconify/svelte"
 
-  export let toilet;
+  export let toilet
 
   const {
     id,
@@ -14,7 +14,7 @@
     description,
     rating,
     reviews_count
-  } = toilet;
+  } = toilet
 
   let goodness = {
     0: ["Terrible", "bg-red-500", "text-red-900"],
@@ -23,10 +23,10 @@
     3: ["Average", "bg-yellow-400", "text-yellow-700"],
     4: ["Good", "bg-green-500", "text-green-800"],
     5: ["Very good", "bg-green-400", "text-green-700"]
-  };
+  }
 
   function formatDate(date) {
-    return new Date(date).toLocaleDateString();
+    return new Date(date).toLocaleDateString()
   }
 </script>
 

From bd82585d5c323a835641490910b0c85a7edbef44 Mon Sep 17 00:00:00 2001
From: Luca Favini <luca.favini.02@gmail.com>
Date: Mon, 22 Apr 2024 02:40:27 +0200
Subject: [PATCH 3/6] refactor(fe/utils): move `checkAuth` to utils folder

---
 frontend/src/routes/login/+page.svelte          | 2 +-
 frontend/src/routes/profile/+page.svelte        | 2 +-
 frontend/src/routes/register/+page.svelte       | 2 +-
 frontend/src/routes/review/+page.svelte         | 2 +-
 frontend/src/routes/toilets/new/+page.svelte    | 2 +-
 frontend/src/{components => utils}/checkAuth.js | 0
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename frontend/src/{components => utils}/checkAuth.js (100%)

diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 77d720a..c1d3b4b 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -1,6 +1,6 @@
 <script>
   import axios from "axios"
-  import checkAuth from "../../components/checkAuth"
+  import checkAuth from "../../utils/checkAuth"
   import Icon from "@iconify/svelte"
   import { onMount } from "svelte"
   import toast from "svelte-french-toast"
diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte
index 7cfec86..a845649 100644
--- a/frontend/src/routes/profile/+page.svelte
+++ b/frontend/src/routes/profile/+page.svelte
@@ -2,7 +2,7 @@
   import Icon from "@iconify/svelte"
   import axios from "axios"
   import { onMount } from "svelte"
-  import checkAuth from "../../components/checkAuth"
+  import checkAuth from "../../utils/checkAuth"
   import toast from "svelte-french-toast"
 
   let promise = axios.get(
diff --git a/frontend/src/routes/register/+page.svelte b/frontend/src/routes/register/+page.svelte
index c0515a4..a5bea6a 100644
--- a/frontend/src/routes/register/+page.svelte
+++ b/frontend/src/routes/register/+page.svelte
@@ -1,7 +1,7 @@
 <script>
   import axios from "axios"
   import Icon from "@iconify/svelte"
-  import checkAuth from "../../components/checkAuth"
+  import checkAuth from "../../utils/checkAuth"
   import { onMount } from "svelte"
   import toast from "svelte-french-toast"
 
diff --git a/frontend/src/routes/review/+page.svelte b/frontend/src/routes/review/+page.svelte
index cd7a23b..0f91291 100644
--- a/frontend/src/routes/review/+page.svelte
+++ b/frontend/src/routes/review/+page.svelte
@@ -4,7 +4,7 @@
   import Icon from "@iconify/svelte"
   import axios from "axios"
   import { onMount } from "svelte"
-  import checkAuth from "../../components/checkAuth"
+  import checkAuth from "../../utils/checkAuth"
   import toast from "svelte-french-toast"
 
   let toilet = $page.url.searchParams.get("t") || ""
diff --git a/frontend/src/routes/toilets/new/+page.svelte b/frontend/src/routes/toilets/new/+page.svelte
index 1035326..71e63f0 100644
--- a/frontend/src/routes/toilets/new/+page.svelte
+++ b/frontend/src/routes/toilets/new/+page.svelte
@@ -2,7 +2,7 @@
   import Icon from "@iconify/svelte"
   import axios from "axios"
   import { onMount } from "svelte"
-  import checkAuth from "../../../components/checkAuth"
+  import checkAuth from "../../../utils/checkAuth"
   import toast from "svelte-french-toast"
 
   let title = ""
diff --git a/frontend/src/components/checkAuth.js b/frontend/src/utils/checkAuth.js
similarity index 100%
rename from frontend/src/components/checkAuth.js
rename to frontend/src/utils/checkAuth.js

From d8e7f96ef13c7bdd21113edf69ef9485e91ff960 Mon Sep 17 00:00:00 2001
From: Luca Favini <luca.favini.02@gmail.com>
Date: Mon, 22 Apr 2024 03:05:41 +0200
Subject: [PATCH 4/6] build(fe): add `zod` schema validator

---
 frontend/package-lock.json | 11 ++++++++++-
 frontend/package.json      |  3 ++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 48389b5..eb3bf75 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.1",
       "dependencies": {
         "axios": "^1.6.8",
-        "svelte-french-toast": "^1.2.0"
+        "svelte-french-toast": "^1.2.0",
+        "zod": "^3.23.0"
       },
       "devDependencies": {
         "@iconify/svelte": "^3.1.6",
@@ -3980,6 +3981,14 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.0.tgz",
+      "integrity": "sha512-OFLT+LTocvabn6q76BTwVB0hExEBS0IduTr3cqZyMqEDbOnYmcU+y0tUAYbND4uwclpBGi4I4UUBGzylWpjLGA==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 597c642..e7b8627 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
   "type": "module",
   "dependencies": {
     "axios": "^1.6.8",
-    "svelte-french-toast": "^1.2.0"
+    "svelte-french-toast": "^1.2.0",
+    "zod": "^3.23.0"
   }
 }

From 0d9c41da1dfb7d07aee9058c53a8e27f30d0b890 Mon Sep 17 00:00:00 2001
From: Luca Favini <luca.favini.02@gmail.com>
Date: Mon, 22 Apr 2024 03:06:02 +0200
Subject: [PATCH 5/6] feat(fe/utils): add regexes and schemas for validation

---
 frontend/src/utils/regex.js   | 12 ++++++++++++
 frontend/src/utils/schemas.js | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 frontend/src/utils/regex.js
 create mode 100644 frontend/src/utils/schemas.js

diff --git a/frontend/src/utils/regex.js b/frontend/src/utils/regex.js
new file mode 100644
index 0000000..ee7a1f8
--- /dev/null
+++ b/frontend/src/utils/regex.js
@@ -0,0 +1,12 @@
+const username = /^[a-zA-Z0-9]{4,16}$/
+const password = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,20}$/
+
+const genericShortText = /^[\t\n\x20-\xFF]{6,50}$/
+const genericLongText = /^[\t\n\x20-\xFF]{6,250}$/
+
+export default {
+  username,
+  password,
+  genericShortText,
+  genericLongText,
+}
diff --git a/frontend/src/utils/schemas.js b/frontend/src/utils/schemas.js
new file mode 100644
index 0000000..707297d
--- /dev/null
+++ b/frontend/src/utils/schemas.js
@@ -0,0 +1,32 @@
+import { z } from "zod"
+import regex from "./regex"
+
+const login = z.object({
+  username: z.string().regex(regex.username),
+  password: z.string().regex(regex.password),
+})
+
+const review = z.object({
+  toilet: z.string().uuid(),
+  rating: z.number().int().min(0).max(10),
+  description: z.string().regex(regex.genericLongText),
+  paper: z.boolean(),
+  soap: z.boolean(),
+  dryer: z.boolean(),
+  hotwater: z.boolean(),
+  clean: z.number().int().min(0).max(10),
+  temperature: z.number().int().min(0).max(10),
+})
+
+const toilet = z.object({
+  title: z.string().regex(regex.genericShortText),
+  building: z.string().regex(regex.genericShortText),
+  place: z.string().regex(regex.genericShortText),
+  description: z.string().regex(regex.genericLongText),
+})
+
+export default {
+  login,
+  review,
+  toilet,
+}

From 2c6f578a87f647ec056e810ddc1fbb54f3ccd636 Mon Sep 17 00:00:00 2001
From: Luca Favini <luca.favini.02@gmail.com>
Date: Mon, 22 Apr 2024 03:06:33 +0200
Subject: [PATCH 6/6] feat(fe/pages): add input validation

---
 frontend/src/routes/login/+page.svelte       | 8 ++++++++
 frontend/src/routes/register/+page.svelte    | 8 ++++++++
 frontend/src/routes/review/+page.svelte      | 8 ++++++++
 frontend/src/routes/toilets/new/+page.svelte | 8 ++++++++
 4 files changed, 32 insertions(+)

diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index c1d3b4b..fa78d90 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -4,6 +4,7 @@
   import Icon from "@iconify/svelte"
   import { onMount } from "svelte"
   import toast from "svelte-french-toast"
+  import schemas from "../../utils/schemas"
 
   let username = ""
   let password = ""
@@ -21,6 +22,13 @@
   async function handleSubmit() {
     loading = true
 
+    const valid = schemas.login.safeParse({ username, password })
+    if (!valid.success) {
+      toast.error(`Invalid ${valid.error.issues[0].path[0]}`)
+      loading = false
+      return
+    }
+
     try {
       const response = await axios.post(
         `${import.meta.env.VITE_API_URL}/api/login`,
diff --git a/frontend/src/routes/register/+page.svelte b/frontend/src/routes/register/+page.svelte
index a5bea6a..06b68e6 100644
--- a/frontend/src/routes/register/+page.svelte
+++ b/frontend/src/routes/register/+page.svelte
@@ -4,6 +4,7 @@
   import checkAuth from "../../utils/checkAuth"
   import { onMount } from "svelte"
   import toast from "svelte-french-toast"
+  import schemas from "../../utils/schemas"
 
   let username = ""
   let password = ""
@@ -22,6 +23,13 @@
   async function handleSubmit() {
     loading = true
 
+    const valid = schemas.login.safeParse({ username, password })
+    if (!valid.success) {
+      toast.error(`Invalid ${valid.error.issues[0].path[0]}`)
+      loading = false
+      return
+    }
+
     if (password !== confirmPassword) {
       toast.error("Passwords do not match")
       loading = false
diff --git a/frontend/src/routes/review/+page.svelte b/frontend/src/routes/review/+page.svelte
index 0f91291..b34807f 100644
--- a/frontend/src/routes/review/+page.svelte
+++ b/frontend/src/routes/review/+page.svelte
@@ -6,6 +6,7 @@
   import { onMount } from "svelte"
   import checkAuth from "../../utils/checkAuth"
   import toast from "svelte-french-toast"
+  import schemas from "../../utils/schemas"
 
   let toilet = $page.url.searchParams.get("t") || ""
 
@@ -35,6 +36,13 @@
 
   async function handleSubmit() {
 
+    const valid = schemas.review.safeParse({ toilet, rating, description, paper, soap, dryer, hotwater, clean, temperature })
+    if (!valid.success) {
+      toast.error(`Invalid ${valid.error.issues[0].path[0]}`)
+      loading = false
+      return
+    }
+
     try {
       const response = await axios.post(
         `${import.meta.env.VITE_API_URL}/api/reviews/create`,
diff --git a/frontend/src/routes/toilets/new/+page.svelte b/frontend/src/routes/toilets/new/+page.svelte
index 71e63f0..8051ccb 100644
--- a/frontend/src/routes/toilets/new/+page.svelte
+++ b/frontend/src/routes/toilets/new/+page.svelte
@@ -4,6 +4,7 @@
   import { onMount } from "svelte"
   import checkAuth from "../../../utils/checkAuth"
   import toast from "svelte-french-toast"
+  import schemas from "../../../utils/schemas"
 
   let title = ""
   let building = ""
@@ -22,6 +23,13 @@
 
   async function handleSubmit() {
 
+    const valid = schemas.toilet.safeParse({ title, building, place, description })
+    if (!valid.success) {
+      toast.error(`Invalid ${valid.error.issues[0].path[0]}`)
+      loading = false
+      return
+    }
+
     try {
       const response = await axios.post(
         `${import.meta.env.VITE_API_URL}/api/toilets/create`,