Confirm?

Are you sure you want to proceed?
S
Sofia Vilosio

Responsive Login Design

Clone & Customize via AI

This MudBlazor login splash page provides a centered, responsive card layout using MudContainer and MudPaper. It focuses on a Single Sign-On (SSO) workflow, featuring a custom-styled button for external authentication services like Google.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented * Centered, full-height layout for the login screen. * Responsive card container (`MudPaper`) with custom border and box shadow styling. * Application title and brief instructions (in Spanish). * Primary interaction point is a dedicated button for Single Sign-On (SSO) integration (e.g., Google). * Minimalist layout achieved using `MudStack` for clean vertical spacing. ## Key components * `MudContainer` (MaxWidth="False") for full-page centering. * `MudPaper` for the central login card. * `MudStack` for managing vertical alignment and spacing. * `MudText` for headings and informational text. * `MudButton` configured as `Variant.Outlined` for the SSO action. ## How it works The component uses standard MudBlazor layout components to center the UI vertically and horizontally (`d-flex flex-column align-center justify-center`). The page serves as a visual placeholder for initiating an OAuth flow. Clicking the `MudButton` requires implementation of an event handler to redirect the user or trigger an authentication service call. ## Styling Custom CSS is used extensively to enhance the default MudBlazor theme: * `login-card`: Applies a strong green box-shadow and a rounded border, giving a modern look. * `google-button`: Defines custom border color, text transformation, and hover effects for precise brand adherence. * MudBlazor utility classes (`pa-8`, `mt-6`, `d-flex`) handle padding, margins, and inline alignment. ## Reuse steps 1. Ensure the MudBlazor NuGet package is installed and configured in `Program.cs`. 2. Import necessary namespaces (usually done globally). 3. Integrate the custom styling from `app.css` into the main application stylesheet. 4. Wire up the `OnClick` event for the SSO `MudButton` to initiate the required authentication service logic. ## Limitations & next steps This code provides the frontend UI structure. Actual authentication services (like Google OAuth clients) must be configured and injected into the application. Extend the component by adding explicit click handlers and implementing secure state management.