Secred in separate file, desing improvements

app.js

@@ -1,7 +1,6 @@
 const STORAGE_KEY = "routes.links.v1";
 const AUTH_SESSION_KEY = "routes.authenticated.v1";
-// Simple shared secret. Change this before publishing if needed.
-const AUTH_SECRET = "change-me";
+const AUTH_SECRET = window.ROUTES_SECRET;
 
 const authScreen = document.querySelector("#auth-screen");
 const authForm = document.querySelector("#auth-form");
@@ -47,6 +46,11 @@ function authenticate(event) {
   event.preventDefault();
   authMessage.textContent = "";
 
+  if (!AUTH_SECRET) {
+    authMessage.textContent = "Missing config.js secret.";
+    return;
+  }
+
   if (authSecretInput.value.trim() !== AUTH_SECRET) {
     authMessage.textContent = "Wrong secret.";
     authSecretInput.select();
@@ -85,15 +89,19 @@ function storeRoutes() {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(routes));
 }
 
-function saveRoute(event) {
+async function saveRoute(event) {
   event.preventDefault();
 
+  const id = idInput.value || createId();
+  const existingIndex = routes.findIndex((item) => item.id === id);
+  const existingRoute = routes[existingIndex];
+
   const route = {
-    id: idInput.value || createId(),
+    id,
     name: nameInput.value.trim(),
     link: linkInput.value.trim(),
     date: dateInput.value,
-    picture: pictureInput.value.trim(),
+    picture: existingRoute?.picture || "",
     description: descriptionInput.value.trim(),
     updatedAt: new Date().toISOString(),
   };
@@ -102,12 +110,20 @@ function saveRoute(event) {
     return;
   }
 
-  if (!isValidUrl(route.link) || (route.picture && !isValidUrl(route.picture))) {
-    alert("Please enter valid URLs for the map link and picture.");
+  if (!isValidUrl(route.link)) {
+    alert("Please enter a valid Google Maps link.");
     return;
   }
 
-  const existingIndex = routes.findIndex((item) => item.id === route.id);
+  if (pictureInput.files[0]) {
+    try {
+      route.picture = await imageFileToDataUrl(pictureInput.files[0]);
+    } catch {
+      alert("Could not read that picture. Please choose another image.");
+      return;
+    }
+  }
+
   if (existingIndex >= 0) {
     routes[existingIndex] = route;
   } else {
@@ -134,14 +150,12 @@ function renderRoutes() {
     const meta = card.querySelector(".route-meta");
     const title = card.querySelector(".route-title");
     const description = card.querySelector(".route-description");
-    const openLink = card.querySelector(".open-link");
 
     card.dataset.id = route.id;
     meta.textContent = route.date ? formatDate(route.date) : "";
     meta.hidden = !route.date;
     title.textContent = route.name;
     title.href = route.link;
-    openLink.href = route.link;
     description.textContent = route.description;
     description.hidden = !route.description;
 
@@ -166,6 +180,8 @@ function handleRouteAction(event) {
     return;
   }
 
+  button.closest("details")?.removeAttribute("open");
+
   if (button.classList.contains("edit-route")) {
     editRoute(route);
   }
@@ -196,7 +212,7 @@ function editRoute(route) {
   nameInput.value = route.name;
   linkInput.value = route.link;
   dateInput.value = route.date;
-  pictureInput.value = route.picture;
+  pictureInput.value = "";
   descriptionInput.value = route.description;
   saveButton.textContent = "Save changes";
   cancelEditButton.hidden = false;
@@ -264,6 +280,43 @@ function createId() {
   return crypto.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`;
 }
 
+function imageFileToDataUrl(file) {
+  if (!file.type.startsWith("image/")) {
+    return Promise.reject(new Error("Not an image"));
+  }
+
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    const objectUrl = URL.createObjectURL(file);
+
+    image.onload = () => {
+      URL.revokeObjectURL(objectUrl);
+
+      const maxSize = 1200;
+      const scale = Math.min(1, maxSize / Math.max(image.width, image.height));
+      const width = Math.round(image.width * scale);
+      const height = Math.round(image.height * scale);
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+
+      const context = canvas.getContext("2d");
+      context.fillStyle = "#ffffff";
+      context.fillRect(0, 0, width, height);
+      context.drawImage(image, 0, 0, width, height);
+
+      resolve(canvas.toDataURL("image/jpeg", 0.82));
+    };
+
+    image.onerror = () => {
+      URL.revokeObjectURL(objectUrl);
+      reject(new Error("Image load failed"));
+    };
+
+    image.src = objectUrl;
+  });
+}
+
 function isValidUrl(value) {
   try {
     const url = new URL(value);