Y
Yudha Satria

MaUI Mudblazor Tablet Login Page

Blazor Login Form for a Survey MT/AMT interface that uses EditForm validation and a password visibility toggle. Implements InputText, InputRadioGroup, InputCheckbox and custom responsive CSS.

LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Responsive two-column login layout with a visual/branding side and form side. - EditForm-based login form with DataAnnotations validation and ValidationSummary. - Username/email and password inputs with a password visibility toggle. - Survey type selection using radio inputs and a remember-me checkbox. - Submit and auxiliary actions: help link, register navigation, and inline status/message area. ## Key components - EditForm, DataAnnotationsValidator, ValidationSummary, ValidationMessage - InputText (username, password) - InputRadioGroup / InputRadio (survey type) - InputCheckbox (remember me) - Button elements with disabled state and simple icon buttons - Custom CSS for layout and responsive behavior ## How it works - The page binds a LoginModel instance to EditForm and validates using data annotations (required, string length). - InputText fields use @bind-Value for two-way binding and ValidationMessage for per-field errors. - Password visibility toggles by switching the input type between password and text in code-behind. - OnValidSubmit triggers HandleValidSubmit which simulates authentication via Task.Delay and uses NavigationManager to redirect on success. - UI state uses local fields: isSubmitting, passwordInputType, and a message string for feedback. ## Styling - Layout and visuals come from component-scoped CSS (LoginPage.razor.css) with a left visual panel and right form panel. - No Tailwind or Bootstrap detected; styling is custom CSS with media queries for responsive column-to-row switch under 900px. - Icons use Font Awesome classes present in markup. ## Reuse steps 1. Add the LoginModel class to the shared/models folder and adjust validation attributes as needed. 2. Include the Razor component and its .razor.css file in a Blazor project (no extra UI library required). 3. Ensure Font Awesome or equivalent icon set is available in the host layout for icons to render. 4. Wire NavigationManager and replace the simulated authentication with an HttpClient call or authentication service in Program.cs. 5. Adapt routes (/login, /register) and integrate with authentication state, claims, or Identity as required. ## Limitations & next steps - This is a single-page demo generated by Instruct UI and does not include server-side auth, HttpClient calls, or secure token storage. - Client-side validation uses DataAnnotations only; server-side validation and error mapping must be added. - Accessibility needs review: aria labels exist for main elements but focus management and form field associations can be improved. - Next steps: connect to an authentication API, add localization, and integrate with ASP.NET Core Identity or a token-based auth service.