MudBlazor Login Form

## What's implemented - A responsive sign-in page with a two-column layout (illustration panel + credential card). - Email and password inputs with DataAnnotations validation. - Password visibility toggle using an adornment icon. - Submit button styled as a full-width action. ## Key components - MudForm - MudTextField (Email, Password) - MudButton - MudGrid / MudItem for responsive layout - MudPaper for card surface - MudImage, MudIcon, MudStack, MudText ## How it works - The page binds a LoginViewModel instance to MudForm using @bind-Value on MudTextField and For expressions for validation. - DataAnnotations on LoginViewModel (Required, EmailAddress) provide validation rules that MudForm can evaluate. - TogglePasswordVisibility flips InputType between Password and Text and swaps the AdornmentIcon; the password field uses Adornment and OnAdornmentClick. - MudGrid and MudItem control responsive placement: the illustration is hidden on small screens via utility classes and the form card scales across breakpoints. ## Styling - Uses MudBlazor components and MudBlazor utility classes (d-flex, pa-8, rounded-lg, mt-2) for spacing and alignment. - A custom CSS class (.login-page-container) sets background and min-height for full-screen appearance. - Layout is responsive via MudGrid/MudItem; the left illustration uses d-none d-md-flex to hide on narrow viewports. ## Reuse steps 1. Install the MudBlazor NuGet package and add MudBlazor services and middleware in Program.cs (builder.Services.AddMudServices(); and app.UseMudBlazor?). 2. Import MudBlazor namespace in _Imports.razor and include MudBlazor CSS/JS in index.html/_Host.cshtml. 3. Add the LoginViewModel class and include System.ComponentModel.DataAnnotations on the model. 4. Place the Razor component in a Pages folder and adapt the form submit handler to call authentication services or navigation. 5. Adjust icons, colors, and the placeholder image source to match branding; wire MudForm.Validate() and handle submit state. ## Limitations & next steps - The sample does not implement submit handling, authentication, or backend API calls; a submit handler must validate the form and call services. - No explicit feedback on successful/failed login flows or server-side validation responses is implemented. - Consider adding asynchronous submit logic, error summary, loading state on the button, and integration with an authentication service and navigation. - Accessibility: an AdornmentAriaLabel is provided for the password toggle; additional ARIA and focus management can be added for improved accessibility. Note: this single-page example is generated by Instruct UI and is intended as an editable starting point rather than a complete auth solution.

Login Page Design