moved subscriptions and licences requests to subpages & renaming

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>