Start Charge overlay and forbidden route

src/routes/+layout.ts

@@ -1,13 +1,21 @@
 import type { LayoutLoad } from './$types';
 
 export const load: LayoutLoad = async ({ fetch }) => {
-  const user = await fetch('/api/public/1/auth/myself/', {
+  const userRes = await fetch('/api/public/1/auth/myself/', {
     method: 'GET',
     headers: {
       'Accept': 'application/json',
     }
   });
+  if (!userRes.ok) return {
+    user: null,
+    chargePermission: [],
+  };
+  const user = await userRes.json();
+  const chargePermissionRes = await fetch(`/api/v3/users/${user['id']}/charge_permissions/`);
+  const chargePermission: number[] = chargePermissionRes.ok ? (await chargePermissionRes.json())['authorized_qrcode'] : [];
   return {
-    user: user.ok ? await user.json() : null
+    user: user,
+    chargePermission: chargePermission,
   };
 };

src/routes/[qrcode]/+page.svelte

@@ -1,3 +1,52 @@
-<div class="bg-black pointer-events-auto">
-  START CARD
+<script lang="ts">
+  import { slide } from 'svelte/transition';
+  import { scale } from 'svelte/transition';
+
+  let showOverlay = $state(false);
+  let startingCharge = $state(false);
+
+  async function startCharge() {
+    if (startingCharge) return;
+    startingCharge = true;
+    try {
+      // TODO: StartCharge fetch request
+      console.log("nop");
+    } finally {
+      startingCharge = false;
+    }
+  }
+
+  function closeOverlay() {
+    if (startingCharge) return;
+    showOverlay = false;
+  }
+</script>
+
+<div class="grid grid-rows-6 h-full w-full">
+  <div class="row-start-5 row-span-1 col-start-1 flex flex-col justify-center items-center">
+    <div class="pointer-events-auto">
+      <button class="btn btn-primary btn-lg uppercase" onclick={() => showOverlay = true}>Attivare la Ricarica</button>
+    </div>
+  </div>
+  <div class="row-start-1 row-span-6 col-start-1 flex flex-col justify-end items-center z-10">
+    {#if showOverlay}
+      <div class="h-fit flex flex-col items-center gap-2 rounded-t-md pointer-events-auto p-2"
+           data-theme="light"
+           transition:slide>
+        <!--suppress ALL -->
+        <enhanced:img alt="Please attach the connector to the car" src="./attach_car.png"/>
+        <div class="font-bold uppercase text-md text-gray-700">Avete connesso il cavo alla vostra auto?</div>
+        <div class="flex flex-row justify-around gap-4 w-full">
+          <button class="btn btn-primary btn-xl w-24 grid" onclick={startCharge}>
+            {#if startingCharge}
+              <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2 loading"></span>
+            {:else}
+              <span transition:scale class="col-start-1 col-end-2 row-start-1 row-end-2">SI</span>
+            {/if}
+          </button>
+          <button class="btn btn-secondary btn-xl w-24" onclick={closeOverlay}>NO</button>
+        </div>
+      </div>
+    {/if}
+  </div>
 </div>

src/routes/[qrcode]/+page.ts

@@ -4,5 +4,10 @@ import { redirect } from "@sveltejs/kit";
 export const load: PageLoad = async ({ parent }) => {
   const parentData = await parent();
   if (parentData.user === null) return redirect(303, `${parentData.qrcode}/login`);
+  else {
+    if (!parentData.chargePermission.includes(parentData.qrcode)) {
+      return redirect(303, `${parentData.qrcode}/forbidden`);
+    }
+  }
   return parentData;
 };

src/routes/[qrcode]/forbidden/+page.svelte

@@ -0,0 +1,8 @@
+<div class="pointer-events-auto bg-red-500/50 h-full w-full flex justify-center items-center">
+  <div class="card card-border bg-base-100">
+    <div class="card-body items-center">
+      <h2 class="card-title">Forbidden</h2>
+      <p>You don't have permission to use this chargepoint</p>
+    </div>
+  </div>
+</div>

src/routes/[qrcode]/login/+page.svelte

@@ -25,10 +25,10 @@
     async onUpdate({ form }) {
       // Equivalent to onSubmit for this context. We can validate and then execute things.
       if (form.valid) {
-        // Call an external API with form.data, await the result and update form
+        const payload = { ...form.data, qrcodeid: data.qrcode };
         const response = await fetch("/api/public/1/auth/login/", {
           method: 'POST',
-          body: JSON.stringify(form.data),
+          body: JSON.stringify(payload),
           headers: {
             'Accept': 'application/json',
             'Content-Type': 'application/json'