init

web/assets/app.js

@@ -0,0 +1,218 @@
+const loginLink = document.querySelector("#login-link");
+const logoutButton = document.querySelector("#logout-button");
+const userChip = document.querySelector("#user-chip");
+const loggedOutPanel = document.querySelector("#logged-out-panel");
+const appPanel = document.querySelector("#app-panel");
+const linksSection = document.querySelector("#links-section");
+const form = document.querySelector("#shorten-form");
+const input = document.querySelector("#url");
+const button = document.querySelector("#submit-button");
+const alertBox = document.querySelector("#alert");
+const result = document.querySelector("#result");
+const shortUrl = document.querySelector("#short-url");
+const longUrl = document.querySelector("#long-url");
+const copyButton = document.querySelector("#copy-button");
+const refreshButton = document.querySelector("#refresh-button");
+const linksList = document.querySelector("#links-list");
+const emptyState = document.querySelector("#empty-state");
+const template = document.querySelector("#link-template");
+
+let currentUser = null;
+
+async function api(path, options = {}) {
+  const response = await fetch(path, {
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      ...(options.headers || {}),
+    },
+  });
+
+  if (response.status === 204) {
+    return null;
+  }
+
+  const payload = await response.json().catch(() => ({}));
+
+  if (!response.ok) {
+    throw new Error(payload.error || "Die Anfrage ist fehlgeschlagen.");
+  }
+
+  return payload;
+}
+
+function showError(message) {
+  alertBox.textContent = message;
+  alertBox.hidden = false;
+}
+
+function clearError() {
+  alertBox.textContent = "";
+  alertBox.hidden = true;
+}
+
+function setLoading(isLoading) {
+  button.disabled = isLoading;
+  button.textContent = isLoading ? "Kürze..." : "Kürzen";
+}
+
+function setAuthenticated(user) {
+  currentUser = user.authenticated ? user : null;
+
+  if (currentUser) {
+    userChip.textContent = currentUser.email
+      ? `${currentUser.username} · ${currentUser.email}`
+      : currentUser.username;
+    userChip.hidden = false;
+    logoutButton.hidden = false;
+    loginLink.hidden = true;
+    loggedOutPanel.hidden = true;
+    appPanel.hidden = false;
+    linksSection.hidden = false;
+    loadLinks();
+  } else {
+    userChip.hidden = true;
+    logoutButton.hidden = true;
+    loginLink.hidden = false;
+    loggedOutPanel.hidden = false;
+    appPanel.hidden = true;
+    linksSection.hidden = true;
+  }
+}
+
+async function loadMe() {
+  const user = await api("/api/me");
+  setAuthenticated(user);
+}
+
+async function loadLinks() {
+  if (!currentUser) return;
+
+  linksList.innerHTML = "";
+  emptyState.hidden = true;
+
+  try {
+    const links = await api("/api/links");
+    emptyState.hidden = links.length !== 0;
+    links.forEach(renderLink);
+  } catch (error) {
+    showError(error.message);
+  }
+}
+
+function renderLink(link) {
+  const node = template.content.cloneNode(true);
+  const card = node.querySelector(".link-card");
+  const short = node.querySelector(".link-short");
+  const long = node.querySelector(".link-long");
+  const form = node.querySelector(".edit-form");
+  const editInput = node.querySelector(".edit-input");
+  const saveButton = node.querySelector(".save-button");
+  const copyButton = node.querySelector(".copy-link-button");
+  const deleteButton = node.querySelector(".delete-button");
+
+  short.href = link.short_url;
+  short.textContent = link.short_url;
+  long.textContent = link.long_url;
+  editInput.value = link.long_url;
+
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    clearError();
+    saveButton.disabled = true;
+    saveButton.textContent = "Speichere...";
+
+    try {
+      const updated = await api(`/api/links/${encodeURIComponent(link.code)}`, {
+        method: "PUT",
+        body: JSON.stringify({ url: editInput.value.trim() }),
+      });
+
+      long.textContent = updated.long_url;
+      editInput.value = updated.long_url;
+      saveButton.textContent = "Gespeichert";
+      setTimeout(() => {
+        saveButton.textContent = "Speichern";
+      }, 1200);
+    } catch (error) {
+      showError(error.message);
+      saveButton.textContent = "Speichern";
+    } finally {
+      saveButton.disabled = false;
+    }
+  });
+
+  copyButton.addEventListener("click", async () => {
+    await copyToClipboard(link.short_url, copyButton);
+  });
+
+  deleteButton.addEventListener("click", async () => {
+    const ok = confirm("Diesen Kurzlink wirklich löschen?");
+    if (!ok) return;
+
+    clearError();
+    try {
+      await api(`/api/links/${encodeURIComponent(link.code)}`, { method: "DELETE" });
+      card.remove();
+      if (!linksList.children.length) emptyState.hidden = false;
+    } catch (error) {
+      showError(error.message);
+    }
+  });
+
+  linksList.appendChild(node);
+}
+
+async function copyToClipboard(value, targetButton) {
+  try {
+    await navigator.clipboard.writeText(value);
+    const old = targetButton.textContent;
+    targetButton.textContent = "Kopiert!";
+    setTimeout(() => {
+      targetButton.textContent = old;
+    }, 1500);
+  } catch {
+    showError("Kopieren ist fehlgeschlagen. Bitte kopiere den Link manuell.");
+  }
+}
+
+form.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  clearError();
+  result.hidden = true;
+  setLoading(true);
+
+  try {
+    const payload = await api("/api/shorten", {
+      method: "POST",
+      body: JSON.stringify({ url: input.value.trim() }),
+    });
+
+    shortUrl.textContent = payload.short_url;
+    shortUrl.href = payload.short_url;
+    longUrl.textContent = payload.long_url;
+    result.hidden = false;
+    copyButton.textContent = "Kopieren";
+    input.value = "";
+    await loadLinks();
+  } catch (error) {
+    showError(error.message);
+  } finally {
+    setLoading(false);
+  }
+});
+
+copyButton.addEventListener("click", async () => {
+  await copyToClipboard(shortUrl.href, copyButton);
+});
+
+refreshButton.addEventListener("click", loadLinks);
+
+logoutButton.addEventListener("click", async () => {
+  await fetch("/auth/logout", { method: "POST" });
+  window.location.href = "/";
+});
+
+loadMe().catch((error) => {
+  console.error(error);
+});

web/assets/styles.css

@@ -0,0 +1,245 @@
+:root {
+  color-scheme: dark;
+  --bg: #080b16;
+  --card: rgba(255, 255, 255, 0.08);
+  --card-strong: rgba(255, 255, 255, 0.13);
+  --text: #f8fafc;
+  --muted: #a6b0c3;
+  --line: rgba(255, 255, 255, 0.16);
+  --accent: #7c3aed;
+  --accent-2: #06b6d4;
+  --success: #34d399;
+  --danger: #fb7185;
+  --shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--text);
+  background:
+    radial-gradient(circle at 20% 10%, rgba(124, 58, 237, 0.35), transparent 32rem),
+    radial-gradient(circle at 82% 18%, rgba(6, 182, 212, 0.22), transparent 28rem),
+    linear-gradient(135deg, #080b16 0%, #101323 52%, #080b16 100%);
+}
+
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
+  background-size: 48px 48px;
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 70%);
+}
+
+a { color: inherit; }
+button, input { font: inherit; }
+
+.page-shell {
+  position: relative;
+  width: min(1120px, calc(100% - 32px));
+  margin: 0 auto;
+  padding: 24px 0 56px;
+}
+
+.hero { min-height: 72vh; }
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 72px;
+}
+
+.brand, .nav-pill, .primary-link { text-decoration: none; }
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  font-size: 1.1rem;
+}
+
+.brand-mark {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  box-shadow: 0 16px 34px rgba(124, 58, 237, 0.36);
+}
+
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.nav-pill, .nav-button, .ghost-button {
+  padding: 10px 14px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.06);
+  transition: 0.2s ease;
+}
+
+.nav-button, .ghost-button { cursor: pointer; }
+.nav-pill:hover, .ghost-button:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.32); transform: translateY(-1px); }
+
+.user-chip {
+  max-width: 220px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 10px 14px;
+  border: 1px solid rgba(52, 211, 153, 0.28);
+  border-radius: 999px;
+  color: #bbf7d0;
+  background: rgba(52, 211, 153, 0.1);
+  white-space: nowrap;
+}
+
+.hero-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 460px;
+  gap: 56px;
+  align-items: center;
+}
+
+.eyebrow, .card-kicker, .result-label {
+  margin: 0 0 10px;
+  color: #93c5fd;
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+h1, h2, h3, p { margin-top: 0; }
+
+h1 {
+  max-width: 760px;
+  margin-bottom: 22px;
+  font-size: clamp(3rem, 7vw, 5.8rem);
+  line-height: 0.9;
+  letter-spacing: -0.08em;
+}
+
+.subline {
+  max-width: 650px;
+  color: var(--muted);
+  font-size: clamp(1.05rem, 2vw, 1.25rem);
+  line-height: 1.7;
+}
+
+.stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
+.stats div { min-width: 116px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255, 255, 255, 0.055); backdrop-filter: blur(16px); }
+.stats strong { display: block; margin-bottom: 4px; font-size: 1.45rem; letter-spacing: -0.06em; }
+.stats span { color: var(--muted); font-size: 0.9rem; }
+
+.card, .links-section {
+  position: relative;
+  overflow: hidden;
+  padding: 26px;
+  border: 1px solid var(--line);
+  border-radius: 34px;
+  background: linear-gradient(180deg, var(--card-strong), var(--card));
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(24px);
+}
+
+.card::before, .links-section::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 36%);
+  opacity: 0.35;
+}
+
+.card > *, .links-section > * { position: relative; }
+.card-header, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
+.card h2, .section-heading h2 { margin-bottom: 0; font-size: 2rem; letter-spacing: -0.05em; }
+
+.sparkle { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 18px; background: rgba(255, 255, 255, 0.1); color: #fde68a; }
+.login-panel .primary-link { display: inline-flex; margin-top: 18px; }
+
+.primary-link, #submit-button {
+  padding: 15px 20px;
+  border-radius: 18px;
+  color: white;
+  font-weight: 800;
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  box-shadow: 0 16px 30px rgba(6, 182, 212, 0.18);
+  transition: 0.2s ease;
+}
+.primary-link:hover, #submit-button:hover { transform: translateY(-1px); box-shadow: 0 20px 36px rgba(6, 182, 212, 0.26); }
+
+.form label { display: block; margin-bottom: 10px; color: var(--muted); font-weight: 700; }
+.input-row { display: flex; gap: 10px; }
+
+input {
+  min-width: 0;
+  width: 100%;
+  padding: 16px 17px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  outline: none;
+  color: var(--text);
+  background: rgba(8, 11, 22, 0.68);
+  transition: 0.2s ease;
+}
+input:focus { border-color: rgba(6, 182, 212, 0.65); box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.14); }
+button { border: 0; cursor: pointer; white-space: nowrap; font-weight: 800; }
+#submit-button { border: 0; }
+#submit-button:disabled { cursor: progress; opacity: 0.7; transform: none; }
+
+.hint, .long-url, .link-long { margin: 10px 0 0; color: var(--muted); font-size: 0.92rem; }
+.bigger { line-height: 1.6; font-size: 1rem; }
+.alert { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(251, 113, 133, 0.35); border-radius: 18px; color: #fecdd3; background: rgba(251, 113, 133, 0.12); }
+
+.result { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
+.result-box { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid rgba(52, 211, 153, 0.32); border-radius: 22px; background: rgba(52, 211, 153, 0.09); }
+#short-url, .link-short { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; color: #bbf7d0; font-weight: 800; text-decoration: none; white-space: nowrap; }
+#copy-button, .small-button { padding: 12px 14px; border-radius: 15px; color: var(--text); background: rgba(255, 255, 255, 0.12); transition: 0.2s ease; }
+#copy-button:hover, .small-button:hover { background: rgba(255, 255, 255, 0.2); }
+
+.links-section { margin-top: 40px; }
+.empty-state { padding: 22px; border: 1px dashed var(--line); border-radius: 22px; color: var(--muted); text-align: center; }
+.links-list { display: grid; gap: 14px; }
+.link-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255, 255, 255, 0.055); }
+.link-main { min-width: 0; }
+.edit-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
+.edit-input { padding: 13px 14px; border-radius: 15px; }
+.link-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.danger-button { color: #fecdd3; background: rgba(251, 113, 133, 0.13); }
+.danger-button:hover { background: rgba(251, 113, 133, 0.22); }
+
+@media (max-width: 900px) {
+  .nav { margin-bottom: 42px; }
+  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
+  .card { max-width: 680px; }
+  .edit-form { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 560px) {
+  .page-shell { width: min(100% - 22px, 1120px); padding-top: 16px; }
+  .nav { align-items: flex-start; margin-bottom: 34px; }
+  h1 { font-size: clamp(2.7rem, 17vw, 4.2rem); }
+  .input-row, .result-box, .section-heading { flex-direction: column; align-items: stretch; }
+  #submit-button, #copy-button, .small-button { min-height: 52px; }
+  .stats { display: grid; grid-template-columns: 1fr; }
+  .link-actions { display: grid; grid-template-columns: 1fr; }
+}

web/index.html

@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>LinkForge · URL Shortener</title>
+  <meta name="description" content="Ein schneller, schöner URL-Shortener in Go mit PocketID Login.">
+  <link rel="stylesheet" href="/assets/styles.css">
+</head>
+<body>
+  <main class="page-shell">
+    <section class="hero">
+      <nav class="nav">
+        <a class="brand" href="/" aria-label="LinkForge Startseite">
+          <span class="brand-mark">↗</span>
+          <span>LinkForge</span>
+        </a>
+        <div class="nav-actions">
+          <span id="user-chip" class="user-chip" hidden></span>
+          <button id="logout-button" class="nav-pill nav-button" type="button" hidden>Abmelden</button>
+          <a id="login-link" class="nav-pill" href="/auth/login">Sicher anmelden</a>
+        </div>
+      </nav>
+
+      <div class="hero-grid">
+        <div class="hero-copy">
+          <p class="eyebrow">Veröffentlichte URLs flexibel steuern: Zieladressen ändern, ohne den eingebundenen Link anzupassen.</p>
+          <h1>Flexible Veröffentlichung. Veränderbare Endpunkte.</h1>
+          <p class="subline">
+            Anmelden, Kurzlinks erstellen und verwalten. Direkt im Browser.
+          </p>
+
+          <div class="stats" aria-label="Projekt Features">
+            <div><strong>Schutz</strong><span>Sichere Anmeldung</span></div>
+            <div><strong>Kontrolle</strong><span>Links ändern</span></div>
+            <div><strong>Sicherheit</strong><span>Maximale Kontrolle</span></div>
+          </div>
+        </div>
+
+        <section class="card" aria-labelledby="form-title">
+          <div id="logged-out-panel" class="login-panel">
+            <p class="card-kicker">Geschützter Bereich</p>
+            <h2>Anmelden erforderlich</h2>
+            <p class="hint bigger">Bitte anmelden, um Kurzlinks zu erstellen und vorhandenen Links zu bearbeiten.</p>
+            <a class="primary-link" href="/auth/login">Sicher anmelden</a>
+          </div>
+
+          <div id="app-panel" hidden>
+            <div class="card-header">
+              <div>
+                <p class="card-kicker">Neuer Kurzlink</p>
+                <h2 id="form-title">URL kürzen</h2>
+              </div>
+              <div class="sparkle" aria-hidden="true">✦</div>
+            </div>
+
+            <form id="shorten-form" class="form">
+              <label for="url">Lange URL</label>
+              <div class="input-row">
+                <input id="url" name="url" type="url" placeholder="https://example.com/sehr/langer/link" required>
+                <button id="submit-button" type="submit">Kürzen</button>
+              </div>
+              <p class="hint">Erlaubt sind HTTP- und HTTPS-URLs.</p>
+            </form>
+
+            <div id="alert" class="alert" role="alert" hidden></div>
+
+            <section id="result" class="result" hidden>
+              <p class="result-label">Kurzlinks</p>
+              <div class="result-box">
+                <a id="short-url" href="#" target="_blank" rel="noopener noreferrer"></a>
+                <button id="copy-button" type="button">Kopieren</button>
+              </div>
+              <p id="long-url" class="long-url"></p>
+            </section>
+          </div>
+        </section>
+      </div>
+    </section>
+
+    <section id="links-section" class="links-section" hidden>
+      <div class="section-heading">
+        <div>
+          <p class="eyebrow">Dashboard</p>
+          <h2>Eigene Links</h2>
+        </div>
+        <button id="refresh-button" class="ghost-button" type="button">Aktualisieren</button>
+      </div>
+
+      <div id="empty-state" class="empty-state" hidden>
+        Noch keine Links vorhanden. Erstelle oben deinen ersten Kurzlink.
+      </div>
+
+      <div id="links-list" class="links-list"></div>
+    </section>
+  </main>
+
+  <template id="link-template">
+    <article class="link-card">
+      <div class="link-main">
+        <a class="link-short" target="_blank" rel="noopener noreferrer"></a>
+        <p class="link-long"></p>
+      </div>
+      <form class="edit-form">
+        <input class="edit-input" type="url" required>
+        <div class="link-actions">
+          <button class="small-button save-button" type="submit">Speichern</button>
+          <button class="small-button copy-link-button" type="button">Kopieren</button>
+          <button class="small-button danger-button delete-button" type="button">Löschen</button>
+        </div>
+      </form>
+    </article>
+  </template>
+
+  <script src="/assets/app.js" defer></script>
+</body>
+</html>