From f6e9efc5d33ea605fa1f13eb2717e93ab1815730 Mon Sep 17 00:00:00 2001
From: mfwadejr <125498560+mfwadejr@users.noreply.github.com>
Date: Sat, 29 Aug 2026 16:41:19 -0400
Subject: [PATCH] Add login and role-based interface
---
public/app.js | 43 +++++++++++++++++++++++++++++++------------
public/extras.css | 1 +
public/index.html | 4 ++--
3 files changed, 34 insertions(+), 14 deletions(-)
diff --git a/public/app.js b/public/app.js
index 89ce587..65f2e9a 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1,5 +1,5 @@
const $ = (s) => document.querySelector(s);
-const state = { products: [], tab: "available", query: "", page: 1 };
+const state = { products: [], tab: "available", query: "", page: 1, user: null };
const PAGE_SIZE = 10;
const money = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
const today = () => new Date().toISOString().slice(0, 10);
@@ -15,7 +15,7 @@ async function api(path, options = {}) {
try { const response = await fetch(path, { headers: { "content-type":"application/json" }, ...options });
if (response.status === 204) { storageStatus("connected","Database connected"); return null; }
const data = await response.json();
- if (!response.ok) { storageStatus("connected","Database connected"); const error=new Error(data.error||"Something went wrong."); error.databaseHealthy=true; throw error; }
+ if (!response.ok) { storageStatus("connected","Database connected"); const error=new Error(data.error||"Something went wrong."); error.databaseHealthy=true; error.status=response.status; error.code=data.code; if(response.status===401&&state.user)showLogin("Your session expired. Please sign in again."); throw error; }
storageStatus("connected","Database connected"); return data;
} catch(error) { if(!error.databaseHealthy)storageStatus("critical","Database error"); throw error; }
}
@@ -55,8 +55,8 @@ function render() {
$("#empty").hidden=Boolean(rows.length); $("#empty").textContent=state.query?"No records match your search.":state.tab==="available"?"No products are available.":state.tab==="customers"?"Customer records will appear after the first sale.":"No sales have been recorded.";
$("#pagination").innerHTML=all.length?`Showing ${start+1}–${Math.min(start+PAGE_SIZE,all.length)} of ${all.length} Previous Page ${state.page} of ${pages} Next
`:"";
}
-function inventoryRow(p) { return `${esc(p.model)} ${esc(p.manufacturer)} · ${esc(p.condition)} ${idCell(p)}
${fmtDate(p.receivedAt)} ${p.cost?money.format(p.cost):"—"} Available Sell Delete
${esc(p.model)} ${esc(p.manufacturer)} · ${esc(p.condition)} ${esc(p.customerName||"Unknown")} ${p.phone?`${esc(p.phone)} `:""}${idCell(p)}
${fmtDate(p.soldAt)} ${esc(p.paymentMethod||"—")}${p.paymentReference?`${esc(p.paymentReference)} `:""} ${p.salePrice?money.format(p.salePrice):"—"} View Void & restock Delete
${esc(p.model)} ${esc(p.manufacturer)} · ${esc(p.condition)} ${idCell(p)}
${fmtDate(p.receivedAt)} ${p.cost?money.format(p.cost):"—"} Available ${state.user.role==="admin"?`Sell Delete `:""}
${esc(p.model)} ${esc(p.manufacturer)} · ${esc(p.condition)} ${esc(p.customerName||"Unknown")} ${p.phone?`${esc(p.phone)} `:""}${idCell(p)}
${fmtDate(p.soldAt)} ${esc(p.paymentMethod||"—")}${p.paymentReference?`${esc(p.paymentReference)} `:""} ${p.salePrice?money.format(p.salePrice):"—"} View ${state.user.role==="admin"?`Void & restock Delete `:""}
${esc(c.name)} ${esc(c.phone||"—")} ${c.count} ${fmtDate(c.lastPurchase)} ${c.total?money.format(c.total):"—"} View customer Sale record ${esc(p.model)} · ${fmtDate(p.soldAt)}
Customer ${esc(p.customerName||"Unknown")}
${esc(p.phone||"No phone recorded")}
Payment ${esc(p.paymentMethod||"Not recorded")}
${p.paymentReference?`Reference: ${esc(p.paymentReference)}
`:""}Shipped to ${address(p)?esc(address(p)):"No shipping address recorded"}
${p.shippingNotes?`${esc(p.shippingNotes)}
`:""}Product and sale ${esc(p.manufacturer)} ${esc(p.model)} · ${esc(p.condition)}
${idCell(p)}
Received: ${fmtDate(p.receivedAt)} · Sold: ${fmtDate(p.soldAt)}
Cost: ${p.cost?money.format(p.cost):"—"} · Sale price: ${p.salePrice?money.format(p.salePrice):"—"}
${p.notes?`Inventory notes: ${esc(p.notes)}
`:""}Transaction notes ${esc(p.saleNotes||"No transaction notes recorded")}
Close
`;
+ openModal(`Sale record ${esc(p.model)} · ${fmtDate(p.soldAt)}
Customer ${esc(p.customerName||"Unknown")}
${esc(p.phone||"No phone recorded")}
Payment ${esc(p.paymentMethod||"Not recorded")}
${p.paymentReference?`Reference: ${esc(p.paymentReference)}
`:""}Shipped to ${address(p)?esc(address(p)):"No shipping address recorded"}
${p.shippingNotes?`${esc(p.shippingNotes)}
`:""}Product and sale ${esc(p.manufacturer)} ${esc(p.model)} · ${esc(p.condition)}
${idCell(p)}
Received: ${fmtDate(p.receivedAt)} · Sold: ${fmtDate(p.soldAt)}
Cost: ${p.cost?money.format(p.cost):"—"} · Sale price: ${p.salePrice?money.format(p.salePrice):"—"}
${p.notes?`Inventory notes: ${esc(p.notes)}
`:""}${esc(c.name)} Customer record, support notes, and purchase history.
${esc(c.phone||"No phone recorded")}
${addr?esc(addr):"No shipping address recorded"}
${c.shippingNotes?`${esc(c.shippingNotes)}
`:""}Customer notes ${c.notes.length?c.notes.map(n=>`${esc(n.category)} ${fmtDateTime(n.createdAt)}
${esc(n.note)}
Delete No customer notes yet.
"}Purchases (${c.purchases.length}) ${c.purchases.map(s=>`${esc(s.model)} · ${esc(primaryId(s))}${fmtDate(s.soldAt)} · ${s.salePrice?money.format(s.salePrice):"Price not recorded"}
View sale Close
`);
+ const noteForm=state.user.role==="admin"?``:"";
+ openModal(`${esc(c.name)} Customer record, support notes, and purchase history.
${esc(c.phone||"No phone recorded")}
${addr?esc(addr):"No shipping address recorded"}
${c.shippingNotes?`${esc(c.shippingNotes)}
`:""}Customer notes ${noteForm}${c.notes.length?c.notes.map(n=>`${esc(n.category)} ${fmtDateTime(n.createdAt)}
${esc(n.note)}
${state.user.role==="admin"?`Delete `:""}No customer notes yet.
"}Purchases (${c.purchases.length}) ${c.purchases.map(s=>`${esc(s.model)} · ${esc(primaryId(s))}${fmtDate(s.soldAt)} · ${s.salePrice?money.format(s.salePrice):"Price not recorded"}
View sale Close
`);
$("[data-cancel]").onclick=closeModal; document.querySelectorAll("[data-customer-sale]").forEach(b=>b.onclick=()=>viewSale(c.purchases.find(s=>s.id===b.dataset.customerSale)));
- $("#customerNoteForm").onsubmit=async e=>{e.preventDefault();try{await api(`/api/customers/${encodeURIComponent(c.id)}/notes`,{method:"POST",body:JSON.stringify(Object.fromEntries(new FormData(e.currentTarget)))});await viewCustomer(p);toast("Customer note added.");}catch(error){toast(error.message);}};
+ if($("#customerNoteForm"))$("#customerNoteForm").onsubmit=async e=>{e.preventDefault();try{await api(`/api/customers/${encodeURIComponent(c.id)}/notes`,{method:"POST",body:JSON.stringify(Object.fromEntries(new FormData(e.currentTarget)))});await viewCustomer(p);toast("Customer note added.");}catch(error){toast(error.message);}};
document.querySelectorAll("[data-delete-note]").forEach(b=>b.onclick=async()=>{if(!confirm("Delete this customer note?"))return;try{await api(`/api/customers/${encodeURIComponent(c.id)}/notes/${encodeURIComponent(b.dataset.deleteNote)}`,{method:"DELETE"});await viewCustomer(p);toast("Customer note deleted.");}catch(error){toast(error.message);}});
} catch(e){ toast(e.message); }
}
@@ -88,19 +90,36 @@ function restockForm(p){ openModal(`Void sale & restock Return ${esc(
async function load(){ state.products=await api("/api/products"); render(); }
async function renderAdmin(){
const panel=$("#adminPanel"); panel.innerHTML='
Loading backups…
';
- try{const backups=await api("/api/admin/backups");panel.innerHTML=`Database backups Create snapshots inside the persistent /data/backups folder, download an off-server copy, or restore a previous database.
Create backup now Restore uploaded backup
Restore replaces the active database. The app automatically creates a pre-restore backup and restarts the container.
${backups.length?backups.map(b=>`
${esc(b.name)} ${fmtDateTime(b.createdAt)} · ${(b.size/1024).toFixed(1)} KB
`).join(""):"
No local backups yet.
"}
User accounts Create administrators or read-only accounts. New and reset passwords must be changed at next login.
${users.map(u=>`
${esc(u.username)} ${u.role==="admin"?"Admin":"Read-Only"} · ${u.enabled?"Enabled":"Disabled"}${u.mustChangePassword?" · Password change required":""}${u.lastLoginAt?` · Last login ${fmtDateTime(u.lastLoginAt)}`:""}
${u.role==="admin"?"Make Read-Only":"Make Admin"} Reset password ${u.enabled?"Disable":"Enable"} Delete
`).join("")}
Database backups Create snapshots inside /data/backups, download an off-server copy, or restore a previous database.
Create backup now Restore uploaded backup
Restore replaces the active database and all user accounts. Your current password is required. Everyone will be signed out afterward.
${backups.length?backups.map(b=>`
${esc(b.name)} ${fmtDateTime(b.createdAt)} · ${(b.size/1024).toFixed(1)} KB
`).join(""):"
No local backups yet.
"}
Audit log The latest 250 security and data-changing events. Audit entries cannot be edited or deleted.
${audit.map(a=>`
${esc(a.username)} ${esc(a.action.replaceAll("_"," "))} ${fmtDateTime(a.createdAt)}${a.target?` · ${esc(a.target)}`:""}${a.details?` · ${esc(a.details)}`:""}${a.ipAddress?` · ${esc(a.ipAddress)}`:""} `).join("")||"
No audit events yet.
"}
Restore complete The container is restarting. Refresh this page in a few seconds.
Restore complete The container is restarting. Everyone has been signed out.
Unable to load backups ${esc(e.message)}
Restore complete The container is restarting. Refresh this page in a few seconds.
Restore complete The container is restarting. Everyone has been signed out.
Sign in Use your Stockroom account to continue.
${message?`${esc(message)}
`:""}`;
+ $("#loginForm").onsubmit=async e=>{e.preventDefault();const button=e.currentTarget.querySelector("button");button.disabled=true;try{const user=await api("/api/auth/login",{method:"POST",body:JSON.stringify(Object.fromEntries(new FormData(e.currentTarget)))});user.mustChangePassword?showPasswordChange(user):await enterApp(user);}catch(error){showLogin(error.message);}};
+}
+function showPasswordChange(user){
+ state.user=user;document.body.className="auth-required";$("#authBody").innerHTML=`Change your password Your temporary password must be replaced before you can use Stockroom.
Log out `;
+ $("#passwordForm").onsubmit=async e=>{e.preventDefault();try{await api("/api/auth/change-password",{method:"POST",body:JSON.stringify(Object.fromEntries(new FormData(e.currentTarget)))});await enterApp({...user,mustChangePassword:false});}catch(error){toast(error.message);}};$("#changeLogout").onclick=logout;
+}
+async function enterApp(user){state.user=user;document.body.className=user.role==="admin"?"role-admin":"role-readonly";$("#currentUser").innerHTML=`${esc(user.username)} ${user.role==="admin"?"Admin":"Read-Only"} `;const adminTab=document.querySelector('[data-tab="admin"]');adminTab.hidden=user.role!=="admin";adminTab.style.display=user.role==="admin"?"":"none";document.querySelectorAll(".edit-only").forEach(el=>{el.hidden=user.role!=="admin";el.style.display=user.role==="admin"?"":"none";});if(user.role!=="admin"&&state.tab==="admin")state.tab="available";await load();}
+async function logout(){try{await api("/api/auth/logout",{method:"POST",body:"{}"});}catch{}showLogin();}
+async function initialize(){try{const response=await fetch("/api/auth/me"),data=await response.json();if(!response.ok)return showLogin();data.mustChangePassword?showPasswordChange(data):await enterApp(data);}catch{showLogin("Unable to connect to Stockroom.");}}
document.querySelectorAll("[data-tab]").forEach(b=>b.onclick=()=>{state.tab=b.dataset.tab;state.page=1;render();});
$("#search").oninput=e=>{state.query=e.target.value;state.page=1;render();};
$("[data-open=receive]").onclick=receiveForm; $("[data-open=sell]").onclick=()=>sellForm();
$("#pagination").onclick=e=>{if(!e.target.dataset.page)return;state.page+=e.target.dataset.page==="next"?1:-1;render();};
$("#rows").onclick=async e=>{const b=e.target.closest("button");if(!b)return;const id=b.dataset.sell||b.dataset.view||b.dataset.restock||b.dataset.delete||b.dataset.id,p=state.products.find(x=>x.id===id);if(!p)return;if(b.dataset.sell)sellForm(id);else if(b.dataset.view)viewSale(p);else if(b.dataset.customer!==undefined)viewCustomer(p);else if(b.dataset.restock)restockForm(p);else if(b.dataset.delete&&confirm(`Permanently delete this ${p.status==="sold"?"sale":"product"} record?`))await change(`/api/products/${encodeURIComponent(id)}`,"DELETE",null,"Record deleted.");};
$("#modal .close").onclick=closeModal; $("#modal").onclick=e=>{if(e.target===$("#modal"))closeModal();};
+$("#logout").onclick=logout;
$("#date").textContent=new Date().toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"});
-load().catch(e=>toast(e.message));
+initialize();
diff --git a/public/extras.css b/public/extras.css
index b87867f..317ed9c 100644
--- a/public/extras.css
+++ b/public/extras.css
@@ -4,3 +4,4 @@
.customer-notes{margin:18px 0}.customer-notes h3{margin-bottom:8px}.customer-notes article{position:relative;border:1px solid #e2e7ef;border-radius:9px;padding:12px;margin:8px 0}.customer-notes article>div{display:flex;align-items:center;gap:8px;color:#667085}.customer-notes article p{white-space:pre-wrap;margin:10px 0}.customer-notes article>button{position:absolute;right:8px;top:8px;padding:5px 8px;background:#fff0f0;color:#c62828}.note-category{background:#edf3ff;color:#1d4ed8;border-radius:99px;padding:3px 8px;font-size:12px;font-weight:700}
.storage-status{margin-left:auto!important;display:flex;align-items:center;gap:7px;white-space:nowrap}.storage-status i{width:9px;height:9px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 3px #f59e0b22}.storage-status b{font-weight:600}.storage-status.connected i{background:#16a34a;box-shadow:0 0 0 3px #16a34a22}.storage-status.saving i,.storage-status.connecting i{background:#f59e0b;box-shadow:0 0 0 3px #f59e0b22;animation:status-pulse 1s infinite}.storage-status.critical{color:#b42318!important}.storage-status.critical i{background:#dc2626;box-shadow:0 0 0 3px #dc262622}@keyframes status-pulse{50%{opacity:.4}}@media(max-width:760px){.storage-status{display:flex!important;flex-basis:100%;margin-left:0!important;padding-bottom:10px}.records nav{height:auto;flex-wrap:wrap}}
#adminPanel{padding:24px}.admin-page{display:grid;gap:20px}.admin-page h2{margin:0 0 5px}.admin-page p{color:#667085}.admin-actions{display:flex;gap:10px;flex-wrap:wrap}.upload-backup{display:inline-flex;margin:0;background:#fff;border:1px solid #d7deea;border-radius:9px;padding:10px 14px;color:#27344a;cursor:pointer}.upload-backup input{display:none}.backup-warning{padding:13px 15px;border-radius:9px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.backup-list{border:1px solid #e3e7ef;border-radius:10px}.backup-list article{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px;border-bottom:1px solid #edf0f5}.backup-list article:last-child{border-bottom:0}.backup-list article small{display:block;color:#7b8799;margin-top:4px}.backup-list article>div:last-child{display:flex;gap:8px}.backup-list a.button{display:inline-flex;align-items:center;background:#fff;border:1px solid #d7deea;border-radius:9px;padding:10px 14px;color:#27344a;font-weight:650;text-decoration:none}.backup-list .delete-backup{background:#fff0f0;color:#c62828}.restart-message{text-align:center;padding:60px 20px}@media(max-width:760px){.backup-list article{align-items:flex-start;flex-direction:column}}
+.auth-pending #appShell,.auth-required #appShell{display:none}.role-admin #authScreen,.role-readonly #authScreen{display:none}.auth-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#eef4ff,#f8fafc)}.auth-card{width:min(430px,100%);background:#fff;border:1px solid #dfe5ef;border-radius:18px;box-shadow:0 22px 60px #17203320;padding:34px}.auth-brand{margin-bottom:28px}.auth-card h1{margin:0 0 7px}.auth-card>div>p{color:#68758b}.auth-submit{width:100%;margin-top:14px}.auth-message{background:#fff0f0;color:#a51d1d;border:1px solid #fecaca;border-radius:8px;padding:10px 12px;margin:14px 0}.auth-logout{width:100%;margin-top:10px}.user-menu{display:flex;align-items:center;gap:10px;border-left:1px solid #e3e7ef;padding-left:18px}.user-menu span{display:grid;font-size:13px}.user-menu small{color:#758197}.admin-section{display:grid;gap:16px;border-bottom:1px solid #e3e7ef;padding-bottom:28px}.admin-section:last-child{border-bottom:0}.inline-user-form{display:grid;grid-template-columns:1fr 1fr 180px auto;gap:10px;align-items:end}.inline-user-form label{margin:0}.user-list,.audit-list{border:1px solid #e3e7ef;border-radius:10px;overflow:hidden}.user-list article{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px;border-bottom:1px solid #edf0f5}.user-list article:last-child{border-bottom:0}.user-list small{display:block;color:#7b8799;margin-top:4px}.user-list article>div:last-child{display:flex;gap:7px;flex-wrap:wrap}.delete-backup{background:#fff0f0;color:#c62828}.audit-list{max-height:420px;overflow:auto}.audit-list article{display:grid;grid-template-columns:140px 180px 1fr;gap:12px;padding:10px 13px;border-bottom:1px solid #edf0f5;font-size:13px}.audit-list span{text-transform:capitalize}.audit-list small{color:#7b8799}@media(max-width:900px){.inline-user-form{grid-template-columns:1fr 1fr}.user-list article{align-items:flex-start;flex-direction:column}.audit-list article{grid-template-columns:1fr}.user-menu span{display:none}}@media(max-width:600px){.inline-user-form{grid-template-columns:1fr}.user-menu{padding-left:5px}.user-menu button{font-size:12px;padding:8px}.auth-card{padding:25px}}
diff --git a/public/index.html b/public/index.html
index a933acb..28e6621 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
vSeeBox Stockroom
Inventory Overview Available products 0 Ready to sell Sold this month 0 No sales recorded Inventory value $0 Based on purchase cost Available inventory 0 Sales history 0 Customers 0 Admin Connecting to database
-
×
+
×