# User Authentication UI Adaptations ## Overview This document describes the necessary UI changes and adaptations required to implement the magic link-based user authentication process described in `doc_userauth_process_concept.md`. **Last Updated**: Based on codebase analysis of current frontend implementation. ## Current Frontend State ### Existing Pages 1. **`frontend_agents/public/login.html`** - Contains login form with username/password fields - Has buttons for Microsoft and Google authentication - Has registration link - **Missing**: Password reset button 2. **`frontend_agents/public/register.html`** - Contains registration form with: - Username field - Password field (required) - Confirm password field (required) - Email field - Full name field - Language selector - **Needs modification**: Remove password fields, add email-only registration 3. **`frontend_agents/public/js/security/auth.js`** - Contains `setupRegisterPage()` function - Contains `validateRegistrationForm()` function that requires password - Contains email validation logic - **Needs modification**: Remove password validation, add shared email validation function 4. **`frontend_agents/public/js/shared/apiCalls.js`** - Contains `register()` function that sends password - **Missing**: Password reset request and reset password API calls ## Required UI Changes ### 1. Login Page (`frontend_agents/public/login.html`) #### Changes Required: - Add "Password Reset" button/link below the login form - Button should link to `/password-reset-request.html` - Style should match existing button styles (use `btn` class with appropriate variant) #### Implementation: ```html
Passwort zurücksetzen
``` #### Styling Considerations: - Use existing CSS classes from `htmlparts/styles.css` - Match styling with registration link - Ensure responsive design matches login page layout ### 2. Registration Page (`frontend_agents/public/register.html`) #### Changes Required: - **Remove** password and confirm password fields - **Keep** username, email, fullName, language fields - Update form validation to not require password - Update success message to indicate email will be sent - Add spam folder reminder message #### Implementation: ```html

Nach der Registrierung erhalten Sie eine E-Mail mit einem Link zum Setzen Ihres Passworts.

Bitte prüfen Sie auch Ihren Spam-Ordner, falls Sie keine E-Mail erhalten.

``` #### JavaScript Changes (`frontend_agents/public/js/security/auth.js`): - Update `validateRegistrationForm()` to remove password validation - Update `setupRegisterPage()` to handle no-password registration - Create shared `validateEmailFormat()` function for reuse ### 3. New Page: Password Reset Request (`frontend_agents/public/password-reset-request.html`) #### Purpose: Allow users to request a password reset by entering their email address. #### Structure: - Similar layout to `register.html` - Single email input field - Submit button - Link back to login page - Success/error message area #### Implementation: ```html PowerOn - Passwort zurücksetzen

Passwort zurücksetzen

Zurück zum Login

``` #### JavaScript Module (`frontend_agents/public/js/security/passwordResetRequest.js`): - Handle form submission - Validate email format using shared function from `auth.js` - Call password reset request API - Show generic success message - Redirect to login page after showing message ### 4. New Page: Password Reset (`frontend_agents/public/reset.html`) #### Purpose: Allow users to set a new password using the token from the magic link. #### Structure: - Similar layout to `register.html` - Password field (with strength indicator) - Confirm password field - Submit button - Extract token from URL parameter (`?token=`) - Success/error message area #### Implementation: ```html PowerOn - Neues Passwort setzen

Neues Passwort setzen

Zurück zum Login

``` #### JavaScript Module (`frontend_agents/public/js/security/reset.js`): - Extract token from URL parameter - Validate token format (UUID) - Handle form submission - Validate password strength (min 8 chars, match requirements from config) - Validate password confirmation matches - Call password reset API - Show success message with spam folder reminder - Redirect to login page after 3 seconds ### 5. API Calls (`frontend_agents/public/js/shared/apiCalls.js`) #### New Functions Required: 1. **`requestPasswordReset(email)`** ```javascript requestPasswordReset: async function(email) { try { return await privateApi.post('/api/local/password-reset-request', { email }); } catch (error) { ui.log.error('Password reset request error:', error); throw error; } } ``` 2. **`resetPassword(token, password)`** ```javascript resetPassword: async function(token, password) { try { return await privateApi.post('/api/local/password-reset', { token, password }); } catch (error) { ui.log.error('Password reset error:', error); throw error; } } ``` 3. **Update `register()` function** - Remove password from request body - Update to handle new registration flow (no password required) ### 6. Shared Email Validation (`frontend_agents/public/js/security/auth.js`) #### New Function: ```javascript /** * Validates email format * @param {string} email - Email address to validate * @returns {boolean} - True if valid, false otherwise */ export function validateEmailFormat(email) { if (!email) return false; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return emailRegex.test(email.trim()); } ``` #### Usage: - Used by registration form - Used by password reset request form - Ensures consistent email validation across the application ## UI/UX Considerations ### Error Handling 1. **Registration Errors**: - Username already exists → Show error on username field - Email already exists → Show generic success (security: don't reveal email exists) - Email sending fails → Show generic success (don't reveal email issues) 2. **Password Reset Request Errors**: - Invalid email format → Show error on email field - Email not found → Show generic success (security: don't reveal email doesn't exist) - Rate limiting → Show error message 3. **Password Reset Errors**: - Invalid/expired token → Show error message, link back to password reset request - Password too weak → Show specific requirements - Password mismatch → Show error on confirm password field ### Success Messages 1. **Registration Success**: ``` "Registrierung erfolgreich! Bitte prüfen Sie Ihre E-Mail, um Ihr Passwort zu setzen. Falls Sie keine E-Mail erhalten, prüfen Sie bitte auch Ihren Spam-Ordner." ``` 2. **Password Reset Request Success**: ``` "Falls ein Konto mit dieser E-Mail-Adresse existiert, wurde ein Reset-Link gesendet. Bitte prüfen Sie Ihre E-Mail und auch Ihren Spam-Ordner." ``` 3. **Password Reset Success**: ``` "Passwort erfolgreich gesetzt! Sie werden zum Login weitergeleitet..." ``` ### Accessibility - All form fields should have proper labels - Error messages should be associated with form fields using ARIA attributes - Success messages should be announced to screen readers - Form validation should provide clear, actionable feedback ### Responsive Design - All pages should work on mobile devices - Form layouts should adapt to smaller screens - Buttons should be appropriately sized for touch interfaces - Error messages should be readable on all screen sizes ## Testing Checklist ### Registration Flow - [ ] User can register without password - [ ] Email validation works correctly - [ ] Success message displays correctly - [ ] Redirect to login works - [ ] Error handling for duplicate username - [ ] Error handling for duplicate email (should show generic success) ### Password Reset Request Flow - [ ] User can access password reset request page from login - [ ] Email validation works correctly - [ ] Success message displays correctly - [ ] Redirect to login works - [ ] Error handling for invalid email format - [ ] Error handling for rate limiting ### Password Reset Flow - [ ] User can access reset page with valid token - [ ] Token extraction from URL works - [ ] Password validation works correctly - [ ] Password confirmation validation works - [ ] Success message displays correctly - [ ] Redirect to login works after 3 seconds - [ ] Error handling for invalid token - [ ] Error handling for expired token - [ ] Error handling for weak password ### Integration Testing - [ ] End-to-end registration flow works - [ ] End-to-end password reset flow works - [ ] Email links work correctly - [ ] Token expiration handling works - [ ] Multiple reset requests invalidate old tokens ## Implementation Order 1. **Backend Changes First** (prerequisites): - Add resetToken fields to UserInDB model - Implement password reset endpoints - Implement email sending functionality 2. **Frontend API Layer**: - Add password reset API calls to `apiCalls.js` - Update registration API call 3. **Frontend Pages**: - Create `password-reset-request.html` - Create `reset.html` - Update `login.html` (add reset button) - Update `register.html` (remove password fields) 4. **Frontend JavaScript**: - Create `passwordResetRequest.js` - Create `reset.js` - Update `auth.js` (remove password validation, add email validation function) - Update `register.js` if needed 5. **Testing**: - Test each flow independently - Test integration between frontend and backend - Test error scenarios - Test edge cases ## Notes - All text should be in German to match existing UI (`login.html` uses German) - CSS classes should match existing patterns from `htmlparts/styles.css` - Form validation should use existing patterns from `auth.js` - Error handling should use existing patterns from `auth.js` (showFieldError, clearFieldError) - Success messages should use existing patterns (showSuccessMessage) - API calls should use existing patterns from `apiCalls.js` (privateApi.post, handleResponse)