🚸 Added check for reading privacy policy

frontend/src/routes/account/register.svelte

@@ -38,7 +38,10 @@
 			.string()
 			.required()
 			.min(3, 'Username must be at least 3 characters long')
-			.max(20, 'Username must be at most 20 characters long')
+			.max(20, 'Username must be at most 20 characters long'),
+		privacy_accept: yup
+			.boolean()
+			.oneOf([true], 'You must accept the privacy policy to register!')
 	});
 
 	const { form, errors, touched, isValid, isSubmitting } = createForm<
@@ -179,6 +182,20 @@
 								</label>
 							</div>
 						</div>
+						<div
+							class="ring-1 ring-gray-500 focus:outline-none rounded-lg m-4 py-2"
+							class:ring-red-700={$errors.privacy_accept !== null}
+							class:ring-green-600={$touched.privacy_accept === true &&
+								$errors.privacy_accept === null}
+						>
+							<!--						<div class='flex items-center justify-between mt-4 w-full'>-->
+							<input type="checkbox" name="privacy_accept" class="ml-3" />
+							<label class="text-sm text-gray-600 dark:text-gray-200">
+								I've read the <a href="/docs/privacy-policy" class="underline"
+									>Privacy policy</a
+								>.
+							</label>
+						</div>
 
 						<div class="flex items-center justify-between mt-4">
 							<a
@@ -241,16 +258,6 @@
 	<div
 		class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
 	>
-		<!--
-        Background overlay, show/hide based on modal state.
-
-        Entering: "ease-out duration-300"
-          From: "opacity-0"
-          To: "opacity-100"
-        Leaving: "ease-in duration-200"
-          From: "opacity-100"
-          To: "opacity-0"
-      -->
 		<div
 			class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
 			aria-hidden="true"
@@ -260,17 +267,6 @@
 		<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"
 			>&#8203;</span
 		>
-
-		<!--
-        Modal panel, show/hide based on modal state.
-
-        Entering: "ease-out duration-300"
-          From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          To: "opacity-100 translate-y-0 sm:scale-100"
-        Leaving: "ease-in duration-200"
-          From: "opacity-100 translate-y-0 sm:scale-100"
-          To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-      -->
 		<div
 			class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
 		>