Implement authentication logic

frontend/src/routes/(navbar)/+layout.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation'
-  import { persistentSettings } from '$lib/persistent-store'
+  import { persistentSettings } from '$lib/persistent_store'
   import i18n from '$lib/i18n'
+  import { logout } from '$lib/axios.svelte'
+
   let { children } = $props()
 
   if (!$persistentSettings.loggedIn) {
@@ -86,7 +88,7 @@
           class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
         >
           <li><a href="/profile">{$i18n.t('common:navbar.link.profile')}</a></li>
-          <li><a href="/login?logout">{$i18n.t('common:navbar.link.logout')}</a></li>
+          <li><button onclick={logout}>{$i18n.t('common:navbar.link.logout')}</button></li>
         </ul>
       </div>
     </div>

frontend/src/routes/(navbar)/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { persistentSettings } from '$lib/persistent-store'
+  import { persistentSettings } from '$lib/persistent_store'
   import { currentDaytime } from '$lib/util'
   import i18n from '$lib/i18n'
   import DashboardCard from '$lib/component/DashboardCard.svelte'

frontend/src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { persistentSettings } from '$lib/persistent-store'
+  import { persistentSettings } from '$lib/persistent_store'
   let { children } = $props()
   import '../app.css'
 </script>

frontend/src/routes/login/+page.svelte

@@ -1,18 +1,37 @@
 <script lang="ts">
   import { fly } from 'svelte/transition'
   import i18n from '$lib/i18n'
+  import { login as performLogin } from '$lib/axios.svelte'
   $i18n.loadNamespaces('login')
 
-  const urlParams = new URLSearchParams(window.location.search)
-  const isReauth = urlParams.has('reauth')
-  const isLogout = urlParams.has('logout')
+  type ToastType = 'reauth' | 'logout' | 'error'
+  let toastType: ToastType = $state('reauth')
+  let toastVisible = $state(false)
 
-  let showToast = $state(true)
-  if (isReauth || isLogout) {
+  function showToast(type: ToastType) {
+    toastType = type
+    toastVisible = true
     setTimeout(() => {
-      showToast = false
+      toastVisible = false
     }, 6000)
   }
+
+  const urlParams = new URLSearchParams(window.location.search)
+  if (urlParams.has('reauth')) {
+    showToast('reauth')
+  }
+  if (urlParams.has('logout')) {
+    showToast('logout')
+  }
+
+  let email: string = $state('')
+  let password: string = $state('')
+
+  async function login() {
+    await performLogin(email, password).catch(() => {
+      showToast('error')
+    })
+  }
 </script>
 
 <div class="w-full h-full flex flex-col justify-center items-center bg-base-200">
@@ -30,28 +49,41 @@
         <fieldset class="fieldset">
           <label class="fieldset-label input text-base-content">
             <i class="bi bi-envelope-at"></i>
-            <input type="email" placeholder="me@example.com" required />
+            <input type="email" bind:value={email} placeholder="me@example.com" required />
           </label>
           <label class="fieldset-label input text-base-content">
             <i class="bi bi-key"></i>
-            <input type="password" placeholder={$i18n.t('login:passwordPlaceholder')} required />
+            <input
+              type="password"
+              bind:value={password}
+              placeholder={$i18n.t('login:passwordPlaceholder')}
+              required
+            />
           </label>
-          <button class="btn btn-primary mt-4">{$i18n.t('login:button')}</button>
+          <button class="btn btn-primary mt-4" onclick={login}>{$i18n.t('login:button')}</button>
         </fieldset>
       </div>
     </div>
   </div>
   <span class="basis-0 grow"></span>
-  {#if (isReauth || isLogout) && showToast}
+  {#if toastVisible}
     <div class="toast toast-top" out:fly={{ x: 200 }}>
-      <div class="alert text-base {isReauth ? 'alert-warning' : 'alert-success'}">
-        {#if isReauth}
+      {#if toastType === 'reauth'}
+        <div class="alert text-base alert-warning">
           <i class="bi bi-exclamation-diamond text-xl"></i>
-        {:else}
+          <span>{$i18n.t('login:toast.reauth')}</span>
+        </div>
+      {:else if toastType === 'logout'}
+        <div class="alert text-base alert-success">
           <i class="bi bi-check-circle text-xl"></i>
-        {/if}
-        <span>{$i18n.t(isReauth ? 'login:toast.reauth' : 'login:toast.logoutSuccess')}</span>
-      </div>
+          <span>{$i18n.t('login:toast.logoutSuccess')}</span>
+        </div>
+      {:else if toastType === 'error'}
+        <div class="alert text-base alert-error">
+          <i class="bi bi-x-circle text-xl"></i>
+          <span>{$i18n.t('login:toast.loginFailed')}</span>
+        </div>
+      {/if}
     </div>
   {/if}
 </div>