Confirm?

Are you sure you want to proceed?
P
Philippe Coste

MudBlazor Login Form Design

Clone & Customize via AI

A MudBlazor Login Form for an SGAT portal that uses MudForm validation and a MudTextField password toggle. Includes email, password, remember-me, error alert, and a simulated async login flow.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Centered sign-in page with branding header and subtitle. - Login form with email and password inputs, remember-me checkbox, forgot-password link, and sign-in button. - Password visibility toggle using InputType and Material icons. - Error alert area for inline authentication messages. - Simulated async login flow with busy state and UI text change. ## Key components - MudContainer, MudPaper, MudStack - MudText (Typo headings and body) - MudForm (form reference) - MudTextField (Email and Password) - MudCheckBox, MudLink, MudButton - MudAlert - InputType and Icons for password visibility ## How it works - Data is stored in a simple LoginViewModel and bound with @bind-Value on MudTextField controls. - MudForm is used as a form reference but validation is implemented via manual checks in OnLoginClicked (no DataAnnotationsValidator shown). - Password visibility toggles by switching PasswordInputType (InputType.Text / InputType.Password) and swapping Icons. - OnLoginClicked sets Model.IsBusy, awaits Task.Delay to simulate network latency, performs a mock credential check, and sets Model.ErrorMessage for feedback. - UI updates rely on StateHasChanged after async operations; button disables while IsBusy is true. ## Styling - Uses MudBlazor component layout and theming (MudContainer, MudPaper, MudStack) rather than utility CSS frameworks. - Container MaxWidth and Paper width provide a responsive centered card; MudStack controls spacing and row alignment for actions. - Visual styling and icons depend on MudBlazor theme and Material icons being registered in the host app. ## Reuse steps 1. Add the MudBlazor NuGet package and register MudBlazor services in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespaces in _Imports.razor or the component and add the MudBlazor CSS and icons to index.html/_Host.cshtml. 3. Copy LoginPage.razor and LoginViewModel.cs into the project; update routes as needed. 4. Replace the mock authentication logic with a call to an authentication service (inject via @inject) and navigate on success (NavigationManager.NavigateTo). 5. Optionally add DataAnnotations on the view model and a DataAnnotationsValidator inside the MudForm for declarative validation. ## Limitations & next steps - This is a single-page demo without DI-backed authentication, token handling, or navigation on success. - Validation is manual; adding DataAnnotationsValidator and server-side validation is required for production. - Authentication, user session state, error handling, and logging are not implemented and must be wired into the app's services. - Accessibility considerations (focus management after errors, aria attributes) can be improved.