feat: update before start ui + add loading state

src/pages/api/init-session.ts

@@ -1,5 +1,5 @@
 import type { APIRoute } from "astro";
-import { app } from "@/firebase/server";
+import { app } from "@/lib/firebase/server";
 import { getAuth } from "firebase-admin/auth";
 // TODO: check if we really need this
 export const prerender = false;

src/pages/before-start.astro

@@ -1,57 +1,116 @@
 ---
 import BaseLayout from "@/layouts/layout.astro";
+
+const rules = [
+  "We care about privacy; that's why all your answers are completely anonymous. We only rely on anonymous sessions to avoid spam",
+  "Please be honest. Our goal is to understand the Moroccan IT market and share results with the community.",
+  "The survey is divided into 6 parts: Profile, Learning & Education, AI, Work, Technology, and Community,(we submit your answers at the end of each part)",
+  "All Questions are required unless you have a skip button",
+  "There are two types of questions: Multiple Choice (select one or more options) and Single Select (choose only one option)",
+  "Do not refresh the questions page before submitting your answers"
+];
 ---
 
 <BaseLayout>
-  <div class="max-w-2xl mx-auto py-8 px-4">
-    <div class="bg-white shadow-md rounded-lg p-6">
-      <h2 class="text-xl font-semibold mb-4">Survey Rules</h2>
-      <ul class="list-disc pl-6 mb-6 space-y-2">
-        <li>Answer all questions honestly and to the best of your ability.</li>
-        <li>
-          Complete the survey in one sitting; it should take about 15 minutes.
-        </li>
-        <li>Ensure you have a stable internet connection.</li>
-        <li>
-          Your responses are confidential and will be used for research purposes
-          only.
-        </li>
-        <li>
-          You may exit the survey at any time, but your progress won't be saved.
-        </li>
+  <div class="max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+    <div class="bg-white rounded-2xl">
+      <h1 class="text-xl font-medium text-gray-900 my-6 text-center">
+        Before You Start
+      </h1>
+      <p class="text-base text-gray-700 mb-8">Here's what you need to know:</p>
+      <ul class="space-y-6 mb-10">
+        {
+          rules.map((rule, index) => (
+            <li class="flex items-start">
+              <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-gray-400 bg-gray-100 text-sm font-medium text-gray-600 mr-4 mt-0.5">
+                {index + 1}
+              </span>
+              <span class="text-gray-700">{rule}</span>
+            </li>
+          ))
+        }
       </ul>
+      <div id="captcha-container" class="mb-8 mx-auto w-fit"></div>
+      <div
+        id="error-alert"
+        class="hidden mb-6 p-4 bg-red-100 border-l-4 border-red-500 text-red-700 rounded"
+        role="alert"
+      >
+        <p id="error-message" class="font-medium"></p>
+      </div>
       <button
-        class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out"
-        >Start Survey</button
+        id="start-survey-btn"
+        class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
       >
+        Start
+      </button>
     </div>
   </div>
 </BaseLayout>
 
+<script
+  src="https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onloadTurnstileCallback"
+  defer></script>
+
 <script>
   import { actions } from "astro:actions";
   import { signInAnonymously } from "firebase/auth";
-  import { auth } from "@/firebase/client";
+  import { auth } from "@/lib/firebase/client";
 
-  const startButton = document.querySelector("button") as HTMLButtonElement;
+  const startButton = document.querySelector(
+    "#start-survey-btn"
+  ) as HTMLButtonElement;
+  const errorAlert = document.querySelector("#error-alert") as HTMLDivElement;
+  const errorMessage = document.querySelector(
+    "#error-message"
+  ) as HTMLParagraphElement;
+  let captchaToken = "";
+  // @ts-ignore
+  window.onloadTurnstileCallback = function () {
+    // @ts-ignore
+    window.turnstile.render("#captcha-container", {
+      sitekey: "0x4AAAAAAAkS5usDr1HhE7Gm",
+      callback: function (token: string) {
+        console.log(`Challenge Success ${token}`);
+        captchaToken = token;
+      },
+      theme: "light"
+    });
+  };
+
+  const handleError = () => {
+    errorMessage.innerHTML = `Session initialization failed. Please try again or <a href="https://github.com/geeksblabla/stateofdev.ma/issues" target="_blank" class="underline font-semibold">report the issue</a>.`;
+    errorAlert.classList.remove("hidden");
+    startButton.innerHTML = "Start Survey";
+    startButton.disabled = false;
+    startButton.classList.remove("opacity-50", "cursor-not-allowed");
+  };
 
   startButton.addEventListener("click", async () => {
+    startButton.disabled = true;
+    startButton.innerHTML = "Initializing Session...";
+    startButton.classList.add("opacity-50", "cursor-not-allowed");
+    errorAlert.classList.add("hidden");
+
     try {
       const userCredential = await signInAnonymously(auth);
       const token = await userCredential.user.getIdToken();
       console.log(token);
 
-      const { error } = await actions.initSession({ idToken: token });
-
+      const { error } = await actions.initSession({
+        idToken: token,
+        captchaToken: captchaToken
+      });
       if (error) {
         console.error("Error initializing session:", error);
+        handleError();
         return;
       }
 
       // Redirect to the survey page or reload as needed
       window.location.href = "/survey";
     } catch (error) {
-      console.error("Error during anonymous login:", error);
+      handleError();
     }
   });
 </script>

src/pages/survey.astro

@@ -1,7 +1,7 @@
 ---
 export const prerender = false;
 import BaseLayout from "@/layouts/layout.astro";
-import { app } from "@/firebase/server";
+import { app } from "@/lib/firebase/server";
 import { getAuth } from "firebase-admin/auth";
 import SurveyForm from "@/components/survey/index.astro";
 

src/pages/thanks.astro

@@ -1,7 +1,7 @@
 ---
 export const prerender = false;
 import BaseLayout from "@/layouts/layout.astro";
-import { app } from "@/firebase/server";
+import { app } from "@/lib/firebase/server";
 import { getAuth } from "firebase-admin/auth";
 
 const auth = getAuth(app);