Albumik 0.1.2 logo account and password change

manifest.toml

@@ -3,7 +3,7 @@ id = "albumik"
 name = "Albumik"
 description.en = "Lightweight private photo album with folder permissions and guest uploads"
 description.pl = "Lekki prywatny album zdjęć z katalogami, gośćmi i akceptacją zdjęć"
-version = "0.1.1~ynh1"
+version = "0.1.2~ynh1"
 maintainers = ["Filip"]
 
 [upstream]

web/app.js

@@ -221,3 +221,110 @@ $('#rejectPhotoBtn').addEventListener('click', async()=>{
 });
 
 init();
+
+/* Albumik 0.1.2 - Moje konto */
+function albumikEscape(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+function albumikRenderAccountView() {
+  const main =
+    document.querySelector("#content") ||
+    document.querySelector(".content") ||
+    document.querySelector("main") ||
+    document.querySelector(".main");
+
+  if (!main) return;
+
+  const user = window.state?.user || state?.user || {};
+
+  main.innerHTML = `
+    <div class="header">
+      <h1>Moje konto</h1>
+      <p>Zmień hasło i sprawdź podstawowe informacje o swoim koncie.</p>
+    </div>
+
+    <div class="card account-card" style="padding:24px;margin-top:24px;">
+      <h2>Dane konta</h2>
+      <div class="list-row"><strong>Login</strong><span>${albumikEscape(user.username || "")}</span></div>
+      <div class="list-row"><strong>Nazwa</strong><span>${albumikEscape(user.display_name || "")}</span></div>
+      <div class="list-row"><strong>Rola</strong><span>${albumikEscape(user.role || "")}</span></div>
+    </div>
+
+    <div class="card account-card" style="padding:24px;margin-top:18px;">
+      <h2>Zmiana hasła</h2>
+      <form id="changePasswordForm" method="post">
+        <div class="field">
+          <label>Obecne hasło</label>
+          <input name="current_password" type="password" required />
+        </div>
+        <div class="field">
+          <label>Nowe hasło</label>
+          <input name="new_password" type="password" minlength="8" required />
+        </div>
+        <div class="field">
+          <label>Powtórz nowe hasło</label>
+          <input name="repeat_password" type="password" minlength="8" required />
+        </div>
+        <div class="form-error" id="changePasswordError"></div>
+        <button class="primary-btn" type="submit" style="margin-top:16px;">Zmień hasło</button>
+      </form>
+    </div>
+  `;
+
+  document.querySelector("#changePasswordForm")?.addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    const fd = new FormData(e.currentTarget);
+    const current_password = fd.get("current_password");
+    const new_password = fd.get("new_password");
+    const repeat_password = fd.get("repeat_password");
+    const err = document.querySelector("#changePasswordError");
+
+    err.style.color = "";
+
+    if (new_password !== repeat_password) {
+      err.textContent = "Nowe hasła nie są takie same.";
+      return;
+    }
+
+    try {
+      const res = await api("/api/me/password", {
+        method: "POST",
+        body: JSON.stringify({ current_password, new_password })
+      });
+
+      if (!res.ok) {
+        err.textContent = res.error || "Nie udało się zmienić hasła.";
+        return;
+      }
+
+      err.style.color = "#16a34a";
+      err.textContent = "Hasło zostało zmienione.";
+      e.currentTarget.reset();
+    } catch (ex) {
+      err.textContent = "Błąd połączenia z serwerem.";
+    }
+  });
+}
+
+document.addEventListener("click", (e) => {
+  const btn = e.target.closest('[data-view="account"]');
+  if (!btn) return;
+
+  e.preventDefault();
+
+  try {
+    state.currentView = "account";
+  } catch (e) {}
+
+  document.querySelectorAll(".nav-btn").forEach((b) => b.classList.remove("active"));
+  btn.classList.add("active");
+
+  albumikRenderAccountView();
+});

web/index.html

@@ -4,12 +4,12 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Albumik</title>
-  <link rel="stylesheet" href="styles.css" />
+  <link rel="stylesheet" href="/styles.css" />
 </head>
 <body>
   <div id="login" class="login-shell hidden">
     <div class="login-card">
-      <div class="brand-badge">A</div>
+      <img class="login-logo" src="/assets/albumik-logo.png" alt="Albumik" />
       <h1>Albumik</h1>
       <p>Lekki prywatny album zdjęć na Twoim serwerze.</p>
       <form id="loginForm" method="post">
@@ -39,6 +39,7 @@
         <button class="nav-item" data-view="tags"><span>Tagi</span></button>
         <button class="nav-item admin-only" data-view="users"><span>Użytkownicy</span></button>
         <button class="nav-item admin-only" data-view="logs"><span>Dziennik</span></button>
+      <button class="nav-btn" data-view="account">Moje konto</button>
 </nav>
       <div class="sidebar-footer">
         <div id="currentUser" class="current-user"></div>
@@ -190,6 +191,6 @@
     </div>
   </dialog>
 
-  <script src="app.js"></script>
+  <script src="/app.js"></script>
 </body>
 </html>