From 0d987f5c97cc8c0e205193ef8c67745ac981d5bf Mon Sep 17 00:00:00 2001
From: Santo Cariotti <santo@dcariotti.me>
Date: Thu, 3 Apr 2025 12:36:34 +0200
Subject: Fix login and register

---
 frontend/pages/index.vue    |  21 ++------
 frontend/pages/login.vue    |  15 ++++--
 frontend/pages/register.vue | 128 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 142 insertions(+), 22 deletions(-)
 create mode 100644 frontend/pages/register.vue

(limited to 'frontend/pages')

diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index d097617..110db25 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,20 +1,7 @@
-<script setup lang="ts">
-const props = defineProps<{
-    title: string;
-}>();
-
-const toast = useToast();
-
-function showToast() {
-    toast.add(props);
-}
-</script>
+<script setup lang="ts"></script>
 
 <template>
-    <UButton
-        label="Show toast"
-        color="neutral"
-        variant="outline"
-        @click="showToast"
-    />
+    <div>
+        <h1>Hello</h1>
+    </div>
 </template>
diff --git a/frontend/pages/login.vue b/frontend/pages/login.vue
index 0be0372..5fdb689 100644
--- a/frontend/pages/login.vue
+++ b/frontend/pages/login.vue
@@ -83,7 +83,7 @@ const handleSubmit = async (event) => {
     try {
         error.value = null;
         isLoading.value = true;
-        fetch(`${config.public.apiBase}/auth/login`, {
+        await fetch(`${config.public.apiBase}/auth/login`, {
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
@@ -92,23 +92,28 @@ const handleSubmit = async (event) => {
                 username: username.value,
                 password: password.value,
             }),
-        }).then((response) => {
+        }).then(async (response) => {
+            const body = await response.json();
             if (response.status != 200) {
                 toast.add({
                     title: "Login Failed",
-                    description: response.body,
+                    description: body.error,
                     color: "error",
                 });
             } else {
                 toast.add({
                     title: "Login Successful",
-                    description: "You have been successfully logged in.",
+                    description: "You have been successfully logged in",
                     color: "success",
                 });
+
+                localStorage.setItem("token", body.token);
+                setTimeout(() => {
+                    window.location.href = "/play";
+                }, 1000);
             }
         });
     } catch (err) {
-        console.error("Login failed:", err);
         error.value =
             err.response?.data?.message || "An error occurred during login";
 
diff --git a/frontend/pages/register.vue b/frontend/pages/register.vue
new file mode 100644
index 0000000..824b53b
--- /dev/null
+++ b/frontend/pages/register.vue
@@ -0,0 +1,128 @@
+<template>
+    <div
+        class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8"
+    >
+        <UCard class="w-full max-w-md bg-gray-900">
+            <div class="flex flex-col items-center">
+                <h1
+                    class="text-center text-2xl font-bold tracking-tight text-white"
+                >
+                    Create a new account
+                </h1>
+                <p class="mt-2 text-center text-sm text-gray-200">
+                    Or
+                    <NuxtLink
+                        to="/login"
+                        class="font-medium text-primary hover:text-primary-dark underline"
+                    >
+                        sign in to your account
+                    </NuxtLink>
+                </p>
+            </div>
+
+            <div class="mt-8">
+                <form
+                    @submit.prevent="handleSubmit"
+                    class="space-y-6"
+                    method="POST"
+                >
+                    <UFormField label="Username" name="username">
+                        <UInput
+                            v-model="username"
+                            name="username"
+                            autocomplete="username"
+                            required
+                            placeholder="mario.rossi"
+                            class="w-full"
+                        />
+                    </UFormField>
+
+                    <UFormField label="Password" name="password">
+                        <UInput
+                            v-model="password"
+                            type="password"
+                            name="password"
+                            autocomplete="current-password"
+                            required
+                            placeholder="*****"
+                            class="w-full"
+                        />
+                    </UFormField>
+
+                    <div>
+                        <UButton
+                            type="submit"
+                            block
+                            :loading="isLoading"
+                            color="primary"
+                            variant="solid"
+                            class="cursor-pointer"
+                        >
+                            Sign up
+                        </UButton>
+                    </div>
+                </form>
+            </div>
+        </UCard>
+    </div>
+</template>
+
+<script setup>
+const username = ref("");
+const password = ref("");
+const error = ref("");
+const isLoading = ref(false);
+
+const toast = useToast();
+
+const config = useRuntimeConfig();
+
+const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    try {
+        error.value = null;
+        isLoading.value = true;
+        await fetch(`${config.public.apiBase}/auth/register`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                username: username.value,
+                password: password.value,
+            }),
+        }).then(async (response) => {
+            const body = await response.json();
+            if (response.status != 200) {
+                toast.add({
+                    title: "Login Failed",
+                    description: body.error,
+                    color: "error",
+                });
+            } else {
+                toast.add({
+                    title: "Register Successful",
+                    description: "You have been successfully signed up",
+                    color: "success",
+                });
+                localStorage.setItem("token", body.token);
+                setTimeout(() => {
+                    window.location.href = "/play";
+                }, 1000);
+            }
+        });
+    } catch (err) {
+        error.value =
+            err.response?.data?.message || "An error occurred during login";
+
+        toast.add({
+            title: "Login Failed",
+            description: error.value,
+            color: "error",
+        });
+    } finally {
+        isLoading.value = false;
+    }
+};
+</script>
-- 
cgit v1.2.3-18-g5258