{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "login-01", "title": "Console SSO Login", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/login-01/login-01.component.ts", "content": "// Split-screen developer console authentication suite: brand telemetry showcase\n// with a live terminal widget on the left, OAuth providers, password / passkey /\n// SAML SSO tabs with enterprise-domain detection on the right. Port of the\n// Vue/React block 1:1 — emits `submit` with the validated payload, `oauth` with\n// the chosen provider, `forgotPassword` and `signUp`; the consumer wires the\n// actual auth calls.\nimport {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n EventEmitter,\n Input,\n Output,\n computed,\n inject,\n signal,\n} from '@angular/core'\nimport {\n ArrowRight,\n CheckCircle2,\n Fingerprint,\n Github,\n KeyRound,\n Lock,\n LucideAngularModule,\n Mail,\n ShieldCheck,\n Terminal,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\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'\nimport {\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\nexport type Login01AuthMethod = 'password' | 'passkey' | 'sso'\nexport type Login01OauthProvider = 'github' | 'google'\n\nexport interface Login01Payload {\n method: string\n email: string\n password?: string\n domain?: string\n}\n\nconst publicMailDomains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com', 'icloud.com']\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-login-01, [ui-login-01]',\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 UiBadgeComponent,\n UiButtonComponent,\n UiInputComponent,\n UiLabelComponent,\n UiSeparatorComponent,\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n ],\n template: `\n
\n \n
\n\n \n
\n
\n \n \n Developer Cloud Console v4.8\n
\n

\n The dual-framework UI registry for mission-critical software.\n

\n

\n Own your source code without runtime dependency lock-in. Built with Tailwind CSS v4, OKLCH color spaces,\n and headless accessibility primitives.\n

\n
\n\n \n
\n
\n
\n \n \n \n auth-session-init.ts\n
\n mTLS Encrypted\n
\n
\n

// Validating SAML 2.0 / WebAuthn identity assertion

\n

\n const session =\n await auth.verifyCredentials({{ '{' }}\n

\n

\n tenant: 'cyberdyne-systems.internal',\n

\n

\n protocols: ['webauthn-fido2',\n 'saml2-okta']\n

\n

{{ '});' }}

\n

\n \n ✓ Cryptographic identity handshaking verified (0.8ms)\n

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

99.95%

\n

Auth Uptime SLA

\n
\n
\n

FIDO2

\n

Passkey Standard

\n
\n
\n

SOC 2 Type II

\n

Certified Cloud

\n
\n
\n
\n\n
\n © 2026 UIPKGE Inc.\n
\n Privacy Policy\n Terms of Service\n Trust Center\n
\n
\n \n\n \n
\n
\n \n
\n \n \n
\n UIPKGE Studio\n
\n\n
\n

Sign in to console

\n

Enter your credentials, passkey or company Single Sign-On.

\n
\n\n \n
\n \n \n GitHub\n \n \n \n \n \n \n \n \n Google\n \n
\n\n
\n \n \n Or continue with\n \n
\n\n \n \n \n \n \n \n \n\n \n \n
\n
\n \n
\n \n \n
\n \n @if (isEnterpriseEmail()) {\n
\n \n Enterprise domain detected. Single Sign-On available.\n
\n }\n
\n\n
\n
\n \n \n Forgot password?\n \n
\n
\n \n \n
\n
\n\n \n @if (isLoading()) {\n \n } @else {\n Continue with Password\n }\n \n \n \n
\n\n \n \n
\n
\n \n
\n
\n

Passwordless Biometric Login

\n

\n Use Touch ID, Face ID, or a FIDO2 hardware security key for zero-friction sign in.\n

\n
\n \n \n {{ isLoading() ? 'Authenticating...' : 'Sign in with Passkey' }}\n \n
\n \n\n \n \n
\n
\n \n \n

\n Redirects to your corporate Identity Provider (Okta, Azure AD, Ping Identity).\n

\n
\n\n \n \n Continue with SAML SSO\n \n \n \n
\n \n\n
\n Don't have a workspace account?\n \n
\n
\n \n \n `,\n})\nexport class UiLogin01Component {\n protected readonly ArrowRight = ArrowRight\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Fingerprint = Fingerprint\n protected readonly Github = Github\n protected readonly KeyRound = KeyRound\n protected readonly Lock = Lock\n protected readonly Mail = Mail\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Terminal = Terminal\n protected readonly Zap = Zap\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 authMethod = signal('password')\n readonly email = signal('')\n readonly password = signal('')\n readonly ssoDomain = signal('')\n readonly isLoading = signal(false)\n\n private timer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.timer))\n }\n\n readonly isEnterpriseEmail = computed(() => {\n const parts = this.email().split('@')\n if (parts.length < 2) return false\n const domain = (parts[1] ?? '').toLowerCase()\n return Boolean(domain) && !publicMailDomains.includes(domain) && domain.includes('.')\n })\n\n get rootClass(): string {\n return cn('bg-background grid min-h-screen w-full grid-cols-1 lg:grid-cols-12', this.className)\n }\n\n setAuthMethod(value: string): void {\n this.authMethod.set(value as Login01AuthMethod)\n }\n\n onSubmit(event: Event): void {\n event.preventDefault()\n this.beginAuth()\n }\n\n onPasskey(event: Event): void {\n event.preventDefault()\n this.beginAuth()\n }\n\n private beginAuth(): void {\n if (this.isLoading()) return\n this.isLoading.set(true)\n clearTimeout(this.timer)\n this.timer = setTimeout(() => {\n this.isLoading.set(false)\n this.submit.emit({\n method: this.authMethod(),\n email: this.email(),\n password: this.password(),\n domain: this.ssoDomain(),\n })\n }, 800)\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/login-01/login-01.component.ts" }, { "path": "packages/registry-angular/blocks/login-01/index.ts", "content": "export {\n UiLogin01Component,\n type Login01AuthMethod,\n type Login01OauthProvider,\n type Login01Payload,\n} from './login-01.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/login-01/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "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", "https://uipkge.dev/r/angular/tabs.json" ], "description": "Split-screen developer console authentication suite featuring brand telemetry showcases, OAuth providers, passkey biometric sign-in, and automatic enterprise SAML SSO domain detection.", "categories": [ "auth" ] }