●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Two-column responsive login layout using MudGrid and MudItem (split at md breakpoint).
- Credential inputs: email and password fields with adornments and a password visibility toggle.
- Primary action button for sign-in (full-width MudButton).
- Informational left panel with icon, headings, and feature list (MudIcon, MudText, MudList).
- Custom dark theme overrides via component-scoped CSS to style MudTextField and icons.
## Key components
- Layout: MudGrid, MudItem, MudStack
- Inputs: MudTextField (adornments), InputType, bound Password property
- Actions: MudButton
- UI: MudIcon, MudText, MudList, MudListItem
- Styling: custom CSS overrides for outlined inputs and dark pane colors
## How it works
- The page uses MudBlazor components for layout and controls; the grid divides content into left and right panes.
- MudTextField is used for email and password; the password field binds to a local Password property and uses InputType to switch between Password and Text.
- TogglePasswordVisibility method flips an isPasswordVisible flag, updates InputType, and swaps the adornment icon to show visibility state.
- No EditForm or DataAnnotationsValidator is present; the form does not currently perform client-side validation or submit credentials to a service.
## Styling
- Styling relies on component CSS (app.css) with color variables set for left-pane (blue) and right-pane (dark gray/black).
- CSS overrides target MudBlazor outlined inputs (.mud-input-outlined) to adjust label, input text, fieldset borders, and icon colors for the dark theme.
- The layout uses MudBlazor responsive breakpoints (xs/md) for a two-column desktop and stacked mobile layout.
## Reuse steps
1. Add the MudBlazor NuGet package and reference MudBlazor in _Imports.razor.
2. Register MudBlazor services in Program.cs (builder.Services.AddMudServices()) and add MudBlazor theme provider if needed.
3. Copy the .razor markup and CSS into the project and import app.css in index.html/_Host.cshtml.
4. Replace the local Password property default and bind the email input to a model; add an EditForm and DataAnnotationsValidator for validation.
5. Implement authentication: inject a login service, call it from the sign-in button click, and integrate AuthenticationStateProvider or an external auth library.
## Limitations & next steps
- This is a single UI page generated by Instruct UI and does not include backend wiring, authentication, or secure password handling.
- No form validation or error handling is implemented; add EditForm, model binding, DataAnnotationsValidator, and validation messages.
- Email input is not bound to a model or validated; add binding and secure transport for submission.
- Accessibility improvements: ensure labels, aria attributes on adornments, and proper focus management for the toggle button.
- Extend by integrating real auth services, token storage, and route protection via AuthenticationStateProvider.