initial commit

2026-01-11 05:04:29 -06:00
commit 0877cc10bd
65 changed files with 5009 additions and 0 deletions
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+definePageMeta({
+    layout: 'auth',
+})
+
+const { signIn, session, fetchSession, authClient } = useAuth();
+
+if (session.value !== null) {
+    navigateTo("/");
+}
+
+const form = reactive({
+    name: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+});
+const loading = ref(false);
+
+let emailInputEl = ref<HTMLInputElement | null>(null);
+let passwordInputEl = ref<HTMLInputElement | null>(null);
+
+onMounted(() => {
+    emailInputEl.value!.addEventListener("input", () => {
+        emailInputEl.value!.setCustomValidity("");
+    });
+
+    passwordInputEl.value!.addEventListener("input", () => {
+        passwordInputEl.value!.setCustomValidity("");
+    });
+});
+
+const submit = async () => {
+    const inputs = [emailInputEl, passwordInputEl];
+
+    for (const input of inputs) {
+        if (input.value?.validity.valid === false) {
+            input.value!.reportValidity();
+            return;
+        }
+    }
+
+    loading.value = true;
+
+    await signIn.email({
+        email: form.email,
+        password: form.password,
+    }, {
+        onSuccess: async () => {
+            await fetchSession();
+            navigateTo("/")
+        },
+        onError: (ctx) => {
+            const error = ctx.error.code as keyof typeof authClient.$ERROR_CODES;
+
+            // TODO: i18n
+            // ref https://www.better-auth.com/docs/concepts/client#error-codes
+            switch (error) {
+                case "INVALID_PASSWORD":
+                    passwordInputEl.value!.setCustomValidity(ctx.error.message);
+                    passwordInputEl.value!.reportValidity();
+                    break;
+                case "ACCOUNT_NOT_FOUND":
+                case "USER_NOT_FOUND":
+                case "USER_EMAIL_NOT_FOUND":
+                    emailInputEl.value!.setCustomValidity(ctx.error.message);
+                    emailInputEl.value!.reportValidity();
+                    break;
+                default:
+                    console.log(ctx.error);
+                    alert(`Something went wrong. ${ctx.error.message}`);
+                    break;
+            }
+        }
+    });
+
+    loading.value = false;
+}
+</script>
+
+<template>
+    <h1 class="font-bold text-center mb-4">Login</h1>
+    <form class="flex flex-col [&>input]:mb-2" @submit.prevent="submit">
+        <label for="email">Email</label>
+        <input required pattern=".{1,}@.{1,}\..{2,3}" ref="emailInputEl" type="email" autocomplete="email" id="email"
+            v-model="form.email" />
+        <label for="password">Password</label>
+        <input required minlength="8" maxlength="128" ref="passwordInputEl" type="password"
+            autocomplete="current-password" id="password" v-model="form.password" />
+        <button class="accent" type="submit">
+            <iconify-icons v-if="loading" width="24" icon="svg-spinners:90-ring-with-bg" />
+            <span v-else>Login</span>
+        </button>
+    </form>
+    <p class="text-center">Dont have an account? <a href="/auth/register">Register</a></p>
+</template>