signalk-czone 0.3.0-beta.16 → 0.3.0-beta.18

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.3.0-beta.18
+
+- Adds in-page Signal K sign-in for browser and installed home-screen apps, without leaving CZone (#35, thanks @superstar76).
+- Remembers login across app restarts, preserves the form during refreshes, and shows clear login errors with the Admin UI login retained as a fallback.
+
+## 0.3.0-beta.17
+
+- Prompts for Signal K login when CZone circuit requests are unauthorized, returning to the webapp after sign-in (#34).
+- Shows permission and circuit-loading errors with a retry option instead of waiting indefinitely for Signal K.
+
 ## 0.3.0-beta.16
 
 - Adds an opt-in Victron GX switch pane for CZone circuits on the GX, Remote Console and VRM (#33).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-czone",
-  "version": "0.3.0-beta.16",
+  "version": "0.3.0-beta.18",
   "description": "BETA: Signal K CZone monitoring and control using dynamically parsed ZCF configuration and NMEA 2000",
   "main": "index.js",
   "keywords": [
@@ -42,7 +42,7 @@
     "icon.png"
   ],
   "scripts": {
-    "test": "node test/zcf.test.js && node test/zcf-fixtures.test.js && node test/circuit-state.test.js && node test/czone.test.js && node test/nmea2000.test.js && node test/control-x-plus.test.js && node test/signalk.test.js && node test/write.test.js && node test/circuit-status.test.js && node test/status-mapping-regression.test.js && node test/state.test.js && node test/config-network.test.js && node test/config-namespace.test.js && node test/monitoring.test.js && node test/confirm-off.test.js && node test/webapp-current.test.js && node test/bridge.test.js && node test/victron-switches.test.js && node test/victron-label-steady.test.js && node test/switch-pane-plugin.test.js && node test/trends.test.js && node test/inputs.test.js && node --require ./test/helpers/gx-low-space.cjs test/trends.test.js"
+    "test": "node test/zcf.test.js && node test/zcf-fixtures.test.js && node test/circuit-state.test.js && node test/czone.test.js && node test/nmea2000.test.js && node test/control-x-plus.test.js && node test/signalk.test.js && node test/write.test.js && node test/circuit-status.test.js && node test/status-mapping-regression.test.js && node test/state.test.js && node test/config-network.test.js && node test/config-namespace.test.js && node test/monitoring.test.js && node test/confirm-off.test.js && node test/webapp-current.test.js && node test/webapp-auth.test.js && node test/bridge.test.js && node test/victron-switches.test.js && node test/victron-label-steady.test.js && node test/switch-pane-plugin.test.js && node test/trends.test.js && node test/inputs.test.js && node --require ./test/helpers/gx-low-space.cjs test/trends.test.js"
   },
   "dependencies": {
     "signalk-czone-zcf": "0.1.0-beta.2"

package/public/index.html

@@ -75,6 +75,12 @@
     .hero h1, .hero p { position:relative; z-index:1; }
     .hero h1 { margin:0; font-size:30px; line-height:1.15; letter-spacing:-.7px; }
     .hero p { margin:9px 0 0; color:#a9c2d9; font-size:14px; }
+    .login-form { display:grid; gap:8px; max-width:280px; margin:10px 0; }
+    .login-form input { padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--text); font-size:16px; }
+    .login-form button { padding:10px 12px; border-radius:10px; border:0; background:linear-gradient(135deg,#168eea,#2164b8); color:#fff; font-weight:700; font-size:15px; cursor:pointer; }
+    .login-form button:disabled { opacity:.6; cursor:default; }
+    .login-form .login-error { color:#ff8a9a; font-size:13px; }
+    .login-form .login-error:empty { display:none; }
     .search { position:relative; }
     .search input { width:100%; border:1px solid var(--line); background:#0b1d30; color:white; border-radius:999px; padding:11px 15px 11px 38px; outline:none; }
     .search input:focus { border-color:rgba(56,169,255,.65); box-shadow:0 0 0 3px rgba(56,169,255,.10); }
@@ -353,7 +359,7 @@
       <div class="connection" id="connection"><i></i><span>Connecting to Signal K…</span></div>
       <section class="hero">
         <h1 id="heroTitle">Your Boat, Your Circuits</h1>
-        <p>Monitor and control your boat's electrical systems.</p><div id="writeGate" style="display:none;margin-top:12px;padding:10px 12px;border:1px solid rgba(255,195,77,.35);border-radius:10px;background:rgba(255,195,77,.08);color:#ffd98a;font-size:12px;line-height:1.5"></div>
+        <p>Monitor and control your boat's electrical systems.</p><div id="loadError" role="alert" hidden style="position:relative;z-index:1;margin-top:12px;padding:12px;border:1px solid var(--amber);border-radius:10px;background:var(--panel);line-height:1.5"></div><div id="writeGate" style="display:none;margin-top:12px;padding:10px 12px;border:1px solid rgba(255,195,77,.35);border-radius:10px;background:rgba(255,195,77,.08);color:#ffd98a;font-size:12px;line-height:1.5"></div>
       </section>
       <section class="section trend-panel" id="trendPanel">
         <div class="section-head"><span>📈</span><div><h2 id="trendTitle"></h2><span class="subtle" id="trendSub"></span></div><button type="button" class="sort trend-close" onclick="closeTrend()" aria-label="Close trend">✕ Close</button></div>
@@ -700,10 +706,90 @@
     if (Array.isArray(data.modes)) modes = data.modes;
     if (data.activeMode) activeMode = data.activeMode;
   }
+  function showLoadError(message, signIn) {
+    const el = document.querySelector('#loadError');
+    // Keep a sign-in form that is already showing: someone may be typing in it.
+    if (signIn && !el.hidden && el.loginForm) return;
+    el.loginForm = null;
+    el.textContent = message + ' ';
+    if (signIn) el.appendChild(loginForm(el));
+    const link = document.createElement('a');
+    link.style.color = 'var(--cyan)';
+    if (signIn) {
+      const here = window.location.pathname + window.location.search + window.location.hash;
+      link.href = '/admin/#/login?redirect=' + encodeURIComponent(here);
+      link.textContent = 'Or sign in on the Signal K login page';
+    } else {
+      link.href = window.location.href;
+      link.textContent = 'Retry';
+      link.onclick = event => { event.preventDefault(); window.location.reload(); };
+    }
+    el.appendChild(link);
+    el.hidden = false;
+  }
+
+  // Sign in on the page itself. A home-screen app (iPad, Android) keeps its
+  // own login, separate from the browser's, and has no address bar; the link
+  // to the admin page stays as the alternative. "Remember me" keeps the login
+  // after the app is closed, for as long as Signal K's token lasts.
+  function loginForm(banner) {
+    const form = document.createElement('form');
+    form.className = 'login-form';
+    const field = (name, type, autocomplete, placeholder) => {
+      const input = document.createElement('input');
+      input.name = name; input.type = type; input.required = true;
+      input.autocomplete = autocomplete; input.placeholder = placeholder;
+      form.appendChild(input);
+      return input;
+    };
+    const user = field('username', 'text', 'username', 'Signal K user');
+    const pass = field('password', 'password', 'current-password', 'Password');
+    const button = document.createElement('button');
+    button.type = 'submit'; button.textContent = 'Log in';
+    form.appendChild(button);
+    const error = document.createElement('span');
+    error.className = 'login-error';
+    form.appendChild(error);
+    form.onsubmit = async event => {
+      event.preventDefault();
+      error.textContent = '';
+      button.disabled = true;
+      try {
+        const r = await fetch('/signalk/v1/auth/login', { method:'POST', credentials:'include', headers:{ 'Content-Type':'application/json' },
+          body: JSON.stringify({ username: user.value, password: pass.value, rememberMe: true }) });
+        if (r.ok) { window.location.reload(); return; }
+        error.textContent = r.status === 401 ? 'Wrong user name or password.' : 'Signal K refused the login (HTTP ' + r.status + ').';
+      } catch (_) {
+        error.textContent = 'Signal K could not be reached.';
+      }
+      button.disabled = false;
+    };
+    banner.loginForm = form;
+    return form;
+  }
+
+  async function showCircuitRequestError(response) {
+    let signIn = response.status === 401;
+    if (response.status === 403) {
+      try {
+        const r = await fetch('/skServer/loginStatus', { cache:'no-store', credentials:'include' });
+        if (r.ok) signIn = (await r.json()).status === 'notLoggedIn';
+      } catch (_) { /* Keep the permission error if login status cannot be checked. */ }
+    }
+    const message = signIn
+      ? 'Sign in to Signal K to load CZone circuits.'
+      : response.status === 403
+        ? 'Signal K denied access to CZone circuits. Your account may not have the required permissions.'
+        : 'Could not load CZone circuits (HTTP ' + response.status + '). Check the Signal K server and CZone plugin.';
+    showLoadError(message, signIn);
+    // The plotter hides the banner, and its login is the Navico embedder's token.
+    updateSocketIndicator(signIn ? (MFD ? 'Sign in required: set the token in the Navico embedder' : 'Sign in required') : 'Unable to load CZone circuits', false);
+  }
+
   async function refreshOnce(reason = 'manual') {
     try {
       const r = await fetch(`${API}/circuits`, { cache:'no-store', credentials:'include' });
-      if (!r.ok) throw new Error('Signal K plugin unavailable (HTTP ' + r.status + ')');
+      if (!r.ok) { await showCircuitRequestError(r); return false; }
       const data = await r.json();
       const incoming = Array.isArray(data.circuits) ? data.circuits : [];
       console.debug('[CZone UI] REST refresh', reason, { circuits: incoming.length, modes: Array.isArray(data.modes) ? data.modes.length : 0, sendingEnabled: data.sendingEnabled === true, nmeaReady: data.nmeaReady === true });
@@ -719,12 +805,14 @@
         : socketEverOpen
           ? `<i></i><span>Live updates lost · reconnecting… (circuits as of ${new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })})</span>`
           : '<i></i><span>Circuits loaded · connecting live updates…</span>';
+      document.querySelector('#loadError').hidden = true;
       render();
       return true;
     } catch (e) {
       console.warn('[CZone UI] REST refresh failed', reason, e);
       document.querySelector('#connection').classList.remove('ok');
-      document.querySelector('#connection').innerHTML = '<i></i><span>Waiting for Signal K…</span>';
+      showLoadError('Could not load CZone circuits. Check the Signal K connection and CZone plugin. ' + e.message, false);
+      updateSocketIndicator('Unable to load CZone circuits', false);
       return false;
     }
   }
@@ -1334,7 +1422,8 @@
   }
 
   refreshVesselName();
-  refreshOnce('initial-load').then(() => {
+  refreshOnce('initial-load').then(loaded => {
+    if (!loaded) return;
     if (circuits.length) {
       connectSocket();
       sendSubscriptions();