dikshantp/ar-test
1
0
Fork 0
forked from rajun/ar-test
Code Pull Requests Activity

feat: redesign login page with split layout and improved form UX

Browse Source
This commit is contained in:
rajun 2026-10-09 15:11:51 +05:30
parent ed11c520bd
commit 8a5989bb4a
1 changed files with 146 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

229
app/routes/admin/login.tsx
View File

@ -2,12 +2,13 @@ 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 } from 'lucide-react';
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 { Card } from '~/components/ui/card';
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) {
@ -33,6 +34,12 @@ export async function clientAction({ request }: Route.ClientActionArgs) {
}
}
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();
@ -42,9 +49,11 @@ export default function Login() {
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(() => {
@ -80,97 +89,151 @@ export default function Login() {
submit(formData, { method: 'post' });
};
const handleForgotPassword = () => {
toast.info('Please contact your administrator to reset your password.');
};
return (
<div className="relative min-h-screen bg-[#0D0D0D] flex items-center justify-center p-4 overflow-hidden select-none font-sans text-white">
<div className="absolute top-[20%] left-[30%] w-[40%] h-[40%] rounded-full bg-orange-500/5 blur-[130px] pointer-events-none" />
<div className="grid min-h-screen bg-[#0D0D0D] font-sans text-white lg:grid-cols-2">
<AuthBrandPanel />
<div className="w-full max-w-md relative z-10">
<div className="text-center mb-8">
<div className="inline-flex w-14 h-14 bg-black border border-neutral-800 rounded-2xl items-center justify-center shadow-lg shadow-black mb-4">
<span className="text-orange-500 font-extrabold text-3xl pl-1 select-none">t.</span>
</div>
<h1 className="text-2xl font-bold tracking-tight text-white uppercase">AR Management</h1>
<p className="mt-1 text-neutral-500 text-xs uppercase tracking-wider">
Authorized Access Only
</p>
</div>
<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]" />
<Card className="p-8 shadow-2xl">
<form onSubmit={handleLogin} className="space-y-6">
{(localError || actionData?.error) && (
<div className="p-4 bg-red-500/10 border border-red-500/25 rounded-xl text-red-400 text-xs font-semibold text-center uppercase tracking-wider">
{localError || actionData?.error}
</div>
)}
<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="space-y-1.5">
<Label className="ml-1">
Email Address
</Label>
<div className="relative">
<span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-neutral-600">
<Mail size={16} />
</span>
<Input
type="email"
name="email"
required
className="pl-10"
placeholder="admin@thob.studio"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<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="space-y-1.5">
<Label className="ml-1">
Password
</Label>
<div className="relative">
<span className="absolute inset-y-0 left-0 pl-3.5 flex items-center text-neutral-600">
<Lock size={16} />
</span>
<Input
type={showPassword ? 'text' : 'password'}
name="password"
required
className="pl-10 pr-10"
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute inset-y-0 right-0 pr-3.5 flex items-center text-neutral-500 hover:text-neutral-300 transition-colors cursor-pointer"
<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"
>
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
</button>
</div>
{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>
<Button
type="submit"
disabled={isLoading}
className="w-full py-6 text-sm font-bold uppercase tracking-wider"
>
{isLoading ? (
<Loader2 size={16} className="animate-spin text-black" />
) : (
<>
<span>Sign In</span>
<ArrowRight size={15} />
</>
)}
</Button>
</form>
</Card>
<div className="mt-8 text-center text-[10px] text-neutral-700 uppercase tracking-widest">
SYSTEM IP MONITORED SECURE PORTAL
<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>
</div>
<footer className="relative z-10 pt-8 text-center text-xs text-neutral-700">
© {new Date().getFullYear()} thob.studio
</footer>
</main>
</div>
);
}