@progalaxyelabs/ngx-stonescriptphp-client 1.22.0 → 1.23.0

package/fesm2022/progalaxyelabs-ngx-stonescriptphp-client.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, Injectable, Inject, Optional, EventEmitter, Output, Input, Component, input, output, signal, computed } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, Injectable, Inject, Optional, EventEmitter, Output, Input, ViewChildren, Component, input, output, signal, computed } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -777,6 +777,108 @@ class ProgalaxyElabsAuth {
             return { exists: false };
         }
     }
+    // -- OTP authentication --------------------------------------------------
+    async sendOtp(identifier) {
+        try {
+            const response = await fetch(`${this.host}/api/auth/otp/send`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ identifier })
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                return {
+                    success: false,
+                    identifier_type: 'email',
+                    masked_identifier: '',
+                    expires_in: 0,
+                    resend_after: 0,
+                    ...data
+                };
+            }
+            return {
+                success: data.success ?? true,
+                identifier_type: data.identifier_type,
+                masked_identifier: data.masked_identifier,
+                expires_in: data.expires_in,
+                resend_after: data.resend_after
+            };
+        }
+        catch {
+            return {
+                success: false,
+                identifier_type: 'email',
+                masked_identifier: '',
+                expires_in: 0,
+                resend_after: 0
+            };
+        }
+    }
+    async verifyOtp(identifier, code) {
+        try {
+            const response = await fetch(`${this.host}/api/auth/otp/verify`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ identifier, code })
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                return { success: false, verified_token: '', ...data };
+            }
+            return {
+                success: data.success ?? true,
+                verified_token: data.verified_token
+            };
+        }
+        catch {
+            return { success: false, verified_token: '' };
+        }
+    }
+    async identityLogin(verifiedToken) {
+        try {
+            const response = await fetch(`${this.host}/api/identity/login`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    verified_token: verifiedToken,
+                    platform: this.config.platformCode
+                })
+            });
+            // 404 means no identity found — caller should show registration form
+            if (response.status === 404) {
+                return { success: false, message: 'identity_not_found' };
+            }
+            const data = await response.json();
+            if (!response.ok) {
+                return { success: false, message: data.error || data.message || 'Login failed' };
+            }
+            return this.handleLoginResponse(data);
+        }
+        catch {
+            return { success: false, message: 'Network error. Please try again.' };
+        }
+    }
+    async identityRegister(verifiedToken, displayName) {
+        try {
+            const response = await fetch(`${this.host}/api/identity/register`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    verified_token: verifiedToken,
+                    display_name: displayName,
+                    platform: this.config.platformCode
+                })
+            });
+            const data = await response.json();
+            if (!response.ok) {
+                return { success: false, message: data.error || data.message || 'Registration failed' };
+            }
+            return this.handleLoginResponse(data);
+        }
+        catch {
+            return { success: false, message: 'Network error. Please try again.' };
+        }
+    }
     // -- OAuth ----------------------------------------------------------------
     async loginWithProvider(provider) {
         return new Promise((resolve) => {
@@ -877,7 +979,8 @@ class ProgalaxyElabsAuth {
         if (!raw)
             return undefined;
         return {
-            email: raw.email,
+            email: raw.email ?? '',
+            phone: raw.phone,
             display_name: raw.display_name ?? raw.email?.split('@')[0] ?? '',
             photo_url: raw.photo_url ?? raw.picture,
             is_email_verified: raw.is_email_verified ?? false
@@ -1201,6 +1304,37 @@ class AuthService {
     getCurrentUser() {
         return this.userSubject.value;
     }
+    // ── OTP authentication ─────────────────────────────────────────────────────
+    async sendOtp(identifier) {
+        if (!this.plugin.sendOtp) {
+            return { success: false, identifier_type: 'email', masked_identifier: '', expires_in: 0, resend_after: 0 };
+        }
+        return this.plugin.sendOtp(identifier);
+    }
+    async verifyOtp(identifier, code) {
+        if (!this.plugin.verifyOtp) {
+            return { success: false, verified_token: '' };
+        }
+        return this.plugin.verifyOtp(identifier, code);
+    }
+    async identityLogin(verifiedToken) {
+        if (!this.plugin.identityLogin) {
+            return { success: false, message: 'OTP login not supported by the configured auth plugin' };
+        }
+        const result = await this.plugin.identityLogin(verifiedToken);
+        if (result.success)
+            this.storeAuthResult(result);
+        return result;
+    }
+    async identityRegister(verifiedToken, displayName) {
+        if (!this.plugin.identityRegister) {
+            return { success: false, message: 'OTP registration not supported by the configured auth plugin' };
+        }
+        const result = await this.plugin.identityRegister(verifiedToken, displayName);
+        if (result.success)
+            this.storeAuthResult(result);
+        return result;
+    }
     // ── Multi-tenant operations ───────────────────────────────────────────────
     async getTenantMemberships(serverName) {
         if (!this.plugin.getTenantMemberships)
@@ -2003,6 +2137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 class TenantLoginComponent {
     auth;
     providerRegistry;
+    otpInputs;
     // Component Configuration
     title = 'Sign In';
     providers = ['google'];
@@ -2032,6 +2167,22 @@ class TenantLoginComponent {
     showPassword = false;
     useOAuth = true;
     oauthProviders = [];
+    // Effective OAuth providers (filtered for Android WebView)
+    effectiveOauthProviders = [];
+    // OTP State
+    otpActive = false;
+    otpStep = 'identifier';
+    otpIdentifier = '';
+    otpIdentifierHint = '';
+    otpNormalizedIdentifier = ''; // E.164 for phone, as-is for email
+    otpMaskedIdentifier = '';
+    otpDigits = ['', '', '', '', '', ''];
+    otpVerifiedToken = '';
+    otpDisplayName = '';
+    otpResendCountdown = 0;
+    otpResendTimer = null;
+    // Android WebView detection
+    isAndroidWebView = false;
     // Tenant Selection State
     showingTenantSelector = false;
     memberships = [];
@@ -2046,17 +2197,32 @@ class TenantLoginComponent {
             this.error = 'Configuration Error: No authentication providers specified.';
             throw new Error('TenantLoginComponent requires providers input.');
         }
-        this.oauthProviders = this.providers.filter(p => p !== 'emailPassword');
-        // If only emailPassword is available, use it by default
-        if (this.oauthProviders.length === 0 && this.isProviderEnabled('emailPassword')) {
+        // Detect Android WebView
+        this.isAndroidWebView = /wv|Android.*Version\//.test(navigator.userAgent);
+        // Filter out 'otp' and 'emailPassword' for OAuth list
+        this.oauthProviders = this.providers.filter(p => p !== 'emailPassword' && p !== 'otp');
+        // Auto-hide Google on Android WebView
+        this.effectiveOauthProviders = this.isAndroidWebView
+            ? this.oauthProviders.filter(p => p !== 'google')
+            : [...this.oauthProviders];
+        // If OTP is configured, it becomes the primary login method
+        if (this.isProviderEnabled('otp')) {
+            this.otpActive = true;
+        }
+        // If only emailPassword is available (no OTP, no OAuth), use it by default
+        if (!this.otpActive && this.effectiveOauthProviders.length === 0 && this.isProviderEnabled('emailPassword')) {
             this.useOAuth = false;
         }
         // Prefill email if provided (for account linking flow)
         if (this.prefillEmail) {
             this.email = this.prefillEmail;
-            this.useOAuth = false; // Switch to email/password form
+            this.useOAuth = false;
+            this.otpActive = false; // Switch to email/password form for linking
         }
     }
+    ngOnDestroy() {
+        this.clearResendTimer();
+    }
     isProviderEnabled(provider) {
         return this.providers.includes(provider);
     }
@@ -2237,6 +2403,244 @@ class TenantLoginComponent {
             this.loading = false;
         }
     }
+    // ── OTP methods ────────────────────────────────────────────────────────────
+    /** Detect identifier type from input and show hint */
+    onOtpIdentifierChange() {
+        const value = this.otpIdentifier.trim();
+        if (!value) {
+            this.otpIdentifierHint = '';
+            return;
+        }
+        const detected = this.detectIdentifierType(value);
+        if (detected === 'email') {
+            this.otpIdentifierHint = 'OTP will be sent to this email';
+        }
+        else if (detected === 'phone') {
+            const digits = value.replace(/\D/g, '');
+            if (digits.length === 10) {
+                this.otpIdentifierHint = 'OTP will be sent to +91 ' + digits;
+            }
+            else {
+                this.otpIdentifierHint = 'OTP will be sent to this number';
+            }
+        }
+        else {
+            this.otpIdentifierHint = '';
+        }
+    }
+    /** Send OTP to the entered identifier */
+    async onOtpSend() {
+        const raw = this.otpIdentifier.trim();
+        if (!raw) {
+            this.error = 'Please enter your email or phone number';
+            return;
+        }
+        const type = this.detectIdentifierType(raw);
+        if (!type) {
+            this.error = 'Please enter a valid email address or phone number';
+            return;
+        }
+        // Normalize: auto-prepend +91 for 10-digit Indian numbers
+        if (type === 'phone') {
+            const digits = raw.replace(/\D/g, '');
+            this.otpNormalizedIdentifier = digits.length === 10 ? `+91${digits}` : (raw.startsWith('+') ? raw : `+${digits}`);
+        }
+        else {
+            this.otpNormalizedIdentifier = raw;
+        }
+        this.loading = true;
+        this.error = '';
+        try {
+            const result = await this.auth.sendOtp(this.otpNormalizedIdentifier);
+            if (!result.success) {
+                this.error = 'Failed to send OTP. Please try again.';
+                return;
+            }
+            this.otpMaskedIdentifier = result.masked_identifier;
+            this.otpDigits = ['', '', '', '', '', ''];
+            this.otpStep = 'code';
+            this.startResendCountdown(result.resend_after || 60);
+            // Focus first digit input after view update
+            setTimeout(() => this.focusOtpInput(0), 50);
+        }
+        catch (err) {
+            this.error = err.message || 'Failed to send OTP';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /** Verify the entered OTP code */
+    async onOtpVerify() {
+        const code = this.otpCode;
+        if (code.length < 6) {
+            this.error = 'Please enter the complete 6-digit code';
+            return;
+        }
+        this.loading = true;
+        this.error = '';
+        try {
+            const verifyResult = await this.auth.verifyOtp(this.otpNormalizedIdentifier, code);
+            if (!verifyResult.success) {
+                this.error = 'Invalid code. Please try again.';
+                return;
+            }
+            this.otpVerifiedToken = verifyResult.verified_token;
+            // Auto-attempt login
+            const loginResult = await this.auth.identityLogin(this.otpVerifiedToken);
+            if (loginResult.success) {
+                // Existing user — proceed with standard post-auth flow
+                await this.handlePostAuthFlow(loginResult);
+                return;
+            }
+            if (loginResult.message === 'identity_not_found') {
+                // New user — show registration form
+                this.otpStep = 'register';
+                return;
+            }
+            // Other login error
+            this.error = loginResult.message || 'Login failed. Please try again.';
+        }
+        catch (err) {
+            this.error = err.message || 'Verification failed';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /** Register a new identity after OTP verification */
+    async onOtpRegister() {
+        const name = this.otpDisplayName.trim();
+        if (!name) {
+            this.error = 'Please enter your name';
+            return;
+        }
+        this.loading = true;
+        this.error = '';
+        try {
+            const result = await this.auth.identityRegister(this.otpVerifiedToken, name);
+            if (!result.success) {
+                this.error = result.message || 'Registration failed';
+                return;
+            }
+            // New identity created — emit onboarding event
+            const identifierType = this.detectIdentifierType(this.otpIdentifier.trim());
+            this.needsOnboarding.emit({
+                auth_method: 'otp',
+                is_new_identity: true,
+                identity: {
+                    email: identifierType === 'email' ? this.otpNormalizedIdentifier : '',
+                    phone: identifierType === 'phone' ? this.otpNormalizedIdentifier : undefined,
+                    display_name: name,
+                },
+            });
+        }
+        catch (err) {
+            this.error = err.message || 'Registration failed';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /** Resend the OTP */
+    onOtpResend(event) {
+        event.preventDefault();
+        this.onOtpSend();
+    }
+    /** Go back to identifier entry */
+    onOtpBack(event) {
+        event.preventDefault();
+        this.otpStep = 'identifier';
+        this.otpDigits = ['', '', '', '', '', ''];
+        this.otpVerifiedToken = '';
+        this.error = '';
+        this.clearResendTimer();
+    }
+    // ── OTP digit input handling ─────────────────────────────────────────────
+    onOtpDigitInput(event, index) {
+        const input = event.target;
+        const value = input.value.replace(/\D/g, '');
+        this.otpDigits[index] = value ? value[0] : '';
+        input.value = this.otpDigits[index];
+        // Auto-advance to next input
+        if (value && index < 5) {
+            this.focusOtpInput(index + 1);
+        }
+        // Auto-verify when all 6 digits entered
+        if (this.otpCode.length === 6) {
+            this.onOtpVerify();
+        }
+    }
+    onOtpDigitKeydown(event, index) {
+        if (event.key === 'Backspace' && !this.otpDigits[index] && index > 0) {
+            this.focusOtpInput(index - 1);
+        }
+    }
+    onOtpPaste(event) {
+        event.preventDefault();
+        const pasted = (event.clipboardData?.getData('text') || '').replace(/\D/g, '').slice(0, 6);
+        for (let i = 0; i < 6; i++) {
+            this.otpDigits[i] = pasted[i] || '';
+        }
+        // Update all input elements
+        const inputs = this.otpInputs?.toArray();
+        if (inputs) {
+            for (let i = 0; i < 6; i++) {
+                inputs[i].nativeElement.value = this.otpDigits[i];
+            }
+        }
+        if (pasted.length >= 6) {
+            this.onOtpVerify();
+        }
+        else {
+            this.focusOtpInput(Math.min(pasted.length, 5));
+        }
+    }
+    get otpCode() {
+        return this.otpDigits.join('');
+    }
+    // ── OTP helpers ──────────────────────────────────────────────────────────
+    detectIdentifierType(value) {
+        if (value.includes('@')) {
+            // Basic email validation
+            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) ? 'email' : null;
+        }
+        const digits = value.replace(/\D/g, '');
+        if (digits.length >= 10 && digits.length <= 15) {
+            return 'phone';
+        }
+        return null;
+    }
+    focusOtpInput(index) {
+        const inputs = this.otpInputs?.toArray();
+        if (inputs && inputs[index]) {
+            inputs[index].nativeElement.focus();
+            inputs[index].nativeElement.select();
+        }
+    }
+    startResendCountdown(seconds) {
+        this.clearResendTimer();
+        this.otpResendCountdown = seconds;
+        this.otpResendTimer = setInterval(() => {
+            this.otpResendCountdown--;
+            if (this.otpResendCountdown <= 0) {
+                this.clearResendTimer();
+            }
+        }, 1000);
+    }
+    clearResendTimer() {
+        if (this.otpResendTimer) {
+            clearInterval(this.otpResendTimer);
+            this.otpResendTimer = null;
+        }
+        this.otpResendCountdown = 0;
+    }
+    formatCountdown(seconds) {
+        const m = Math.floor(seconds / 60);
+        const s = seconds % 60;
+        return `${m}:${s.toString().padStart(2, '0')}`;
+    }
+    // ── Formatting helpers ───────────────────────────────────────────────────
     formatRole(role) {
         return role.charAt(0).toUpperCase() + role.slice(1);
     }
@@ -2265,14 +2669,125 @@ class TenantLoginComponent {
         this.createTenant.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TenantLoginComponent, deps: [{ token: AuthService }, { token: ProviderRegistryService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TenantLoginComponent, isStandalone: true, selector: "lib-tenant-login", inputs: { title: "title", providers: "providers", showTenantSelector: "showTenantSelector", autoSelectSingleTenant: "autoSelectSingleTenant", prefillEmail: "prefillEmail", allowTenantCreation: "allowTenantCreation", tenantSelectorTitle: "tenantSelectorTitle", tenantSelectorDescription: "tenantSelectorDescription", continueButtonText: "continueButtonText", registerLinkText: "registerLinkText", registerLinkAction: "registerLinkAction", createTenantLinkText: "createTenantLinkText", createTenantLinkAction: "createTenantLinkAction" }, outputs: { tenantSelected: "tenantSelected", needsOnboarding: "needsOnboarding", createTenant: "createTenant" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: TenantLoginComponent, isStandalone: true, selector: "lib-tenant-login", inputs: { title: "title", providers: "providers", showTenantSelector: "showTenantSelector", autoSelectSingleTenant: "autoSelectSingleTenant", prefillEmail: "prefillEmail", allowTenantCreation: "allowTenantCreation", tenantSelectorTitle: "tenantSelectorTitle", tenantSelectorDescription: "tenantSelectorDescription", continueButtonText: "continueButtonText", registerLinkText: "registerLinkText", registerLinkAction: "registerLinkAction", createTenantLinkText: "createTenantLinkText", createTenantLinkAction: "createTenantLinkAction" }, outputs: { tenantSelected: "tenantSelected", needsOnboarding: "needsOnboarding", createTenant: "createTenant" }, viewQueries: [{ propertyName: "otpInputs", predicate: ["otpInput"], descendants: true }], ngImport: i0, template: `
         <div class="tenant-login-dialog">
             @if (!showingTenantSelector) {
                 <!-- Step 1: Authentication -->
                 <h2 class="login-title">{{ title }}</h2>
 
+                <!-- OTP Flow -->
+                @if (isProviderEnabled('otp') && otpActive) {
+                    <!-- OTP Step 1: Identifier entry -->
+                    @if (otpStep === 'identifier') {
+                        <form (ngSubmit)="onOtpSend()" class="otp-form">
+                            <div class="form-group">
+                                <input
+                                    [(ngModel)]="otpIdentifier"
+                                    name="otpIdentifier"
+                                    placeholder="Enter Email or Phone Number"
+                                    type="text"
+                                    required
+                                    autocomplete="email tel"
+                                    class="form-control"
+                                    (input)="onOtpIdentifierChange()">
+                                @if (otpIdentifierHint) {
+                                    <div class="field-hint">{{ otpIdentifierHint }}</div>
+                                }
+                            </div>
+                            <button
+                                type="submit"
+                                [disabled]="loading || !otpIdentifier.trim()"
+                                class="btn btn-primary btn-block">
+                                {{ loading ? 'Sending...' : 'Send OTP' }}
+                            </button>
+                        </form>
+                    }
+
+                    <!-- OTP Step 2: Code entry -->
+                    @if (otpStep === 'code') {
+                        <div class="otp-code-section">
+                            <p class="otp-subtitle">
+                                Enter the 6-digit code sent to
+                                <strong>{{ otpMaskedIdentifier }}</strong>
+                            </p>
+                            <div class="otp-digits">
+                                @for (digit of otpDigits; track $index; let i = $index) {
+                                    <input
+                                        #otpInput
+                                        type="text"
+                                        inputmode="numeric"
+                                        maxlength="1"
+                                        class="otp-digit-input"
+                                        [value]="otpDigits[i]"
+                                        (input)="onOtpDigitInput($event, i)"
+                                        (keydown)="onOtpDigitKeydown($event, i)"
+                                        (paste)="onOtpPaste($event)">
+                                }
+                            </div>
+                            <div class="otp-actions">
+                                <button
+                                    type="button"
+                                    (click)="onOtpVerify()"
+                                    [disabled]="loading || otpCode.length < 6"
+                                    class="btn btn-primary btn-block">
+                                    {{ loading ? 'Verifying...' : 'Verify' }}
+                                </button>
+                            </div>
+                            <div class="otp-resend">
+                                @if (otpResendCountdown > 0) {
+                                    <span class="resend-timer">
+                                        Resend in {{ formatCountdown(otpResendCountdown) }}
+                                    </span>
+                                } @else {
+                                    <a href="#" (click)="onOtpResend($event)" class="resend-link">
+                                        Resend OTP
+                                    </a>
+                                }
+                            </div>
+                            <div class="otp-back">
+                                <a href="#" (click)="onOtpBack($event)">
+                                    Use a different email or phone
+                                </a>
+                            </div>
+                        </div>
+                    }
+
+                    <!-- OTP Step 3: Registration (new user) -->
+                    @if (otpStep === 'register') {
+                        <div class="otp-register-section">
+                            <p class="otp-subtitle">
+                                Welcome! Enter your name to get started.
+                            </p>
+                            <form (ngSubmit)="onOtpRegister()" class="otp-form">
+                                <div class="form-group">
+                                    <input
+                                        [(ngModel)]="otpDisplayName"
+                                        name="displayName"
+                                        placeholder="Your Name"
+                                        type="text"
+                                        required
+                                        class="form-control">
+                                </div>
+                                <button
+                                    type="submit"
+                                    [disabled]="loading || !otpDisplayName.trim()"
+                                    class="btn btn-primary btn-block">
+                                    {{ loading ? 'Creating account...' : 'Continue' }}
+                                </button>
+                            </form>
+                        </div>
+                    }
+
+                    <!-- Divider before other providers -->
+                    @if (effectiveOauthProviders.length > 0 || isProviderEnabled('emailPassword')) {
+                        <div class="divider">
+                            <span>OR</span>
+                        </div>
+                    }
+                }
+
                 <!-- Email/Password Form (if enabled) -->
-                @if (isProviderEnabled('emailPassword') && !useOAuth) {
+                @if (isProviderEnabled('emailPassword') && !useOAuth && !otpActive) {
                     <form (ngSubmit)="onEmailLogin()" class="email-form">
                         <div class="form-group">
                             <input
@@ -2296,7 +2811,7 @@ class TenantLoginComponent {
                                 class="password-toggle"
                                 (click)="showPassword = !showPassword"
                                 [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
-                                {{ showPassword ? '👁️' : '👁️‍🗨️' }}
+                                {{ showPassword ? '&#x1F441;' : '&#x1F441;&#x200D;&#x1F5E8;' }}
                             </button>
                         </div>
                         <button
@@ -2308,7 +2823,7 @@ class TenantLoginComponent {
                     </form>
 
                     <!-- Divider -->
-                    @if (oauthProviders.length > 0) {
+                    @if (effectiveOauthProviders.length > 0) {
                         <div class="divider">
                             <span>OR</span>
                         </div>
@@ -2316,9 +2831,9 @@ class TenantLoginComponent {
                 }
 
                 <!-- OAuth Providers -->
-                @if (oauthProviders.length > 0 && (useOAuth || !isProviderEnabled('emailPassword'))) {
+                @if (effectiveOauthProviders.length > 0 && !otpActive && (useOAuth || !isProviderEnabled('emailPassword'))) {
                     <div class="oauth-buttons">
-                        @for (provider of oauthProviders; track provider) {
+                        @for (provider of effectiveOauthProviders; track provider) {
                             <button
                                 type="button"
                                 (click)="onOAuthLogin(provider)"
@@ -2336,7 +2851,7 @@ class TenantLoginComponent {
                     </div>
 
                     <!-- Switch to Email/Password -->
-                    @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
+                    @if (isProviderEnabled('emailPassword') && effectiveOauthProviders.length > 0) {
                         <div class="switch-method">
                             <a href="#" (click)="toggleAuthMethod($event)">
                                 {{ useOAuth ? 'Use email/password instead' : 'Use OAuth instead' }}
@@ -2431,7 +2946,7 @@ class TenantLoginComponent {
                 </div>
             }
         </div>
-    `, isInline: true, styles: [".tenant-login-dialog{padding:24px;max-width:450px;position:relative}.login-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.welcome-message{margin-bottom:16px;padding:12px;background:#e8f5e9;border-radius:4px;text-align:center;font-size:14px;color:#2e7d32}.selector-description{margin-bottom:20px;font-size:14px;color:#666;text-align:center}.email-form,.form-group{margin-bottom:16px}.password-group{position:relative}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.password-input{padding-right:45px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;padding:8px;line-height:1;opacity:.6;transition:opacity .2s}.password-toggle:hover{opacity:1}.password-toggle:focus{outline:2px solid #4285f4;outline-offset:2px;border-radius:4px}.form-control:focus{outline:none;border-color:#4285f4}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-block{width:100%}.btn-primary{background-color:#4285f4;color:#fff}.btn-primary:hover:not(:disabled){background-color:#357ae8}.divider{margin:16px 0;text-align:center;position:relative}.divider:before{content:\"\";position:absolute;top:50%;left:0;right:0;height:1px;background:#ddd}.divider span{background:#fff;padding:0 12px;position:relative;color:#666;font-size:12px}.oauth-buttons{display:flex;flex-direction:column;gap:12px}.btn-oauth{width:100%;background:#fff;color:#333;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;gap:8px}.btn-oauth:hover:not(:disabled){background:#f8f8f8}.btn-google{border-color:#4285f4}.btn-linkedin{border-color:#0077b5}.btn-apple{border-color:#000}.btn-microsoft{border-color:#00a4ef}.btn-github{border-color:#333}.btn-zoho{background-color:#f0483e;color:#fff;border:1px solid #d63b32}.btn-zoho:hover{background-color:#d63b32}.oauth-icon{font-size:18px}.switch-method{margin-top:12px;text-align:center;font-size:14px}.switch-method a{color:#4285f4;text-decoration:none}.switch-method a:hover{text-decoration:underline}.tenant-list{margin-bottom:20px;display:flex;flex-direction:column;gap:12px}.tenant-item{display:flex;align-items:flex-start;gap:12px;padding:16px;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s}.tenant-item:hover{border-color:#4285f4;background:#f8f9ff}.tenant-item.selected{border-color:#4285f4;background:#e8f0fe}.tenant-radio{flex-shrink:0;padding-top:2px}.tenant-radio input[type=radio]{width:18px;height:18px;cursor:pointer}.tenant-info{flex:1}.tenant-name{font-size:16px;font-weight:500;color:#333;margin-bottom:4px}.tenant-meta{font-size:13px;color:#666}.tenant-role{font-weight:500;color:#4285f4}.tenant-separator{margin:0 6px}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #4285f4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.register-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.register-link a{color:#4285f4;text-decoration:none}.register-link a:hover{text-decoration:underline}.create-tenant-link{margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0;text-align:center;font-size:14px;color:#666}.create-tenant-link a{color:#4285f4;text-decoration:none;font-weight:500}.create-tenant-link a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    `, isInline: true, styles: [".tenant-login-dialog{padding:24px;max-width:450px;position:relative}.login-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.welcome-message{margin-bottom:16px;padding:12px;background:#e8f5e9;border-radius:4px;text-align:center;font-size:14px;color:#2e7d32}.selector-description{margin-bottom:20px;font-size:14px;color:#666;text-align:center}.email-form,.otp-form,.form-group{margin-bottom:16px}.password-group{position:relative}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.password-input{padding-right:45px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;padding:8px;line-height:1;opacity:.6;transition:opacity .2s}.password-toggle:hover{opacity:1}.password-toggle:focus{outline:2px solid #4285f4;outline-offset:2px;border-radius:4px}.form-control:focus{outline:none;border-color:#4285f4}.field-hint{margin-top:4px;font-size:12px;color:#888}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-block{width:100%}.btn-primary{background-color:#4285f4;color:#fff}.btn-primary:hover:not(:disabled){background-color:#357ae8}.divider{margin:16px 0;text-align:center;position:relative}.divider:before{content:\"\";position:absolute;top:50%;left:0;right:0;height:1px;background:#ddd}.divider span{background:#fff;padding:0 12px;position:relative;color:#666;font-size:12px}.oauth-buttons{display:flex;flex-direction:column;gap:12px}.btn-oauth{width:100%;background:#fff;color:#333;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;gap:8px}.btn-oauth:hover:not(:disabled){background:#f8f8f8}.btn-google{border-color:#4285f4}.btn-linkedin{border-color:#0077b5}.btn-apple{border-color:#000}.btn-microsoft{border-color:#00a4ef}.btn-github{border-color:#333}.btn-zoho{background-color:#f0483e;color:#fff;border:1px solid #d63b32}.btn-zoho:hover{background-color:#d63b32}.oauth-icon{font-size:18px}.switch-method{margin-top:12px;text-align:center;font-size:14px}.switch-method a{color:#4285f4;text-decoration:none}.switch-method a:hover{text-decoration:underline}.otp-subtitle{text-align:center;font-size:14px;color:#555;margin-bottom:20px}.otp-digits{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.otp-digit-input{width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid #ddd;border-radius:8px;outline:none;transition:border-color .2s;box-sizing:border-box}.otp-digit-input:focus{border-color:#4285f4}.otp-actions{margin-bottom:12px}.otp-resend{text-align:center;font-size:14px;margin-bottom:8px}.resend-timer{color:#888}.resend-link{color:#4285f4;text-decoration:none;cursor:pointer}.resend-link:hover{text-decoration:underline}.otp-back{text-align:center;font-size:13px}.otp-back a{color:#888;text-decoration:none}.otp-back a:hover{text-decoration:underline;color:#4285f4}.otp-register-section .otp-subtitle{color:#2e7d32}.tenant-list{margin-bottom:20px;display:flex;flex-direction:column;gap:12px}.tenant-item{display:flex;align-items:flex-start;gap:12px;padding:16px;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s}.tenant-item:hover{border-color:#4285f4;background:#f8f9ff}.tenant-item.selected{border-color:#4285f4;background:#e8f0fe}.tenant-radio{flex-shrink:0;padding-top:2px}.tenant-radio input[type=radio]{width:18px;height:18px;cursor:pointer}.tenant-info{flex:1}.tenant-name{font-size:16px;font-weight:500;color:#333;margin-bottom:4px}.tenant-meta{font-size:13px;color:#666}.tenant-role{font-weight:500;color:#4285f4}.tenant-separator{margin:0 6px}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #4285f4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.register-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.register-link a{color:#4285f4;text-decoration:none}.register-link a:hover{text-decoration:underline}.create-tenant-link{margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0;text-align:center;font-size:14px;color:#666}.create-tenant-link a{color:#4285f4;text-decoration:none;font-weight:500}.create-tenant-link a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TenantLoginComponent, decorators: [{
             type: Component,
@@ -2441,8 +2956,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <!-- Step 1: Authentication -->
                 <h2 class="login-title">{{ title }}</h2>
 
+                <!-- OTP Flow -->
+                @if (isProviderEnabled('otp') && otpActive) {
+                    <!-- OTP Step 1: Identifier entry -->
+                    @if (otpStep === 'identifier') {
+                        <form (ngSubmit)="onOtpSend()" class="otp-form">
+                            <div class="form-group">
+                                <input
+                                    [(ngModel)]="otpIdentifier"
+                                    name="otpIdentifier"
+                                    placeholder="Enter Email or Phone Number"
+                                    type="text"
+                                    required
+                                    autocomplete="email tel"
+                                    class="form-control"
+                                    (input)="onOtpIdentifierChange()">
+                                @if (otpIdentifierHint) {
+                                    <div class="field-hint">{{ otpIdentifierHint }}</div>
+                                }
+                            </div>
+                            <button
+                                type="submit"
+                                [disabled]="loading || !otpIdentifier.trim()"
+                                class="btn btn-primary btn-block">
+                                {{ loading ? 'Sending...' : 'Send OTP' }}
+                            </button>
+                        </form>
+                    }
+
+                    <!-- OTP Step 2: Code entry -->
+                    @if (otpStep === 'code') {
+                        <div class="otp-code-section">
+                            <p class="otp-subtitle">
+                                Enter the 6-digit code sent to
+                                <strong>{{ otpMaskedIdentifier }}</strong>
+                            </p>
+                            <div class="otp-digits">
+                                @for (digit of otpDigits; track $index; let i = $index) {
+                                    <input
+                                        #otpInput
+                                        type="text"
+                                        inputmode="numeric"
+                                        maxlength="1"
+                                        class="otp-digit-input"
+                                        [value]="otpDigits[i]"
+                                        (input)="onOtpDigitInput($event, i)"
+                                        (keydown)="onOtpDigitKeydown($event, i)"
+                                        (paste)="onOtpPaste($event)">
+                                }
+                            </div>
+                            <div class="otp-actions">
+                                <button
+                                    type="button"
+                                    (click)="onOtpVerify()"
+                                    [disabled]="loading || otpCode.length < 6"
+                                    class="btn btn-primary btn-block">
+                                    {{ loading ? 'Verifying...' : 'Verify' }}
+                                </button>
+                            </div>
+                            <div class="otp-resend">
+                                @if (otpResendCountdown > 0) {
+                                    <span class="resend-timer">
+                                        Resend in {{ formatCountdown(otpResendCountdown) }}
+                                    </span>
+                                } @else {
+                                    <a href="#" (click)="onOtpResend($event)" class="resend-link">
+                                        Resend OTP
+                                    </a>
+                                }
+                            </div>
+                            <div class="otp-back">
+                                <a href="#" (click)="onOtpBack($event)">
+                                    Use a different email or phone
+                                </a>
+                            </div>
+                        </div>
+                    }
+
+                    <!-- OTP Step 3: Registration (new user) -->
+                    @if (otpStep === 'register') {
+                        <div class="otp-register-section">
+                            <p class="otp-subtitle">
+                                Welcome! Enter your name to get started.
+                            </p>
+                            <form (ngSubmit)="onOtpRegister()" class="otp-form">
+                                <div class="form-group">
+                                    <input
+                                        [(ngModel)]="otpDisplayName"
+                                        name="displayName"
+                                        placeholder="Your Name"
+                                        type="text"
+                                        required
+                                        class="form-control">
+                                </div>
+                                <button
+                                    type="submit"
+                                    [disabled]="loading || !otpDisplayName.trim()"
+                                    class="btn btn-primary btn-block">
+                                    {{ loading ? 'Creating account...' : 'Continue' }}
+                                </button>
+                            </form>
+                        </div>
+                    }
+
+                    <!-- Divider before other providers -->
+                    @if (effectiveOauthProviders.length > 0 || isProviderEnabled('emailPassword')) {
+                        <div class="divider">
+                            <span>OR</span>
+                        </div>
+                    }
+                }
+
                 <!-- Email/Password Form (if enabled) -->
-                @if (isProviderEnabled('emailPassword') && !useOAuth) {
+                @if (isProviderEnabled('emailPassword') && !useOAuth && !otpActive) {
                     <form (ngSubmit)="onEmailLogin()" class="email-form">
                         <div class="form-group">
                             <input
@@ -2466,7 +3092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                                 class="password-toggle"
                                 (click)="showPassword = !showPassword"
                                 [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
-                                {{ showPassword ? '👁️' : '👁️‍🗨️' }}
+                                {{ showPassword ? '&#x1F441;' : '&#x1F441;&#x200D;&#x1F5E8;' }}
                             </button>
                         </div>
                         <button
@@ -2478,7 +3104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     </form>
 
                     <!-- Divider -->
-                    @if (oauthProviders.length > 0) {
+                    @if (effectiveOauthProviders.length > 0) {
                         <div class="divider">
                             <span>OR</span>
                         </div>
@@ -2486,9 +3112,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 }
 
                 <!-- OAuth Providers -->
-                @if (oauthProviders.length > 0 && (useOAuth || !isProviderEnabled('emailPassword'))) {
+                @if (effectiveOauthProviders.length > 0 && !otpActive && (useOAuth || !isProviderEnabled('emailPassword'))) {
                     <div class="oauth-buttons">
-                        @for (provider of oauthProviders; track provider) {
+                        @for (provider of effectiveOauthProviders; track provider) {
                             <button
                                 type="button"
                                 (click)="onOAuthLogin(provider)"
@@ -2506,7 +3132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     </div>
 
                     <!-- Switch to Email/Password -->
-                    @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
+                    @if (isProviderEnabled('emailPassword') && effectiveOauthProviders.length > 0) {
                         <div class="switch-method">
                             <a href="#" (click)="toggleAuthMethod($event)">
                                 {{ useOAuth ? 'Use email/password instead' : 'Use OAuth instead' }}
@@ -2601,8 +3227,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 </div>
             }
         </div>
-    `, styles: [".tenant-login-dialog{padding:24px;max-width:450px;position:relative}.login-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.welcome-message{margin-bottom:16px;padding:12px;background:#e8f5e9;border-radius:4px;text-align:center;font-size:14px;color:#2e7d32}.selector-description{margin-bottom:20px;font-size:14px;color:#666;text-align:center}.email-form,.form-group{margin-bottom:16px}.password-group{position:relative}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.password-input{padding-right:45px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;padding:8px;line-height:1;opacity:.6;transition:opacity .2s}.password-toggle:hover{opacity:1}.password-toggle:focus{outline:2px solid #4285f4;outline-offset:2px;border-radius:4px}.form-control:focus{outline:none;border-color:#4285f4}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-block{width:100%}.btn-primary{background-color:#4285f4;color:#fff}.btn-primary:hover:not(:disabled){background-color:#357ae8}.divider{margin:16px 0;text-align:center;position:relative}.divider:before{content:\"\";position:absolute;top:50%;left:0;right:0;height:1px;background:#ddd}.divider span{background:#fff;padding:0 12px;position:relative;color:#666;font-size:12px}.oauth-buttons{display:flex;flex-direction:column;gap:12px}.btn-oauth{width:100%;background:#fff;color:#333;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;gap:8px}.btn-oauth:hover:not(:disabled){background:#f8f8f8}.btn-google{border-color:#4285f4}.btn-linkedin{border-color:#0077b5}.btn-apple{border-color:#000}.btn-microsoft{border-color:#00a4ef}.btn-github{border-color:#333}.btn-zoho{background-color:#f0483e;color:#fff;border:1px solid #d63b32}.btn-zoho:hover{background-color:#d63b32}.oauth-icon{font-size:18px}.switch-method{margin-top:12px;text-align:center;font-size:14px}.switch-method a{color:#4285f4;text-decoration:none}.switch-method a:hover{text-decoration:underline}.tenant-list{margin-bottom:20px;display:flex;flex-direction:column;gap:12px}.tenant-item{display:flex;align-items:flex-start;gap:12px;padding:16px;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s}.tenant-item:hover{border-color:#4285f4;background:#f8f9ff}.tenant-item.selected{border-color:#4285f4;background:#e8f0fe}.tenant-radio{flex-shrink:0;padding-top:2px}.tenant-radio input[type=radio]{width:18px;height:18px;cursor:pointer}.tenant-info{flex:1}.tenant-name{font-size:16px;font-weight:500;color:#333;margin-bottom:4px}.tenant-meta{font-size:13px;color:#666}.tenant-role{font-weight:500;color:#4285f4}.tenant-separator{margin:0 6px}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #4285f4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.register-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.register-link a{color:#4285f4;text-decoration:none}.register-link a:hover{text-decoration:underline}.create-tenant-link{margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0;text-align:center;font-size:14px;color:#666}.create-tenant-link a{color:#4285f4;text-decoration:none;font-weight:500}.create-tenant-link a:hover{text-decoration:underline}\n"] }]
-        }], ctorParameters: () => [{ type: AuthService }, { type: ProviderRegistryService }], propDecorators: { title: [{
+    `, styles: [".tenant-login-dialog{padding:24px;max-width:450px;position:relative}.login-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.welcome-message{margin-bottom:16px;padding:12px;background:#e8f5e9;border-radius:4px;text-align:center;font-size:14px;color:#2e7d32}.selector-description{margin-bottom:20px;font-size:14px;color:#666;text-align:center}.email-form,.otp-form,.form-group{margin-bottom:16px}.password-group{position:relative}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.password-input{padding-right:45px}.password-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;padding:8px;line-height:1;opacity:.6;transition:opacity .2s}.password-toggle:hover{opacity:1}.password-toggle:focus{outline:2px solid #4285f4;outline-offset:2px;border-radius:4px}.form-control:focus{outline:none;border-color:#4285f4}.field-hint{margin-top:4px;font-size:12px;color:#888}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-block{width:100%}.btn-primary{background-color:#4285f4;color:#fff}.btn-primary:hover:not(:disabled){background-color:#357ae8}.divider{margin:16px 0;text-align:center;position:relative}.divider:before{content:\"\";position:absolute;top:50%;left:0;right:0;height:1px;background:#ddd}.divider span{background:#fff;padding:0 12px;position:relative;color:#666;font-size:12px}.oauth-buttons{display:flex;flex-direction:column;gap:12px}.btn-oauth{width:100%;background:#fff;color:#333;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;gap:8px}.btn-oauth:hover:not(:disabled){background:#f8f8f8}.btn-google{border-color:#4285f4}.btn-linkedin{border-color:#0077b5}.btn-apple{border-color:#000}.btn-microsoft{border-color:#00a4ef}.btn-github{border-color:#333}.btn-zoho{background-color:#f0483e;color:#fff;border:1px solid #d63b32}.btn-zoho:hover{background-color:#d63b32}.oauth-icon{font-size:18px}.switch-method{margin-top:12px;text-align:center;font-size:14px}.switch-method a{color:#4285f4;text-decoration:none}.switch-method a:hover{text-decoration:underline}.otp-subtitle{text-align:center;font-size:14px;color:#555;margin-bottom:20px}.otp-digits{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.otp-digit-input{width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid #ddd;border-radius:8px;outline:none;transition:border-color .2s;box-sizing:border-box}.otp-digit-input:focus{border-color:#4285f4}.otp-actions{margin-bottom:12px}.otp-resend{text-align:center;font-size:14px;margin-bottom:8px}.resend-timer{color:#888}.resend-link{color:#4285f4;text-decoration:none;cursor:pointer}.resend-link:hover{text-decoration:underline}.otp-back{text-align:center;font-size:13px}.otp-back a{color:#888;text-decoration:none}.otp-back a:hover{text-decoration:underline;color:#4285f4}.otp-register-section .otp-subtitle{color:#2e7d32}.tenant-list{margin-bottom:20px;display:flex;flex-direction:column;gap:12px}.tenant-item{display:flex;align-items:flex-start;gap:12px;padding:16px;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s}.tenant-item:hover{border-color:#4285f4;background:#f8f9ff}.tenant-item.selected{border-color:#4285f4;background:#e8f0fe}.tenant-radio{flex-shrink:0;padding-top:2px}.tenant-radio input[type=radio]{width:18px;height:18px;cursor:pointer}.tenant-info{flex:1}.tenant-name{font-size:16px;font-weight:500;color:#333;margin-bottom:4px}.tenant-meta{font-size:13px;color:#666}.tenant-role{font-weight:500;color:#4285f4}.tenant-separator{margin:0 6px}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #4285f4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.register-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.register-link a{color:#4285f4;text-decoration:none}.register-link a:hover{text-decoration:underline}.create-tenant-link{margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0;text-align:center;font-size:14px;color:#666}.create-tenant-link a{color:#4285f4;text-decoration:none;font-weight:500}.create-tenant-link a:hover{text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }, { type: ProviderRegistryService }], propDecorators: { otpInputs: [{
+                type: ViewChildren,
+                args: ['otpInput']
+            }], title: [{
                 type: Input
             }], providers: [{
                 type: Input
@@ -3406,8 +4035,8 @@ class MonthYearPickerComponent {
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     tempMonth = signal(null, ...(ngDevMode ? [{ debugName: "tempMonth" }] : []));
     tempYear = signal(null, ...(ngDevMode ? [{ debugName: "tempYear" }] : []));
-    yearStart = signal(this.today.year - 4, ...(ngDevMode ? [{ debugName: "yearStart" }] : []));
-    years = computed(() => Array.from({ length: 12 }, (_, i) => this.yearStart() + i), ...(ngDevMode ? [{ debugName: "years" }] : []));
+    yearStart = signal(this.today.year - 3, ...(ngDevMode ? [{ debugName: "yearStart" }] : []));
+    years = computed(() => Array.from({ length: 10 }, (_, i) => this.yearStart() + i), ...(ngDevMode ? [{ debugName: "years" }] : []));
     displayValue = computed(() => {
         const v = this.value();
         return v ? `${this.MONTHS[v.month]} ${v.year}` : '— / —';
@@ -3468,11 +4097,12 @@ class MonthYearPickerComponent {
           <span class="font-monospace fw-semibold">{{ preview() }}</span>
         </div>
 
-        <div class="px-2 pt-2 pb-1">
-          <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Month</div>
-          <div class="row row-cols-4 g-1">
-            @for (month of MONTHS; track $index) {
-              <div class="col">
+        <div class="nsx-myp-body">
+          <!-- Months: 6 rows × 2 cols -->
+          <div class="nsx-myp-section">
+            <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Month</div>
+            <div class="nsx-myp-grid nsx-myp-grid-2">
+              @for (month of MONTHS; track $index) {
                 <button
                   type="button"
                   class="btn btn-sm w-100"
@@ -3482,16 +4112,15 @@ class MonthYearPickerComponent {
                   (click)="selectMonth($index)">
                   {{ month }}
                 </button>
-              </div>
-            }
+              }
+            </div>
           </div>
-        </div>
 
-        <div class="px-2 pt-1 pb-2">
-          <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Year</div>
-          <div class="row row-cols-4 g-1">
-            @for (year of years(); track year) {
-              <div class="col">
+          <!-- Years: 5 rows × 2 cols + nav row -->
+          <div class="nsx-myp-section">
+            <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Year</div>
+            <div class="nsx-myp-grid nsx-myp-grid-2">
+              @for (year of years(); track year) {
                 <button
                   type="button"
                   class="btn btn-sm w-100 font-monospace"
@@ -3501,19 +4130,12 @@ class MonthYearPickerComponent {
                   (click)="selectYear(year)">
                   {{ year }}
                 </button>
-              </div>
-            }
-          </div>
-
-          <div class="row g-1 mt-1">
-            <div class="col">
-              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(-12)">
-                &lsaquo; Earlier
+              }
+              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(-10)">
+                &lsaquo;
               </button>
-            </div>
-            <div class="col">
-              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(12)">
-                Later &rsaquo;
+              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(10)">
+                &rsaquo;
               </button>
             </div>
           </div>
@@ -3523,24 +4145,24 @@ class MonthYearPickerComponent {
           <div class="col border-end">
             <button
               type="button"
-              class="btn w-100 rounded-0 py-2 fw-semibold text-success"
-              (click)="confirm()">
-              OK
+              class="btn btn-light w-100 rounded-0 py-2"
+              (click)="cancel()">
+              Cancel
             </button>
           </div>
           <div class="col">
             <button
               type="button"
-              class="btn btn-light w-100 rounded-0 py-2"
-              (click)="cancel()">
-              Cancel
+              class="btn w-100 rounded-0 py-2 fw-semibold text-success"
+              (click)="confirm()">
+              OK
             </button>
           </div>
         </div>
 
       </div>
     }
-  `, isInline: true, styles: [":host{position:relative;display:block}.nsx-myp-backdrop{position:fixed;inset:0;z-index:1050}.nsx-myp-popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1051;background:#fff;width:300px;max-width:92vw;overflow:hidden}\n"] });
+  `, isInline: true, styles: [":host{position:relative;display:block}.nsx-myp-backdrop{position:fixed;inset:0;z-index:1050}.nsx-myp-popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1051;background:#fff;width:340px;max-width:92vw;overflow:hidden}.nsx-myp-body{display:flex;gap:.5rem;padding:.5rem}.nsx-myp-section{flex:1;min-width:0}.nsx-myp-grid{display:grid;gap:3px}.nsx-myp-grid-2{grid-template-columns:1fr 1fr}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MonthYearPickerComponent, decorators: [{
             type: Component,
@@ -3566,11 +4188,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           <span class="font-monospace fw-semibold">{{ preview() }}</span>
         </div>
 
-        <div class="px-2 pt-2 pb-1">
-          <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Month</div>
-          <div class="row row-cols-4 g-1">
-            @for (month of MONTHS; track $index) {
-              <div class="col">
+        <div class="nsx-myp-body">
+          <!-- Months: 6 rows × 2 cols -->
+          <div class="nsx-myp-section">
+            <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Month</div>
+            <div class="nsx-myp-grid nsx-myp-grid-2">
+              @for (month of MONTHS; track $index) {
                 <button
                   type="button"
                   class="btn btn-sm w-100"
@@ -3580,16 +4203,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                   (click)="selectMonth($index)">
                   {{ month }}
                 </button>
-              </div>
-            }
+              }
+            </div>
           </div>
-        </div>
 
-        <div class="px-2 pt-1 pb-2">
-          <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Year</div>
-          <div class="row row-cols-4 g-1">
-            @for (year of years(); track year) {
-              <div class="col">
+          <!-- Years: 5 rows × 2 cols + nav row -->
+          <div class="nsx-myp-section">
+            <div class="text-uppercase text-muted px-1 mb-1" style="font-size: 10px; letter-spacing: .08em;">Year</div>
+            <div class="nsx-myp-grid nsx-myp-grid-2">
+              @for (year of years(); track year) {
                 <button
                   type="button"
                   class="btn btn-sm w-100 font-monospace"
@@ -3599,19 +4221,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                   (click)="selectYear(year)">
                   {{ year }}
                 </button>
-              </div>
-            }
-          </div>
-
-          <div class="row g-1 mt-1">
-            <div class="col">
-              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(-12)">
-                &lsaquo; Earlier
+              }
+              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(-10)">
+                &lsaquo;
               </button>
-            </div>
-            <div class="col">
-              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(12)">
-                Later &rsaquo;
+              <button type="button" class="btn btn-sm btn-light w-100" (click)="shiftYears(10)">
+                &rsaquo;
               </button>
             </div>
           </div>
@@ -3621,24 +4236,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           <div class="col border-end">
             <button
               type="button"
-              class="btn w-100 rounded-0 py-2 fw-semibold text-success"
-              (click)="confirm()">
-              OK
+              class="btn btn-light w-100 rounded-0 py-2"
+              (click)="cancel()">
+              Cancel
             </button>
           </div>
           <div class="col">
             <button
               type="button"
-              class="btn btn-light w-100 rounded-0 py-2"
-              (click)="cancel()">
-              Cancel
+              class="btn w-100 rounded-0 py-2 fw-semibold text-success"
+              (click)="confirm()">
+              OK
             </button>
           </div>
         </div>
 
       </div>
     }
-  `, styles: [":host{position:relative;display:block}.nsx-myp-backdrop{position:fixed;inset:0;z-index:1050}.nsx-myp-popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1051;background:#fff;width:300px;max-width:92vw;overflow:hidden}\n"] }]
+  `, styles: [":host{position:relative;display:block}.nsx-myp-backdrop{position:fixed;inset:0;z-index:1050}.nsx-myp-popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1051;background:#fff;width:340px;max-width:92vw;overflow:hidden}.nsx-myp-body{display:flex;gap:.5rem;padding:.5rem}.nsx-myp-section{flex:1;min-width:0}.nsx-myp-grid{display:grid;gap:3px}.nsx-myp-grid-2{grid-template-columns:1fr 1fr}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class TenantRegisterComponent {