Files
chronus/src/pages/login.astro
Atridad Lahiji caf763aa1e
All checks were successful
Docker Deploy / build-and-push (push) Successful in 4m6s
Moar
2026-02-09 02:28:54 -07:00

76 lines
2.4 KiB
Plaintext

---
import Layout from '../layouts/Layout.astro';
import { Icon } from 'astro-icon/components';
import PasskeyLogin from '../components/auth/PasskeyLogin.vue';
if (Astro.locals.user) {
return Astro.redirect('/dashboard');
}
const error = Astro.url.searchParams.get('error');
const errorMessage =
error === 'invalid_credentials'
? 'Invalid email or password'
: error === 'missing_fields'
? 'Please fill in all fields'
: null;
---
<Layout title="Login - Chronus">
<div class="flex justify-center items-center flex-1 bg-base-100">
<div class="card card-border bg-base-100 w-full max-w-sm mx-4">
<div class="card-body gap-0">
<img src="/logo.webp" alt="Chronus" class="h-14 w-14 mx-auto mb-3" />
<h2 class="text-2xl font-extrabold tracking-tight text-center">Welcome Back</h2>
<p class="text-center text-base-content/60 text-sm mt-1 mb-5">Sign in to continue to Chronus</p>
{errorMessage && (
<div role="alert" class="alert alert-error mb-4 text-sm">
<Icon name="heroicons:exclamation-circle" class="w-5 h-5" />
<span>{errorMessage}</span>
</div>
)}
<form action="/api/auth/login" method="POST" class="space-y-3">
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Email</legend>
<input
type="email"
id="email"
name="email"
placeholder="your@email.com"
class="input w-full"
autocomplete="email"
required
/>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend text-xs">Password</legend>
<input
type="password"
id="password"
name="password"
placeholder="Enter your password"
class="input w-full"
autocomplete="current-password"
required
/>
</fieldset>
<button class="btn btn-primary w-full my-4">Sign In</button>
</form>
<PasskeyLogin client:idle />
<div class="divider text-xs">OR</div>
<p class="text-center text-sm text-base-content/60">
Don't have an account?
<a href="/signup" class="link link-primary font-semibold">Create one</a>
</p>
</div>
</div>
</div>
</Layout>