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

This commit is contained in:
lucast committed 2025-12-05 02:52:37 +01:00
1 parent 170d24c117
commit 46951be40f
3 files changed
+87 -2

No files matched your search

+55
View File
@@ -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>