feat(frontend): add register page

Author: wale

components/Nav.vue

@@ -30,7 +30,7 @@
                     class="relative md:pb-0 md:pt-0 md:flex md:flex-row"
                 >
                     <ul
-                        class="absolute -right-1 md:-top-6 text-grayscale-950 rounded-md bg-grayscale-400 md:bg-inherit pl-8 pr-4 mt-4 md:pl-0 md:pr-0 md:m-0 md:flex md:flex-row text-right"
+                        class="absolute -right-1 md:-top-6 text-grayscale-950 rounded-md bg-grayscale-400 md:bg-inherit pl-12 pr-6 mt-4 md:pl-0 md:pr-0 md:m-0 md:flex md:flex-row text-right"
                     >
                         <li v-if="user.id">
                             <div class="flex flex-row md:p-4 py-2 gap-1">
@@ -40,7 +40,12 @@
                                 >
                             </div>
                         </li>
-                        <li v-else>
+                        <li v-if="!user.id">
+                            <a href="/register" class="md:p-4 py-2 block"
+                                >Register</a
+                            >
+                        </li>
+                        <li v-if="!user.id">
                             <a href="/login" class="md:p-4 py-2 block">Login</a>
                         </li>
                         <li>

pages/login.vue

@@ -85,9 +85,8 @@
 import { ref } from "vue";
 
 import { useAuthStore } from "~/utils/authStore";
-import { pinia } from "~/utils/pinia";
 
-const userStore = useAuthStore(pinia);
+const userStore = useAuthStore();
 
 // Check if the user has selected username or email
 const formIsEmail = ref(false);

pages/register.vue

@@ -0,0 +1,84 @@
+<template>
+    <Layout
+        title="Register | Readconquista"
+        description="Register an account in Readconquista!"
+    >
+        <div
+            class="flex h-full items-center justify-center flex-col gap-4 md:gap-8"
+        >
+            <h2 class="text-3xl md:text-5xl font-black">Register</h2>
+            <form class="flex flex-col gap-4" @submit.prevent="register()">
+                <div>
+                    <input
+                        v-model="email"
+                        type="email"
+                        class="rounded-lg resize-none w-full block bg-grayscale-400 px-4 py-2 placeholder:justify-center"
+                        placeholder="Email address"
+                    />
+                </div>
+                <div>
+                    <input
+                        v-model="username"
+                        class="rounded-lg resize-none w-full block bg-grayscale-400 px-4 py-2 placeholder:justify-center"
+                        placeholder="Username"
+                    />
+                </div>
+                <div>
+                    <input
+                        v-model="password"
+                        type="password"
+                        class="rounded-lg resize-none w-full block bg-grayscale-400 px-4 py-2 placeholder:justify-center"
+                        placeholder="Password"
+                    />
+                </div>
+                <div class="mt-4">
+                    <button
+                        type="submit"
+                        class="rounded-xl w-full p-2"
+                        :disabled="!email || !password || !username"
+                        :class="
+                            email && username && password
+                                ? 'bg-grayscale-900 text-grayscale-400'
+                                : 'bg-grayscale-400 text-grayscale-900'
+                        "
+                    >
+                        Register
+                    </button>
+                </div>
+            </form>
+            <div v-if="error" class="mt-2 flex flex-row justify-center">
+                <span class="text-red-500 font-bold"
+                    >{{ error.statusCode }} - {{ error.statusMessage }}</span
+                >
+            </div>
+        </div>
+    </Layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { useAuthStore } from "~/utils/authStore";
+
+const userStore = useAuthStore();
+
+const email = ref("");
+const username = ref("");
+const password = ref("");
+
+const error = ref();
+
+const router = useRouter();
+
+const register = async () => {
+    const { data, requestState } = await userStore.register(
+        password.value,
+        username.value,
+        email.value,
+    );
+
+    if (requestState.error) error.value = requestState.error;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    else if (data) await router.push("/");
+};
+</script>

utils/authStore.ts

@@ -74,5 +74,35 @@ export const useAuthStore = defineStore("auth", {
 
             this.user = {} as UserState;
         },
+
+        async register(
+            password: string,
+            username: string,
+            email: string,
+        ): Promise<{ data: UserState; requestState: RequestState }> {
+            const requestState: RequestState = {
+                loading: true,
+                error: null,
+            };
+
+            try {
+                const data: UserState = await $fetch("/api/auth/register", {
+                    method: "post",
+                    headers: { "Content-Type": "application/json" },
+                    body: {
+                        password,
+                        username,
+                        email,
+                    },
+                });
+                requestState.loading = false;
+                this.user = data;
+                return { data, requestState };
+            } catch (error) {
+                requestState.loading = false;
+                requestState.error = error as Error;
+                return { data: {} as UserState, requestState };
+            }
+        },
     },
 });