{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "login-02", "title": "Split Brand Login", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/login-02/login-02.component.ts", "content": "// Split-layout login: brand/marketing panel on the left (logo, headline,\n// value-prop bullets, copyright) and the form on the right (email + password,\n// SSO row, sign-up link). Collapses to single-column form-only on small screens.\n// Port of the Vue/React block 1:1 — emits `submit` with the credentials,\n// `oauth` with the chosen provider, `forgotPassword` and `signUp`; the consumer\n// wires the actual auth calls.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, signal } from '@angular/core'\nimport { Github, LucideAngularModule, Palette, ShieldCheck, Zap } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.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 Login02OauthProvider = 'github' | 'google'\n\nexport interface Login02Payload {\n email: string\n password: string\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-login-02, [ui-login-02]',\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: [LucideAngularModule, UiButtonComponent, UiInputComponent, UiLabelComponent, UiSeparatorComponent],\n template: `\n
\n \n
\n\n
\n

Why teams switch

\n

\n Ship features in\n hours, not sprints.\n

\n

\n Reusable components, opinionated defaults, and a registry that keeps your team writing product code instead\n of reinventing the same UI.\n

\n\n \n
\n\n

© {{ year }} Your Product, Inc.

\n \n\n \n
\n
\n
\n

Welcome back

\n

Sign in to continue to your workspace.

\n
\n\n
\n
\n \n \n
\n
\n
\n \n \n Forgot?\n \n
\n \n
\n \n
\n\n
\n \n \n Or\n \n
\n\n
\n \n \n
\n\n

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

\n
\n
\n
\n `,\n})\nexport class UiLogin02Component {\n protected readonly Github = Github\n protected readonly Palette = Palette\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Zap = Zap\n\n protected readonly year = new Date().getFullYear()\n\n @Input('class') className?: string\n\n @Output() readonly submit = new EventEmitter()\n @Output() readonly forgotPassword = new EventEmitter()\n @Output() readonly signUp = new EventEmitter()\n @Output() readonly oauth = new EventEmitter()\n\n readonly email = signal('')\n readonly password = signal('')\n\n get rootClass(): string {\n return cn('grid min-h-svh lg:grid-cols-2', this.className)\n }\n\n onSubmit(event: Event): void {\n event.preventDefault()\n this.submit.emit({ email: this.email(), password: this.password() })\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/login-02/login-02.component.ts" }, { "path": "packages/registry-angular/blocks/login-02/index.ts", "content": "export { UiLogin02Component, type Login02OauthProvider, type Login02Payload } from './login-02.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/login-02/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/label.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Split-layout login. Brand/marketing panel on the left (logo, headline, value-prop bullets, copyright) and the form on the right (email + password, SSO row, sign-up link). Collapses to single-column form-only on small screens. Edit the brand panel inline to swap product copy + bullet icons.", "categories": [ "auth" ] }