Confirm?

Are you sure you want to proceed?
M
Matthew Hearn

Login Page Design

Clone & Customize via AI

This component implements a professional MudBlazor Login Page using a responsive, two-panel design. It features MudTextField inputs for email and password, a toggle for password visibility, and client-side form validation using DataAnnotations.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented This component provides a complete client-side structure for a user login interface. * Two-panel responsive layout, adapting to stacked view on small screens. * Login form capturing Email and Password. * Toggleable password visibility feature. * Client-side validation using C#'s `Validator.TryValidateObject` against `DataAnnotations`. * Navigation redirection upon successful (simulated) login. ## Key components This implementation relies heavily on core MudBlazor components for styling and functionality: * `MudPaper` and `MudText` for structural and informational display. * `MudTextField` used for secure data entry, including Adornment Icons. * `MudButton` for form submission. * `MudCheckBox` for 'Remember me' functionality. * Dependency injection of `ISnackbar` for user feedback and `NavigationManager` for routing. ## How it works The login form binds input values to the `UserLoginModel` using `@bind-Value`. Submission executes a synchronous validation check using the C# `Validator` class against the `[Required]` and `[EmailAddress]` attributes defined in the model. If validation fails, `ISnackbar` displays the error message. The password field incorporates logic (`TogglePassword` method) to dynamically switch between `InputType.Password` and `InputType.Text` and update the visibility icon accordingly. ## Styling Styling utilizes MudBlazor's built-in CSS utilities (e.g., `d-flex`, `flex-column`, `pa-8`) for spacing and responsiveness. The layout uses flex utilities (`flex:1`) to create a responsive, full-height split screen that shifts to a vertical stack on mobile devices. The left informational panel utilizes the `mud-theme-primary` color. ## Reuse steps 1. Ensure MudBlazor is installed via NuGet. 2. Register MudBlazor services in `Program.cs`. 3. Integrate the `UserLoginModel` and `LoginPage.razor` component. 4. Update the `Submit` method to connect to a backend authentication service instead of using simulated delay. ## Limitations & next steps This code provides the UI structure and front-end validation pattern. The core authentication workflow requires external service wiring. Next steps involve integrating an actual authentication provider (e.g., ASP.NET Core Identity, OAuth flow, or a custom API endpoint) to handle user credentials securely and manage session tokens.