●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
Overview
Bootstrap Login Form built with Blazor EditForm and DataAnnotations validation. Uses Bootstrap form-control classes and a responsive card layout with social sign-in buttons.
## What's implemented
- Login form with email and password inputs using floating labels (form-floating layout).
- Remember-me checkbox and a Forgot password link.
- Primary submit button with OnValidSubmit handling and client-side DataAnnotations validation.
- Social sign-in placeholder buttons (Google, Twitter).
- Navigation link to a register page via NavigationManager.
- Scoped CSS for a gradient background and centered responsive card.
## Key components
- EditForm, DataAnnotationsValidator, ValidationMessage
- InputText, InputCheckbox, @bind-Value usage
- NavigationManager for page navigation
- Bootstrap classes: form-control, btn, card, form-floating, d-grid
- Scoped stylesheet: LoginPage.razor.css
## How it works
- Model binding uses a LoginViewModel instance with [Required] and [EmailAddress] attributes; ValidationMessage components display field errors.
- EditForm.OnValidSubmit is wired to HandleValidSubmit which currently logs to console and sets a local flag.
- Social sign-in buttons are static placeholders; navigation link calls NavigationManager.NavigateTo("/register").
- Icons are referenced via font classes (FontAwesome expected in host page).
## Styling
- Uses Bootstrap utility and component classes for layout and controls (form-control, btn, card, d-grid, form-check).
- Scoped CSS provides a full-height centered container, purple gradient background, max-width card (450px) and floating label transforms.
- Layout is responsive by design via max-width and min-height: 100vh; mobile-friendly stacking is provided by Bootstrap classes.
## Reuse steps
1. Ensure Bootstrap CSS (and optionally FontAwesome) is included in index.html/_Host.cshtml.
2. Add the LoginPage.razor component and LoginViewModel class to the project; include the scoped LoginPage.razor.css.
3. Keep EditForm and DataAnnotationsValidator for EditForm validation; reference System.ComponentModel.DataAnnotations on models.
4. Replace the placeholder HandleValidSubmit with an authentication service or API call; inject services in Program.cs as needed.
5. Wire real OAuth/OpenID flows for social buttons or remove them if not used.
6. Test accessibility and responsive behavior across breakpoints; adjust Bootstrap utility classes as required.
## Limitations & next steps
- This is a single UI page generated by Instruct UI; no backend authentication, token handling, or persistence is included.
- Social sign-in buttons are placeholders and require OAuth implementation and server-side wiring.
- Remember-me currently toggles a model property only; persistence and security handling must be implemented.
- Consider adding server-side validation error handling, anti-forgery measures, and accessibility improvements (ARIA attributes, focus management).