rename signin / signup to login / register

frontend/pages/login.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import {
+    Card,
+    CardHeader,
+    CardTitle,
+    CardDescription,
+    CardContent,
+    CardFooter,
+} from '@/components/ui/card';
+import { loginUser } from '~/lib/api/auth/login';
+
+definePageMeta({
+    layout: 'auth',
+    middleware: ['not-authenticated'],
+});
+useHead({
+    title: 'Login - Warren',
+});
+
+// TODO: Get this from the backend
+const OPEN_ID = false;
+const loggingIn = ref(false);
+const email = ref('');
+const password = ref('');
+
+const inputValid = computed(
+    () => email.value.trim().length > 0 && password.value.trim().length > 0
+);
+
+async function submit() {
+    if (!inputValid.value) {
+        return;
+    }
+
+    loggingIn.value = true;
+
+    const { success } = await loginUser(email.value, password.value);
+
+    if (success) {
+        await navigateTo({ path: '/' });
+    }
+
+    loggingIn.value = false;
+}
+
+function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+        submit();
+    }
+}
+</script>
+
+<template>
+    <Card class="w-full max-w-sm">
+        <CardHeader>
+            <CardTitle class="text-2xl">Login</CardTitle>
+            <CardDescription>
+                Enter your email and password to log in to your account.
+            </CardDescription>
+        </CardHeader>
+        <CardContent class="grid gap-4">
+            <div class="grid gap-2">
+                <Label for="email">Email</Label>
+                <Input
+                    id="email"
+                    v-model="email"
+                    type="email"
+                    placeholder="your@email.com"
+                    autocomplete="off"
+                    required
+                    @keydown="onKeyDown"
+                />
+            </div>
+            <div class="grid gap-2">
+                <Label for="password">Password</Label>
+                <Input
+                    id="password"
+                    v-model="password"
+                    type="password"
+                    autocomplete="off"
+                    required
+                    @keydown="onKeyDown"
+                />
+            </div>
+        </CardContent>
+        <CardFooter class="flex-col gap-2">
+            <Button class="w-full" :disabled="!inputValid" @click="submit"
+                >Log in</Button
+            >
+            <Button class="w-full" variant="outline" :disabled="!OPEN_ID"
+                >OpenID Connect</Button
+            >
+            <NuxtLink to="/register" class="w-full">
+                <Button class="w-full" variant="ghost">Register instead</Button>
+            </NuxtLink>
+        </CardFooter>
+    </Card>
+</template>