Authentication UI
Relevant source files
The following files were used as context for generating this wiki page:
The Authentication UI provides the entry point for users and administrators to interact with the MediGuard AI platform. Its primary purpose is to manage secure access through user registration and login workflows, ensuring that users are routed to the appropriate interfaces (Chat or Admin Dashboard) based on their assigned roles.
Architecturally, the authentication system is built on a React-based frontend using a "Split Screen" design philosophy. It utilizes a centralized AuthProvider to manage global session state and employs higher-order components for route protection. The interface is designed with a "Clinical Intelligence" aesthetic, utilizing high-contrast typography and medical-themed color palettes to establish trust and professional clarity.
Sources: frontend/src/components/auth/AuthLayout.jsx, frontend/src/App.jsx:19-75, frontend/src/styles/variables.css:1-10
Architecture and Layout Structure
The UI follows a consistent layout pattern defined in the AuthLayout component. This component divides the viewport into two primary panels: a branding panel and a form panel.
Layout Components
- AuthLayout: A grid-based wrapper that implements a two-column layout. The left column (
auth-branding) contains promotional and educational content about the platform, while the right column (auth-form-panel) hosts the interactive forms. - Branding Panel: Displays the "MediGuard AI" logo, high-level features (Real-time Detection, ML-Powered Analysis, HIPAA Compliance), and decorative background elements.
- Form Panel: A container that centers the specific authentication form (
LoginFormorSignupForm) and handles responsive padding.
Sources: frontend/src/components/auth/AuthLayout.jsx:4-100, frontend/src/components/auth/AuthLayout.css:7-130
Visual Design System
The UI utilizes a comprehensive CSS variable system to maintain consistency. It uses "Cabinet Grotesk" for display headings and "Satoshi" for body text. The primary color is a deep teal (--color-primary-500: #14b8a6), which is associated with medical trust.
Sources: frontend/src/styles/variables.css:13-110
User Authentication Flows
The system supports two main authentication flows: Login and Signup. These flows interact with the useAuth hook to perform API calls and update the application's global state.
Login Flow
The LoginForm captures user credentials (email and password). Upon successful authentication, the system performs role-based redirection.
Registration Flow
The SignupForm handles new account creation. It requires full name, username, email, and password. Upon success, users are redirected to the login page with a success message.
Sources: frontend/src/components/auth/SignupForm.jsx:19-35
Role-Based Route Protection
The application uses specialized route components in App.jsx to enforce access control and prevent unauthorized access to sensitive areas like the Admin Dashboard.
| Route Component | Condition | Action if False |
|---|---|---|
ProtectedRoute | isAuthenticated is true | Redirect to /login |
AdminRoute | isAuthenticated is true AND user.role === 'admin' | Redirect to /login or /chat |
PublicRoute | isAuthenticated is false | Redirect to /admin/home or /chat |
Sources: frontend/src/App.jsx:19-61
Form UI Elements and Feedback
The forms use standard Input and Button components styled via AuthForm.css. They provide immediate feedback to the user through banners and state transitions.
User Feedback Mechanisms
- Error Banners: Displayed at the top of the form when API calls fail (e.g., "An unexpected error occurred"). These use a shaking animation (
shakeX) to draw attention. - Loading States: Submit buttons transition to a loading state during API requests to prevent double-submissions.
- Success Banners: Used in the signup process to confirm account creation.
Sources: frontend/src/components/auth/AuthForm.css:13-68, frontend/src/components/auth/SignupForm.jsx:40-45
Form Layout Pattern
CSS Styling and Animations
The Authentication UI utilizes sophisticated CSS animations to create a "production-grade" feel.
| Animation | Usage | Effect |
|---|---|---|
fadeInUp | Layout Panels | Elements slide up from the bottom on load |
slideInLeft | Branding Content | Features and logos slide in from the left |
shakeX | Error Banner | Horizontal shake to indicate validation failure |
float | Decorations | Subtle movement for background radial gradients |
Sources: frontend/src/components/auth/AuthLayout.css:108-140, frontend/src/components/auth/AuthForm.css:26-38
The Authentication UI effectively bridges the gap between secure access control and a high-quality user experience. By leveraging role-based routing and a consistent, medical-themed design language, it ensures that both general users and administrators can access their respective tools securely and intuitively.