From a7836f0c4b5fd55cb2974e7701b43daafabc47eb Mon Sep 17 00:00:00 2001
From: Dikshantpatil2077 <dikshantpatil2002@gmail.com>
Date: Fri, 9 Oct 2026 15:37:37 +0530
Subject: [PATCH] feat: enhance login page with improved error handling and UI
 updates

---
 app/routes/admin/login.tsx | 229 +++++++++++++++++++++++--------------
 1 file changed, 146 insertions(+), 83 deletions(-)

diff --git a/app/routes/admin/login.tsx b/app/routes/admin/login.tsx
index 34dc62f..acad791 100644
--- a/app/routes/admin/login.tsx
+++ b/app/routes/admin/login.tsx
@@ -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>
     );
 }