Confirm?

Are you sure you want to proceed?
?

Server Manager Admin Login

Clone & Customize via AI

Bootstrap Admin Login implementing an EditForm-based sign-in card with email, password, optional MFA, and a password visibility toggle. Uses Bootstrap utilities and custom CSS for layout and responsive decorative SVGs.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Sign-in card with email and password inputs, Remember me checkbox, optional MFA field, and SSO button. - Client-side validation using DataAnnotationsValidator, ValidationSummary and ValidationMessage components. - Password visibility toggle and collapsible MFA section controlled by component state. - Status strip and footer links plus decorative responsive SVGs. ## Key components - EditForm, DataAnnotationsValidator, ValidationSummary - InputText (email, password, mfa), InputCheckbox - ValidationMessage, button elements with @onclick handlers - Model class: AdminLoginModel with [Required], [EmailAddress], [RegularExpression] ## How it works - The page binds a local AdminLoginModel instance to an EditForm and uses @bind-Value on InputText/InputCheckbox fields. - Validation runs via DataAnnotationsValidator and ValidationMessage shows field-level errors; OnValidSubmit calls HandleValidSubmit (currently a stub). - showPassword and showMfa booleans control UI state; passwordInputType property switches the password input between "text" and "password". - Actions such as TogglePasswordVisibility and ToggleMfa use standard @onclick handlers and update component state. ## Styling - Layout and utilities rely on Bootstrap classes (container-fluid, d-flex, btn, form-control, input-group, d-none d-lg-block) for responsive behavior. - Additional scoped CSS in the component defines theme colors, a blurred translucent login-card, status-dot, focus styles and a small logo mark. - Decorative SVGs are positioned responsively (hidden on small screens) and do not depend on external libraries. ## Reuse steps 1. Add the AdminLogin.razor file and AdminLoginModel.cs to a Blazor Server or WASM project (no additional NuGet required for Bootstrap itself). 2. Ensure Bootstrap CSS is included in index.html/_Host.cshtml or layout and import Microsoft.AspNetCore.Components.Forms namespace if needed. 3. Wire authentication: implement HandleValidSubmit to call an authentication service, validate credentials, and handle redirects or tokens. 4. Add server-side MFA/SSO integration and back-end validation for MfaCode; keep DataAnnotations for client feedback. 5. Adjust styles or move CSS to a shared stylesheet for consistent theming across the app. ## Limitations & next steps - HandleValidSubmit is a placeholder; server-side auth, token/session management, and secure MFA verification must be implemented. - SSO button lacks OIDC/OAuth wiring; external provider integration is required for production use. - Accessibility can be improved (explicit ARIA relationships for validation summaries, focus management on errors, keyboard-only testing). - Consider unit and integration tests for form validation and endpoint interactions, and move repeated styles into a theme for reuse.