126 lines
3.7 KiB
Svelte
126 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import PlusIcon from '@lucide/svelte/icons/plus';
|
|
import { Field as FormField, Control, FieldErrors } from 'formsnap';
|
|
import FormSelect from '$lib/components/form-select.svelte';
|
|
import * as Field from '$lib/components/ui/field/index.js';
|
|
import { Button } from '$lib/components/ui/button/index.js';
|
|
import * as Dialog from '$lib/components/ui/dialog/index.js';
|
|
import { Input } from '$lib/components/ui/input/index.js';
|
|
let {
|
|
open = $bindable(false),
|
|
createForm,
|
|
createData,
|
|
enhanceCreate
|
|
}: {
|
|
open: boolean;
|
|
createForm: any;
|
|
createData: any;
|
|
enhanceCreate: any;
|
|
} = $props();
|
|
</script>
|
|
|
|
<Dialog.Root bind:open>
|
|
<Dialog.Trigger>
|
|
{#snippet child({ props })}
|
|
<Button {...props}>
|
|
<PlusIcon data-icon="inline-start" />
|
|
Create user
|
|
</Button>
|
|
{/snippet}
|
|
</Dialog.Trigger>
|
|
<Dialog.Content class="sm:max-w-md">
|
|
<Dialog.Header>
|
|
<Dialog.Title>Create user</Dialog.Title>
|
|
<Dialog.Description>
|
|
Create a user or add an existing email to this organization.
|
|
</Dialog.Description>
|
|
</Dialog.Header>
|
|
<form method="POST" action="?/create" class="grid gap-2" use:enhanceCreate>
|
|
<FormField form={createForm} name="name">
|
|
<Field.Field>
|
|
<Control id="create-name">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Name</Field.Label>
|
|
<Input {...props} autocomplete="name" bind:value={$createData.name} />
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="email">
|
|
<Field.Field>
|
|
<Control id="create-email">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Email</Field.Label>
|
|
<Input {...props} type="email" autocomplete="email" bind:value={$createData.email} />
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="password">
|
|
<Field.Field>
|
|
<Control id="create-password">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Password</Field.Label>
|
|
<Input
|
|
{...props}
|
|
type="password"
|
|
autocomplete="new-password"
|
|
placeholder="Required for new users"
|
|
bind:value={$createData.password}
|
|
/>
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="confirmPassword">
|
|
<Field.Field>
|
|
<Control id="create-confirm-password">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Confirm password</Field.Label>
|
|
<Input
|
|
{...props}
|
|
type="password"
|
|
autocomplete="new-password"
|
|
placeholder="Repeat password"
|
|
bind:value={$createData.confirmPassword}
|
|
/>
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<FormField form={createForm} name="role">
|
|
<Field.Field>
|
|
<Control id="create-role">
|
|
{#snippet children({ props })}
|
|
<Field.Label>Role</Field.Label>
|
|
<FormSelect
|
|
name="role"
|
|
bind:value={$createData.role}
|
|
options={[
|
|
{ value: 'admin', label: 'Admin' },
|
|
{ value: 'user', label: 'User' }
|
|
]}
|
|
triggerProps={props}
|
|
/>
|
|
{/snippet}
|
|
</Control>
|
|
<Field.Error><FieldErrors /></Field.Error>
|
|
</Field.Field>
|
|
</FormField>
|
|
<Dialog.Footer>
|
|
<Dialog.Close>
|
|
{#snippet child({ props })}
|
|
<Button variant="outline" {...props}>Cancel</Button>
|
|
{/snippet}
|
|
</Dialog.Close>
|
|
<Button type="submit">Create user</Button>
|
|
</Dialog.Footer>
|
|
</form>
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|