Auth Change Password

1"use client";
2 
3import { CheckCircle2, Eye, EyeOff, Loader2, Lock, Shield } from "lucide-react";
4import { useCallback, useState } from "react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/registry/new-york/ui/button";
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/registry/new-york/ui/card";
14import {
15  Field,
16  FieldContent,
17  FieldDescription,
18  FieldError,
19  FieldLabel,
20} from "@/registry/new-york/ui/field";
21import {
22  InputGroup,
23  InputGroupAddon,
24  InputGroupButton,
25  InputGroupInput,
26} from "@/registry/new-york/ui/input-group";
27 
28export interface AuthChangePasswordProps {
29  onSubmit?: (data: { currentPassword: string; newPassword: string }) => void;
30  className?: string;
31  isLoading?: boolean;
32  isSuccess?: boolean;
33  errors?: {
34    currentPassword?: string;
35    newPassword?: string;
36    confirmPassword?: string;
37    general?: string;
38  };
39  successMessage?: string;
40}
41 
42interface PasswordFieldProps {
43  id: string;
44  label: string;
45  value: string;
46  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
47  error?: string;
48  showPassword: boolean;
49  onTogglePassword: () => void;
50  autoComplete: string;
51  placeholder: string;
52  icon: React.ReactNode;
53  description?: string;
54}
55 
56function PasswordField({
57  id,
58  label,
59  value,
60  onChange,
61  error,
62  showPassword,
63  onTogglePassword,
64  autoComplete,
65  placeholder,
66  icon,
67  description,
68}: PasswordFieldProps) {
69  const errorId = error ? `${id}-error` : undefined;
70 
71  return (
72    <Field data-invalid={!!error}>
73      <FieldLabel htmlFor={id}>
74        {label}
75        <span aria-label="required" className="text-destructive">
76          *
77        </span>
78      </FieldLabel>
79      <FieldContent>
80        <InputGroup aria-invalid={!!error}>
81          <InputGroupAddon>{icon}</InputGroupAddon>
82          <InputGroupInput
83            aria-describedby={errorId}
84            aria-invalid={!!error}
85            autoComplete={autoComplete}
86            id={id}
87            name={id}
88            onChange={onChange}
89            placeholder={placeholder}
90            required
91            type={showPassword ? "text" : "password"}
92            value={value}
93          />
94          <InputGroupButton
95            aria-label={
96              showPassword
97                ? `Hide ${label.toLowerCase()}`
98                : `Show ${label.toLowerCase()}`
99            }
100            className="h-full min-w-[32px] touch-manipulation"
101            onClick={(e) => {
102// … truncated