{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "auth-password-reset",
  "title": "Auth Password Reset",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-angular/blocks/auth-password-reset/auth-password-reset.component.ts",
      "content": "// Four-stage password reset surface in a single card: request (email form) -> sent\n// (check-your-inbox confirmation with an \"Open reset form\" demo button) -> reset (new\n// password + confirm with match validation) -> done (success confirmation linking back to\n// sign-in). Port of the Vue/React block 1:1 — emits `request` (email) when the link is\n// asked for and `reset` (password) when the new password is set; the consumer wires the\n// actual mail/db calls.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, computed, signal } from '@angular/core'\nimport { ArrowLeft, LucideAngularModule, MailCheck } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n  UiCardComponent,\n  UiCardContentComponent,\n  UiCardDescriptionComponent,\n  UiCardFooterComponent,\n  UiCardHeaderComponent,\n  UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiLabelComponent } from '@/ui/label/label.component'\n\nexport type AuthPasswordResetStage = 'request' | 'sent' | 'reset' | 'done'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-auth-password-reset, [ui-auth-password-reset]',\n  standalone: true,\n  // The block renders its own full-page root <div>: keep the host out of layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiCardDescriptionComponent,\n    UiCardFooterComponent,\n    UiCardHeaderComponent,\n    UiCardTitleComponent,\n    UiInputComponent,\n    UiLabelComponent,\n  ],\n  template: `\n    <div data-slot=\"auth-password-reset\" [class]=\"rootClass\">\n      <div ui-card class=\"w-full max-w-sm\">\n        @if (stage() === 'request') {\n          <div ui-card-header class=\"text-center\">\n            <h2 ui-card-title class=\"text-2xl\">Forgot password?</h2>\n            <p ui-card-description>Enter your email and we&apos;ll send you a reset link.</p>\n          </div>\n          <div ui-card-content>\n            <form class=\"space-y-4\" (submit)=\"submitRequest($event)\">\n              <div class=\"grid gap-2\">\n                <label ui-label for=\"reset-email\">Email</label>\n                <ui-input\n                  id=\"reset-email\"\n                  [value]=\"email()\"\n                  (valueChange)=\"email.set($event)\"\n                  type=\"email\"\n                  placeholder=\"you@company.com\"\n                  required\n                />\n              </div>\n              <button ui-button type=\"submit\" class=\"w-full\">Send reset link</button>\n            </form>\n          </div>\n          <div ui-card-footer class=\"justify-center\">\n            <a\n              [href]=\"signInHref\"\n              class=\"text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-sm\"\n            >\n              <lucide-icon [img]=\"ArrowLeft\" class=\"size-3\" />Back to sign in\n            </a>\n          </div>\n        } @else if (stage() === 'sent') {\n          <div ui-card-content class=\"space-y-4 pt-6 text-center\">\n            <div class=\"bg-primary/10 text-primary mx-auto flex size-12 items-center justify-center rounded-full\">\n              <lucide-icon [img]=\"MailCheck\" class=\"size-6\" />\n            </div>\n            <div class=\"space-y-1\">\n              <h3 class=\"text-lg font-semibold\">Check your inbox</h3>\n              <p class=\"text-muted-foreground text-sm\">\n                We&apos;ve sent a reset link to <span class=\"text-foreground font-medium\">{{ email() }}</span\n                >.\n              </p>\n            </div>\n            <button ui-button variant=\"outline\" class=\"w-full\" (click)=\"stage.set('reset')\">\n              Open reset form (demo)\n            </button>\n            <button\n              class=\"text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline\"\n              (click)=\"stage.set('request')\"\n            >\n              Wrong email?\n            </button>\n          </div>\n        } @else if (stage() === 'reset') {\n          <div ui-card-header class=\"text-center\">\n            <h2 ui-card-title class=\"text-2xl\">Set new password</h2>\n            <p ui-card-description>Pick a strong password you haven&apos;t used before.</p>\n          </div>\n          <div ui-card-content>\n            <form class=\"space-y-4\" (submit)=\"submitReset($event)\">\n              <div class=\"grid gap-2\">\n                <label ui-label for=\"reset-pw\">New password</label>\n                <ui-input\n                  id=\"reset-pw\"\n                  [value]=\"password()\"\n                  (valueChange)=\"password.set($event)\"\n                  type=\"password\"\n                  autoComplete=\"new-password\"\n                  required\n                />\n              </div>\n              <div class=\"grid gap-2\">\n                <label ui-label for=\"reset-confirm\">Confirm password</label>\n                <ui-input\n                  id=\"reset-confirm\"\n                  [value]=\"confirm()\"\n                  (valueChange)=\"confirm.set($event)\"\n                  type=\"password\"\n                  autoComplete=\"new-password\"\n                  [aria-invalid]=\"!passwordsMatch()\"\n                  required\n                />\n                @if (!passwordsMatch()) {\n                  <p class=\"text-destructive text-xs\">Passwords don&apos;t match.</p>\n                }\n              </div>\n              <button ui-button type=\"submit\" class=\"w-full\">Reset password</button>\n            </form>\n          </div>\n        } @else {\n          <div ui-card-content class=\"space-y-4 pt-6 text-center\">\n            <div class=\"bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full\">\n              <lucide-icon [img]=\"MailCheck\" class=\"size-6\" />\n            </div>\n            <div class=\"space-y-1\">\n              <h3 class=\"text-lg font-semibold\">All set</h3>\n              <p class=\"text-muted-foreground text-sm\">\n                Your password has been updated. You can now sign in with the new password.\n              </p>\n            </div>\n            <a [href]=\"signInHref\"><button ui-button class=\"w-full\">Continue to sign in</button></a>\n          </div>\n        }\n      </div>\n    </div>\n  `,\n})\nexport class UiAuthPasswordResetComponent {\n  protected readonly ArrowLeft = ArrowLeft\n  protected readonly MailCheck = MailCheck\n\n  @Input() signInHref = '/login'\n  @Input('class') className?: string\n\n  @Output() readonly request = new EventEmitter<string>()\n  @Output() readonly reset = new EventEmitter<string>()\n\n  readonly stage = signal<AuthPasswordResetStage>('request')\n  readonly email = signal('')\n  readonly password = signal('')\n  readonly confirm = signal('')\n\n  readonly passwordsMatch = computed(() => !this.confirm() || this.password() === this.confirm())\n\n  get rootClass(): string {\n    return cn('bg-background flex min-h-svh items-center justify-center p-6', this.className)\n  }\n\n  submitRequest(event: Event): void {\n    event.preventDefault()\n    if (!this.email()) return\n    this.request.emit(this.email())\n    this.stage.set('sent')\n  }\n\n  submitReset(event: Event): void {\n    event.preventDefault()\n    if (!this.password() || !this.passwordsMatch()) return\n    this.reset.emit(this.password())\n    this.stage.set('done')\n  }\n}\n",
      "type": "registry:page",
      "target": "~/src/app/components/blocks/auth-password-reset/auth-password-reset.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/auth-password-reset/index.ts",
      "content": "export { UiAuthPasswordResetComponent, type AuthPasswordResetStage } from './auth-password-reset.component'\n",
      "type": "registry:page",
      "target": "~/src/app/components/blocks/auth-password-reset/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/input.json",
    "https://uipkge.dev/r/angular/label.json",
    "https://uipkge.dev/r/angular/button.json"
  ],
  "description": "Four-stage password reset surface in a single card: request (email form) -> sent (check-your-inbox confirmation with \"Open reset form\" demo button) -> reset (new password + confirm with match validation) -> done (success confirmation linking back to sign-in). Emits `request` (email) when the link is asked for and `reset` (password) when the new password is set; consumer wires the actual mail/db calls.",
  "categories": [
    "auth"
  ]
}