From 33c3eedb3ae2ef3146b45803a362f4d66fd4644b Mon Sep 17 00:00:00 2001 From: marijo Date: Mon, 29 Jun 2026 07:58:28 +0000 Subject: [PATCH] Secred in separate file, desing improvements --- .gitignore | 1 + README.md | 16 +++++++-- app.js | 75 +++++++++++++++++++++++++++++++++++------- index.html | 24 ++++++++------ styles.css | 95 ++++++++++++++++++++++++++++++++++++++++++++---------- 5 files changed, 171 insertions(+), 40 deletions(-) diff --git a/.gitignore b/.gitignore index c317064..44f8308 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ AGENTS.md +config.js diff --git a/README.md b/README.md index 5747bf0..ee46abe 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,8 @@ A small static webpage for saving and sharing Google Maps route links. ## Features - Add routes with name and Google Maps link (mandatory) -- Optional date, description, and picture URL -- Click route names or **Open map** to open saved Google Maps links +- Optional date, description, and uploaded picture +- Click route names to open saved Google Maps links - Edit, remove, share, or copy route links - Data is stored locally in the browser with `localStorage` - Simple secret gate before the app opens @@ -15,4 +15,14 @@ Open `index.html` in a browser to use it. ## Secret -The current demo secret is `change-me`. Before publishing, replace `AUTH_SECRET` in `app.js` with your real secret. This is a simple client-side gate, not strong server-side security. +Create `config.js` from the example and set your secret there: + +```sh +cp config.example.js config.js +``` + +```js +window.ROUTES_SECRET = "your-secret"; +``` + +`config.js` is gitignored. This is a simple client-side gate, not strong server-side security. diff --git a/app.js b/app.js index 67310c4..b249413 100644 --- a/app.js +++ b/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); diff --git a/index.html b/index.html index 8eaa919..3a9d6c2 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ Routes + @@ -52,8 +53,8 @@