{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "auth-sign-in", "title": "Auth Sign In", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/auth-sign-in/auth-sign-in.component.ts", "content": "// Full-page sign-in surface. Email + password + remember-me form, forgot-password and\n// sign-up links, optional GitHub/Google OAuth row. Port of the Vue/React block 1:1 —\n// emits `submit` with the form payload and `oauth` with the chosen provider; the consumer\n// wires the actual auth call. Link targets are configurable via props.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, signal } from '@angular/core'\nimport { Github, LucideAngularModule } 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 { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiLabelComponent } from '@/ui/label/label.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type AuthSignInOauthProvider = 'github' | 'google'\n\nexport interface AuthSignInPayload {\n email: string\n password: string\n remember: boolean\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-auth-sign-in, [ui-auth-sign-in]',\n standalone: true,\n // The block renders its own full-page root
: 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 UiCheckboxComponent,\n UiInputComponent,\n UiLabelComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n
\n

{{ title }}

\n

{{ description }}

\n
\n
\n
\n
\n \n \n
\n
\n
\n \n \n Forgot password?\n \n
\n \n
\n
\n \n \n
\n \n
\n\n @if (oauthProviders.length > 0) {\n
\n \n or continue with\n \n
\n
1\">\n @if (showsProvider('github')) {\n \n }\n @if (showsProvider('google')) {\n \n }\n
\n }\n
\n
\n

\n Don't have an account?\n Sign up\n

\n
\n
\n
\n `,\n})\nexport class UiAuthSignInComponent {\n protected readonly Github = Github\n\n @Input() title = 'Welcome back'\n @Input() description = 'Sign in to your account to continue'\n @Input() signUpHref = '/sign-up'\n @Input() forgotPasswordHref = '/forgot-password'\n @Input() oauthProviders: AuthSignInOauthProvider[] = ['github', 'google']\n @Input('class') className?: string\n\n @Output() readonly submit = new EventEmitter()\n @Output() readonly oauth = new EventEmitter()\n\n readonly email = signal('')\n readonly password = signal('')\n readonly remember = signal(false)\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 showsProvider(provider: AuthSignInOauthProvider): boolean {\n return this.oauthProviders.includes(provider)\n }\n\n onSubmit(event: Event): void {\n event.preventDefault()\n this.submit.emit({ email: this.email(), password: this.password(), remember: this.remember() })\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/auth-sign-in/auth-sign-in.component.ts" }, { "path": "packages/registry-angular/blocks/auth-sign-in/index.ts", "content": "export { UiAuthSignInComponent, type AuthSignInOauthProvider, type AuthSignInPayload } from './auth-sign-in.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/auth-sign-in/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", "https://uipkge.dev/r/angular/checkbox.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Full-page sign-in surface. Email + password + remember-me form, forgot-password and sign-up links, optional GitHub/Google OAuth row. Emits `submit` with the form payload and `oauth` with the chosen provider; consumer wires the actual auth call. Link targets are configurable via props.", "categories": [ "auth" ] }