add checkbox styling, driverslicence handling and validation

frontend/src/lib/components/InputField.svelte

@@ -32,6 +32,9 @@
   /** @type {boolean} */
   export let toUpperCase = false;
 
+  /** @type {boolean} */
+  export let checked = false;
+
   /**
    * @param {Event} event - The input event
    */
@@ -97,6 +100,11 @@
           /^[A-Z]{6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3})?$/.test(value)
           ? null
           : $t("validation.bic");
+      case "licence_number":
+        return typeof value === "string" && value.length == 11
+          ? null
+          : $t("validation.drivers_licence");
+
       default:
         return typeof value === "string" && !value.trim() && required
           ? $t("validation.required")
@@ -109,8 +117,21 @@
   $: selectedColor = selectedOption ? selectedOption.color : "";
 </script>
 
-<div class="input-box">
-  <span class="label">{label}</span>
+<div class="input-box {type === 'checkbox' ? 'checkbox-container' : ''}">
+  {#if type === "checkbox"}
+    <label class="checkbox-label">
+      <input
+        type="checkbox"
+        {name}
+        {value}
+        {checked}
+        on:change={() => (checked = !checked)}
+      />
+      <span class="checkbox-text"> {label} </span>
+    </label>
+  {:else}
+    <span class="label">{label}</span>
+  {/if}
   <div class="input-error-container">
     {#if error}
       <span class="error-message">{error}</span>
@@ -137,7 +158,7 @@
         class="input textarea"
         style="height:{rows * 1.5}em;"
       />
-    {:else}
+    {:else if type != "checkbox"}
       <input
         {name}
         {type}
@@ -153,6 +174,36 @@
 </div>
 
 <style>
+  .checkbox-container {
+    display: inline-flex;
+    align-items: center;
+    background-color: transparent;
+  }
+
+  .checkbox-label {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    justify-content: center;
+  }
+
+  .checkbox-label input[type="checkbox"] {
+    margin-right: 5px;
+    flex-shrink: 0;
+    width: 40px;
+  }
+
+  .checkbox-text {
+    font-size: 16px;
+  }
+
+  @media (min-width: 768px) {
+    .checkbox-text {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
   .select {
     padding-right: 1.5em;
   }