Refactor login functionality and add error handling

action/login.php

@@ -1,8 +1,9 @@
 <?php
 require_once "{$_SERVER['DOCUMENT_ROOT']}/dependencies.php";
-$token = $db->querySingle("SELECT sign() as token")['token'];
-?>
-
-<script>
-    sessionStorage.setItem('token', JSON.stringify('<?= $token ?>'))
-</script>
+$token = $db->querySingle("SELECT sign(('{\"exp\":' || EXTRACT(EPOCH FROM NOW() + INTERVAL'1 day') || ', \"role\": \"app_user\"}')::JSON, '{$_ENV['KEY_ENCRYPT']}') as token");
+$_SESSION['user'] = [
+    'id' => 1,
+    'name' => 'Ángel Alfonso',
+];
+header('Content-Type: application/json');
+echo json_encode($token);

pages/login.html

@@ -1,5 +1,27 @@
-<main class="container">
-    <form action="/action/login.php" method="post">
+<main class="container" v-scope>
+    <form action="/action/login.php" method="post" @submit.prevent="login">
         <button type="submit">Iniciar Sesión</button>
     </form>
-</main>
+</main>
+
+<script>
+    PetiteVue.createApp({
+        store,
+        async login() {
+            const response = await fetch('/action/login.php');
+            try {
+                const data = await response.json();
+                sessionStorage.setItem('token', data.token);
+            } catch (error) {
+                store.error = {
+                    title: 'Error al iniciar sesión',
+                    message: 'No se pudo iniciar sesión, intente de nuevo más tarde'
+                }
+            }
+            finally {
+                // reload
+                location.reload();
+            }
+        }
+    }).mount()
+</script>