nikdoof/pocket-id
1
0
Fork 0
mirror of https://github.com/nikdoof/pocket-id.git synced 2025-12-13 23:02:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: move checkboxes with label in seperate component

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/lib/components/checkbox-with-label.svelte Normal file
View File

@@ -0,0 +1,25 @@
<script lang="ts">
import { Checkbox } from './ui/checkbox';
import { Label } from './ui/label';
let {
id,
checked = $bindable(),
label,
description
}: { id: string; checked: boolean; label: string; description?: string } = $props();
</script>
<div class="items-top mt-5 flex space-x-2">
<Checkbox {id} bind:checked />
<div class="grid gap-1.5 leading-none">
<Label for={id} class="mb-0 text-sm font-medium leading-none">
{label}
</Label>
{#if description}
<p class="text-muted-foreground text-[0.8rem]">
{description}
</p>
{/if}
</div>
</div>

35
frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
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>

20
frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import CheckboxWithLabel from '$lib/components/checkbox-with-label.svelte';
import FileInput from '$lib/components/file-input.svelte';
import FormInput from '$lib/components/form-input.svelte';
import { Button } from '$lib/components/ui/button';
import { Checkbox } from '$lib/components/ui/checkbox';
import Label from '$lib/components/ui/label/label.svelte';
import type {
OidcClient,
@@ -81,18 +81,12 @@
bind:callbackURLs={$inputs.callbackURLs.value}
bind:error={$inputs.callbackURLs.error}
/>
<div class="items-top flex space-x-2">
<Checkbox id="admin-privileges" bind:checked={$inputs.isPublic.value} />
<div class="grid gap-1.5 leading-none">
<Label for="admin-privileges" class="mb-0 text-sm font-medium leading-none">
Public Client
</Label>
<p class="text-muted-foreground text-[0.8rem]">
Public clients do not have a client secret and use PKCE instead. Enable this if your
client is a SPA or mobile app.
</p>
</div>
</div>
<CheckboxWithLabel
id="public-client"
label="Public Client"
description="Public clients do not have a client secret and use PKCE instead. Enable this if your client is a SPA or mobile app."
bind:checked={$inputs.isPublic.value}
/>
</div>
<div class="mt-8">
<Label for="logo">Logo</Label>

18
frontend/src/routes/settings/admin/users/user-form.svelte
View File

@@ -1,8 +1,7 @@
<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';
import { Label } from '$lib/components/ui/label';
import type { UserCreate } from '$lib/types/user.type';
import { createForm } from '$lib/utils/form-util';
import { z } from 'zod';
@@ -70,15 +69,12 @@
<FormInput label="Username" bind:input={$inputs.username} />
</div>
</div>
<div class="items-top mt-5 flex space-x-2">
<Checkbox id="admin-privileges" bind:checked={$inputs.isAdmin.value} />
<div class="grid gap-1.5 leading-none">
<Label for="admin-privileges" class="mb-0 text-sm font-medium leading-none">
Admin Privileges
</Label>
<p class="text-muted-foreground text-[0.8rem]">Admins have full access to the admin panel.</p>
</div>
</div>
<CheckboxWithLabel
id="admin-privileges"
label="Admin Privileges"
description="Admins have full access to the admin panel."
bind:checked={$inputs.isAdmin.value}
/>
<div class="mt-5 flex justify-end">
<Button {isLoading} type="submit">Save</Button>
</div>