logo

HISTORY.md

@@ -2,6 +2,18 @@
 
 ## v0.18
 
+### Branding
+- Replaced the top-navbar dollar-sign placeholder and duplicate text/version brand stack with the selected `/img/logo.png` BillTracker logo.
+- The logo now serves as the BillTracker brand in the top navigation while preserving the existing navbar height and route behavior.
+- Login now uses the BillTracker logo, shows linked build/version information near the login actions, and uses the authentik icon for OIDC login.
+- Admin Authentication Methods now uses subtle authentik branding in the OIDC toggle/configuration/test-login controls.
+- Cropped transparent padding from the BillTracker logo asset so it renders larger and more readably in the unchanged-height navbar.
+- Promoted the transparent `logo_cut.png` artwork to the served `/img/logo.png` asset and enlarged the login-page logo while keeping the login card layout compact.
+- Login logo sizing now follows the login form width so the brand grows and shrinks with the sign-in column instead of rendering too small.
+- Legacy `/login.html` now redirects to the modern React `/login` screen so the old static login page is no longer served by stale links.
+- Vite now copies only modern React public assets from `client/public`, preventing legacy `public/*.html`, CSS, and JS files from being emitted into `dist`.
+- No backend, auth, tracker, bills, categories, settings, status, admin, or navigation-link behavior was changed.
+
 ### Security
 - **OIDC ID token signature verification** now uses `openid-client@5` for full cryptographic validation via JWKS: signature, issuer, audience, expiry, nonce, and `sub` presence — tokens without a valid signature are rejected
 - **OIDC client cache** invalidation path added; cache is keyed by issuer/client/redirect so Admin panel credential changes pick up a fresh client

client/components/layout/Sidebar.jsx

@@ -16,7 +16,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { APP_VERSION } from '@/lib/version';
 
 const userNavItems = [
   { to: '/',           icon: LayoutGrid, label: 'Tracker', end: true },
@@ -32,21 +31,21 @@ const adminNavItems = [
 
 function BrandBlock({ adminMode = false }) {
   return (
-    <NavLink to={adminMode ? '/admin' : '/'} className="flex items-center gap-3 rounded-xl focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
+    <NavLink
-      <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-primary text-primary-foreground font-bold text-sm shadow-sm shadow-primary/25">
+      to={adminMode ? '/admin' : '/'}
-        $
+      aria-label="BillTracker"
-      </div>
+      className="flex items-center gap-2 rounded-xl focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
-      <div className="min-w-0 leading-tight">
+    >
-        <div className="flex items-center gap-2">
+      <img
-          <span className="text-sm font-semibold tracking-tight text-foreground">BillTracker</span>
+        src="/img/logo.png"
-          {adminMode && (
+        alt="BillTracker"
-            <span className="hidden sm:inline-flex rounded-full border border-destructive/25 bg-destructive/10 px-2 py-0.5 text-[10px] font-semibold uppercase text-destructive">
+        className="h-16 w-auto max-w-[9rem] object-contain drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]"
-              Admin
+      />
-            </span>
+      {adminMode && (
-          )}
+        <span className="hidden sm:inline-flex rounded-full border border-destructive/25 bg-destructive/10 px-2 py-0.5 text-[10px] font-semibold uppercase text-destructive">
-        </div>
+          Admin
-        <span className="text-[10px] text-muted-foreground/70 tabular-nums">v{APP_VERSION}</span>
+        </span>
-      </div>
+      )}
     </NavLink>
   );
 }

client/pages/AdminPage.jsx

@@ -23,6 +23,8 @@ import AppNavigation from '@/components/layout/Sidebar';
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
+const AUTHENTIK_ICON_URL = 'https://gate.originalsinners.org/static/dist/assets/icons/icon.png';
+
 function SectionHeading({ children }) {
   return <h2 className="text-base font-semibold text-foreground">{children}</h2>;
 }
@@ -716,6 +718,12 @@ function AuthMethodsCard() {
         {/* OIDC / authentik login toggle */}
         <FieldRow label="authentik / OIDC login">
           <div className="flex items-center gap-3">
+            <img
+              src={AUTHENTIK_ICON_URL}
+              alt=""
+              aria-hidden="true"
+              className="h-5 w-5 shrink-0 object-contain"
+            />
             <Toggle
               checked={form.oidc_login_enabled}
               onChange={v => set('oidc_login_enabled', v)}
@@ -730,7 +738,15 @@ function AuthMethodsCard() {
         </FieldRow>
 
         <div className="space-y-4 pt-2 border-t border-border">
-          <p className="text-sm font-medium text-muted-foreground pt-1">authentik / OIDC configuration</p>
+          <div className="flex items-center gap-2 pt-1 text-sm font-medium text-muted-foreground">
+            <img
+              src={AUTHENTIK_ICON_URL}
+              alt=""
+              aria-hidden="true"
+              className="h-5 w-5 shrink-0 object-contain"
+            />
+            <span>authentik / OIDC configuration</span>
+          </div>
 
           <FieldRow label="Provider name">
             <Input
@@ -920,6 +936,12 @@ function AuthMethodsCard() {
             disabled={!data?.oidc_login_enabled || !data?.oidc_configured}
             onClick={() => { window.location.href = '/api/auth/oidc/login?redirect_to=/admin'; }}
           >
+            <img
+              src={AUTHENTIK_ICON_URL}
+              alt=""
+              aria-hidden="true"
+              className="mr-2 h-4 w-4 shrink-0 object-contain"
+            />
             Test authentik Login
           </Button>
           <Button onClick={handleSave} disabled={!canSave}>

client/pages/LoginPage.jsx

@@ -7,10 +7,14 @@ import { useAuth } from '@/hooks/useAuth';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { APP_VERSION } from '@/lib/version';
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
 } from '@/components/ui/dialog';
 
+const AUTHENTIK_ICON_URL = 'https://gate.originalsinners.org/static/dist/assets/icons/icon.png';
+const BUILD_LINK_URL = 'https://dream.scheller.ltd/null/BillTracker';
+
 export default function LoginPage() {
   const navigate = useNavigate();
   const { setUser, refresh } = useAuth();
@@ -125,14 +129,12 @@ export default function LoginPage() {
       <div className="w-full max-w-sm space-y-6">
 
         {/* Logo / Brand */}
-        <div className="flex items-center justify-center gap-3">
+        <div className="flex justify-center">
-          <div className="w-10 h-10 rounded-lg bg-primary text-primary-foreground 
+          <img
-                          flex items-center justify-center font-bold text-lg shadow-sm">
+            src="/img/logo.png"
-            $
+            alt="BillTracker"
-          </div>
+            className="h-auto w-[82%] max-w-[22rem] object-contain drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]"
-          <span className="text-xl font-semibold tracking-tight">
+          />
-            BillTracker
-          </span>
         </div>
 
         {/* Card */}
@@ -152,6 +154,12 @@ export default function LoginPage() {
               className="w-full"
               onClick={() => { window.location.href = authMode.oidc_login_url; }}
             >
+              <img
+                src={AUTHENTIK_ICON_URL}
+                alt=""
+                aria-hidden="true"
+                className="mr-2 h-5 w-5 shrink-0 object-contain"
+              />
               Continue with {providerName}
             </Button>
           )}
@@ -205,6 +213,17 @@ export default function LoginPage() {
 
             </form>
           )}
+
+          <p className="text-center text-xs text-muted-foreground">
+            <a
+              href={BUILD_LINK_URL}
+              target="_blank"
+              rel="noreferrer"
+              className="underline-offset-4 transition-colors hover:text-foreground hover:underline"
+            >
+              Build v{APP_VERSION}
+            </a>
+          </p>
         </div>
       </div>
 

docker-compose.yml

@@ -1,18 +1,18 @@
+version: "3.8"
+
 services:
   bill-tracker:
-    build: .
+    image: dream.scheller.ltd/null/billtracker:latest
-    image: bill-tracker:local
     container_name: bill-tracker
-    environment:
-      NODE_ENV: production
-      DB_PATH:     /data/db/bills.db
-      BACKUP_PATH: /data/backups
-    ports:
-      - "${PORT:-3000}:3000"
-    volumes:
-      - bill-data:/data          # persistent DB + backups
-    restart: unless-stopped
 
-volumes:
+    ports:
-  bill-data:
+      - "3030:3000"
-    driver: local
+
+    environment:
+      INIT_ADMIN_USER: admin
+      INIT_ADMIN_PASS: changeme123
+
+    volumes:
+      - /portainer/hosting/bill-tracker/data:/data
+
+    restart: unless-stopped

index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/png" href="/img/logo.png">
   <title>Bill Tracker</title>
 </head>
 <body>

public/login.html

@@ -3,172 +3,13 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Bill Tracker — Sign In</title>
+  <meta http-equiv="refresh" content="0; url=/login">
-  <style>
+  <title>BillTracker — Sign In</title>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  <script>
-    :root {
+    window.location.replace('/login');
-      --bg:            #0d1526;
+  </script>
-      --surface:       #162236;
-      --surface-2:     #1c2d47;
-      --border:        rgba(255,255,255,0.07);
-      --border-strong: rgba(255,255,255,0.14);
-      --text:          #e2e8f0;
-      --text-muted:    #8faab8;
-      --text-faint:    #506070;
-      --primary:       #6366f1;
-      --primary-hover: #4f46e5;
-      --primary-light: rgba(99,102,241,0.18);
-      --danger:        #f43f5e;
-      --danger-light:  rgba(244,63,94,0.15);
-      --radius: 6px;
-      --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    }
-    body {
-      font-family: var(--font);
-      font-size: 14px;
-      background: var(--bg);
-      color: var(--text);
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-image:
-        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.06) 0%, transparent 60%),
-        radial-gradient(ellipse at 80% 20%, rgba(34,211,165,0.04) 0%, transparent 50%);
-    }
-    .card {
-      background: var(--surface);
-      border: 1px solid var(--border-strong);
-      border-radius: 12px;
-      padding: 36px 32px;
-      width: 100%;
-      max-width: 360px;
-      box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
-    }
-    .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
-    .logo-icon {
-      width: 36px; height: 36px;
-      background: var(--primary);
-      border-radius: var(--radius);
-      display: flex; align-items: center; justify-content: center;
-      font-weight: 800; font-size: 17px; color: white;
-      box-shadow: 0 0 16px rgba(99,102,241,0.4);
-    }
-    .logo-text { font-size: 18px; font-weight: 700; color: var(--text); }
-    h2 { font-size: 15px; font-weight: 500; margin-bottom: 22px; color: var(--text-muted); }
-    .form-group { margin-bottom: 14px; }
-    label {
-      display: block;
-      font-size: 11px;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: .05em;
-      color: var(--text-muted);
-      margin-bottom: 6px;
-    }
-    input {
-      width: 100%;
-      padding: 9px 11px;
-      border: 1px solid var(--border-strong);
-      border-radius: var(--radius);
-      font-size: 14px;
-      font-family: var(--font);
-      color: var(--text);
-      background: var(--surface-2);
-      transition: border-color .15s, box-shadow .15s;
-    }
-    input::placeholder { color: var(--text-faint); }
-    input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }
-    .btn {
-      width: 100%;
-      padding: 10px;
-      border: none;
-      border-radius: var(--radius);
-      font-size: 14px;
-      font-family: var(--font);
-      font-weight: 600;
-      cursor: pointer;
-      background: var(--primary);
-      color: white;
-      margin-top: 6px;
-      transition: background .15s, box-shadow .15s;
-    }
-    .btn:hover:not(:disabled) { background: var(--primary-hover); box-shadow: 0 0 0 3px rgba(99,102,241,0.25); }
-    .btn:disabled { opacity: .45; cursor: not-allowed; }
-    .error {
-      background: var(--danger-light);
-      color: var(--danger);
-      border: 1px solid rgba(244,63,94,0.3);
-      border-radius: var(--radius);
-      padding: 9px 12px;
-      font-size: 13px;
-      margin-bottom: 14px;
-      display: none;
-    }
-    .error.show { display: block; }
-  </style>
 </head>
 <body>
-  <div class="card">
+  <p><a href="/login">Continue to BillTracker sign in</a></p>
-    <div class="logo">
-      <div class="logo-icon">$</div>
-      <span class="logo-text">BillTracker</span>
-    </div>
-    <h2>Sign in to your account</h2>
-    <div class="error" id="error-msg"></div>
-    <form id="login-form">
-      <div class="form-group">
-        <label for="username">Username</label>
-        <input type="text" id="username" autocomplete="username" autocapitalize="none" required>
-      </div>
-      <div class="form-group">
-        <label for="password">Password</label>
-        <input type="password" id="password" autocomplete="current-password" required>
-      </div>
-      <button class="btn" type="submit" id="submit-btn">Sign In</button>
-    </form>
-  </div>
-
-  <script>
-    // If single-user mode is active, no login needed — go straight to the app
-    fetch('/api/auth/mode').then(r => r.json()).then(d => {
-      if (d.auth_mode === 'single') { location.href = '/'; return; }
-    });
-
-    // Redirect if already logged in
-    fetch('/api/auth/me').then(r => {
-      if (r.ok) return r.json().then(d => {
-        location.href = d.user.role === 'admin' ? '/admin.html' : '/';
-      });
-    });
-
-    document.getElementById('login-form').onsubmit = async (e) => {
-      e.preventDefault();
-      const btn = document.getElementById('submit-btn');
-      const err = document.getElementById('error-msg');
-      btn.disabled = true;
-      btn.textContent = 'Signing in…';
-      err.classList.remove('show');
-
-      try {
-        const res = await fetch('/api/auth/login', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            username: document.getElementById('username').value,
-            password: document.getElementById('password').value,
-          }),
-        });
-        const data = await res.json();
-        if (!res.ok) throw new Error(data.error || 'Login failed');
-        location.href = data.user.role === 'admin' ? '/admin.html' : '/';
-      } catch (ex) {
-        err.textContent = ex.message;
-        err.classList.add('show');
-        btn.disabled = false;
-        btn.textContent = 'Sign In';
-      }
-    };
-  </script>
 </body>
 </html>

server.js

@@ -61,6 +61,7 @@ app.use('/api/import',       requireAuth, requireUser,  importLimiter, require('
 app.use('/legacy', express.static(path.join(__dirname, 'legacy')));
 
 // ── Modern UI (Vite build) ────────────────────────────────────────────────────
+app.get('/login.html', (req, res) => res.redirect(302, '/login'));
 app.use(express.static(DIST));
 app.get('*', (req, res) => res.sendFile(path.join(DIST, 'index.html')));
 

vite.config.js

@@ -7,6 +7,7 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export default defineConfig({
   plugins: [react()],
+  publicDir: 'client/public',
   resolve: {
     alias: { '@': path.resolve(__dirname, './client') },
   },