untangle · mayur-dhande · Nov 26, 2025 · Dec 10, 2025 · Dec 10, 2025 · Dec 30, 2025
diff --git a/application-control-lite/js/Main.js b/application-control-lite/js/Main.js
@@ -1,20 +1,33 @@
 Ext.define('Ung.apps.applicationcontrollite.Main', {
     extend: 'Ung.cmp.AppPanel',
     alias: 'widget.app-application-control-lite',
-    controller: 'app-application-control-lite',
 
     viewModel: {
+        data: {
+            title: 'Application Control Lite'.t(),
+            iconName: 'application-control-lite',
+            vueMigrated: true
+        },
+    },
+
+    listeners: {
+        activate: function (panel) {
+            var target = panel.down('#iframeHolder');
+            Util.attachIframeToTarget(target, '/console/settings/services/application-control-lite', false);
+
+            Util.setupVueMessageHandlers(panel, {
+                appName: 'application-control-lite',
+                enableRemoveHandler: true
+            });
+        },
 
-        stores: {
-            signatureList: {
-                data: '{settings.patterns.list}'
-            }
+        destroy: function (panel) {
+            Util.cleanupVueMessageHandlers(panel);
         }
     },
 
     items: [
-        { xtype: 'app-application-control-lite-status' },
-        { xtype: 'app-application-control-lite-signatures' }
+        Field.iframeHolder
     ]
 
 });
diff --git a/application-control-lite/js/MainController.js b/application-control-lite/js/MainController.js
@@ -2,11 +2,11 @@ Ext.define('Ung.apps.applicationcontrollite.MainController', {
     extend: 'Ext.app.ViewController',
     alias: 'controller.app-application-control-lite',
 
-    control: {
-        '#': {
-            afterrender: 'getSettings'
-        }
-    },
+    // control: {
+    //     '#': {
+    //         afterrender: 'getSettings'
+    //     }
+    // },
 
     getSettings: function () {
         var v = this.getView(), vm = this.getViewModel();

diff --git a/...control-lite/src/com/untangle/app/application_control_lite/ApplicationControlLiteApp.java b/...control-lite/src/com/untangle/app/application_control_lite/ApplicationControlLiteApp.java
@@ -88,6 +88,22 @@ public void setSettings(final ApplicationControlLiteSettings newSettings)
         reconfigure();
     }
 
+    /**
+     * getSettings gets the current settings in v2 (Generic) format
+     * @return ApplicationControlLiteSettings
+     */
+    public ApplicationControlLiteSettings getSettingsV2() {
+        return this.getSettings();
+    }
+
+    /**
+     * Set ApplicationControlLite Settings from generic version payload
+     * @param newSettings ApplicationControlLiteSettings
+     */
+    public void setSettingsV2(final ApplicationControlLiteSettings newSettings) {
+        this.setSettings( newSettings );
+    }
+
     /**
      * Get the pipeline connectors for this ad blocker
      * @return the pipelineconnectors array

diff --git a/branding-manager/js/Main.js b/branding-manager/js/Main.js
@@ -1,11 +1,33 @@
 Ext.define('Ung.apps.brandingmanager.Main', {
     extend: 'Ung.cmp.AppPanel',
     alias: 'widget.app-branding-manager',
-    controller: 'app-branding-manager',
+
+    viewModel: {
+        data: {
+            title: 'Branding Manager'.t(),
+            iconName: 'branding-manager',
+            vueMigrated: true
+        },
+    },
+
+    listeners: {
+        activate: function (panel) {
+            var target = panel.down('#iframeHolder');
+            Util.attachIframeToTarget(target, '/console/settings/services/branding-manager', false);
+
+            Util.setupVueMessageHandlers(panel, {
+                appName: 'branding-manager',
+                enableRemoveHandler: true
+            });
+        },
+
+        destroy: function (panel) {
+            Util.cleanupVueMessageHandlers(panel);
+        }
+    },
 
     items: [
-        { xtype: 'app-branding-manager-status' },
-        { xtype: 'app-branding-manager-settings' }
+        Field.iframeHolder
     ]
 
 });
diff --git a/branding-manager/js/MainController.js b/branding-manager/js/MainController.js
@@ -5,11 +5,11 @@ Ext.define('Ung.apps.brandingmanager.MainController', {
     needRackReload: false,
     originalDefaultLogo: true,
 
-    control: {
-        '#': {
-            afterrender: 'getSettings',
-        }
-    },
+    // control: {
+    //     '#': {
+    //         afterrender: 'getSettings',
+    //     }
+    // },
 
     getSettings: function () {
         var me = this, v = this.getView(), vm = this.getViewModel();

diff --git a/branding-manager/src/com/untangle/app/branding_manager/BrandingManagerApp.java b/branding-manager/src/com/untangle/app/branding_manager/BrandingManagerApp.java
@@ -145,6 +145,22 @@ public BrandingManagerSettings getSettings()
         return copy;
     }
 
+    /**
+     * getSettings gets the current settings in v2 (Generic) format
+     * @return BrandingManagerSettings object
+     */
+    public BrandingManagerSettings getSettingsV2() {
+        return this.getSettings();
+    }
+
+    /**
+     * Set BrandingManagerSettings Settings from generic version payload
+     * @param newSettings BrandingManagerSettings
+     */
+    public void setSettingsV2(final BrandingManagerSettings newSettings) {
+        this.setSettings(newSettings);
+    }
+
     /**
      * Write branding manager settings
      *

diff --git a/captive-portal/hier/usr/share/untangle/web/capture/authpage.html b/captive-portal/hier/usr/share/untangle/web/capture/authpage.html
@@ -5,14 +5,7 @@
 <link href="/images/favicon-captive-portal.png" type="image/png" rel="icon">
 
 <title>$.CompanyName.$ | $.PageTitle.$</title>
-<style type="text/css">
-/* <![CDATA[ */
-@import url(/images/base.css);
-/* ]]> */
-input:-webkit-autofill {
-    -webkit-box-shadow: 0 0 0px 1000px white inset;
-}
-</style>
+<link rel="stylesheet" href="/capture/captive.css">
 
 <script language="javascript">
    var authConfig = { isEnabled : $.GOOGLEAUTH.$ } ;
@@ -28,30 +21,36 @@
 </head>
 <body>
 
-<header>
-    <img src="/images/BrandingLogo.png" style="max-width: 300px; max-height: 48px;"><br/>
-    <h1 style="letter-spacing: normal; color: #CCC; font-weight: bold;">$.PageTitle.$</h1>
-</header>
-
-<div class="form-login" style="padding: 15px;">
-    <h2>$.WelcomeText.$</h2>
-    <p style="id="connect-message" ; text-align: center; font-weight: bold; margin: 20px 0;">$.MessageText.$</p>
-    <form autocomplete="off" method="post" action="/capture/handler.py/authpost">
-        <input name="method" id="method" type="hidden" value="$.method.$" />
-        <input name="nonce" id="nonce" type="hidden" value="$.nonce.$" />
-        <input name="appid" id="appid" type="hidden" value="$.appid.$" />
-        <input name="host" id="host" type="hidden" value="$.host.$" />
-        <input name="uri" id="uri" type="hidden" value="$.uri.$" />
-
-        <p style="text-align: center; color: red; font-size: 11px; margin: 0; line-height: 30px;">$.ProblemText.$</p>
-
-        <input id="username" type="text" name="username" autocapitalize="off" placeholder="$.UserLabel.$"/>
-        <input id="password" type="password" name="password" autocomplete="off" placeholder="$.PassLabel.$"/>
-
-        <button id="submit" type="submit" name="submit" title="Login">Log In</button>
-        <br/><br/>
-    </form>
-    <p style="text-align: center; font-size: 11px; line-height: normal;">$.FooterText.$</p>
+<div class="form-login">
+    <header>
+        <img src="/images/BrandingLogo.png" alt="">
+        <h1>$.PageTitle.$</h1>
+    </header>
+    <div class="cp-content">
+        <h2>$.WelcomeText.$</h2>
+        <p id="connect-message" class="cp-message">$.MessageText.$</p>
+        <form autocomplete="off" method="post" action="/capture/handler.py/authpost">
+            <input name="method" id="method" type="hidden" value="$.method.$" />
+            <input name="nonce" id="nonce" type="hidden" value="$.nonce.$" />
+            <input name="appid" id="appid" type="hidden" value="$.appid.$" />
+            <input name="host" id="host" type="hidden" value="$.host.$" />
+            <input name="uri" id="uri" type="hidden" value="$.uri.$" />
+
+            <p class="cp-error" style="color: red">$.ProblemText.$</p>
+
+            <div class="input-wrapper">
+                <i class="input-icon input-icon-user" aria-hidden="true"></i>
+                <input id="username" type="text" name="username" autocapitalize="off" placeholder="$.UserLabel.$"/>
+            </div>
+            <div class="input-wrapper">
+                <i class="input-icon input-icon-lock" aria-hidden="true"></i>
+                <input id="password" type="password" name="password" autocomplete="off" placeholder="$.PassLabel.$"/>
+            </div>
+
+            <button id="submit" type="submit" name="submit" title="Login">Log In</button>
+        </form>
+        <p>$.FooterText.$</p>
+    </div>
 </div>
 <!--DEBUG-->
 </body>