Add authentication pages: create auth and signin components with layout and form handling

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",

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>

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>