webviewer: make basic auth runtime-configurable; add settings UI, i18n, password confirmation, validation, and friendly auth pages

hoang-rio · hoang-rio · commit 5e99e82971ad · 2026-03-17T08:25:16.000+07:00
diff --git a/web_viewer/__init__.py b/web_viewer/__init__.py
@@ -10,6 +10,7 @@
 from dotenv import dotenv_values
 from typing import List, Optional
 from base64 import b64decode
+from html import escape
 
 # Load config from .env and environment
 config: dict = {**dotenv_values(".env"), **environ}
@@ -272,11 +273,33 @@ async def options_settings(_: web.Request):
         'Access-Control-Allow-Headers': 'Content-Type',
     })
 
-# --- Basic Auth Middleware and Config ---
-AUTH_ENABLED = config.get("AUTH_ENABLED", "false").lower() == "true"
-AUTH_USERNAME = config.get("AUTH_USERNAME", "admin")
-AUTH_PASSWORD = config.get("AUTH_PASSWORD", "changeme")
 
+def _auth_html_response(status: int, title: str, message: str, include_www_authenticate: bool = False) -> web.Response:
+        """Return a small friendly HTML response for auth errors."""
+        safe_title = escape(title)
+        safe_message = escape(message)
+        body = f"""
+        <!doctype html>
+        <html>
+            <head>
+                <meta charset="utf-8" />
+                <meta name="viewport" content="width=device-width,initial-scale=1" />
+                <title>{safe_title}</title>
+                <style>body{{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.4;margin:24px;color:#222}}h2{{margin-top:0}}.hint{{color:#666;font-size:0.9em}}</style>
+            </head>
+            <body>
+                <h2>{safe_title}</h2>
+                <p>{safe_message}</p>
+                <p class="hint">If you are the device owner you can update authentication in the <strong>Settings</strong> panel of this web viewer.</p>
+            </body>
+        </html>
+        """
+        headers = {}
+        if include_www_authenticate:
+                headers["WWW-Authenticate"] = "Basic realm='WebViewer'"
+        return web.Response(status=status, text=body, content_type='text/html', headers=headers)
+
+# --- Basic Auth Middleware (reads auth settings dynamically) ---
 @web.middleware
 async def basic_auth_middleware(request, handler):
     # Allow access to /ws only if from loopback
@@ -287,23 +310,35 @@ async def basic_auth_middleware(request, handler):
             if ip == "127.0.0.1" or ip == "::1":
                 return await handler(request)
             else:
-                return web.Response(status=403, text="Forbidden")
-    if not AUTH_ENABLED:
+                return _auth_html_response(403, "Forbidden", "Access to the websocket endpoint is restricted to localhost.")
+    # Read auth settings from persistent `settings` (updated by web UI).
+    try:
+        import settings as app_settings
+        auth_enabled = app_settings.get_setting("AUTH_ENABLED", config.get("AUTH_ENABLED", "false")).lower() == "true"
+        auth_username = app_settings.get_setting("AUTH_USERNAME", config.get("AUTH_USERNAME", "admin"))
+        auth_password = app_settings.get_setting("AUTH_PASSWORD", config.get("AUTH_PASSWORD", "changeme"))
+    except Exception:
+        # Fallback to env/config if settings module not available for any reason
+        auth_enabled = config.get("AUTH_ENABLED", "false").lower() == "true"
+        auth_username = config.get("AUTH_USERNAME", "admin")
+        auth_password = config.get("AUTH_PASSWORD", "changeme")
+
+    if not auth_enabled:
         return await handler(request)
     # Allow unauthenticated access to static files
     if request.path.startswith("/static") or request.path.startswith("/build"):
         return await handler(request)
     auth_header = request.headers.get("Authorization")
     if not auth_header or not auth_header.startswith("Basic "):
-        return web.Response(status=401, headers={"WWW-Authenticate": "Basic realm='WebViewer'"}, text="Unauthorized")
+        return _auth_html_response(401, "Authentication required", "This web viewer is protected. Please provide HTTP Basic credentials.", include_www_authenticate=True)
     try:
         encoded = auth_header.split(" ", 1)[1]
         decoded = b64decode(encoded).decode()
         username, password = decoded.split(":", 1)
     except Exception:
-        return web.Response(status=401, headers={"WWW-Authenticate": "Basic realm='WebViewer'"}, text="Invalid auth header")
-    if username != AUTH_USERNAME or password != AUTH_PASSWORD:
-        return web.Response(status=401, headers={"WWW-Authenticate": "Basic realm='WebViewer'"}, text="Invalid credentials")
+        return _auth_html_response(401, "Invalid authentication", "Invalid Authorization header. Please provide valid HTTP Basic credentials.", include_www_authenticate=True)
+    if username != auth_username or password != auth_password:
+        return _auth_html_response(401, "Invalid credentials", "The username or password you provided is incorrect.", include_www_authenticate=True)
     return await handler(request)
 
 def create_runner():
diff --git a/web_viewer/fe_src/src/components/SettingsPopover.tsx b/web_viewer/fe_src/src/components/SettingsPopover.tsx
@@ -19,6 +19,9 @@ interface Settings {
   BATTERY_FULL_NOTIFY_ENABLED: string;
   BATTERY_FULL_NOTIFY_BODY: string;
   ABNORMAL_NOTIFY_BODY: string;
+  AUTH_ENABLED: string;
+  AUTH_USERNAME: string;
+  AUTH_PASSWORD: string;
 }
 
 const SettingsPopover = forwardRef<HTMLDivElement, SettingsPopoverProps>(({ onClose }, ref) => {
@@ -28,6 +31,7 @@ const SettingsPopover = forwardRef<HTMLDivElement, SettingsPopoverProps>(({ onCl
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [message, setMessage] = useState<{text: string, type: 'success' | 'error'} | null>(null);
+  const [passwordConfirm, setPasswordConfirm] = useState<string>('');
 
   useEffect(() => {
     fetchSettings();
@@ -50,6 +54,9 @@ const SettingsPopover = forwardRef<HTMLDivElement, SettingsPopoverProps>(({ onCl
         BATTERY_FULL_NOTIFY_ENABLED: 'true',
         BATTERY_FULL_NOTIFY_BODY: 'Pin đã sạc đầy 100%. Có thể bật bình nóng lạnh để tối ưu sử dụng.',
         ABNORMAL_NOTIFY_BODY: 'Tiêu thụ điện bất thường, vui lòng kiểm tra xem vòi nước đã khoá chưa.'
+        ,AUTH_ENABLED: 'false'
+        ,AUTH_USERNAME: 'admin'
+        ,AUTH_PASSWORD: 'changeme'
       };
       const merged = { ...defaults, ...data };
       setSettings(merged);
@@ -66,18 +73,45 @@ const SettingsPopover = forwardRef<HTMLDivElement, SettingsPopoverProps>(({ onCl
     if (!settings) return;
     setSaving(true);
     setMessage(null);
+    // If auth enabled, ensure username and password present and confirmation match
+    if (settings.AUTH_ENABLED === 'true') {
+      if (!settings.AUTH_USERNAME || settings.AUTH_USERNAME.trim() === '') {
+        setMessage({text: t('settings.authUsernameRequired'), type: 'error'});
+        setSaving(false);
+        return;
+      }
+      if (!settings.AUTH_PASSWORD || settings.AUTH_PASSWORD === '') {
+        setMessage({text: t('settings.authPasswordRequired'), type: 'error'});
+        setSaving(false);
+        return;
+      }
+      if (settings.AUTH_PASSWORD !== passwordConfirm) {
+        setMessage({text: t('settings.authPasswordMismatch'), type: 'error'});
+        setSaving(false);
+        return;
+      }
+    }
     try {
+      // Do not send password confirmation to backend
+      const payload = { ...settings } as any;
+      delete payload.AUTH_PASSWORD_CONFIRM;
       const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/settings`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify(settings),
+        body: JSON.stringify(payload),
       });
       const data = await res.json();
       if (data.success) {
+        const prevAuthEnabled = originalSettings ? originalSettings.AUTH_ENABLED === 'true' : false;
         setOriginalSettings(settings);
         setMessage({text: t('settings.saveSuccess'), type: 'success'});
+        // If auth changed from disabled -> enabled, reload page to ensure auth middleware and client state take effect
+        if (!prevAuthEnabled && settings.AUTH_ENABLED === 'true') {
+          // small delay to allow UI message to show briefly
+          setTimeout(() => window.location.reload(), 300);
+        }
       } else {
         setMessage({text: t('settings.saveError'), type: 'error'});
       }
@@ -91,6 +125,14 @@ const SettingsPopover = forwardRef<HTMLDivElement, SettingsPopoverProps>(({ onCl
 
   const updateSetting = (key: keyof Settings, value: string) => {
     if (settings) {
+      // If enabling auth, reset password fields so user must re-enter
+      if (key === 'AUTH_ENABLED' && value === 'true' && settings.AUTH_ENABLED !== 'true') {
+        // When enabling auth from disabled state, require re-entering the password
+        // but keep the existing username so user doesn't have to retype it.
+        setPasswordConfirm('');
+        setSettings({ ...settings, AUTH_ENABLED: value, AUTH_PASSWORD: '' });
+        return;
+      }
       setSettings({ ...settings, [key]: value });
     }
   };
@@ -222,6 +264,53 @@ const SettingsPopover = forwardRef<HTMLDivElement, SettingsPopoverProps>(({ onCl
             </div>
           </div>
           <div className="settings-section">
+            <h4>{t("settings.authSection")}</h4>
+            <div className="setting-item">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={settings.AUTH_ENABLED === "true"}
+                  onChange={(e) =>
+                    updateSetting(
+                      "AUTH_ENABLED",
+                      e.target.checked ? "true" : "false"
+                    )
+                  }
+                />
+                {t("settings.authEnabled")}
+              </label>
+            </div>
+            <div className="setting-item">
+              <label>{t("settings.authUsername")}</label>
+              <input
+                type="text"
+                value={settings.AUTH_USERNAME}
+                onChange={(e) => updateSetting("AUTH_USERNAME", e.target.value)}
+                disabled={settings.AUTH_ENABLED !== "true"}
+              />
+            </div>
+            <div className="setting-item">
+              <label>{t("settings.authPassword")}</label>
+              <input
+                type="password"
+                value={settings.AUTH_PASSWORD}
+                onChange={(e) => updateSetting("AUTH_PASSWORD", e.target.value)}
+                disabled={settings.AUTH_ENABLED !== "true"}
+              />
+            </div>
+            <div className="setting-item">
+              <label>{t("settings.authPasswordConfirm")}</label>
+              <input
+                type="password"
+                value={passwordConfirm}
+                onChange={(e) => setPasswordConfirm(e.target.value)}
+                disabled={settings.AUTH_ENABLED !== "true"}
+              />
+            </div>
+            <p className="setting-descrtiption">
+              {t("settings.authDescription")}
+            </p>
+
             <h4>{t("settings.offGridWarningSection")}</h4>
             <div className="setting-item">
               <label>
@@ -280,7 +369,13 @@ const SettingsPopover = forwardRef<HTMLDivElement, SettingsPopoverProps>(({ onCl
           </div>
         </div>
         <div className="settings-actions">
-          <button onClick={handleSave} disabled={saving || !hasChanges()}>
+          <button onClick={handleSave} disabled={
+            saving || !hasChanges() || (settings.AUTH_ENABLED === 'true' && (
+              !settings.AUTH_USERNAME || settings.AUTH_USERNAME.trim() === '' ||
+              !settings.AUTH_PASSWORD || settings.AUTH_PASSWORD === '' ||
+              settings.AUTH_PASSWORD !== passwordConfirm
+            ))
+          }>
             {saving ? t("settings.saving") : t("settings.save")}
           </button>
         </div>
diff --git a/web_viewer/fe_src/src/locales/en.json b/web_viewer/fe_src/src/locales/en.json
@@ -133,6 +133,15 @@
     "batterySection": "Battery settings",
     "batteryFullNotifyEnabled": "Enable battery full notification",
     "notifyBody": "Notification body",
+    "authSection": "Authentication",
+    "authEnabled": "Require authentication for web viewer",
+    "authUsername": "Username",
+    "authPassword": "Password",
+    "authDescription": "When enabled, users must authenticate to access the web viewer.",
+    "authPasswordConfirm": "Confirm password",
+    "authPasswordMismatch": "Password and confirmation do not match",
+    "authUsernameRequired": "Username is required when authentication is enabled",
+    "authPasswordRequired": "Password is required when authentication is enabled",
     "save": "Save",
     "saving": "Saving...",
     "saveSuccess": "Settings saved successfully",
diff --git a/web_viewer/fe_src/src/locales/vi.json b/web_viewer/fe_src/src/locales/vi.json
@@ -130,6 +130,15 @@
     "maxBatteryPower": "Công suất pin tối đa",
     "offGridWarningEnabled": "Bật cảnh báo",
     "offGridWarningDescription": "Cảnh báo khi EPS >= ngưỡng công suất và PV < EPS / 2 và (SOC < ngưỡng SOC hoặc công suất xả pin > công suất pin tối đa)",
+    "authSection": "Xác thực",
+    "authEnabled": "Yêu cầu đăng nhập cho giao diện web",
+    "authUsername": "Tên đăng nhập",
+    "authPassword": "Mật khẩu",
+    "authDescription": "Khi bật, người dùng phải đăng nhập để truy cập giao diện web.",
+    "authPasswordConfirm": "Xác nhận mật khẩu",
+    "authPasswordMismatch": "Mật khẩu và xác nhận không khớp",
+    "authUsernameRequired": "Tên đăng nhập là bắt buộc khi bật xác thực",
+    "authPasswordRequired": "Mật khẩu là bắt buộc khi bật xác thực",
     "batterySection": "Cài đặt pin",
     "batteryFullNotifyEnabled": "Bật thông báo khi pin đầy",
     "notifyBody": "Nội dung thông báo",
