Fix tests

Flake lock file updates:

• Updated input 'nixpkgs':
    'github:nixos/nixpkgs/693bc46d169f5af9c992095736e82c3488bf7dbb' (2024-07-14)
  → 'github:nixos/nixpkgs/c3aa7b8938b17aebd2deecf7be0636000d62a2b9' (2024-08-14)

.gitea/workflows/lints.yml

@@ -0,0 +1,24 @@
+on:
+  workflow_call:
+  push:
+    branches:
+      - main
+  pull_request:
+  schedule:
+    - cron: '0 0 * * *'
+
+jobs:
+  shellcheck:
+    name: Misc Linters
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout sources
+        uses: https://gitea.com/actions/checkout@v4
+
+      - name: Lint shellscripts
+        uses: ludeeus/action-shellcheck@master
+
+      - name: Lint Dockerfile
+        uses: hadolint/hadolint-action@v3.1.0
+        with:
+          dockerfile: ./Containerfile

.gitea/workflows/publish.yml

@@ -6,6 +6,9 @@ on:
       - 'v*'
 
 jobs:
+  lints:
+    uses: ./.gitea/workflows/lints.yml
+
   tests:
     uses: ./.gitea/workflows/node.yml
 
@@ -19,10 +22,10 @@ jobs:
 
     steps:
       - name: Checkout sources
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Login to DockerHub
-        uses: docker/login-action@v2
+      - name: Login to Container Registry
+        uses: docker/login-action@v3
         with:
           registry: https://git.vbrandl.net
           username: ${{ secrets.REGISTRY_USER }}
@@ -35,7 +38,7 @@ jobs:
           echo REPO_VERSION=$(git describe --tags --always | sed 's/^v//') >> $GITHUB_OUTPUT
 
       - name: Build and push
-        uses: docker/build-push-action@v4
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: ./Containerfile

Containerfile

@@ -8,8 +8,10 @@ COPY . .
 RUN npm run build
 
 FROM node:21-alpine
-USER node:node
 WORKDIR /app
+RUN chown -R node:node /app
+USER node:node
+COPY ./container/entrypoint.sh /entrypoint.sh
 COPY package.json .
 COPY --from=builder /app/build ./build
-CMD ["node", "./build/index.js"]
+ENTRYPOINT ["sh", "/entrypoint.sh"]

container/entrypoint.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env sh
+
+set -e
+
+export STORAGE_PATH="${STORAGE_PATH:-./uploads}"
+
+entrypoint() {
+  mkdir -p "${STORAGE_PATH}"
+  node ./build/index.js
+}
+
+entrypoint

flake.lock

@@ -20,11 +20,11 @@
 		},
 		"nixpkgs": {
 			"locked": {
-				"lastModified": 1720957393,
-				"narHash": "sha256-oedh2RwpjEa+TNxhg5Je9Ch6d3W1NKi7DbRO1ziHemA=",
+				"lastModified": 1723637854,
+				"narHash": "sha256-med8+5DSWa2UnOqtdICndjDAEjxr5D7zaIiK4pn0Q7c=",
 				"owner": "nixos",
 				"repo": "nixpkgs",
-				"rev": "693bc46d169f5af9c992095736e82c3488bf7dbb",
+				"rev": "c3aa7b8938b17aebd2deecf7be0636000d62a2b9",
 				"type": "github"
 			},
 			"original": {

flake.nix

@@ -15,7 +15,7 @@
           };
         in {
           devShell = pkgs.mkShell {
-            nativeBuildInputs = with pkgs; [ nodejs ];
+            nativeBuildInputs = with pkgs; [ nodejs_latest ];
           };
         }
       );

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fotochallenge",
-	"version": "0.0.1",
+	"version": "0.0.4",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -17,23 +17,24 @@
 		"@sveltejs/adapter-node": "^5.2.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@types/eslint": "^8.56.7",
+		"@types/eslint": "^9.0.0",
 		"@types/node": "^20.14.11",
+		"bulma": "^1.0.1",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
+		"sass": "^1.77.5",
+		"simple-svelte-autocomplete": "^2.5.2",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0-alpha.20",
 		"vite": "^5.0.3",
-		"vitest": "^2.0.0",
-		"bulma": "^1.0.1",
-		"sass": "^1.77.5"
+		"vitest": "^2.0.0"
 	},
 	"type": "module",
 	"engines": {

src/index.test.ts

@@ -2,7 +2,19 @@ import safePath from '$lib';
 import { describe, it, expect } from 'vitest';
 
 describe('safe path', () => {
-	it('removes non alphanum from string', () => {
-		expect(safePath('../../!=-.,/abc123')).toBe('abc123');
+	it('reject names with ../', () => {
+		expect(safePath('../foobar', './uploads')).toBe(false);
+	});
+
+	it('accept names with ./', () => {
+		expect(safePath('./foobar', './uploads')).toBe(true);
+	});
+
+	it('reject names with /', () => {
+		expect(safePath('foo/bar', './uploads')).toBe(false);
+	});
+
+	it('accept happy path', () => {
+		expect(safePath('foobar', './uploads')).toBe(true);
 	});
 });

src/lib/index.ts

@@ -1,5 +1,24 @@
 // place files you want to import through the `$lib` alias in this folder.
+import path from 'path';
 
-const safePath = (input: string) => input.replace(/\W/g, '');
+function safePath(name: string, basePath: string): boolean {
+	const fullPath = `${basePath}/${name}`;
+	const relative = path.relative(basePath, fullPath);
+	return (
+		!!relative &&
+		// does move out of `basePath`
+		!relative.startsWith('..') &&
+		// exactly one layer deep, e.g. no `./uplodas/foo/bar`
+		!relative.includes('/') &&
+		// result is not an absolute path
+		!path.isAbsolute(relative)
+	);
+}
+
+const defaultPath: string = './uploads';
+if (!('STORAGE_PATH' in process.env)) {
+	console.warn(`'STORAGE_PATH' environment variable is not set. Defaulting to ${defaultPath}`);
+}
+export const storagePath: string = process.env.STORAGE_PATH ?? defaultPath;
 
 export default safePath;

src/routes/+page.server.ts

@@ -1,12 +1,10 @@
 import { writeFileSync, mkdirSync, existsSync } from 'fs';
 import { fail } from '@sveltejs/kit';
 import type { RequestEvent } from './$types';
-import safePath from '$lib';
+import safePath, { storagePath } from '$lib';
 import { hash } from 'crypto';
 import path from 'path';
 
-const storagePath: string = './uploads';
-
 const mkdirIfNotExists = (path: string) => {
 	if (!existsSync(path)) {
 		mkdirSync(path);
@@ -36,7 +34,12 @@ export const actions = {
 			return fail(400, { field: 'name', name: formName, incorrect: true });
 		}
 
-		const name = safePath(formName as string);
+		const name = formName as string;
+
+		if (!safePath(name, storagePath)) {
+			return fail(400, { field: 'name', name: name, incorrect: true });
+		}
+		// const name = safePath(formName as string);
 
 		files.forEach(async (file) => {
 			const outPath = `${storagePath}/${name}`;

src/routes/+page.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import type { ActionData } from './$types';
+	// @ts-expect-error: package does not contain type definitions
+	import AutoComplete from 'simple-svelte-autocomplete';
 
 	export let form: ActionData;
 
+	let selectedName: string;
+
 	let files: FileList;
 	let sending = false;
 
@@ -21,6 +25,12 @@
 				.map(([k, v]) => `${(size / k).toFixed(1)} ${v}B`)[0] ?? `${size} bytes`
 		);
 	};
+
+	async function loadNames() {
+		const url = './names';
+		const response = await fetch(url);
+		return await response.json();
+	}
 </script>
 
 <form
@@ -44,14 +54,15 @@
 	<div class="field">
 		<label for="name" class="label">Name</label>
 		<div class="control">
-			<input
+			<AutoComplete
 				id="name"
-				class="input"
-				type="text"
 				name="name"
 				placeholder="Name"
-				value={form?.name ?? ''}
-				required
+				create={true}
+				bind:selectedItem={selectedName}
+				bind:text={selectedName}
+				createText=""
+				searchFunction={loadNames}
 			/>
 		</div>
 		{#if form?.field === 'name'}
@@ -69,10 +80,10 @@
 			<span class="file-cta">
 				<span class="file-label">Fotos auswählen...</span>
 			</span>
-			{#if files}
-				<span class="file-name"
-					>{files.length} Bild{#if files.length > 1}er{/if} ausgewählt ({fileSize(files)})</span
-				>
+			{#if files && files?.length !== 0}
+				<span class="file-name">
+					{files.length} Bild{#if files.length > 1}er{/if} ausgewählt ({fileSize(files)})
+				</span>
 			{:else}
 				<span class="file-name">Keine Bilder ausgewählt</span>
 			{/if}

src/routes/names/+server.ts

@@ -0,0 +1,12 @@
+import { storagePath } from '$lib';
+import { json } from '@sveltejs/kit';
+import { readdirSync, statSync } from 'fs';
+
+export function GET() {
+	const names = readdirSync(storagePath).filter((f) =>
+		statSync(`${storagePath}/${f}`).isDirectory()
+	);
+	names.sort();
+
+	return json(names);
+}

src/variables.scss

@@ -1,2 +1,2 @@
 /* Set your brand colors */
-$pink: pink;
+$pink: #d47479;