mm-math 0.0.0

package/api.js

@@ -0,0 +1,179 @@
+const express    = require('express');
+const bcrypt     = require('bcrypt');
+const rateLimit  = require('express-rate-limit');
+const fs         = require('fs');
+const path       = require('path');
+const crypto     = require('crypto');
+
+const app        = express();
+const PORT       = 3001;
+const USERS_FILE = path.join(__dirname, 'users.json');
+const GAMES_FILE = path.join(__dirname, 'games.json');
+
+// In-memory sessions: token -> { username, rank, expires }
+const sessions = new Map();
+
+app.set('trust proxy', 1);
+app.use(express.json({ limit: '1mb' }));
+
+
+function readUsers() {
+  try { return JSON.parse(fs.readFileSync(USERS_FILE, 'utf8')); }
+  catch { return []; }
+}
+function writeUsers(users) {
+  fs.writeFileSync(USERS_FILE, JSON.stringify(users, null, 2));
+}
+function readGames() {
+  try { return JSON.parse(fs.readFileSync(GAMES_FILE, 'utf8')); }
+  catch { return []; }
+}
+function writeGames(games) {
+  fs.writeFileSync(GAMES_FILE, JSON.stringify(games, null, 2));
+}
+
+function getSession(req) {
+  const auth  = (req.headers.authorization || '').replace('Bearer ', '').trim();
+  if (!auth) return null;
+  const sess = sessions.get(auth);
+  if (!sess || sess.expires < Date.now()) { sessions.delete(auth); return null; }
+  return sess;
+}
+
+function requireAdmin(req, res, next) {
+  const sess = getSession(req);
+  if (!sess || sess.rank !== 'administrator') return res.status(403).json({ error: 'Forbidden.' });
+  req.sess = sess;
+  next();
+}
+
+const loginLimiter = rateLimit({
+  windowMs: 60 * 1000,
+  max: 5,
+  standardHeaders: true,
+  legacyHeaders: false,
+  handler: (_req, res) =>
+    res.status(429).json({ success: false, error: 'Too many attempts. Try again in 60 seconds.' }),
+});
+
+// ── Auth ───────────────────────────────────────────────────────────────────
+
+app.post('/api/login', loginLimiter, async (req, res) => {
+  const { username, password } = req.body || {};
+  if (!username || !password) return res.status(400).json({ success: false });
+  const users = readUsers();
+  const user  = users.find(u => u.username === username);
+  if (!user) return res.status(401).json({ success: false });
+  const match = await bcrypt.compare(password, user.password);
+  if (!match) return res.status(401).json({ success: false });
+  const token = crypto.randomBytes(32).toString('hex');
+  sessions.set(token, {
+    username: user.username,
+    rank: user.rank,
+    expires: Date.now() + 8 * 3600 * 1000,
+  });
+  res.json({ success: true, rank: user.rank, token, forcePasswordChange: !!user.forcePasswordChange });
+});
+
+// ── Games ──────────────────────────────────────────────────────────────────
+
+app.get('/api/games', (_req, res) => {
+  res.json(readGames().filter(g => g.visible));
+});
+
+app.get('/api/games/all', requireAdmin, (_req, res) => {
+  res.json(readGames());
+});
+
+app.post('/api/games', requireAdmin, (req, res) => {
+  if (!Array.isArray(req.body.games)) return res.status(400).json({ error: 'Invalid payload.' });
+  writeGames(req.body.games);
+  res.json({ ok: true });
+});
+
+// ── Users ──────────────────────────────────────────────────────────────────
+
+const VALID_RANKS = ['administrator', 'admin', 'user'];
+
+app.get('/api/users', requireAdmin, (_req, res) => {
+  const users = readUsers().map(u => ({ username: u.username, rank: u.rank, forcePasswordChange: !!u.forcePasswordChange }));
+  res.json(users);
+});
+
+app.post('/api/users/add', requireAdmin, async (req, res) => {
+  const { username, password, rank } = req.body || {};
+  if (!username || !password || !VALID_RANKS.includes(rank))
+    return res.status(400).json({ error: 'username, password and valid rank required.' });
+  const users = readUsers();
+  if (users.find(u => u.username === username))
+    return res.status(409).json({ error: 'Username already exists.' });
+  const hashed = await bcrypt.hash(password, 12);
+  users.push({ username, password: hashed, rank });
+  writeUsers(users);
+  res.json({ ok: true });
+});
+
+app.post('/api/users/update', requireAdmin, (req, res) => {
+  const { username, rank } = req.body || {};
+  if (!username || !VALID_RANKS.includes(rank))
+    return res.status(400).json({ error: 'username and valid rank required.' });
+  const users = readUsers();
+  const user  = users.find(u => u.username === username);
+  if (!user) return res.status(404).json({ error: 'User not found.' });
+  user.rank = rank;
+  writeUsers(users);
+  res.json({ ok: true });
+});
+
+app.post('/api/users/delete', requireAdmin, (req, res) => {
+  const { username } = req.body || {};
+  if (!username) return res.status(400).json({ error: 'username required.' });
+  const users = readUsers();
+  const idx   = users.findIndex(u => u.username === username);
+  if (idx === -1) return res.status(404).json({ error: 'User not found.' });
+  users.splice(idx, 1);
+  writeUsers(users);
+  res.json({ ok: true });
+});
+
+app.post('/api/users/reset-password', requireAdmin, async (req, res) => {
+  const { username, password } = req.body || {};
+  if (!username || !password) return res.status(400).json({ error: 'username and password required.' });
+  const users = readUsers();
+  const user  = users.find(u => u.username === username);
+  if (!user) return res.status(404).json({ error: 'User not found.' });
+  user.password = await bcrypt.hash(password, 12);
+  writeUsers(users);
+  res.json({ ok: true });
+});
+
+app.post('/api/users/change-password', async (req, res) => {
+  const { username, currentPassword, newPassword } = req.body || {};
+  if (!username || !currentPassword || !newPassword)
+    return res.status(400).json({ error: 'All fields required.' });
+  if (newPassword.length < 6)
+    return res.status(400).json({ error: 'New password must be at least 6 characters.' });
+  const users = readUsers();
+  const user  = users.find(u => u.username === username);
+  if (!user) return res.status(404).json({ error: 'User not found.' });
+  const match = await bcrypt.compare(currentPassword, user.password);
+  if (!match) return res.status(401).json({ error: 'Current password is incorrect.' });
+  user.password = await bcrypt.hash(newPassword, 12);
+  user.forcePasswordChange = false;
+  writeUsers(users);
+  res.json({ ok: true });
+});
+
+app.post('/api/users/set-force-change', requireAdmin, (req, res) => {
+  const { username, force } = req.body || {};
+  if (!username || typeof force !== 'boolean')
+    return res.status(400).json({ error: 'username and force (boolean) required.' });
+  const users = readUsers();
+  const user  = users.find(u => u.username === username);
+  if (!user) return res.status(404).json({ error: 'User not found.' });
+  user.forcePasswordChange = force;
+  writeUsers(users);
+  res.json({ ok: true });
+});
+
+app.listen(PORT, '127.0.0.1', () => console.log(`API listening on 127.0.0.1:${PORT}`));

package/browse.html

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<script>(function(){var n=performance.getEntriesByType('navigation')[0];if(n&&n.type==='reload'){sessionStorage.clear();window.location.replace('./index.html');return;}if(sessionStorage.getItem('mm_auth')!=='true'){window.location.replace('./index.html');return;}if(sessionStorage.getItem('mm_force_change')==='true'){window.location.replace('./change-password.html');return;}var r=sessionStorage.getItem('mm_rank');if(!r){window.location.replace('./index.html');}})();</script>
+  <link rel="icon" type="image/png" href="/assets/favicon.png">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MM Games</title>
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+<body>
+
+<header class="site-header">
+  <div class="header-inner">
+    <a href="./browse.html" class="logo-link">
+      <img src="./assets/logo.png?v=new" alt="" class="logo-img" onerror="this.style.display='none'">
+      <span>MM Games</span>
+      
+    </a>
+    <nav class="site-nav">
+      <a href="./browse.html" class="active">Browse</a>
+      <a href="./admin.html">Admin</a>
+      <a href="./index.html" class="nav-calc-btn" title="Calculator"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="8" y1="10" x2="10" y2="10"/><line x1="8" y1="14" x2="10" y2="14"/><line x1="8" y1="18" x2="10" y2="18"/><line x1="14" y1="10" x2="16" y2="10"/><line x1="14" y1="14" x2="16" y2="14"/><line x1="14" y1="18" x2="16" y2="18"/></svg></a>
+      <button id="settings-btn" title="Settings" style="display:flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:6px;background:none;border:none;color:var(--muted);cursor:pointer;transition:background .15s,color .15s;" onmouseover="this.style.background='var(--surface)';this.style.color='var(--text)'" onmouseout="this.style.background='none';this.style.color='var(--muted)'"><svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg></button>
+    </nav>
+  </div>
+</header>
+
+<!-- Change Password Modal -->
+<div id="chpw-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);">
+  <div style="background:#fff;border-radius:16px;padding:32px 28px 28px;width:320px;box-shadow:0 24px 60px rgba(0,0,0,.2);border:1px solid var(--border);">
+    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
+      <div style="font-size:1rem;font-weight:700;">Change Password</div>
+      <button id="chpw-close" style="background:none;border:none;font-size:1.3rem;color:var(--muted);cursor:pointer;line-height:1;padding:2px 6px;">&times;</button>
+    </div>
+    <div style="display:flex;flex-direction:column;gap:12px;">
+      <div>
+        <label style="font-size:0.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:4px;">Current Password</label>
+        <input id="chpw-current" type="password" autocomplete="current-password" style="width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:0.9rem;outline:none;font-family:inherit;" placeholder="Current password">
+      </div>
+      <div>
+        <label style="font-size:0.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:4px;">New Password</label>
+        <input id="chpw-new" type="password" autocomplete="new-password" style="width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:0.9rem;outline:none;font-family:inherit;" placeholder="New password (min 6 chars)">
+      </div>
+      <div>
+        <label style="font-size:0.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:4px;">Confirm New Password</label>
+        <input id="chpw-confirm" type="password" autocomplete="new-password" style="width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:0.9rem;outline:none;font-family:inherit;" placeholder="Confirm new password">
+      </div>
+    </div>
+    <div id="chpw-msg" style="font-size:0.82rem;min-height:1.2em;margin:10px 0 4px;"></div>
+    <button id="chpw-submit" style="width:100%;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:11px;font-size:0.9rem;font-weight:600;cursor:pointer;font-family:inherit;margin-top:4px;transition:background .15s;">Change Password</button>
+  </div>
+</div>
+
+<main style="padding: 32px 0 64px;">
+  <div class="container">
+
+    <!-- Search + filters -->
+    <div style="display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:28px;">
+      <div class="search-wrap" style="flex:1; min-width:200px;">
+        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+        </svg>
+        <input class="search-input" id="search" type="search" placeholder="Search games…" autocomplete="off">
+      </div>
+      <div class="category-filters" id="cat-filters">
+        <button class="cat-btn active" data-cat="All">All</button>
+        <button class="cat-btn" data-cat="Action">Action</button>
+        <button class="cat-btn" data-cat="Adventure">Adventure</button>
+        <button class="cat-btn" data-cat="Sports">Sports</button>
+        <button class="cat-btn" data-cat="Puzzle">Puzzle</button>
+        <button class="cat-btn" data-cat="Strategy">Strategy</button>
+        <button class="cat-btn" data-cat="Classic">Classic</button>
+      </div>
+    </div>
+
+    <!-- Game of the Day -->
+    <div class="section" id="gotd-section"></div>
+
+    <!-- Game grid -->
+    <div class="section">
+      <div class="section-title" id="grid-label">All Games</div>
+      <div class="game-grid" id="game-grid"></div>
+    </div>
+
+
+  </div>
+</main>
+
+<script src="./js/games.js?v=0.0.1"></script>
+<script src="./js/pin-modal.js?v=0.0.1c"></script>
+
+<a href="https://forms.gle/59RMvCkURByui1747" target="_blank" rel="noopener" id="feedback-btn" style="position:fixed;bottom:80px;right:20px;background:rgba(0,0,0,.06);color:var(--muted);font-size:0.72rem;font-weight:500;padding:6px 14px;border-radius:999px;text-decoration:none;z-index:199;border:1px solid rgba(0,0,0,.07);transition:all .15s;" onmouseover="this.style.background='rgba(0,0,0,.12)';this.style.color='var(--text)'" onmouseout="this.style.background='rgba(0,0,0,.06)';this.style.color='var(--muted)'">Feedback</a>
+
+<button id="scroll-top" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Back to top" style="position:fixed;bottom:28px;right:28px;width:40px;height:40px;border-radius:50%;background:#2563eb;color:#fff;border:none;font-size:18px;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.18);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none;z-index:200;display:flex;align-items:center;justify-content:center;">&#8593;</button>
+<script>
+(function(){
+  var btn=document.getElementById('scroll-top');
+  window.addEventListener('scroll',function(){
+    var show=window.scrollY>300;
+    btn.style.opacity=show?'1':'0';
+    btn.style.transform=show?'translateY(0)':'translateY(8px)';
+    btn.style.pointerEvents=show?'auto':'none';
+  },{passive:true});
+})();
+</script>
+
+<script>
+(function () {
+  var overlay   = document.getElementById('chpw-overlay');
+  var settBtn   = document.getElementById('settings-btn');
+  var closeBtn  = document.getElementById('chpw-close');
+  var submitBtn = document.getElementById('chpw-submit');
+  var msgEl     = document.getElementById('chpw-msg');
+  var curEl     = document.getElementById('chpw-current');
+  var newEl     = document.getElementById('chpw-new');
+  var conEl     = document.getElementById('chpw-confirm');
+
+  function openModal() {
+    curEl.value = ''; newEl.value = ''; conEl.value = '';
+    msgEl.textContent = ''; msgEl.style.color = '';
+    submitBtn.disabled = false;
+    overlay.style.display = 'flex';
+    setTimeout(function () { curEl.focus(); }, 50);
+  }
+
+  function closeModal() { overlay.style.display = 'none'; }
+
+  settBtn.addEventListener('click', openModal);
+  closeBtn.addEventListener('click', closeModal);
+  overlay.addEventListener('click', function (e) { if (e.target === overlay) closeModal(); });
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && overlay.style.display === 'flex') closeModal();
+  });
+
+  submitBtn.addEventListener('click', doChange);
+  [curEl, newEl, conEl].forEach(function (el) {
+    el.addEventListener('keydown', function (e) { if (e.key === 'Enter') doChange(); });
+  });
+
+  async function doChange() {
+    var username = sessionStorage.getItem('mm_username') || '';
+    var cur = curEl.value;
+    var nw  = newEl.value;
+    var con = conEl.value;
+    if (!username) { msgEl.textContent = 'Session error — please log in again.'; msgEl.style.color = '#b91c1c'; return; }
+    if (!cur || !nw || !con) { msgEl.textContent = 'All fields are required.'; msgEl.style.color = '#b91c1c'; return; }
+    if (nw !== con) { msgEl.textContent = 'New passwords do not match.'; msgEl.style.color = '#b91c1c'; return; }
+    if (nw.length < 6) { msgEl.textContent = 'New password must be at least 6 characters.'; msgEl.style.color = '#b91c1c'; return; }
+    submitBtn.disabled = true;
+    msgEl.textContent = '';
+    try {
+      var res  = await fetch('./api/users/change-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: username, currentPassword: cur, newPassword: nw }),
+      });
+      var data = await res.json();
+      if (res.ok && data.ok) {
+        msgEl.textContent = 'Password changed successfully.';
+        msgEl.style.color = '#15803d';
+        setTimeout(closeModal, 1500);
+      } else {
+        msgEl.textContent = data.error || 'Failed to change password.';
+        msgEl.style.color = '#b91c1c';
+        submitBtn.disabled = false;
+      }
+    } catch {
+      msgEl.textContent = 'Connection error. Try again.';
+      msgEl.style.color = '#b91c1c';
+      submitBtn.disabled = false;
+    }
+  }
+})();
+</script>
+
+</body>
+</html>

package/change-password.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<script>
+(function(){
+  if(sessionStorage.getItem('mm_auth')!=='true'){window.location.replace('./index.html');return;}
+  if(sessionStorage.getItem('mm_force_change')!=='true'){
+    var rank=sessionStorage.getItem('mm_rank');
+    if(rank==='administrator'){window.location.replace('./admin.html');}
+    else if(rank==='admin'){window.location.replace('./control-panel.html');}
+    else{window.location.replace('./browse.html');}
+  }
+})();
+</script>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Change Password — MM Games</title>
+<link rel="icon" type="image/png" href="/assets/favicon.png">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    min-height: 100dvh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f3f4f6;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    padding: 24px;
+  }
+  .card {
+    background: #fff;
+    border-radius: 16px;
+    padding: 36px 32px 32px;
+    width: 100%;
+    max-width: 380px;
+    box-shadow: 0 4px 24px rgba(0,0,0,.09);
+    border: 1px solid #e5e7eb;
+  }
+  .icon {
+    width: 48px; height: 48px;
+    background: #fef3c7;
+    border-radius: 12px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 1.4rem;
+    margin-bottom: 16px;
+  }
+  h1 { font-size: 1.15rem; font-weight: 700; color: #111827; margin-bottom: 6px; }
+  .sub { font-size: 0.85rem; color: #6b7280; margin-bottom: 28px; line-height: 1.5; }
+  .field { margin-bottom: 14px; }
+  label {
+    display: block;
+    font-size: 0.78rem; font-weight: 600;
+    color: #6b7280;
+    text-transform: uppercase; letter-spacing: .04em;
+    margin-bottom: 5px;
+  }
+  input {
+    width: 100%;
+    padding: 10px 13px;
+    border: 1.5px solid #e5e7eb;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    outline: none;
+    font-family: inherit;
+    transition: border-color .15s, box-shadow .15s;
+    color: #111827;
+  }
+  input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
+  .msg { font-size: 0.82rem; min-height: 1.2em; margin: 8px 0 4px; }
+  .msg.error { color: #b91c1c; }
+  .msg.ok    { color: #15803d; }
+  .submit {
+    width: 100%;
+    background: #2563eb; color: #fff;
+    border: none; border-radius: 8px;
+    padding: 12px; font-size: 0.9rem; font-weight: 600;
+    cursor: pointer; font-family: inherit;
+    margin-top: 6px; transition: background .15s;
+  }
+  .submit:hover { background: #1d4ed8; }
+  .submit:disabled { opacity: .55; cursor: not-allowed; }
+</style>
+</head>
+<body>
+<div class="card">
+  <div class="icon">&#128274;</div>
+  <h1>Password Change Required</h1>
+  <p class="sub">Your account requires a password change before you can continue. Please set a new password below.</p>
+
+  <div class="field">
+    <label>Current Password</label>
+    <input id="cur" type="password" autocomplete="current-password" placeholder="Current password">
+  </div>
+  <div class="field">
+    <label>New Password</label>
+    <input id="nw" type="password" autocomplete="new-password" placeholder="New password (min 6 chars)">
+  </div>
+  <div class="field">
+    <label>Confirm New Password</label>
+    <input id="con" type="password" autocomplete="new-password" placeholder="Confirm new password">
+  </div>
+
+  <div class="msg" id="msg"></div>
+  <button class="submit" id="submit-btn">Set New Password</button>
+</div>
+
+<script>
+(function () {
+  var curEl  = document.getElementById('cur');
+  var newEl  = document.getElementById('nw');
+  var conEl  = document.getElementById('con');
+  var msgEl  = document.getElementById('msg');
+  var subBtn = document.getElementById('submit-btn');
+
+  curEl.focus();
+
+  [curEl, newEl, conEl].forEach(function (el) {
+    el.addEventListener('keydown', function (e) { if (e.key === 'Enter') doChange(); });
+  });
+  subBtn.addEventListener('click', doChange);
+
+  async function doChange() {
+    var username = sessionStorage.getItem('mm_username') || '';
+    var cur = curEl.value;
+    var nw  = newEl.value;
+    var con = conEl.value;
+
+    msgEl.className = 'msg error';
+    if (!username) { msgEl.textContent = 'Session error — please log in again.'; return; }
+    if (!cur || !nw || !con) { msgEl.textContent = 'All fields are required.'; return; }
+    if (nw !== con) { msgEl.textContent = 'New passwords do not match.'; return; }
+    if (nw.length < 6) { msgEl.textContent = 'New password must be at least 6 characters.'; return; }
+
+    subBtn.disabled = true;
+    msgEl.textContent = '';
+
+    try {
+      var res  = await fetch('./api/users/change-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: username, currentPassword: cur, newPassword: nw }),
+      });
+      var data = await res.json();
+      if (res.ok && data.ok) {
+        sessionStorage.removeItem('mm_force_change');
+        msgEl.className = 'msg ok';
+        msgEl.textContent = 'Password changed! Redirecting…';
+        var rank = sessionStorage.getItem('mm_rank');
+        setTimeout(function () {
+          if (rank === 'administrator') window.location.href = './admin.html';
+          else if (rank === 'admin')   window.location.href = './control-panel.html';
+          else                         window.location.href = './browse.html';
+        }, 1000);
+      } else {
+        msgEl.className = 'msg error';
+        msgEl.textContent = data.error || 'Failed to change password.';
+        subBtn.disabled = false;
+      }
+    } catch {
+      msgEl.className = 'msg error';
+      msgEl.textContent = 'Connection error. Try again.';
+      subBtn.disabled = false;
+    }
+  }
+})();
+</script>
+</body>
+</html>