●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
Overview
Blazor Login Page demonstrating an EditForm validation flow and Bootstrap layout with a split hero/login card and a password toggle control.
## What's implemented
- Responsive two-column login layout (hero image + form) using Bootstrap grid.
- EditForm with DataAnnotations validation for username and password.
- Username and password inputs, password show/hide toggle, remember-me checkbox.
- Submit button with loading spinner state and validation messages.
- Social login buttons and links for forgot-password and register.
- Error banner with dismiss control and animated card/visual styles.
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage
- InputText, InputCheckbox, @bind-Value
- NavigationManager usage in code-behind
- LoginModel with [Required] and [MinLength] attributes
## How it works
- Form model is an instance of LoginModel; inputs use @bind-Value to sync values.
- Validation runs via DataAnnotationsValidator and ValidationMessage on OnValidSubmit which triggers HandleLogin.
- HandleLogin toggles isLoading, simulates a network call (Task.Delay), and sets errorMessage on failure; success path shows where Navigation.NavigateTo would be invoked.
- ToggleShowPassword flips the showPassword flag to change InputText type between text and password.
## Styling
- Layout uses Bootstrap utility classes: container-fluid, row, col-lg-*, d-none d-lg-block, etc.
- Visual look implemented in component-scoped CSS: glassmorphism (backdrop-filter), gradients, SVG grain overlay, rounded cards, animations (fadeInUp, slideInRight, spin).
- Font Awesome icons supply input and social icons.
- Responsive rules via media queries (max-width: 768px) that collapse the hero into a single-column card.
## Reuse steps
1. Add the Login.razor component and Login.razor.css into a Blazor project and include LoginModel.cs in a shared/models folder.
2. Ensure Bootstrap CSS is included (wwwroot/index.html/_Host) and add Font Awesome for icons.
3. Import namespaces if needed (using System.ComponentModel.DataAnnotations) and register any application services in Program.cs for authentication.
4. Replace the simulated HandleLogin logic with a call to an authentication service (inject a scoped auth service) and use NavigationManager to route on success.
5. Adjust model validation messages, localization, and styles to match the app theme.
## Limitations & next steps
- This is a single-page UI scaffold generated by Instruct UI; authentication, token handling, and persistent remember-me are not implemented.
- Social login buttons are visual only and require OAuth wiring on the server and client.
- Accessibility (aria attributes, focus management) and security (rate limiting, secure cookie handling) need to be added before production.
- Consider centralizing styles, extracting shared input components, and integrating a real auth service and error mapping for backend responses.