Confirm?

Are you sure you want to proceed?
G
Gijs CaptureSoft

CaptureTech Connect Login UI

Clone & Customize via AI

MudBlazor Login Form presenting a centered gradient card with MudTextField binding for username and PIN, a PIN visibility toggle, and a floating MudFab action. Uses MudBlazor components and Bootstrap utility classes.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Centered login card (MudPaper) with gradient background and rounded corners. - Username input (MudTextField) and PIN input (MudTextField) with a visibility toggle. - Floating action button (MudFab) used as the submit control. - Top bar with logo and settings icon, bottom bar with version and flags. - Minimal mock login handler that logs credentials to the console (no backend wired). ## Key components - MudPaper, MudStack, MudTextField, MudFab, MudIconButton, MudImage, MudText - @bind-Value bound to LoginViewModel properties - LoginViewModel (Username, Pin, IsPinVisible) ## How it works - Inputs use @bind-Value to the LoginViewModel.Username and LoginViewModel.Pin properties (MudTextField binding). - PIN visibility toggles InputType between Password and Text via TogglePinVisibility which flips viewModel.IsPinVisible. - HandleLogin runs on MudFab OnClick; currently implements mock logic (Console.WriteLine). - No EditForm or DataAnnotationsValidator present; no client-side validation is implemented in the supplied code. ## Styling - Uses MudBlazor components for structure and Material icons for adornments. - Bootstrap utility classes appear throughout: d-flex, flex-column, justify-content-between, align-items-center, vh-100, px-3, py-3, me-2. - Page-level CSS includes a gradient background for the card, rounded corners, absolute positioning for the FAB and PIN toggle, and responsive width (max-width: 450px; width: 90%). ## Reuse steps 1. Add MudBlazor NuGet package and include MudBlazor CSS in index.html/_Host and Program.cs. 2. Register MudBlazor services (builder.Services.AddMudServices()) and import MudBlazor namespace in imports. 3. Copy LoginPage.razor and LoginViewModel.cs into the project; ensure MudBlazor components are available. 4. Replace the mock HandleLogin with an injected authentication service (register via DI) and add EditForm + DataAnnotationsValidator for validation if required. 5. Adjust labels, localization, and accessibility attributes (aria-label) before production use. ## Limitations & next steps - This is a single-page UI scaffold generated by Instruct UI; no authentication, API calls, or secure storage are included. - No form validation, error handling, or loading states are implemented; add EditForm and validation attributes for production. - Accessibility improvements (keyboard focus order, aria attributes) and unit/BDD tests are recommended. - Replace Console.WriteLine with an injected service and handle navigation or token storage after successful authentication.