J
Jason Zurowski

Login Page with Right Image

Provides a MudBlazor Login Form with MudForm validation and MudTextField inputs. Presents a responsive split layout with the form on the left and a full-bleed image on the right.

LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Login form with email and password fields and a Login button - Client-side validation via MudForm Required/RequiredError - Responsive split layout: left form column and right full-bleed illustration ## Key components - MudForm - MudTextField (T="string") for Email and Password - MudButton (OnClick -> OnLoginClicked) - MudPaper, MudImage, MudText ## How it works - Fields bind to properties using @bind-Value (Email, Password) - A MudForm reference (loginForm) is validated via await loginForm.Validate() in OnLoginClicked - Validation is driven by MudTextField Required and RequiredError attributes - OnLoginClicked contains placeholder authentication logic; navigation and real auth are not implemented ## Styling - Uses MudBlazor components alongside Bootstrap utility classes (d-flex, d-md-flex, d-none, mx-auto, mb-4) - Breakpoint classes hide the image on small screens (d-none d-md-flex) and show a split layout on md+ - Inline styles set full viewport sizing and MudImage uses ObjectFit=Cover for the background illustration ## Reuse steps 1. Install MudBlazor NuGet and add builder.Services.AddMudServices() in Program.cs 2. Import MudBlazor namespace and include MudBlazor CSS in the app layout 3. Copy the component, replace placeholder images/text, and adjust the @page route as needed 4. Inject NavigationManager and an authentication service; replace the mock logic in OnLoginClicked ## Limitations & next steps - No authentication service, NavigationManager injection, or server-side validation is provided; wire these in the host app - No error handling for failed sign-in or token management - Accessibility and focus management can be improved (aria labels, form error summary) - Add forgot-password, persistent login, and real backend validation as next steps