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/register.vue
+80 -24
View File
@@ -1,4 +1,7 @@
<script setup lang="ts">
import { deriveKey } from '~/utils/crypto';
import { initSettings } from '~/utils/settings';
const { client: authClient, signUp, session } = useAuth();
definePageMeta({
@@ -10,10 +13,10 @@ if (session.value !== null) {
await navigateTo(to ?? '/');
}
if (import.meta.server) {
if (process.env.DISABLE_SIGNUP?.toLowerCase() === 'true' || process.env.DISABLE_SIGNUP === '1') {
await navigateTo(to ? `/auth/login?to=${to}` : '/auth/login');
}
const config = useRuntimeConfig();
if (config.public.disableSignup) {
await navigateTo(to ? `/auth/login?to=${to}` : '/auth/login');
}
const form = reactive({
@@ -138,23 +141,76 @@ const submit = async () => {
</script>
<template>
<h1 class="font-bold text-center mb-4">Register</h1>
<form class="flex flex-col [&>input]:mb-2" @submit.prevent="submit">
<label for="name">Name</label>
<input required ref="nameInputEl" type="text" id="name" v-model="form.name" />
<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="new-password"
id="password" v-model="form.password" />
<label for="confirmPassword">Confirm Password</label>
<input required minlength="8" maxlength="128" ref="confirmPasswordInputEl" type="password"
autocomplete="new-password" id="confirmPassword" v-model="form.confirmPassword" />
<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>Register</span>
</button>
</form>
<p class="text-center">Already have an account? <a :href="to ? `/auth/login?to=${to}` : '/auth/login'">Login</a></p>
</template>
<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 -right-24 w-96 h-96 bg-[var(--color-accent)] opacity-10 blur-[100px] rounded-full pointer-events-none">
</div>
<div
class="absolute -bottom-24 -left-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)]">Create 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="name"
class="text-sm font-medium uppercase tracking-wider text-[var(--text-secondary)] ml-1">Name</label>
<input required ref="nameInputEl" type="text" id="name" v-model="form.name"
placeholder="John Doe"
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="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="new-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>
<div class="flex flex-col gap-1.5">
<label for="confirmPassword"
class="text-sm font-medium uppercase tracking-wider text-[var(--text-secondary)] ml-1">Confirm
Password</label>
<input required minlength="8" maxlength="128" ref="confirmPasswordInputEl" type="password"
autocomplete="new-password" id="confirmPassword" v-model="form.confirmPassword"
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>Register</span>
</button>
</form>
</div>
<p class="text-sm text-center mt-3 text-[var(--text-secondary)]">
Already have an account?
<NuxtLink :to="to ? `/auth/login?to=${to}` : '/auth/login'"
class="text-[var(--color-accent)] font-medium hover:underline">
Log in here
</NuxtLink>
</p>
</div>
<div class="absolute bottom-4 right-4">
<ThemeSwitcher size="medium" />
</div>
</div>
</template>