feat(ui): major login modal redesign with improved UX

- Complete UI/UX overhaul with modern design and better spacing
- Add form reset functionality and improved state management
- Replace custom loading spinner with Lucide Loader2 icon
- Remove BorderBeam effects for cleaner appearance
- Improve error handling and validation flow
- Enhance accessibility with better focus management
- Update button styling and layout for better visual hierarchy
- Add loading states and improve user feedback
- Refactor form structure for better maintainability

web/src/components/login-modal.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Github } from "lucide-react"
+import { Github, Loader2 } from "lucide-react"
 import type React from "react"
 import { useRef, useState } from "react"
 import { Button } from "@/components/ui/button"
@@ -8,7 +8,6 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
-import { BorderBeam } from "@/components/ui/border-beam"
 import { pb } from "@/lib/pb"
 
 interface LoginModalProps {
@@ -25,6 +24,15 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 	const [error, setError] = useState("")
 	const [isLoading, setIsLoading] = useState(false)
 	const emailRef = useRef<HTMLInputElement>(null)
+
+	const resetForm = () => {
+		setEmail("")
+		setUsername("")
+		setPassword("")
+		setConfirmPassword("")
+		setError("")
+	}
+
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault()
 		setError("")
@@ -32,41 +40,36 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 
 		try {
 			if (isRegister) {
+				// Validation
 				if (password !== confirmPassword) {
 					setError("Passwords do not match")
-					setIsLoading(false)
 					return
 				}
-
 				if (!username.trim()) {
 					setError("Username is required")
-					setIsLoading(false)
 					return
 				}
-
 				if (!email.trim()) {
 					setError("Email is required")
-					setIsLoading(false)
 					return
 				}
 
+				// Create account and login
 				await pb.collection("users").create({
 					username: username.trim(),
 					email: email.trim(),
 					password,
 					passwordConfirm: confirmPassword,
 				})
-
 				await pb.collection("users").authWithPassword(email, password)
 			} else {
+				// Login
 				await pb.collection("users").authWithPassword(email, password)
 			}
 
+			// Success
 			onOpenChange(false)
-			setEmail("")
-			setUsername("")
-			setPassword("")
-			setConfirmPassword("")
+			resetForm()
 		} catch (err: any) {
 			console.error("Auth error:", err)
 			setError(err?.message || "Authentication failed. Please try again.")
@@ -77,190 +80,175 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
 
 	const toggleMode = () => {
 		setIsRegister(!isRegister)
-		emailRef.current?.focus()
-		setEmail("")
-		setUsername("")
-		setPassword("")
-		setConfirmPassword("")
-		setError("")
+		resetForm()
+		setTimeout(() => emailRef.current?.focus(), 100)
 	}
 
 	return (
 		<Dialog open={open} onOpenChange={onOpenChange}>
-			<DialogContent className="sm:max-w-md bg-background border shadow-2xl relative overflow-hidden">
-				<DialogHeader className="space-y-3">
-					<DialogTitle className="text-2xl font-bold">{isRegister ? "Create account" : "Sign in"}</DialogTitle>
-					<DialogDescription className="text-base">
-						{isRegister ? "Enter your details to create an account" : "Enter your credentials to continue"}
+			<DialogContent className="w-full max-w-lg bg-background border shadow-2xl">
+				<DialogHeader className="text-center space-y-2 pb-4">
+					<DialogTitle className="text-3xl font-bold">
+						{isRegister ? "Create Account" : "Welcome Back"}
+					</DialogTitle>
+					<DialogDescription className="text-lg text-muted-foreground">
+						{isRegister 
+							? "Join our community and start submitting icons" 
+							: "Sign in to submit and manage your icons"
+						}
 					</DialogDescription>
 				</DialogHeader>
 
-				<form onSubmit={handleSubmit} className="space-y-5 pt-2">
+				<form onSubmit={handleSubmit} className="space-y-6">
+					{/* Error Message */}
 					{error && (
-						<div className="text-sm text-destructive bg-destructive/10 border border-destructive/20 px-4 py-3 rounded-lg flex items-start gap-2">
-							<svg className="h-5 w-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+						<div className="bg-destructive/10 border border-destructive/20 text-destructive px-4 py-3 rounded-lg flex items-center gap-3">
+							<svg className="h-5 w-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
 								<path
 									fillRule="evenodd"
 									d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
 									clipRule="evenodd"
 								/>
 							</svg>
-							<span>{error}</span>
+							<span className="font-medium">{error}</span>
 						</div>
 					)}
 
-					<div
-						role="presentation"
-						aria-hidden="true"
-						className="flex h-11 w-full items-center justify-center gap-2 rounded-lg border border-input bg-muted/30 px-4 py-2 text-sm cursor-not-allowed opacity-50 pointer-events-none transition-colors"
+					{/* GitHub Button (Coming Soon) */}
+					<Button
+						type="button"
+						variant="outline"
+						className="w-full h-12 text-base font-medium cursor-not-allowed opacity-50"
+						disabled
 					>
-						<Github className="h-5 w-5" />
-						<span className="font-medium">Continue with GitHub</span>
-						<span className="text-xs text-muted-foreground ml-auto">(Coming soon)</span>
-					</div>
+						<Github className="h-5 w-5 mr-2" />
+						Continue with GitHub
+						<span className="ml-2 text-xs text-muted-foreground">(Coming soon)</span>
+					</Button>
 
-					<div role="separator" aria-label="or" className="relative py-2">
+					{/* Divider */}
+					<div className="relative">
 						<Separator />
-						<span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-3 text-xs text-muted-foreground uppercase font-medium">
-							or
+						<span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-4 text-sm text-muted-foreground font-medium">
+							or continue with email
 						</span>
 					</div>
 
-					<fieldset className="space-y-2 border-0 p-0">
+					{/* Form Fields */}
+					<div className="space-y-4">
+						{/* Email Field */}
 						<div className="space-y-2">
-							<Label htmlFor="email" className="text-sm font-medium">
+							<Label htmlFor="email" className="text-sm font-semibold">
 								Email {!isRegister && "or Username"}
 							</Label>
 							<Input
 								id="email"
 								ref={emailRef}
 								autoFocus
-								tabIndex={1}
-								name="email"
 								type="text"
 								autoComplete="username"
 								placeholder={`Enter your email${isRegister ? "" : " or username"}`}
 								value={email}
 								onChange={(e) => setEmail(e.target.value)}
-								aria-invalid={error ? "true" : "false"}
-								className="h-11 text-base"
+								className="h-12 text-base"
 								required
 							/>
 							{isRegister && (
-								<p className="text-xs text-muted-foreground leading-relaxed">Used only to send you updates about your submissions</p>
+								<p className="text-xs text-muted-foreground">
+									We'll only use this to send you updates about your submissions
+								</p>
 							)}
 						</div>
 
+						{/* Username Field (Register only) */}
 						{isRegister && (
 							<div className="space-y-2">
-								<Label htmlFor="username" className="text-sm font-medium">
+								<Label htmlFor="username" className="text-sm font-semibold">
 									Username
 								</Label>
 								<Input
 									id="username"
-									tabIndex={2}
-									name="username"
 									type="text"
 									autoComplete="username"
 									placeholder="Choose a username"
 									value={username}
 									onChange={(e) => setUsername(e.target.value)}
-									aria-invalid={error && !username.trim() ? "true" : "false"}
-									className="h-11 text-base"
+									className="h-12 text-base"
 									required
 								/>
-								<p className="text-xs text-muted-foreground leading-relaxed">This will be displayed publicly with your submissions</p>
+								<p className="text-xs text-muted-foreground">
+									This will be displayed publicly with your submissions
+								</p>
 							</div>
 						)}
 
+						{/* Password Field */}
 						<div className="space-y-2">
-							<Label htmlFor="password" className="text-sm font-medium">
+							<Label htmlFor="password" className="text-sm font-semibold">
 								Password
 							</Label>
 							<Input
 								id="password"
-								tabIndex={isRegister ? 3 : 2}
-								name="password"
 								type="password"
 								autoComplete={isRegister ? "new-password" : "current-password"}
 								placeholder="Enter your password"
 								value={password}
 								onChange={(e) => setPassword(e.target.value)}
-								aria-invalid={error ? "true" : "false"}
-								className="h-11 text-base"
+								className="h-12 text-base"
 								required
 							/>
 						</div>
 
+						{/* Confirm Password Field (Register only) */}
 						{isRegister && (
 							<div className="space-y-2">
-								<Label htmlFor="confirmPassword" className="text-sm font-medium">
+								<Label htmlFor="confirmPassword" className="text-sm font-semibold">
 									Confirm Password
 								</Label>
 								<Input
 									id="confirmPassword"
-									tabIndex={4}
-									name="confirmPassword"
 									type="password"
 									autoComplete="new-password"
 									placeholder="Confirm your password"
 									value={confirmPassword}
 									onChange={(e) => setConfirmPassword(e.target.value)}
-									aria-invalid={error && password !== confirmPassword ? "true" : "false"}
-									className="h-11 text-base"
+									className="h-12 text-base"
 									required
 								/>
 							</div>
 						)}
-					</fieldset>
+					</div>
 
-					<footer className="space-y-4 pt-2">
-						<Button type="submit" className="w-full h-11 text-base font-semibold shadow-sm" disabled={isLoading}>
+					{/* Submit Button */}
+					<Button 
+						type="submit" 
+						className="w-full h-12 text-base font-semibold" 
+						disabled={isLoading}
+					>
 						{isLoading ? (
 							<>
-									<svg className="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-										<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-										<path
-											className="opacity-75"
-											fill="currentColor"
-											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-										></path>
-									</svg>
+								<Loader2 className="h-5 w-5 mr-2 animate-spin" />
 								Please wait...
 							</>
 						) : (
-								<>{isRegister ? "Create account" : "Sign in"}</>
+							<>{isRegister ? "Create Account" : "Sign In"}</>
 						)}
 					</Button>
 
-						<div className="relative">
-							<div className="absolute inset-0 flex items-center">
-								<span className="w-full border-t" />
-							</div>
-							<div className="relative flex justify-center text-xs">
+					{/* Toggle Mode */}
+					<div className="text-center">
 						<button
 							type="button"
 							onClick={toggleMode}
-									className="bg-background px-3 text-muted-foreground hover:text-foreground transition-colors duration-200 cursor-pointer font-medium hover:underline underline-offset-4"
+							className="text-sm text-muted-foreground hover:text-foreground transition-colors font-medium hover:underline underline-offset-4"
 						>
-									{isRegister ? "Already have an account? Sign in" : "Don't have an account? Create one"}
+							{isRegister 
+								? "Already have an account? Sign in" 
+								: "Don't have an account? Create one"
+							}
 						</button>
 					</div>
-						</div>
-					</footer>
 				</form>
-				<BorderBeam
-					duration={6}
-					size={400}
-					className="from-transparent via-red-500 to-transparent"
-				/>
-				<BorderBeam
-					duration={6}
-					delay={3}
-					size={400}
-					borderWidth={2}
-					className="from-transparent via-blue-500 to-transparent"
-				/>
 			</DialogContent>
 		</Dialog>
 	)