Confirm?

Are you sure you want to proceed?
C
CaptureTech Support

Login Page with Microsoft

Clone & Customize via AI

The Bootstrap Login Form implements a centered sign-in card using Blazor InputText and InputCheckbox controls, a server POST form, and a Microsoft OAuth redirect button. Uses Bootstrap layout classes and scoped CSS.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Centered sign-in card with logo, heading, subtitle, and footer copyright. - Email and password inputs using Blazor InputText controls and InputCheckbox for "Remember me". - HTML <form method="post" action="/auth/login"> to preserve server POST behavior. - Client-side Microsoft OAuth redirect button that navigates to /auth/microsoft. - Scoped component CSS for container sizing and a circular logo area; responsive adjustments for small screens. ## Key components - Blazor components: InputText, InputCheckbox, component-scoped CSS (Login.razor.css), NavManager.NavigateTo. - Model: LoginModel with DataAnnotations attributes (Required, EmailAddress). - Markup: plain HTML <form> with method="post" and server action URL. - UI classes: Bootstrap classes (card, btn, form-control, d-flex, text-center) and FontAwesome icon usage. ## How it works - InputText and InputCheckbox use @bind-Value to update the local LoginModel instance. - The page uses a standard HTML POST form to submit credentials to /auth/login; Blazor bindings remain for two-way state but server handles the POST. - Microsoft sign-in button triggers LoginWithMicrosoft which calls NavManager.NavigateTo("/auth/microsoft", forceLoad: true) to start server-side OAuth flow. - The LoginModel contains DataAnnotations for validation, but no EditForm or DataAnnotationsValidator is present in the current markup, so client-side validation via Blazor data annotations is not enabled. ## Styling - Visual layout relies on Bootstrap utility and component classes (card, btn-primary, form-control, d-flex). - Component-scoped CSS (Login.razor.css) sets a max-width (420px), padding and a logo-circle style; a media query adjusts padding on small viewports. - Responsiveness is handled primarily by Bootstrap layout and the max-width constraint on the container. ## Reuse steps 1. Add the Login.razor and LoginModel.cs files to a Blazor project and ensure the component route (@page "/login") is reachable. 2. Ensure Bootstrap and FontAwesome are included in the host layout (wwwroot css/js or _Host.cshtml). No additional NuGet is required for these controls. 3. If client-side validation is required, replace the plain <form> with <EditForm Model="model"> and add <DataAnnotationsValidator/> and ValidationSummary; keep server POST if needed or submit via HttpClient. 4. Implement server endpoints: POST /auth/login to accept form data and /auth/microsoft to start OAuth; handle CSRF/antiforgery tokens for server POSTs. 5. Wire authentication, user services, and secure cookie/session handling on the server; update icons and branding assets as needed. ## Limitations & next steps - Current markup mixes Blazor input components with a plain HTML POST form; this preserves server POST but disables Blazor's built-in EditForm validation flow. Add EditForm and DataAnnotationsValidator to enable client validation. - No antiforgery token is emitted for the server POST; server-side CSRF protections must be integrated. - Authentication, session management, and server OAuth handlers are out of scope for this component and must be implemented on the server. - Consider adding loading states, error feedback, and accessibility attributes (aria-live, role="alert") for form submission results.