# Copy this file to .dev.vars and fill in your values

# These are used for local development with `wrangler dev` or `bun run dev`

# Generate a secure random string for SESSION_SECRET (e.g., `openssl rand -hex 32`)

SESSION_SECRET=your-session-secret-here

# Generate ADMIN_PASSWORD_HASH using the hash-password.ts script:

# bun run scripts/hash-password.ts <your-password> <session-secret>

ADMIN_PASSWORD_HASH=your-password-hash-here

.dev.vars

        "exifr": "^7.1.3",

    "exifr": ["exifr@7.1.3", "", {}, "sha512-g/aje2noHivrRSLbAUtBPWFbxKdKhgj/xr1vATDdUXPOFYJlQ62Ft0oy+72V6XLIpDJfHs6gXLbBLAolqOXYRw=="],

		"exifr": "^7.1.3",

// Usage: bun run scripts/hash-password.ts <password> <session-secret>

// Or: npx tsx scripts/hash-password.ts <password> <session-secret>

const encoder = new TextEncoder();

async function hashPassword(password: string, secret: string): Promise<string> {

	const key = await crypto.subtle.importKey(

		"raw",

		encoder.encode(secret),

		{ name: "HMAC", hash: "SHA-256" },

		false,

		["sign"],

	);

	const signature = await crypto.subtle.sign(

		"HMAC",

		key,

		encoder.encode(password),

	);

	return Array.from(new Uint8Array(signature))

		.map((b) => b.toString(16).padStart(2, "0"))

		.join("");

}

const [password, secret] = process.argv.slice(2);

if (!password || !secret) {

	console.error(

		"Usage: bun run scripts/hash-password.ts <password> <session-secret>",

	);

	console.error("\nExample:");

	console.error(

		"  bun run scripts/hash-password.ts mypassword $(openssl rand -hex 32)",

	);

	process.exit(1);

}

const hash = await hashPassword(password, secret);

console.log(

	"\nAdd these to your .dev.vars file (for local dev) or Cloudflare secrets (for production):\n",

);

console.log(`SESSION_SECRET=${secret}`);

console.log(`ADMIN_PASSWORD_HASH=${hash}`);

console.log("\nTo set Cloudflare secrets, run:");

console.log(`  wrangler secret put SESSION_SECRET`);

console.log(`  wrangler secret put ADMIN_PASSWORD_HASH`);

		interface Locals {

			user: { authenticated: boolean } | null;

		}

				ADMIN_PASSWORD_HASH: string;

				SESSION_SECRET: string;

import type { Handle } from "@sveltejs/kit";

import { verifySession } from "$lib/auth";

export const handle: Handle = async ({ event, resolve }) => {

	const sessionCookie = event.cookies.get("session");

	const secret = event.platform?.env?.SESSION_SECRET;

	if (sessionCookie && secret) {

		const isValid = await verifySession(sessionCookie, secret);

		event.locals.user = isValid ? { authenticated: true } : null;

	} else {

		event.locals.user = null;

	}

	return resolve(event);

};

const encoder = new TextEncoder();

export async function hashPassword(

	password: string,

	secret: string,

): Promise<string> {

	const key = await crypto.subtle.importKey(

		"raw",

		encoder.encode(secret),

		{ name: "HMAC", hash: "SHA-256" },

		false,

		["sign"],

	);

	const signature = await crypto.subtle.sign(

		"HMAC",

		key,

		encoder.encode(password),

	);

	return arrayBufferToHex(signature);

}

export async function verifyPassword(

	password: string,

	hash: string,

	secret: string,

): Promise<boolean> {

	const computed = await hashPassword(password, secret);

	return timingSafeEqual(computed, hash);

}

export async function createSession(secret: string): Promise<string> {

	const sessionId = crypto.randomUUID();

	const timestamp = Date.now().toString();

	const data = `${sessionId}.${timestamp}`;

	const key = await crypto.subtle.importKey(

		"raw",

		encoder.encode(secret),

		{ name: "HMAC", hash: "SHA-256" },

		false,

		["sign"],

	);

	const signature = await crypto.subtle.sign("HMAC", key, encoder.encode(data));

	const sig = arrayBufferToHex(signature);

	return `${data}.${sig}`;

}

export async function verifySession(

	token: string,

	secret: string,

): Promise<boolean> {

	const parts = token.split(".");

	if (parts.length !== 3) return false;

	const [sessionId, timestamp, providedSig] = parts;

	const data = `${sessionId}.${timestamp}`;

	// Check if session is expired (24 hours)

	const sessionTime = parseInt(timestamp, 10);

	if (isNaN(sessionTime) || Date.now() - sessionTime > 24 * 60 * 60 * 1000) {

		return false;

	}

	const key = await crypto.subtle.importKey(

		"raw",

		encoder.encode(secret),

		{ name: "HMAC", hash: "SHA-256" },

		false,

		["sign"],

	);

	const signature = await crypto.subtle.sign("HMAC", key, encoder.encode(data));

	const expectedSig = arrayBufferToHex(signature);

	return timingSafeEqual(providedSig, expectedSig);

}

function arrayBufferToHex(buffer: ArrayBuffer): string {

	return Array.from(new Uint8Array(buffer))

		.map((b) => b.toString(16).padStart(2, "0"))

		.join("");

}

function timingSafeEqual(a: string, b: string): boolean {

	if (a.length !== b.length) return false;

	let result = 0;

	for (let i = 0; i < a.length; i++) {

		result |= a.charCodeAt(i) ^ b.charCodeAt(i);

	}

	return result === 0;

}

import type { LayoutServerLoad } from "./$types";

import { redirect } from "@sveltejs/kit";

export const load: LayoutServerLoad = async ({ locals }) => {

	if (!locals.user?.authenticated) {

		throw redirect(302, "/login");

	}

	return {};

};

import type { Actions, PageServerLoad } from "./$types";

import { fail, redirect, isRedirect } from "@sveltejs/kit";

const R2_BASE_URL = "https://r2.steve.photo";

export const load: PageServerLoad = async () => {

	return {};

};

export const actions: Actions = {

	upload: async ({ request, platform, locals }) => {

		if (!locals.user?.authenticated) {

			return fail(401, { error: "Unauthorized" });

		}

		const db = platform?.env?.DB;

		const bucket = platform?.env?.PHOTOS;

		if (!db || !bucket) {

			return fail(500, { error: "Server configuration error" });

		}

		const formData = await request.formData();

		const file = formData.get("file") as File | null;

		const thumbnail = formData.get("thumbnail") as File | null;

		const title = formData.get("title") as string;

		const date = formData.get("date") as string;

		const camera = formData.get("camera") as string;

		const lens = formData.get("lens") as string;

		const aperture = formData.get("aperture") as string;

		const exposure = formData.get("exposure") as string;

		const focalLength = formData.get("focalLength") as string;

		const iso = formData.get("iso") as string;

		const make = formData.get("make") as string;

		if (!file || !title || !date) {

			return fail(400, { error: "File, title, and date are required" });

		}

		// Generate slug from title

		const slug = title

			.toLowerCase()

			.replace(/[^a-z0-9]+/g, "-")

			.replace(/(^-|-$)/g, "");

		// Check if slug already exists

		const existing = await db

			.prepare("SELECT id FROM photos WHERE slug = ?")

			.bind(slug)

			.first();

		if (existing) {

			return fail(400, { error: "A photo with this title already exists" });

		}

		// Get file extension

		const ext = file.name.split(".").pop()?.toLowerCase() || "jpg";

		const imageKey = `${slug}.${ext}`;

		const thumbKey = `${slug}-thumb.jpg`;

		try {

			// Upload original image to R2

			const fileBuffer = await file.arrayBuffer();

			await bucket.put(imageKey, fileBuffer, {

				httpMetadata: {

					contentType: file.type,

				},

			});

			// Upload thumbnail to R2

			if (thumbnail) {

				const thumbBuffer = await thumbnail.arrayBuffer();

				await bucket.put(thumbKey, thumbBuffer, {

					httpMetadata: {

						contentType: "image/jpeg",

					},

				});

			} else {

				// If no thumbnail provided, use original as thumbnail

				await bucket.put(thumbKey, fileBuffer, {

					httpMetadata: {

						contentType: file.type,

					},

				});

			}

			// Insert into database

			await db

				.prepare(

					`INSERT INTO photos (slug, title, date, image_key, thumb_key, camera, lens, aperture, exposure, focal_length, iso, make)

					 VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,

				)

				.bind(

					slug,

					title,

					date,

					imageKey,

					thumbKey,

					camera || null,

					lens || null,

					aperture || null,

					exposure || null,

					focalLength || null,

					iso || null,

					make || null,

				)

				.run();

			throw redirect(302, `/photo/${slug}`);

		} catch (err) {

			if (isRedirect(err)) {

				throw err; // Re-throw redirects

			}

			const errorMessage = err instanceof Error ? err.message : String(err);

			console.error("Upload error:", errorMessage, err);

			return fail(500, { error: `Failed to upload photo: ${errorMessage}` });

		}

	},

};

<script lang="ts">

	import { enhance } from "$app/forms";

	import exifr from "exifr";

	let { form } = $props();

	let fileInput = $state<HTMLInputElement | null>(null);

	let selectedFile = $state<File | null>(null);

	let previewUrl = $state<string | null>(null);

	let thumbnailBlob = $state<Blob | null>(null);

	let title = $state("");

	let date = $state("");

	let camera = $state("");

	let lens = $state("");

	let aperture = $state("");

	let exposure = $state("");

	let focalLength = $state("");

	let iso = $state("");

	let make = $state("");

	let isLoading = $state(false);

	async function handleFileSelect(event: Event) {

		const input = event.target as HTMLInputElement;

		const file = input.files?.[0];

		if (!file) return;

		selectedFile = file;

		previewUrl = URL.createObjectURL(file);

		// Auto-populate title from filename

		const nameWithoutExt = file.name.replace(/\.[^/.]+$/, "");

		title = nameWithoutExt.replace(/[-_]/g, " ");

		// Extract EXIF data

		try {

			const exif = await exifr.parse(file, {

				pick: [

					"DateTimeOriginal",

					"Model",

					"LensModel",

					"FNumber",

					"ExposureTime",

					"FocalLength",

					"ISO",

					"Make",

				],

			});

			if (exif) {

				if (exif.DateTimeOriginal) {

					const d = new Date(exif.DateTimeOriginal);

					date = d.toISOString().split("T")[0];

				}

				if (exif.Model) camera = exif.Model;

				if (exif.LensModel) lens = exif.LensModel;

				if (exif.FNumber) aperture = `f/${exif.FNumber}`;

				if (exif.ExposureTime) {

					exposure =

						exif.ExposureTime < 1 ? `1/${Math.round(1 / exif.ExposureTime)}s` : `${exif.ExposureTime}s`;

				}

				if (exif.FocalLength) focalLength = `${exif.FocalLength}mm`;

				if (exif.ISO) iso = String(exif.ISO);

				if (exif.Make) make = exif.Make;

			}

		} catch (err) {

			console.error("Failed to read EXIF data:", err);

		}

		// Generate thumbnail

		await generateThumbnail(file);

	}

	async function generateThumbnail(file: File): Promise<void> {

		return new Promise((resolve) => {

			const img = new Image();

			img.onload = () => {

				const maxSize = 400;

				let width = img.width;

				let height = img.height;

				if (width > height) {

					if (width > maxSize) {

						height = (height * maxSize) / width;

						width = maxSize;

					}

				} else {

					if (height > maxSize) {

						width = (width * maxSize) / height;

						height = maxSize;

					}

				}

				const canvas = document.createElement("canvas");

				canvas.width = width;

				canvas.height = height;

				const ctx = canvas.getContext("2d");

				if (ctx) {

					ctx.drawImage(img, 0, 0, width, height);

					canvas.toBlob(

						(blob) => {

							thumbnailBlob = blob;

							resolve();

						},

						"image/jpeg",

						0.8

					);

				} else {

					resolve();

				}

			};

			img.src = URL.createObjectURL(file);

		});

	}

	function handleSubmit() {

		isLoading = true;

	}

</script>

<svelte:head>

	<title>Admin - Upload Photo</title>

</svelte:head>

<div class="min-h-screen p-4 md:p-8">

	<div class="max-w-2xl mx-auto">

		<div class="flex items-center justify-between mb-8">

			<h1 class="text-2xl font-bold">Upload Photo</h1>

			<a

				href="/api/logout"

				class="text-sm text-zinc-400 hover:text-white transition-colors"

			>

				Logout

			</a>

		</div>

		<form

			method="POST"

			action="?/upload"

			enctype="multipart/form-data"

			use:enhance={({ formData }) => {

				handleSubmit();

				// Append thumbnail blob as file

				if (thumbnailBlob) {

					formData.append("thumbnail", thumbnailBlob, "thumbnail.jpg");

				}

				return async ({ update }) => {

					isLoading = false;

					await update();

				};

			}}

			class="space-y-6"

		>

			<div>

				<label for="file" class="block text-sm mb-2">Image</label>

				<input

					type="file"

					id="file"

					name="file"

					accept="image/jpeg,image/png,image/webp"

					required

					bind:this={fileInput}

					onchange={handleFileSelect}

					class="w-full px-4 py-2 bg-zinc-900 border border-zinc-700 rounded focus:outline-none focus:border-zinc-500 file:mr-4 file:py-1 file:px-4 file:rounded file:border-0 file:bg-zinc-700 file:text-white file:cursor-pointer"

				/>

			</div>

			{#if previewUrl}

				<div class="relative">

					<img

						src={previewUrl}

						alt="Preview"

						class="w-full max-h-64 object-contain rounded bg-zinc-900"

					/>

				</div>

			{/if}

			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

				<div>

					<label for="title" class="block text-sm mb-2">Title *</label>

					<input

						type="text"

						id="title"

						name="title"

						required

						bind:value={title}

						class="w-full px-4 py-2 bg-zinc-900 border border-zinc-700 rounded focus:outline-none focus:border-zinc-500"

					/>

				</div>

				<div>

					<label for="date" class="block text-sm mb-2">Date *</label>

					<input

						type="date"

						id="date"

						name="date"

						required

						bind:value={date}

						class="w-full px-4 py-2 bg-zinc-900 border border-zinc-700 rounded focus:outline-none focus:border-zinc-500"

					/>

				</div>

			</div>

			<div class="border-t border-zinc-800 pt-6">

				<h2 class="text-lg font-medium mb-4">EXIF Data</h2>

				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

					<div>

						<label for="make" class="block text-sm mb-2">Make</label>

						<input

							type="text"

							id="make"

							name="make"

							bind:value={make}

							class="w-full px-4 py-2 bg-zinc-900 border border-zinc-700 rounded focus:outline-none focus:border-zinc-500"

						/>

					</div>

					<div>

						<label for="camera" class="block text-sm mb-2">Camera</label>

						<input

							type="text"

							id="camera"

							name="camera"

							bind:value={camera}

							class="w-full px-4 py-2 bg-zinc-900 border border-zinc-700 rounded focus:outline-none focus:border-zinc-500"

						/>

					</div>

					<div>

						<label for="lens" class="block text-sm mb-2">Lens</label>

						<input

							type="text"

							id="lens"

							name="lens"

							bind:value={lens}

							class="w-full px-4 py-2 bg-zinc-900 border border-zinc-700 rounded focus:outline-none focus:border-zinc-500"

						/>

					</div>

					<div>

						<label for="aperture" class="block text-sm mb-2">Aperture</label>

						<input

							type="text"

							id="aperture"

							name="aperture"

							bind:value={aperture}

							class="w-full px-4 py-2 bg-zinc-900 border border-zinc-700 rounded focus:outline-none focus:border-zinc-500"

						/>

					</div>

					<div>

						<label for="exposure" class="block text-sm mb-2">Exposure</label>

						<input

							type="text"

							id="exposure"

							name="exposure"

							bind:value={exposure}

							class="w-full px-4 py-2 bg-zinc-900 border border-zinc-700 rounded focus:outline-none focus:border-zinc-500"

						/>

					</div>

					<div>

						<label for="focalLength" class="block text-sm mb-2">Focal Length</label>

						<input

							type="text"

							id="focalLength"

							name="focalLength"

							bind:value={focalLength}

							class="w-full px-4 py-2 bg-zinc-900 border border-zinc-700 rounded focus:outline-none focus:border-zinc-500"

						/>

					</div>

					<div>

						<label for="iso" class="block text-sm mb-2">ISO</label>

						<input

							type="text"

							id="iso"

							name="iso"

							bind:value={iso}

							class="w-full px-4 py-2 bg-zinc-900 border border-zinc-700 rounded focus:outline-none focus:border-zinc-500"

						/>

					</div>

				</div>

			</div>

			{#if form?.error}

				<p class="text-red-500 text-sm">{form.error}</p>

			{/if}

			<button

				type="submit"

				disabled={isLoading || !selectedFile}

				class="w-full py-3 bg-white text-black font-medium rounded hover:bg-zinc-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"

			>

				{isLoading ? "Uploading..." : "Upload Photo"}

			</button>

		</form>

		<p class="mt-6 text-center text-sm text-zinc-500">

			<a href="/" class="hover:text-white transition-colors">&larr; Back to gallery</a>

		</p>

	</div>

</div>

import { redirect } from "@sveltejs/kit";

import type { RequestHandler } from "./$types";

export const GET: RequestHandler = async ({ cookies }) => {

	cookies.delete("session", { path: "/" });

	throw redirect(302, "/");

};

import type { Actions, PageServerLoad } from "./$types";

import { fail, redirect } from "@sveltejs/kit";

import { verifyPassword, createSession } from "$lib/auth";

export const load: PageServerLoad = async ({ locals }) => {

	if (locals.user?.authenticated) {

		throw redirect(302, "/admin");

	}

	return {};

};

export const actions: Actions = {

	default: async ({ request, platform, cookies }) => {

		const data = await request.formData();

		const password = data.get("password");

		if (!password || typeof password !== "string") {

			return fail(400, { error: "Password is required" });

		}

		const secret = platform?.env?.SESSION_SECRET;

		const passwordHash = platform?.env?.ADMIN_PASSWORD_HASH;

		if (!secret || !passwordHash) {

			return fail(500, { error: "Server configuration error" });

		}

		const isValid = await verifyPassword(password, passwordHash, secret);

		if (!isValid) {

			return fail(401, { error: "Invalid password" });

		}

		const session = await createSession(secret);

		cookies.set("session", session, {

			path: "/",

			httpOnly: true,

			secure: true,

			sameSite: "strict",

			maxAge: 60 * 60 * 24, // 24 hours

		});

		throw redirect(302, "/admin");

	},

};

<script lang="ts">

	import { enhance } from "$app/forms";

	let { form } = $props();

</script>

<svelte:head>

	<title>Login</title>

</svelte:head>

<div class="min-h-screen flex items-center justify-center p-4">

	<div class="w-full max-w-sm">

		<h1 class="text-2xl font-bold mb-8 text-center">Admin Login</h1>

		<form method="POST" use:enhance class="space-y-4">

			<div>

				<label for="password" class="block text-sm mb-2">Password</label>

				<input

					type="password"

					id="password"

					name="password"

					required

					class="w-full px-4 py-2 bg-zinc-900 border border-zinc-700 rounded focus:outline-none focus:border-zinc-500"

				/>

			</div>

			{#if form?.error}

				<p class="text-red-500 text-sm">{form.error}</p>

			{/if}

			<button

				type="submit"

				class="w-full py-2 bg-white text-black font-medium rounded hover:bg-zinc-200 transition-colors"

			>

				Sign In

			</button>

		</form>

		<p class="mt-6 text-center text-sm text-zinc-500">

			<a href="/" class="hover:text-white transition-colors">&larr; Back to gallery</a>

		</p>

	</div>

</div>