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;
   }

frontend/src/lib/locales/de.js

@@ -29,6 +29,10 @@ export default {
     bic: "BIC eingeben(Bei nicht deutschen Konten)...",
     mandate_reference: "SEPA Mandatsreferenz eingeben..",
     notes: "Deine Notizen zu {name}...",
+    licence_number: "Auf dem Führerschein unter Feld 5",
+    issued_date: "Ausgabedatum unter Feld 4a",
+    expiration_date: "Ablaufdatum unter Feld 4b",
+    issuing_country: "Ausstellendes Land",
   },
   validation: {
     required: "Eingabe benötigt",
@@ -40,6 +44,7 @@ export default {
     iban: "Ungültige IBAN",
     date: "Bitte geben Sie ein Datum ein",
     email: "Ungültige Emailadresse",
+    drivers_licence: "Nummer zu kurz(11 Zeichen)",
   },
   licenceCategory: {
     AM: "Mopeds und leichte vierrädrige Kraftfahrzeuge(50ccm,max 45km/h)",
@@ -59,8 +64,13 @@ export default {
     L: "Land-, Forstwirtschaftsfahrzeuge, Stapler max 40km/h",
     T: "Land-, Forstwirtschaftsfahrzeuge, Stapler max 60km/h",
   },
+  licence_categories: "Führerscheinklassen",
   subscription_model: "Mitgliedschatfsmodell",
-  licence: "Lizenz",
+  licence: "Führerschein",
+  licence_number: "Führerscheinnummer",
+  issued_date: "Ausgabedatum",
+  expiration_date: "Ablaufdatum",
+  country: "Land",
   monthly_fee: "Monatliche Gebühr",
   hourly_rate: "Stundensatz",
   details: "Details",