From a1302ef7bf5b06b68c08e5bb8de0f4472c660774 Mon Sep 17 00:00:00 2001
From: Elias Schneider <login@eliasschneider.com>
Date: Thu, 21 Nov 2024 14:28:23 +0100
Subject: [PATCH] refactor: move checkboxes with label in seperate component

---
 .../lib/components/checkbox-with-label.svelte | 25 +++++++++++++
 .../forms/app-config-general-form.svelte      | 35 +++++++------------
 .../oidc-clients/oidc-client-form.svelte      | 20 ++++-------
 .../settings/admin/users/user-form.svelte     | 18 ++++------
 4 files changed, 52 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/lib/components/checkbox-with-label.svelte

diff --git a/frontend/src/lib/components/checkbox-with-label.svelte b/frontend/src/lib/components/checkbox-with-label.svelte
new file mode 100644
index 0000000..1117655
--- /dev/null
+++ b/frontend/src/lib/components/checkbox-with-label.svelte
@@ -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>
diff --git a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte b/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
index 0cc6407..045fc75 100644
--- a/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
+++ b/frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte
@@ -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>
diff --git a/frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte b/frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte
index f5dd115..dadcafe 100644
--- a/frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte
+++ b/frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte
@@ -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>
diff --git a/frontend/src/routes/settings/admin/users/user-form.svelte b/frontend/src/routes/settings/admin/users/user-form.svelte
index 14f67f3..0c751a1 100644
--- a/frontend/src/routes/settings/admin/users/user-form.svelte
+++ b/frontend/src/routes/settings/admin/users/user-form.svelte
@@ -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>