/** * @fileoverview Login Modal Component - User Authentication Interface * @version 1.0.0 * @since 2025-08-04 * @lastUpdated 2025-08-04 * @module LoginModal * @description Modal component for user authentication with form validation and accessibility features * @contributors Claude Code Agent * @dependencies Component base class, AuthService, DOMUtils * @requirements REQ-AUTH-012 (Login UI component) * @testCoverage Authentication flow, form validation, accessibility compliance */ import { AuthService } from '../services/AuthService'; import { Component } from './Component'; export interface LoginModalOptions { onSuccess?: (user: any) => void; onCancel?: () => void; showRegisterLink?: boolean; allowGuestMode?: boolean; } /** * Login Modal Component * * @description Provides user authentication interface with form validation, * accessibility features, and error handling. Follows established * modal patterns from the existing codebase. * * @example * ```typescript * const loginModal = new LoginModal({ * onSuccess: (user) => console.log('Logged in:', user), * onCancel: () => console.log('Login cancelled') * }); * loginModal.show(); * ``` * * @since 2025-08-04 * @author Claude Code Agent * @requirements REQ-AUTH-012 (Login modal interface) * @accessibility WCAG 2.1 AA compliant with focus management and screen reader support */ export class LoginModal extends Component { private authService: AuthService; private options: LoginModalOptions; private isVisible: boolean = false; private previousFocus: HTMLElement | null = null; private unsubscribeAuth: (() => void) | null = null; // Form elements private usernameInput: HTMLInputElement | null = null; private passwordInput: HTMLInputElement | null = null; private loginButton: HTMLButtonElement | null = null; private cancelButton: HTMLButtonElement | null = null; private errorContainer: HTMLElement | null = null; private loadingSpinner: HTMLElement | null = null; constructor(options: LoginModalOptions = {}) { // Create modal element if it doesn't exist if (!document.getElementById('login-modal')) { const modalElement = document.createElement('div'); modalElement.id = 'login-modal'; modalElement.className = 'fixed inset-0 z-[10000] hidden'; document.body.appendChild(modalElement); } super('#login-modal'); this.authService = AuthService.getInstance(); this.options = options; } /** * Show the login modal * * @description Displays the login modal with proper focus management * and accessibility announcements. * * @since 2025-08-04 * @author Claude Code Agent * @accessibility Saves focus and announces modal opening to screen readers */ show(): void { if (this.isVisible) return; // Save currently focused element this.previousFocus = document.activeElement as HTMLElement; this.render(); this.bindEvents(); this.mount(); // Show modal with animation this.element.classList.remove('hidden'); // Force reflow for animation this.element.offsetHeight; // Add visible class for animation const overlay = this.element.querySelector('.login-overlay'); const modal = this.element.querySelector('.login-modal'); if (overlay && modal) { overlay.classList.add('opacity-100'); modal.classList.add('scale-100', 'opacity-100'); } // Focus the username input setTimeout(() => { this.usernameInput?.focus(); }, 150); this.isVisible = true; // Announce to screen readers this.announceToScreenReader('Login dialog opened'); } /** * Hide the login modal * * @description Hides the modal with animation and restores focus * * @since 2025-08-04 * @author Claude Code Agent * @accessibility Restores focus to previously focused element */ hide(): void { if (!this.isVisible) return; const overlay = this.element.querySelector('.login-overlay'); const modal = this.element.querySelector('.login-modal'); if (overlay && modal) { overlay.classList.remove('opacity-100'); modal.classList.remove('scale-100', 'opacity-100'); } // Hide after animation setTimeout(() => { this.element.classList.add('hidden'); this.unmount(); // Restore focus if (this.previousFocus) { this.previousFocus.focus(); } }, 300); this.isVisible = false; // Announce to screen readers this.announceToScreenReader('Login dialog closed'); } /** * Render the modal content * * @description Creates the modal HTML structure with form elements, * error handling, and accessibility attributes. * * @since 2025-08-04 * @author Claude Code Agent */ protected render(): void { this.element.innerHTML = `
`; // Cache form elements this.cacheElements(); } /** * Cache form elements for efficient access * * @description Stores references to frequently accessed DOM elements * * @since 2025-08-04 * @author Claude Code Agent */ private cacheElements(): void { this.usernameInput = this.element.querySelector('.username-input') as HTMLInputElement; this.passwordInput = this.element.querySelector('.password-input') as HTMLInputElement; this.loginButton = this.element.querySelector('.login-btn') as HTMLButtonElement; this.cancelButton = this.element.querySelector('.cancel-btn') as HTMLButtonElement; this.errorContainer = this.element.querySelector('.error-container') as HTMLElement; this.loadingSpinner = this.element.querySelector('.loading-spinner') as HTMLElement; } /** * Bind event listeners * * @description Sets up all event listeners for form interaction, * keyboard navigation, and accessibility features. * * @since 2025-08-04 * @author Claude Code Agent * @accessibility Includes keyboard navigation and escape key handling */ protected bindEvents(): void { // Form submission const form = this.element.querySelector('.login-form') as HTMLFormElement; form?.addEventListener('submit', this.handleSubmit.bind(this)); // Login button this.loginButton?.addEventListener('click', this.handleSubmit.bind(this)); // Cancel button this.cancelButton?.addEventListener('click', this.handleCancel.bind(this)); // Password toggle const passwordToggle = this.element.querySelector('.password-toggle') as HTMLButtonElement; passwordToggle?.addEventListener('click', this.togglePasswordVisibility.bind(this)); // Guest mode button const guestButton = this.element.querySelector('.guest-btn') as HTMLButtonElement; guestButton?.addEventListener('click', this.handleGuestMode.bind(this)); // Register link const registerLink = this.element.querySelector('.register-link') as HTMLButtonElement; registerLink?.addEventListener('click', this.handleRegisterLink.bind(this)); // Forgot password link const forgotLink = this.element.querySelector('.forgot-password-link') as HTMLButtonElement; forgotLink?.addEventListener('click', this.handleForgotPassword.bind(this)); // Keyboard navigation document.addEventListener('keydown', this.handleKeyDown.bind(this)); // Click outside to close const overlay = this.element.querySelector('.login-overlay'); overlay?.addEventListener('click', e => { if (e.target === overlay) { this.handleCancel(); } }); // Subscribe to auth state changes this.unsubscribeAuth = this.authService.subscribe(this.handleAuthStateChange.bind(this)); // Input validation this.usernameInput?.addEventListener('input', this.validateForm.bind(this)); this.passwordInput?.addEventListener('input', this.validateForm.bind(this)); } /** * Handle form submission * * @description Processes login form submission with validation * and error handling. * * @param {Event} event - Form or button click event * * @since 2025-08-04 * @author Claude Code Agent */ private async handleSubmit(event: Event): Promise { event.preventDefault(); if (!this.usernameInput || !this.passwordInput) { this.showError('Form elements not found'); return; } const username = this.usernameInput.value.trim(); const password = this.passwordInput.value; // Client-side validation if (!username) { this.showError('Please enter your username or email'); this.usernameInput.focus(); return; } if (!password) { this.showError('Please enter your password'); this.passwordInput.focus(); return; } // Show loading state this.setLoadingState(true); this.hideError(); try { const success = await this.authService.login({ username, password }); if (success) { const authState = this.authService.getAuthState(); this.announceToScreenReader(`Welcome back, ${authState.user?.username || 'user'}!`); // Call success callback if (this.options.onSuccess) { this.options.onSuccess(authState.user); } // Hide modal this.hide(); } // Error handling is done through auth state subscription } catch (error) { console.error('Login error:', error); this.showError('An unexpected error occurred. Please try again.'); } finally { this.setLoadingState(false); } } /** * Handle cancel button click * * @description Closes the modal and calls the cancel callback * * @since 2025-08-04 * @author Claude Code Agent */ private handleCancel(): void { if (this.options.onCancel) { this.options.onCancel(); } this.hide(); } /** * Handle keyboard navigation * * @description Manages keyboard shortcuts and navigation within the modal * * @param {KeyboardEvent} event - Keyboard event * * @since 2025-08-04 * @author Claude Code Agent * @accessibility Supports escape key and tab navigation */ private handleKeyDown(event: KeyboardEvent): void { if (!this.isVisible) return; switch (event.key) { case 'Escape': event.preventDefault(); this.handleCancel(); break; case 'Enter': // Allow form submission via Enter key if (event.target !== this.loginButton) { event.preventDefault(); this.handleSubmit(event); } break; case 'Tab': // Trap focus within modal this.trapFocus(event); break; } } /** * Trap focus within the modal * * @description Ensures tab navigation stays within the modal for accessibility * * @param {KeyboardEvent} event - Tab key event * * @since 2025-08-04 * @author Claude Code Agent * @accessibility Implements focus trap for screen reader users */ private trapFocus(event: KeyboardEvent): void { const focusableElements = this.element.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ) as NodeListOf; const firstElement = focusableElements[0]; const lastElement = focusableElements[focusableElements.length - 1]; if (event.shiftKey) { if (document.activeElement === firstElement) { event.preventDefault(); lastElement.focus(); } } else { if (document.activeElement === lastElement) { event.preventDefault(); firstElement.focus(); } } } /** * Toggle password field visibility * * @description Shows/hides password text with proper accessibility attributes * * @since 2025-08-04 * @author Claude Code Agent * @accessibility Updates aria-label and visual indicators */ private togglePasswordVisibility(): void { if (!this.passwordInput) return; const isPassword = this.passwordInput.type === 'password'; const toggle = this.element.querySelector('.password-toggle') as HTMLButtonElement; const showIcon = toggle?.querySelector('.password-show'); const hideIcon = toggle?.querySelector('.password-hide'); if (isPassword) { this.passwordInput.type = 'text'; toggle?.setAttribute('aria-label', 'Hide password'); showIcon?.classList.add('hidden'); hideIcon?.classList.remove('hidden'); } else { this.passwordInput.type = 'password'; toggle?.setAttribute('aria-label', 'Show password'); showIcon?.classList.remove('hidden'); hideIcon?.classList.add('hidden'); } } /** * Handle guest mode selection * * @description Allows users to continue without authentication * * @since 2025-08-04 * @author Claude Code Agent */ private handleGuestMode(): void { this.announceToScreenReader('Continuing as guest user'); if (this.options.onSuccess) { this.options.onSuccess(null); // Null indicates guest mode } this.hide(); } /** * Handle register link click * * @description Placeholder for registration functionality * * @since 2025-08-04 * @author Claude Code Agent */ private handleRegisterLink(): void { // TODO: Implement registration modal or redirect console.log('Registration requested'); this.announceToScreenReader('Registration feature coming soon'); } /** * Handle forgot password link * * @description Placeholder for password reset functionality * * @since 2025-08-04 * @author Claude Code Agent */ private handleForgotPassword(): void { // TODO: Implement password reset modal or redirect console.log('Password reset requested'); this.announceToScreenReader('Password reset feature coming soon'); } /** * Handle authentication state changes * * @description Responds to auth service state updates * * @param {object} authState - Current authentication state * * @since 2025-08-04 * @author Claude Code Agent */ private handleAuthStateChange(authState: any): void { if (authState.error) { this.showError(authState.error); this.setLoadingState(false); } if (authState.isLoading) { this.setLoadingState(true); } else { this.setLoadingState(false); } } /** * Show error message * * @description Displays error message with accessibility announcement * * @param {string} message - Error message to display * * @since 2025-08-04 * @author Claude Code Agent * @accessibility Announces errors to screen readers */ private showError(message: string): void { if (!this.errorContainer) return; const errorMessage = this.errorContainer.querySelector('.error-message'); if (errorMessage) { errorMessage.textContent = message; } this.errorContainer.classList.remove('hidden'); this.announceToScreenReader(`Error: ${message}`); } /** * Hide error message * * @description Hides the error container * * @since 2025-08-04 * @author Claude Code Agent */ private hideError(): void { this.errorContainer?.classList.add('hidden'); } /** * Set loading state * * @description Updates UI to show/hide loading indicators * * @param {boolean} loading - Whether to show loading state * * @since 2025-08-04 * @author Claude Code Agent */ private setLoadingState(loading: boolean): void { if (!this.loginButton) return; const btnText = this.loginButton.querySelector('.btn-text'); const spinner = this.loginButton.querySelector('.loading-spinner'); if (loading) { this.loginButton.disabled = true; btnText && (btnText.textContent = 'Signing In...'); spinner?.classList.remove('hidden'); } else { this.loginButton.disabled = false; btnText && (btnText.textContent = 'Sign In'); spinner?.classList.add('hidden'); } } /** * Validate form inputs * * @description Performs real-time form validation * * @since 2025-08-04 * @author Claude Code Agent */ private validateForm(): void { if (!this.usernameInput || !this.passwordInput || !this.loginButton) return; const username = this.usernameInput.value.trim(); const password = this.passwordInput.value; const isValid = username.length > 0 && password.length > 0; this.loginButton.disabled = !isValid; } /** * Announce message to screen readers * * @description Creates temporary element for screen reader announcements * * @param {string} message - Message to announce * * @since 2025-08-04 * @author Claude Code Agent * @accessibility Provides screen reader feedback */ private announceToScreenReader(message: string): void { const announcement = document.createElement('div'); announcement.setAttribute('aria-live', 'polite'); announcement.setAttribute('aria-atomic', 'true'); announcement.className = 'sr-only'; announcement.textContent = message; document.body.appendChild(announcement); setTimeout(() => { document.body.removeChild(announcement); }, 1000); } /** * Clean up event listeners and resources * * @description Removes event listeners when component is unmounted * * @since 2025-08-04 * @author Claude Code Agent */ protected onUnmount(): void { document.removeEventListener('keydown', this.handleKeyDown.bind(this)); this.unsubscribeAuth?.(); } /** * Static factory method for showing login modal * * @description Convenience method for creating and showing login modal * * @param {LoginModalOptions} options - Modal configuration options * @returns {LoginModal} Modal instance * * @example * ```typescript * LoginModal.show({ * onSuccess: (user) => console.log('Logged in:', user), * showRegisterLink: true * }); * ``` * * @since 2025-08-04 * @author Claude Code Agent */ static show(options: LoginModalOptions = {}): LoginModal { const modal = new LoginModal(options); modal.show(); return modal; } }