Merge pull request 'b999_chrome_file_upload' (#47) from b999_chrome_file_upload into development

Reviewed-on: #47

Dockerfile.prod

@@ -1,7 +1,5 @@
 # --- Build stage ---
 FROM node:22 AS build
-ENV NODE_ENV=production
-ENV ORIGIN=https://tatort.innovation-hub-niedersachsen.de
 WORKDIR /app
 COPY package*.json ./
 RUN npm ci
@@ -11,7 +9,13 @@ RUN npm run build
 
 # --- Production stage ---
 FROM node:22-alpine3.20
-COPY --from=build /app .
+WORKDIR /app
+ENV NODE_ENV=production
+ENV ORIGIN=https://tatort.innovation-hub-niedersachsen.de
+COPY --from=build /app/build ./build
+COPY --from=build /app/package*.json ./
+COPY --from=build /app/config.json ./config.json
+RUN npm ci --omit=dev
 ENV HOST=0.0.0.0
 EXPOSE 3000
-CMD ["sh", "-c", "ORIGIN=https://tatort.innovation-hub-niedersachsen.de node build/index.js"]
+CMD ["node", "build/index.js"]

config.json

@@ -1,10 +1,10 @@
 {
 	"minio": {
-		"endPoint": "sws3.innovation-hub-niedersachsen.de",
+		"endPoint": "api-s3.innovation-hub-niedersachsen.de",
 		"port": 443,
 		"useSSL": true,
-		"accessKey": "wjpKrmaqXra99rX3D61H",
-		"secretKey": "fTPi0u0FR6Lv9Y9IKydWv6WM0EA5XrsK008HCt9u"
+		"accessKey": "AbCdEfGhIjKlMnOpQrSt",
+		"secretKey": "UvWxYz1234567890AbCdEfGhIjKlMnOpQrStUvWx"
 	},
 	"jwt": {
 		"secret": "@S2!q@@wXz$dCQ8JoVsHLpzaJ6JCfB",

config_dev.json

@@ -1,10 +1,10 @@
 {
 	"minio": {
-		"endPoint": "sws3.innovation-hub-niedersachsen.de",
+		"endPoint": "api-s3.innovation-hub-niedersachsen.de",
 		"port": 443,
 		"useSSL": true,
-		"accessKey": "wjpKrmaqXra99rX3D61H",
-		"secretKey": "fTPi0u0FR6Lv9Y9IKydWv6WM0EA5XrsK008HCt9u"
+		"accessKey": "AbCdEfGhIjKlMnOpQrSt",
+		"secretKey": "UvWxYz1234567890AbCdEfGhIjKlMnOpQrStUvWx"
 	},
 	"jwt": {
 		"secret": "@S2!q@@wXz$dCQ8JoVsHLpzaJ6JCfB",

config_prod.json

@@ -1,10 +1,10 @@
 {
 	"minio": {
-		"endPoint": "sws3.innovation-hub-niedersachsen.de",
+		"endPoint": "api-s3.innovation-hub-niedersachsen.de",
 		"port": 443,
 		"useSSL": true,
-		"accessKey": "wjpKrmaqXra99rX3D61H",
-		"secretKey": "fTPi0u0FR6Lv9Y9IKydWv6WM0EA5XrsK008HCt9u"
+		"accessKey": "GxKhfnfkNvlDU7qzsz0D",
+		"secretKey": "cqSM5rIRr4MPtqzu2sNKgmB9k2OghPbyxwAWogeM"
 	},
 	"jwt": {
 		"secret": "@S2!q@@wXz$dCQ8JoVsHLpzaJ6JCfB",

package-lock.json

@@ -1461,9 +1461,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.49.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.49.0.tgz",
-			"integrity": "sha512-oH8tXw7EZnie8FdOWYrF7Yn4IKrqTFHhXvl8YxXxbKwTMcD/5NNCryUSEXRk2ZR4ojnub0P8rNrsVGHXWqIDtA==",
+			"version": "2.49.2",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.49.2.tgz",
+			"integrity": "sha512-Vp3zX/qlwerQmHMP6x0Ry1oY7eKKRcOWGc2P59srOp4zcqyn+etJyQpELgOi4+ZSUgteX8Y387NuwruLgGXLUQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@standard-schema/spec": "^1.0.0",
@@ -4534,12 +4534,12 @@
 			}
 		},
 		"node_modules/jws": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
-			"integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+			"version": "3.2.3",
+			"resolved": "https://registry.npmjs.org/jws/-/jws-3.2.3.tgz",
+			"integrity": "sha512-byiJ0FLRdLdSVSReO/U4E7RoEyOCKnEnEPMjq3HxWtvzLsV08/i5RQKsFVNkCldrCaPr2vDNAOMsfs8T/Hze7g==",
 			"license": "MIT",
 			"dependencies": {
-				"jwa": "^1.4.1",
+				"jwa": "^1.4.2",
 				"safe-buffer": "^5.0.1"
 			}
 		},

src/lib/config.ts

@@ -1,3 +1,3 @@
 import { readFileSync } from 'fs';
 
-export default JSON.parse(readFileSync('./config_prod.json').toString());
+export default JSON.parse(readFileSync('./config.json').toString());

src/routes/(token-based)/list/[vorgang]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { fade } from 'svelte/transition';
 	import shortenFileSize from '$lib/helper/shortenFileSize';
 	import timeElapsed from '$lib/helper/timeElapsed';
 	import { deserialize } from '$app/forms';
@@ -41,11 +42,15 @@
 	let formErrors: Record<string, any> | null = $state(null);
 	let etag: string | null = $state(null);
 	let files: FileList | null = $state(null);
+	let fileInput = $state(null);
 
 	// Model Variablen für Upload
 	let openUL = $state(false);
 	let inProgressUL = $state(form === null);
 	
+	// Variablen für Copy-Funktion
+    let copied = $state(false);
+
 	async function buttonClick(event: MouseEvent) {
 		if (!(await validateForm())) {
 			event.preventDefault();
@@ -98,6 +103,7 @@
 		openUL = false;
 		name = '';
 		files = null;
+		fileInput.value = "";
 		await invalidateAll();
 		crimesList = data.crimesList;
 	}
@@ -128,17 +134,17 @@
 
 		// big endian!
 		let file = files[0];
-		let file_header = file.slice(0, 4);
-		console.log(file_header);
-		let header_bytes = await file_header.bytes();
-		let file_header_hex = '0x' + header_bytes.toHex().toString();
+		const fileHeader = file.slice(0, 4);
+		const buffer = await fileHeader.arrayBuffer();
+		console.log(fileHeader);
+		let headerBytes = new Uint8Array(buffer);
+		let fileHeaderHex = '0x' + headerBytes.toHex().toString();
 
-		if (GLD_MAGIC == swap_endian(file_header_hex)) {
+		if (GLD_MAGIC == swap_endian(fileHeaderHex)) {
 			return true;
 		} else {
 			return false;
 		}
-		return true;
 	}
 
 	async function getUrl() {
@@ -248,9 +254,8 @@
 		}
 	}
 
-	function constructMailToLink() {
+	async function copyAndOpenMail() {
 		const subject = 'Link zum Tatvorgang';
-
 		const link = data.url.origin + data.url.pathname;
 		const body = `Hallo,
 
@@ -262,17 +267,56 @@ Der Zugangs-PIN wird zur Sicherheit über einen zweiten Kommunikationskanal übe
 Mit freundlichen Grüßen,
 `;
 
-		const mailtoLink = `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+    try {
+        await navigator.clipboard.writeText(body);
         
-		return mailtoLink;
-	}
+        copied = true;
+
+        // Kurz warten, dann Mail öffnen
+        setTimeout(() => {
+            const mailtoLink = `mailto:?subject=${encodeURIComponent(subject)}`;
+            window.location.href = mailtoLink;
+        }, 1000);
+        
+        setTimeout(() => copied = false, 2000);
+    } catch (err) {
+        console.error('Clipboard-Fehler:', err);
+        error = 'Konnte Text nicht kopieren. Bitte manuell markieren und kopieren.';
+        }
+    }
 
 	function closeModal() {
 		open = false;
 		isError = false;
 	}
+
+	// drag and drop functionality
+		let isDragging = $state(false);
+
+		async function handleDrop(event) {
+			event.preventDefault();
+			isDragging = false;
+
+			if (event.dataTransfer?.files?.length) {
+				files = event.dataTransfer.files;
+			}
+			if (!(await check_valid_glb_file())) {
+				formErrors = { file: 'Keine gültige .GLD-Datei' }
+				// reset form fields etc.
+				files = null;
+				fileInput.value = '';
+			} else {
+				formErrors = { ...formErrors, file: ''}
+			};
+		}
+
 </script>
 
+<svelte:window
+	on:dragover|preventDefault
+	on:drop|preventDefault
+/>
+
 {#if data.vorgang && crimesList}
 	<div class="-z-10 bg-white">
 		<div class="flex flex-col items-center justify-center w-full">
@@ -288,9 +332,10 @@ Mit freundlichen Grüßen,
 				onDelete={null}
 				/>
 				</div>
-				<a class="pt-2 pb-6" href={constructMailToLink()}
-					><Button disabled={isEmptyList}>Share Link</Button></a
-				>
+                <Button variant="secondary" on:click={copyAndOpenMail} disabled={isEmptyList}>Link kopieren und Mail verfassen</Button>
+                {#if copied}
+                <p transition:fade>✔ Kopiert! Per Ctrl+V einfügen.</p>
+                {/if}
 			{/if}
 		</div>
 		<div class="mx-auto flex justify-center max-w-7xl h-full">
@@ -398,7 +443,13 @@ Mit freundlichen Grüßen,
 							</span>
 						</label>
 						<div
-							class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10"
+							class="mt-2 flex justify-center rounded-lg border border-dashed px-6 py-10
+								{isDragging
+								? 'border-blue-500 bg-blue-50'
+								: 'border-gray-900/25'}"
+							on:dragover|preventDefault={() => (isDragging = true)}
+							on:dragleave={() => (isDragging = false)}
+							on:drop={handleDrop}
 						>
 							<div class="text-center">
 								<FileRect />
@@ -408,7 +459,7 @@ Mit freundlichen Grüßen,
 										class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500"
 									>
 										<span>Wähle eine Datei aus</span>
-										<input id="file" bind:files name="file" type="file" class="sr-only" />
+										<input id="file" bind:this={fileInput} bind:files name="file" type="file" class="sr-only" />
 									</label>
 									<p class="pl-1">oder ziehe sie ins Feld</p>
 								</div>