Run only on merges

Merge pull request 'Fix missing env variable during build time' (#2 ) from supabase into main
Reviewed-on: erman/esn-code-scanner-app#2
2025-06-21 23:36:20 +02:00 · 2025-06-21 22:40:33 +02:00 · 2025-06-21 22:15:54 +02:00 · 2025-06-21 22:13:19 +02:00 · 2025-06-21 22:10:08 +02:00 · 2025-05-29 11:08:42 +02:00
36 changed files with 125 additions and 2350 deletions
--- a/.gitea/workflows/release.yml
+++ b/.gitea/workflows/release.yml
@@ -5,11 +5,16 @@ on:
    branches:
      - main
  schedule:
-    - cron: "0 22 * * 0" # sunday 22:00
+    - cron: "0 22 1 * *" # First of every month
  pull_request:
    branches:
      - main
    types: [closed]
 jobs:
  build:
    runs-on: ubuntu-latest
    if: github.event_name != 'pull_request' || github.event.pull_request.merged == true
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
@@ -46,7 +51,7 @@ jobs:
            org.opencontainers.image.revision=${{ env.GITHUB_SHA }}
            org.opencontainers.image.vendor=Orebolt.cz
            org.opencontainers.image.ref.name=${{ env.GITHUB_REF }}
-            org.opencontainers.image.title=ScanWave
+            org.opencontainers.image.title=ESN Code Scanner App
      - name: Run Trivy vulnerability scanner
        uses: aquasecurity/trivy-action@0.24.0
--- a/docker-compose-prod.yml
+++ b/docker-compose-prod.yml
@@ -1,12 +0,0 @@
 services:
  app:
    image: ${DOCKER_REGISTRY}/${DOCKER_USER}/${DOCKER_IMAGE}:latest
    restart: unless-stopped
    env_file: .env
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.scan-wave.rule=Host(`scanwave.orebolt.cz`)"
      - "traefik.http.routers.scan-wave.tls.certresolver=leresolver"
      - "traefik.http.routers.scan-wave.entrypoints=websecure"
      - "traefik.http.services.scan-wave.loadbalancer.server.port=3000"
      - "traefik.http.routers.scan-wave.middlewares=hsts"
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,7 +1,7 @@
 ---
 services:
  app:
-    image: ${DOCKER_REGISTRY}/${DOCKER_USER}/${DOCKER_IAMGE}:latest
+    image: ${DOCKER_REGISTRY}/${DOCKER_USER}/esn-code-scanner-app:latest
    restart: unless-stopped
    ports:
      - "3000:3000"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "scan-wave",
+	"name": "esn-code-scanner",
 	"private": true,
 	"version": "0.0.1",
 	"type": "module",
@@ -14,7 +14,7 @@
 		"lint": "prettier --check ."
 	},
 	"devDependencies": {
-		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/typography": "^0.5.15",
 		"@tailwindcss/vite": "^4.0.0",
@@ -26,16 +26,11 @@
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^4.0.0",
 		"typescript": "^5.0.0",
-		"vite-plugin-devtools-json": "^0.2.0"
+		"vite": "^6.2.6"
 	},
 	"dependencies": {
 		"@supabase/ssr": "^0.6.1",
 		"@supabase/supabase-js": "^2.50.0",
-		"@sveltejs/adapter-node": "^5.2.12",
+		"@sveltejs/adapter-node": "^5.2.12"
 		"googleapis": "^150.0.1",
 		"papaparse": "^5.5.3",
 		"qrcode": "^1.5.4",
 		"quoted-printable": "^1.0.1",
 		"simple-icons": "^15.3.0"
 	}
 }
--- a/src/lib/google.ts
+++ b/src/lib/google.ts
@@ -1,103 +0,0 @@
 import { google } from 'googleapis';
 import { env } from '$env/dynamic/private';
 import quotedPrintable from 'quoted-printable';   //  tiny, zero-dep package
 export const scopes = ['https://www.googleapis.com/auth/gmail.send'];
 export function getOAuthClient() {
 	return new google.auth.OAuth2(
 		env.GOOGLE_CLIENT_ID,
 		env.GOOGLE_CLIENT_SECRET,
 		env.GOOGLE_REDIRECT_URI
 	);
 }
 export function createAuthUrl() {
 	return getOAuthClient().generateAuthUrl({
 		access_type: 'offline',
 		prompt: 'consent',
 		scope: scopes
 	});
 }
 export async function exchangeCodeForTokens(code: string) {
 	const { tokens } = await getOAuthClient().getToken(code);
 	if (!tokens.refresh_token) throw new Error('No refresh_token returned');
 	return tokens.refresh_token;
 }
 export async function sendGmail(
 	refreshToken: string,
 	{ to, subject, text, qr_code }: { to: string; subject: string; text: string; qr_code: string }
 ) {
 	const oauth = getOAuthClient();
 	oauth.setCredentials({ refresh_token: refreshToken });
 	const gmail = google.gmail({ version: 'v1', auth: oauth });
 	const message_html =
 		`<!DOCTYPE html>
 <html lang="en">
  <head>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
    </style>
  </head>
  <body style="font-family: 'Lato', sans-serif; background-color: #f9f9f9; padding: 20px; margin: 0;">
    <div style="max-width: 600px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
      <p style="white-space: pre-line;font-size: 16px; line-height: 1.5; color: #333;">${text}</p>
      <img src="cid:qrCode1" alt="QR Code" style="display: block; margin: 20px auto; max-width: 50%; min-width: 200px; height: auto;" />
      <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between">
        <div style="height: 4px; width: 20%; background: #00aeef;"></div>
        <div style="height: 4px; width: 20%; background: #ec008c;"></div>
        <div style="height: 4px; width: 20%; background: #7ac143;"></div>
        <div style="height: 4px; width: 20%; background: #f47b20;"></div>
        <div style="height: 4px; width: 20%; background: #2e3192;"></div>
      </div>
      <div style="font-size: 12px; color: #999; padding-top: 0px; margin-top: 10px; line-height: 1.5; ">
        <p>This email has been generated with the help of *insert software name*</p>
      </div>
    </div>
  </body>
 </html>`;
 	const boundary = 'BOUNDARY';
 	const nl = '\r\n';                   // RFC-5322 line ending
 	const htmlQP = quotedPrintable.encode(message_html);
 	const qrLines = qr_code.replace(/.{1,76}/g, '$&' + nl);
 	const rawParts = [
 		'MIME-Version: 1.0',
 		`To: ${to}`,
 		`Subject: ${subject}`,
 		`Content-Type: multipart/related; boundary="${boundary}"`,
 		'',
 		`--${boundary}`,
 		'Content-Type: text/html; charset="UTF-8"',
 		'Content-Transfer-Encoding: quoted-printable',
 		'',
 		htmlQP,
 		'',
 		`--${boundary}`,
 		'Content-Type: image/png',
 		'Content-Transfer-Encoding: base64',
 		'Content-ID: <qrCode1>',
 		'Content-Disposition: inline; filename="qr.png"',
 		'',
 		qrLines,
 		'',
 		`--${boundary}--`,
 		''
 	];
 	const rawMessage = rawParts.join(nl);
 	const raw = Buffer.from(rawMessage).toString('base64url');
 	await gmail.users.messages.send({
 		userId: 'me',
 		requestBody: { raw }
 	});
 }
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,24 +1,20 @@
 <script>
-	import { invalidate } from '$app/navigation';
+  import { invalidate } from '$app/navigation'
-	import { onMount } from 'svelte';
+  import { onMount } from 'svelte'
-	import '../app.css';
+  import "../app.css";
-	let { data, children } = $props();
+  let { data, children } = $props()
-	let { session, supabase } = $derived(data);
+  let { session, supabase } = $derived(data)
  onMount(() => {
    const { data } = supabase.auth.onAuthStateChange((_, newSession) => {
      if (newSession?.expires_at !== session?.expires_at) {
-				invalidate('supabase:auth');
+        invalidate('supabase:auth')
      }
-		});
+    })
-		return () => data.subscription.unsubscribe();
+    return () => data.subscription.unsubscribe()
-	});
+  })
 </script>
 <svelte:head>
 	<title>ScanWave</title>
 </svelte:head>
 {@render children()}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,13 +1,6 @@
-<div class="min-h-screen flex flex-col justify-center items-center">
+<script lang="ts">
-    <!-- SVG QR Code Art on Top -->
+
-    <div class="mb-8">
+</script>
-        <img class="w-32 h-auto" src="/qr-code.png" alt="">
+
-    </div>
+
-    <h1 class="text-3xl font-bold text-center mb-2">ScanWave</h1>
+<p>hello world</p>
    <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="/private/home" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-none border border-gray-300 w-64 text-center transition">
            Get started
        </a>
    </div>
 </div>
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -1,14 +1,2 @@
-<div class="flex items-center justify-center min-h-screen">
+<a href="/auth/login"><button>Login</button></a>
-    <div class="flex flex-col space-y-4">
+<a href="/auth/singup"><button>Signup</button></a>
        <a href="/auth/login">
            <button class="w-40 py-2 bg-white border border-gray-300 text-gray-800 rounded hover:border-gray-400 transition">
                Login
            </button>
        </a>
        <a href="/auth/singup">
            <button class="w-40 py-2 bg-white border border-gray-300 text-gray-800 rounded hover:border-gray-400 transition">
                Signup
            </button>
        </a>
    </div>
 </div>
--- a/src/routes/auth/login/+page.svelte
+++ b/src/routes/auth/login/+page.svelte
@@ -1,33 +1,11 @@
-<div class="flex items-center justify-center min-h-screen bg-gray-50">
+<form method="POST" action="?/login">
-  <form method="POST" action="?/login" class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-80 shadow-none">
+  <label>
    <h2 class="text-2xl font-semibold text-center mb-4">Login</h2>
    <label class="flex flex-col text-gray-700">
    Email
-      <input
+    <input name="email" type="email" />
        name="email"
        type="email"
        class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
        required
      />
  </label>
-    <label class="flex flex-col text-gray-700">
+  <label>
    Password
-      <input
+    <input name="password" type="password" />
        name="password"
        type="password"
        class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
        required
      />
  </label>
-    <button
+  <button>Login</button>
-      type="submit"
+</form>
      class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
    >
      Login
    </button>
    <div class="text-center text-sm text-gray-500 mt-2">
      Don't have an account?
      <a href="/auth/signup" class="text-blue-600 hover:underline">Signup</a>
    </div>
  </form>
 </div>
--- a/src/routes/auth/signout/+server.ts
+++ b/src/routes/auth/signout/+server.ts
@@ -1,11 +0,0 @@
 import type { RequestHandler } from './$types';
 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' } });
 };
--- a/src/routes/auth/signup/+page.svelte
+++ b/src/routes/auth/signup/+page.svelte
@@ -1,43 +1,15 @@
-<div class="flex items-center justify-center min-h-screen bg-gray-50">
+<form method="POST" action="?/login">
-  <form method="POST" action="?/login" class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-80 shadow-none">
+  <label>
    <h2 class="text-2xl font-semibold text-center mb-4">Sign Up</h2>
    <label class="flex flex-col text-gray-700">
    Email
-      <input
+    <input name="email" type="email" />
        name="email"
        type="email"
        class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
        required
      />
  </label>
-    <label class="flex flex-col text-gray-700">
+  <label>
    Password
-      <input
+    <input name="password" type="password" />
        name="password"
        type="password"
        class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
        required
      />
  </label>
-    <label class="flex flex-col text-gray-700">
+  <label>
    Display name
-      <input
+    <input name="display_name" type="text" />
        name="display_name"
        type="text"
        class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
        required
      />
  </label>
-    <button
+  <button formaction="?/signup">Sign up</button>
-      type="submit"
+</form>
      formaction="?/signup"
      class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
    >
      Sign up
    </button>
    <div class="text-center text-sm text-gray-500 mt-2">
      Already have an account?
      <a href="/auth/login" class="text-blue-600 hover:underline">Login</a>
    </div>
  </form>
 </div>
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
--- a/src/routes/private/+layout.svelte
+++ b/src/routes/private/+layout.svelte
@@ -2,20 +2,14 @@
 // Add any navbar logic here if needed
 </script>
-<nav class="bg-gray-50 border-b border-gray-300 text-gray-900 p-2">
+<nav class="bg-gray-800 text-white p-4 flex items-center justify-between">
-    <div class="container max-w-2xl mx-auto p-2">
+  <div class="font-bold text-lg">ESN Scanner</div>
        <div class="flex items-center justify-between">
            <div class="font-bold text-lg">ScanWave</div>
  <ul class="flex space-x-4">
    <li><a href="/private/home" class="hover:underline">Home</a></li>
    <li><a href="/private/scanner" class="hover:underline">Scanner</a></li>
                <li><a href="/private/events" class="hover:underline">Events</a></li>
  </ul>
        </div>
    </div>
 </nav>
-<div class="container max-w-2xl mx-auto p-2 bg-white">
+<div class="container p-2 bg-white ">
    <slot />
 </div>
--- a/src/routes/private/api/gmail/+server.ts
+++ b/src/routes/private/api/gmail/+server.ts
@@ -1,79 +0,0 @@
 import type { RequestHandler } from './$types';
 import { json, redirect } from '@sveltejs/kit';
 import {
 	createAuthUrl,
 	exchangeCodeForTokens,
 	sendGmail,
 	getOAuthClient
 } from '$lib/google';
 /* ───────────── GET ───────────── */
 export const GET: RequestHandler = async ({ url }) => {
 	/* 1.   /private/api/gmail?action=auth  → 302 to Google */
 	if (url.searchParams.get('action') === 'auth') {
 		throw redirect(302, createAuthUrl());
 	}
 	/* 2.   Google callback  /private/api/gmail?code=XXXX */
 	const code = url.searchParams.get('code');
 	if (code) {
 		try {
 			const refreshToken = await exchangeCodeForTokens(code);
 			const html = `
 				<script>
 					localStorage.setItem('gmail_refresh_token', ${JSON.stringify(refreshToken)});
 					location = '/private/creator';
 				</script>`;
 			return new Response(html, { headers: { 'Content-Type': 'text/html' } });
 		} catch (err) {
 			return new Response((err as Error).message, { status: 500 });
 		}
 	}
 	return new Response('Bad request', { status: 400 });
 };
 /* ───────────── POST ───────────── */
 export const POST: RequestHandler = async ({ request }) => {
 	const { action, refreshToken, to, subject, text, qr_code } = await request.json();
 	/* send e-mail */
 	if (action === 'send') {
 		if (!refreshToken) return new Response('Missing token', { status: 401 });
 		try {
 			await sendGmail(refreshToken, { to, subject, text, qr_code });
 			return json({ ok: true });
 		} catch (err) {
 			return new Response((err as Error).message, { status: 500 });
 		}
 	}
 	/* revoke token */
 	if (action === 'revoke') {
 		if (!refreshToken) return new Response('Missing token', { status: 401 });
 		try {
 			await getOAuthClient().revokeToken(refreshToken);
 			return json({ ok: true });
 		} catch (err) {
 			return new Response((err as Error).message, { status: 500 });
 		}
 	}
 	/* 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 });
 };
--- a/src/routes/private/creator/+page.server.ts
+++ b/src/routes/private/creator/+page.server.ts
@@ -1,61 +0,0 @@
 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 }) {
    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();
        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<string[]>(csvText, {
            skipEmptyLines: true,
            header: false
        });
        // Remove the first row (header)
        if (parsedRows.length > 0) {
            parsedRows.shift();
        }
        // 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;
--- a/src/routes/private/creator/+page.svelte
+++ b/src/routes/private/creator/+page.svelte
@@ -1,94 +0,0 @@
 <script lang="ts">
  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 { data, form } = $props();
  let event = $state({});
  let participants = $state([]);
  let email = $state({'body': '', 'subject': ''});
  let authorized = $state(false);
  $effect(() => {
    if (form && form.new_event) {
      event = form.new_event;
    }
    if (form && form.participants) {
      participants = form.participants;
    }
  });
  // Array of step components in order
  const steps = [
    StepConnectGoogle,
    StepCreateEvent,
    StepUploadFiles,
    StepCraftEmail,
    StepOverview
  ];
  let step: number = $state(0);
  // let stepConditions = $derived([
  //   authorized,
  //   !!new_event?.name,
  //   !!participants?.length,
  //   !!subject && !!body
  // ]);
  // for debugging purpouses
  let stepConditions = [
    true,
    true,
    true,
    true
  ];
  function nextStep() {
    if (step < steps.length - 1) step += 1;
  }
  function prevStep() {
    if (step > 0) step -= 1;
  }
 </script>
 <div class="flex items-center justify-between mb-4 mt-2">
  <button
    onclick={prevStep}
    disabled={step === 0}
    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
  >
    Previous
  </button>
  <span class="flex-1 text-center text-gray-600 font-medium">
    Step {step + 1} of {steps.length}
  </span>
  <button
    onclick={nextStep}
    disabled={step === steps.length - 1 || !stepConditions[step]}
    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
  >
    Next
  </button>
 </div>
 {#if step == 0}
  <StepConnectGoogle bind:authorized />
 {:else if step == 1}
  <StepCreateEvent {event} />
 {:else if step == 2}
  <StepUploadFiles {participants} />
 {:else if step == 3}
  <StepCraftEmail bind:email />
 {:else if step == 4}
  <StepOverview
    {data}
    {event}
    {participants}
    {email}
    {stepConditions}
  />
 {/if}
--- a/src/routes/private/creator/emailtest/+page.svelte
+++ b/src/routes/private/creator/emailtest/+page.svelte
@@ -1,110 +0,0 @@
 <script lang="ts">
 import { onMount } from 'svelte';
 import { goto } from '$app/navigation';
 let to = '';
 let subject = '';
 let body = '';
 let qrcode_b64 = '';
 let loading = false;
 let error = '';
 let success = '';
 let authorized = false;
 let refreshToken = '';
 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 () => {
 	refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
 	authorized = await validateToken(refreshToken);
 });
 const connect = () => goto('/private/api/gmail?action=auth');
 async function sendTestEmail() {
 	error = '';
 	success = '';
 	loading = true;
 	try {
 		const r = await fetch('/private/api/gmail', {
 			method: 'POST',
 			headers: { 'Content-Type': 'application/json' },
 			body: JSON.stringify({
 				action: 'send',
 				to,
 				subject,
 				text: body,
 				qr_code: qrcode_b64,
 				refreshToken
 			})
 		});
 		if (r.ok) {
 			success = 'Email sent!';
 			to = subject = body = qrcode_b64 = '';
 		} else {
 			error = await r.text();
 		}
 	} catch (e) {
 		error = e.message || 'Unknown error';
 	}
 	loading = false;
 }
 </script>
 <div class="max-w-lg mx-auto bg-white border border-gray-300 rounded p-8 mt-8 shadow">
 	<h2 class="text-2xl font-semibold mb-6 text-center">Test Email Sender</h2>
 	{#if !authorized}
 		<div class="mb-4 flex items-center justify-between">
 			<p class="text-gray-700">Google not connected.</p>
 			<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" on:click={connect}>
 				Connect Google
 			</button>
 		</div>
 	{:else}
 		<form on:submit|preventDefault={sendTestEmail} class="space-y-4">
 			<label class="block">
 				<span class="text-gray-700">To</span>
 				<input type="email" class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200" bind:value={to} required />
 			</label>
 			<label class="block">
 				<span class="text-gray-700">Subject</span>
 				<input type="text" class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200" bind:value={subject} required />
 			</label>
 			<label class="block">
 				<span class="text-gray-700">Body</span>
 				<textarea class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none" rows="6" bind:value={body} required></textarea>
 			</label>
 			<label class="block">
 				<span class="text-gray-700">QR Code (base64, data:image/png;base64,...)</span>
 				<input type="text" class="mt-1 block w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-200 font-mono text-xs" bind:value={qrcode_b64} placeholder="Paste base64 image string here" required />
 			</label>
 			<button type="submit" class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition" disabled={loading}>
 				{#if loading}
 					<svg class="animate-spin h-5 w-5 mr-2 inline-block text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
 						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 						<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
 					</svg>
 					Sending...
 				{:else}
 					Send Test Email
 				{/if}
 			</button>
 		</form>
 	{/if}
 	{#if error}
 		<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700 mt-4">{error}</div>
 	{/if}
 	{#if success}
 		<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">{success}</div>
 	{/if}
 </div>
--- a/src/routes/private/creator/finish/+page.svelte
+++ b/src/routes/private/creator/finish/+page.svelte
@@ -1,125 +0,0 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { onMount } from 'svelte';
    import QRCode from 'qrcode';
    let { data } = $props();
 	let session_storage_id = page.url.searchParams.get('data');
 	let all_data = {};
 	const StepStatus = {
 		Loading: 'loading',
 		Waiting: 'waiting',
 		Success: 'success',
 		Failure: 'failure'
 	} as const;
 	type StepStatus = (typeof StepStatus)[keyof typeof StepStatus];
 	let supabase_status: StepStatus = $state(StepStatus.Waiting);
 	let email_status: StepStatus = $state(StepStatus.Waiting);
 	onMount(async () => {
 		if (!session_storage_id) {
 			console.error('No session storage ID provided in the URL');
 			return;
 		}
 		all_data = JSON.parse(sessionStorage.getItem(session_storage_id) || '{}');
 		supabase_status = StepStatus.Loading;
 		try {
 			const { result } = await insert_data_supabase(all_data.participants, all_data.event);
 			supabase_status = StepStatus.Success;
 			// Now send emails
 			email_status = StepStatus.Loading;
 			let allSuccess = true;
 			for (const obj of result) {
 				let qr_code = await dataToBase64(obj.id);
 				const payload = {
 					action: 'send',
 					to: obj.email,
 					subject: all_data.email.subject,
 					text: all_data.email.body,
 					qr_code: qr_code,
 					refreshToken: localStorage.getItem('gmail_refresh_token')
 				};
 				const res = await fetch('/private/api/gmail', {
 					method: 'POST',
 					headers: { 'Content-Type': 'application/json' },
 					body: JSON.stringify(payload)
 				});
 				if (!res.ok) {
 					allSuccess = false;
 					console.error('Failed to send email to', obj.email, await res.text());
 				}
 			}
 			email_status = allSuccess ? StepStatus.Success : StepStatus.Failure;
 		} catch (e) {
 			supabase_status = StepStatus.Failure;
 			email_status = StepStatus.Failure;
 			console.error(e);
 		}
 	});
    async function dataToBase64(data: string): Promise<string> {
        try {
            const url = await QRCode.toDataURL(data);
            const parts = url.split(',');
            const base64 = parts[1];
            return base64;
        } catch (err) {
            console.error(err);
            return '';
        }
    }
 	async function insert_data_supabase(participants, event) {
 		const names = participants.map((p) => p.name);
 		const surnames = participants.map((p) => p.surname);
 		const emails = participants.map((p) => p.email);
 		const {
 			data: { user },
 			error: authError
 		} = await data.supabase.auth.getUser();
 		const { data: user_profile, error: profileError } = await data.supabase
 			.from('profiles')
 			.select('*, section:sections (id, name)')
 			.eq('id', user?.id)
 			.single();
 		const { data: result, error: qrCodeError } = await data.supabase.rpc('create_qrcodes_bulk', {
 			p_section_id: user_profile?.section.id,
 			p_event_id: event.id,
 			p_names: names,
 			p_surnames: surnames,
 			p_emails: emails
 		});
 		return { result };
 	}
 </script>
 <!-- Creating Database Entries -->
 <div class="mb-4 rounded border border-gray-300 bg-white p-4">
 	<h2 class="mb-2 text-xl font-bold">Creating database entries</h2>
 	{#if supabase_status === StepStatus.Waiting}
 		<span class="text-black-600">Waiting...</span>
 	{:else if supabase_status === StepStatus.Loading}
 		<span class="text-black-600">Creating entries...</span>
 	{:else if supabase_status === StepStatus.Success}
 		<span class="text-green-600">Database entries created successfully.</span>
 	{:else if supabase_status === StepStatus.Failure}
 		<span class="text-red-600">Failed to create database entries.</span>
 	{/if}
 </div>
 <!-- Sending Emails -->
 <div class="rounded border border-gray-300 bg-white p-4">
 	<h2 class="mb-2 text-xl font-bold">Sending emails</h2>
 	{#if email_status === StepStatus.Waiting}
 		<span class="text-black-600">Waiting...</span>
 	{:else if email_status === StepStatus.Loading}
 		<span class="text-black-600">Sending emails...</span>
 	{:else if email_status === StepStatus.Success}
 		<span class="text-green-600">Emails sent successfully.</span>
 	{:else if email_status === StepStatus.Failure}
 		<span class="text-red-600">Failed to send emails.</span>
 	{/if}
 </div>
--- a/src/routes/private/creator/steps/StepConnectGoogle.svelte
+++ b/src/routes/private/creator/steps/StepConnectGoogle.svelte
@@ -1,75 +0,0 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { goto } from '$app/navigation';
 	export let authorized = false;
 	let refreshToken = '';
 	let loading = true;
 	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 () => {
 		refreshToken = localStorage.getItem('gmail_refresh_token') ?? '';
 		loading = true;
 		authorized = await validateToken(refreshToken);
 		loading = false;
 	});
 	/* ⇢ redirects straight to Google via server 302 */
 	const connect = () => goto('/private/api/gmail?action=auth');
 	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>
 <div class="mb-4 rounded border border-gray-300 bg-white p-4">
 	{#if loading}
 		<div class="flex items-center space-x-2">
 			<svg class="animate-spin h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
 				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
 				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
 			</svg>
 			<span>Checking Google connection...</span>
 		</div>
 	{:else}
 		{#if !authorized}
 			<section class="flex items-center justify-between w-full">
 				<p class="mr-4">You haven’t connected your Google account yet.</p>
 				<button class="btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded ml-auto" on:click={connect}>
 					Connect Google
 				</button>
 			</section>
 		{:else}
 			<div class="flex items-center space-x-2 text-green-600">
 				<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
 				</svg>
 				<span>Your connection to Google is good, proceed to next step</span>
 			</div>
 		{/if}
 	{/if}
 </div>
--- a/src/routes/private/creator/steps/StepCraftEmail.svelte
+++ b/src/routes/private/creator/steps/StepCraftEmail.svelte
@@ -1,25 +0,0 @@
 <script lang="ts">
  export let email: { subject: string, body: string } = { subject: '', body: '' };
 </script>
 <form class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
  <h2 class="text-2xl font-semibold text-center mb-4">Craft Email</h2>
  <label class="flex flex-col text-gray-700">
    Subject
    <input
      type="text"
      bind:value={email.subject}
      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
      required
    />
  </label>
  <label class="flex flex-col text-gray-700">
    Body
    <textarea
      bind:value={email.body}
      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
      rows="6"
      required
    ></textarea>
  </label>
 </form>
--- a/src/routes/private/creator/steps/StepCreateEvent.svelte
+++ b/src/routes/private/creator/steps/StepCreateEvent.svelte
@@ -1,71 +0,0 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	let { event } = $props();
 	let loading = $state(false);
 	function handleEnhance() {
 		loading = true;
 		return async ({ update }) => {
 			await update();
 			loading = false;
 		};
 	}
 </script>
 <form method="POST" action="?/create" use:enhance={handleEnhance} class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
  <h2 class="text-2xl font-semibold text-center mb-4">Create Event</h2>
  <label class="flex flex-col text-gray-700">
    Name
    <input
      type="text"
      name="name"
      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
      required
    />
  </label>
  <label class="flex flex-col text-gray-700">
    Date
    <input
      type="date"
      name="date"
      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
      required
    />
  </label>
  <label class="flex flex-col text-gray-700">
    Description
    <textarea
      name="description"
      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
      rows="3"
      required
    ></textarea>
  </label>
  <button
    type="submit"
    class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
  >
    Submit
  </button>
 </form>
 {#if Object.keys(event).length === 0}
  <div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
    {#if loading}
      <strong>Loading...</strong>
    {:else}
      <strong>No event created yet...</strong>
    {/if}
  </div>
 {:else}
  <div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">
    <ol>
      <li><strong>{event.name}</strong></li>
      <li>{event.date}</li>
      <li>{event.description}</li>
    </ol>
  </div>
 {/if}
--- a/src/routes/private/creator/steps/StepFinal.svelte
+++ b/src/routes/private/creator/steps/StepFinal.svelte
@@ -1,59 +0,0 @@
 <script lang="ts">
    import QRCode from 'qrcode';
 	const StepState = {
 		Waiting: 'waiting',
 		Processing: 'processing',
 		FinishedSuccess: 'finished_success',
 		FinishedFail: 'finished_fail'
 	};
 	let qr_codes_state = $state(StepState.Processing);
 	let emails_state = $state(StepState.FinishedSuccess);
 	// Inserts all participants into the database and returns their assigned IDs.
 	async function insert_data_supabase(data, participants, new_event) {
 		const names = participants.map((p) => p.name);
 		const surnames = participants.map((p) => p.surname);
 		const emails = participants.map((p) => p.email);
 		const {
 			data: { user },
 			error: authError
 		} = await data.supabase.auth.getUser();
 		const { data: user_profile, error: profileError } = await data.supabase
 			.from('profiles')
 			.select('*, section:sections (id, name)')
 			.eq('id', user?.id)
 			.single();
 		const { data: result, error: qrCodeError } = await data.supabase.rpc('create_qrcodes_bulk', {
 			p_section_id: user_profile?.section.id,
 			p_event_id: new_event.id,
 			p_names: names,
 			p_surnames: surnames,
 			p_emails: emails
 		});
 		return { result };
 	}
    // Creates a base64 interpretation of the ticket ID
 	function createB64QRCode(data) {
 		QRCode.toDataURL('I am a pony!')
            .then((url) => {
                const parts = url.split(',');
                return { base64data: parts[1] };
 			})
 			.catch((err) => {
 				console.error(err);
 			});
 	}
    function sendEmail(email, subject, body, qr_code_base64) {
        // Here you would implement the logic to send the email.
        // This is a placeholder function.
        console.log(`Sending email to ${email} with subject "${subject}" and body "${body}"`);
        console.log(`QR Code Base64: ${qr_code_base64}`);
    }
 </script>
 Pl
--- a/src/routes/private/creator/steps/StepOverview.svelte
+++ b/src/routes/private/creator/steps/StepOverview.svelte
@@ -1,78 +0,0 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	let { data, event, participants, email, stepConditions } = $props();
 	function redirectToFinish() {
 		// Generate a random variable name
 		const varName = 'event_' + Math.random().toString(36).substr(2, 9);
 		// Save the data to sessionStorage
 		sessionStorage.setItem(
 			varName,
 			JSON.stringify({ event, participants, email })
 		);
 		// Redirect with the variable name as a query parameter
 		goto(`/private/creator/finish?data=${encodeURIComponent(varName)}`);
 	}
 </script>
 <!-- New Event Overview -->
 <div class="mb-4 rounded border border-gray-300 bg-white p-4">
 	<h2 class="mb-2 text-xl font-bold">Event Overview</h2>
 	<ul class="space-y-1">
 		<li><span class="font-semibold">Name:</span> {event.name}</li>
 		<li><span class="font-semibold">Date:</span> {event.date}</li>
 		<li><span class="font-semibold">Description:</span> {event.description}</li>
 	</ul>
 </div>
 <!-- Email Overview -->
 <div class="mb-4 rounded border border-gray-300 bg-white p-4">
 	<h2 class="mb-2 text-xl font-bold">Email Preview</h2>
 	<div class="mb-2"><span class="font-semibold">Subject:</span> {email.subject}</div>
 	<div class="rounded border bg-gray-50 p-2 whitespace-pre-line text-gray-700">
 		<span class="font-semibold"></span>
 		<div>{email.body}</div>
 	</div>
 </div>
 <!-- Participants Overview -->
 <div class="rounded border border-gray-300 bg-white p-4">
 	<h2 class="mb-2 text-xl font-bold">Participants ({participants.length})</h2>
 	<ul class="space-y-1">
 		{#each participants.slice(0, 10) as p}
 			<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
 				<span class="font-semibold">{p.name} {p.surname}</span>
 				<span class="flex-1"></span>
 				<span class="text-right font-mono text-xs text-gray-600">{p.email}</span>
 			</li>
 		{/each}
 	</ul>
 	<p class="mt-2 text-sm text-gray-500">Note: Only the first 10 participants are shown.</p>
 </div>
 <button
 	onclick={redirectToFinish}
 	class="mt-4 w-full rounded bg-blue-600 px-4 py-3 font-bold text-white
 	transition-colors duration-200 hover:bg-blue-700
 	disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
 	disabled={!stepConditions.every(Boolean)}
 >
 	Generate QR codes and send
 </button>
 <div class="mt-2 space-y-1">
 	{#if !stepConditions[0]}
 		<p class="text-sm text-red-500">Please provide an event name before proceeding.</p>
 	{/if}
 	{#if !stepConditions[1]}
 		<p class="text-sm text-red-500">Please add at least one participant before proceeding.</p>
 	{/if}
 	{#if !stepConditions[2]}
 		<p class="text-sm text-red-500">Please provide an email subject before proceeding.</p>
 	{/if}
 	{#if !stepConditions[3]}
 		<p class="text-sm text-red-500">Please provide an email body before proceeding.</p>
 	{/if}
 </div>
--- a/src/routes/private/creator/steps/StepUploadFiles.svelte
+++ b/src/routes/private/creator/steps/StepUploadFiles.svelte
@@ -1,65 +0,0 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	let { participants = [] } = $props();
 	let loading = $state(false);
 	function handleEnhance() {
 		loading = true;
 		return async ({ update }) => {
 			await update();
 			loading = false;
 		};
 	}
 </script>
 <form
 	method="POST"
 	action="?/participants"
 	use:enhance={handleEnhance}
 	enctype="multipart/form-data"
 	class="flex w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
 >
 	<h2 class="mb-4 text-center text-2xl font-semibold">Upload Participants</h2>
 	<label class="flex flex-col text-gray-700">
 		CSV File
 		<input
 			type="file"
 			name="participants"
 			id="participants"
 			accept=".csv"
 			class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
 			required
 		/>
 	</label>
 	<button
 		type="submit"
 		class="w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
 	>
 		Submit
 	</button>
 </form>
 {#if participants.length === 0}
 	<div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
 		{#if loading}
 			<strong>Loading...</strong>
 		{:else}
 			<strong>No participants yet...</strong>
 		{/if}
 	</div>
 {:else}
 	<div class="mt-4 rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700">
 		<ul class="space-y-2">
 			{#each participants as p, i}
 				<li class="flex items-center justify-between border-b pb-1">
 					<div>
 						<div class="font-semibold">{p.name} {p.surname}</div>
 						<div class="font-mono text-xs text-gray-600">{p.email}</div>
 					</div>
 				</li>
 			{/each}
 		</ul>
 	</div>
 {/if}
--- a/src/routes/private/events/+page.server.ts
+++ b/src/routes/private/events/+page.server.ts
@@ -1,7 +0,0 @@
 export async function load({ locals }) {
    const { data: events, error } = await locals.supabase
        .from('events')
        .select('*')
        .order('date', { ascending: false });
    return { events };
 }
--- a/src/routes/private/events/+page.svelte
+++ b/src/routes/private/events/+page.svelte
@@ -1,25 +0,0 @@
 <script lang="ts">
    export let data;
 </script>
 <h1 class="text-2xl font-bold mb-4 mt-2 text-center">All Events</h1>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
  {#each data.events as event}
    <a
      href={`/private/events/event?id=${event.id}`}
      class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group"
    >
      <div class="flex flex-col gap-1">
        <span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span>
        <span class="text-gray-500 text-sm">{event.date}</span>
      </div>
    </a>
  {/each}
 </div>
 <a
  href="/private/creator"
  class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-none border border-gray-300"
 >
  New Event
 </a>
--- a/src/routes/private/events/event/+page.server.ts
+++ b/src/routes/private/events/event/+page.server.ts
@@ -1,13 +0,0 @@
 export async function load({ locals, url }) {
    const event_id = url.searchParams.get('id');
    const { data: event_data, error: eventError } = await locals.supabase
        .from('events')
        .select('*')
        .eq('id', event_id)
        .single()
    const { data: participants, error: participantsError } = await locals.supabase
        .from('participants')
        .select('*, scanned_by:profiles (id, display_name)')
        .eq('event', event_id)
    return {event_data, participants};
 }
--- a/src/routes/private/events/event/+page.svelte
+++ b/src/routes/private/events/event/+page.svelte
@@ -1,95 +0,0 @@
 <script lang="ts">
 	let { data } = $props();
 	const scannedCount = data.participants.filter((p) => p.scanned).length;
 	const notScannedCount = data.participants.length - scannedCount;
 </script>
 <h1 class="mt-2 mb-4 text-center text-2xl font-bold">Event Overview</h1>
 <div class="mb-2 rounded border border-gray-300 bg-white p-4">
 	<div class="flex flex-col gap-1">
 		<span class="text-black-700 text-lg font-semibold">{data.event_data.name}</span>
 		<span class="text-black-500 text-sm">{data.event_data.date}</span>
 	</div>
 </div>
 <div class="mb-2 flex items-center rounded border border-gray-300 bg-white p-4">
 	<div class="flex flex-1 items-center justify-center gap-2">
 		<svg
 			class="inline h-4 w-4 text-green-600"
 			fill="none"
 			stroke="currentColor"
 			stroke-width="2"
 			viewBox="0 0 24 24"
 		>
 			<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
 		</svg>
 		<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
 	</div>
 	<div class="mx-4 h-8 w-px bg-gray-300"></div>
 	<div class="flex flex-1 items-center justify-center gap-2">
 		<svg
 			class="inline h-4 w-4 text-red-600"
 			fill="none"
 			stroke="currentColor"
 			stroke-width="2"
 			viewBox="0 0 24 24"
 		>
 			<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
 			<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
 			<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
 		</svg>
 		<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
 	</div>
 </div>
 <div class="rounded border border-gray-300 bg-white p-4">
 	<h2 class="mb-2 rounded text-xl font-bold">Participants ({data.participants.length})</h2>
 	<ul class="space-y-1">
 		{#each data.participants as p}
 			<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
 				{#if p.scanned}
 					<svg
 						title="Scanned"
 						class="mr-2 inline h-4 w-4 text-green-600"
 						fill="none"
 						stroke="currentColor"
 						stroke-width="2"
 						viewBox="0 0 24 24"
 					>
 						<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
 					</svg>
 				{:else}
 					<svg
 						title="Not scanned"
 						class="mr-2 inline h-4 w-4 text-red-600"
 						fill="none"
 						stroke="currentColor"
 						stroke-width="2"
 						viewBox="0 0 24 24"
 					>
 						<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
 						<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
 						<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
 					</svg>
 				{/if}
 				<span class="font-semibold">{p.name} {p.surname}</span>
 				<span class="flex-1"></span>
 				{#if p.scanned_by}
 					<div class="flex flex-row items-end ml-2">
 						<span class="mr-1 text-xs text-gray-500">
 							{new Date(p.scanned_at).toLocaleTimeString([], {
 								hour: '2-digit',
 								minute: '2-digit',
 								hour12: false
 							})}
 						</span>
 						<span class="text-xs text-gray-500">by {p.scanned_by.display_name}</span>
 					</div>
 				{/if}
 			</li>
 		{/each}
 	</ul>
 </div>
--- a/src/routes/private/home/+page.server.ts
+++ b/src/routes/private/home/+page.server.ts
@@ -1,22 +0,0 @@
 // src/routes/my-page/+page.server.ts
 import type { PageServerLoad } from './$types';
 export const load: PageServerLoad = async ({ locals }) => {
    // get the logged-in user
    const { data: { user }, error: authError } = await locals.supabase.auth.getUser();
    const { data: user_profile, error: profileError } = await locals.supabase.from('profiles').select('*, section:sections (id, name)').eq('id', user?.id).single();
    if (authError) {
        console.error('Supabase auth error:', authError);
        throw new Error('Could not get user');
    }
    if (profileError) {
        console.error('Supabase profile error:', profileError);
        throw new Error('Could not get user profile');
    }
    return { user, user_profile };
 };
--- a/src/routes/private/home/+page.svelte
+++ b/src/routes/private/home/+page.svelte
@@ -1,51 +1,36 @@
 <script lang="ts">
-    import type { User } from '@supabase/supabase-js';
+import { onMount } from 'svelte';
 import { goto } from '$app/navigation'
 let { data } = $props();
 let user_data = $state();
 onMount(async () => {
    const { data: { user } } = await data.supabase.auth.getUser();
    user_data = user;
 });
 async function signOut() {
    const { error } = await data.supabase.auth.signOut();
    if (error) {
        console.error('Sign out error:', error);
    } else {
        user_data = null; // Clear user data on sign out
        await goto('/');
    }
 };
 	export let data: { 
        user: User | null,
        user_profile: any | null
    };
 </script>
-<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Profile</h1>
+{#if user_data}
-
+    <div class="user-profile">
-<div class="mb-4 rounded border border-gray-300 bg-white p-6">
+        <h2 class="text-2xl font-bold mb-2">Currently logged in</h2>
-    <div class="flex flex-col gap-2">
+        <p><strong>Username:</strong> {user_data.user_metadata.display_name}</p>
-        <div class="flex items-center gap-3 mb-4">
+        <p><strong>Email:</strong> {user_data.email}</p>
            <div class="h-12 w-12 rounded-full bg-gray-200 flex items-center justify-center text-xl font-bold text-gray-600">
                {data.user?.user_metadata.display_name?.[0] ?? "U"}
    </div>
-            <div>
+    <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 mt-4" onclick={signOut}>
-                <span class="text-lg font-semibold text-gray-800">{data.user?.user_metadata.display_name}</span>
+        Sign Out
-                <div class="text-sm text-gray-500">{data.user?.email}</div>
+    </button>
-            </div>
+{:else}
-        </div>
+    <p>Loading user profile...</p>
-        <div class="flex flex-col gap-1">
+{/if}
            <div>
                <span class="font-medium text-gray-700">Section:</span>
                <span class="text-gray-900">{data.user_profile?.section.name ?? "N/A"}</span>
            </div>
            <div>
                <span class="font-medium text-gray-700">Position:</span>
                <span class="text-gray-900">{data.user_profile?.section_position ?? "N/A"}</span>
            </div>
        </div>
        <h2 class="text-lg mb-2 mt-4">User guide</h2>
        <p class="text-gray-700 text-sm leading-relaxed">
            To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and allow camera permissions.
            If you close and open your browser and your camera is stuck, simply refresh the page or click Stop scanning and then Start scanning again.
            When you scan a QR code, a request is sent to the server to get the user's personal information and to mark their tickets as scanned.
        </p>
        <h2 class="text-lg mb-2 mt-4">Administrator guide</h2>
        <p class="text-gray-700 text-sm leading-relaxed">
            You can view events 
        </p>
    </div>
 </div>
 <a
    href="/auth/signout"
    class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-8 rounded-full shadow-none border border-gray-300 transition"
 >
    Sign out
 </a>
--- a/src/routes/private/scanner/+page.svelte
+++ b/src/routes/private/scanner/+page.svelte
@@ -12,10 +12,11 @@
 	$effect(() => {
 		if (scanned_id === "") return;
 		console.log('New QR code found:', scanned_id);
 		scan_state = ScanState.scanning;
 		data.supabase
-			.from('participants')
+			.from('qrcodes')
 			.select(`*, event ( id, name ), scanned_by ( id, display_name )`)
 			.eq('id', scanned_id)
 			.then( response => {
--- a/src/routes/private/scanner/QRScanner.svelte
+++ b/src/routes/private/scanner/QRScanner.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount, onDestroy } from 'svelte';
+    import { onMount } from 'svelte';
    import {
        Html5QrcodeScanner,
        type Html5QrcodeResult,
@@ -37,15 +37,9 @@
        );
        scanner.render(onScanSuccess, onScanFailure);
    });
    onDestroy(() => {
        if (scanner) {
            scanner.clear().catch(() => {});
        }
    });
 </script>
-<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded-sm"></div>
+<div id="qr-scanner" class="w-full h-full max-w-none bg-slate-700 overflow-hidden"></div>
 <style>
    /* Hide unwanted icons */
@@ -55,7 +49,7 @@
    }
    #qr-scanner {
-        color: black !important;
+        color: white !important;
    }
    /* Change camera permission button text */
@@ -70,9 +64,4 @@
        visibility: visible;
        padding: 10px 0;
    }
    #qr-scanner :global(#qr-scanner__scan_region) {
        min-height: auto !important;
        aspect-ratio: 1 !important;
    }
 </style>
--- a/src/routes/private/scanner/TicketDisplay.svelte
+++ b/src/routes/private/scanner/TicketDisplay.svelte
@@ -20,9 +20,8 @@
 			<p>Waiting for data...</p>
 		</div>
 	{:else if scan_state === ScanState.scan_failed}
-		<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700">
+		<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
-			<p><strong>Scan failed!</strong></p>
+			<p>Scan failed. Please try again.</p>
 			<p>This is either not a valid ticket or this ticket has been purchased from a different section.</p>
 		</div>
 	{:else if scan_state === ScanState.scan_successful}
 		{#if ticket_data.scanned}
@@ -32,16 +31,11 @@
 				By {ticket_data.scanned_by?.display_name} on
 				{formatScannedAt(ticket_data.scanned_at)}
 			</p>
 				<hr class="my-2 border-t border-red-300" />
 				<ol>
 					<li><strong>{ticket_data.event.name}</strong></li>
 					<li>{ticket_data.name} {ticket_data.surname}</li>
 				</ol>
 		</div>
 		{:else}
 			<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
 				<ol>
-					<li><strong>{ticket_data.event.name}</strong></li>
+					<li>{ticket_data.event.name}</li>
 					<li>{ticket_data.name} {ticket_data.surname}</li>
 				</ol>
 			</div>
--- a/static/qr-code.png
+++ b/static/qr-code.png
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,7 @@
 import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import devtoolsJson from 'vite-plugin-devtools-json';
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit(), devtoolsJson()]
+	plugins: [tailwindcss(), sveltekit()]
 });
Author	SHA1	Message	Date
erman	fb9a6677e1	Run only on merges Some checks failed Build Docker image / build (push) Has been cancelled Details	2025-06-21 23:36:20 +02:00
erman	aba3369565	Merge pull request 'Fix missing env variable during build time' (#2 ) from supabase into main All checks were successful Build Docker image / build (push) Successful in 2m49s Details Reviewed-on: erman/esn-code-scanner-app#2	2025-06-21 22:40:33 +02:00
erman	083a7ce2e5	Don't ignore CI changes Some checks failed Build Docker image / build (push) Failing after 5m27s Details	2025-06-21 22:15:54 +02:00
erman	2bd7edde17	Run actions on closed pulls	2025-06-21 22:13:19 +02:00
erman	4dd35c64e0	Merge pull request 'supabase' (#1 ) from supabase into main Reviewed-on: erman/esn-code-scanner-app#1	2025-06-21 22:10:08 +02:00
erman	2bf0394ffc	Build release update only once a month Some checks failed Build Docker image / build (push) Failing after 5s Details	2025-05-29 11:08:42 +02:00