Snippet 18: Render Authentication GUI

#![allow(unused)]
fn main() {
pub fn render_auth_dialog(&mut self, ctx: &egui::Context) {
    egui::CentralPanel::default().show(ctx, |ui| {
        ui.vertical_centered(|ui| {
            ui.add_space(75.0);
            ui.heading("Secure Notes");
            ui.add_space(20.0);

            if self.is_authenticating {
                ui.label("Processing... Please wait");
                ui.spinner();

                // Show elapsed time
                if let Some(start_time) = self.auth_start_time {
                    let elapsed = start_time.elapsed().as_secs_f64();
                    ui.label(format!("Elapsed: {:.1}s", elapsed));

                    // Show warning if taking too long
                    if elapsed > 10.0 {
                        ui.colored_label(
                            egui::Color32::YELLOW,
                            "This is taking longer than expected...",
                        );
                    }

                    if elapsed > 30.0 {
                        ui.colored_label(
                            egui::Color32::RED,
                            "Something may be wrong. Try restarting the application.",
                        );
                        if ui.button("Cancel Authentication").clicked() {
                            self.is_authenticating = false;
                            self.auth_receiver = None;
                            self.auth_start_time = None;
                        }
                    }
                }

                // Request repaint to update timer
                ctx.request_repaint_after(std::time::Duration::from_millis(100));
            } else {
                let screen_width = ui.available_width();

                // Mode selection - calculate actual widget width and center it
                ui.horizontal(|ui| {
                    // Calculate actual text widths
                    let login_text_size = ui
                        .fonts(|f| {
                            f.layout_no_wrap(
                                "Login".to_string(),
                                egui::FontId::default(),
                                egui::Color32::WHITE,
                            )
                        })
                        .size();

                    let register_text_size = ui
                        .fonts(|f| {
                            f.layout_no_wrap(
                                "Register".to_string(),
                                egui::FontId::default(),
                                egui::Color32::WHITE,
                            )
                        })
                        .size();

                    let spacing = ui.spacing().item_spacing.x;
                    let total_width = login_text_size.x + register_text_size.x + spacing;

                    let padding = (screen_width - total_width) / 2.0;

                    ui.add_space(padding.max(0.0));
                    ui.selectable_value(&mut self.auth_mode, AuthMode::Login, "Login");
                    ui.selectable_value(&mut self.auth_mode, AuthMode::Register, "Register");
                });

                ui.add_space(20.0);

                // Username input
                ui.label("Username:");
                ui.add(
                    egui::TextEdit::singleline(&mut self.username_input).desired_width(200.0),
                );

                ui.add_space(10.0);

                // Password input
                ui.label("Password:");
                let password_response = ui.add(
                    egui::TextEdit::singleline(&mut self.password_input)
                        .password(true)
                        .desired_width(200.0),
                );

                // Confirm password for registration
                if self.auth_mode == AuthMode::Register {
                    ui.add_space(10.0);
                    ui.label("Confirm Password:");
                    ui.add(
                        egui::TextEdit::singleline(&mut self.confirm_password_input)
                            .password(true)
                            .desired_width(200.0),
                    );
                }

                ui.add_space(20.0);

                // Submit button
                let button_text = match self.auth_mode {
                    AuthMode::Login => "Login",
                    AuthMode::Register => "Register",
                };

                let can_submit = !self.username_input.trim().is_empty()
                    && !self.password_input.is_empty()
                    && self.password_input.len() >= 6
                    && (self.auth_mode == AuthMode::Login
                        || self.password_input == self.confirm_password_input);

                if ui
                    .add_enabled(can_submit, egui::Button::new(button_text))
                    .clicked()
                    || (password_response.lost_focus()
                        && ui.input(|i| i.key_pressed(egui::Key::Enter))
                        && can_submit)
                {
                    if self.auth_mode == AuthMode::Register
                        && self.password_input != self.confirm_password_input
                    {
                        self.authentication_error = Some("Passwords do not match".to_string());
                    } else if self.password_input.len() < 6 {
                        self.authentication_error =
                            Some("Password must be at least 6 characters long".to_string());
                    } else {
                        let username = self.username_input.clone();
                        let password = self.password_input.clone();
                        let is_registration = self.auth_mode == AuthMode::Register;
                        self.start_authentication(username, password, is_registration);
                    }
                }

                // Show validation errors
                if self.auth_mode == AuthMode::Register
                    && !self.password_input.is_empty()
                    && !self.confirm_password_input.is_empty()
                    && self.password_input != self.confirm_password_input
                {
                    ui.add_space(10.0);
                    ui.colored_label(egui::Color32::YELLOW, "Passwords do not match");
                }

                if !self.password_input.is_empty() && self.password_input.len() < 6 {
                    ui.add_space(10.0);
                    ui.colored_label(
                        egui::Color32::YELLOW,
                        "Password must be at least 6 characters",
                    );
                }

                // Show authentication error
                if let Some(error) = &self.authentication_error {
                    ui.add_space(10.0);
                    ui.colored_label(egui::Color32::RED, error);
                }

                // Show user count for context
                if let Some(ref user_manager) = self.user_manager {
                    let screen_height = ui.available_height();
                    ui.add_space(screen_height - 45.0);
                    ui.separator();
                    ui.small(format!(
                        "Registered users: {}",
                        user_manager.get_user_count()
                    ));
                    ui.small(format!("Current time: {}", self.get_current_time()));
                }
            }
        });
    });
}
}

Comprehensive Authentication User Interface with Advanced UX Design

This sophisticated function implements a complete authentication user interface that combines security, usability, and visual design excellence. It demonstrates advanced GUI programming techniques, real-time validation, responsive design principles, and comprehensive user experience optimization for secure authentication workflows.

Detailed Authentication UI Architecture Analysis

Function Signature and UI Framework Integration:

#![allow(unused)]
fn main() {
pub fn render_auth_dialog(&mut self, ctx: &egui::Context)
}

This function serves as the primary authentication interface with several key characteristics:

Mutable Self Reference: Uses &mut self to manage authentication state and user input
Context Integration: Takes egui context for complete UI framework integration
Stateful Rendering: Manages complex UI state across multiple authentication scenarios
Event Handling: Handles user interactions and input validation in real-time
Responsive Design: Adapts to different screen sizes and user interface contexts

Central Panel Layout and Visual Hierarchy:

#![allow(unused)]
fn main() {
egui::CentralPanel::default().show(ctx, |ui| {
    ui.vertical_centered(|ui| {
        ui.add_space(75.0);
        ui.heading("Secure Notes");
        ui.add_space(20.0);
}

The layout system implements sophisticated visual design principles:

Central Panel Usage: Utilizes full available screen space for authentication interface
Vertical Centering: Centers all content vertically for balanced visual presentation
Strategic Spacing: Uses carefully calculated spacing (75.0, 20.0) for optimal visual hierarchy
Brand Presentation: Prominently displays application name as primary heading
Professional Appearance: Creates clean, professional authentication interface

Authentication State Management and Dynamic UI:

#![allow(unused)]
fn main() {
if self.is_authenticating {
    ui.label("Processing... Please wait");
    ui.spinner();
}

The state-driven UI system provides comprehensive user feedback:

State-Responsive Interface: Adapts interface based on current authentication state
Clear Communication: Provides unambiguous status messages to users
Visual Indicators: Uses animated spinner to indicate ongoing processing
User Expectation Management: Sets appropriate expectations for processing duration
Anxiety Reduction: Reduces user anxiety through clear status communication

Real-Time Performance Monitoring and User Feedback:

#![allow(unused)]
fn main() {
if let Some(start_time) = self.auth_start_time {
    let elapsed = start_time.elapsed().as_secs_f64();
    ui.label(format!("Elapsed: {:.1}s", elapsed));
}

The performance monitoring system provides transparent feedback:

Real-Time Updates: Continuously displays elapsed authentication time
Performance Transparency: Gives users insight into system performance
Precision Display: Shows time with appropriate precision (0.1 second)
User Confidence: Builds confidence by showing active system operation
Debugging Aid: Helps identify performance issues during authentication

Progressive Warning System with Escalating Urgency:

#![allow(unused)]
fn main() {
if elapsed > 10.0 {
    ui.colored_label(egui::Color32::YELLOW, "This is taking longer than expected...");
}
if elapsed > 30.0 {
    ui.colored_label(egui::Color32::RED, "Something may be wrong. Try restarting the application.");
    if ui.button("Cancel Authentication").clicked() {
        self.is_authenticating = false;
        self.auth_receiver = None;
        self.auth_start_time = None;
    }
}
}

The warning system implements sophisticated user guidance:

Escalating Warnings: Provides increasingly urgent warnings as time progresses
Color Psychology: Uses yellow for caution and red for urgent situations
Actionable Guidance: Provides specific recommendations for user action
Escape Mechanism: Offers users ability to cancel stuck authentication
System Recovery: Includes proper state cleanup when users cancel

Continuous UI Updates and Responsiveness:

#![allow(unused)]
fn main() {
ctx.request_repaint_after(std::time::Duration::from_millis(100));
}

The update system ensures smooth user experience:

High Refresh Rate: Updates UI every 100ms for smooth timing display
Responsive Feedback: Ensures users see immediate feedback for actions
Performance Balance: Balances update frequency with system performance
Battery Consideration: Uses reasonable frequency to conserve battery
Professional Feel: Provides smooth, professional user experience

Dynamic Layout Calculation and Responsive Design:

#![allow(unused)]
fn main() {
let screen_width = ui.available_width();
ui.horizontal(|ui| {
    let login_text_size = ui.fonts(|f| {
        f.layout_no_wrap("Login".to_string(), egui::FontId::default(), egui::Color32::WHITE)
    }).size();
    let register_text_size = ui.fonts(|f| {
        f.layout_no_wrap("Register".to_string(), egui::FontId::default(), egui::Color32::WHITE)
    }).size();
    let spacing = ui.spacing().item_spacing.x;
    let total_width = login_text_size.x + register_text_size.x + spacing;
    let padding = (screen_width - total_width) / 2.0;
    ui.add_space(padding.max(0.0));
}

The responsive layout system demonstrates advanced UI programming:

Dynamic Width Calculation: Calculates actual text widths for precise centering
Font Metrics Integration: Uses font system to measure actual text dimensions
Responsive Centering: Centers elements based on actual content size
Cross-Platform Compatibility: Works across different font systems and DPI settings
Professional Alignment: Ensures perfect visual alignment regardless of content

Authentication Mode Selection Interface:

#![allow(unused)]
fn main() {
ui.selectable_value(&mut self.auth_mode, AuthMode::Login, "Login");
ui.selectable_value(&mut self.auth_mode, AuthMode::Register, "Register");
}

The mode selection system provides intuitive user control:

Clear Mode Distinction: Clearly separates login and registration modes
Visual Selection: Uses selectable values for clear mode indication
State Management: Properly manages authentication mode state
User Control: Gives users clear control over authentication type
Consistent Interface: Maintains consistent interface patterns

Input Field Management and Validation:

#![allow(unused)]
fn main() {
ui.label("Username:");
ui.add(egui::TextEdit::singleline(&mut self.username_input).desired_width(200.0));
ui.add_space(10.0);
ui.label("Password:");
let password_response = ui.add(
    egui::TextEdit::singleline(&mut self.password_input)
        .password(true)
        .desired_width(200.0),
);
}

The input system implements comprehensive form design:

Clear Labeling: Provides clear, accessible labels for all input fields
Consistent Sizing: Uses consistent width (200.0) for visual alignment
Password Security: Uses password mode for secure password entry
Response Capture: Captures input responses for event handling
Accessibility: Implements proper label-input relationships

Conditional Registration Fields:

#![allow(unused)]
fn main() {
if self.auth_mode == AuthMode::Register {
    ui.add_space(10.0);
    ui.label("Confirm Password:");
    ui.add(
        egui::TextEdit::singleline(&mut self.confirm_password_input)
            .password(true)
            .desired_width(200.0),
    );
}
}

The conditional field system provides mode-specific interface:

Context-Sensitive Fields: Shows additional fields only when needed
Registration Support: Provides password confirmation for registration
Consistent Styling: Maintains consistent styling across all fields
User Experience: Reduces interface complexity when not needed
Security Enhancement: Adds password confirmation for registration security

Advanced Form Validation and User Feedback:

#![allow(unused)]
fn main() {
let can_submit = !self.username_input.trim().is_empty()
    && !self.password_input.is_empty()
    && self.password_input.len() >= 6
    && (self.auth_mode == AuthMode::Login
        || self.password_input == self.confirm_password_input);
}

The validation system implements comprehensive input checking:

Multi-Criteria Validation: Checks multiple validation criteria simultaneously
Real-Time Feedback: Provides immediate validation feedback
Mode-Specific Rules: Applies different validation rules for login vs registration
Security Requirements: Enforces minimum password length requirements
User Guidance: Enables/disables submit button based on validation state

Submit Button and Keyboard Interaction:

#![allow(unused)]
fn main() {
if ui.add_enabled(can_submit, egui::Button::new(button_text)).clicked()
    || (password_response.lost_focus()
        && ui.input(|i| i.key_pressed(egui::Key::Enter))
        && can_submit)
}

The submission system provides multiple interaction methods:

Button Interaction: Traditional button-based form submission
Keyboard Shortcuts: Enter key support for efficient interaction
Validation Integration: Only allows submission when validation passes
Focus Management: Handles focus changes appropriately
Accessibility: Supports both mouse and keyboard interaction patterns

Real-Time Validation Feedback:

#![allow(unused)]
fn main() {
if self.auth_mode == AuthMode::Register
    && !self.password_input.is_empty()
    && !self.confirm_password_input.is_empty()
    && self.password_input != self.confirm_password_input
{
    ui.add_space(10.0);
    ui.colored_label(egui::Color32::YELLOW, "Passwords do not match");
}
}

The feedback system provides immediate user guidance:

Real-Time Validation: Shows validation errors as users type
Color-Coded Feedback: Uses color to indicate validation status
Specific Error Messages: Provides specific, actionable error messages
Non-Intrusive Display: Shows errors without disrupting user workflow
Progressive Enhancement: Enhances form with real-time feedback

Error Display and User Communication:

#![allow(unused)]
fn main() {
if let Some(error) = &self.authentication_error {
    ui.add_space(10.0);
    ui.colored_label(egui::Color32::RED, error);
}
}

The error display system provides clear error communication:

Prominent Error Display: Uses red color for clear error indication
Specific Error Messages: Shows specific error information to users
Consistent Positioning: Places errors in consistent, expected locations
User Guidance: Helps users understand and resolve authentication issues
Professional Appearance: Maintains professional appearance even during errors

System Status and Context Information:

#![allow(unused)]
fn main() {
if let Some(ref user_manager) = self.user_manager {
    let screen_height = ui.available_height();
    ui.add_space(screen_height - 45.0);
    ui.separator();
    ui.small(format!("Registered users: {}", user_manager.get_user_count()));
    ui.small(format!("Current time: {}", self.get_current_time()));
}
}

The status system provides helpful context information:

User Count Display: Shows number of registered users for context
Time Display: Provides current time for user reference
Dynamic Positioning: Uses available height for optimal placement
Visual Separation: Uses separator for clear section distinction
Subtle Information: Uses small text for non-intrusive information display

Advanced UX Design Principles: The interface implements several sophisticated UX principles:

Progressive Disclosure:

Mode-Specific Fields: Shows only relevant fields for current mode
Conditional Validation: Applies validation rules appropriate to context
Escalating Warnings: Provides increasingly detailed warnings over time
Context-Sensitive Help: Shows help information when most relevant

Accessibility and Usability:

Clear Labels: All input fields have clear, descriptive labels
Keyboard Navigation: Full keyboard navigation support
Color Accessibility: Uses color coding with sufficient contrast
Screen Reader Support: Implements proper accessibility relationships
Consistent Interaction: Maintains consistent interaction patterns

Performance and Responsiveness:

Efficient Rendering: Optimized rendering for smooth performance
Real-Time Updates: Immediate feedback for all user interactions
Resource Management: Efficient use of system resources
Battery Consideration: Optimized update frequency for battery life
Cross-Platform Performance: Consistent performance across platforms

This comprehensive authentication interface demonstrates advanced GUI programming techniques while maintaining excellent user experience and security standards.

Keyboard shortcuts

Rust Notes App

Snippet 18: Render Authentication GUI

Comprehensive Authentication User Interface with Advanced UX Design

Detailed Authentication UI Architecture Analysis