jimlee/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-10-26 21:19:04 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Thomas Camlong
2025-10-02 15:20:16 +02:00
parent f0215627d7
commit 6fc0a06fc4
1 changed files with 95 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
web/src/components/login-modal.tsx
View File

@@ -1,6 +1,6 @@
"use client" "use client"
import { Github } from "lucide-react" import { Github, Loader2 } from "lucide-react"
import type React from "react" import type React from "react"
import { useRef, useState } from "react" import { useRef, useState } from "react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
@@ -8,7 +8,6 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label" import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator" import { Separator } from "@/components/ui/separator"
import { BorderBeam } from "@/components/ui/border-beam"
import { pb } from "@/lib/pb" import { pb } from "@/lib/pb"
interface LoginModalProps { interface LoginModalProps {
@@ -25,6 +24,15 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
const [error, setError] = useState("") const [error, setError] = useState("")
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false)
const emailRef = useRef<HTMLInputElement>(null) const emailRef = useRef<HTMLInputElement>(null)
const resetForm = () => {
setEmail("")
setUsername("")
setPassword("")
setConfirmPassword("")
setError("")
}
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
setError("") setError("")
@@ -32,41 +40,36 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
try { try {
if (isRegister) { if (isRegister) {
// Validation
if (password !== confirmPassword) { if (password !== confirmPassword) {
setError("Passwords do not match") setError("Passwords do not match")
setIsLoading(false)
return return
} }
if (!username.trim()) { if (!username.trim()) {
setError("Username is required") setError("Username is required")
setIsLoading(false)
return return
} }
if (!email.trim()) { if (!email.trim()) {
setError("Email is required") setError("Email is required")
setIsLoading(false)
return return
} }
// Create account and login
await pb.collection("users").create({ await pb.collection("users").create({
username: username.trim(), username: username.trim(),
email: email.trim(), email: email.trim(),
password, password,
passwordConfirm: confirmPassword, passwordConfirm: confirmPassword,
}) })
await pb.collection("users").authWithPassword(email, password) await pb.collection("users").authWithPassword(email, password)
} else { } else {
// Login
await pb.collection("users").authWithPassword(email, password) await pb.collection("users").authWithPassword(email, password)
} }
// Success
onOpenChange(false) onOpenChange(false)
setEmail("") resetForm()
setUsername("")
setPassword("")
setConfirmPassword("")
} catch (err: any) { } catch (err: any) {
console.error("Auth error:", err) console.error("Auth error:", err)
setError(err?.message || "Authentication failed. Please try again.") setError(err?.message || "Authentication failed. Please try again.")
@@ -77,190 +80,175 @@ export function LoginModal({ open, onOpenChange }: LoginModalProps) {
const toggleMode = () => { const toggleMode = () => {
setIsRegister(!isRegister) setIsRegister(!isRegister)
emailRef.current?.focus() resetForm()
setEmail("") setTimeout(() => emailRef.current?.focus(), 100)
setUsername("")
setPassword("")
setConfirmPassword("")
setError("")
} }
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md bg-background border shadow-2xl relative overflow-hidden"> <DialogContent className="w-full max-w-lg bg-background border shadow-2xl">
<DialogHeader className="space-y-3"> <DialogHeader className="text-center space-y-2 pb-4">
<DialogTitle className="text-2xl font-bold">{isRegister ? "Create account" : "Sign in"}</DialogTitle> <DialogTitle className="text-3xl font-bold">
<DialogDescription className="text-base"> {isRegister ? "Create Account" : "Welcome Back"}
{isRegister ? "Enter your details to create an account" : "Enter your credentials to continue"} </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> </DialogDescription>
</DialogHeader> </DialogHeader>
<form onSubmit={handleSubmit} className="space-y-5 pt-2"> <form onSubmit={handleSubmit} className="space-y-6">
{/* Error Message */}
{error && ( {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"> <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 mt-0.5" fill="currentColor" viewBox="0 0 20 20"> <svg className="h-5 w-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path <path
fillRule="evenodd" 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" 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" clipRule="evenodd"
/> />
</svg> </svg>
<span>{error}</span> <span className="font-medium">{error}</span>
</div> </div>
)} )}
<div {/* GitHub Button (Coming Soon) */}
role="presentation" <Button
aria-hidden="true" type="button"
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" variant="outline"
className="w-full h-12 text-base font-medium cursor-not-allowed opacity-50"
disabled
> >
<Github className="h-5 w-5" /> <Github className="h-5 w-5 mr-2" />
<span className="font-medium">Continue with GitHub</span> Continue with GitHub
<span className="text-xs text-muted-foreground ml-auto">(Coming soon)</span> <span className="ml-2 text-xs text-muted-foreground">(Coming soon)</span>
</div> </Button>
<div role="separator" aria-label="or" className="relative py-2"> {/* Divider */}
<div className="relative">
<Separator /> <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"> <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 or continue with email
</span> </span>
</div> </div>
<fieldset className="space-y-2 border-0 p-0"> {/* Form Fields */}
<div className="space-y-4">
{/* Email Field */}
<div className="space-y-2"> <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"} Email {!isRegister && "or Username"}
</Label> </Label>
<Input <Input
id="email" id="email"
ref={emailRef} ref={emailRef}
autoFocus autoFocus
tabIndex={1}
name="email"
type="text" type="text"
autoComplete="username" autoComplete="username"
placeholder={`Enter your email${isRegister ? "" : " or username"}`} placeholder={`Enter your email${isRegister ? "" : " or username"}`}
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
aria-invalid={error ? "true" : "false"} className="h-12 text-base"
className="h-11 text-base"
required required
/> />
{isRegister && ( {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> </div>
{/* Username Field (Register only) */}
{isRegister && ( {isRegister && (
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="username" className="text-sm font-medium"> <Label htmlFor="username" className="text-sm font-semibold">
Username Username
</Label> </Label>
<Input <Input
id="username" id="username"
tabIndex={2}
name="username"
type="text" type="text"
autoComplete="username" autoComplete="username"
placeholder="Choose a username" placeholder="Choose a username"
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
aria-invalid={error && !username.trim() ? "true" : "false"} className="h-12 text-base"
className="h-11 text-base"
required 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> </div>
)} )}
{/* Password Field */}
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="password" className="text-sm font-medium"> <Label htmlFor="password" className="text-sm font-semibold">
Password Password
</Label> </Label>
<Input <Input
id="password" id="password"
tabIndex={isRegister ? 3 : 2}
name="password"
type="password" type="password"
autoComplete={isRegister ? "new-password" : "current-password"} autoComplete={isRegister ? "new-password" : "current-password"}
placeholder="Enter your password" placeholder="Enter your password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
aria-invalid={error ? "true" : "false"} className="h-12 text-base"
className="h-11 text-base"
required required
/> />
</div> </div>
{/* Confirm Password Field (Register only) */}
{isRegister && ( {isRegister && (
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="confirmPassword" className="text-sm font-medium"> <Label htmlFor="confirmPassword" className="text-sm font-semibold">
Confirm Password Confirm Password
</Label> </Label>
<Input <Input
id="confirmPassword" id="confirmPassword"
tabIndex={4}
name="confirmPassword"
type="password" type="password"
autoComplete="new-password" autoComplete="new-password"
placeholder="Confirm your password" placeholder="Confirm your password"
value={confirmPassword} value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)} onChange={(e) => setConfirmPassword(e.target.value)}
aria-invalid={error && password !== confirmPassword ? "true" : "false"} className="h-12 text-base"
className="h-11 text-base"
required required
/> />
</div> </div>
)} )}
</fieldset> </div>
<footer className="space-y-4 pt-2"> {/* Submit Button */}
<Button type="submit" className="w-full h-11 text-base font-semibold shadow-sm" disabled={isLoading}> <Button
{isLoading ? ( type="submit"
<> className="w-full h-12 text-base font-semibold"
<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"> disabled={isLoading}
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> >
<path {isLoading ? (
className="opacity-75" <>
fill="currentColor" <Loader2 className="h-5 w-5 mr-2 animate-spin" />
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" Please wait...
></path> </>
</svg> ) : (
Please wait... <>{isRegister ? "Create Account" : "Sign In"}</>
</> )}
) : ( </Button>
<>{isRegister ? "Create account" : "Sign in"}</>
)}
</Button>
<div className="relative"> {/* Toggle Mode */}
<div className="absolute inset-0 flex items-center"> <div className="text-center">
<span className="w-full border-t" /> <button
</div> type="button"
<div className="relative flex justify-center text-xs"> onClick={toggleMode}
<button className="text-sm text-muted-foreground hover:text-foreground transition-colors font-medium hover:underline underline-offset-4"
type="button" >
onClick={toggleMode} {isRegister
className="bg-background px-3 text-muted-foreground hover:text-foreground transition-colors duration-200 cursor-pointer font-medium hover:underline underline-offset-4" ? "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> </button>
</div> </div>
</div>
</footer>
</form> </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> </DialogContent>
</Dialog> </Dialog>
) )