about page changes

frontend/src/app.d.ts

@@ -1,53 +1,70 @@
 // See https://kit.svelte.dev/docs/types#app
 
 interface Subscription {
-  id: string;
-  name: string;
-  details: string;
-  conditions: string | null;
-  monthly_fee: number;
-  hourly_rate: number;
-  included_hours_per_year: number | null;
-  included_hours_per_month: number | null;
+  id: number | -1;
+  name: string | "";
+  details?: string | "";
+  conditions?: string | "";
+  monthly_fee?: number | -1;
+  hourly_rate?: number | -1;
+  included_hours_per_year?: number | 0;
+  included_hours_per_month?: number | 0;
 }
 
 interface Membership {
-  id: string;
-  status: string;
-  start_date: string;
-  end_date: string;
-  parent_member_id: number | null;
-  subscription_model: Subscription | null;
+  id: number | -1;
+  status: number | -1;
+  start_date: string | "";
+  end_date: string | "";
+  parent_member_id: number | -1;
+  subscription_model: Subscription;
 }
 
 interface BankAccount {
-  id: string;
-  mandate_date_signed: string;
-  bank: string;
-  account_holder_name: string;
-  iban: string;
-  bic: string;
-  mandate_reference: string;
+  id: number | -1;
+  mandate_date_signed: string | "";
+  bank: string | "";
+  account_holder_name: string | "";
+  iban: string | "";
+  bic: string | "";
+  mandate_reference: string | "";
+}
+
+interface DriversLicence {
+  id: number | -1;
+  status: number | -1;
+  licence_number: string | "";
+  issued_date: string | "";
+  expiration_date: string | "";
+  issuing_country: string | "";
+  licence_categories: LicenceCategory[];
+}
+
+interface LicenceCategory {
+  id: number | -1;
+  category: string | "";
 }
 
 interface User {
-  email: string;
-  first_name: string;
-  last_name: string;
-  phone: string | null;
-  notes: string;
-  address: string;
-  zip_code: string;
-  city: string;
-  status: number;
-  id: string;
-  role_id: number;
-  date_of_birth: string;
+  email: string | "";
+  first_name: string | "";
+  last_name: string | "";
+  phone: string | "";
+  notes: string | "";
+  address: string | "";
+  zip_code: string | "";
+  city: string | "";
+  status: number | -1;
+  id: number | -1;
+  role_id: number | -1;
+  date_of_birth: string | "";
+  company: string | "";
+  profile_picture: string | "";
+  payment_status: number | -1;
   membership: Membership;
   bank_account: BankAccount;
-  company: string | null;
-  profile_picture: string | null;
-  payment_status: number;
+  drivers_licence: DriversLicence;
+  notes: string | "";
 }
 
 declare global {
@@ -55,6 +72,7 @@ declare global {
     // interface Error {}
     interface Locals {
       user: User;
+      subscriptions: Subscription[];
     }
     // interface PageData {}
     // interface Platform {}

frontend/src/hooks.server.js

@@ -27,7 +27,7 @@ export async function handle({ event, resolve }) {
   }
   // find the user based on the jwt
 
-  const userData = await response.json();
+  const data = await response.json();
 
   // Check if the server sent a new token
   const newToken = response.headers.get("Set-Cookie");
@@ -44,7 +44,8 @@ export async function handle({ event, resolve }) {
     }
   }
 
-  event.locals.user = userData;
+  event.locals.subscriptions = data.subscriptions;
+  event.locals.user = data.user;
   if (event.locals.user.date_of_birth) {
     event.locals.user.date_of_birth =
       event.locals.user.date_of_birth.split("T")[0];

frontend/src/lib/components/Header.svelte

@@ -46,8 +46,8 @@
         <div class="header-nav-item">
           <a href="/auth/about/{$page.data.user.id}">
             <img
-              src={$page.data.user.thumbnail
-                ? $page.data.user.thumbnail
+              src={$page.data.user.profile_picture
+                ? $page.data.user.profile_picture
                 : Avatar}
               alt={`${$page.data.user.first_name} ${$page.data.user.last_name}`}
             />

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>

frontend/src/lib/css/styles.css

@@ -347,9 +347,9 @@ li strong {
   align-items: center;
   justify-content: space-between;
   margin: 10px 0;
-  padding: 0 20px;
+  padding: 10px;
   width: 100%;
-  height: 73px;
+  height: auto;
   box-sizing: border-box;
   background-color: #2f2f2f;
   border-radius: 3px;

frontend/src/lib/css/styles.min.css

@@ -347,9 +347,9 @@ li strong {
   align-items: center;
   justify-content: space-between;
   margin: 10px 0;
-  padding: 0 20px;
+  padding: 10px;
   width: 100%;
-  height: 73px;
+  height: auto;
   box-sizing: border-box;
   background-color: #2f2f2f;
   border-radius: 3px;
@@ -371,7 +371,7 @@ li strong {
 }
 @media (min-width: 680px) {
   .input-box {
-    padding: 0 30px;
+    padding: 10px;
   }
 }
 .btn-container {

frontend/src/lib/locales/de.js

@@ -12,6 +12,60 @@ export default {
     4: "Bearbeiter",
     8: "Administrator",
   },
+  placeholder: {
+    password: "Passwort eingeben...",
+    email: "Emailadresse eingeben...",
+    company: "Firmennamen eingeben...",
+    first_name: "Vornamen eingeben...",
+    last_name: "Nachnamen eingeben...",
+    phone: "Telefonnummer eingeben...",
+    address: "Straße und Hausnummer eingeben...",
+    zip_code: "Postleitzahl eingeben...",
+    city: "Wohnort eingeben...",
+    bank_name: "Namen der Bank eingeben...",
+    parent_member_id: "Mitgliedsnr des Hauptmitglieds eingeben...",
+    bank_account_holder: "Namen eingeben...",
+    iban: "IBAN eingeben..",
+    bic: "BIC eingeben(Bei nicht deutschen Konten)...",
+    mandate_reference: "SEPA Mandatsreferenz eingeben..",
+    notes: "Deine Notizen zu {name}...",
+  },
+  validation: {
+    required: "Eingabe benötigt",
+    password: "Password zu kurz, mindestens 8 Zeichen",
+    password_match: "Passwörter stimmen nicht überein!",
+    phone: "Ungültiges Format(+491738762387 oder 0173850698)",
+    zip_code: "Ungültige Postleitzahl(Nur deutsche Wohnorte sind zulässig)",
+    bic: "Ungültige BIC",
+    iban: "Ungültige IBAN",
+    date: "Bitte geben Sie ein Datum ein",
+    email: "Ungültige Emailadresse",
+  },
+  licenceCategory: {
+    AM: "Mopeds und leichte vierrädrige Kraftfahrzeuge(50ccm,max 45km/h)",
+    A1: "Leichte Motorräder(125ccm)",
+    A2: "Motorräder mit mittlerer Leistung(max 35kW)",
+    A: "Motorräder",
+    B: "Kraftfahrzeuge ≤ 3500 kg, ≤ 8 Sitzplätze",
+    C1: "Mittelschwere Fahrzeuge -7500 kg",
+    C: "Schwere Nutzfahrzeuge > 3500 kg",
+    D1: "Kleinbusse 9-16 Sitzplätze",
+    D: "Busse > 8 Sitzplätze",
+    BE: "Fahrzeugklasse B mit Anhänger",
+    C1E: "Fahrzeugklasse C1 mit Anhänger",
+    CE: "Fahrzeugklasse C mit Anhänger",
+    D1E: "Fahrzeugklasse D1 mit Anhänger",
+    DE: "Fahrzeugklasse D mit Anhänger",
+    L: "Land-, Forstwirtschaftsfahrzeuge, Stapler max 40km/h",
+    T: "Land-, Forstwirtschaftsfahrzeuge, Stapler max 60km/h",
+  },
+  subscription_model: "Mitgliedschatfsmodell",
+  licence: "Lizenz",
+  monthly_fee: "Monatliche Gebühr",
+  hourly_rate: "Stundensatz",
+  details: "Details",
+  conditions: "Bedingungen",
+  user_role: "Nutzerrolle",
   unknown: "Unbekannt",
   notes: "Notizen",
   address: "Straße & Hausnummer",
@@ -20,9 +74,8 @@ export default {
   forgot_password: "Passwort vergessen?",
   password: "Passwort",
   password_repeat: "Passwort wiederholen",
-  placeholder_password: "Passwort eingeben...",
   email: "Email",
-  placeholder_email: "Emailadresse eingeben...",
+  company: "Firma",
   login: "Anmelden",
   user: "Nutzer",
   user_login: "Nutzer Anmeldung",
@@ -34,35 +87,13 @@ export default {
   last_name: "Nachname",
   phone: "Telefonnummer",
   birth_date: "Geburtstag",
-  placeholder_first_name: "Vornamen eingeben...",
-  placeholder_last_name: "Nachnamen eingeben...",
-  invalid_email: "Ungültige Emailadresse",
-  placeholder_phone: "Telefonnummer eingeben...",
-  placeholder_address: "Straße und Hausnummer eingeben...",
-  placeholder_zip_code: "Postleitzahl eingeben...",
-  placeholder_city: "Wohnort eingeben...",
-  placeholder_bank_name: "Namen der Bank eingeben...",
   status: "Status",
   start: "Beginn",
   end: "Ende",
   parent_member_id: "Hauptmitgliedsnr.",
-  placeholder_parent_member_id: "Mitgliedsnr des Hauptmitglieds eingeben...",
   bank_account_holder: "Kontoinhaber",
   bank_name: "Bank",
   iban: "IBAN",
   bic: "BIC",
   mandate_reference: "SEPA Mandat",
-  placeholder_bank_account_holder: "Namen eingeben...",
-  placeholder_iban: "IBAN eingeben..",
-  placeholder_bic: "BIC eingeben(Bei nicht deutschen Konten)...",
-  placeholder_mandate_reference: "SEPA Mandatsreferenz eingeben..",
-  required: "Eingabe benötigt",
-  required_password: "Password zu kurz, mindestens 8 Zeichen",
-  required_password_match: "Passwörter stimmen nicht überein!",
-  invalid_phone: "Ungültiges Format(+491738762387 oder 0173850698)",
-  invalid_zip_code:
-    "Ungültige Postleitzahl(Nur deutsche Wohnorte sind zulässig)",
-  invalid_bic: "Ungültige BIC",
-  invalid_iban: "Ungültige IBAN",
-  required_date: "Bitte geben Sie ein Datum ein",
 };

frontend/src/lib/utils/utils.js

@@ -68,13 +68,20 @@ export function isEmpty(obj) {
   }
   return true;
 }
+
 /**
- * Test whether or not an object is empty.
+ * @typedef {Object} FormattedError
+ * @property {string} error - The error message
+ * @property {number} id - A unique identifier for the error
+ */
+/**
+ * Format Error object(s)
  * @param {any} obj - The object to test
- * @returns `true` or `false`
+ * @returns @type {FormattedError[]}
  */
 
 export function formatError(obj) {
+  /** @type {FormattedError[]} */
   const errors = [];
   if (typeof obj === "object" && obj !== null) {
     if (Array.isArray(obj)) {
@@ -103,3 +110,9 @@ export function formatError(obj) {
 
   return errors;
 }
+
+export function toRFC3339(dateString) {
+  if (!dateString) return "";
+  const date = new Date(dateString);
+  return date.toISOString();
+}

frontend/src/routes/+layout.js

@@ -1,5 +1,5 @@
 /** @type {import('./$types').LayoutLoad} */
 export async function load({ fetch, url, data }) {
-  const { user } = data;
-  return { fetch, url: url.pathname, user };
+  const { user, subscriptions } = data;
+  return { fetch, url: url.pathname, user, subscriptions };
 }

frontend/src/routes/+layout.server.js

@@ -2,5 +2,6 @@
 export async function load({ locals }) {
   return {
     user: locals.user,
+    subscriptions: locals.subscriptions,
   };
 }

frontend/src/routes/auth/about/[id]/+page.server.js

@@ -1,6 +1,7 @@
 import { BASE_API_URI } from "$lib/utils/constants";
 import { formatError } from "$lib/utils/helpers";
 import { fail, redirect } from "@sveltejs/kit";
+import { toRFC3339 } from "$lib/utils/utils";
 
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ locals, params }) {
@@ -21,19 +22,50 @@ export const actions = {
    * @returns Error data or redirects user to the home page or the previous page
    */
   updateUser: async ({ request, fetch, cookies, locals }) => {
-    const formData = await request.formData();
-    /** @type {Record<string, string>} */
-    const updateData = {};
+    let formData = await request.formData();
 
-    // Convert FormData to a plain object
-    formData.forEach((value, key) => {
-      if (typeof value === "string" && value !== "") {
-        updateData[key] = value;
-      }
-    });
+    /** @type {Partial<App.Locals['user']>} */
+    const updateData = {
+      id: Number(formData.get("id")),
+      first_name: String(formData.get("first_name")),
+      last_name: String(formData.get("last_name")),
+      email: String(formData.get("email")),
+      phone: String(formData.get("phone")),
+      notes: String(formData.get("notes")),
+      address: String(formData.get("address")),
+      zip_code: String(formData.get("zip_code")),
+      city: String(formData.get("city")),
+      date_of_birth: toRFC3339(formData.get("birth_date")),
+      company: String(formData.get("company")),
+      profile_picture: String(formData.get("profile_picture")),
+      membership: {
+        id: Number(formData.get("membership_id")),
+        start_date: toRFC3339(formData.get("membership_start_date")),
+        end_date: toRFC3339(formData.get("membership_end_date")),
+        status: Number(formData.get("membership_status")),
+        parent_member_id: Number(formData.get("parent_member_id")),
+        subscription_model: {
+          id: Number(formData.get("subscription_model_id")),
+          name: String(formData.get("subscription_model_name")),
+        },
+      },
+      bank_account: {
+        id: Number(formData.get("bank_account_id")),
+        mandate_date_signed: String(formData.get("mandate_date_signed")),
+        bank: String(formData.get("bank")),
+        account_holder_name: String(formData.get("account_holder_name")),
+        iban: String(formData.get("iban")),
+        bic: String(formData.get("bic")),
+        mandate_reference: String(formData.get("mandate_reference")),
+      },
+    };
 
+    // Remove undefined or null properties
+    const cleanUpdateData = Object.fromEntries(
+      Object.entries(updateData).filter(([_, v]) => v != null)
+    );
+    console.dir(cleanUpdateData);
     const apiURL = `${BASE_API_URI}/backend/users/update/`;
-
     const res = await fetch(apiURL, {
       method: "PATCH",
       credentials: "include",
@@ -41,7 +73,7 @@ export const actions = {
         "Content-Type": "application/json",
         Cookie: `jwt=${cookies.get("jwt")}`,
       },
-      body: JSON.stringify(updateData),
+      body: JSON.stringify(cleanUpdateData),
     });
 
     if (!res.ok) {
@@ -51,11 +83,11 @@ export const actions = {
     }
 
     const response = await res.json();
-
     locals.user = response;
 
+    // Format dates
     if (locals.user.date_of_birth) {
-      locals.user.date_of_birth = response["date_of_birth"].split("T")[0];
+      locals.user.date_of_birth = response.date_of_birth.split("T")[0];
     }
     if (locals.user.membership?.start_date) {
       locals.user.membership.start_date =
@@ -65,6 +97,7 @@ export const actions = {
       locals.user.membership.end_date =
         locals.user.membership.end_date.split("T")[0];
     }
+
     throw redirect(303, `/auth/about/${response.id}`);
   },
   /**
@@ -99,9 +132,10 @@ export const actions = {
 
     return {
       success: true,
-      thumbnail: response["s3_url"],
+      profile_picture: response[""],
     };
   },
+
   /**
    *
    * @param request - The request object
@@ -132,7 +166,7 @@ export const actions = {
 
     return {
       success: true,
-      thumbnail: "",
+      profile_picture: "",
     };
   },
 };

frontend/src/routes/auth/about/[id]/+page.svelte

@@ -11,7 +11,14 @@
   import { t } from "svelte-i18n";
   import { fly } from "svelte/transition";
 
-  $: ({ user } = $page.data);
+  /** @type {import('./$types').ActionData} */
+  export let form;
+
+  /** @type {App.Locals['subscriptions']}*/
+  $: subscriptions = $page.data.subscriptions;
+
+  /** @type {App.Locals['user']}*/
+  $: user = $page.data.user;
 
   /** @typedef {{name: string, src: string}} Avatar */
   const avatarFiles = import.meta.glob("$lib/img/Avatar-*.jpeg", {
@@ -20,11 +27,38 @@
   /** @type{Avatar[]} */
   let avatars = [];
 
-  const TABS = ["profile", "membership", "bankaccount"];
+  const TABS = ["profile", "licence", "membership", "bankaccount"];
   let activeTab = TABS[0];
 
-  /** @type{string[]} */
-  let errorMessages = [];
+  $: subscriptionModelOptions = subscriptions.map((sub) => ({
+    value: sub?.name ?? "",
+    label: sub?.name ?? "",
+  }));
+
+  const userStatusOptions = [
+    { value: 1, label: $t("userStatus.1"), color: "#b1b1b1" }, // Grey for "Nicht verifiziert"
+    { value: 2, label: $t("userStatus.2"), color: "#90EE90" }, // Light green for "Verifiziert"
+    { value: 3, label: $t("userStatus.3"), color: "#00bc00" }, // Green for "Aktiv"
+    { value: 4, label: $t("userStatus.4"), color: "#FFC0CB" }, // Pink for "Passiv"
+    { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
+  ];
+
+  const userRoleOptions = [
+    { value: 0, label: $t("userRole.0"), color: "#b1b1b1" }, // Grey for "Mitglied"
+    { value: 1, label: $t("userRole.1"), color: "#00bc00" }, // Green for "Betrachter"
+    { value: 4, label: $t("userRole.4"), color: "#FFC0CB" }, // Pink for "Bearbeiter"
+    { value: 8, label: $t("userRole.8"), color: "#FF4646" }, // Red for "Admin"
+  ];
+  const membershipStatusOptions = [
+    { value: 3, label: $t("userStatus.3"), color: "#00bc00" }, // Green for "Aktiv"
+    { value: 4, label: $t("userStatus.4"), color: "#FFC0CB" }, // Pink for "Passiv"
+    { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
+  ];
+  const licenceStatusOptions = [
+    { value: 3, label: $t("userStatus.3"), color: "#00bc00" }, // Green for "Aktiv"
+    { value: 4, label: $t("userStatus.4"), color: "#FFC0CB" }, // Pink for "Passiv"
+    { value: 5, label: $t("userStatus.5"), color: "#FF4646" }, // Red for "Deaktiviert"
+  ];
 
   let showModal = false,
     isUploading = false,
@@ -37,7 +71,13 @@
   const close = () => (showModal = false);
   const toggleAvatars = () => (showAvatars = !showAvatars);
 
+  $: selectedSubscriptionModel =
+    subscriptions.find(
+      (sub) => sub?.id === user.membership?.subscription_model.id
+    ) || null;
+
   onMount(() => {
+    console.dir(user);
     avatars = Object.entries(avatarFiles).map(([path, module]) => {
       if (typeof path !== "string") {
         throw new Error("Unexpected non-string path");
@@ -60,9 +100,6 @@
     });
   });
 
-  /** @type {import('./$types').ActionData} */
-  export let form;
-
   /**
    * Sets the active tab
    * @param {string} tab - The tab to set as active
@@ -73,28 +110,11 @@
 
   /** @type {import('./$types').SubmitFunction} */
   const handleUpdate = async ({ form, formData, action, cancel }) => {
-    errorMessages = [];
-    const errorElements = form.querySelectorAll(".error-message");
-
-    errorElements.forEach((element) => {
-      if (element.textContent) {
-        errorMessages.push(element.textContent);
-      }
-    });
-
-    if (errorMessages.length > 0) {
-      cancel();
-      return;
-    }
-
-    errorMessages = [];
     isUpdating = true;
     return async ({ result }) => {
       isUpdating = false;
       if (result.type === "success" || result.type === "redirect") {
         close();
-      } else if (result.type == "failure" && result.data?.errors) {
-        errorMessages = result.data.errors.map((error) => error.error);
       }
       await applyAction(result);
     };
@@ -108,7 +128,7 @@
       /** @type {any} */
       const res = result;
       if (result.type === "success" || result.type === "redirect") {
-        user.thumbnail = res.data.thumbnail;
+        user.profile_picture = res.data.profile_picture;
       }
       await applyAction(result);
     };
@@ -118,7 +138,7 @@
 <div class="hero-container">
   <div class="hero-logo">
     <img
-      src={user.thumbnail ? user.thumbnail : Avatar}
+      src={user.profile_picture ? user.profile_picture : Avatar}
       alt={`${user.first_name} ${user.last_name}`}
       width="200"
     />
@@ -164,10 +184,10 @@
         <span class="value">{user.phone}</span>
       </h3>
     {/if}
-    {#if user.birth_date}
+    {#if user.date_of_birth}
       <h3 class="hero-subtitle subtitle info-row">
         <span class="label">Geburtstag:</span>
-        <span class="value">{user.birth_date}</span>
+        <span class="value">{user.date_of_birth}</span>
       </h3>
     {/if}
     {#if user.notes}
@@ -195,13 +215,13 @@
       >
         <div class="current-avatar">
           <ImageInput
-            avatar={user.thumbnail}
-            fieldName="thumbnail"
+            avatar={user.profile_picture}
+            fieldName="profile_picture"
             title="Nutzerbild auswählen"
           />
         </div>
         <div class="avatar-buttons">
-          {#if !user.thumbnail}
+          {#if !user.profile_picture}
             {#if isUploading}
               <SmallLoader width={30} message={"Uploading..."} />
             {:else}
@@ -211,8 +231,8 @@
             <input
               type="hidden"
               hidden
-              name="thumbnail_url"
-              value={user.thumbnail}
+              name="profile_picture_url"
+              bind:value={user.profile_picture}
               required
             />
             {#if isUploading}
@@ -240,7 +260,7 @@
             <button
               class="avatar-option"
               on:click={() => {
-                user.thumbnail = avatar.src;
+                user.profile_picture = avatar.src;
                 showAvatars = false;
               }}
             >
@@ -256,6 +276,7 @@
       method="POST"
       use:enhance={handleUpdate}
     >
+      <input name="id" type="number" hidden bind:value={user.id} />
       <h1 class="step-title" style="text-align: center;">{$t("user_edit")}</h1>
       {#if form?.success}
         <h4
@@ -279,7 +300,12 @@
         {/each}
       {/if}
 
-      <input type="hidden" hidden name="thumbnail" value={user.thumbnail} />
+      <input
+        type="hidden"
+        hidden
+        name="profile_picture"
+        bind:value={user.profile_picture}
+      />
 
       <div class="button-container">
         {#each TABS as tab}
@@ -293,150 +319,238 @@
           </button>
         {/each}
       </div>
-      {#if activeTab == "profile"}
-        <div class="tab-content">
+      <div
+        class="tab-content"
+        style="display: {activeTab === 'profile' ? 'block' : 'none'}"
+      >
+        <InputField
+          name="status"
+          type="select"
+          label={$t("status")}
+          bind:value={user.status}
+          options={userStatusOptions}
+        />
+        {#if user.role_id === 8}
           <InputField
-            name="password"
-            type="password"
-            label={$t("password")}
-            placeholder={$t("placeholder_password")}
-            bind:value={password}
-            otherPasswordValue={password2}
+            name="role_id"
+            type="select"
+            label={$t("user_role")}
+            bind:value={user.role_id}
+            options={userRoleOptions}
           />
-          <InputField
-            name="password2"
-            type="password"
-            label={$t("password_repeat")}
-            placeholder={$t("placeholder_password")}
-            bind:value={password2}
-            otherPasswordValue={password}
-          />
-          <InputField
-            name="first_name"
-            label={$t("first_name")}
-            value={user.first_name}
-            placeholder={$t("placeholder_first_name")}
-          />
-          <InputField
-            name="last_name"
-            label={$t("last_name")}
-            value={user.last_name}
-            placeholder={$t("placeholder_last_name")}
-          />
-          <InputField
-            name="email"
-            type="email"
-            label={$t("email")}
-            value={user.email}
-            placeholder={$t("placeholder_email")}
-          />
-          <InputField
-            name="phone"
-            type="tel"
-            label={$t("phone")}
-            value={user.phone || ""}
-            placeholder={$t("placeholder_phone")}
-          />
-          <InputField
-            name="birth_date"
-            type="date"
-            label={$t("birth_date")}
-            value={user.birth_date || ""}
-            placeholder={$t("placeholder_birth_date")}
-          />
-          <InputField
-            name="address"
-            label={$t("address")}
-            value={user.address || ""}
-            placeholder={$t("placeholder_address")}
-          />
-          <InputField
-            name="zip_code"
-            label={$t("zip_code")}
-            value={user.zip_code || ""}
-            placeholder={$t("placeholder_zip_code")}
-          />
-          <InputField
-            name="city"
-            label={$t("city")}
-            value={user.city || ""}
-            placeholder={$t("placeholder_city")}
-          />
-        </div>
-      {:else if activeTab == "membership"}
-        <div class="tab-content">
-          <InputField
-            name="membership_status"
-            label={$t("status")}
-            value={user.membership?.status || ""}
-          />
-          <InputField
-            name="membership_start_date"
-            type="date"
-            label={$t("start")}
-            value={user.membership?.start_date || ""}
-            placeholder={$t("placeholder_start_date")}
-          />
-          <InputField
-            name="membership_end_date"
-            type="date"
-            label={$t("end")}
-            value={user.membership?.end_date || ""}
-            placeholder={$t("placeholder_end_date")}
-          />
-          <InputField
-            name="parent_member_id"
-            type="number"
-            label={$t("parent_member_id")}
-            value={user.membership?.parent_member_id || ""}
-            placeholder={$t("placeholder_parent_member_id")}
-          />
-        </div>
-      {:else if activeTab == "bankaccount"}
-        <div class="tab-content">
-          <InputField
-            name="account_holder_name"
-            label={$t("bank_account_holder")}
-            value={user.bank_account?.account_holder_name || ""}
-            placeholder={$t("placeholder_bank_account_holder")}
-          />
-          <InputField
-            name="bank"
-            label={$t("bank_name")}
-            value={user.bank_account?.bank || ""}
-            placeholder={$t("placeholder_bank_name")}
-          />
-          <InputField
-            name="iban"
-            label={$t("iban")}
-            value={user.bank_account?.iban || ""}
-            placeholder={$t("placeholder_iban")}
-            toUpperCase={true}
-          />
-          <InputField
-            name="bic"
-            label={$t("bic")}
-            value={user.bank_account?.bic || ""}
-            placeholder={$t("placeholder_bic")}
-            toUpperCase={true}
-          />
-          <InputField
-            name="mandate_reference"
-            label={$t("mandate_reference")}
-            value={user.bank_account?.mandate_reference || ""}
-            placeholder={$t("placeholder_mandate_reference")}
-          />
-        </div>
-      {/if}
-      {#if errorMessages.length > 0}
-        <div class="error-container">
-          {#each errorMessages as message, i (i)}
-            <p class="error-message" transition:fly={{ y: -20, duration: 300 }}>
-              {message}
+        {/if}
+        <InputField
+          name="password"
+          type="password"
+          label={$t("password")}
+          placeholder={$t("placeholder.password")}
+          bind:value={password}
+          otherPasswordValue={password2}
+        />
+        <InputField
+          name="password2"
+          type="password"
+          label={$t("password_repeat")}
+          placeholder={$t("placeholder.password")}
+          bind:value={password2}
+          otherPasswordValue={password}
+        />
+        <InputField
+          name="first_name"
+          label={$t("first_name")}
+          bind:value={user.first_name}
+          placeholder={$t("placeholder.first_name")}
+          required={true}
+        />
+        <InputField
+          name="last_name"
+          label={$t("last_name")}
+          bind:value={user.last_name}
+          placeholder={$t("placeholder.last_name")}
+          required={true}
+        />
+        <InputField
+          name="company"
+          label={$t("company")}
+          bind:value={user.company}
+          placeholder={$t("placeholder.company")}
+        />
+        <InputField
+          name="email"
+          type="email"
+          label={$t("email")}
+          bind:value={user.email}
+          placeholder={$t("placeholder.email")}
+          required={true}
+        />
+        <InputField
+          name="phone"
+          type="tel"
+          label={$t("phone")}
+          bind:value={user.phone}
+          placeholder={$t("placeholder.phone")}
+        />
+        <InputField
+          name="birth_date"
+          type="date"
+          label={$t("birth_date")}
+          bind:value={user.date_of_birth}
+          placeholder={$t("placeholder.birth_date")}
+        />
+        <InputField
+          name="address"
+          label={$t("address")}
+          bind:value={user.address}
+          placeholder={$t("placeholder.address")}
+        />
+        <InputField
+          name="zip_code"
+          label={$t("zip_code")}
+          bind:value={user.zip_code}
+          placeholder={$t("placeholder.zip_code")}
+        />
+        <InputField
+          name="city"
+          label={$t("city")}
+          bind:value={user.city}
+          placeholder={$t("placeholder.city")}
+        />
+        <InputField
+          name="notes"
+          type="textarea"
+          label={$t("notes")}
+          bind:value={user.notes}
+          placeholder={$t("placeholder.notes", {
+            values: { name: user.first_name || "" },
+          })}
+          rows={10}
+        />
+      </div>
+      <div
+        class="tab-content"
+        style="display: {activeTab === 'licence' ? 'block' : 'none'}"
+      >
+        <InputField
+          name="licence_status"
+          type="select"
+          label={$t("status")}
+          bind:value={user.drivers_licence.status}
+          options={licenceStatusOptions}
+        />
+      </div>
+      <div
+        class="tab-content"
+        style="display: {activeTab === 'membership' ? 'block' : 'none'}"
+      >
+        <InputField
+          name="membership_status"
+          type="select"
+          label={$t("status")}
+          bind:value={user.membership.status}
+          options={membershipStatusOptions}
+        />
+        <InputField
+          name="subscription_model_name"
+          type="select"
+          label={$t("subscription_model")}
+          bind:value={user.membership.subscription_model.name}
+          options={subscriptionModelOptions}
+        />
+        <div class="subscription-info">
+          <div class="subscription-column">
+            <p>
+              <strong>{$t("monthly_fee")}:</strong>
+              {selectedSubscriptionModel?.monthly_fee || "-"}
             </p>
-          {/each}
+            <p>
+              <strong>{$t("hourly_rate")}:</strong>
+              {selectedSubscriptionModel?.hourly_rate || "-"}
+            </p>
+            {#if selectedSubscriptionModel?.included_hours_per_year}
+              <p>
+                <strong>{$t("included_hours_per_year")}:</strong>
+                {selectedSubscriptionModel?.included_hours_per_year}
+              </p>
+            {/if}
+            {#if selectedSubscriptionModel?.included_hours_per_month}
+              <p>
+                <strong>{$t("included_hours_per_month")}:</strong>
+                {selectedSubscriptionModel?.included_hours_per_month}
+              </p>
+            {/if}
+          </div>
+          <div class="subscription-column">
+            <p>
+              <strong>{$t("details")}:</strong>
+              {selectedSubscriptionModel?.details || "-"}
+            </p>
+            {#if selectedSubscriptionModel?.conditions}
+              <p>
+                <strong>{$t("conditions")}:</strong>
+                {selectedSubscriptionModel?.conditions}
+              </p>
+            {/if}
+          </div>
         </div>
-      {/if}
+        <InputField
+          name="membership_start_date"
+          type="date"
+          label={$t("start")}
+          bind:value={user.membership.start_date}
+          placeholder={$t("placeholder.start_date")}
+        />
+        <InputField
+          name="membership_end_date"
+          type="date"
+          label={$t("end")}
+          bind:value={user.membership.end_date}
+          placeholder={$t("placeholder.end_date")}
+        />
+        <InputField
+          name="parent_member_id"
+          type="number"
+          label={$t("parent_member_id")}
+          bind:value={user.membership.parent_member_id}
+          placeholder={$t("placeholder.parent_member_id")}
+        />
+      </div>
+      <div
+        class="tab-content"
+        style="display: {activeTab === 'bankaccount' ? 'block' : 'none'}"
+      >
+        <InputField
+          name="account_holder_name"
+          label={$t("bank_account_holder")}
+          bind:value={user.bank_account.account_holder_name}
+          placeholder={$t("placeholder.bank_account_holder")}
+        />
+        <InputField
+          name="bank"
+          label={$t("bank_name")}
+          bind:value={user.bank_account.bank}
+          placeholder={$t("placeholder.bank_name")}
+        />
+        <InputField
+          name="iban"
+          label={$t("iban")}
+          bind:value={user.bank_account.iban}
+          placeholder={$t("placeholder.iban")}
+          toUpperCase={true}
+        />
+        <InputField
+          name="bic"
+          label={$t("bic")}
+          bind:value={user.bank_account.bic}
+          placeholder={$t("placeholder.bic")}
+          toUpperCase={true}
+        />
+        <InputField
+          name="mandate_reference"
+          label={$t("mandate_reference")}
+          bind:value={user.bank_account.mandate_reference}
+          placeholder={$t("placeholder.mandate_reference")}
+        />
+      </div>
       <div class="button-container">
         {#if isUpdating}
           <SmallLoader width={30} message={"Aktualisiere..."} />
@@ -452,18 +566,26 @@
 {/if}
 
 <style>
-  .error-container {
-    background-color: #fee2e2;
-    border: 1px solid #f87171;
-    border-radius: 4px;
-    padding: 1rem;
-    margin-bottom: 1rem;
+  .subscription-info {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 1rem;
+    font-size: 0.9rem;
   }
 
-  .error-message {
-    color: #dc2626;
+  .subscription-column {
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .subscription-column p {
     margin: 0.5rem 0;
-    font-size: 0.9rem;
+  }
+
+  .subscription-column strong {
+    display: inline-block;
+    min-width: 100px;
   }
   .tab-content {
     padding: 1rem;

frontend/src/routes/auth/login/+page.svelte

@@ -55,7 +55,7 @@
         class="input"
         type="email"
         name="email"
-        placeholder="{$t('placeholder_email')} "
+        placeholder="{$t('placeholder.email')} "
       />
     </div>
     <div class="input-box">
@@ -65,7 +65,7 @@
           class="input"
           type="password"
           name="password"
-          placeholder={$t("placeholder_password")}
+          placeholder={$t("placeholder.password")}
         />
         <a href="/auth/password/request-change" class="forgot-password"
           >{$t("forgot_password")}?</a

frontend/src/routes/auth/logout/+page.server.js

@@ -23,7 +23,7 @@ export const actions = {
     };
 
     const res = await fetch(
-      `${BASE_API_URI}/users/backend/logout/`,
+      `${BASE_API_URI}/backend/users/logout/`,
       requestInitOptions
     );
 
@@ -34,7 +34,6 @@ export const actions = {
       return fail(400, { errors: errors });
     }
 
-    // The server should clear the cookie, so we don't need to handle it here
     // eat the cookie
     cookies.delete("jwt", { path: "/" });