InviteUserModal
A modal dialog for inviting new users to a tenant/organization. Includes email input, role selection, and an option to send an invitation email.
Installation
typescript
import { InviteUserModal } from '@happyvertical/smrt-users/svelte';Basic Usage
Click the button to open the invite modal. The modal includes form validation and keyboard support (Escape to close).
svelte
<script lang="ts">
let isOpen = $state(false);
function handleSubmit(data) {
console.log('Inviting:', data);
isOpen = false;
}
</script>
<button onclick={() => isOpen = true}>Invite User</button>
<InviteUserModal
open={isOpen}
tenant={tenant}
roles={roles}
onsubmit={handleSubmit}
onclose={() => isOpen = false}
/>Features
- Email validation - Required field with email format validation
- Role selection - Dropdown with role descriptions using RoleSelector
- Email toggle - Option to send invitation email or add user manually
- Keyboard support - Press Escape to close the modal
- Backdrop click - Click outside to close the modal
- Loading state - Disables form during submission
With Loading State
The modal shows a loading indicator when submitting the invitation.
The example above demonstrates the loading state when you submit an invitation.
svelte
<InviteUserModal
open={isOpen}
tenant={tenant}
roles={roles}
onsubmit={handleSubmit}
onclose={handleClose}
loading={isSubmitting}
/>Manual Invitation
When the "Send invitation email" checkbox is unchecked, a hint is shown explaining that the user will be added with pending status.
Uncheck "Send invitation email" in the modal to see the hint message.
svelte
// When sendEmail is false, the user is added with 'pending' status
// and you'll need to share the invite link manually
function handleSubmit(data) {
if (data.sendEmail) {
sendInvitationEmail(data.email, data.roleId);
} else {
addUserManually(data.email, data.roleId);
showInviteLink();
}
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
open * | boolean | - | Controls whether the modal is visible |
tenant * | Tenant | - | Tenant object for displaying the organization name |
roles * | Role[] | - | Available roles for the user to select from |
onsubmit * | (data: { email: string; roleId: string; sendEmail: boolean }) => void | - | Callback when the invite form is submitted |
onclose * | () => void | - | Callback to close the modal |
loading | boolean | false | Disables form and shows loading state on submit button |
TypeScript
typescript
import type { Tenant, Role } from '@happyvertical/smrt-users';
interface Props {
open: boolean;
tenant: Tenant;
roles: Role[];
onsubmit: (data: {
email: string;
roleId: string;
sendEmail: boolean;
}) => void;
onclose: () => void;
loading?: boolean;
}