Confirm?

Are you sure you want to proceed?
D
David Eduardo Cotes Durán

Login Window Fullscreen Landscape Background

Clone & Customize via AI

MudBlazor Login Form presenting email and password fields inside a MudCard with MudForm validation and action buttons. Uses MudContainer for centered responsive layout and Bootstrap utilities.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Centered login page using a MudCard inside a MudContainer. - Email and password inputs implemented with MudTextField (password uses InputType.Password). - Form wrapper using MudForm and client-side Form.Validate invocation. - Card header, descriptive text, and action buttons (Cancel and Submit). - Full-screen background image and a blurred card backdrop via custom CSS. ## Key components - MudForm - MudTextField (T="string") - MudCard, MudCardHeader, MudCardContent, MudCardActions - MudButton - MudContainer - MudText - @bind-Value and async event handlers (OnSubmit, OnCancel) ## How it works - Data binding uses a LoginModel with Email and Password and @bind-Value on MudTextField controls. - Submit handler calls await Form.Validate() to trigger MudForm validation state; no DataAnnotations validators are present in the model. - OnCancel resets the LoginModel instance to clear fields. - Visual structure relies on MudCard areas: header, content and actions; action buttons wire to event callbacks (OnClick). ## Styling - Uses MudBlazor components for layout and controls. - Includes Bootstrap-like utility classes (d-flex, justify-content-center, align-items-center, w-100, mb-4) for spacing and centering. - Custom CSS defines .login-background (background-image, cover, center) and .login-card (backdrop-filter: blur). - Responsive centering is handled by MudContainer MaxWidth="MaxWidth.Small" and full-viewport utility classes. ## Reuse steps 1. Add the MudBlazor NuGet package and register MudBlazor services in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespace in the _Imports.razor or the page: @using MudBlazor. 3. Copy LoginPage.razor, LoginModel.cs and the CSS into the project; ensure the CSS is referenced (site.css or imported in index.html/_Host). 4. Add validation attributes to LoginModel (DataAnnotations) and include a DataAnnotationsValidator if server-side validation or validation messages are required. 5. Replace the mock submit logic with an injected authentication service or API call, handle success/failure, and navigate or display errors. ## Limitations & next steps - No DataAnnotations or validation messages are present; Form.Validate() runs but will not show field-level errors without validators. - Authentication, token storage, navigation after login, and error handling are not implemented; those require service injection and wiring to auth APIs. - The "¿Olvidaste tu contraseña?" text is static; a password reset flow and link should be added. - Accessibility hints (aria attributes) and focus management on validation failures are not implemented. - Consider adding loading states on submit, server-side validation handling, and localized strings if required.