●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Responsive two-column login layout with a branded left panel and a form card on the right.
- Sign-in form built with EditForm and DataAnnotationsValidator, including field-level ValidationMessage components.
- Floating-label inputs for email and password, checkbox binding for "Remember me", and social sign-in buttons.
- Animated entry and focus states via a dedicated CSS file (slideIn, fadeIn, focus ring).
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage
- InputText, InputCheckbox with @bind-Value
- Standard HTML button elements styled with Bootstrap classes (btn, btn-primary, btn-outline-secondary)
- Custom CSS selectors and animations defined in Login.razor.css
## How it works
- The form uses an EditForm bound to a LoginModel instance; InputText and InputCheckbox use @bind-Value for two-way binding.
- Validation runs via DataAnnotationsValidator and ValidationMessage shows validation errors from attributes on LoginModel (Required, EmailAddress, StringLength).
- OnValidSubmit calls HandleLogin, which is a placeholder method that currently logs values to the console.
- Floating-label behavior is implemented with CSS using :placeholder-shown and focus selectors; icons are referenced via Font Awesome classes (fa-*) but require the icon library to be included.
## Styling
- Visual styling is provided by a local Login.razor.css file with CSS variables, animations, and responsive media queries.
- Layout uses Bootstrap utility and form classes present in the markup (form-control, btn, d-flex, mt-4). The CSS file overrides and extends Bootstrap styles for a dark theme.
- Responsive behavior relies on a media query at 768px to switch to a column layout and scale text sizes.
## Reuse steps
1. Add the Razor files and Login.razor.css to a Blazor project and include Bootstrap CSS and Font Awesome in index.html/_Host.cshtml.
2. Ensure Program.cs registers required services (default Blazor services are sufficient for EditForm; add authentication services if required).
3. Import the namespace containing LoginModel or move the model into a project namespace and adjust the @using if needed.
4. Replace HandleLogin with real authentication logic (call an API, validate tokens, use NavigationManager to redirect, and handle errors).
5. Adjust CSS variables or remove Bootstrap overrides if integrating with an existing theme.
## Limitations & next steps
- This is a single-page UI scaffold generated by Instruct UI; it contains no backend auth, token handling, or persistent session management.
- Icons require Font Awesome and social buttons are placeholders; wire external OAuth flows or APIs for real sign-in.
- Add secure password handling, server-side validation, and proper error messaging for production use.
- Consider extracting the form into a reusable component and adding unit or integration tests for authentication flows.