Prompt file imported from h0me5k1n/vpnmgr (.claude/commands/webui.md). Copyright stays with the author.

Skill: WebUI Development (vpnmgr_www.*)

Name: webui
Author: h0me5k1n

Purpose

This skill covers the vpnmgr Web UI — an ASP page, JavaScript file, and CSS stylesheet that integrate into the AsusWRT-Merlin router's admin interface via the Addons API. The WebUI allows users to configure VPN clients, select providers/countries/servers, set schedules, and monitor connection status without SSH.

Read CLAUDE.md first for project-wide context.

Architecture

File Roles

File	Role
`vpnmgr_www.asp`	HTML template with embedded ASP directives. Rendered by the router's `httpd`. Defines the page structure, form fields, and injects initial data via `<% %>` tags.
`vpnmgr_www.js`	Client-side logic. Loads config from `/ext/vpnmgr/config.htm`, populates form fields, handles provider-specific UI toggling, submits changes back to the script.
`vpnmgr_www.css`	Styles. Must match the AsusWRT-Merlin dark theme (dark greys, specific accent colours).

How It Integrates With Merlin

During install, vpnmgr.sh calls am_settings_set and copies the ASP/JS/CSS to /jffs/addons/vpnmgr.d/
The Addons API mounts the page as a tab under the VPN menu in the router WebUI
The page loads at a URL like http://router.asus.com/user/vpnmgr.asp
Data exchange between WebUI and script happens via:
- Config read: JS fetches /ext/vpnmgr/config.htm (a plain-text key=value dump)
- Config write: JS POSTs changes which the script picks up and writes to the settings file
- Live data: JS fetches /tmp/vpnmgrserverloads.tmp for current server load stats

Data Flow

┌─────────────┐     GET /ext/vpnmgr/config.htm      ┌──────────────────┐
│             │ ──────────────────────────────────►  │                  │
│  Browser    │                                      │  vpnmgr.sh       │
│  (JS/ASP)   │  ◄──────────────────────────────────  │  (generates      │
│             │     key=value config text             │   config.htm)    │
│             │                                      │                  │
│             │     POST settings changes            │                  │
│             │ ──────────────────────────────────►  │  (writes to      │
│             │                                      │   vpnmgr.conf)   │
└─────────────┘                                      └──────────────────┘

ASP Page Conventions

Merlin Addons API Page Structure

The ASP page follows a strict template expected by Merlin's httpd:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
<meta HTTP-EQUIV="Expires" CONTENT="-1"/>
<link rel="shortcut icon" href="images/favicon.png"/>
<link rel="icon" href="images/favicon.png"/>
<title>vpnmgr</title>

<!-- Merlin standard includes -->
<link rel="stylesheet" type="text/css" href="index_style.css"/>
<link rel="stylesheet" type="text/css" href="form_style.css"/>
<link rel="stylesheet" type="text/css" href="/ext/shared-jy/shared-jy.css"/>

<!-- vpnmgr custom styles -->
<link rel="stylesheet" type="text/css" href="/ext/vpnmgr/vpnmgr_www.css"/>

<script language="JavaScript" type="text/javascript" src="/ext/shared-jy/shared-jy.js"></script>
<script language="JavaScript" type="text/javascript" src="/js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="/ext/vpnmgr/vpnmgr_www.js"></script>
</head>

<body onload="initial();">
<!-- Page content follows Merlin layout conventions -->
<div id="TopBanner"></div>
<div id="Loading" class="popup_bg"></div>

<table class="content" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="17">&nbsp;</td>
    <td valign="top" width="202">
      <div id="mainMenu"></div>
      <div id="subMenu"></div>
    </td>
    <td valign="top">
      <div id="tabMenu" class="submenuBlock"></div>
      <!-- Main content area -->
      <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left" valign="top">
            <!-- vpnmgr UI tables go here -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Important Constraints

No modern JS frameworks — vanilla JavaScript with jQuery (already loaded by Merlin)
No ES6+ syntax — older browsers and the router's httpd may not handle it. Use var, not let/const. Use function(){}, not arrow functions.
No fetch API — use jQuery.ajax() or XMLHttpRequest
Table-based layout — Merlin's UI is table-based. Match the existing .SettingsTable pattern.
Form name: document.form is the standard Merlin form reference

JavaScript Patterns

Configuration Loading

var $j = jQuery.noConflict();

function get_conf_file() {
    $j.ajax({
        url: "/ext/vpnmgr/config.htm",
        dataType: "text",
        error: function() {
            setTimeout(get_conf_file, 1000);
        },
        success: function(data) {
            var settings = data.split("\n");
            settings = settings.filter(Boolean);
            // Parse key=value pairs
            window.vpnmgr_settings = [];
            for (var i = 0; i < settings.length; i++) {
                if (settings[i].indexOf("#") === -1) {
                    var setting = settings[i].split("=");
                    window.vpnmgr_settings.push(setting);
                }
            }
            // Populate UI from settings
            PopulateUI();
        }
    });
}

Provider-Specific UI Toggling

With the modular provider architecture, the WebUI needs to show/hide fields based on selected provider:

function ProviderChanged(vpnNo, provider) {
    // Hide all provider-specific option groups
    $j(".provider-options-" + vpnNo).hide();

    // Show the selected provider's options
    $j("#provider-" + provider + "-options-" + vpnNo).show();

    // Refresh country/city dropdowns for this provider
    RefreshCountryList(vpnNo, provider);
}

Dynamic Country/City Lists

For the modular provider system, country/city lists come from provider sub-scripts and are served via cached data files:

function RefreshCountryList(vpnNo, provider) {
    $j.ajax({
        url: "/ext/vpnmgr/countries_" + provider + ".htm",
        dataType: "text",
        success: function(data) {
            var select = $j("[name=vpnmgr_vpn" + vpnNo + "_countryname]");
            select.empty();
            var lines = data.split("\n").filter(Boolean);
            for (var i = 0; i < lines.length; i++) {
                var parts = lines[i].split("|");
                select.append(
                    $j("<option></option>").val(parts[0]).text(parts[1])
                );
            }
        }
    });
}

Settings Save

function SaveSettings() {
    // Build the settings string from form values
    var settings = "";
    for (var vpnno = 1; vpnno <= 5; vpnno++) {
        settings += BuildVPNSettings(vpnno);
    }

    // POST back to the script
    $j.ajax({
        url: "/ext/vpnmgr/save.htm",
        type: "POST",
        data: settings,
        success: function() {
            // Show success notification
            ShowNotification("Settings saved successfully");
        },
        error: function() {
            ShowNotification("Error saving settings", "error");
        }
    });
}

CSS Conventions

Merlin Theme Matching

The router UI uses a dark theme. Key colours:

/* Background layers */
.SettingsTable {
    background-color: #1F2D35;
}

.SettingsTable td.settingname {
    background-color: #1F2D35;
    background: #2F3A3E;
    border-right: solid 1px #000;
    font-weight: bolder;
}

.SettingsTable td.settingvalue {
    text-align: left;
    border-right: solid 1px #000;
}

/* State indicators */
.SettingsTable .invalid {
    background-color: #8b0000;  /* Dark red for errors */
}

.SettingsTable .disabled {
    background-color: #CCC;
    color: #888;
}

Responsive Considerations

The router WebUI is not responsive — it targets desktop browsers at ~1024px+ width. Don't add responsive breakpoints; match the existing fixed-width table layout.

Adapting the WebUI for Modular Providers

What Needs to Change

Provider dropdown — Each VPN client row needs a provider selector that drives which options are shown
Dynamic option groups — Country lists, VPN types, and protocol options differ by provider. These should populate from the provider's cached data files rather than hardcoded JS arrays
Remove hardcoded provider arrays — The current JS has nordvpncountries=[], piacountries=[], wevpncountries=[]. Replace with dynamic loading per provider
Server load display — Already works per-provider via getServerLoad, just needs to dispatch correctly

WebUI ↔ Provider Data Files

The core script generates data files that the WebUI reads:

/ext/vpnmgr/config.htm              — main settings (all VPN clients)
/ext/vpnmgr/countries_nordvpn.htm   — NordVPN country list (id|name)
/ext/vpnmgr/cities_nordvpn_228.htm  — NordVPN cities for country 228 (id|name)
/ext/vpnmgr/types_nordvpn.htm       — NordVPN VPN types (id|name)
/ext/vpnmgr/providers.htm           — list of installed providers (name|displayname|version)

These are generated by the core script calling provider functions and writing the output. The WebUI only reads these files — it never calls provider APIs directly.

Testing the WebUI

On a real router — SCP the files to /jffs/addons/vpnmgr.d/ and reload the page
Browser dev tools — The router's httpd serves the page; use Chrome/Firefox dev tools to inspect, debug JS, and check network requests
Standalone mockup — For layout work, you can serve the ASP as plain HTML locally (the <% %> tags won't execute but the structure is visible). Mock the config.htm data with a static file.

Common Pitfalls

$j not $ — Always use $j for jQuery (noConflict mode to avoid clashing with Merlin's prototype.js)
No template literals — Use "string" + variable + "string" concatenation, not backtick strings
document.form — Merlin's standard form reference; don't create your own <form> tags
Cache busting — Append ?ts= + timestamp to AJAX URLs if stale data is a problem
The httpd is primitive — It doesn't support all HTTP methods or headers you'd expect. Stick to GET and POST with simple content types

# Skill: WebUI Development (vpnmgr_www.*) ## Purpose This skill covers the vpnmgr Web UI — an ASP page, JavaScript file, and CSS stylesheet that integrate into the AsusWRT-Merlin router's admin interface via the Addons API. The WebUI allows users to configure VPN clients, select providers/countries/servers, set schedules, and monitor connection status without SSH. Read `CLAUDE.md` first for project-wide context. ## Architecture ### File Roles | File | Role | |------|------| | `vpnmgr_www.asp` | HTML template with embedded ASP directives. Rendered by the router's `httpd`. Defines the page structure, form fields, and injects initial data via `<% %>` tags. | | `vpnmgr_www.js` | Client-side logic. Loads config from `/ext/vpnmgr/config.htm`, populates form fields, handles provider-specific UI toggling, submits changes back to the script. | | `vpnmgr_www.css` | Styles. Must match the AsusWRT-Merlin dark theme (dark greys, specific accent colours). | ### How It Integrates With Merlin 1. During install, `vpnmgr.sh` calls `am_settings_set` and copies the ASP/JS/CSS to `/jffs/addons/vpnmgr.d/` 2. The Addons API mounts the page as a tab under the VPN menu in the router WebUI 3. The page loads at a URL like `http://router.asus.com/user/vpnmgr.asp` 4. Data exchange between WebUI and script happens via: - **Config read:** JS fetches `/ext/vpnmgr/config.htm` (a plain-text key=value dump) - **Config write:** JS POSTs changes which the script picks up and writes to the settings file - **Live data:** JS fetches `/tmp/vpnmgrserverloads.tmp` for current server load stats ### Data Flow ``` ┌─────────────┐ GET /ext/vpnmgr/config.htm ┌──────────────────┐ │ │ ──────────────────────────────────► │ │ │ Browser │ │ vpnmgr.sh │ │ (JS/ASP) │ ◄────────────────────────────────── │ (generates │ │ │ key=value config text │ config.htm) │ │ │ │ │ │ │ POST settings changes │ │ │ │ ──────────────────────────────────► │ (writes to │ │ │ │ vpnmgr.conf) │ └─────────────┘ └──────────────────┘ ``` ## ASP Page Conventions ### Merlin Addons API Page Structure The ASP page follows a strict template expected by Merlin's httpd: ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta HTTP-EQUIV="Pragma" CONTENT="no-cache"/> <meta HTTP-EQUIV="Expires" CONTENT="-1"/> <link rel="shortcut icon" href="images/favicon.png"/> <link rel="icon" href="images/favicon.png"/> <title>vpnmgr</title>  <link rel="stylesheet" type="text/css" href="index_style.css"/> <link rel="stylesheet" type="text/css" href="form_style.css"/> <link rel="stylesheet" type="text/css" href="/ext/shared-jy/shared-jy.css"/>  <link rel="stylesheet" type="text/css" href="/ext/vpnmgr/vpnmgr_www.css"/> <script language="JavaScript" type="text/javascript" src="/ext/shared-jy/shared-jy.js"></script> <script language="JavaScript" type="text/javascript" src="/js/jquery.js"></script> <script language="JavaScript" type="text/javascript" src="/ext/vpnmgr/vpnmgr_www.js"></script> </head> <body onload="initial();">  <div id="TopBanner"></div> <div id="Loading" class="popup_bg"></div> <table class="content" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="17"> </td> <td valign="top" width="202"> <div id="mainMenu"></div> <div id="subMenu"></div> </td> <td valign="top"> <div id="tabMenu" class="submenuBlock"></div>  <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top">  </td> </tr> </table> </td> </tr> </table> </body> </html> ``` ### Important Constraints - **No modern JS frameworks** — vanilla JavaScript with jQuery (already loaded by Merlin) - **No ES6+ syntax** — older browsers and the router's httpd may not handle it. Use `var`, not `let`/`const`. Use `function(){}`, not arrow functions. - **No fetch API** — use `jQuery.ajax()` or `XMLHttpRequest` - **Table-based layout** — Merlin's UI is table-based. Match the existing `.SettingsTable` pattern. - **Form name:** `document.form` is the standard Merlin form reference ## JavaScript Patterns ### Configuration Loading ```javascript var $j = jQuery.noConflict(); function get_conf_file() { $j.ajax({ url: "/ext/vpnmgr/config.htm", dataType: "text", error: function() { setTimeout(get_conf_file, 1000); }, success: function(data) { var settings = data.split("\n"); settings = settings.filter(Boolean); // Parse key=value pairs window.vpnmgr_settings = []; for (var i = 0; i < settings.length; i++) { if (settings[i].indexOf("#") === -1) { var setting = settings[i].split("="); window.vpnmgr_settings.push(setting); } } // Populate UI from settings PopulateUI(); } }); } ``` ### Provider-Specific UI Toggling With the modular provider architecture, the WebUI needs to show/hide fields based on selected provider: ```javascript function ProviderChanged(vpnNo, provider) { // Hide all provider-specific option groups $j(".provider-options-" + vpnNo).hide(); // Show the selected provider's options $j("#provider-" + provider + "-options-" + vpnNo).show(); // Refresh country/city dropdowns for this provider RefreshCountryList(vpnNo, provider); } ``` ### Dynamic Country/City Lists For the modular provider system, country/city lists come from provider sub-scripts and are served via cached data files: ```javascript function RefreshCountryList(vpnNo, provider) { $j.ajax({ url: "/ext/vpnmgr/countries_" + provider + ".htm", dataType: "text", success: function(data) { var select = $j("[name=vpnmgr_vpn" + vpnNo + "_countryname]"); select.empty(); var lines = data.split("\n").filter(Boolean); for (var i = 0; i < lines.length; i++) { var parts = lines[i].split("|"); select.append( $j("<option></option>").val(parts[0]).text(parts[1]) ); } } }); } ``` ### Settings Save ```javascript function SaveSettings() { // Build the settings string from form values var settings = ""; for (var vpnno = 1; vpnno <= 5; vpnno++) { settings += BuildVPNSettings(vpnno); } // POST back to the script $j.ajax({ url: "/ext/vpnmgr/save.htm", type: "POST", data: settings, success: function() { // Show success notification ShowNotification("Settings saved successfully"); }, error: function() { ShowNotification("Error saving settings", "error"); } }); } ``` ## CSS Conventions ### Merlin Theme Matching The router UI uses a dark theme. Key colours: ```css /* Background layers */ .SettingsTable { background-color: #1F2D35; } .SettingsTable td.settingname { background-color: #1F2D35; background: #2F3A3E; border-right: solid 1px #000; font-weight: bolder; } .SettingsTable td.settingvalue { text-align: left; border-right: solid 1px #000; } /* State indicators */ .SettingsTable .invalid { background-color: #8b0000; /* Dark red for errors */ } .SettingsTable .disabled { background-color: #CCC; color: #888; } ``` ### Responsive Considerations The router WebUI is not responsive — it targets desktop browsers at ~1024px+ width. Don't add responsive breakpoints; match the existing fixed-width table layout. ## Adapting the WebUI for Modular Providers ### What Needs to Change 1. **Provider dropdown** — Each VPN client row needs a provider selector that drives which options are shown 2. **Dynamic option groups** — Country lists, VPN types, and protocol options differ by provider. These should populate from the provider's cached data files rather than hardcoded JS arrays 3. **Remove hardcoded provider arrays** — The current JS has `nordvpncountries=[]`, `piacountries=[]`, `wevpncountries=[]`. Replace with dynamic loading per provider 4. **Server load display** — Already works per-provider via `getServerLoad`, just needs to dispatch correctly ### WebUI ↔ Provider Data Files The core script generates data files that the WebUI reads: ``` /ext/vpnmgr/config.htm — main settings (all VPN clients) /ext/vpnmgr/countries_nordvpn.htm — NordVPN country list (id|name) /ext/vpnmgr/cities_nordvpn_228.htm — NordVPN cities for country 228 (id|name) /ext/vpnmgr/types_nordvpn.htm — NordVPN VPN types (id|name) /ext/vpnmgr/providers.htm — list of installed providers (name|displayname|version) ``` These are generated by the core script calling provider functions and writing the output. The WebUI only reads these files — it never calls provider APIs directly. ## Testing the WebUI 1. **On a real router** — SCP the files to `/jffs/addons/vpnmgr.d/` and reload the page 2. **Browser dev tools** — The router's httpd serves the page; use Chrome/Firefox dev tools to inspect, debug JS, and check network requests 3. **Standalone mockup** — For layout work, you can serve the ASP as plain HTML locally (the `<% %>` tags won't execute but the structure is visible). Mock the config.htm data with a static file. ## Common Pitfalls - **`$j` not `$`** — Always use `$j` for jQuery (noConflict mode to avoid clashing with Merlin's prototype.js) - **No template literals** — Use `"string" + variable + "string"` concatenation, not backtick strings - **`document.form`** — Merlin's standard form reference; don't create your own `<form>` tags - **Cache busting** — Append `?ts=` + timestamp to AJAX URLs if stale data is a problem - **The httpd is primitive** — It doesn't support all HTTP methods or headers you'd expect. Stick to GET and POST with simple content types

{ "prompt": "# Skill: WebUI Development (vpnmgr_www.*)\n\n## Purpose\n\nThis skill covers the vpnmgr Web UI — an ASP page, JavaScript file, and CSS stylesheet that integrate into the AsusWRT-Merlin router's admin interface via the Addons API. The WebUI allows users to configure VPN clients, select providers/countries/servers, set schedules, and monitor connection status without SSH.\n\nRead `CLAUDE.md` first for project-wide context.\n\n## Architecture\n\n### File Roles\n\n| File | Role |\n|------|------|\n| `vpnmgr_www.asp` | HTML template with embedded ASP directives. Rendered by the router's `httpd`. Defines the page structure, form fields, and injects initial data via `<% %>` tags. |\n| `vpnmgr_www.js` | Client-side logic. Loads config from `/ext/vpnmgr/config.htm`, populates form fields, handles provider-specific UI toggling, submits changes back to the script. |\n| `vpnmgr_www.css` | Styles. Must match the AsusWRT-Merlin dark theme (dark greys, specific accent colours). |\n\n### How It Integrates With Merlin\n\n1. During install, `vpnmgr.sh` calls `am_settings_set` and copies the ASP/JS/CSS to `/jffs/addons/vpnmgr.d/`\n2. The Addons API mounts the page as a tab under the VPN menu in the router WebUI\n3. The page loads at a URL like `http://router.asus.com/user/vpnmgr.asp`\n4. Data exchange between WebUI and script happens via:\n - **Config read:** JS fetches `/ext/vpnmgr/config.htm` (a plain-text key=value dump)\n - **Config write:** JS POSTs changes which the script picks up and writes to the settings file\n - **Live data:** JS fetches `/tmp/vpnmgrserverloads.tmp` for current server load stats\n\n### Data Flow\n\n```\n┌─────────────┐ GET /ext/vpnmgr/config.htm ┌──────────────────┐\n│ │ ──────────────────────────────────► │ │\n│ Browser │ │ vpnmgr.sh │\n│ (JS/ASP) │ ◄────────────────────────────────── │ (generates │\n│ │ key=value config text │ config.htm) │\n│ │ │ │\n│ │ POST settings changes │ │\n│ │ ──────────────────────────────────► │ (writes to │\n│ │ │ vpnmgr.conf) │\n└─────────────┘ └──────────────────┘\n```\n\n## ASP Page Conventions\n\n### Merlin Addons API Page Structure\n\nThe ASP page follows a strict template expected by Merlin's httpd:\n\n```html\n<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\n \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html xmlns=\"http://www.w3.org/1999/xhtml\">\n<head>\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\"/>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n<meta HTTP-EQUIV=\"Pragma\" CONTENT=\"no-cache\"/>\n<meta HTTP-EQUIV=\"Expires\" CONTENT=\"-1\"/>\n<link rel=\"shortcut icon\" href=\"images/favicon.png\"/>\n<link rel=\"icon\" href=\"images/favicon.png\"/>\n<title>vpnmgr</title>\n\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"index_style.css\"/>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"form_style.css\"/>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"/ext/shared-jy/shared-jy.css\"/>\n\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"/ext/vpnmgr/vpnmgr_www.css\"/>\n\n<script language=\"JavaScript\" type=\"text/javascript\" src=\"/ext/shared-jy/shared-jy.js\"></script>\n<script language=\"JavaScript\" type=\"text/javascript\" src=\"/js/jquery.js\"></script>\n<script language=\"JavaScript\" type=\"text/javascript\" src=\"/ext/vpnmgr/vpnmgr_www.js\"></script>\n</head>\n\n<body onload=\"initial();\">\n\n<div id=\"TopBanner\"></div>\n<div id=\"Loading\" class=\"popup_bg\"></div>\n\n<table class=\"content\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">\n <tr>\n <td width=\"17\"> </td>\n <td valign=\"top\" width=\"202\">\n <div id=\"mainMenu\"></div>\n <div id=\"subMenu\"></div>\n </td>\n <td valign=\"top\">\n <div id=\"tabMenu\" class=\"submenuBlock\"></div>\n \n <table width=\"98%\" border=\"0\" align=\"left\" cellpadding=\"0\" cellspacing=\"0\">\n <tr>\n <td align=\"left\" valign=\"top\">\n \n </td>\n </tr>\n </table>\n </td>\n </tr>\n</table>\n</body>\n</html>\n```\n\n### Important Constraints\n\n- **No modern JS frameworks** — vanilla JavaScript with jQuery (already loaded by Merlin)\n- **No ES6+ syntax** — older browsers and the router's httpd may not handle it. Use `var`, not `let`/`const`. Use `function(){}`, not arrow functions.\n- **No fetch API** — use `jQuery.ajax()` or `XMLHttpRequest`\n- **Table-based layout** — Merlin's UI is table-based. Match the existing `.SettingsTable` pattern.\n- **Form name:** `document.form` is the standard Merlin form reference\n\n## JavaScript Patterns\n\n### Configuration Loading\n\n```javascript\nvar $j = jQuery.noConflict();\n\nfunction get_conf_file() {\n $j.ajax({\n url: \"/ext/vpnmgr/config.htm\",\n dataType: \"text\",\n error: function() {\n setTimeout(get_conf_file, 1000);\n },\n success: function(data) {\n var settings = data.split(\"\\n\");\n settings = settings.filter(Boolean);\n // Parse key=value pairs\n window.vpnmgr_settings = [];\n for (var i = 0; i < settings.length; i++) {\n if (settings[i].indexOf(\"#\") === -1) {\n var setting = settings[i].split(\"=\");\n window.vpnmgr_settings.push(setting);\n }\n }\n // Populate UI from settings\n PopulateUI();\n }\n });\n}\n```\n\n### Provider-Specific UI Toggling\n\nWith the modular provider architecture, the WebUI needs to show/hide fields based on selected provider:\n\n```javascript\nfunction ProviderChanged(vpnNo, provider) {\n // Hide all provider-specific option groups\n $j(\".provider-options-\" + vpnNo).hide();\n\n // Show the selected provider's options\n $j(\"#provider-\" + provider + \"-options-\" + vpnNo).show();\n\n // Refresh country/city dropdowns for this provider\n RefreshCountryList(vpnNo, provider);\n}\n```\n\n### Dynamic Country/City Lists\n\nFor the modular provider system, country/city lists come from provider sub-scripts and are served via cached data files:\n\n```javascript\nfunction RefreshCountryList(vpnNo, provider) {\n $j.ajax({\n url: \"/ext/vpnmgr/countries_\" + provider + \".htm\",\n dataType: \"text\",\n success: function(data) {\n var select = $j(\"[name=vpnmgr_vpn\" + vpnNo + \"_countryname]\");\n select.empty();\n var lines = data.split(\"\\n\").filter(Boolean);\n for (var i = 0; i < lines.length; i++) {\n var parts = lines[i].split(\"|\");\n select.append(\n $j(\"<option></option>\").val(parts[0]).text(parts[1])\n );\n }\n }\n });\n}\n```\n\n### Settings Save\n\n```javascript\nfunction SaveSettings() {\n // Build the settings string from form values\n var settings = \"\";\n for (var vpnno = 1; vpnno <= 5; vpnno++) {\n settings += BuildVPNSettings(vpnno);\n }\n\n // POST back to the script\n $j.ajax({\n url: \"/ext/vpnmgr/save.htm\",\n type: \"POST\",\n data: settings,\n success: function() {\n // Show success notification\n ShowNotification(\"Settings saved successfully\");\n },\n error: function() {\n ShowNotification(\"Error saving settings\", \"error\");\n }\n });\n}\n```\n\n## CSS Conventions\n\n### Merlin Theme Matching\n\nThe router UI uses a dark theme. Key colours:\n\n```css\n/* Background layers */\n.SettingsTable {\n background-color: #1F2D35;\n}\n\n.SettingsTable td.settingname {\n background-color: #1F2D35;\n background: #2F3A3E;\n border-right: solid 1px #000;\n font-weight: bolder;\n}\n\n.SettingsTable td.settingvalue {\n text-align: left;\n border-right: solid 1px #000;\n}\n\n/* State indicators */\n.SettingsTable .invalid {\n background-color: #8b0000; /* Dark red for errors */\n}\n\n.SettingsTable .disabled {\n background-color: #CCC;\n color: #888;\n}\n```\n\n### Responsive Considerations\n\nThe router WebUI is not responsive — it targets desktop browsers at ~1024px+ width. Don't add responsive breakpoints; match the existing fixed-width table layout.\n\n## Adapting the WebUI for Modular Providers\n\n### What Needs to Change\n\n1. **Provider dropdown** — Each VPN client row needs a provider selector that drives which options are shown\n2. **Dynamic option groups** — Country lists, VPN types, and protocol options differ by provider. These should populate from the provider's cached data files rather than hardcoded JS arrays\n3. **Remove hardcoded provider arrays** — The current JS has `nordvpncountries=[]`, `piacountries=[]`, `wevpncountries=[]`. Replace with dynamic loading per provider\n4. **Server load display** — Already works per-provider via `getServerLoad`, just needs to dispatch correctly\n\n### WebUI ↔ Provider Data Files\n\nThe core script generates data files that the WebUI reads:\n\n```\n/ext/vpnmgr/config.htm — main settings (all VPN clients)\n/ext/vpnmgr/countries_nordvpn.htm — NordVPN country list (id|name)\n/ext/vpnmgr/cities_nordvpn_228.htm — NordVPN cities for country 228 (id|name)\n/ext/vpnmgr/types_nordvpn.htm — NordVPN VPN types (id|name)\n/ext/vpnmgr/providers.htm — list of installed providers (name|displayname|version)\n```\n\nThese are generated by the core script calling provider functions and writing the output. The WebUI only reads these files — it never calls provider APIs directly.\n\n## Testing the WebUI\n\n1. **On a real router** — SCP the files to `/jffs/addons/vpnmgr.d/` and reload the page\n2. **Browser dev tools** — The router's httpd serves the page; use Chrome/Firefox dev tools to inspect, debug JS, and check network requests\n3. **Standalone mockup** — For layout work, you can serve the ASP as plain HTML locally (the `<% %>` tags won't execute but the structure is visible). Mock the config.htm data with a static file.\n\n## Common Pitfalls\n\n- **`$j` not `$`** — Always use `$j` for jQuery (noConflict mode to avoid clashing with Merlin's prototype.js)\n- **No template literals** — Use `\"string\" + variable + \"string\"` concatenation, not backtick strings\n- **`document.form`** — Merlin's standard form reference; don't create your own `<form>` tags\n- **Cache busting** — Append `?ts=` + timestamp to AJAX URLs if stale data is a problem\n- **The httpd is primitive** — It doesn't support all HTTP methods or headers you'd expect. Stick to GET and POST with simple content types", "variables": [], "notes": "This skill covers the vpnmgr Web UI — an ASP page, JavaScript file, and CSS stylesheet that integrate into the AsusWRT-Merlin router's admin interface via the Addons API. The WebUI allows users to configure VPN clients, select providers/countries/servers, set schedules, and monitor connection status without SSH.", "metadata": { "source": { "provider": "github-claude-commands", "repository": "https://github.com/h0me5k1n/vpnmgr", "path": ".claude/commands/webui.md", "ref": "42c6311f0c53c6f9c9174ebe100228ff9b17f7b1", "url": "https://github.com/h0me5k1n/vpnmgr/blob/42c6311f0c53c6f9c9174ebe100228ff9b17f7b1/.claude/commands/webui.md", "key": "h0me5k1n/vpnmgr/.claude/commands/webui.md" } } }

webui

About