{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "account-change-password-01",
  "type": "registry:block",
  "description": "Change password form with validation",
  "registryDependencies": [
    "button",
    "card",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/account-change-password-01/page.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckCircle2, Eye, EyeOff, Lock, Shield, XCircle } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nfunction PasswordField({\n  id,\n  label,\n  ...props\n}: {\n  id: string\n  label: string\n} & React.InputHTMLAttributes<HTMLInputElement>) {\n  const [showPassword, setShowPassword] = React.useState(false)\n\n  return (\n    <div className=\"mb-6 space-y-2\">\n      <Label htmlFor={id} className=\"flex items-center gap-2\">\n        <Lock className=\"text-muted-foreground h-4 w-4\" />\n        {label}\n      </Label>\n      <div className=\"relative\">\n        <Input\n          {...props}\n          id={id}\n          type={showPassword ? \"text\" : \"password\"}\n          placeholder=\"••••••••\"\n        />\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"sm\"\n          className=\"absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent\"\n          onClick={() => setShowPassword(!showPassword)}\n        >\n          {showPassword ? (\n            <EyeOff className=\"h-4 w-4\" aria-hidden=\"true\" />\n          ) : (\n            <Eye className=\"h-4 w-4\" aria-hidden=\"true\" />\n          )}\n          <span className=\"sr-only\">\n            {showPassword ? \"Hide password\" : \"Show password\"}\n          </span>\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst PASSWORD_REQUIREMENTS = [\n  {\n    label: \"At least 8 characters long\",\n    regex: /.{8,}/,\n  },\n  {\n    label: \"One uppercase letter (A-Z)\",\n    regex: /[A-Z]/,\n  },\n  {\n    label: \"One lowercase letter (a-z)\",\n    regex: /[a-z]/,\n  },\n  {\n    label: \"One number (0-9)\",\n    regex: /[0-9]/,\n  },\n  {\n    label: \"One special character (!@#$%^&*)\",\n    regex: /[!@#$%^&*()_+\\-=\\[\\]{};':\"\\\\|,.<>\\/?]/,\n  },\n]\n\nexport default function AccountChangePassword01() {\n  const [newPassword, setNewPassword] = React.useState(\"\")\n\n  return (\n    <div className=\"mx-auto max-w-5xl p-6\">\n      <Card className=\"bg-card border p-8\">\n        <div className=\"mb-8 border-b pb-6\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg\">\n              <Shield className=\"text-primary h-6 w-6\" />\n            </div>\n            <div>\n              <h2 className=\"text-2xl font-semibold tracking-tight\">\n                Change Password\n              </h2>\n              <p className=\"text-muted-foreground mt-1 text-sm\">\n                Update your password to keep your account secure\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-8 md:grid-cols-2\">\n          <div>\n            <form onSubmit={(e) => e.preventDefault()}>\n              <PasswordField id=\"current-password\" label=\"Current Password\" />\n              <PasswordField\n                id=\"new-password\"\n                label=\"New Password\"\n                onChange={(e) => setNewPassword(e.target.value)}\n                value={newPassword}\n              />\n              <PasswordField\n                id=\"confirm-password\"\n                label=\"Confirm New Password\"\n              />\n              <div className=\"mt-8 flex gap-3\">\n                <Button type=\"button\" variant=\"outline\" className=\"flex-1\">\n                  Cancel\n                </Button>\n                <Button type=\"submit\" className=\"flex-1\">\n                  Update Password\n                </Button>\n              </div>\n            </form>\n          </div>\n\n          <div className=\"space-y-6\">\n            <div>\n              <h3 className=\"mb-4 flex items-center gap-2 font-semibold\">\n                <Shield className=\"text-muted-foreground h-5 w-5\" />\n                Password Requirements\n              </h3>\n              <p className=\"text-muted-foreground mb-6 text-sm\">\n                Your password must meet the following criteria for enhanced\n                security:\n              </p>\n              <ul className=\"space-y-3\">\n                {PASSWORD_REQUIREMENTS.map((req, index) => {\n                  const meetsRequirement = req.regex.test(newPassword)\n                  return (\n                    <li key={index} className=\"flex items-start gap-3\">\n                      {meetsRequirement ? (\n                        <CheckCircle2 className=\"mt-0.5 h-5 w-5 shrink-0 text-green-500\" />\n                      ) : (\n                        <XCircle className=\"text-muted-foreground mt-0.5 h-5 w-5 shrink-0\" />\n                      )}\n                      <span\n                        className={`text-sm ${\n                          meetsRequirement\n                            ? \"text-foreground\"\n                            : \"text-muted-foreground\"\n                        }`}\n                      >\n                        {req.label}\n                      </span>\n                    </li>\n                  )\n                })}\n              </ul>\n            </div>\n\n            <div className=\"bg-muted/50 rounded-lg border p-4\">\n              <h4 className=\"mb-2 text-sm font-medium\">\n                Security Best Practices\n              </h4>\n              <ul className=\"text-muted-foreground space-y-2 text-sm\">\n                <li className=\"flex items-start gap-2\">\n                  <span className=\"mt-1\">•</span>\n                  <span>Change your password regularly (every 90 days)</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <span className=\"mt-1\">•</span>\n                  <span>Never share your password with anyone</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <span className=\"mt-1\">•</span>\n                  <span>Use a unique password for each account</span>\n                </li>\n                <li className=\"flex items-start gap-2\">\n                  <span className=\"mt-1\">•</span>\n                  <span>Consider using a password manager</span>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/account-change-password/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "700px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "account"
  ]
}