zoeissleeping/veridian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve auth pages

Browse Source
This commit is contained in:
Zoe
2026-02-27 16:21:00 -06:00
parent bf9f613e4d
commit 5decf9939b
7 changed files with 179 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/auth/login.vue
+61 -16
View File
@@ -2,7 +2,7 @@
import { deriveKey } from '~/utils/crypto';
import { initSettings } from '~/utils/settings';
const { client: authClient, signIn } = useAuth();
const { client: authClient, signIn, session } = useAuth();
definePageMeta({
layout: 'auth',
@@ -10,6 +10,12 @@ definePageMeta({
const to = useRoute().query.to as string | undefined;
if (session.value !== null) {
await navigateTo(to ?? '/');
}
const config = useRuntimeConfig();
const form = reactive({
email: '',
password: '',
@@ -102,19 +108,58 @@ const submit = async () => {
</script>
<template>
<h1 class="font-bold text-center mb-4">Login</h1>
<form class="flex flex-col [&>input]:mb-2" @submit.prevent="submit">
<label for="email">Email</label>
<input required pattern=".{1,}@.{1,}\..{2,3}" ref="emailInputEl" type="email" autocomplete="email" id="email"
v-model="form.email" />
<label for="password">Password</label>
<input required minlength="8" maxlength="128" ref="passwordInputEl" type="password"
autocomplete="current-password" id="password" v-model="form.password" />
<button :disabled="!hydrated" class="accent" type="submit">
<span v-if="loading" class="i-svg-spinners-90-ring-with-bg text-6"></span>
<span v-else>Login</span>
</button>
</form>
<p class="text-center">Dont have an account? <a
:href="to ? `/auth/register?to=${to}` : '/auth/register'">Register</a></p>
<div class="relative flex flex-col items-center justify-center w-full h-full p-4 overflow-hidden">
<!-- Background decorative blobs -->
<div
class="absolute -top-24 -left-24 w-96 h-96 bg-[var(--color-accent)] opacity-10 blur-[100px] rounded-full pointer-events-none">
</div>
<div
class="absolute -bottom-24 -right-24 w-96 h-96 bg-[var(--color-accent)] opacity-5 blur-[100px] rounded-full pointer-events-none">
</div>
<div class="z-10 max-w-sm w-full">
<div class="flex flex-col items-center mb-4 text-center">
<h1 class="text-3xl font-bold tracking-tight">Veridian</h1>
<p class="text-[var(--text-secondary)]">Sign in to your account</p>
</div>
<div class="rounded-2xl">
<form class="flex flex-col gap-2" @submit.prevent="submit">
<div class="flex flex-col gap-1.5">
<label for="email"
class="text-sm font-medium uppercase tracking-wider text-[var(--text-secondary)] ml-1">Email</label>
<input required pattern=".{1,}@.{1,}\..{2,3}" ref="emailInputEl" type="email"
autocomplete="email" id="email" v-model="form.email" placeholder="name@example.com"
class="focus:ring-2 focus:ring-[var(--color-accent)]/20 border border-[var(--color-border)] transition-all" />
</div>
<div class="flex flex-col gap-1.5">
<label for="password"
class="text-sm font-medium uppercase tracking-wider text-[var(--text-secondary)] ml-1">Password</label>
<input required minlength="8" maxlength="128" ref="passwordInputEl" type="password"
autocomplete="current-password" id="password" v-model="form.password" placeholder="••••••••"
class="focus:ring-2 focus:ring-[var(--color-accent)]/20 border border-[var(--color-border)] transition-all" />
</div>
<button :disabled="!hydrated"
class="accent w-full mt-2 h-11 flex items-center justify-center font-semibold" type="submit">
<span v-if="loading" class="i-svg-spinners-90-ring-with-bg text-xl"></span>
<span v-else>Sign In</span>
</button>
</form>
</div>
<p v-if="!config.public.disableSignup" class="text-sm text-center mt-3 text-[var(--text-secondary)]">
New to Veridian?
<NuxtLink :to="to ? `/auth/register?to=${to}` : '/auth/register'"
class="text-[var(--color-accent)] font-medium hover:underline">
Create an account
</NuxtLink>
</p>
</div>
<div class="absolute bottom-4 right-4">
<ThemeSwitcher size="medium" />
</div>
</div>
</template>