@progalaxyelabs/ngx-stonescriptphp-client 1.3.1 → 1.5.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';
@@ -165,10 +166,23 @@ class MyEnvironmentModel {
      */
     platformCode = '';
     /**
-     * Accounts platform URL for centralized authentication
+     * Accounts platform URL for centralized authentication (single-server mode)
      * @example 'https://accounts.progalaxyelabs.com'
+     * @deprecated Use authServers for multi-server support
      */
     accountsUrl = '';
+    /**
+     * Multiple authentication servers configuration
+     * Enables platforms to authenticate against different identity providers
+     * @example
+     * ```typescript
+     * authServers: {
+     *   customer: { url: 'https://auth.progalaxyelabs.com', default: true },
+     *   employee: { url: 'https://admin-auth.progalaxyelabs.com' }
+     * }
+     * ```
+     */
+    authServers;
     firebase = {
         projectId: '',
         appId: '',
@@ -194,6 +208,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;
 }
 
 /**
@@ -577,15 +596,157 @@ class AuthService {
     signinStatus;
     environment;
     USER_STORAGE_KEY = 'progalaxyapi_user';
+    ACTIVE_AUTH_SERVER_KEY = 'progalaxyapi_active_auth_server';
     // Observable user state
     userSubject = new BehaviorSubject(null);
     user$ = this.userSubject.asObservable();
+    // Current active auth server name (for multi-server mode)
+    activeAuthServer = null;
     constructor(tokens, signinStatus, environment) {
         this.tokens = tokens;
         this.signinStatus = signinStatus;
         this.environment = environment;
         // Restore user from localStorage on initialization
         this.restoreUser();
+        // Restore active auth server
+        this.restoreActiveAuthServer();
+    }
+    // ===== Multi-Server Support Methods =====
+    /**
+     * Get the current accounts URL based on configuration
+     * Supports both single-server (accountsUrl) and multi-server (authServers) modes
+     * @param serverName - Optional server name for multi-server mode
+     */
+    getAccountsUrl(serverName) {
+        // Multi-server mode
+        if (this.environment.authServers && Object.keys(this.environment.authServers).length > 0) {
+            const targetServer = serverName || this.activeAuthServer || this.getDefaultAuthServer();
+            if (!targetServer) {
+                throw new Error('No auth server specified and no default server configured');
+            }
+            const serverConfig = this.environment.authServers[targetServer];
+            if (!serverConfig) {
+                throw new Error(`Auth server '${targetServer}' not found in configuration`);
+            }
+            return serverConfig.url;
+        }
+        // Single-server mode (backward compatibility)
+        if (this.environment.accountsUrl) {
+            return this.environment.accountsUrl;
+        }
+        throw new Error('No authentication server configured. Set either accountsUrl or authServers in environment config.');
+    }
+    /**
+     * Get the default auth server name
+     */
+    getDefaultAuthServer() {
+        if (!this.environment.authServers) {
+            return null;
+        }
+        // Find server marked as default
+        for (const [name, config] of Object.entries(this.environment.authServers)) {
+            if (config.default) {
+                return name;
+            }
+        }
+        // If no default is marked, use the first server
+        const firstServer = Object.keys(this.environment.authServers)[0];
+        return firstServer || null;
+    }
+    /**
+     * Restore active auth server from localStorage
+     */
+    restoreActiveAuthServer() {
+        try {
+            const savedServer = localStorage.getItem(this.ACTIVE_AUTH_SERVER_KEY);
+            if (savedServer && this.environment.authServers?.[savedServer]) {
+                this.activeAuthServer = savedServer;
+            }
+            else {
+                // Set to default if saved server is invalid
+                this.activeAuthServer = this.getDefaultAuthServer();
+            }
+        }
+        catch (error) {
+            console.error('Failed to restore active auth server:', error);
+            this.activeAuthServer = this.getDefaultAuthServer();
+        }
+    }
+    /**
+     * Save active auth server to localStorage
+     */
+    saveActiveAuthServer(serverName) {
+        try {
+            localStorage.setItem(this.ACTIVE_AUTH_SERVER_KEY, serverName);
+            this.activeAuthServer = serverName;
+        }
+        catch (error) {
+            console.error('Failed to save active auth server:', error);
+        }
+    }
+    /**
+     * Get available auth servers
+     * @returns Array of server names or empty array if using single-server mode
+     */
+    getAvailableAuthServers() {
+        if (!this.environment.authServers) {
+            return [];
+        }
+        return Object.keys(this.environment.authServers);
+    }
+    /**
+     * Get current active auth server name
+     * @returns Server name or null if using single-server mode
+     */
+    getActiveAuthServer() {
+        return this.activeAuthServer;
+    }
+    /**
+     * Switch to a different auth server
+     * @param serverName - Name of the server to switch to
+     * @throws Error if server not found in configuration
+     */
+    switchAuthServer(serverName) {
+        if (!this.environment.authServers) {
+            throw new Error('Multi-server mode not configured. Use authServers in environment config.');
+        }
+        if (!this.environment.authServers[serverName]) {
+            throw new Error(`Auth server '${serverName}' not found in configuration`);
+        }
+        this.saveActiveAuthServer(serverName);
+    }
+    /**
+     * Get auth server configuration
+     * @param serverName - Optional server name (uses active server if not specified)
+     */
+    getAuthServerConfig(serverName) {
+        if (!this.environment.authServers) {
+            return null;
+        }
+        const targetServer = serverName || this.activeAuthServer || this.getDefaultAuthServer();
+        if (!targetServer) {
+            return null;
+        }
+        return this.environment.authServers[targetServer] || null;
+    }
+    /**
+     * Check if multi-server mode is enabled
+     */
+    isMultiServerMode() {
+        return !!(this.environment.authServers && Object.keys(this.environment.authServers).length > 0);
+    }
+    /**
+     * Hash UUID to numeric ID for backward compatibility
+     * Converts UUID string to a consistent numeric ID for legacy code
+     */
+    hashUUID(uuid) {
+        let hash = 0;
+        for (let i = 0; i < uuid.length; i++) {
+            const char = uuid.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash; // Convert to 32bit integer
+        }
+        return Math.abs(hash);
     }
     /**
      * Restore user from localStorage
@@ -622,15 +783,19 @@ class AuthService {
      * Update user subject and persist to localStorage
      */
     updateUser(user) {
-        this.updateUser(user);
+        this.userSubject.next(user);
         this.saveUser(user);
     }
     /**
      * Login with email and password
+     * @param email - User email
+     * @param password - User password
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
      */
-    async loginWithEmail(email, password) {
+    async loginWithEmail(email, password, serverName) {
         try {
-            const response = await fetch(`${this.environment.accountsUrl}/api/auth/login`, {
+            const accountsUrl = this.getAccountsUrl(serverName);
+            const response = await fetch(`${accountsUrl}/api/auth/login`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 credentials: 'include', // Include cookies for refresh token
@@ -644,8 +809,17 @@ class AuthService {
             if (data.success && data.access_token) {
                 this.tokens.setAccessToken(data.access_token);
                 this.signinStatus.setSigninStatus(true);
-                this.updateUser(data.user);
-                return { success: true, user: data.user };
+                // Normalize user object to handle both response formats
+                const normalizedUser = {
+                    user_id: data.user.user_id ?? (data.user.id ? this.hashUUID(data.user.id) : 0),
+                    id: data.user.id ?? String(data.user.user_id),
+                    email: data.user.email,
+                    display_name: data.user.display_name ?? data.user.email.split('@')[0],
+                    photo_url: data.user.photo_url,
+                    is_email_verified: data.user.is_email_verified ?? false
+                };
+                this.updateUser(normalizedUser);
+                return { success: true, user: normalizedUser };
             }
             return {
                 success: false,
@@ -661,55 +835,71 @@ class AuthService {
     }
     /**
      * Login with Google OAuth (popup window)
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
      */
-    async loginWithGoogle() {
-        return this.loginWithOAuth('google');
+    async loginWithGoogle(serverName) {
+        return this.loginWithOAuth('google', serverName);
     }
     /**
      * Login with GitHub OAuth (popup window)
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
      */
-    async loginWithGitHub() {
-        return this.loginWithOAuth('github');
+    async loginWithGitHub(serverName) {
+        return this.loginWithOAuth('github', serverName);
     }
     /**
      * Login with LinkedIn OAuth (popup window)
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
      */
-    async loginWithLinkedIn() {
-        return this.loginWithOAuth('linkedin');
+    async loginWithLinkedIn(serverName) {
+        return this.loginWithOAuth('linkedin', serverName);
     }
     /**
      * Login with Apple OAuth (popup window)
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
      */
-    async loginWithApple() {
-        return this.loginWithOAuth('apple');
+    async loginWithApple(serverName) {
+        return this.loginWithOAuth('apple', serverName);
     }
     /**
      * Login with Microsoft OAuth (popup window)
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
+     */
+    async loginWithMicrosoft(serverName) {
+        return this.loginWithOAuth('microsoft', serverName);
+    }
+    /**
+     * Login with Zoho OAuth (popup window)
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
      */
-    async loginWithMicrosoft() {
-        return this.loginWithOAuth('microsoft');
+    async loginWithZoho(serverName) {
+        return this.loginWithOAuth('zoho', serverName);
     }
     /**
      * Generic provider-based login (supports all OAuth providers)
      * @param provider - The provider identifier
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
      */
-    async loginWithProvider(provider) {
+    async loginWithProvider(provider, serverName) {
         if (provider === 'emailPassword') {
             throw new Error('Use loginWithEmail() for email/password authentication');
         }
-        return this.loginWithOAuth(provider);
+        return this.loginWithOAuth(provider, serverName);
     }
     /**
      * Generic OAuth login handler
      * Opens popup window and listens for postMessage
+     * @param provider - OAuth provider name
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
      */
-    async loginWithOAuth(provider) {
+    async loginWithOAuth(provider, serverName) {
         return new Promise((resolve) => {
             const width = 500;
             const height = 600;
             const left = (window.screen.width - width) / 2;
             const top = (window.screen.height - height) / 2;
-            const oauthUrl = `${this.environment.accountsUrl}/oauth/${provider}?` +
+            const accountsUrl = this.getAccountsUrl(serverName);
+            const oauthUrl = `${accountsUrl}/oauth/${provider}?` +
                 `platform=${this.environment.platformCode}&` +
                 `mode=popup`;
             const popup = window.open(oauthUrl, `${provider}_login`, `width=${width},height=${height},left=${left},top=${top}`);
@@ -723,18 +913,27 @@ class AuthService {
             // Listen for message from popup
             const messageHandler = (event) => {
                 // Verify origin
-                if (event.origin !== new URL(this.environment.accountsUrl).origin) {
+                if (event.origin !== new URL(accountsUrl).origin) {
                     return;
                 }
                 if (event.data.type === 'oauth_success') {
                     this.tokens.setAccessToken(event.data.access_token);
                     this.signinStatus.setSigninStatus(true);
-                    this.updateUser(event.data.user);
+                    // Normalize user object to handle both response formats
+                    const normalizedUser = {
+                        user_id: event.data.user.user_id ?? (event.data.user.id ? this.hashUUID(event.data.user.id) : 0),
+                        id: event.data.user.id ?? String(event.data.user.user_id),
+                        email: event.data.user.email,
+                        display_name: event.data.user.display_name ?? event.data.user.email.split('@')[0],
+                        photo_url: event.data.user.photo_url,
+                        is_email_verified: event.data.user.is_email_verified ?? false
+                    };
+                    this.updateUser(normalizedUser);
                     window.removeEventListener('message', messageHandler);
                     popup.close();
                     resolve({
                         success: true,
-                        user: event.data.user
+                        user: normalizedUser
                     });
                 }
                 else if (event.data.type === 'oauth_error') {
@@ -762,10 +961,15 @@ class AuthService {
     }
     /**
      * Register new user
+     * @param email - User email
+     * @param password - User password
+     * @param displayName - Display name
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
      */
-    async register(email, password, displayName) {
+    async register(email, password, displayName, serverName) {
         try {
-            const response = await fetch(`${this.environment.accountsUrl}/api/auth/register`, {
+            const accountsUrl = this.getAccountsUrl(serverName);
+            const response = await fetch(`${accountsUrl}/api/auth/register`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 credentials: 'include',
@@ -780,10 +984,19 @@ class AuthService {
             if (data.success && data.access_token) {
                 this.tokens.setAccessToken(data.access_token);
                 this.signinStatus.setSigninStatus(true);
-                this.updateUser(data.user);
+                // Normalize user object to handle both response formats
+                const normalizedUser = {
+                    user_id: data.user.user_id ?? (data.user.id ? this.hashUUID(data.user.id) : 0),
+                    id: data.user.id ?? String(data.user.user_id),
+                    email: data.user.email,
+                    display_name: data.user.display_name ?? data.user.email.split('@')[0],
+                    photo_url: data.user.photo_url,
+                    is_email_verified: data.user.is_email_verified ?? false
+                };
+                this.updateUser(normalizedUser);
                 return {
                     success: true,
-                    user: data.user,
+                    user: normalizedUser,
                     message: data.needs_verification ? 'Please verify your email' : undefined
                 };
             }
@@ -801,12 +1014,14 @@ class AuthService {
     }
     /**
      * Sign out user
+     * @param serverName - Optional: Specify which auth server to logout from (for multi-server mode)
      */
-    async signout() {
+    async signout(serverName) {
         try {
             const refreshToken = this.tokens.getRefreshToken();
             if (refreshToken) {
-                await fetch(`${this.environment.accountsUrl}/api/auth/logout`, {
+                const accountsUrl = this.getAccountsUrl(serverName);
+                await fetch(`${accountsUrl}/api/auth/logout`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json'
@@ -829,15 +1044,17 @@ class AuthService {
     }
     /**
      * Check for active session (call on app init)
+     * @param serverName - Optional: Specify which auth server to check (for multi-server mode)
      */
-    async checkSession() {
+    async checkSession(serverName) {
         if (this.tokens.hasValidAccessToken()) {
             this.signinStatus.setSigninStatus(true);
             return true;
         }
         // Try to refresh using httpOnly cookie
         try {
-            const response = await fetch(`${this.environment.accountsUrl}/api/auth/refresh`, {
+            const accountsUrl = this.getAccountsUrl(serverName);
+            const response = await fetch(`${accountsUrl}/api/auth/refresh`, {
                 method: 'POST',
                 credentials: 'include'
             });
@@ -848,7 +1065,18 @@ class AuthService {
             const data = await response.json();
             if (data.access_token) {
                 this.tokens.setAccessToken(data.access_token);
-                this.updateUser(data.user);
+                // Normalize user object to handle both response formats
+                if (data.user) {
+                    const normalizedUser = {
+                        user_id: data.user.user_id ?? (data.user.id ? this.hashUUID(data.user.id) : 0),
+                        id: data.user.id ?? String(data.user.user_id),
+                        email: data.user.email,
+                        display_name: data.user.display_name ?? data.user.email.split('@')[0],
+                        photo_url: data.user.photo_url,
+                        is_email_verified: data.user.is_email_verified ?? false
+                    };
+                    this.updateUser(normalizedUser);
+                }
                 this.signinStatus.setSigninStatus(true);
                 return true;
             }
@@ -883,7 +1111,8 @@ class AuthService {
                 return await this.registerTenantWithOAuth(data.tenantName, data.tenantSlug, data.provider);
             }
             // Email/password registration
-            const response = await fetch(`${this.environment.accountsUrl}/api/auth/register-tenant`, {
+            const accountsUrl = this.getAccountsUrl();
+            const response = await fetch(`${accountsUrl}/api/auth/register-tenant`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 credentials: 'include',
@@ -902,7 +1131,16 @@ class AuthService {
                 this.tokens.setAccessToken(result.access_token);
                 this.signinStatus.setSigninStatus(true);
                 if (result.user) {
-                    this.updateUser(result.user);
+                    // Normalize user object to handle both response formats
+                    const normalizedUser = {
+                        user_id: result.user.user_id ?? (result.user.id ? this.hashUUID(result.user.id) : 0),
+                        id: result.user.id ?? String(result.user.user_id),
+                        email: result.user.email,
+                        display_name: result.user.display_name ?? result.user.email.split('@')[0],
+                        photo_url: result.user.photo_url,
+                        is_email_verified: result.user.is_email_verified ?? false
+                    };
+                    this.updateUser(normalizedUser);
                 }
             }
             return result;
@@ -925,7 +1163,8 @@ class AuthService {
             const left = (window.screen.width - width) / 2;
             const top = (window.screen.height - height) / 2;
             // Build OAuth URL with tenant registration params
-            const oauthUrl = `${this.environment.accountsUrl}/oauth/${provider}?` +
+            const accountsUrl = this.getAccountsUrl();
+            const oauthUrl = `${accountsUrl}/oauth/${provider}?` +
                 `platform=${this.environment.platformCode}&` +
                 `mode=popup&` +
                 `action=register_tenant&` +
@@ -942,7 +1181,7 @@ class AuthService {
             // Listen for message from popup
             const messageHandler = (event) => {
                 // Verify origin
-                if (event.origin !== new URL(this.environment.accountsUrl).origin) {
+                if (event.origin !== new URL(accountsUrl).origin) {
                     return;
                 }
                 if (event.data.type === 'tenant_register_success') {
@@ -952,7 +1191,16 @@ class AuthService {
                         this.signinStatus.setSigninStatus(true);
                     }
                     if (event.data.user) {
-                        this.updateUser(event.data.user);
+                        // Normalize user object to handle both response formats
+                        const normalizedUser = {
+                            user_id: event.data.user.user_id ?? (event.data.user.id ? this.hashUUID(event.data.user.id) : 0),
+                            id: event.data.user.id ?? String(event.data.user.user_id),
+                            email: event.data.user.email,
+                            display_name: event.data.user.display_name ?? event.data.user.email.split('@')[0],
+                            photo_url: event.data.user.photo_url,
+                            is_email_verified: event.data.user.is_email_verified ?? false
+                        };
+                        this.updateUser(normalizedUser);
                     }
                     window.removeEventListener('message', messageHandler);
                     popup.close();
@@ -987,10 +1235,12 @@ class AuthService {
     }
     /**
      * Get all tenant memberships for the authenticated user
+     * @param serverName - Optional: Specify which auth server to query (for multi-server mode)
      */
-    async getTenantMemberships() {
+    async getTenantMemberships(serverName) {
         try {
-            const response = await fetch(`${this.environment.accountsUrl}/api/auth/memberships`, {
+            const accountsUrl = this.getAccountsUrl(serverName);
+            const response = await fetch(`${accountsUrl}/api/auth/memberships`, {
                 method: 'GET',
                 headers: {
                     'Authorization': `Bearer ${this.tokens.getAccessToken()}`,
@@ -1010,10 +1260,13 @@ class AuthService {
     /**
      * Select a tenant for the current session
      * Updates the JWT token with tenant context
+     * @param tenantId - Tenant ID to select
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
      */
-    async selectTenant(tenantId) {
+    async selectTenant(tenantId, serverName) {
         try {
-            const response = await fetch(`${this.environment.accountsUrl}/api/auth/select-tenant`, {
+            const accountsUrl = this.getAccountsUrl(serverName);
+            const response = await fetch(`${accountsUrl}/api/auth/select-tenant`, {
                 method: 'POST',
                 headers: {
                     'Authorization': `Bearer ${this.tokens.getAccessToken()}`,
@@ -1044,10 +1297,13 @@ class AuthService {
     }
     /**
      * Check if a tenant slug is available
+     * @param slug - Tenant slug to check
+     * @param serverName - Optional: Specify which auth server to query (for multi-server mode)
      */
-    async checkTenantSlugAvailable(slug) {
+    async checkTenantSlugAvailable(slug, serverName) {
         try {
-            const response = await fetch(`${this.environment.accountsUrl}/api/auth/check-tenant-slug/${slug}`, {
+            const accountsUrl = this.getAccountsUrl(serverName);
+            const response = await fetch(`${accountsUrl}/api/auth/check-tenant-slug/${slug}`, {
                 method: 'GET',
                 headers: { 'Content-Type': 'application/json' }
             });
@@ -1130,9 +1386,10 @@ class AuthService {
     /**
      * @deprecated Check if user exists by calling /api/auth/check-email endpoint
      */
-    async getUserProfile(email) {
+    async getUserProfile(email, serverName) {
         try {
-            const response = await fetch(`${this.environment.accountsUrl}/api/auth/check-email`, {
+            const accountsUrl = this.getAccountsUrl(serverName);
+            const response = await fetch(`${accountsUrl}/api/auth/check-email`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ email })
@@ -1146,10 +1403,13 @@ class AuthService {
     }
     /**
      * Check if user has completed onboarding (has a tenant)
+     * @param identityId - User identity ID
+     * @param serverName - Optional: Specify which auth server to query (for multi-server mode)
      */
-    async checkOnboardingStatus(identityId) {
+    async checkOnboardingStatus(identityId, serverName) {
         try {
-            const response = await fetch(`${this.environment.accountsUrl}/api/auth/onboarding/status?platform_code=${this.environment.platformCode}&identity_id=${identityId}`, {
+            const accountsUrl = this.getAccountsUrl(serverName);
+            const response = await fetch(`${accountsUrl}/api/auth/onboarding/status?platform_code=${this.environment.platformCode}&identity_id=${identityId}`, {
                 method: 'GET',
                 headers: { 'Content-Type': 'application/json' },
                 credentials: 'include'
@@ -1165,14 +1425,18 @@ class AuthService {
     }
     /**
      * Complete tenant onboarding (create tenant with country + org name)
+     * @param countryCode - Country code
+     * @param tenantName - Tenant organization name
+     * @param serverName - Optional: Specify which auth server to use (for multi-server mode)
      */
-    async completeTenantOnboarding(countryCode, tenantName) {
+    async completeTenantOnboarding(countryCode, tenantName, serverName) {
         try {
             const accessToken = this.tokens.getAccessToken();
             if (!accessToken) {
                 throw new Error('Not authenticated');
             }
-            const response = await fetch(`${this.environment.accountsUrl}/api/auth/register-tenant`, {
+            const accountsUrl = this.getAccountsUrl(serverName);
+            const response = await fetch(`${accountsUrl}/api/auth/register-tenant`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -1251,29 +1515,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);
@@ -1285,13 +1579,21 @@ class LoginDialogComponent {
             apple: 'Sign in with Apple',
             microsoft: 'Sign in with Microsoft',
             github: 'Sign in with GitHub',
+            zoho: 'Sign in with Zoho',
             emailPassword: 'Sign in with Email'
         };
         return labels[provider];
     }
     getProviderIcon(provider) {
-        // Platforms can customize icons via CSS classes: .btn-google, .btn-linkedin, etc.
-        return undefined;
+        const icons = {
+            zoho: '🔶'
+        };
+        return icons[provider];
+    }
+    toggleAuthMethod(event) {
+        event.preventDefault();
+        this.useOAuth = !this.useOAuth;
+        this.error = '';
     }
     async onEmailLogin() {
         if (!this.email || !this.password) {
@@ -1304,11 +1606,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;
@@ -1321,194 +1625,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}.btn-zoho{background-color:#f0483e;color:#fff;border:1px solid #d63b32}.btn-zoho:hover{background-color:#d63b32}.oauth-icon{font-size:18px}.switch-method{margin-top:12px;text-align:center;font-size:14px}.switch-method a{color:#4285f4;text-decoration:none}.switch-method a:hover{text-decoration:underline}.tenant-list{margin-bottom:20px;display:flex;flex-direction:column;gap:12px}.tenant-item{display:flex;align-items:flex-start;gap:12px;padding:16px;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s}.tenant-item:hover{border-color:#4285f4;background:#f8f9ff}.tenant-item.selected{border-color:#4285f4;background:#e8f0fe}.tenant-radio{flex-shrink:0;padding-top:2px}.tenant-radio input[type=radio]{width:18px;height:18px;cursor:pointer}.tenant-info{flex:1}.tenant-name{font-size:16px;font-weight:500;color:#333;margin-bottom:4px}.tenant-meta{font-size:13px;color:#666}.tenant-role{font-weight:500;color:#4285f4}.tenant-separator{margin:0 6px}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #4285f4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.register-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.register-link a{color:#4285f4;text-decoration:none}.register-link a:hover{text-decoration:underline}.create-tenant-link{margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0;text-align:center;font-size:14px;color:#666}.create-tenant-link a{color:#4285f4;text-decoration:none;font-weight:500}.create-tenant-link a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "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}.btn-zoho{background-color:#f0483e;color:#fff;border:1px solid #d63b32}.btn-zoho:hover{background-color:#d63b32}.oauth-icon{font-size:18px}.switch-method{margin-top:12px;text-align:center;font-size:14px}.switch-method a{color:#4285f4;text-decoration:none}.switch-method a:hover{text-decoration:underline}.tenant-list{margin-bottom:20px;display:flex;flex-direction:column;gap:12px}.tenant-item{display:flex;align-items:flex-start;gap:12px;padding:16px;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;transition:all .2s}.tenant-item:hover{border-color:#4285f4;background:#f8f9ff}.tenant-item.selected{border-color:#4285f4;background:#e8f0fe}.tenant-radio{flex-shrink:0;padding-top:2px}.tenant-radio input[type=radio]{width:18px;height:18px;cursor:pointer}.tenant-info{flex:1}.tenant-name{font-size:16px;font-weight:500;color:#333;margin-bottom:4px}.tenant-meta{font-size:13px;color:#666}.tenant-role{font-weight:500;color:#4285f4}.tenant-separator{margin:0 6px}.error-message{margin-top:16px;padding:12px;background:#fee;color:#c33;border-radius:4px;font-size:14px}.loading-overlay{position:absolute;inset:0;background:#fffc;display:flex;align-items:center;justify-content:center}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #4285f4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.register-link{margin-top:16px;text-align:center;font-size:14px;color:#666}.register-link a{color:#4285f4;text-decoration:none}.register-link a:hover{text-decoration:underline}.create-tenant-link{margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0;text-align:center;font-size:14px;color:#666}.create-tenant-link a{color:#4285f4;text-decoration:none;font-weight:500}.create-tenant-link a:hover{text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [{ type: AuthService }], 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 = '';
@@ -1516,8 +2125,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
@@ -1544,14 +2158,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) {
@@ -1563,16 +2203,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
@@ -1597,30 +2271,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
@@ -1632,7 +2320,7 @@ class RegisterComponent {
             </form>
 
             <!-- Error Message -->
-            @if (error) {
+            @if (error && !showAccountLinkPrompt) {
                 <div class="error-message">
                     {{ error }}
                 </div>
@@ -1653,12 +2341,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,
@@ -1666,7 +2354,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
@@ -1691,30 +2402,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
@@ -1726,7 +2451,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>
@@ -1747,60 +2472,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);
@@ -1812,519 +2634,241 @@ class TenantLoginComponent {
             apple: 'Sign in with Apple',
             microsoft: 'Sign in with Microsoft',
             github: 'Sign in with GitHub',
+            zoho: 'Sign in with Zoho',
             emailPassword: 'Sign in with Email'
         };
         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 {
@@ -2371,6 +2915,8 @@ class TenantRegisterComponent {
     slugError = '';
     useEmailPassword = false;
     oauthProviders = [];
+    showPassword = false;
+    showConfirmPassword = false;
     constructor(auth) {
         this.auth = auth;
     }
@@ -2395,6 +2941,7 @@ class TenantRegisterComponent {
             apple: 'Sign up with Apple',
             microsoft: 'Sign up with Microsoft',
             github: 'Sign up with GitHub',
+            zoho: 'Sign up with Zoho',
             emailPassword: 'Sign up with Email'
         };
         return labels[provider];
@@ -2668,30 +3215,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
@@ -2740,7 +3301,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,
@@ -2865,30 +3426,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
@@ -2937,7 +3512,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: [{
@@ -3047,7 +3622,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,
@@ -3204,5 +3779,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