From 46951be40f3c916f132962dcd2b521ff5b01b457 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Fri, 5 Dec 2025 02:47:51 +0100
Subject: [PATCH] Add authentication pages: create auth and signin components
 with layout and form handling

---
 app/composables/useAuth.ts |  2 --
 app/pages/auth.vue         | 32 ++++++++++++++++++++++
 app/pages/auth/signin.vue  | 55 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 app/pages/auth.vue
 create mode 100644 app/pages/auth/signin.vue

diff --git a/app/composables/useAuth.ts b/app/composables/useAuth.ts
index 038a6a6..f5ee2e4 100644
--- a/app/composables/useAuth.ts
+++ b/app/composables/useAuth.ts
@@ -14,8 +14,6 @@ export const useAuth = () => {
 		password: string,
 		remember: boolean = false
 	) => {
-		console.log(email)
-
 		try {
 			const res = await cfetch(
 				"/auth/signin",
diff --git a/app/pages/auth.vue b/app/pages/auth.vue
new file mode 100644
index 0000000..4b5eaef
--- /dev/null
+++ b/app/pages/auth.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+definePageMeta({
+	layout: false,
+})
+</script>
+
+<template>
+	<section class="auth">
+		<Card class="card">
+			<NuxtPage />
+		</Card>
+	</section>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+
+.auth {
+	width: 100vw;
+	height: 100vh;
+	background-color: $color-background;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.card {
+	width: 40%;
+	max-width: 450px;
+}
+</style>
diff --git a/app/pages/auth/signin.vue b/app/pages/auth/signin.vue
new file mode 100644
index 0000000..25629bd
--- /dev/null
+++ b/app/pages/auth/signin.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const auth = useAuth()
+
+const submit = async (e: any) => {
+	let data: any
+
+	try {
+		data = Object.fromEntries(new FormData(e?.target as HTMLFormElement))
+	} catch {}
+
+	await auth.signin(data.email, data.password, data.remember)
+}
+</script>
+
+<template>
+	<h1>Welcome back!</h1>
+
+	<form @submit.prevent="submit" class="form">
+		<Input placeholder="E-mail" type="email" name="email" full required>
+			<template #label>Email address</template>
+		</Input>
+		<Input
+			placeholder="Password"
+			type="password"
+			name="password"
+			full
+			required
+		>
+			<template #label>Password</template>
+		</Input>
+
+		<Checkbox name="remember" label="Remember me?" />
+
+		<Button full center-text type="submit">Sign in</Button>
+
+		<p>Sorry, but registrations are closed</p>
+	</form>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+h1 {
+	@include fontSize(24px);
+	font-weight: 600;
+	margin-bottom: 0.8em;
+	text-align: center;
+}
+
+.form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.8rem;
+}
+</style>