refactor: move checkboxes with label in seperate component

This commit is contained in:
Elias Schneider
2024-11-21 14:28:23 +01:00
parent 5f44fef85f
commit a1302ef7bf
4 changed files with 52 additions and 46 deletions

View File

@@ -1,4 +1,5 @@
<script lang="ts">
import CheckboxWithLabel from '$lib/components/checkbox-with-label.svelte';
import FormInput from '$lib/components/form-input.svelte';
import { Button } from '$lib/components/ui/button';
import { Checkbox } from '$lib/components/ui/checkbox';
@@ -51,28 +52,18 @@
description="The duration of a session in minutes before the user has to sign in again."
bind:input={$inputs.sessionDuration}
/>
<div class="items-top mt-5 flex space-x-2">
<Checkbox id="admin-privileges" bind:checked={$inputs.allowOwnAccountEdit.value} />
<div class="grid gap-1.5 leading-none">
<Label for="admin-privileges" class="mb-0 text-sm font-medium leading-none">
Enable Self-Account Editing
</Label>
<p class="text-muted-foreground text-[0.8rem]">
Whether the users should be able to edit their own account details.
</p>
</div>
</div>
<div class="items-top mt-5 flex space-x-2">
<Checkbox id="admin-privileges" bind:checked={$inputs.emailsVerified.value} />
<div class="grid gap-1.5 leading-none">
<Label for="admin-privileges" class="mb-0 text-sm font-medium leading-none">
Emails Verified
</Label>
<p class="text-muted-foreground text-[0.8rem]">
Whether the user's email should be marked as verified for the OIDC clients.
</p>
</div>
</div>
<CheckboxWithLabel
id="self-account-editing"
label="Enable Self-Account Editing"
description="Whether the users should be able to edit their own account details."
bind:checked={$inputs.allowOwnAccountEdit.value}
/>
<CheckboxWithLabel
id="emails-verified"
label="Emails Verified"
description="Whether the user's email should be marked as verified for the OIDC clients."
bind:checked={$inputs.emailsVerified.value}
/>
</div>
<div class="mt-5 flex justify-end">
<Button {isLoading} type="submit">Save</Button>