feat(ui): add dark mode toggle to navbar

Uses Bootstrap 5.3 native data-bs-theme with localStorage persistence. Inline script in <head> prevents flash on page load. Moon/sun icon in top-right navbar switches between light and dark. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
fix(deploy): remove NPM stream creation on customer deploy/undeploy
2026-02-24 20:08:18 +01:00 · 2026-02-24 19:42:12 +01:00
4 changed files with 70 additions and 33 deletions
--- a/app/services/netbird_service.py
+++ b/app/services/netbird_service.py
@@ -264,7 +264,7 @@ async def deploy_customer(db: Session, customer_id: int) -> dict[str, Any]:
            _log_action(db, customer_id, "deploy", "info",
                        "Auto-setup failed — admin must complete setup manually.")
-        # Step 9: Create NPM proxy host + stream (production only)
+        # Step 9: Create NPM proxy host (production only)
        npm_proxy_id = None
        npm_stream_id = None
        if not local_mode:
@@ -294,27 +294,6 @@ async def deploy_customer(db: Session, customer_id: int) -> dict[str, Any]:
                    f"(SSL: {'OK' if ssl_ok else 'FAILED — check DNS and port 80 accessibility'})",
                )
            # Create NPM UDP stream for relay STUN port
            stream_result = await npm_service.create_stream(
                api_url=config.npm_api_url,
                npm_email=config.npm_api_email,
                npm_password=config.npm_api_password,
                incoming_port=allocated_port,
                forwarding_host=forward_host,
                forwarding_port=allocated_port,
            )
            npm_stream_id = stream_result.get("stream_id")
            if stream_result.get("error"):
                _log_action(
                    db, customer_id, "deploy", "error",
                    f"NPM stream creation failed: {stream_result['error']}",
                )
            else:
                _log_action(
                    db, customer_id, "deploy", "info",
                    f"NPM UDP stream created: port {allocated_port} -> {forward_host}:{allocated_port}",
                )
            # Note: Keep HTTPS configs even if SSL cert creation failed.
            # SSL can be set up manually in NPM later. Switching to HTTP
            # would break the dashboard when the user accesses via HTTPS.
@@ -443,17 +422,6 @@ async def undeploy_customer(db: Session, customer_id: int) -> dict[str, Any]:
            except Exception as exc:
                _log_action(db, customer_id, "undeploy", "error", f"NPM removal error: {exc}")
        # Remove NPM stream
        if deployment.npm_stream_id and config.npm_api_email:
            try:
                await npm_service.delete_stream(
                    config.npm_api_url, config.npm_api_email, config.npm_api_password,
                    deployment.npm_stream_id,
                )
                _log_action(db, customer_id, "undeploy", "info", "NPM stream removed.")
            except Exception as exc:
                _log_action(db, customer_id, "undeploy", "error", f"NPM stream removal error: {exc}")
        # Remove Windows DNS A-record (non-fatal)
        if config and config.dns_enabled and config.dns_server and config.dns_zone:
            try:
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -188,3 +188,36 @@ body.i18n-loading #app-page {
    font-weight: 600;
    background: rgba(0, 0, 0, 0.02);
 }
 /* ---------------------------------------------------------------------------
   Dark mode overrides (Bootstrap 5.3 data-bs-theme="dark")
   Bootstrap handles most components automatically; only custom elements need
   explicit overrides here.
 --------------------------------------------------------------------------- */
 [data-bs-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.08);
 }
 [data-bs-theme="dark"] .card-header {
    background: rgba(255, 255, 255, 0.04);
 }
 [data-bs-theme="dark"] .log-entry {
    border-bottom-color: rgba(255, 255, 255, 0.07);
 }
 [data-bs-theme="dark"] .log-time {
    color: #9ca3af;
 }
 [data-bs-theme="dark"] .table th {
    color: #9ca3af;
 }
 [data-bs-theme="dark"] .login-container {
    background: linear-gradient(135deg, #0d0d1a 0%, #0a1020 50%, #071525 100%);
 }
 [data-bs-theme="dark"] .stat-card {
    background: var(--bs-card-bg);
 }
--- a/static/index.html
+++ b/static/index.html
@@ -6,6 +6,13 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NetBird MSP Appliance</title>
    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <script>
        // Apply dark mode before page renders to prevent flash
        (function () {
            const saved = localStorage.getItem('darkMode');
            if (saved === 'dark') document.documentElement.setAttribute('data-bs-theme', 'dark');
        })();
    </script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="/static/css/styles.css" rel="stylesheet">
@@ -109,6 +116,10 @@
                    <span id="nav-brand-name">NetBird MSP</span>
                </a>
                <div class="d-flex align-items-center">
                    <!-- Dark Mode Toggle -->
                    <button class="btn btn-outline-light btn-sm me-2" id="darkmode-toggle" onclick="toggleDarkMode()" title="Toggle dark mode">
                        <i id="darkmode-icon" class="bi bi-moon-fill"></i>
                    </button>
                    <!-- Language Switcher -->
                    <div class="dropdown me-2">
                        <button class="btn btn-outline-light btn-sm dropdown-toggle" id="language-switcher-btn"
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -66,10 +66,35 @@ async function api(method, path, body = null) {
    return data;
 }
 // ---------------------------------------------------------------------------
 // Dark mode
 // ---------------------------------------------------------------------------
 function toggleDarkMode() {
    const isDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
    if (isDark) {
        document.documentElement.removeAttribute('data-bs-theme');
        localStorage.setItem('darkMode', 'light');
        document.getElementById('darkmode-icon').className = 'bi bi-moon-fill';
    } else {
        document.documentElement.setAttribute('data-bs-theme', 'dark');
        localStorage.setItem('darkMode', 'dark');
        document.getElementById('darkmode-icon').className = 'bi bi-sun-fill';
    }
 }
 function syncDarkmodeIcon() {
    const icon = document.getElementById('darkmode-icon');
    if (!icon) return;
    icon.className = document.documentElement.getAttribute('data-bs-theme') === 'dark'
        ? 'bi bi-sun-fill'
        : 'bi bi-moon-fill';
 }
 // ---------------------------------------------------------------------------
 // Auth
 // ---------------------------------------------------------------------------
 async function initApp() {
    syncDarkmodeIcon();
    await initI18n();
    await loadBranding();
    await loadAzureLoginConfig();