{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "login-01", "title": "Console SSO Login", "type": "registry:page", "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" ], "files": [ { "path": "packages/elements-lit/src/blocks/login-01/login-01.ts", "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { ArrowRight, CheckCircle2, Fingerprint, KeyRound, Lock, Mail, ShieldCheck, Terminal, Zap } from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/label/label'\nimport '../../components/separator/separator'\nimport '../../components/tabs/tabs'\n\nexport type LoginMethod = 'password' | 'passkey' | 'sso'\n\nexport interface LoginSubmitPayload {\n method: LoginMethod\n email: string\n password?: string\n domain?: string\n}\n\n/**\n * — the registry Login01 block as a web component.\n *\n * Class strings are React's Login01 verbatim. React state (useState) becomes\n * @state fields; `onSubmit` (payload) / `onForgotPassword` / `onSignUp` /\n * `onOAuth` (provider) become `submit` / `forgot-password` / `sign-up` /\n * `oauth` CustomEvents (bubbles, composed). The Mail/Lock field icons move\n * from React's absolute overlay into 's prefix slot (same visual\n * result, no overlay positioning to maintain).\n */\nexport class UipLogin01 extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n authMethod: { state: true },\n email: { state: true },\n password: { state: true },\n ssoDomain: { state: true },\n isLoading: { state: true },\n }\n\n private authMethod: LoginMethod = 'password'\n private email = ''\n private password = ''\n private ssoDomain = ''\n private isLoading = false\n private timer?: number\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'login-01')\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n if (this.timer) window.clearTimeout(this.timer)\n }\n\n private get isEnterpriseEmail(): boolean {\n const parts = this.email.split('@')\n if (parts.length < 2) return false\n const domain = parts[1].toLowerCase()\n return !!domain && !['gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com', 'icloud.com'].includes(domain) && domain.includes('.')\n }\n\n private handleSubmit(e: Event) {\n e.preventDefault()\n if (this.isLoading) return\n this.isLoading = true\n this.timer = window.setTimeout(() => {\n this.isLoading = false\n this.dispatchEvent(\n new CustomEvent('submit', {\n detail: { method: this.authMethod, email: this.email, password: this.password, domain: this.ssoDomain },\n bubbles: true,\n composed: true,\n }),\n )\n }, 800)\n }\n\n render() {\n return html`\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 ${icon(Zap, 'zap', 'size-4 fill-current')}\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 this.dispatchEvent(new CustomEvent('oauth', { detail: 'github', bubbles: true, composed: true }))}\n >\n \n \n \n GitHub\n \n \n this.dispatchEvent(new CustomEvent('oauth', { detail: 'google', bubbles: true, composed: true }))}\n >\n \n \n \n \n \n \n Google\n \n
\n\n
\n \n Or continue with\n
\n\n ) => {\n this.authMethod = e.detail.value as LoginMethod\n }}\n >\n Password\n Passkey\n SAML SSO\n\n
\n
\n
\n Work Email\n {\n this.email = (e.target as UipInput).value\n }}\n >\n ${icon(Mail, 'mail', 'size-4')}\n \n ${this.isEnterpriseEmail\n ? html`
\n ${icon(ShieldCheck, 'shield-check', 'size-3.5')}\n Enterprise domain detected. Single Sign-On available.\n
`\n : nothing}\n
\n\n
\n
\n Password\n this.dispatchEvent(new CustomEvent('forgot-password', { bubbles: true, composed: true }))}\n >\n Forgot password?\n \n
\n {\n this.password = (e.target as UipInput).value\n }}\n >\n ${icon(Lock, 'lock', 'size-4')}\n \n
\n\n \n ${this.isLoading\n ? html``\n : html`Continue with Password`}\n ${icon(ArrowRight, 'arrow-right', 'size-3.5')}\n \n
\n
\n\n
\n
\n
\n ${icon(Fingerprint, 'fingerprint', 'size-6')}\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 ${icon(Fingerprint, 'fingerprint', 'size-4')}\n ${this.isLoading ? 'Authenticating...' : 'Sign in with Passkey'}\n \n
\n
\n\n
\n
\n
\n Enterprise Domain\n {\n this.ssoDomain = (e.target as UipInput).value\n }}\n >\n

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

\n
\n\n \n ${icon(KeyRound, 'key-round', 'size-3.5')}\n Continue with SAML SSO\n ${icon(ArrowRight, 'arrow-right', 'size-3.5')}\n \n
\n
\n \n\n
\n Don't have a workspace account?\n this.dispatchEvent(new CustomEvent('sign-up', { bubbles: true, composed: true }))}\n >\n Create free trial\n \n
\n
\n
\n \n `\n }\n}\n\ncustomElements.get('uip-login-01') || customElements.define('uip-login-01', UipLogin01)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-login-01': UipLogin01\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/login-01/login-01.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/label.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/separator.json", "https://uipkge.dev/r/lit/tabs.json" ] }