forked from rajun/ar-test
240 lines
12 KiB
TypeScript
240 lines
12 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useSubmit, useNavigation, useActionData, useNavigate, redirect } from 'react-router';
|
|
import type { Route } from './+types/login';
|
|
import { pb } from '~/lib/pocketbase';
|
|
import { Lock, Mail, Eye, EyeOff, Loader2, ArrowRight, AlertCircle } from 'lucide-react';
|
|
import { Input } from '~/components/ui/input';
|
|
import { Button } from '~/components/ui/button';
|
|
import { Label } from '~/components/ui/label';
|
|
import { toast } from 'sonner';
|
|
import { LogoMark } from '~/components/logo-mark';
|
|
import { AuthBrandPanel } from '~/components/auth/auth-brand-panel';
|
|
|
|
export async function clientLoader() {
|
|
if (pb.authStore.isValid) {
|
|
return redirect('/');
|
|
}
|
|
return null;
|
|
}
|
|
|
|
export async function clientAction({ request }: Route.ClientActionArgs) {
|
|
const formData = await request.formData();
|
|
const email = formData.get('email') as string;
|
|
const password = formData.get('password') as string;
|
|
|
|
if (!email || !password) {
|
|
return { error: 'Please enter both email and password' };
|
|
}
|
|
|
|
try {
|
|
await pb.collection('users').authWithPassword(email, password);
|
|
return redirect('/');
|
|
} catch (err: any) {
|
|
return { error: err?.message || 'Invalid email or password' };
|
|
}
|
|
}
|
|
|
|
const fieldLabel = 'normal-case tracking-normal text-sm font-medium text-neutral-300';
|
|
const fieldIcon =
|
|
'pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-neutral-500 transition-colors group-focus-within:text-orange-500';
|
|
const fieldInput =
|
|
'h-12 rounded-xl border-neutral-800 bg-[#141414] pl-11 text-[15px] focus-visible:border-orange-500/70 focus-visible:ring-4 focus-visible:ring-orange-500/10';
|
|
|
|
export default function Login() {
|
|
const navigate = useNavigate();
|
|
const submit = useSubmit();
|
|
const navigation = useNavigation();
|
|
const actionData = useActionData<typeof clientAction>();
|
|
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [capsLock, setCapsLock] = useState(false);
|
|
const [localError, setLocalError] = useState('');
|
|
|
|
const isLoading = navigation.state !== 'idle';
|
|
const errorMessage = localError || actionData?.error;
|
|
|
|
// Already-authenticated redirect fallback
|
|
useEffect(() => {
|
|
if (pb.authStore.isValid) {
|
|
navigate('/', { replace: true });
|
|
}
|
|
}, [navigate]);
|
|
|
|
// Handle authentication feedback
|
|
useEffect(() => {
|
|
if (actionData) {
|
|
if (actionData.error) {
|
|
setLocalError(actionData.error);
|
|
toast.error(actionData.error);
|
|
} else {
|
|
toast.success('Logged in successfully');
|
|
}
|
|
}
|
|
}, [actionData]);
|
|
|
|
const handleLogin = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!email || !password) {
|
|
setLocalError('Please enter both email and password');
|
|
return;
|
|
}
|
|
|
|
setLocalError('');
|
|
const formData = new FormData();
|
|
formData.append('email', email);
|
|
formData.append('password', password);
|
|
|
|
submit(formData, { method: 'post' });
|
|
};
|
|
|
|
const handleForgotPassword = () => {
|
|
toast.info('Please contact your administrator to reset your password.');
|
|
};
|
|
|
|
return (
|
|
<div className="grid min-h-screen bg-[#0D0D0D] font-sans text-white lg:grid-cols-2">
|
|
<AuthBrandPanel />
|
|
|
|
<main className="relative flex flex-col px-6 py-8 sm:px-10">
|
|
{/* Subtle dot texture */}
|
|
<div
|
|
className="pointer-events-none absolute inset-0 opacity-[0.35]"
|
|
style={{
|
|
backgroundImage: 'radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px)',
|
|
backgroundSize: '22px 22px',
|
|
maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
|
|
WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
|
|
}}
|
|
/>
|
|
<div className="pointer-events-none absolute top-1/3 left-1/2 h-80 w-80 -translate-x-1/2 rounded-full bg-orange-500/[0.06] blur-[120px]" />
|
|
|
|
<div className="relative z-10 flex flex-1 items-center justify-center">
|
|
<div className="w-full max-w-[400px] animate-[fade-up_0.5s_ease-out]">
|
|
<LogoMark className="mx-auto mb-8 h-14 w-14 text-3xl lg:hidden" />
|
|
|
|
<div className="mb-8 space-y-2 text-center lg:text-left">
|
|
<h1 className="text-3xl font-semibold tracking-tight text-white">Welcome back</h1>
|
|
<p className="text-[15px] text-neutral-500">Sign in to your account to continue.</p>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-neutral-800/80 bg-[#111111]/80 p-6 shadow-2xl shadow-black/40 backdrop-blur-sm sm:p-7">
|
|
<form onSubmit={handleLogin} className="space-y-5" noValidate>
|
|
{errorMessage && (
|
|
<div
|
|
role="alert"
|
|
className="flex items-start gap-2.5 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400"
|
|
>
|
|
<AlertCircle size={16} className="mt-0.5 shrink-0" />
|
|
<span>{errorMessage}</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email" className={fieldLabel}>
|
|
Email
|
|
</Label>
|
|
<div className="group relative">
|
|
<Mail size={17} className={fieldIcon} />
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
name="email"
|
|
autoComplete="email"
|
|
autoFocus
|
|
required
|
|
className={fieldInput}
|
|
placeholder="Enter your email address"
|
|
value={email}
|
|
onChange={(e) => {
|
|
setEmail(e.target.value);
|
|
if (localError) setLocalError('');
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="password" className={fieldLabel}>
|
|
Password
|
|
</Label>
|
|
<button
|
|
type="button"
|
|
onClick={handleForgotPassword}
|
|
className="cursor-pointer text-xs font-medium text-neutral-500 transition-colors hover:text-orange-500"
|
|
>
|
|
Forgot password?
|
|
</button>
|
|
</div>
|
|
<div className="group relative">
|
|
<Lock size={17} className={fieldIcon} />
|
|
<Input
|
|
id="password"
|
|
type={showPassword ? 'text' : 'password'}
|
|
name="password"
|
|
autoComplete="current-password"
|
|
required
|
|
className={fieldInput + ' pr-12'}
|
|
placeholder="Enter your password"
|
|
value={password}
|
|
onChange={(e) => {
|
|
setPassword(e.target.value);
|
|
if (localError) setLocalError('');
|
|
}}
|
|
onKeyUp={(e) => setCapsLock(e.getModifierState('CapsLock'))}
|
|
onBlur={() => setCapsLock(false)}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
aria-label={showPassword ? 'Hide password' : 'Show password'}
|
|
className="absolute right-2 top-1/2 flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-lg text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
|
|
>
|
|
{showPassword ? <EyeOff size={17} /> : <Eye size={17} />}
|
|
</button>
|
|
</div>
|
|
{capsLock && (
|
|
<p className="flex items-center gap-1.5 pl-1 text-xs text-amber-400">
|
|
<AlertCircle size={13} />
|
|
Caps Lock is on
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
className="group h-12 w-full bg-gradient-to-b from-orange-400 to-orange-600 text-[15px] font-semibold hover:from-orange-400 hover:to-orange-500"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<Loader2 size={17} className="animate-spin" />
|
|
<span>Signing in…</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span>Sign in</span>
|
|
<ArrowRight size={17} className="transition-transform duration-200 group-hover:translate-x-0.5" />
|
|
</>
|
|
)}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
|
|
<p className="mt-6 flex items-center justify-center gap-1.5 text-center text-xs text-neutral-600">
|
|
<Lock size={12} />
|
|
Access is restricted to authorized team members.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer className="relative z-10 pt-8 text-center text-xs text-neutral-700">
|
|
© {new Date().getFullYear()} thob.studio
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|