moved subscriptions and licences requests to subpages & renaming

frontend/src/app.d.ts

@@ -30,7 +30,7 @@ interface BankAccount {
   mandate_reference: string | "";
 }
 
-interface DriversLicence {
+interface Licence {
   id: number | -1;
   status: number | -1;
   licence_number: string | "";
@@ -63,7 +63,7 @@ interface User {
   payment_status: number | -1;
   membership: Membership;
   bank_account: BankAccount;
-  drivers_licence: DriversLicence;
+  licence: Licence;
   notes: string | "";
 }
 
@@ -72,6 +72,7 @@ declare global {
     // interface Error {}
     interface Locals {
       user: User;
+      users: User[];
       subscriptions: Subscription[];
       licence_categories: LicenceCategory[];
     }

frontend/src/hooks.server.js

@@ -25,7 +25,6 @@ export async function handle({ event, resolve }) {
     event.cookies.delete("jwt", { path: "/" });
     return await resolve(event);
   }
-  // find the user based on the jwt
 
   const data = await response.json();
 
@@ -62,13 +61,13 @@ export async function handle({ event, resolve }) {
         event.locals.user.membership.end_date.split("T")[0];
     }
   }
-  if (event.locals.user.drivers_licence?.issued_date) {
-    event.locals.user.drivers_licence.issued_date =
-      event.locals.user.drivers_licence.issued_date.split("T")[0];
+  if (event.locals.user.licence?.issued_date) {
+    event.locals.user.licence.issued_date =
+      event.locals.user.licence.issued_date.split("T")[0];
   }
-  if (event.locals.user.drivers_licence?.expiration_date) {
-    event.locals.user.drivers_licence.expiration_date =
-      event.locals.user.drivers_licence.expiration_date.split("T")[0];
+  if (event.locals.user.licence?.expiration_date) {
+    event.locals.user.licence.expiration_date =
+      event.locals.user.licence.expiration_date.split("T")[0];
   }
   if (
     event.locals.user.bank_account &&

frontend/src/lib/components/InputField.svelte

@@ -106,7 +106,7 @@
       case "licence_number":
         return typeof value === "string" && value.length == 11
           ? null
-          : $t("validation.drivers_licence");
+          : $t("validation.licence");
 
       default:
         return typeof value === "string" && !value.trim() && required

frontend/src/lib/components/UserEditForm.svelte

@@ -1,12 +1,9 @@
 <script>
   import InputField from "$lib/components/InputField.svelte";
   import SmallLoader from "$lib/components/SmallLoader.svelte";
-  import { onMount } from "svelte";
   import { applyAction, enhance } from "$app/forms";
-  import { page } from "$app/stores";
   import { receive, send } from "$lib/utils/helpers";
   import { t } from "svelte-i18n";
-  import { fly } from "svelte/transition";
 
   /** @type {import('../../routes/auth/about/[id]/$types').ActionData} */
   export let form;
@@ -88,10 +85,6 @@
       );
   }
 
-  onMount(() => {
-    console.dir(user);
-  });
-
   /**
    * Sets the active tab
    * @param {string} tab - The tab to set as active
@@ -277,14 +270,14 @@
       name="licence_status"
       type="select"
       label={$t("status")}
-      bind:value={user.drivers_licence.status}
+      bind:value={user.licence.status}
       options={licenceStatusOptions}
     />
     <InputField
       name="licence_number"
       type="text"
       label={$t("licence_number")}
-      bind:value={user.drivers_licence.licence_number}
+      bind:value={user.licence.licence_number}
       placeholder={$t("placeholder.licence_number")}
       toUpperCase={true}
     />
@@ -292,20 +285,20 @@
       name="issued_date"
       type="date"
       label={$t("issued_date")}
-      bind:value={user.drivers_licence.issued_date}
+      bind:value={user.licence.issued_date}
       placeholder={$t("placeholder.issued_date")}
     />
     <InputField
       name="expiration_date"
       type="date"
       label={$t("expiration_date")}
-      bind:value={user.drivers_licence.expiration_date}
+      bind:value={user.licence.expiration_date}
       placeholder={$t("placeholder.expiration_date")}
     />
     <InputField
       name="country"
       label={$t("country")}
-      bind:value={user.drivers_licence.country}
+      bind:value={user.licence.country}
       placeholder={$t("placeholder.issuing_country")}
     />
     <div class="licence-categories">
@@ -323,8 +316,8 @@
                   name="licence_categories[]"
                   value={JSON.stringify(category)}
                   label={category.category}
-                  checked={user.drivers_licence.licence_categories != null &&
-                    user.drivers_licence.licence_categories.some(
+                  checked={user.licence.licence_categories != null &&
+                    user.licence.licence_categories.some(
                       (cat) => cat.category === category.category
                     )}
                 />

frontend/src/lib/locales/de.js

@@ -44,7 +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)",
+    licence: "Nummer zu kurz(11 Zeichen)",
   },
   server: {
     error: {

frontend/src/routes/+layout.js

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

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

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

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

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

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

@@ -0,0 +1,66 @@
+import { BASE_API_URI } from "$lib/utils/constants";
+
+/** @type {import('./$types').LayoutServerLoad} */
+export async function load({ cookies, fetch, locals }) {
+  const jwt = cookies.get("jwt");
+  try {
+    // Fetch user data, subscriptions, and licence categories in parallel
+    const [subscriptionsResponse, licenceCategoriesResponse] =
+      await Promise.all([
+        fetch(`${BASE_API_URI}/backend/membership/subscriptions`, {
+          credentials: "include",
+          headers: { Cookie: `jwt=${jwt}` },
+        }),
+        fetch(`${BASE_API_URI}/backend/licence/categories`, {
+          credentials: "include",
+          headers: { Cookie: `jwt=${jwt}` },
+        }),
+      ]);
+
+    // Check if any of the responses are not ok
+    if (!subscriptionsResponse.ok || !licenceCategoriesResponse.ok) {
+      cookies.delete("jwt", { path: "/" });
+      throw new Error("One or more API requests failed");
+    }
+
+    // Parse the JSON responses
+    const [subscriptionsData, licence_categoriesData] = await Promise.all([
+      subscriptionsResponse.json(),
+      licenceCategoriesResponse.json(),
+    ]);
+    // Check if the server sent a new token
+    const newToken =
+      subscriptionsResponse.headers.get("Set-Cookie") == null
+        ? licenceCategoriesResponse.headers.get("Set-Cookie")
+        : subscriptionsResponse.headers.get("Set-Cookie");
+
+    if (newToken) {
+      const match = newToken.match(/jwt=([^;]+)/);
+      if (match) {
+        cookies.set("jwt", match[1], {
+          path: "/",
+          httpOnly: true,
+          secure: process.env.NODE_ENV === "production", // Secure in production
+          sameSite: "lax",
+          maxAge: 5 * 24 * 60 * 60, // 5 days in seconds
+        });
+      }
+    }
+    console.dir(subscriptionsData);
+    console.dir(licence_categoriesData);
+    return {
+      user: locals.user,
+      subscriptions: subscriptionsData.subscriptions,
+      licence_categories: licence_categoriesData.licence_categories,
+    };
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    // In case of any error, clear the JWT cookie
+    cookies.delete("jwt", { path: "/" });
+    return {
+      user: locals.user,
+      subscriptions: null,
+      licence_categories: null,
+    };
+  }
+}

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

@@ -72,7 +72,7 @@ export const actions = {
         bic: String(formData.get("bic")),
         mandate_reference: String(formData.get("mandate_reference")),
       },
-      drivers_licence: {
+      licence: {
         id: Number(formData.get("drivers_licence_id")),
         status: Number(formData.get("licence_status")),
         licence_number: String(formData.get("licence_number")),
@@ -128,13 +128,13 @@ export const actions = {
       locals.user.bank_account.mandate_date_signed =
         locals.user.bank_account.mandate_date_signed.split("T")[0];
     }
-    if (locals.user.drivers_licence?.issued_date) {
-      locals.user.drivers_licence.issued_date =
-        locals.user.drivers_licence.issued_date.split("T")[0];
+    if (locals.user.licence?.issued_date) {
+      locals.user.licence.issued_date =
+        locals.user.licence.issued_date.split("T")[0];
     }
-    if (locals.user.drivers_licence?.expiration_date) {
-      locals.user.drivers_licence.expiration_date =
-        locals.user.drivers_licence.expiration_date.split("T")[0];
+    if (locals.user.licence?.expiration_date) {
+      locals.user.licence.expiration_date =
+        locals.user.licence.expiration_date.split("T")[0];
     }
     throw redirect(303, `/auth/about/${response.id}`);
   },

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

@@ -12,14 +12,7 @@
   /** @type {import('./$types').ActionData} */
   export let form;
 
-  /** @type {App.Locals['subscriptions']}*/
-  $: subscriptions = $page.data.subscriptions;
-
-  /** @type {App.Locals['user']}*/
-  $: user = $page.data.user;
-
-  /** @type {App.Locals['licence_categories']} */
-  $: licence_categories = $page.data.licence_categories;
+  $: ({ user, subscriptions, licence_categories } = $page.data);
 
   let showModal = false;
 
@@ -110,89 +103,6 @@
 {/if}
 
 <style>
-  .category-break {
-    grid-column: 1 / -1;
-    height: 1px;
-    background-color: #ccc;
-    margin-top: 10px;
-    margin-left: 20%;
-    width: 60%;
-    opacity: 0.4;
-  }
-
-  .licence-categories {
-    margin-bottom: 20px;
-  }
-
-  .checkbox-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 0px;
-  }
-
-  .checkbox-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .checkbox-label-container {
-    flex: 0 0 auto;
-    width: 4em;
-    margin-right: 5px;
-  }
-
-  .checkbox-description {
-    flex: 1;
-    font-size: 15px;
-    color: #9b9b9b;
-    margin-left: 10px;
-  }
-
-  @media (min-width: 768px) {
-    .checkbox-grid {
-      grid-template-columns: 1fr 1fr;
-      gap: 0px;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .checkbox-item {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-
-    .checkbox-description {
-      margin-left: 24px;
-      margin-top: 5px;
-      text-align: left;
-    }
-  }
-  .subscription-info {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    margin-top: 1rem;
-    font-size: 0.9rem;
-  }
-
-  .subscription-column {
-    flex: 1;
-    min-width: 200px;
-  }
-
-  .subscription-column p {
-    margin: 0.5rem 0;
-  }
-
-  .subscription-column strong {
-    display: inline-block;
-    min-width: 100px;
-  }
-  .tab-content {
-    padding: 1rem;
-    border-radius: 0 0 3px 3px;
-  }
   .hero-container .hero-subtitle:not(:last-of-type) {
     margin: 0 0 0 0;
   }
@@ -247,25 +157,4 @@
   .value {
     font-size: 1.1rem;
   }
-
-  .button-container {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-top: 1rem;
-    width: 100%;
-  }
-
-  .button-container button {
-    flex: 1 1 0;
-    min-width: 120px;
-    max-width: calc(50%-5px);
-  }
-  @media (max-width: 480px) {
-    .button-container button {
-      flex-basis: 100%;
-      max-width: none;
-    }
-  }
 </style>