add InputField select option & input validation

frontend/src/lib/components/InputField.svelte

@@ -8,12 +8,21 @@
   /** @type {string} */
   export let type = "text";
 
-  /** @type {string} */
-  export let value = "";
+  /** @type {string|Number|null} */
+  export let value;
 
   /** @type {string} */
   export let placeholder = "";
 
+  /** @type {Number} */
+  export let rows = 4;
+
+  /** @type {Array<{value: string | number, label: string, color?:string}>} */
+  export let options = [];
+
+  /** @type {Boolean} */
+  export let required = false;
+
   /** @type {string} */
   export let label = "";
 
@@ -23,8 +32,6 @@
   /** @type {boolean} */
   export let toUpperCase = false;
 
-  const dispatch = createEventDispatcher();
-
   /**
    * @param {Event} event - The input event
    */
@@ -38,60 +45,68 @@
         target.value = inputValue; // Update the input field value
       }
       value = inputValue;
-      // dispatch("input", { name, value: inputValue });
     }
   }
 
   /**
    * Validates the field
    * @param {string} name - The name of the field
-   * @param {string} value - The value of the field
+   * @param {string|Number|null} value - The value of the field
+   * @param {Boolean} required - The requirements of the field
    * @returns {string|null} The error message or null if valid
    */
-  function validateField(name, value) {
+  function validateField(name, value, required) {
+    if (
+      value === null ||
+      (typeof value === "string" && !value.trim() && !required)
+    )
+      return null;
     switch (name) {
-      case "first_name":
-      case "last_name":
-      case "address":
-      case "city":
-      case "account_holder_name":
-      case "bank":
-        return value.trim() ? null : $t("required");
-      case "birth_date":
       case "membership_start_date":
-        return value.trim() ? null : $t("required_date");
+        return typeof value === "string" && value.trim()
+          ? null
+          : $t("validation.date");
       case "email":
-        return /^\S+@\S+\.\S+$/.test(value) ? null : $t("invalid_email");
+        return typeof value === "string" && /^\S+@\S+\.\S+$/.test(value)
+          ? null
+          : $t("validation.email");
       case "password":
       case "password2":
-        if (!value.trim()) {
-          return null;
-        }
-        if (value.length < 8) {
-          return $t("required_password");
+        if (typeof value === "string" && value.length < 8) {
+          return $t("validation.password");
         }
         if (otherPasswordValue && value !== otherPasswordValue) {
-          return $t("required_password_match");
+          return $t("validation.password_match");
         }
         return null;
       case "phone":
-        return /^\+?[0-9\s()-]{7,}$/.test(value) ? null : $t("invalid_phone");
+        return typeof value === "string" && /^\+?[0-9\s()-]{7,}$/.test(value)
+          ? null
+          : $t("validation.phone");
       case "zip_code":
-        return /^\d{5}$/.test(value) ? null : $t("invalid_zip_code");
+        return typeof value === "string" && /^\d{5}$/.test(value)
+          ? null
+          : $t("validation.zip_code");
       case "iban":
-        return /^[A-Z]{2}\d{2}[A-Z0-9]{1,30}$/.test(value)
+        return typeof value === "string" &&
+          /^[A-Z]{2}\d{2}[A-Z0-9]{1,30}$/.test(value)
           ? null
-          : $t("invalid_iban");
+          : $t("validation.iban");
       case "bic":
-        return /^[A-Z]{6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3})?$/.test(value)
+        return typeof value === "string" &&
+          /^[A-Z]{6}[A-Z2-9][A-NP-Z0-9]([A-Z0-9]{3})?$/.test(value)
           ? null
-          : $t("invalid_bic");
+          : $t("validation.bic");
       default:
-        return null;
+        return typeof value === "string" && !value.trim() && required
+          ? $t("validation.required")
+          : null;
     }
   }
 
-  $: error = validateField(name, value);
+  $: error = validateField(name, value, required);
+  $: selectedOption = options.find((option) => option.value == value);
+  $: selectedColor = selectedOption ? selectedOption.color : "";
 </script>
 
 <div class="input-box">
@@ -100,22 +115,49 @@
     {#if error}
       <span class="error-message">{error}</span>
     {/if}
-    <input
-      {name}
-      {type}
-      {placeholder}
-      {value}
-      on:input={handleInput}
-      on:blur={handleInput}
-      class="input"
-    />
+    {#if type === "select"}
+      <select
+        {name}
+        bind:value
+        {required}
+        class="input select"
+        style={selectedColor ? `color: ${selectedColor};` : ""}
+      >
+        {#each options as option}
+          <option value={option.value}>{option.label}</option>
+        {/each}
+      </select>
+    {:else if type === "textarea"}
+      <textarea
+        {name}
+        {placeholder}
+        {required}
+        {value}
+        {rows}
+        class="input textarea"
+        style="height:{rows * 1.5}em;"
+      />
+    {:else}
+      <input
+        {name}
+        {type}
+        {placeholder}
+        {value}
+        {required}
+        on:input={handleInput}
+        on:blur={handleInput}
+        class="input"
+      />
+    {/if}
   </div>
 </div>
 
 <style>
+  .select {
+    padding-right: 1.5em;
+  }
   .input-error-container {
     display: flex;
-    flex-direction: column;
     align-items: flex-end;
     width: 100%;
     max-width: 444px;
@@ -131,4 +173,17 @@
   .input {
     width: 100%;
   }
+  input,
+  textarea,
+  select {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    color: white;
+  }
+  textarea {
+    resize: vertical;
+    min-height: 100px;
+  }
 </style>