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}