B
Bharath M

User Invite Modal Design

Blazor User Invite Modal lets admins collect validated names and emails in a Bootstrap-styled modal for bulk invitations. EditForm enforces validation and invites appear in a dynamic list.

LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Modal dialog for inviting users with form inputs and validation - Bootstrap-styled EditForm with InputText for name and email - DataAnnotationsValidator for real-time validation feedback - Dynamic invite list with add and remove buttons - Send Invites button, disabled when no invites - Success alert and invite summary preview ## Key components - EditForm, InputText, DataAnnotationsValidator, ValidationMessage, ValidationSummary - Bootstrap classes: modal, btn, form-control, alert - FontAwesome icons for visual cues ## How it works - Uses EditForm with DataAnnotationsValidator and InviteViewModel to enforce required name and email - When the form is submitted, valid entries are added to a local invites list (no duplicates by email) - Users can be removed from the invite list before submission - Invites are sent in bulk via EventCallback; a summary is displayed - Modal shown/hidden via @bind-ShowModal ## Styling - Bootstrap modal structure and button styles - Modal animations via CSS (@keyframes fadeIn, slideIn) - Custom CSS for visual feedback on hover, focus, and disabled states - Responsive modal layout centered on page ## Reuse steps 1. Ensure Bootstrap and FontAwesome CSS in wwwroot 2. Add InviteViewModel.cs to the project 3. Use UserInviteModal in desired location, import namespace 4. Optionally wire OnInvitesSent to backend/service logic 5. Adjust modal visibility via ShowModal binding ## Limitations & next steps - Backend/email logic not implemented; only collects and previews invites - Wire to actual invite service, handle errors, and extend InviteViewModel as needed - Only demonstrates single modal component generated by Instruct UI