fix: airgap-safe Font Awesome and dynamic password policy

crivetimihai · crivetimihai · commit 3c1614c32f0b · 2025-12-12T22:53:35.000Z
- Add Font Awesome to download-cdn-assets.sh for airgap deployments
- Update admin.html to conditionally load Font Awesome based on ui_airgapped
- Update login.html to conditionally load Font Awesome based on ui_airgapped
- Update change-password-required.html:
  - Add airgap support for Tailwind CSS and Font Awesome
  - Use dynamic password policy settings from server config
  - Fix JavaScript validation to respect policy settings
  - Add missing ui_airgapped context variable to template

Signed-off-by: Mihai Criveti &lt;crivetimihai@gmail.com&gt;
diff --git a/mcpgateway/admin.py b/mcpgateway/admin.py
@@ -2997,6 +2997,7 @@ async def change_password_required_page(request: Request) -> HTMLResponse:
         {
             "request": request,
             "root_path": root_path,
+            "ui_airgapped": settings.mcpgateway_ui_airgapped,
             "password_min_length": getattr(settings, "password_min_length", 8),
             "password_require_uppercase": getattr(settings, "password_require_uppercase", False),
             "password_require_lowercase": getattr(settings, "password_require_lowercase", False),
diff --git a/mcpgateway/templates/admin.html b/mcpgateway/templates/admin.html
@@ -104,7 +104,12 @@
       rel="stylesheet"
     />
     {% endif %}
+    <!-- Font Awesome -->
+    {% if ui_airgapped %}
+    <link rel="stylesheet" href="{{ root_path }}/static/vendor/fontawesome/css/all.min.css" />
+    {% else %}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    {% endif %}
     <link href="{{ root_path }}/static/admin.css" rel="stylesheet" />
     <link href="{{ root_path }}/static/gantt-chart.css" rel="stylesheet" />
     <link href="{{ root_path }}/static/flame-graph.css" rel="stylesheet" />
diff --git a/mcpgateway/templates/change-password-required.html b/mcpgateway/templates/change-password-required.html
@@ -4,7 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Password Change Required - MCP Gateway</title>
+    <!-- Tailwind CSS -->
+    {% if ui_airgapped %}
+    <script src="{{ root_path }}/static/vendor/tailwindcss/tailwind.min.js"></script>
+    {% else %}
     <script src="https://cdn.tailwindcss.com"></script>
+    {% endif %}
     <script>
       tailwind.config = {
         darkMode: "class",
@@ -54,10 +59,12 @@
         },
       };
     </script>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-    />
+    <!-- Font Awesome -->
+    {% if ui_airgapped %}
+    <link rel="stylesheet" href="{{ root_path }}/static/vendor/fontawesome/css/all.min.css" />
+    {% else %}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    {% endif %}
   </head>
   <body class="h-full bg-gray-50 dark:bg-gray-900 overflow-hidden">
     <!-- Main Split Layout -->
@@ -223,21 +230,33 @@ <h3 class="text-sm font-semibold text-blue-700 dark:text-blue-300 mb-2">
                 </h3>
                 <ul class="text-xs text-blue-600 dark:text-blue-400 space-y-1">
                   <li id="req-length" class="flex items-center">
-                    <i class="fas fa-circle text-green-500 mr-2"></i>
-                    At least 8 characters long
+                    <i class="fas fa-circle text-gray-400 mr-2"></i>
+                    At least {{ password_min_length or 8 }} characters long
                   </li>
+                  {% if password_require_uppercase %}
                   <li id="req-uppercase" class="flex items-center">
-                    <i class="fas fa-circle text-green-500 mr-2"></i>
+                    <i class="fas fa-circle text-gray-400 mr-2"></i>
                     Contains uppercase letters (A-Z)
                   </li>
+                  {% endif %}
+                  {% if password_require_lowercase %}
                   <li id="req-lowercase" class="flex items-center">
-                    <i class="fas fa-circle text-green-500 mr-2"></i>
+                    <i class="fas fa-circle text-gray-400 mr-2"></i>
                     Contains lowercase letters (a-z)
                   </li>
+                  {% endif %}
+                  {% if password_require_numbers %}
+                  <li id="req-numbers" class="flex items-center">
+                    <i class="fas fa-circle text-gray-400 mr-2"></i>
+                    Contains numbers (0-9)
+                  </li>
+                  {% endif %}
+                  {% if password_require_special %}
                   <li id="req-special" class="flex items-center">
-                    <i class="fas fa-circle text-green-500 mr-2"></i>
-                    Contains special characters (!@#$%&*)
+                    <i class="fas fa-circle text-gray-400 mr-2"></i>
+                    Contains special characters (!@#$%^&amp;*()_+[]{}:;"'&lt;&gt;?,.)
                   </li>
+                  {% endif %}
                 </ul>
               </div>
 
@@ -461,6 +480,15 @@ <h4 class="text-sm font-semibold text-white mb-2">
         }
       }
 
+      // Password policy settings from server
+      const passwordPolicy = {
+        minLength: {{ password_min_length | tojson }} || 8,
+        requireUppercase: {{ password_require_uppercase | tojson }},
+        requireLowercase: {{ password_require_lowercase | tojson }},
+        requireNumbers: {{ password_require_numbers | tojson }},
+        requireSpecial: {{ password_require_special | tojson }}
+      };
+
       // Validate password requirements
       function validatePassword() {
         const password = document.getElementById('new_password').value;
@@ -471,18 +499,22 @@ <h4 class="text-sm font-semibold text-white mb-2">
         strengthElement.textContent = strength.label;
         strengthElement.className = `font-medium ${strength.color}`;
 
-        // Update requirement indicators
-        updateRequirement('req-length', password.length >= 8);
-        updateRequirement('req-uppercase', /[A-Z]/.test(password));
-        updateRequirement('req-lowercase', /[a-z]/.test(password));
-        updateRequirement('req-special', /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password));
+        // Update requirement indicators (only for elements that exist)
+        updateRequirement('req-length', password.length >= passwordPolicy.minLength);
+        if (passwordPolicy.requireUppercase) updateRequirement('req-uppercase', /[A-Z]/.test(password));
+        if (passwordPolicy.requireLowercase) updateRequirement('req-lowercase', /[a-z]/.test(password));
+        if (passwordPolicy.requireNumbers) updateRequirement('req-numbers', /[0-9]/.test(password));
+        if (passwordPolicy.requireSpecial) updateRequirement('req-special', /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password));
+
+        // Check password match after validation
+        validatePasswordMatch();
       }
 
       // Get password strength
       function getPasswordStrength(password) {
         let score = 0;
 
-        if (password.length >= 8) score++;
+        if (password.length >= passwordPolicy.minLength) score++;
         if (/[A-Z]/.test(password)) score++;
         if (/[a-z]/.test(password)) score++;
         if (/[0-9]/.test(password)) score++;
@@ -493,10 +525,12 @@ <h4 class="text-sm font-semibold text-white mb-2">
         return { label: 'Strong', color: 'text-green-500' };
       }
 
-      // Update requirement indicator
+      // Update requirement indicator (only if element exists)
       function updateRequirement(id, met) {
         const element = document.getElementById(id);
+        if (!element) return;
         const icon = element.querySelector('i');
+        if (!icon) return;
 
         if (met) {
           icon.className = 'fas fa-check-circle text-green-500 mr-2';
@@ -522,12 +556,14 @@ <h4 class="text-sm font-semibold text-white mb-2">
         }
       }
 
-      // Check if password is valid
+      // Check if password is valid based on policy
       function isPasswordValid(password) {
-        return password.length >= 8 &&
-               /[A-Z]/.test(password) &&
-               /[a-z]/.test(password) &&
-               /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
+        const lengthOk = password.length >= passwordPolicy.minLength;
+        const uppercaseOk = !passwordPolicy.requireUppercase || /[A-Z]/.test(password);
+        const lowercaseOk = !passwordPolicy.requireLowercase || /[a-z]/.test(password);
+        const numbersOk = !passwordPolicy.requireNumbers || /[0-9]/.test(password);
+        const specialOk = !passwordPolicy.requireSpecial || /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
+        return lengthOk && uppercaseOk && lowercaseOk && numbersOk && specialOk;
       }
 
       // Handle error messages from URL parameters
diff --git a/mcpgateway/templates/login.html b/mcpgateway/templates/login.html
@@ -59,10 +59,12 @@
         },
       };
     </script>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-    />
+    <!-- Font Awesome -->
+    {% if ui_airgapped %}
+    <link rel="stylesheet" href="{{ root_path }}/static/vendor/fontawesome/css/all.min.css" />
+    {% else %}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    {% endif %}
   </head>
   <body class="h-full bg-gray-50 dark:bg-gray-900 overflow-hidden">
     <!-- Main Split Layout -->
diff --git a/scripts/download-cdn-assets.sh b/scripts/download-cdn-assets.sh
@@ -14,6 +14,8 @@ mkdir -p "${STATIC_DIR}/codemirror/mode/javascript"
 mkdir -p "${STATIC_DIR}/codemirror/theme"
 mkdir -p "${STATIC_DIR}/alpinejs"
 mkdir -p "${STATIC_DIR}/chartjs"
+mkdir -p "${STATIC_DIR}/fontawesome/css"
+mkdir -p "${STATIC_DIR}/fontawesome/webfonts"
 
 echo "📦 Downloading CDN assets for airgapped deployment..."
 
@@ -51,6 +53,21 @@ echo "  ⬇️  Chart.js 4.4.1..."
 curl -fsSL "https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js" \
   -o "${STATIC_DIR}/chartjs/chart.umd.min.js"
 
+# Download Font Awesome (pinned to 6.4.0 for reproducibility)
+echo "  ⬇️  Font Awesome 6.4.0..."
+curl -fsSL "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" \
+  -o "${STATIC_DIR}/fontawesome/css/all.min.css"
+
+# Download Font Awesome webfonts (required for the CSS to work)
+echo "  ⬇️  Font Awesome webfonts..."
+for font in fa-solid-900.woff2 fa-regular-400.woff2 fa-brands-400.woff2; do
+  curl -fsSL "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/${font}" \
+    -o "${STATIC_DIR}/fontawesome/webfonts/${font}"
+done
+
+# Fix Font Awesome CSS paths for local serving (change ../webfonts to ./webfonts)
+sed -i 's|../webfonts|./webfonts|g' "${STATIC_DIR}/fontawesome/css/all.min.css"
+
 echo "✅ All CDN assets downloaded successfully to ${STATIC_DIR}"
 echo ""
 echo "Directory structure:"

Original file line number	Diff line number	Diff line change
`@@ -2997,6 +2997,7 @@ async def change_password_required_page(request: Request) -> HTMLResponse:`
`2997`	`2997`	`{`
`2998`	`2998`	`"request": request,`
`2999`	`2999`	`"root_path": root_path,`
	`3000`	`+ "ui_airgapped": settings.mcpgateway_ui_airgapped,`
`3000`	`3001`	`"password_min_length": getattr(settings, "password_min_length", 8),`
`3001`	`3002`	`"password_require_uppercase": getattr(settings, "password_require_uppercase", False),`
`3002`	`3003`	`"password_require_lowercase": getattr(settings, "password_require_lowercase", False),`