MudBlazor Login Form

## What's implemented - Two-column login screen with descriptive left panel and interactive right card - Phone input with country adornment and client-side sanitization - Passwordless SMS flow: send code (simulated), four single-digit OTP inputs, verify action - Resend code button with countdown timer and disabled state - Auto-focus movement between OTP digit fields and Backspace navigation - Inline feedback messages for success/error and simple simulated verification - Responsive behavior: left panel hidden on small screens via CSS media query ## Key components - MudGrid, MudItem, MudPaper for layout and cards - MudText and MudTextField (including typed MudTextField<string>) for labels and inputs - MudStack and MudButton for spacing and actions - NavigationManager for client navigation - Plain C# model (LoginViewModel) with DataAnnotations for Required on phone ## How it works - Phone input binds to model.PhoneNumber using @bind-Value and uses @bind-Value:after to sanitize digits (OnPhoneChanged). - SendCode sets codeSent=true, clears digit boxes, starts StartResendTimer and focuses the first digit using FocusAsync on MudTextField refs. - OTP entry uses an array of MudTextField refs and a string[] codeDigits; each field uses @bind-Value with @bind-Value:after to run OnDigitInserted which sanitizes and moves focus on valid input. - Keyboard handling uses OnKeyDown to handle Backspace navigation between digit boxes. - VerifyCode simulates server verification with a delay and navigates on success; message string shows error/success states. - ResendCode reinitializes digits, restarts the timer and focuses the first digit; resendDisabled and resendSecondss manage the countdown UI. ## Styling - Uses MudBlazor components for structure and behavior; custom CSS (app.css) provides the visual theme: gradients, card backgrounds, rounded digit boxes, and color palette. - CSS includes a media query to hide the left panel on narrow screens and adjusts spacing for responsive use. - MudBlazor theming is not required but can be applied; current file mixes MudBlazor layout with standalone CSS for visuals. ## Reuse steps 1. Add the MudBlazor NuGet package and register services (e.g., builder.Services.AddMudServices()) in Program.cs. 2. Import MudBlazor namespace in _Imports.razor or the component and include the app.css file in the project layout. 3. Copy LoginSms.razor and DataModel.cs into Pages/ or Components/ and adjust routes as needed. 4. Wire a real SMS provider and server-side verification endpoint; replace simulated SendCode/VerifyCode logic with HTTP calls. 5. Optionally register authentication state and redirect after successful verification. ## Limitations & next steps - This page simulates SMS send/verification; no backend integration, rate limiting, or real authentication is included. - Validation is basic and client-side only; add server-side checks, stronger formatting rules, and error handling. - Accessibility could be improved (aria labels for digit boxes, announcements for timer updates) and international phone support added. - Consider unit tests for focus and timer logic, and integrate with authentication/identity flows and telemetry. Generated by Instruct UI; the component is editable and intended as a UI demo requiring backend wiring for production use.

Minimalist Sms Login Page Design