Preview
Full width desktop view
Code
auth-6.tsx
1"use client";
2
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import {
7 Card,
8 CardContent,
9 CardDescription,
10 CardHeader,
11 CardTitle,
12} from "@/components/ui/card";
13import { Eye, EyeOff, Lock, Shield, CheckCircle, X } from "lucide-react";
14import { useState } from "react";
15
16export function LoginBlock6() {
17 const [showPassword, setShowPassword] = useState(false);
18 const [showConfirmPassword, setShowConfirmPassword] = useState(false);
19 const [password, setPassword] = useState("");
20 const [confirmPassword, setConfirmPassword] = useState("");
21
22 const passwordRequirements = [
23 { text: "At least 8 characters", met: password.length >= 8 },
24 { text: "Contains uppercase letter", met: /[A-Z]/.test(password) },
25 { text: "Contains lowercase letter", met: /[a-z]/.test(password) },
26 { text: "Contains number", met: /\d/.test(password) },
27 {
28 text: "Contains special character",
29 met: /[!@#$%^&*(),.?":{}|<>]/.test(password),
30 },
31 ];
32
33 const passwordsMatch = password === confirmPassword && password.length > 0;
34 const allRequirementsMet = passwordRequirements.every((req) => req.met);
35
36 return (
37 <section className="w-full min-h-screen flex items-center justify-center bg-gradient-to-br from-background to-muted/20 p-4">
38 <Card className="w-full max-w-md border-2 shadow-xl">
39 <CardHeader className="space-y-4 text-center">
40 <div className="mx-auto w-16 h-16 bg-purple-100 dark:bg-purple-900/20 rounded-full flex items-center justify-center">
41 <Shield className="h-8 w-8 text-purple-600 dark:text-purple-400" />
42 </div>
43 <div className="space-y-2">
44 <CardTitle className="text-2xl font-bold">Reset Password</CardTitle>
45 <CardDescription className="text-muted-foreground">
46 Create a new secure password for your account
47 </CardDescription>
48 </div>
49 </CardHeader>
50
51 <CardContent className="space-y-6">
52 <form className="space-y-4">
53 <div className="space-y-2">
54 <Label htmlFor="password">New Password</Label>
55 <div className="relative">
56 <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
57 <Input
58 id="password"
59 type={showPassword ? "text" : "password"}
60 placeholder="Enter new password"
61 className="pl-10 pr-10"
62 value={password}
63 onChange={(e) => setPassword(e.target.value)}
64 />
65 <Button
66 type="button"
67 variant="ghost"
68 size="icon"
69 className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
70 onClick={() => setShowPassword(!showPassword)}
71 >
72 {showPassword ? (
73 <EyeOff className="h-4 w-4 text-muted-foreground" />
74 ) : (
75 <Eye className="h-4 w-4 text-muted-foreground" />
76 )}
77 </Button>
78 </div>
79 </div>
80
81 <div className="space-y-2">
82 <Label htmlFor="confirmPassword">Confirm Password</Label>
83 <div className="relative">
84 <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
85 <Input
86 id="confirmPassword"
87 type={showConfirmPassword ? "text" : "password"}
88 placeholder="Confirm new password"
89 className="pl-10 pr-10"
90 value={confirmPassword}
91 onChange={(e) => setConfirmPassword(e.target.value)}
92 />
93 <Button
94 type="button"
95 variant="ghost"
96 size="icon"
97 className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
98 onClick={() => setShowConfirmPassword(!showConfirmPassword)}
99 >
100 {showConfirmPassword ? (
101 <EyeOff className="h-4 w-4 text-muted-foreground" />
102 ) : (
103 <Eye className="h-4 w-4 text-muted-foreground" />
104 )}
105 </Button>
106 </div>
107 {confirmPassword && (
108 <div
109 className={`flex items-center gap-2 text-sm ${
110 passwordsMatch ? "text-green-600" : "text-red-600"
111 }`}
112 >
113 {passwordsMatch ? (
114 <CheckCircle className="h-4 w-4" />
115 ) : (
116 <X className="h-4 w-4" />
117 )}
118 {passwordsMatch
119 ? "Passwords match"
120 : "Passwords do not match"}
121 </div>
122 )}
123 </div>
124
125 {/* Password Requirements */}
126 {password && (
127 <div className="space-y-3">
128 <Label className="text-sm font-medium">
129 Password Requirements:
130 </Label>
131 <div className="space-y-2">
132 {passwordRequirements.map((requirement, index) => (
133 <div
134 key={index}
135 className={`flex items-center gap-2 text-sm ${
136 requirement.met
137 ? "text-green-600"
138 : "text-muted-foreground"
139 }`}
140 >
141 {requirement.met ? (
142 <CheckCircle className="h-4 w-4" />
143 ) : (
144 <div className="h-4 w-4 rounded-full border-2 border-muted-foreground/30" />
145 )}
146 {requirement.text}
147 </div>
148 ))}
149 </div>
150 </div>
151 )}
152
153 <Button
154 type="submit"
155 className="w-full"
156 disabled={!allRequirementsMet || !passwordsMatch}
157 >
158 Reset Password
159 </Button>
160 </form>
161
162 <div className="text-center text-sm text-muted-foreground">
163 Remember your password?{" "}
164 <Button variant="link" className="px-0 font-medium">
165 Sign in
166 </Button>
167 </div>
168 </CardContent>
169 </Card>
170 </section>
171 );
172}
Dependencies
External Libraries
lucide-reactreact
Shadcn/UI Components
buttoncardinputlabel