feat: redesign auth pages — rounded-[48px] cards, serif titles, orbs, icon inputs
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 5s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 5s
- Auth layout: warm background with brand-accent/ochre orbs, header with Globe + Momento branding - Login form: serif heading, icon-inputs with focus transitions, uppercase labels, submit with arrow - Register form: matching card style with User/Mail/Lock icons, confirm password field - Forgot password: matching card with email icon, success state with mail icon - Reset password: matching card with Lock icons, invalid link state with AlertCircle - All text via i18n (new keys: welcomeBack, createYourSpace, forgot, etc.) - Dark mode support via CSS variables - Removed shadcn Card/Button/Input dependencies from auth forms
This commit is contained in:
Antigravity
@@ -1,98 +1,156 @@
|
||||
'use client'
|
||||
'use client';
|
||||
|
||||
import { useState, Suspense } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { resetPassword } from '@/app/actions/auth-reset'
|
||||
import { toast } from 'sonner'
|
||||
import { useSearchParams, useRouter } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import { useLanguage } from '@/lib/i18n'
|
||||
import { useState, Suspense } from 'react';
|
||||
import { resetPassword } from '@/app/actions/auth-reset';
|
||||
import { toast } from 'sonner';
|
||||
import { useSearchParams, useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { Lock, ArrowRight, Sparkles, AlertCircle, ArrowLeft } from 'lucide-react';
|
||||
import { useLanguage } from '@/lib/i18n';
|
||||
|
||||
function ResetPasswordForm() {
|
||||
const searchParams = useSearchParams()
|
||||
const router = useRouter()
|
||||
const { t } = useLanguage()
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
|
||||
const token = searchParams.get('token')
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const { t } = useLanguage();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const token = searchParams.get('token');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
if (!token) return
|
||||
e.preventDefault();
|
||||
if (!token) return;
|
||||
|
||||
const formData = new FormData(e.currentTarget)
|
||||
const password = formData.get('password') as string
|
||||
const confirm = formData.get('confirmPassword') as string
|
||||
const formData = new FormData(e.currentTarget);
|
||||
const password = formData.get('password') as string;
|
||||
const confirm = formData.get('confirmPassword') as string;
|
||||
|
||||
if (password !== confirm) {
|
||||
toast.error(t('resetPassword.passwordMismatch'))
|
||||
return
|
||||
toast.error(t('resetPassword.passwordMismatch'));
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true)
|
||||
const result = await resetPassword(token, password)
|
||||
setIsSubmitting(false)
|
||||
|
||||
setIsSubmitting(true);
|
||||
const result = await resetPassword(token, password);
|
||||
setIsSubmitting(false);
|
||||
|
||||
if (result.error) {
|
||||
toast.error(result.error)
|
||||
toast.error(result.error);
|
||||
} else {
|
||||
toast.success(t('resetPassword.success'))
|
||||
router.push('/login')
|
||||
toast.success(t('resetPassword.success'));
|
||||
router.push('/login');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (!token) {
|
||||
return (
|
||||
<Card className="w-full max-w-[400px]">
|
||||
<CardHeader>
|
||||
<CardTitle>{t('resetPassword.invalidLinkTitle')}</CardTitle>
|
||||
<CardDescription>{t('resetPassword.invalidLinkDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter>
|
||||
<Link href="/forgot-password" title={t('resetPassword.requestNewLink')} className="w-full">
|
||||
<Button variant="outline" className="w-full">{t('resetPassword.requestNewLink')}</Button>
|
||||
<div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
|
||||
<div className="space-y-6 text-center">
|
||||
<div className="w-12 h-12 mx-auto rounded-2xl bg-red-500/10 flex items-center justify-center">
|
||||
<AlertCircle size={24} className="text-red-500" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-2xl font-serif font-bold">{t('resetPassword.invalidLinkTitle')}</h1>
|
||||
<p className="text-[var(--muted-foreground)] text-sm">{t('resetPassword.invalidLinkDescription')}</p>
|
||||
</div>
|
||||
<Link href="/forgot-password" className="block">
|
||||
<button className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98]">
|
||||
{t('resetPassword.requestNewLink')}
|
||||
</button>
|
||||
</Link>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-[400px]">
|
||||
<CardHeader>
|
||||
<CardTitle>{t('resetPassword.title')}</CardTitle>
|
||||
<CardDescription>{t('resetPassword.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="password">{t('resetPassword.newPassword')}</label>
|
||||
<Input id="password" name="password" type="password" required minLength={6} autoFocus />
|
||||
<div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
|
||||
<div className="space-y-8">
|
||||
<div className="text-center space-y-2">
|
||||
<h1 className="text-2xl md:text-3xl font-serif font-bold">
|
||||
{t('resetPassword.title')}
|
||||
</h1>
|
||||
<p className="text-[var(--muted-foreground)] text-sm font-light">
|
||||
{t('resetPassword.description')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
|
||||
{t('resetPassword.newPassword')}
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
|
||||
<Lock size={16} />
|
||||
</div>
|
||||
<input
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
required
|
||||
minLength={6}
|
||||
autoFocus
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="confirmPassword">{t('resetPassword.confirmNewPassword')}</label>
|
||||
<Input id="confirmPassword" name="confirmPassword" type="password" required minLength={6} />
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
|
||||
{t('resetPassword.confirmNewPassword')}
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
|
||||
<Lock size={16} />
|
||||
</div>
|
||||
<input
|
||||
className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
required
|
||||
minLength={6}
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button type="submit" className="w-full" disabled={isSubmitting}>
|
||||
{isSubmitting ? t('resetPassword.resetting') : t('resetPassword.resetPassword')}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
)
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] flex items-center justify-center gap-3 transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98] disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<Sparkles size={16} className="animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
{t('resetPassword.resetPassword')}
|
||||
<ArrowRight size={14} />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="text-center">
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-xs text-[var(--muted-foreground)] hover:text-[var(--color-brand-accent)] transition-colors flex items-center justify-center gap-1"
|
||||
>
|
||||
<ArrowLeft size={12} />
|
||||
{t('auth.backToLogin')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
const { t } = useLanguage()
|
||||
const { t } = useLanguage();
|
||||
return (
|
||||
<main className="flex items-center justify-center md:h-screen p-4">
|
||||
<Suspense fallback={<div>{t('resetPassword.loading')}</div>}>
|
||||
<ResetPasswordForm />
|
||||
</Suspense>
|
||||
</main>
|
||||
)
|
||||
<Suspense fallback={<div className="text-center text-sm text-[var(--muted-foreground)]">{t('resetPassword.loading')}</div>}>
|
||||
<ResetPasswordForm />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user