@progalaxyelabs/ngx-stonescriptphp-client 1.3.0 → 1.4.0

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

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, NgModule, Input, Component, EventEmitter, Output, Optional } from '@angular/core';
+import { Injectable, Inject, NgModule, EventEmitter, Output, Input, Component, Optional } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -194,6 +195,11 @@ class MyEnvironmentModel {
         csrfTokenCookieName: 'csrf_token',
         csrfHeaderName: 'X-CSRF-Token'
     };
+    /**
+     * Branding configuration for auth components
+     * Allows platforms to customize login/register pages without creating wrappers
+     */
+    branding;
 }
 
 /**
@@ -576,6 +582,7 @@ class AuthService {
     tokens;
     signinStatus;
     environment;
+    USER_STORAGE_KEY = 'progalaxyapi_user';
     // Observable user state
     userSubject = new BehaviorSubject(null);
     user$ = this.userSubject.asObservable();
@@ -583,6 +590,46 @@ class AuthService {
         this.tokens = tokens;
         this.signinStatus = signinStatus;
         this.environment = environment;
+        // Restore user from localStorage on initialization
+        this.restoreUser();
+    }
+    /**
+     * Restore user from localStorage
+     */
+    restoreUser() {
+        try {
+            const userJson = localStorage.getItem(this.USER_STORAGE_KEY);
+            if (userJson) {
+                const user = JSON.parse(userJson);
+                this.updateUser(user);
+            }
+        }
+        catch (error) {
+            console.error('Failed to restore user from localStorage:', error);
+        }
+    }
+    /**
+     * Save user to localStorage
+     */
+    saveUser(user) {
+        try {
+            if (user) {
+                localStorage.setItem(this.USER_STORAGE_KEY, JSON.stringify(user));
+            }
+            else {
+                localStorage.removeItem(this.USER_STORAGE_KEY);
+            }
+        }
+        catch (error) {
+            console.error('Failed to save user to localStorage:', error);
+        }
+    }
+    /**
+     * Update user subject and persist to localStorage
+     */
+    updateUser(user) {
+        this.updateUser(user);
+        this.saveUser(user);
     }
     /**
      * Login with email and password
@@ -603,7 +650,7 @@ class AuthService {
             if (data.success && data.access_token) {
                 this.tokens.setAccessToken(data.access_token);
                 this.signinStatus.setSigninStatus(true);
-                this.userSubject.next(data.user);
+                this.updateUser(data.user);
                 return { success: true, user: data.user };
             }
             return {
@@ -688,7 +735,7 @@ class AuthService {
                 if (event.data.type === 'oauth_success') {
                     this.tokens.setAccessToken(event.data.access_token);
                     this.signinStatus.setSigninStatus(true);
-                    this.userSubject.next(event.data.user);
+                    this.updateUser(event.data.user);
                     window.removeEventListener('message', messageHandler);
                     popup.close();
                     resolve({
@@ -739,7 +786,7 @@ class AuthService {
             if (data.success && data.access_token) {
                 this.tokens.setAccessToken(data.access_token);
                 this.signinStatus.setSigninStatus(true);
-                this.userSubject.next(data.user);
+                this.updateUser(data.user);
                 return {
                     success: true,
                     user: data.user,
@@ -763,10 +810,19 @@ class AuthService {
      */
     async signout() {
         try {
-            await fetch(`${this.environment.accountsUrl}/api/auth/logout`, {
-                method: 'POST',
-                credentials: 'include'
-            });
+            const refreshToken = this.tokens.getRefreshToken();
+            if (refreshToken) {
+                await fetch(`${this.environment.accountsUrl}/api/auth/logout`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    credentials: 'include',
+                    body: JSON.stringify({
+                        refresh_token: refreshToken
+                    })
+                });
+            }
         }
         catch (error) {
             console.error('Logout API call failed:', error);
@@ -774,7 +830,7 @@ class AuthService {
         finally {
             this.tokens.clear();
             this.signinStatus.setSigninStatus(false);
-            this.userSubject.next(null);
+            this.updateUser(null);
         }
     }
     /**
@@ -798,7 +854,7 @@ class AuthService {
             const data = await response.json();
             if (data.access_token) {
                 this.tokens.setAccessToken(data.access_token);
-                this.userSubject.next(data.user);
+                this.updateUser(data.user);
                 this.signinStatus.setSigninStatus(true);
                 return true;
             }
@@ -852,7 +908,7 @@ class AuthService {
                 this.tokens.setAccessToken(result.access_token);
                 this.signinStatus.setSigninStatus(true);
                 if (result.user) {
-                    this.userSubject.next(result.user);
+                    this.updateUser(result.user);
                 }
             }
             return result;
@@ -902,7 +958,7 @@ class AuthService {
                         this.signinStatus.setSigninStatus(true);
                     }
                     if (event.data.user) {
-                        this.userSubject.next(event.data.user);
+                        this.updateUser(event.data.user);
                     }
                     window.removeEventListener('message', messageHandler);
                     popup.close();
@@ -1094,6 +1150,65 @@ class AuthService {
             return null;
         }
     }
+    /**
+     * Check if user has completed onboarding (has a tenant)
+     */
+    async checkOnboardingStatus(identityId) {
+        try {
+            const response = await fetch(`${this.environment.accountsUrl}/api/auth/onboarding/status?platform_code=${this.environment.platformCode}&identity_id=${identityId}`, {
+                method: 'GET',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include'
+            });
+            if (!response.ok) {
+                throw new Error('Failed to check onboarding status');
+            }
+            return await response.json();
+        }
+        catch (error) {
+            throw error;
+        }
+    }
+    /**
+     * Complete tenant onboarding (create tenant with country + org name)
+     */
+    async completeTenantOnboarding(countryCode, tenantName) {
+        try {
+            const accessToken = this.tokens.getAccessToken();
+            if (!accessToken) {
+                throw new Error('Not authenticated');
+            }
+            const response = await fetch(`${this.environment.accountsUrl}/api/auth/register-tenant`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${accessToken}`
+                },
+                credentials: 'include',
+                body: JSON.stringify({
+                    platform: this.environment.platformCode,
+                    tenant_name: tenantName,
+                    country_code: countryCode,
+                    provider: 'google', // Assuming OAuth
+                    oauth_token: accessToken
+                })
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.message || 'Failed to create tenant');
+            }
+            const data = await response.json();
+            // Update tokens with new tenant-scoped tokens
+            if (data.access_token) {
+                this.tokens.setAccessToken(data.access_token);
+                this.signinStatus.setSigninStatus(true);
+            }
+            return data;
+        }
+        catch (error) {
+            throw error;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AuthService, deps: [{ token: TokenService }, { token: SigninStatusService }, { token: MyEnvironmentModel }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AuthService, providedIn: 'root' });
 }
@@ -1142,29 +1257,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 }]
         }] });
 
-class LoginDialogComponent {
+class TenantLoginComponent {
     auth;
-    /**
-     * REQUIRED: Which authentication providers to show in this dialog
-     * @example ['google', 'linkedin', 'emailPassword']
-     */
-    providers = [];
+    // Component Configuration
+    title = 'Sign In';
+    providers = ['google'];
+    showTenantSelector = true;
+    autoSelectSingleTenant = true;
+    prefillEmail; // Email to prefill (for account linking flow)
+    allowTenantCreation = true;
+    // Tenant Selector Labels
+    tenantSelectorTitle = 'Select Organization';
+    tenantSelectorDescription = 'Choose which organization you want to access:';
+    continueButtonText = 'Continue';
+    // Link Labels
+    registerLinkText = "Don't have an account?";
+    registerLinkAction = 'Sign up';
+    createTenantLinkText = "Don't see your organization?";
+    createTenantLinkAction = 'Create New Organization';
+    // Outputs
+    tenantSelected = new EventEmitter();
+    createTenant = new EventEmitter();
+    // Form Fields
     email = '';
     password = '';
+    // State
     error = '';
     loading = false;
+    showPassword = false;
+    useOAuth = true;
     oauthProviders = [];
+    // Tenant Selection State
+    showingTenantSelector = false;
+    memberships = [];
+    selectedTenantId = null;
+    userName = '';
     constructor(auth) {
         this.auth = auth;
     }
     ngOnInit() {
         if (!this.providers || this.providers.length === 0) {
-            this.error = 'Configuration Error: No authentication providers specified. Please pass providers to LoginDialogComponent.';
-            throw new Error('LoginDialogComponent requires providers input. Example: dialogRef.componentInstance.providers = [\'google\', \'emailPassword\']');
+            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')) {
+            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
         }
-        // Get OAuth providers (excluding emailPassword)
-        this.oauthProviders = this.providers
-            .filter(p => p !== 'emailPassword');
     }
     isProviderEnabled(provider) {
         return this.providers.includes(provider);
@@ -1181,9 +1326,13 @@ class LoginDialogComponent {
         return labels[provider];
     }
     getProviderIcon(provider) {
-        // Platforms can customize icons via CSS classes: .btn-google, .btn-linkedin, etc.
         return undefined;
     }
+    toggleAuthMethod(event) {
+        event.preventDefault();
+        this.useOAuth = !this.useOAuth;
+        this.error = '';
+    }
     async onEmailLogin() {
         if (!this.email || !this.password) {
             this.error = 'Please enter email and password';
@@ -1195,11 +1344,13 @@ class LoginDialogComponent {
             const result = await this.auth.loginWithEmail(this.email, this.password);
             if (!result.success) {
                 this.error = result.message || 'Login failed';
+                return;
             }
-            // On success, parent component/dialog should close automatically via user$ subscription
+            // Authentication successful, now handle tenant selection
+            await this.handlePostAuthFlow();
         }
         catch (err) {
-            this.error = 'An unexpected error occurred';
+            this.error = err.message || 'An unexpected error occurred';
         }
         finally {
             this.loading = false;
@@ -1212,194 +1363,499 @@ class LoginDialogComponent {
             const result = await this.auth.loginWithProvider(provider);
             if (!result.success) {
                 this.error = result.message || 'OAuth login failed';
+                return;
             }
-            // On success, parent component/dialog should close automatically via user$ subscription
+            // Authentication successful, now handle tenant selection
+            await this.handlePostAuthFlow();
         }
         catch (err) {
-            this.error = 'An unexpected error occurred';
+            this.error = err.message || 'An unexpected error occurred';
         }
         finally {
             this.loading = false;
         }
     }
-    onRegisterClick(event) {
-        event.preventDefault();
-        // Platforms can override this or listen for a custom event
-        // For now, just emit a console message
-        console.log('Register clicked - platform should handle navigation');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LoginDialogComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LoginDialogComponent, isStandalone: true, selector: "lib-login-dialog", inputs: { providers: "providers" }, ngImport: i0, template: `
-        <div class="login-dialog">
-            <h2 class="login-title">Sign In</h2>
-
-            <!-- Email/Password Form (if enabled) -->
-            @if (isProviderEnabled('emailPassword')) {
-                <form (ngSubmit)="onEmailLogin()" class="email-form">
-                    <div class="form-group">
-                        <input
-                            [(ngModel)]="email"
-                            name="email"
-                            placeholder="Email"
-                            type="email"
-                            required
-                            class="form-control">
-                    </div>
-                    <div class="form-group">
-                        <input
-                            [(ngModel)]="password"
-                            name="password"
-                            placeholder="Password"
-                            type="password"
-                            required
-                            class="form-control">
-                    </div>
-                    <button
-                        type="submit"
-                        [disabled]="loading"
-                        class="btn btn-primary btn-block">
-                        {{ loading ? 'Signing in...' : getProviderLabel('emailPassword') }}
-                    </button>
-                </form>
-            }
-
-            <!-- Divider if both email and OAuth are present -->
-            @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
-                <div class="divider">
-                    <span>OR</span>
-                </div>
+    async handlePostAuthFlow() {
+        if (!this.showTenantSelector) {
+            // Tenant selection is disabled, emit event immediately
+            this.tenantSelected.emit({
+                tenantId: '',
+                tenantSlug: '',
+                role: ''
+            });
+            return;
+        }
+        // Fetch user's tenant memberships
+        this.loading = true;
+        try {
+            const result = await this.auth.getTenantMemberships();
+            if (!result.memberships || result.memberships.length === 0) {
+                // User has no tenants, prompt to create one
+                this.error = 'You are not a member of any organization. Please create one.';
+                if (this.allowTenantCreation) {
+                    setTimeout(() => this.createTenant.emit(), 2000);
+                }
+                return;
             }
-
-            <!-- OAuth Providers -->
-            @if (oauthProviders.length > 0) {
-                <div class="oauth-buttons">
-                    @for (provider of oauthProviders; track provider) {
-                        <button
-                            (click)="onOAuthLogin(provider)"
-                            [disabled]="loading"
-                            class="btn btn-oauth btn-{{ provider }}">
-                            @if (getProviderIcon(provider)) {
-                                <span class="oauth-icon">
-                                    {{ getProviderIcon(provider) }}
-                                </span>
-                            }
-                            {{ getProviderLabel(provider) }}
-                        </button>
-                    }
-                </div>
+            this.memberships = result.memberships;
+            // Get user name if available
+            const currentUser = this.auth.getCurrentUser();
+            if (currentUser) {
+                this.userName = currentUser.display_name || currentUser.email;
             }
-
-            <!-- Error Message -->
-            @if (error) {
-                <div class="error-message">
-                    {{ error }}
-                </div>
+            // Auto-select if user has only one tenant
+            if (this.memberships.length === 1 && this.autoSelectSingleTenant) {
+                await this.selectAndContinue(this.memberships[0]);
             }
-
-            <!-- Loading State -->
-            @if (loading) {
-                <div class="loading-overlay">
-                    <div class="spinner"></div>
-                </div>
+            else {
+                // Show tenant selector
+                this.showingTenantSelector = true;
             }
-
-            <!-- Register Link -->
-            <div class="register-link">
-                Don't have an account?
-                <a href="#" (click)="onRegisterClick($event)">Sign up</a>
-            </div>
-        </div>
-    `, isInline: true, styles: [".login-dialog{padding:24px;max-width:400px;position:relative}.login-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.email-form,.form-group{margin-bottom:16px}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.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}.oauth-icon{font-size:18px}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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.15", ngImport: i0, type: LoginDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-login-dialog', standalone: true, imports: [CommonModule, FormsModule], template: `
-        <div class="login-dialog">
-            <h2 class="login-title">Sign In</h2>
-
-            <!-- Email/Password Form (if enabled) -->
-            @if (isProviderEnabled('emailPassword')) {
-                <form (ngSubmit)="onEmailLogin()" class="email-form">
-                    <div class="form-group">
-                        <input
-                            [(ngModel)]="email"
-                            name="email"
-                            placeholder="Email"
-                            type="email"
-                            required
-                            class="form-control">
+        }
+        catch (err) {
+            this.error = err.message || 'Failed to load organizations';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    selectTenantItem(tenantId) {
+        this.selectedTenantId = tenantId;
+    }
+    async onContinueWithTenant() {
+        if (!this.selectedTenantId) {
+            this.error = 'Please select an organization';
+            return;
+        }
+        const membership = this.memberships.find(m => m.tenant_id === this.selectedTenantId);
+        if (!membership) {
+            this.error = 'Selected organization not found';
+            return;
+        }
+        await this.selectAndContinue(membership);
+    }
+    async selectAndContinue(membership) {
+        this.loading = true;
+        this.error = '';
+        try {
+            const result = await this.auth.selectTenant(membership.tenant_id);
+            if (!result.success) {
+                this.error = result.message || 'Failed to select organization';
+                return;
+            }
+            // Emit tenant selected event
+            this.tenantSelected.emit({
+                tenantId: membership.tenant_id,
+                tenantSlug: membership.slug,
+                role: membership.role
+            });
+        }
+        catch (err) {
+            this.error = err.message || 'An unexpected error occurred';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    formatRole(role) {
+        return role.charAt(0).toUpperCase() + role.slice(1);
+    }
+    formatLastAccessed(dateStr) {
+        try {
+            const date = new Date(dateStr);
+            const now = new Date();
+            const diffMs = now.getTime() - date.getTime();
+            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+            if (diffDays === 0)
+                return 'today';
+            if (diffDays === 1)
+                return 'yesterday';
+            if (diffDays < 7)
+                return `${diffDays} days ago`;
+            if (diffDays < 30)
+                return `${Math.floor(diffDays / 7)} weeks ago`;
+            return `${Math.floor(diffDays / 30)} months ago`;
+        }
+        catch {
+            return dateStr;
+        }
+    }
+    onCreateTenantClick(event) {
+        event.preventDefault();
+        this.createTenant.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TenantLoginComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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", createTenant: "createTenant" }, ngImport: i0, template: `
+        <div class="tenant-login-dialog">
+            @if (!showingTenantSelector) {
+                <!-- Step 1: Authentication -->
+                <h2 class="login-title">{{ title }}</h2>
+
+                <!-- Email/Password Form (if enabled) -->
+                @if (isProviderEnabled('emailPassword') && !useOAuth) {
+                    <form (ngSubmit)="onEmailLogin()" class="email-form">
+                        <div class="form-group">
+                            <input
+                                [(ngModel)]="email"
+                                name="email"
+                                placeholder="Email"
+                                type="email"
+                                required
+                                class="form-control">
+                        </div>
+                        <div class="form-group password-group">
+                            <input
+                                [(ngModel)]="password"
+                                name="password"
+                                placeholder="Password"
+                                [type]="showPassword ? 'text' : 'password'"
+                                required
+                                class="form-control password-input">
+                            <button
+                                type="button"
+                                class="password-toggle"
+                                (click)="showPassword = !showPassword"
+                                [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
+                                {{ showPassword ? '👁️' : '👁️‍🗨️' }}
+                            </button>
+                        </div>
+                        <button
+                            type="submit"
+                            [disabled]="loading"
+                            class="btn btn-primary btn-block">
+                            {{ loading ? 'Signing in...' : 'Sign in with Email' }}
+                        </button>
+                    </form>
+
+                    <!-- Divider -->
+                    @if (oauthProviders.length > 0) {
+                        <div class="divider">
+                            <span>OR</span>
+                        </div>
+                    }
+                }
+
+                <!-- OAuth Providers -->
+                @if (oauthProviders.length > 0 && (useOAuth || !isProviderEnabled('emailPassword'))) {
+                    <div class="oauth-buttons">
+                        @for (provider of oauthProviders; track provider) {
+                            <button
+                                type="button"
+                                (click)="onOAuthLogin(provider)"
+                                [disabled]="loading"
+                                class="btn btn-oauth btn-{{ provider }}">
+                                @if (getProviderIcon(provider)) {
+                                    <span class="oauth-icon">
+                                        {{ getProviderIcon(provider) }}
+                                    </span>
+                                }
+                                {{ getProviderLabel(provider) }}
+                            </button>
+                        }
                     </div>
-                    <div class="form-group">
-                        <input
-                            [(ngModel)]="password"
-                            name="password"
-                            placeholder="Password"
-                            type="password"
-                            required
-                            class="form-control">
+
+                    <!-- Switch to Email/Password -->
+                    @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
+                        <div class="switch-method">
+                            <a href="#" (click)="toggleAuthMethod($event)">
+                                {{ useOAuth ? 'Use email/password instead' : 'Use OAuth instead' }}
+                            </a>
+                        </div>
+                    }
+                }
+
+                <!-- Error Message -->
+                @if (error) {
+                    <div class="error-message">
+                        {{ error }}
                     </div>
-                    <button
-                        type="submit"
-                        [disabled]="loading"
-                        class="btn btn-primary btn-block">
-                        {{ loading ? 'Signing in...' : getProviderLabel('emailPassword') }}
-                    </button>
-                </form>
+                }
+
+                <!-- Register Link -->
+                @if (allowTenantCreation) {
+                    <div class="register-link">
+                        {{ registerLinkText }}
+                        <a href="#" (click)="onCreateTenantClick($event)">{{ registerLinkAction }}</a>
+                    </div>
+                }
+            } @else {
+                <!-- Step 2: Tenant Selection -->
+                <h2 class="login-title">{{ tenantSelectorTitle }}</h2>
+
+                @if (userName) {
+                    <div class="welcome-message">
+                        Welcome back, <strong>{{ userName }}</strong>!
+                    </div>
+                }
+
+                <p class="selector-description">{{ tenantSelectorDescription }}</p>
+
+                <div class="tenant-list">
+                    @for (membership of memberships; track membership.tenant_id) {
+                        <div
+                            class="tenant-item"
+                            [class.selected]="selectedTenantId === membership.tenant_id"
+                            (click)="selectTenantItem(membership.tenant_id)">
+                            <div class="tenant-radio">
+                                <input
+                                    type="radio"
+                                    [checked]="selectedTenantId === membership.tenant_id"
+                                    [name]="'tenant-' + membership.tenant_id"
+                                    [id]="'tenant-' + membership.tenant_id">
+                            </div>
+                            <div class="tenant-info">
+                                <div class="tenant-name">{{ membership.name }}</div>
+                                <div class="tenant-meta">
+                                    <span class="tenant-role">{{ formatRole(membership.role) }}</span>
+                                    @if (membership.last_accessed) {
+                                        <span class="tenant-separator">·</span>
+                                        <span class="tenant-last-accessed">
+                                            Last accessed {{ formatLastAccessed(membership.last_accessed) }}
+                                        </span>
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                    }
+                </div>
+
+                <button
+                    type="button"
+                    (click)="onContinueWithTenant()"
+                    [disabled]="!selectedTenantId || loading"
+                    class="btn btn-primary btn-block">
+                    {{ loading ? 'Loading...' : continueButtonText }}
+                </button>
+
+                <!-- Error Message -->
+                @if (error) {
+                    <div class="error-message">
+                        {{ error }}
+                    </div>
+                }
+
+                <!-- Create New Tenant Link -->
+                @if (allowTenantCreation) {
+                    <div class="create-tenant-link">
+                        {{ createTenantLinkText }}
+                        <a href="#" (click)="onCreateTenantClick($event)">{{ createTenantLinkAction }}</a>
+                    </div>
+                }
             }
 
-            <!-- Divider if both email and OAuth are present -->
-            @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
-                <div class="divider">
-                    <span>OR</span>
+            <!-- Loading Overlay -->
+            @if (loading) {
+                <div class="loading-overlay">
+                    <div class="spinner"></div>
                 </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}.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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.15", ngImport: i0, type: TenantLoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-tenant-login', standalone: true, imports: [CommonModule, FormsModule], template: `
+        <div class="tenant-login-dialog">
+            @if (!showingTenantSelector) {
+                <!-- Step 1: Authentication -->
+                <h2 class="login-title">{{ title }}</h2>
 
-            <!-- OAuth Providers -->
-            @if (oauthProviders.length > 0) {
-                <div class="oauth-buttons">
-                    @for (provider of oauthProviders; track provider) {
+                <!-- Email/Password Form (if enabled) -->
+                @if (isProviderEnabled('emailPassword') && !useOAuth) {
+                    <form (ngSubmit)="onEmailLogin()" class="email-form">
+                        <div class="form-group">
+                            <input
+                                [(ngModel)]="email"
+                                name="email"
+                                placeholder="Email"
+                                type="email"
+                                required
+                                class="form-control">
+                        </div>
+                        <div class="form-group password-group">
+                            <input
+                                [(ngModel)]="password"
+                                name="password"
+                                placeholder="Password"
+                                [type]="showPassword ? 'text' : 'password'"
+                                required
+                                class="form-control password-input">
+                            <button
+                                type="button"
+                                class="password-toggle"
+                                (click)="showPassword = !showPassword"
+                                [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
+                                {{ showPassword ? '👁️' : '👁️‍🗨️' }}
+                            </button>
+                        </div>
                         <button
-                            (click)="onOAuthLogin(provider)"
+                            type="submit"
                             [disabled]="loading"
-                            class="btn btn-oauth btn-{{ provider }}">
-                            @if (getProviderIcon(provider)) {
-                                <span class="oauth-icon">
-                                    {{ getProviderIcon(provider) }}
-                                </span>
-                            }
-                            {{ getProviderLabel(provider) }}
+                            class="btn btn-primary btn-block">
+                            {{ loading ? 'Signing in...' : 'Sign in with Email' }}
                         </button>
+                    </form>
+
+                    <!-- Divider -->
+                    @if (oauthProviders.length > 0) {
+                        <div class="divider">
+                            <span>OR</span>
+                        </div>
                     }
-                </div>
-            }
+                }
 
-            <!-- Error Message -->
-            @if (error) {
-                <div class="error-message">
-                    {{ error }}
+                <!-- OAuth Providers -->
+                @if (oauthProviders.length > 0 && (useOAuth || !isProviderEnabled('emailPassword'))) {
+                    <div class="oauth-buttons">
+                        @for (provider of oauthProviders; track provider) {
+                            <button
+                                type="button"
+                                (click)="onOAuthLogin(provider)"
+                                [disabled]="loading"
+                                class="btn btn-oauth btn-{{ provider }}">
+                                @if (getProviderIcon(provider)) {
+                                    <span class="oauth-icon">
+                                        {{ getProviderIcon(provider) }}
+                                    </span>
+                                }
+                                {{ getProviderLabel(provider) }}
+                            </button>
+                        }
+                    </div>
+
+                    <!-- Switch to Email/Password -->
+                    @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
+                        <div class="switch-method">
+                            <a href="#" (click)="toggleAuthMethod($event)">
+                                {{ useOAuth ? 'Use email/password instead' : 'Use OAuth instead' }}
+                            </a>
+                        </div>
+                    }
+                }
+
+                <!-- Error Message -->
+                @if (error) {
+                    <div class="error-message">
+                        {{ error }}
+                    </div>
+                }
+
+                <!-- Register Link -->
+                @if (allowTenantCreation) {
+                    <div class="register-link">
+                        {{ registerLinkText }}
+                        <a href="#" (click)="onCreateTenantClick($event)">{{ registerLinkAction }}</a>
+                    </div>
+                }
+            } @else {
+                <!-- Step 2: Tenant Selection -->
+                <h2 class="login-title">{{ tenantSelectorTitle }}</h2>
+
+                @if (userName) {
+                    <div class="welcome-message">
+                        Welcome back, <strong>{{ userName }}</strong>!
+                    </div>
+                }
+
+                <p class="selector-description">{{ tenantSelectorDescription }}</p>
+
+                <div class="tenant-list">
+                    @for (membership of memberships; track membership.tenant_id) {
+                        <div
+                            class="tenant-item"
+                            [class.selected]="selectedTenantId === membership.tenant_id"
+                            (click)="selectTenantItem(membership.tenant_id)">
+                            <div class="tenant-radio">
+                                <input
+                                    type="radio"
+                                    [checked]="selectedTenantId === membership.tenant_id"
+                                    [name]="'tenant-' + membership.tenant_id"
+                                    [id]="'tenant-' + membership.tenant_id">
+                            </div>
+                            <div class="tenant-info">
+                                <div class="tenant-name">{{ membership.name }}</div>
+                                <div class="tenant-meta">
+                                    <span class="tenant-role">{{ formatRole(membership.role) }}</span>
+                                    @if (membership.last_accessed) {
+                                        <span class="tenant-separator">·</span>
+                                        <span class="tenant-last-accessed">
+                                            Last accessed {{ formatLastAccessed(membership.last_accessed) }}
+                                        </span>
+                                    }
+                                </div>
+                            </div>
+                        </div>
+                    }
                 </div>
+
+                <button
+                    type="button"
+                    (click)="onContinueWithTenant()"
+                    [disabled]="!selectedTenantId || loading"
+                    class="btn btn-primary btn-block">
+                    {{ loading ? 'Loading...' : continueButtonText }}
+                </button>
+
+                <!-- Error Message -->
+                @if (error) {
+                    <div class="error-message">
+                        {{ error }}
+                    </div>
+                }
+
+                <!-- Create New Tenant Link -->
+                @if (allowTenantCreation) {
+                    <div class="create-tenant-link">
+                        {{ createTenantLinkText }}
+                        <a href="#" (click)="onCreateTenantClick($event)">{{ createTenantLinkAction }}</a>
+                    </div>
+                }
             }
 
-            <!-- Loading State -->
+            <!-- Loading Overlay -->
             @if (loading) {
                 <div class="loading-overlay">
                     <div class="spinner"></div>
                 </div>
             }
-
-            <!-- Register Link -->
-            <div class="register-link">
-                Don't have an account?
-                <a href="#" (click)="onRegisterClick($event)">Sign up</a>
-            </div>
         </div>
-    `, styles: [".login-dialog{padding:24px;max-width:400px;position:relative}.login-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.email-form,.form-group{margin-bottom:16px}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.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}.oauth-icon{font-size:18px}.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}\n"] }]
-        }], ctorParameters: () => [{ type: AuthService }], propDecorators: { providers: [{
+    `, 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}.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 }], propDecorators: { title: [{
+                type: Input
+            }], providers: [{
+                type: Input
+            }], showTenantSelector: [{
+                type: Input
+            }], autoSelectSingleTenant: [{
+                type: Input
+            }], prefillEmail: [{
+                type: Input
+            }], allowTenantCreation: [{
+                type: Input
+            }], tenantSelectorTitle: [{
+                type: Input
+            }], tenantSelectorDescription: [{
+                type: Input
+            }], continueButtonText: [{
+                type: Input
+            }], registerLinkText: [{
+                type: Input
+            }], registerLinkAction: [{
+                type: Input
+            }], createTenantLinkText: [{
+                type: Input
+            }], createTenantLinkAction: [{
                 type: Input
+            }], tenantSelected: [{
+                type: Output
+            }], createTenant: [{
+                type: Output
             }] } });
 
 class RegisterComponent {
     auth;
+    environment;
+    navigateToLogin = new EventEmitter();
     displayName = '';
     email = '';
     password = '';
@@ -1407,8 +1863,13 @@ class RegisterComponent {
     error = '';
     success = '';
     loading = false;
-    constructor(auth) {
+    showAccountLinkPrompt = false;
+    existingEmail = '';
+    showPassword = false;
+    showConfirmPassword = false;
+    constructor(auth, environment) {
         this.auth = auth;
+        this.environment = environment;
     }
     async onRegister() {
         // Reset messages
@@ -1435,14 +1896,40 @@ class RegisterComponent {
         }
         this.loading = true;
         try {
-            const result = await this.auth.register(this.email, this.password, this.displayName);
-            if (result.success) {
-                this.success = result.message || 'Account created successfully!';
-                // On success, parent component/dialog should close automatically via user$ subscription
-                // or navigate to email verification page
+            // Direct API call to check for email already registered
+            const response = await fetch(`${this.environment.accountsUrl}/api/auth/register`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    email: this.email,
+                    password: this.password,
+                    display_name: this.displayName,
+                    platform: this.environment.platformCode
+                })
+            });
+            const data = await response.json();
+            if (response.ok && data.identity_id) {
+                // Registration successful - now login
+                const loginResult = await this.auth.loginWithEmail(this.email, this.password);
+                if (loginResult.success) {
+                    this.success = 'Account created successfully!';
+                }
+                else {
+                    this.success = 'Account created! Please sign in.';
+                }
             }
             else {
-                this.error = result.message || 'Registration failed';
+                // Check if email already registered
+                if (data.error === 'Email already registered' || data.details?.includes('Email already registered')) {
+                    this.existingEmail = this.email;
+                    this.showAccountLinkPrompt = true;
+                    this.error = '';
+                }
+                else {
+                    // Other errors
+                    this.error = data.error || data.details || 'Registration failed';
+                }
             }
         }
         catch (err) {
@@ -1454,16 +1941,50 @@ class RegisterComponent {
     }
     onLoginClick(event) {
         event.preventDefault();
-        // Platforms can override this or listen for a custom event
-        // For now, just emit a console message
-        console.log('Login clicked - platform should handle navigation');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RegisterComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RegisterComponent, isStandalone: true, selector: "lib-register", ngImport: i0, template: `
+        this.navigateToLogin.emit('');
+    }
+    linkExistingAccount() {
+        // User confirmed they want to link their existing account
+        this.navigateToLogin.emit(this.existingEmail);
+    }
+    cancelLinking() {
+        // User decided not to link - reset form
+        this.showAccountLinkPrompt = false;
+        this.existingEmail = '';
+        this.email = '';
+        this.password = '';
+        this.confirmPassword = '';
+        this.displayName = '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RegisterComponent, deps: [{ token: AuthService }, { token: MyEnvironmentModel }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RegisterComponent, isStandalone: true, selector: "lib-register", outputs: { navigateToLogin: "navigateToLogin" }, ngImport: i0, template: `
         <div class="register-dialog">
             <h2 class="register-title">Create Account</h2>
 
-            <form (ngSubmit)="onRegister()" class="register-form">
+            <!-- Account Link Prompt -->
+            @if (showAccountLinkPrompt) {
+                <div class="account-link-prompt">
+                    <div class="prompt-icon">🔗</div>
+                    <h3>Account Already Exists</h3>
+                    <p>
+                        You already have an account with <strong>{{ existingEmail }}</strong>,
+                        used on another ProGalaxy E-Labs platform.
+                    </p>
+                    <p>
+                        Would you like to use the same account to access this platform?
+                    </p>
+                    <div class="prompt-actions">
+                        <button type="button" class="btn btn-primary btn-block" (click)="linkExistingAccount()">
+                            Yes, Use My Existing Account
+                        </button>
+                        <button type="button" class="btn btn-secondary btn-block" (click)="cancelLinking()">
+                            No, Use Different Email
+                        </button>
+                    </div>
+                </div>
+            }
+
+            <form *ngIf="!showAccountLinkPrompt" (ngSubmit)="onRegister()" class="register-form">
                 <div class="form-group">
                     <label for="displayName">Full Name</label>
                     <input
@@ -1488,30 +2009,44 @@ class RegisterComponent {
                         class="form-control">
                 </div>
 
-                <div class="form-group">
+                <div class="form-group password-group">
                     <label for="password">Password</label>
                     <input
                         id="password"
                         [(ngModel)]="password"
                         name="password"
                         placeholder="Create a password"
-                        type="password"
+                        [type]="showPassword ? 'text' : 'password'"
                         required
                         minlength="8"
-                        class="form-control">
+                        class="form-control password-input">
+                    <button
+                        type="button"
+                        class="password-toggle"
+                        (click)="showPassword = !showPassword"
+                        [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
+                        {{ showPassword ? '👁️' : '👁️‍🗨️' }}
+                    </button>
                     <small class="form-hint">At least 8 characters</small>
                 </div>
 
-                <div class="form-group">
+                <div class="form-group password-group">
                     <label for="confirmPassword">Confirm Password</label>
                     <input
                         id="confirmPassword"
                         [(ngModel)]="confirmPassword"
                         name="confirmPassword"
                         placeholder="Confirm your password"
-                        type="password"
+                        [type]="showConfirmPassword ? 'text' : 'password'"
                         required
-                        class="form-control">
+                        class="form-control password-input">
+                    <button
+                        type="button"
+                        class="password-toggle"
+                        (click)="showConfirmPassword = !showConfirmPassword"
+                        [attr.aria-label]="showConfirmPassword ? 'Hide password' : 'Show password'">
+                        {{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
+                    </button>
                 </div>
 
                 <button
@@ -1523,7 +2058,7 @@ class RegisterComponent {
             </form>
 
             <!-- Error Message -->
-            @if (error) {
+            @if (error && !showAccountLinkPrompt) {
                 <div class="error-message">
                     {{ error }}
                 </div>
@@ -1544,12 +2079,12 @@ class RegisterComponent {
             }
 
             <!-- Login Link -->
-            <div class="login-link">
+            <div *ngIf="!showAccountLinkPrompt" class="login-link">
                 Already have an account?
                 <a href="#" (click)="onLoginClick($event)">Sign in</a>
             </div>
         </div>
-    `, isInline: true, styles: [".register-dialog{padding:24px;max-width:400px;position:relative}.register-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.register-form,.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.form-control:focus{outline:none;border-color:#4285f4}.form-hint{display:block;margin-top:4px;font-size:12px;color:#666}.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}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.success-message{margin-top:16px;padding:12px;background:#efe;color:#3a3;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)}}.login-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.login-link a{color:#4285f4;text-decoration:none}.login-link a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    `, isInline: true, styles: [".register-dialog{padding:24px;max-width:400px;position:relative}.register-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.register-form,.form-group{margin-bottom:16px}.password-group{position:relative}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}.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:38px;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}.form-hint{display:block;margin-top:4px;font-size:12px;color:#666}.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}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.success-message{margin-top:16px;padding:12px;background:#efe;color:#3a3;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)}}.login-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.login-link a{color:#4285f4;text-decoration:none}.login-link a:hover{text-decoration:underline}.account-link-prompt{background:#f8f9fa;border:2px solid #4285f4;border-radius:8px;padding:24px;margin-bottom:16px;text-align:center}.prompt-icon{font-size:48px;margin-bottom:12px}.account-link-prompt h3{margin:0 0 12px;color:#333;font-size:20px;font-weight:500}.account-link-prompt p{margin:8px 0;color:#555;font-size:14px;line-height:1.6}.prompt-actions{margin-top:20px;display:flex;flex-direction:column;gap:10px}.btn-secondary{background:#fff;color:#333;border:1px solid #ddd}.btn-secondary:hover:not(:disabled){background:#f8f9fa;border-color:#ccc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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.15", ngImport: i0, type: RegisterComponent, decorators: [{
             type: Component,
@@ -1557,7 +2092,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <div class="register-dialog">
             <h2 class="register-title">Create Account</h2>
 
-            <form (ngSubmit)="onRegister()" class="register-form">
+            <!-- Account Link Prompt -->
+            @if (showAccountLinkPrompt) {
+                <div class="account-link-prompt">
+                    <div class="prompt-icon">🔗</div>
+                    <h3>Account Already Exists</h3>
+                    <p>
+                        You already have an account with <strong>{{ existingEmail }}</strong>,
+                        used on another ProGalaxy E-Labs platform.
+                    </p>
+                    <p>
+                        Would you like to use the same account to access this platform?
+                    </p>
+                    <div class="prompt-actions">
+                        <button type="button" class="btn btn-primary btn-block" (click)="linkExistingAccount()">
+                            Yes, Use My Existing Account
+                        </button>
+                        <button type="button" class="btn btn-secondary btn-block" (click)="cancelLinking()">
+                            No, Use Different Email
+                        </button>
+                    </div>
+                </div>
+            }
+
+            <form *ngIf="!showAccountLinkPrompt" (ngSubmit)="onRegister()" class="register-form">
                 <div class="form-group">
                     <label for="displayName">Full Name</label>
                     <input
@@ -1582,30 +2140,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         class="form-control">
                 </div>
 
-                <div class="form-group">
+                <div class="form-group password-group">
                     <label for="password">Password</label>
                     <input
                         id="password"
                         [(ngModel)]="password"
                         name="password"
                         placeholder="Create a password"
-                        type="password"
+                        [type]="showPassword ? 'text' : 'password'"
                         required
                         minlength="8"
-                        class="form-control">
+                        class="form-control password-input">
+                    <button
+                        type="button"
+                        class="password-toggle"
+                        (click)="showPassword = !showPassword"
+                        [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
+                        {{ showPassword ? '👁️' : '👁️‍🗨️' }}
+                    </button>
                     <small class="form-hint">At least 8 characters</small>
                 </div>
 
-                <div class="form-group">
+                <div class="form-group password-group">
                     <label for="confirmPassword">Confirm Password</label>
                     <input
                         id="confirmPassword"
                         [(ngModel)]="confirmPassword"
                         name="confirmPassword"
                         placeholder="Confirm your password"
-                        type="password"
+                        [type]="showConfirmPassword ? 'text' : 'password'"
                         required
-                        class="form-control">
+                        class="form-control password-input">
+                    <button
+                        type="button"
+                        class="password-toggle"
+                        (click)="showConfirmPassword = !showConfirmPassword"
+                        [attr.aria-label]="showConfirmPassword ? 'Hide password' : 'Show password'">
+                        {{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
+                    </button>
                 </div>
 
                 <button
@@ -1617,7 +2189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             </form>
 
             <!-- Error Message -->
-            @if (error) {
+            @if (error && !showAccountLinkPrompt) {
                 <div class="error-message">
                     {{ error }}
                 </div>
@@ -1638,60 +2210,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }
 
             <!-- Login Link -->
-            <div class="login-link">
+            <div *ngIf="!showAccountLinkPrompt" class="login-link">
                 Already have an account?
                 <a href="#" (click)="onLoginClick($event)">Sign in</a>
             </div>
         </div>
-    `, styles: [".register-dialog{padding:24px;max-width:400px;position:relative}.register-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.register-form,.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.form-control:focus{outline:none;border-color:#4285f4}.form-hint{display:block;margin-top:4px;font-size:12px;color:#666}.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}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.success-message{margin-top:16px;padding:12px;background:#efe;color:#3a3;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)}}.login-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.login-link a{color:#4285f4;text-decoration:none}.login-link a:hover{text-decoration:underline}\n"] }]
-        }], ctorParameters: () => [{ type: AuthService }] });
+    `, styles: [".register-dialog{padding:24px;max-width:400px;position:relative}.register-title{margin:0 0 24px;font-size:24px;font-weight:500;text-align:center}.register-form,.form-group{margin-bottom:16px}.password-group{position:relative}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}.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:38px;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}.form-hint{display:block;margin-top:4px;font-size:12px;color:#666}.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}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.success-message{margin-top:16px;padding:12px;background:#efe;color:#3a3;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)}}.login-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.login-link a{color:#4285f4;text-decoration:none}.login-link a:hover{text-decoration:underline}.account-link-prompt{background:#f8f9fa;border:2px solid #4285f4;border-radius:8px;padding:24px;margin-bottom:16px;text-align:center}.prompt-icon{font-size:48px;margin-bottom:12px}.account-link-prompt h3{margin:0 0 12px;color:#333;font-size:20px;font-weight:500}.account-link-prompt p{margin:8px 0;color:#555;font-size:14px;line-height:1.6}.prompt-actions{margin-top:20px;display:flex;flex-direction:column;gap:10px}.btn-secondary{background:#fff;color:#333;border:1px solid #ddd}.btn-secondary:hover:not(:disabled){background:#f8f9fa;border-color:#ccc}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }, { type: MyEnvironmentModel, decorators: [{
+                    type: Inject,
+                    args: [MyEnvironmentModel]
+                }] }], propDecorators: { navigateToLogin: [{
+                type: Output
+            }] } });
 
-class TenantLoginComponent {
+class AuthPageComponent {
+    environment;
+    providers = ['google', 'emailPassword'];
+    authenticated = new EventEmitter();
+    mode = 'login';
+    appName = '';
+    logo;
+    subtitle;
+    gradientStyle = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+    constructor(environment) {
+        this.environment = environment;
+    }
+    ngOnInit() {
+        const branding = this.environment.branding;
+        if (branding) {
+            this.appName = branding.appName || 'Sign In';
+            this.logo = branding.logo;
+            this.subtitle = branding.subtitle;
+            if (branding.gradientStart && branding.gradientEnd) {
+                this.gradientStyle = `linear-gradient(135deg, ${branding.gradientStart} 0%, ${branding.gradientEnd} 100%)`;
+            }
+            else if (branding.primaryColor) {
+                const color = branding.primaryColor;
+                this.gradientStyle = `linear-gradient(135deg, ${color} 0%, ${this.adjustColor(color, -20)} 100%)`;
+            }
+        }
+        else {
+            this.appName = 'Sign In';
+        }
+    }
+    onAuthenticated(event) {
+        this.authenticated.emit(event);
+    }
+    /**
+     * Adjust color brightness (simple implementation)
+     * @param color Hex color (e.g., '#667eea')
+     * @param percent Percentage to darken (negative) or lighten (positive)
+     */
+    adjustColor(color, percent) {
+        const num = parseInt(color.replace('#', ''), 16);
+        const amt = Math.round(2.55 * percent);
+        const R = (num >> 16) + amt;
+        const G = (num >> 8 & 0x00FF) + amt;
+        const B = (num & 0x0000FF) + amt;
+        return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
+            (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
+            (B < 255 ? B < 1 ? 0 : B : 255))
+            .toString(16).slice(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AuthPageComponent, deps: [{ token: MyEnvironmentModel }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AuthPageComponent, isStandalone: true, selector: "lib-auth-page", inputs: { providers: "providers" }, outputs: { authenticated: "authenticated" }, ngImport: i0, template: `
+        <div class="auth-container" [style.background]="gradientStyle">
+            <div class="auth-card">
+                @if (logo) {
+                    <img [src]="logo" [alt]="appName + ' logo'" class="logo">
+                }
+                <h1 class="app-name">{{ appName }}</h1>
+                @if (subtitle) {
+                    <p class="subtitle">{{ subtitle }}</p>
+                }
+
+                @if (mode === 'login') {
+                    <lib-tenant-login
+                        [providers]="providers"
+                        [allowTenantCreation]="false"
+                        (tenantSelected)="onAuthenticated($event)"
+                        (createTenant)="mode = 'register'">
+                    </lib-tenant-login>
+                } @else {
+                    <lib-register
+                        (navigateToLogin)="mode = 'login'">
+                    </lib-register>
+                }
+            </div>
+        </div>
+    `, isInline: true, styles: [".auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2)}.auth-card{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000001a;padding:40px;width:100%;max-width:480px}.logo{display:block;max-width:200px;max-height:80px;margin:0 auto 24px}.app-name{margin:0 0 12px;font-size:28px;font-weight:600;text-align:center;color:#1a202c}.subtitle{margin:0 0 32px;font-size:16px;text-align:center;color:#718096}:host ::ng-deep .tenant-login-dialog,:host ::ng-deep .register-dialog{padding:0;max-width:none}:host ::ng-deep .login-title,:host ::ng-deep .register-title{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TenantLoginComponent, selector: "lib-tenant-login", inputs: ["title", "providers", "showTenantSelector", "autoSelectSingleTenant", "prefillEmail", "allowTenantCreation", "tenantSelectorTitle", "tenantSelectorDescription", "continueButtonText", "registerLinkText", "registerLinkAction", "createTenantLinkText", "createTenantLinkAction"], outputs: ["tenantSelected", "createTenant"] }, { kind: "component", type: RegisterComponent, selector: "lib-register", outputs: ["navigateToLogin"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AuthPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-auth-page', standalone: true, imports: [CommonModule, TenantLoginComponent, RegisterComponent], template: `
+        <div class="auth-container" [style.background]="gradientStyle">
+            <div class="auth-card">
+                @if (logo) {
+                    <img [src]="logo" [alt]="appName + ' logo'" class="logo">
+                }
+                <h1 class="app-name">{{ appName }}</h1>
+                @if (subtitle) {
+                    <p class="subtitle">{{ subtitle }}</p>
+                }
+
+                @if (mode === 'login') {
+                    <lib-tenant-login
+                        [providers]="providers"
+                        [allowTenantCreation]="false"
+                        (tenantSelected)="onAuthenticated($event)"
+                        (createTenant)="mode = 'register'">
+                    </lib-tenant-login>
+                } @else {
+                    <lib-register
+                        (navigateToLogin)="mode = 'login'">
+                    </lib-register>
+                }
+            </div>
+        </div>
+    `, styles: [".auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2)}.auth-card{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000001a;padding:40px;width:100%;max-width:480px}.logo{display:block;max-width:200px;max-height:80px;margin:0 auto 24px}.app-name{margin:0 0 12px;font-size:28px;font-weight:600;text-align:center;color:#1a202c}.subtitle{margin:0 0 32px;font-size:16px;text-align:center;color:#718096}:host ::ng-deep .tenant-login-dialog,:host ::ng-deep .register-dialog{padding:0;max-width:none}:host ::ng-deep .login-title,:host ::ng-deep .register-title{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: MyEnvironmentModel, decorators: [{
+                    type: Inject,
+                    args: [MyEnvironmentModel]
+                }] }], propDecorators: { providers: [{
+                type: Input
+            }], authenticated: [{
+                type: Output
+            }] } });
+
+class LoginDialogComponent {
     auth;
-    // Component Configuration
-    title = 'Sign In';
-    providers = ['google'];
-    showTenantSelector = true;
-    autoSelectSingleTenant = true;
-    allowTenantCreation = true;
-    // Tenant Selector Labels
-    tenantSelectorTitle = 'Select Organization';
-    tenantSelectorDescription = 'Choose which organization you want to access:';
-    continueButtonText = 'Continue';
-    // Link Labels
-    registerLinkText = "Don't have an account?";
-    registerLinkAction = 'Sign up';
-    createTenantLinkText = "Don't see your organization?";
-    createTenantLinkAction = 'Create New Organization';
-    // Outputs
-    tenantSelected = new EventEmitter();
-    createTenant = new EventEmitter();
-    // Form Fields
+    /**
+     * REQUIRED: Which authentication providers to show in this dialog
+     * @example ['google', 'linkedin', 'emailPassword']
+     */
+    providers = [];
     email = '';
     password = '';
-    // State
     error = '';
     loading = false;
-    useOAuth = true;
+    showPassword = false;
     oauthProviders = [];
-    // Tenant Selection State
-    showingTenantSelector = false;
-    memberships = [];
-    selectedTenantId = null;
-    userName = '';
     constructor(auth) {
         this.auth = auth;
     }
     ngOnInit() {
         if (!this.providers || this.providers.length === 0) {
-            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')) {
-            this.useOAuth = false;
+            this.error = 'Configuration Error: No authentication providers specified. Please pass providers to LoginDialogComponent.';
+            throw new Error('LoginDialogComponent requires providers input. Example: dialogRef.componentInstance.providers = [\'google\', \'emailPassword\']');
         }
+        // Get OAuth providers (excluding emailPassword)
+        this.oauthProviders = this.providers
+            .filter(p => p !== 'emailPassword');
     }
     isProviderEnabled(provider) {
         return this.providers.includes(provider);
@@ -1708,514 +2377,235 @@ class TenantLoginComponent {
         return labels[provider];
     }
     getProviderIcon(provider) {
-        return undefined;
-    }
-    toggleAuthMethod(event) {
-        event.preventDefault();
-        this.useOAuth = !this.useOAuth;
-        this.error = '';
-    }
-    async onEmailLogin() {
-        if (!this.email || !this.password) {
-            this.error = 'Please enter email and password';
-            return;
-        }
-        this.loading = true;
-        this.error = '';
-        try {
-            const result = await this.auth.loginWithEmail(this.email, this.password);
-            if (!result.success) {
-                this.error = result.message || 'Login failed';
-                return;
-            }
-            // Authentication successful, now handle tenant selection
-            await this.handlePostAuthFlow();
-        }
-        catch (err) {
-            this.error = err.message || 'An unexpected error occurred';
-        }
-        finally {
-            this.loading = false;
-        }
-    }
-    async onOAuthLogin(provider) {
-        this.loading = true;
-        this.error = '';
-        try {
-            const result = await this.auth.loginWithProvider(provider);
-            if (!result.success) {
-                this.error = result.message || 'OAuth login failed';
-                return;
-            }
-            // Authentication successful, now handle tenant selection
-            await this.handlePostAuthFlow();
-        }
-        catch (err) {
-            this.error = err.message || 'An unexpected error occurred';
-        }
-        finally {
-            this.loading = false;
-        }
-    }
-    async handlePostAuthFlow() {
-        if (!this.showTenantSelector) {
-            // Tenant selection is disabled, emit event immediately
-            this.tenantSelected.emit({
-                tenantId: '',
-                tenantSlug: '',
-                role: ''
-            });
-            return;
-        }
-        // Fetch user's tenant memberships
-        this.loading = true;
-        try {
-            const result = await this.auth.getTenantMemberships();
-            if (!result.memberships || result.memberships.length === 0) {
-                // User has no tenants, prompt to create one
-                this.error = 'You are not a member of any organization. Please create one.';
-                if (this.allowTenantCreation) {
-                    setTimeout(() => this.createTenant.emit(), 2000);
-                }
-                return;
-            }
-            this.memberships = result.memberships;
-            // Get user name if available
-            const currentUser = this.auth.getCurrentUser();
-            if (currentUser) {
-                this.userName = currentUser.display_name || currentUser.email;
-            }
-            // Auto-select if user has only one tenant
-            if (this.memberships.length === 1 && this.autoSelectSingleTenant) {
-                await this.selectAndContinue(this.memberships[0]);
-            }
-            else {
-                // Show tenant selector
-                this.showingTenantSelector = true;
-            }
-        }
-        catch (err) {
-            this.error = err.message || 'Failed to load organizations';
-        }
-        finally {
-            this.loading = false;
-        }
-    }
-    selectTenantItem(tenantId) {
-        this.selectedTenantId = tenantId;
-    }
-    async onContinueWithTenant() {
-        if (!this.selectedTenantId) {
-            this.error = 'Please select an organization';
-            return;
-        }
-        const membership = this.memberships.find(m => m.tenant_id === this.selectedTenantId);
-        if (!membership) {
-            this.error = 'Selected organization not found';
+        // Platforms can customize icons via CSS classes: .btn-google, .btn-linkedin, etc.
+        return undefined;
+    }
+    async onEmailLogin() {
+        if (!this.email || !this.password) {
+            this.error = 'Please enter email and password';
             return;
         }
-        await this.selectAndContinue(membership);
-    }
-    async selectAndContinue(membership) {
         this.loading = true;
         this.error = '';
         try {
-            const result = await this.auth.selectTenant(membership.tenant_id);
+            const result = await this.auth.loginWithEmail(this.email, this.password);
             if (!result.success) {
-                this.error = result.message || 'Failed to select organization';
-                return;
+                this.error = result.message || 'Login failed';
             }
-            // Emit tenant selected event
-            this.tenantSelected.emit({
-                tenantId: membership.tenant_id,
-                tenantSlug: membership.slug,
-                role: membership.role
-            });
+            // On success, parent component/dialog should close automatically via user$ subscription
         }
         catch (err) {
-            this.error = err.message || 'An unexpected error occurred';
+            this.error = 'An unexpected error occurred';
         }
         finally {
             this.loading = false;
         }
     }
-    formatRole(role) {
-        return role.charAt(0).toUpperCase() + role.slice(1);
-    }
-    formatLastAccessed(dateStr) {
+    async onOAuthLogin(provider) {
+        this.loading = true;
+        this.error = '';
         try {
-            const date = new Date(dateStr);
-            const now = new Date();
-            const diffMs = now.getTime() - date.getTime();
-            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-            if (diffDays === 0)
-                return 'today';
-            if (diffDays === 1)
-                return 'yesterday';
-            if (diffDays < 7)
-                return `${diffDays} days ago`;
-            if (diffDays < 30)
-                return `${Math.floor(diffDays / 7)} weeks ago`;
-            return `${Math.floor(diffDays / 30)} months ago`;
+            const result = await this.auth.loginWithProvider(provider);
+            if (!result.success) {
+                this.error = result.message || 'OAuth login failed';
+            }
+            // On success, parent component/dialog should close automatically via user$ subscription
         }
-        catch {
-            return dateStr;
+        catch (err) {
+            this.error = 'An unexpected error occurred';
+        }
+        finally {
+            this.loading = false;
         }
     }
-    onCreateTenantClick(event) {
+    onRegisterClick(event) {
         event.preventDefault();
-        this.createTenant.emit();
+        // Platforms can override this or listen for a custom event
+        // For now, just emit a console message
+        console.log('Register clicked - platform should handle navigation');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TenantLoginComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TenantLoginComponent, isStandalone: true, selector: "lib-tenant-login", inputs: { title: "title", providers: "providers", showTenantSelector: "showTenantSelector", autoSelectSingleTenant: "autoSelectSingleTenant", allowTenantCreation: "allowTenantCreation", tenantSelectorTitle: "tenantSelectorTitle", tenantSelectorDescription: "tenantSelectorDescription", continueButtonText: "continueButtonText", registerLinkText: "registerLinkText", registerLinkAction: "registerLinkAction", createTenantLinkText: "createTenantLinkText", createTenantLinkAction: "createTenantLinkAction" }, outputs: { tenantSelected: "tenantSelected", createTenant: "createTenant" }, ngImport: i0, template: `
-        <div class="tenant-login-dialog">
-            @if (!showingTenantSelector) {
-                <!-- Step 1: Authentication -->
-                <h2 class="login-title">{{ title }}</h2>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LoginDialogComponent, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: LoginDialogComponent, isStandalone: true, selector: "lib-login-dialog", inputs: { providers: "providers" }, ngImport: i0, template: `
+        <div class="login-dialog">
+            <h2 class="login-title">Sign In</h2>
 
-                <!-- Email/Password Form (if enabled) -->
-                @if (isProviderEnabled('emailPassword') && !useOAuth) {
-                    <form (ngSubmit)="onEmailLogin()" class="email-form">
-                        <div class="form-group">
-                            <input
-                                [(ngModel)]="email"
-                                name="email"
-                                placeholder="Email"
-                                type="email"
-                                required
-                                class="form-control">
-                        </div>
-                        <div class="form-group">
-                            <input
-                                [(ngModel)]="password"
-                                name="password"
-                                placeholder="Password"
-                                type="password"
-                                required
-                                class="form-control">
-                        </div>
+            <!-- Email/Password Form (if enabled) -->
+            @if (isProviderEnabled('emailPassword')) {
+                <form (ngSubmit)="onEmailLogin()" class="email-form">
+                    <div class="form-group">
+                        <input
+                            [(ngModel)]="email"
+                            name="email"
+                            placeholder="Email"
+                            type="email"
+                            required
+                            class="form-control">
+                    </div>
+                    <div class="form-group password-group">
+                        <input
+                            [(ngModel)]="password"
+                            name="password"
+                            placeholder="Password"
+                            [type]="showPassword ? 'text' : 'password'"
+                            required
+                            class="form-control password-input">
                         <button
-                            type="submit"
-                            [disabled]="loading"
-                            class="btn btn-primary btn-block">
-                            {{ loading ? 'Signing in...' : 'Sign in with Email' }}
+                            type="button"
+                            class="password-toggle"
+                            (click)="showPassword = !showPassword"
+                            [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
+                            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
                         </button>
-                    </form>
-
-                    <!-- Divider -->
-                    @if (oauthProviders.length > 0) {
-                        <div class="divider">
-                            <span>OR</span>
-                        </div>
-                    }
-                }
-
-                <!-- OAuth Providers -->
-                @if (oauthProviders.length > 0 && (useOAuth || !isProviderEnabled('emailPassword'))) {
-                    <div class="oauth-buttons">
-                        @for (provider of oauthProviders; track provider) {
-                            <button
-                                type="button"
-                                (click)="onOAuthLogin(provider)"
-                                [disabled]="loading"
-                                class="btn btn-oauth btn-{{ provider }}">
-                                @if (getProviderIcon(provider)) {
-                                    <span class="oauth-icon">
-                                        {{ getProviderIcon(provider) }}
-                                    </span>
-                                }
-                                {{ getProviderLabel(provider) }}
-                            </button>
-                        }
-                    </div>
-
-                    <!-- Switch to Email/Password -->
-                    @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
-                        <div class="switch-method">
-                            <a href="#" (click)="toggleAuthMethod($event)">
-                                {{ useOAuth ? 'Use email/password instead' : 'Use OAuth instead' }}
-                            </a>
-                        </div>
-                    }
-                }
-
-                <!-- Error Message -->
-                @if (error) {
-                    <div class="error-message">
-                        {{ error }}
-                    </div>
-                }
-
-                <!-- Register Link -->
-                @if (allowTenantCreation) {
-                    <div class="register-link">
-                        {{ registerLinkText }}
-                        <a href="#" (click)="onCreateTenantClick($event)">{{ registerLinkAction }}</a>
-                    </div>
-                }
-            } @else {
-                <!-- Step 2: Tenant Selection -->
-                <h2 class="login-title">{{ tenantSelectorTitle }}</h2>
-
-                @if (userName) {
-                    <div class="welcome-message">
-                        Welcome back, <strong>{{ userName }}</strong>!
                     </div>
-                }
+                    <button
+                        type="submit"
+                        [disabled]="loading"
+                        class="btn btn-primary btn-block">
+                        {{ loading ? 'Signing in...' : getProviderLabel('emailPassword') }}
+                    </button>
+                </form>
+            }
 
-                <p class="selector-description">{{ tenantSelectorDescription }}</p>
+            <!-- Divider if both email and OAuth are present -->
+            @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
+                <div class="divider">
+                    <span>OR</span>
+                </div>
+            }
 
-                <div class="tenant-list">
-                    @for (membership of memberships; track membership.tenant_id) {
-                        <div
-                            class="tenant-item"
-                            [class.selected]="selectedTenantId === membership.tenant_id"
-                            (click)="selectTenantItem(membership.tenant_id)">
-                            <div class="tenant-radio">
-                                <input
-                                    type="radio"
-                                    [checked]="selectedTenantId === membership.tenant_id"
-                                    [name]="'tenant-' + membership.tenant_id"
-                                    [id]="'tenant-' + membership.tenant_id">
-                            </div>
-                            <div class="tenant-info">
-                                <div class="tenant-name">{{ membership.name }}</div>
-                                <div class="tenant-meta">
-                                    <span class="tenant-role">{{ formatRole(membership.role) }}</span>
-                                    @if (membership.last_accessed) {
-                                        <span class="tenant-separator">·</span>
-                                        <span class="tenant-last-accessed">
-                                            Last accessed {{ formatLastAccessed(membership.last_accessed) }}
-                                        </span>
-                                    }
-                                </div>
-                            </div>
-                        </div>
+            <!-- OAuth Providers -->
+            @if (oauthProviders.length > 0) {
+                <div class="oauth-buttons">
+                    @for (provider of oauthProviders; track provider) {
+                        <button
+                            (click)="onOAuthLogin(provider)"
+                            [disabled]="loading"
+                            class="btn btn-oauth btn-{{ provider }}">
+                            @if (getProviderIcon(provider)) {
+                                <span class="oauth-icon">
+                                    {{ getProviderIcon(provider) }}
+                                </span>
+                            }
+                            {{ getProviderLabel(provider) }}
+                        </button>
                     }
                 </div>
+            }
 
-                <button
-                    type="button"
-                    (click)="onContinueWithTenant()"
-                    [disabled]="!selectedTenantId || loading"
-                    class="btn btn-primary btn-block">
-                    {{ loading ? 'Loading...' : continueButtonText }}
-                </button>
-
-                <!-- Error Message -->
-                @if (error) {
-                    <div class="error-message">
-                        {{ error }}
-                    </div>
-                }
-
-                <!-- Create New Tenant Link -->
-                @if (allowTenantCreation) {
-                    <div class="create-tenant-link">
-                        {{ createTenantLinkText }}
-                        <a href="#" (click)="onCreateTenantClick($event)">{{ createTenantLinkAction }}</a>
-                    </div>
-                }
+            <!-- Error Message -->
+            @if (error) {
+                <div class="error-message">
+                    {{ error }}
+                </div>
             }
 
-            <!-- Loading Overlay -->
+            <!-- Loading State -->
             @if (loading) {
                 <div class="loading-overlay">
                     <div class="spinner"></div>
                 </div>
             }
+
+            <!-- Register Link -->
+            <div class="register-link">
+                Don't have an account?
+                <a href="#" (click)="onRegisterClick($event)">Sign up</a>
+            </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}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.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}.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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    `, isInline: true, styles: [".login-dialog{padding:24px;max-width:400px;position:relative}.login-title{margin:0 0 24px;font-size:24px;font-weight:500;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}.oauth-icon{font-size:18px}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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.15", ngImport: i0, type: TenantLoginComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LoginDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tenant-login', standalone: true, imports: [CommonModule, FormsModule], template: `
-        <div class="tenant-login-dialog">
-            @if (!showingTenantSelector) {
-                <!-- Step 1: Authentication -->
-                <h2 class="login-title">{{ title }}</h2>
+            args: [{ selector: 'lib-login-dialog', standalone: true, imports: [CommonModule, FormsModule], template: `
+        <div class="login-dialog">
+            <h2 class="login-title">Sign In</h2>
 
-                <!-- Email/Password Form (if enabled) -->
-                @if (isProviderEnabled('emailPassword') && !useOAuth) {
-                    <form (ngSubmit)="onEmailLogin()" class="email-form">
-                        <div class="form-group">
-                            <input
-                                [(ngModel)]="email"
-                                name="email"
-                                placeholder="Email"
-                                type="email"
-                                required
-                                class="form-control">
-                        </div>
-                        <div class="form-group">
-                            <input
-                                [(ngModel)]="password"
-                                name="password"
-                                placeholder="Password"
-                                type="password"
-                                required
-                                class="form-control">
-                        </div>
+            <!-- Email/Password Form (if enabled) -->
+            @if (isProviderEnabled('emailPassword')) {
+                <form (ngSubmit)="onEmailLogin()" class="email-form">
+                    <div class="form-group">
+                        <input
+                            [(ngModel)]="email"
+                            name="email"
+                            placeholder="Email"
+                            type="email"
+                            required
+                            class="form-control">
+                    </div>
+                    <div class="form-group password-group">
+                        <input
+                            [(ngModel)]="password"
+                            name="password"
+                            placeholder="Password"
+                            [type]="showPassword ? 'text' : 'password'"
+                            required
+                            class="form-control password-input">
                         <button
-                            type="submit"
-                            [disabled]="loading"
-                            class="btn btn-primary btn-block">
-                            {{ loading ? 'Signing in...' : 'Sign in with Email' }}
+                            type="button"
+                            class="password-toggle"
+                            (click)="showPassword = !showPassword"
+                            [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
+                            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
                         </button>
-                    </form>
-
-                    <!-- Divider -->
-                    @if (oauthProviders.length > 0) {
-                        <div class="divider">
-                            <span>OR</span>
-                        </div>
-                    }
-                }
-
-                <!-- OAuth Providers -->
-                @if (oauthProviders.length > 0 && (useOAuth || !isProviderEnabled('emailPassword'))) {
-                    <div class="oauth-buttons">
-                        @for (provider of oauthProviders; track provider) {
-                            <button
-                                type="button"
-                                (click)="onOAuthLogin(provider)"
-                                [disabled]="loading"
-                                class="btn btn-oauth btn-{{ provider }}">
-                                @if (getProviderIcon(provider)) {
-                                    <span class="oauth-icon">
-                                        {{ getProviderIcon(provider) }}
-                                    </span>
-                                }
-                                {{ getProviderLabel(provider) }}
-                            </button>
-                        }
-                    </div>
-
-                    <!-- Switch to Email/Password -->
-                    @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
-                        <div class="switch-method">
-                            <a href="#" (click)="toggleAuthMethod($event)">
-                                {{ useOAuth ? 'Use email/password instead' : 'Use OAuth instead' }}
-                            </a>
-                        </div>
-                    }
-                }
-
-                <!-- Error Message -->
-                @if (error) {
-                    <div class="error-message">
-                        {{ error }}
-                    </div>
-                }
-
-                <!-- Register Link -->
-                @if (allowTenantCreation) {
-                    <div class="register-link">
-                        {{ registerLinkText }}
-                        <a href="#" (click)="onCreateTenantClick($event)">{{ registerLinkAction }}</a>
-                    </div>
-                }
-            } @else {
-                <!-- Step 2: Tenant Selection -->
-                <h2 class="login-title">{{ tenantSelectorTitle }}</h2>
-
-                @if (userName) {
-                    <div class="welcome-message">
-                        Welcome back, <strong>{{ userName }}</strong>!
                     </div>
-                }
+                    <button
+                        type="submit"
+                        [disabled]="loading"
+                        class="btn btn-primary btn-block">
+                        {{ loading ? 'Signing in...' : getProviderLabel('emailPassword') }}
+                    </button>
+                </form>
+            }
 
-                <p class="selector-description">{{ tenantSelectorDescription }}</p>
+            <!-- Divider if both email and OAuth are present -->
+            @if (isProviderEnabled('emailPassword') && oauthProviders.length > 0) {
+                <div class="divider">
+                    <span>OR</span>
+                </div>
+            }
 
-                <div class="tenant-list">
-                    @for (membership of memberships; track membership.tenant_id) {
-                        <div
-                            class="tenant-item"
-                            [class.selected]="selectedTenantId === membership.tenant_id"
-                            (click)="selectTenantItem(membership.tenant_id)">
-                            <div class="tenant-radio">
-                                <input
-                                    type="radio"
-                                    [checked]="selectedTenantId === membership.tenant_id"
-                                    [name]="'tenant-' + membership.tenant_id"
-                                    [id]="'tenant-' + membership.tenant_id">
-                            </div>
-                            <div class="tenant-info">
-                                <div class="tenant-name">{{ membership.name }}</div>
-                                <div class="tenant-meta">
-                                    <span class="tenant-role">{{ formatRole(membership.role) }}</span>
-                                    @if (membership.last_accessed) {
-                                        <span class="tenant-separator">·</span>
-                                        <span class="tenant-last-accessed">
-                                            Last accessed {{ formatLastAccessed(membership.last_accessed) }}
-                                        </span>
-                                    }
-                                </div>
-                            </div>
-                        </div>
+            <!-- OAuth Providers -->
+            @if (oauthProviders.length > 0) {
+                <div class="oauth-buttons">
+                    @for (provider of oauthProviders; track provider) {
+                        <button
+                            (click)="onOAuthLogin(provider)"
+                            [disabled]="loading"
+                            class="btn btn-oauth btn-{{ provider }}">
+                            @if (getProviderIcon(provider)) {
+                                <span class="oauth-icon">
+                                    {{ getProviderIcon(provider) }}
+                                </span>
+                            }
+                            {{ getProviderLabel(provider) }}
+                        </button>
                     }
                 </div>
+            }
 
-                <button
-                    type="button"
-                    (click)="onContinueWithTenant()"
-                    [disabled]="!selectedTenantId || loading"
-                    class="btn btn-primary btn-block">
-                    {{ loading ? 'Loading...' : continueButtonText }}
-                </button>
-
-                <!-- Error Message -->
-                @if (error) {
-                    <div class="error-message">
-                        {{ error }}
-                    </div>
-                }
-
-                <!-- Create New Tenant Link -->
-                @if (allowTenantCreation) {
-                    <div class="create-tenant-link">
-                        {{ createTenantLinkText }}
-                        <a href="#" (click)="onCreateTenantClick($event)">{{ createTenantLinkAction }}</a>
-                    </div>
-                }
+            <!-- Error Message -->
+            @if (error) {
+                <div class="error-message">
+                    {{ error }}
+                </div>
             }
 
-            <!-- Loading Overlay -->
+            <!-- Loading State -->
             @if (loading) {
                 <div class="loading-overlay">
                     <div class="spinner"></div>
                 </div>
             }
+
+            <!-- Register Link -->
+            <div class="register-link">
+                Don't have an account?
+                <a href="#" (click)="onRegisterClick($event)">Sign up</a>
+            </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}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box}.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}.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 }], propDecorators: { title: [{
-                type: Input
-            }], providers: [{
-                type: Input
-            }], showTenantSelector: [{
-                type: Input
-            }], autoSelectSingleTenant: [{
-                type: Input
-            }], allowTenantCreation: [{
-                type: Input
-            }], tenantSelectorTitle: [{
-                type: Input
-            }], tenantSelectorDescription: [{
-                type: Input
-            }], continueButtonText: [{
-                type: Input
-            }], registerLinkText: [{
-                type: Input
-            }], registerLinkAction: [{
-                type: Input
-            }], createTenantLinkText: [{
-                type: Input
-            }], createTenantLinkAction: [{
+    `, styles: [".login-dialog{padding:24px;max-width:400px;position:relative}.login-title{margin:0 0 24px;font-size:24px;font-weight:500;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}.oauth-icon{font-size:18px}.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}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }], propDecorators: { providers: [{
                 type: Input
-            }], tenantSelected: [{
-                type: Output
-            }], createTenant: [{
-                type: Output
             }] } });
 
 class TenantRegisterComponent {
@@ -2262,6 +2652,8 @@ class TenantRegisterComponent {
     slugError = '';
     useEmailPassword = false;
     oauthProviders = [];
+    showPassword = false;
+    showConfirmPassword = false;
     constructor(auth) {
         this.auth = auth;
     }
@@ -2559,30 +2951,44 @@ class TenantRegisterComponent {
                             class="form-control">
                     </div>
 
-                    <div class="form-group">
+                    <div class="form-group password-group">
                         <label for="password">Password *</label>
                         <input
                             id="password"
                             [(ngModel)]="password"
                             name="password"
                             placeholder="Create a password"
-                            type="password"
+                            [type]="showPassword ? 'text' : 'password'"
                             required
                             minlength="8"
-                            class="form-control">
+                            class="form-control password-input">
+                        <button
+                            type="button"
+                            class="password-toggle"
+                            (click)="showPassword = !showPassword"
+                            [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
+                            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
+                        </button>
                         <small class="form-hint">At least 8 characters</small>
                     </div>
 
-                    <div class="form-group">
+                    <div class="form-group password-group">
                         <label for="confirmPassword">Confirm Password *</label>
                         <input
                             id="confirmPassword"
                             [(ngModel)]="confirmPassword"
                             name="confirmPassword"
                             placeholder="Confirm your password"
-                            type="password"
+                            [type]="showConfirmPassword ? 'text' : 'password'"
                             required
-                            class="form-control">
+                            class="form-control password-input">
+                        <button
+                            type="button"
+                            class="password-toggle"
+                            (click)="showConfirmPassword = !showConfirmPassword"
+                            [attr.aria-label]="showConfirmPassword ? 'Hide password' : 'Show password'">
+                            {{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
+                        </button>
                     </div>
 
                     <button
@@ -2631,7 +3037,7 @@ class TenantRegisterComponent {
                 <a href="#" (click)="onLoginClick($event)">{{ loginLinkAction }}</a>
             </div>
         </div>
-    `, isInline: true, styles: [".tenant-register-dialog{padding:24px;max-width:500px;position:relative}.register-title{margin:0 0 20px;font-size:24px;font-weight:500;text-align:center}.warning-box{display:flex;gap:12px;padding:16px;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;margin-bottom:24px}.warning-icon{font-size:24px;line-height:1}.warning-content{flex:1}.warning-content strong{display:block;margin-bottom:4px;color:#856404;font-size:14px}.warning-content p{margin:0;color:#856404;font-size:13px;line-height:1.5}.section-header{font-size:16px;font-weight:600;margin:20px 0 12px;padding-bottom:8px;border-bottom:2px solid #e0e0e0;color:#333}.register-form,.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box;transition:border-color .2s}.form-control:focus{outline:none;border-color:#4285f4}.form-control.input-error{border-color:#dc3545}.form-control.input-success{border-color:#28a745}.form-hint{display:block;margin-top:4px;font-size:12px;color:#666}.form-hint .checking{color:#666}.form-hint .available{color:#28a745;font-weight:500}.form-hint .error-text{color:#dc3545}.oauth-section{margin:16px 0}.oauth-description{margin-bottom:12px;font-size:14px;color:#666;text-align:center}.oauth-buttons{display:flex;flex-direction:column;gap:12px}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,opacity .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}.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}.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}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.success-message{margin-top:16px;padding:12px;background:#efe;color:#3a3;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffffff2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.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)}}.loading-text{margin:0;font-size:14px;color:#666}.login-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.login-link a{color:#4285f4;text-decoration:none}.login-link a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    `, isInline: true, styles: [".tenant-register-dialog{padding:24px;max-width:500px;position:relative}.register-title{margin:0 0 20px;font-size:24px;font-weight:500;text-align:center}.warning-box{display:flex;gap:12px;padding:16px;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;margin-bottom:24px}.warning-icon{font-size:24px;line-height:1}.warning-content{flex:1}.warning-content strong{display:block;margin-bottom:4px;color:#856404;font-size:14px}.warning-content p{margin:0;color:#856404;font-size:13px;line-height:1.5}.section-header{font-size:16px;font-weight:600;margin:20px 0 12px;padding-bottom:8px;border-bottom:2px solid #e0e0e0;color:#333}.register-form,.form-group{margin-bottom:16px}.password-group{position:relative}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box;transition:border-color .2s}.password-input{padding-right:45px}.password-toggle{position:absolute;right:8px;top:38px;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}.form-control.input-error{border-color:#dc3545}.form-control.input-success{border-color:#28a745}.form-hint{display:block;margin-top:4px;font-size:12px;color:#666}.form-hint .checking{color:#666}.form-hint .available{color:#28a745;font-weight:500}.form-hint .error-text{color:#dc3545}.oauth-section{margin:16px 0}.oauth-description{margin-bottom:12px;font-size:14px;color:#666;text-align:center}.oauth-buttons{display:flex;flex-direction:column;gap:12px}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,opacity .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}.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}.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}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.success-message{margin-top:16px;padding:12px;background:#efe;color:#3a3;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffffff2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.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)}}.loading-text{margin:0;font-size:14px;color:#666}.login-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.login-link a{color:#4285f4;text-decoration:none}.login-link a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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.15", ngImport: i0, type: TenantRegisterComponent, decorators: [{
             type: Component,
@@ -2756,30 +3162,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                             class="form-control">
                     </div>
 
-                    <div class="form-group">
+                    <div class="form-group password-group">
                         <label for="password">Password *</label>
                         <input
                             id="password"
                             [(ngModel)]="password"
                             name="password"
                             placeholder="Create a password"
-                            type="password"
+                            [type]="showPassword ? 'text' : 'password'"
                             required
                             minlength="8"
-                            class="form-control">
+                            class="form-control password-input">
+                        <button
+                            type="button"
+                            class="password-toggle"
+                            (click)="showPassword = !showPassword"
+                            [attr.aria-label]="showPassword ? 'Hide password' : 'Show password'">
+                            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
+                        </button>
                         <small class="form-hint">At least 8 characters</small>
                     </div>
 
-                    <div class="form-group">
+                    <div class="form-group password-group">
                         <label for="confirmPassword">Confirm Password *</label>
                         <input
                             id="confirmPassword"
                             [(ngModel)]="confirmPassword"
                             name="confirmPassword"
                             placeholder="Confirm your password"
-                            type="password"
+                            [type]="showConfirmPassword ? 'text' : 'password'"
                             required
-                            class="form-control">
+                            class="form-control password-input">
+                        <button
+                            type="button"
+                            class="password-toggle"
+                            (click)="showConfirmPassword = !showConfirmPassword"
+                            [attr.aria-label]="showConfirmPassword ? 'Hide password' : 'Show password'">
+                            {{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
+                        </button>
                     </div>
 
                     <button
@@ -2828,7 +3248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 <a href="#" (click)="onLoginClick($event)">{{ loginLinkAction }}</a>
             </div>
         </div>
-    `, styles: [".tenant-register-dialog{padding:24px;max-width:500px;position:relative}.register-title{margin:0 0 20px;font-size:24px;font-weight:500;text-align:center}.warning-box{display:flex;gap:12px;padding:16px;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;margin-bottom:24px}.warning-icon{font-size:24px;line-height:1}.warning-content{flex:1}.warning-content strong{display:block;margin-bottom:4px;color:#856404;font-size:14px}.warning-content p{margin:0;color:#856404;font-size:13px;line-height:1.5}.section-header{font-size:16px;font-weight:600;margin:20px 0 12px;padding-bottom:8px;border-bottom:2px solid #e0e0e0;color:#333}.register-form,.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box;transition:border-color .2s}.form-control:focus{outline:none;border-color:#4285f4}.form-control.input-error{border-color:#dc3545}.form-control.input-success{border-color:#28a745}.form-hint{display:block;margin-top:4px;font-size:12px;color:#666}.form-hint .checking{color:#666}.form-hint .available{color:#28a745;font-weight:500}.form-hint .error-text{color:#dc3545}.oauth-section{margin:16px 0}.oauth-description{margin-bottom:12px;font-size:14px;color:#666;text-align:center}.oauth-buttons{display:flex;flex-direction:column;gap:12px}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,opacity .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}.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}.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}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.success-message{margin-top:16px;padding:12px;background:#efe;color:#3a3;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffffff2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.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)}}.loading-text{margin:0;font-size:14px;color:#666}.login-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.login-link a{color:#4285f4;text-decoration:none}.login-link a:hover{text-decoration:underline}\n"] }]
+    `, styles: [".tenant-register-dialog{padding:24px;max-width:500px;position:relative}.register-title{margin:0 0 20px;font-size:24px;font-weight:500;text-align:center}.warning-box{display:flex;gap:12px;padding:16px;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;margin-bottom:24px}.warning-icon{font-size:24px;line-height:1}.warning-content{flex:1}.warning-content strong{display:block;margin-bottom:4px;color:#856404;font-size:14px}.warning-content p{margin:0;color:#856404;font-size:13px;line-height:1.5}.section-header{font-size:16px;font-weight:600;margin:20px 0 12px;padding-bottom:8px;border-bottom:2px solid #e0e0e0;color:#333}.register-form,.form-group{margin-bottom:16px}.password-group{position:relative}.form-group label{display:block;margin-bottom:6px;font-size:14px;font-weight:500;color:#333}.form-control{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box;transition:border-color .2s}.password-input{padding-right:45px}.password-toggle{position:absolute;right:8px;top:38px;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}.form-control.input-error{border-color:#dc3545}.form-control.input-success{border-color:#28a745}.form-hint{display:block;margin-top:4px;font-size:12px;color:#666}.form-hint .checking{color:#666}.form-hint .available{color:#28a745;font-weight:500}.form-hint .error-text{color:#dc3545}.oauth-section{margin:16px 0}.oauth-description{margin-bottom:12px;font-size:14px;color:#666;text-align:center}.oauth-buttons{display:flex;flex-direction:column;gap:12px}.btn{padding:12px 24px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,opacity .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}.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}.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}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.success-message{margin-top:16px;padding:12px;background:#efe;color:#3a3;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffffff2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.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)}}.loading-text{margin:0;font-size:14px;color:#666}.login-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.login-link a{color:#4285f4;text-decoration:none}.login-link a:hover{text-decoration:underline}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }], propDecorators: { title: [{
                 type: Input
             }], providers: [{
@@ -2938,7 +3358,7 @@ class TenantLoginDialogComponent {
                 (createTenant)="onCreateTenant()">
             </lib-tenant-login>
         </div>
-    `, isInline: true, styles: [".dialog-wrapper{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TenantLoginComponent, selector: "lib-tenant-login", inputs: ["title", "providers", "showTenantSelector", "autoSelectSingleTenant", "allowTenantCreation", "tenantSelectorTitle", "tenantSelectorDescription", "continueButtonText", "registerLinkText", "registerLinkAction", "createTenantLinkText", "createTenantLinkAction"], outputs: ["tenantSelected", "createTenant"] }] });
+    `, isInline: true, styles: [".dialog-wrapper{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TenantLoginComponent, selector: "lib-tenant-login", inputs: ["title", "providers", "showTenantSelector", "autoSelectSingleTenant", "prefillEmail", "allowTenantCreation", "tenantSelectorTitle", "tenantSelectorDescription", "continueButtonText", "registerLinkText", "registerLinkAction", "createTenantLinkText", "createTenantLinkAction"], outputs: ["tenantSelected", "createTenant"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TenantLoginDialogComponent, decorators: [{
             type: Component,
@@ -3095,5 +3515,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ApiConnectionService, ApiResponse, AuthService, CsrfService, DbService, LoginDialogComponent, MyEnvironmentModel, NgxStoneScriptPhpClientModule, RegisterComponent, SigninStatusService, TenantLoginComponent, TenantLoginDialogComponent, TenantRegisterComponent, TenantRegisterDialogComponent, TokenService, VerifyStatus };
+export { ApiConnectionService, ApiResponse, AuthPageComponent, AuthService, CsrfService, DbService, LoginDialogComponent, MyEnvironmentModel, NgxStoneScriptPhpClientModule, RegisterComponent, SigninStatusService, TenantLoginComponent, TenantLoginDialogComponent, TenantRegisterComponent, TenantRegisterDialogComponent, TokenService, VerifyStatus };
 //# sourceMappingURL=progalaxyelabs-ngx-stonescriptphp-client.mjs.map