Confirm?

Are you sure you want to proceed?
?

Server Manager Login Design

Clone & Customize via AI

A sign-in page for server managers that implements a Blazor Login Form using EditForm validation and Bootstrap form-control classes. Includes password toggle, social sign-in buttons, and a dashboard preview.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Responsive two-column sign-in layout (left: login form; right: marketing / dashboard preview). - Validation-driven form using DataAnnotations (email, password, remember-me checkbox). - Password visibility toggle and social sign-in buttons (Google Workspace, GitHub Enterprise). - Inline badges, status cards, and a telemetry chart placeholder for marketing context. ## Key components - EditForm, DataAnnotationsValidator, ValidationSummary, ValidationMessage - InputText, InputCheckbox with @bind-Value - Standard Blazor event handlers (OnValidSubmit -> HandleValidSubmit) - Bootstrap layout: row / col-*, btn, input-group, form-control, badges ## How it works - The login model (ServerLoginModel) uses DataAnnotations for required fields and email/password rules; EditForm triggers validation before submitting. - InputText and InputCheckbox use @bind-Value to update loginModel properties; ValidationMessage components show field-level errors. - TogglePassword flips a local boolean (showPassword) to switch InputText type between "password" and "text". - HandleValidSubmit is a placeholder for authentication logic; social buttons are static and require OAuth wiring. ## Styling - Uses Bootstrap utility and component classes (row, col-*, btn, input-group, form-control, badge) for layout and responsiveness. - Font Awesome icon classes are present for visual affordances (server, lock, envelope, social icons). - The right column uses cards and responsive grid cells to present telemetry and status summaries; chart area is a static image placeholder. ## Reuse steps 1. Add the Razor component file to a Blazor Server or Blazor WebAssembly project and include ServerLoginModel in a shared folder. 2. Ensure Bootstrap CSS and Font Awesome (or equivalent icons) are referenced in index.html/_Host.cshtml. 3. Keep DataAnnotations on the model and use EditForm with DataAnnotationsValidator to enable EditForm validation. 4. Implement an authentication service (inject into the component) and call it from HandleValidSubmit to authenticate and redirect. 5. Replace the telemetry image with real chart components or APIs and wire OAuth flows for the social buttons. ## Limitations & next steps - Authentication is not implemented; HandleValidSubmit contains a TODO and requires an injected auth service and navigation. - Social sign-in buttons are UI-only and need OAuth client configuration and server-side callbacks. - No anti-brute-force, CAPTCHA, or additional MFA flows are included; add MFA and rate-limiting for production. - Accessibility review recommended (labels, aria attributes on custom controls, and focus management for validation errors).