login

frontend/pages/login.vue

@@ -7,6 +7,7 @@ import {
     CardContent,
     CardFooter,
 } from '@/components/ui/card';
+import { loginUser } from '~/lib/api/auth/login';
 
 definePageMeta({
     layout: 'auth',
@@ -14,6 +15,35 @@ definePageMeta({
 
 // 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>
@@ -29,24 +59,30 @@ const OPEN_ID = false;
                 <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">Sign in</Button>
+            <Button class="w-full" :disabled="!inputValid" @click="submit"
+                >Sign in</Button
+            >
             <Button class="w-full" variant="outline" :disabled="!OPEN_ID"
                 >OpenID Connect</Button
             >