Merge pull request 'supabase' (#6) from supabase into main

Reviewed-on: erman/esn-code-scanner-app#6

package-lock.json

@@ -11,7 +11,8 @@
 				"@supabase/ssr": "^0.6.1",
 				"@supabase/supabase-js": "^2.50.0",
 				"@sveltejs/adapter-node": "^5.2.12",
-				"googleapis": "^150.0.1"
+				"googleapis": "^150.0.1",
+				"papaparse": "^5.5.3"
 			},
 			"devDependencies": {
 				"@sveltejs/kit": "^2.16.0",
@@ -2497,6 +2498,12 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/papaparse": {
+			"version": "5.5.3",
+			"resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.3.tgz",
+			"integrity": "sha512-5QvjGxYVjxO59MGU2lHVYpRWBBtKHnlIAcSe1uNFCkkptUh63NFRj0FJQm7nR67puEruUci/ZkjmEFrjCAyP4A==",
+			"license": "MIT"
+		},
 		"node_modules/path-parse": {
 			"version": "1.0.7",
 			"resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",

package.json

@@ -32,6 +32,7 @@
 		"@supabase/ssr": "^0.6.1",
 		"@supabase/supabase-js": "^2.50.0",
 		"@sveltejs/adapter-node": "^5.2.12",
-		"googleapis": "^150.0.1"
+		"googleapis": "^150.0.1",
+		"papaparse": "^5.5.3"
 	}
 }

src/routes/+page.svelte

@@ -1,22 +1,11 @@
 <div class="min-h-screen flex flex-col justify-center items-center">
     <!-- SVG QR Code Art on Top -->
     <div class="mb-8">
-        <!-- Simple QR code SVG (static, for illustration) -->
-        <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect width="96" height="96" rx="16" fill="#F3F4F6"/>
-            <rect x="12" y="12" width="20" height="20" fill="#111827"/>
-            <rect x="64" y="12" width="20" height="20" fill="#111827"/>
-            <rect x="12" y="64" width="20" height="20" fill="#111827"/>
-            <rect x="40" y="40" width="8" height="8" fill="#111827"/>
-            <rect x="56" y="56" width="8" height="8" fill="#111827"/>
-            <rect x="72" y="40" width="8" height="8" fill="#111827"/>
-            <rect x="40" y="72" width="8" height="8" fill="#111827"/>
-        </svg>
+        <img class="w-32 h-auto" src="/qr-code.png" alt="">
     </div>
     <h1 class="text-3xl font-bold text-center mb-2">ESN Scanner App</h1>
     <h2 class="text-lg text-gray-600 text-center mb-8">Make entrance to your events a breeze.</h2>
     <div class="flex space-x-4 w-full justify-center">
-        <a href="/auth/login" class="w-32 py-2 bg-blue-600 text-white rounded text-center hover:bg-blue-700 transition">Login</a>
-        <a href="/auth/signup" class="w-32 py-2 bg-gray-200 text-blue-700 rounded text-center hover:bg-gray-300 transition">Signup</a>
+        <a href="/private/home" class="w-64 py-2 bg-blue-600 text-white rounded-lg text-center hover:bg-blue-700 transition">Get started</a>
     </div>
 </div>

src/routes/auth/signout/+page.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-import { onMount } from 'svelte';
-import { goto } from '$app/navigation';
-
-onMount(() => {
-  localStorage.clear();
-  goto('/');
-});
-</script>
-
-<p>Signing out...</p>

src/routes/auth/signout/+server.ts

@@ -1,9 +1,11 @@
 import type { RequestHandler } from './$types';
-import { redirect } from '@sveltejs/kit';
-
-export const GET: RequestHandler = async ({ locals }) => {
-  // If using supabase-js client on the server, you can sign out here
-  if (locals.supabase) {
+export const GET: RequestHandler = async ({ locals}) => {
     await locals.supabase.auth.signOut();
-  }
-};
+
+    const html = `
+        <script>
+            localStorage.clear();
+            location.href = '/';
+        </script>`;
+    return new Response(html, { headers: { 'Content-Type': 'text/html' } });
+};

src/routes/private/api/gmail/+server.ts

@@ -60,5 +60,20 @@ export const POST: RequestHandler = async ({ request }) => {
 		}
 	}
 
+	/* validate token */
+	if (action === 'validate') {
+		if (!refreshToken) {
+			return json({ valid: false });
+		}
+		try {
+			const oAuth2Client = getOAuthClient();
+			oAuth2Client.setCredentials({ refresh_token: refreshToken });
+			await oAuth2Client.getAccessToken(); // This will throw if invalid
+			return json({ valid: true });
+		} catch (err) {
+			return json({ valid: false, error: (err as Error).message });
+		}
+	}
+
 	return new Response('Bad request', { status: 400 });
 };

src/routes/private/creator/+page.server.ts

@@ -0,0 +1,61 @@
+import type { Actions } from './$types';
+import { error as kitError } from '@sveltejs/kit';
+import Papa from 'papaparse';
+import { fail } from '@sveltejs/kit';
+
+export async function load({ locals }) {
+    console.log("▶️ fetching events…");
+
+    const { data: events, error } = await locals.supabase
+        .from('events')
+        .select('*')
+        .order('date', { ascending: true });
+
+    if (error) {
+        console.error('❌ supabase error:', error);
+        // optional: throw to render SvelteKit error page
+        throw kitError(500, 'Could not load events');
+    }
+
+    return { events };
+}
+
+export const actions = {
+    create: async (event) => {
+        const formData = await event.request.formData();
+        console.log(Array.from(formData.entries()));
+        console.log('create_event date', formData.get("date"), formData.get("name"), formData.get("description"));
+        let { data: new_event, error } = await event.locals.supabase.rpc("create_event",
+            {
+                "p_name": formData.get('name'),
+                "p_date": formData.get('date'),
+                "p_description": formData.get('description'),
+            });
+        return {
+            new_event,
+            error
+        }
+    },
+    participants: async (event) => {
+        const formData = await event.request.formData();
+        const file = formData.get('participants') as File;
+
+        let csvText = await file.text();
+
+        const { data: parsedRows, errors } = Papa.parse(csvText, {
+            skipEmptyLines: true,
+            header: false
+        });
+
+        // Map each row to an object with keys: name, surname, email
+        const participants = parsedRows.map((row: string[]) => ({
+            name: row[0],
+            surname: row[1],
+            email: row[2]
+        }));
+
+        return {
+            participants,
+        }
+    }
+} satisfies Actions;

src/routes/private/creator/+page.svelte

@@ -1,63 +1,67 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { goto } from '$app/navigation';
+  import StepConnectGoogle from "./steps/StepConnectGoogle.svelte";
+  import StepCraftEmail from "./steps/StepCraftEmail.svelte";
+  import StepCreateEvent from "./steps/StepCreateEvent.svelte";
+  import StepOverview from "./steps/StepOverview.svelte";
+  import StepUploadFiles from "./steps/StepUploadFiles.svelte";
 
-	let authorized = false;
-	let refreshToken = '';
+  let { data, form } = $props();
 
-	let to = '';
-	let subject = '';
-	let body = '';
+  let new_event = $state({});
+  let participants = $state([]);
 
-	onMount(() => {
-		refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
-		authorized = !!refreshToken;
-	});
+  // Update events and participants from the form data
+  $effect( () => {
+    if (form && form.new_event) {
+      new_event = form.new_event;
+    }
+    if (form && form.participants) {
+      participants = form.participants;
+    }
+  });
 
-	/* ⇢ redirects straight to Google via server 302 */
-	const connect = () => goto('/private/api/gmail?action=auth');
+  // Array of step components in order
+  const steps = [
+    StepConnectGoogle,
+    StepCreateEvent,
+    StepUploadFiles,
+    StepCraftEmail,
+    StepOverview
+  ];
 
-	async function sendEmail() {
-		const r = await fetch('/private/api/gmail', {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({
-				action: 'send',
-				to,
-				subject,
-				text: body,
-				refreshToken
-			})
-		});
-		r.ok ? alert('Sent!') : alert(await r.text());
-		to = subject = body = '';
-	}
+  // State variable for current step
+  let step = $state(0);
 
-	async function disconnect() {
-		if (!confirm('Disconnect Google account?')) return;
-		await fetch('/private/api/gmail', {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ action: 'revoke', refreshToken })
-		});
-		localStorage.removeItem('gmail_refresh_token');
-		refreshToken = '';
-		authorized = false;
-	}
+  // Helper to go to next/previous step (optional)
+  function nextStep() {
+    if (step < steps.length - 1) step += 1;
+    console.log(step);
+  }
+  function prevStep() {
+    if (step > 0) step -= 1;
+    console.log(step);
+  }
 </script>
 
-{#if !authorized}
-	<section class="space-y-4">
-		<p>You haven’t connected your Google account yet.</p>
-		<button class="btn" on:click={connect}>Connect Google</button>
-	</section>
-{:else}
-	<button class="btn-secondary mb-4" on:click={disconnect}>Disconnect Google</button>
-
-	<form class="space-y-4" on:submit|preventDefault={sendEmail}>
-		<input  class="input w-full" type="email" placeholder="recipient@example.com" bind:value={to} required />
-		<input  class="input w-full" placeholder="Subject" bind:value={subject} required />
-		<textarea class="textarea w-full" rows="6" placeholder="Message" bind:value={body} required />
-		<button class="btn-primary">Send</button>
-	</form>
+<!-- Render the current step component -->
+{#if step == 0}
+  <StepConnectGoogle />
+{:else if step == 1}
+  <StepCreateEvent events={data.events} {new_event} />
+{:else if step == 2}
+  <StepUploadFiles {participants} />
+{:else if step == 3}
+  <StepCraftEmail />
+{:else if step == 4}
+  <StepOverview {new_event} {participants} />
 {/if}
+
+<br />
+
+{step}
+
+<!-- Optional navigation buttons -->
+<button onclick={prevStep} disabled={step === 0}>Previous</button>
+<button onclick={nextStep} disabled={step === steps.length - 1}>Next</button>
+
+

src/routes/private/creator/steps/StepConnectGoogle.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+
+	let refreshToken = '';
+	let authorized = false;
+
+	let to = '';
+	let subject = '';
+	let body = '';
+
+	async function validateToken(token: string): Promise<boolean> {
+		if (!token) return false;
+		const res = await fetch('/private/api/gmail', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ action: 'validate', refreshToken: token })
+		});
+		if (!res.ok) return false;
+		const data = await res.json();
+		return !!data.valid;
+	}
+
+	onMount(async () => {
+		console.log("on mount");
+		refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
+		authorized = await validateToken(refreshToken);
+	});
+
+	/* ⇢ redirects straight to Google via server 302 */
+	const connect = () => goto('/private/api/gmail?action=auth');
+
+	async function sendEmail() {
+		const r = await fetch('/private/api/gmail', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({
+				action: 'send',
+				to,
+				subject,
+				text: body,
+				refreshToken
+			})
+		});
+		r.ok ? alert('Sent!') : alert(await r.text());
+		to = subject = body = '';
+	}
+
+	async function disconnect() {
+		if (!confirm('Disconnect Google account?')) return;
+		await fetch('/private/api/gmail', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ action: 'revoke', refreshToken })
+		});
+		localStorage.removeItem('gmail_refresh_token');
+		refreshToken = '';
+		authorized = false;
+	}
+</script>
+
+{#if !authorized}
+	<section class="space-y-4">
+		<p>You haven’t connected your Google account yet.</p>
+		<button class="btn" on:click={connect}>Connect Google</button>
+	</section>
+{:else}
+	Your connection is good, proceed to next step
+{/if}

src/routes/private/creator/steps/StepCraftEmail.svelte

@@ -0,0 +1 @@
+emaillk

src/routes/private/creator/steps/StepCreateEvent.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	let { events, new_event } = $props();
+
+</script>
+
+<p class="bg-grey-200">{JSON.stringify(events)}</p>
+
+<form method="POST" action="?/create" use:enhance>
+  <input type="text" name="name" />
+  <input type="date" name="date" />
+  <textarea name="description"></textarea>
+  <button type="submit">Submit</button>
+</form>
+
+<p class="bg-grey-200">{JSON.stringify(new_event)}</p>

src/routes/private/creator/steps/StepOverview.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    let { new_event, participants } = $props();
+</script>
+
+<p>New event:</p>
+{JSON.stringify(new_event)}
+
+
+<br />
+<p>Participants</p>
+{JSON.stringify(participants)}

src/routes/private/creator/steps/StepUploadFiles.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+
+	let { participants = [] } = $props();
+
+	function removeParticipant(index: number) {
+		participants = participants.slice(0, index).concat(participants.slice(index + 1));
+	}
+</script>
+
+<form method="POST" action="?/participants" use:enhance enctype="multipart/form-data">
+	<input type="file" name="participants" id="participants" accept=".csv" required />
+	<button type="submit"> Submit </button>
+
+</form>
+
+{JSON.stringify(participants)}
+
+{#if participants.length === 0}
+	<p class="text-gray-500">No participants added yet.</p>
+{/if}
+
+{#if participants.length > 0}
+	<ul class="mt-4 space-y-2">
+		{#each participants as p, i}
+			<li class="flex items-center gap-2 border-b pb-1">
+				<span>{p.name} {p.surname} ({p.email})</span>
+				<button class="ml-auto text-red-600 hover:underline" type="button" onclick={() => removeParticipant(i)}>
+					Remove
+				</button>
+			</li>
+		{/each}
+	</ul>
+{/if}