From 94e34fbc757c6c934159074669a49bf278ab690c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Fri, 18 Jul 2025 10:34:09 +0200
Subject: [PATCH] Change environment variable handling

---
 .env.example                                 | 10 +++++-----
 src/lib/components/PhotoCrop.svelte          |  3 ++-
 src/lib/components/wizard/StepGallery.svelte | 11 ++++++-----
 src/lib/google.ts                            | 12 ++++++++----
 src/routes/Navbar.Svelte                     | 12 ------------
 5 files changed, 21 insertions(+), 27 deletions(-)
 delete mode 100644 src/routes/Navbar.Svelte

diff --git a/.env.example b/.env.example
index b2d1f72..1e85364 100644
--- a/.env.example
+++ b/.env.example
@@ -1,15 +1,15 @@
 # Your Google Cloud OAuth 2.0 Client ID
-VITE_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID_HERE"
+PUBLIC_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID_HERE"
 
 # Face Detection Crop Configuration
 # Crop aspect ratio (width:height) - e.g., 1.0 for square, 1.5 for 3:2 ratio
-VITE_CROP_RATIO=1.0
+PUBLIC_CROP_RATIO=1.0
 
 # Face offset from center (as percentage of crop dimensions)
 # Positive values move the face toward bottom-right, negative toward top-left
-VITE_FACE_OFFSET_X=0.0
-VITE_FACE_OFFSET_Y=-0.1
+PUBLIC_FACE_OFFSET_X=0.0
+PUBLIC_FACE_OFFSET_Y=-0.1
 
 # Crop scale multiplier based on face width
 # 1.0 = crop width equals face width, 2.0 = crop is 2x face width
-VITE_CROP_SCALE=2.5
+PUBLIC_CROP_SCALE=2.5
diff --git a/src/lib/components/PhotoCrop.svelte b/src/lib/components/PhotoCrop.svelte
index 0859bfc..7893fbc 100644
--- a/src/lib/components/PhotoCrop.svelte
+++ b/src/lib/components/PhotoCrop.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { env } from '$env/dynamic/public';
 
 	let { imageUrl, personName, initialCropData, onCropUpdated, onClose } = $props<{
 		imageUrl: string;
@@ -35,7 +36,7 @@
 	let canvasHeight = 400;
 
 	// Get crop ratio from environment
-	const cropRatio = parseFloat(import.meta.env.VITE_CROP_RATIO || '1.0');
+	const cropRatio = parseFloat(env.PUBLIC_CROP_RATIO || '1.0');
 
 	onMount(() => {
 		ctx = canvas.getContext('2d')!;
diff --git a/src/lib/components/wizard/StepGallery.svelte b/src/lib/components/wizard/StepGallery.svelte
index ad55ced..8973807 100644
--- a/src/lib/components/wizard/StepGallery.svelte
+++ b/src/lib/components/wizard/StepGallery.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { env } from '$env/dynamic/public';
   import { columnMapping, filteredSheetData, currentStep, pictures, cropRects } from '$lib/stores';
   import { downloadDriveImage, isGoogleDriveUrl, createImageObjectUrl } from '$lib/google';
   import PhotoCard from '../PhotoCard.svelte';
@@ -219,12 +220,12 @@
         const faceWidth = (x2 - x1) * scaleX;
         const faceHeight = (y2 - y1) * scaleY;
         const faceCenterX = (x1 + (x2 - x1)/2) * scaleX;
-        const faceCenterY = (y1 + (y2 - y1)/2) * scaleY;
+        const faceCenterY = (y1 + (y2 - y1) / 2) * scaleY;
         // Load crop config from env
-        const cropRatio = parseFloat(import.meta.env.VITE_CROP_RATIO || '1.0');
-        const offsetX = parseFloat(import.meta.env.VITE_FACE_OFFSET_X || '0.0');
-        const offsetY = parseFloat(import.meta.env.VITE_FACE_OFFSET_Y || '0.0');
-        const cropScale = parseFloat(import.meta.env.VITE_CROP_SCALE || '2.5');
+        const cropRatio = parseFloat(env.PUBLIC_CROP_RATIO || '1.0');
+        const offsetX = parseFloat(env.PUBLIC_FACE_OFFSET_X || '0.0');
+        const offsetY = parseFloat(env.PUBLIC_FACE_OFFSET_Y || '0.0');
+        const cropScale = parseFloat(env.PUBLIC_CROP_SCALE || '2.5');
         // Compute crop size and center
         let cropWidth = faceWidth * cropScale;
         let cropHeight = cropWidth / cropRatio;
diff --git a/src/lib/google.ts b/src/lib/google.ts
index f284486..31f4a25 100644
--- a/src/lib/google.ts
+++ b/src/lib/google.ts
@@ -1,6 +1,5 @@
 import { writable } from 'svelte/store';
-
-const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+import { env } from '$env/dynamic/public';
 
 export const isGoogleApiReady = writable(false);
 export const isSignedIn = writable(false);
@@ -45,8 +44,13 @@ export function initGoogleClient(callback: () => void) {
   const scriptGsi = document.createElement('script');
   scriptGsi.src = 'https://accounts.google.com/gsi/client';
   scriptGsi.onload = () => {
+    const clientId = env.PUBLIC_GOOGLE_CLIENT_ID;
+    if (!clientId) {
+      console.error('PUBLIC_GOOGLE_CLIENT_ID is not set in the environment.');
+      return;
+    }
     tokenClient = google.accounts.oauth2.initTokenClient({
-      client_id: GOOGLE_CLIENT_ID,
+      client_id: clientId,
       scope: 'https://www.googleapis.com/auth/drive.readonly https://www.googleapis.com/auth/spreadsheets.readonly',
       callback: (tokenResponse) => {
         if (tokenResponse?.access_token) {
@@ -140,7 +144,7 @@ export function extractDriveFileId(url: string): string | null {
   ];
   
   for (const pattern of patterns) {
-    const match = url.match(pattern);
+    const match = pattern.exec(url);
     if (match) {
       return match[1];
     }
diff --git a/src/routes/Navbar.Svelte b/src/routes/Navbar.Svelte
deleted file mode 100644
index 3b14d09..0000000
--- a/src/routes/Navbar.Svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<nav class="border-b border-gray-300 bg-gray-50 p-2 text-gray-900">
-	<div class="container mx-auto max-w-2xl p-2">
-		<div class="flex items-center justify-between">
-			<a href="/private/home" class="text-lg font-bold" aria-label="ScanWave Home">ScanWave</a>
-
-			<ul class="flex space-x-4">
-				<li><a href="/private/scanner">Scanner</a></li>
-				<li><a href="/private/events">Events</a></li>
-			</ul>
-		</div>
-	</div>
-</nav>
\ No newline at end of file