●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Login form with username, password, "Remember me", and a Forgot button.
- Multi-factor authentication (MFA) form with a 6-digit code input and a resend action.
- Minimal dashboard view with a drawer navigation, app bar, stats cards and a line chart.
- Client-side validation flow using MudForm and immediate feedback on inputs.
- Simple demo interactions using JSRuntime alerts and a static AuthState for demo state.
## Key components
- MudForm, MudTextField, MudCheckBox, MudButton
- MudPaper, MudContainer, MudGrid, MudItem
- MudDrawer, MudNavMenu, MudNavLink, MudAppBar, MudIconButton, MudText
- MudChart (ChartSeries, XAxisLabels)
- IJSRuntime for demo alerts and simple client-side notifications
## How it works
- Models: LoginModel and MFAViewModel hold form state; a static AuthState stores current user and auth flag for the demo.
- Data binding: inputs use @bind-Value to update model properties; MudForm references (_loginForm, _mfaForm) provide Validate() and IsValid checks.
- Events: SubmitLogin calls _loginForm.Validate() then advances to MFA; VerifyMfa validates the code with a Regex and sets AuthState.IsAuthenticated before showing the Dashboard.
- Navigation/interaction: ToggleDrawer toggles drawer open state; SelectMenu and Logout use JSRuntime alerts or state resets for demo behavior.
- Chart: OnInitialized populates ChartSeries and XAxisLabels to drive MudChart rendering.
## Styling
- Uses MudBlazor components and built-in classes for layout and spacing (e.g., pa-*, Dense settings).
- Custom CSS in app.css provides background gradient, auth-card sizing, drawer width, and small-screen media query adjustments (hides drawer on narrow screens).
- Layout is responsive via MudGrid and CSS rules; app bar and main-content styles compensate for fixed header height.
## Reuse steps
1. Install MudBlazor NuGet and add builder.Services.AddMudServices() in Program.cs.
2. Import MudBlazor namespaces in _Imports.razor and include MudBlazor CSS in index.html/_Host.
3. Copy Razor page, DataModel.cs, and app.css into the project; update routes as needed.
4. Replace the static AuthState with an injected authentication service / token store and wire backend MFA endpoints.
5. Wire real notifications or a MudSnackbar instead of JSRuntime alerts and add server-side validation and error handling.
## Limitations & next steps
- This is a single-page demo generated by Instruct UI; AuthState is a static in-memory store and not secure for production.
- MFA resend and code delivery are not implemented; VerifyMfa uses a client-side Regex only.
- No backend authentication, token management, or user API wiring is included; integrate real services, protect routes, and add unit/interaction tests.
- Accessibility, localization, and ARIA attributes should be reviewed before production use.