From 10a931c1f512615988642f18e35d10354443e1b8 Mon Sep 17 00:00:00 2001 From: Shubham Jambhale Date: Fri, 14 Feb 2025 04:03:55 +0530 Subject: [PATCH 1/4] ngfw-15021 Iframe changes for setup wizard with layout --- uvm/servlets/setup/app/view/Main.js | 488 ++++++++++++++-------------- 1 file changed, 247 insertions(+), 241 deletions(-) diff --git a/uvm/servlets/setup/app/view/Main.js b/uvm/servlets/setup/app/view/Main.js index bfef05458d..d5d84e6129 100644 --- a/uvm/servlets/setup/app/view/Main.js +++ b/uvm/servlets/setup/app/view/Main.js @@ -1,267 +1,273 @@ Ext.define('Ung.Setup.Main', { extend: 'Ext.container.Viewport', - + viewModel: { data: { resuming: false, remoteReachable: null } }, - layout: 'center', + layout: 'fit', padding: 20, - items: [{ - xtype: 'container', - itemId: 'intro', - baseCls: 'intro', - padding: '0 0 300 0', - layout: { - type: 'vbox', - align: 'center' - }, - items: [{ - xtype: 'component', - style: { textAlign: 'center' }, - html: '

' + Ext.String.format('Thanks for choosing {0}!'.t(), rpc.oemShortName) + '

' - }] - }], + // items: [{ + // xtype: 'container', + // itemId: 'intro', + // baseCls: 'intro', + // padding: '0 0 300 0', + // layout: { + // type: 'vbox', + // align: 'center' + // }, + // items: [{ + // xtype: 'component', + // style: { textAlign: 'center' }, + // html: '

' + Ext.String.format('Thanks for choosing {0}!'.t(), rpc.oemShortName) + '

' + // }] + // }], + // listeners: { + // afterrender: 'onAfterRender' + // }, listeners: { - afterrender: 'onAfterRender' - }, - controller: { + afterrender: function (view) { + view.setHtml(''); + }, + } + + // controller: { - onAfterRender: function () { - var me = this, - view = me.getView(), - vm = me.getViewModel(), - items = []; + // onAfterRender: function () { + // var me = this, + // view = me.getView(), + // vm = me.getViewModel(), + // items = []; - // Configure main based on remote. - if(!rpc.remote){ - // Local Setup Wizard configuration - items.push({ - xtype: 'component', - margin: '0 0 20 0', - style: { textAlign: 'center' }, - html: Ext.String.format('A wizard will guide you through the initial setup and configuration of the {0}.'.t(), rpc.oemProductName) - }); - items.push({ - xtype: 'container', - layout: { - type: 'hbox', - align: 'center' - }, - defaults: { - xtype: 'button', - scale: 'medium', - focusable: false, - margin: 5 - }, - items: [{ - iconCls: 'fa fa-play fa-lg', - text: 'Resume Setup Wizard'.t(), - hidden: true, - bind: { - hidden: '{!resuming}' - }, - handler: 'resumeWizard' - }, { - bind: { - iconCls: 'fa {!resuming ? "fa-play" : "fa-refresh" } fa-lg', - text: '{!resuming ? "Run Setup Wizard" : "Restart"}'.t(), - }, - handler: 'resetWizard' - }] - }); - }else{ - items.push({ - xtype: 'component', - margin: '0 0 20 0', - html: '' + 'Checking Internet connectivity'.t(), - hidden: false, - bind: { - hidden: '{remoteReachable != null}' - } - },{ - xtype: 'component', - margin: '0 0 20 0', - style: { textAlign: 'center' }, - html: 'To continue, you must log in using your ETM Dashboard account. If you do not have one, you can create a free account.'.t(), - hidden: true, - bind: { - hidden: '{remoteReachable == false || remoteReachable == null}' - } - },{ - xtype: 'container', - hidden: true, - bind: { - hidden: '{remoteReachable == false || remoteReachable == null}' - }, - items: [{ - xtype: 'button', - width: 332, - margin: '0 0 10 0', - text: '
' + 'Log In'.t() + '
', - baseCls: 'command-center-login-button', - handler: function(){ - window.location = rpc.remoteUrl + "appliances/add/" + rpc.serverUID; - } - },{ - xtype: 'button', - width: 332, - text: '
' + 'Create Account'.t() + '
', - baseCls: 'command-center-create-button', - handler: function(){ - window.location = rpc.remoteUrl + "/login/create-account/add-appliance/" + rpc.serverUID; - } - }] - },{ - xtype: 'component', - margin: '0 0 20 0', - style: { textAlign: 'center' }, - html: '

' + 'To continue, you must connect to ETM Dashboard which is currently unreachable from this device.'.t() + '
' + - '

' + 'You must configure Internet connectivity to ETM Dashboard to continue.'.t() + '
', - hidden: true, - bind: { - hidden: '{remoteReachable == true || remoteReachable == null}' - } - },{ - xtype: 'container', - layout: { - type: 'hbox', - align: 'center' - }, - defaults: { - xtype: 'button', - scale: 'medium', - focusable: false, - margin: 5 - }, - hidden: true, - bind: { - hidden: '{remoteReachable == true || remoteReachable == null}' - }, - items: [{ - iconCls: 'fa fa-play fa-lg', - text: 'Configure Internet'.t(), - handler: 'resetWizard' - }] - }); - } - view.down('[itemId=intro]').add(items); + // // Configure main based on remote. + // if(!rpc.remote){ + // // Local Setup Wizard configuration + // items.push({ + // xtype: 'component', + // margin: '0 0 20 0', + // style: { textAlign: 'center' }, + // html: Ext.String.format('A wizard will guide you through the initial setup and configuration of the {0}.'.t(), rpc.oemProductName) + // }); + // items.push({ + // xtype: 'container', + // layout: { + // type: 'hbox', + // align: 'center' + // }, + // defaults: { + // xtype: 'button', + // scale: 'medium', + // focusable: false, + // margin: 5 + // }, + // items: [{ + // iconCls: 'fa fa-play fa-lg', + // text: 'Resume Setup Wizard'.t(), + // hidden: true, + // bind: { + // hidden: '{!resuming}' + // }, + // handler: 'resumeWizard' + // }, { + // bind: { + // iconCls: 'fa {!resuming ? "fa-play" : "fa-refresh" } fa-lg', + // text: '{!resuming ? "Run Setup Wizard" : "Restart"}'.t(), + // }, + // handler: 'resetWizard' + // }] + // }); + // }else{ + // items.push({ + // xtype: 'component', + // margin: '0 0 20 0', + // html: '' + 'Checking Internet connectivity'.t(), + // hidden: false, + // bind: { + // hidden: '{remoteReachable != null}' + // } + // },{ + // xtype: 'component', + // margin: '0 0 20 0', + // style: { textAlign: 'center' }, + // html: 'To continue, you must log in using your ETM Dashboard account. If you do not have one, you can create a free account.'.t(), + // hidden: true, + // bind: { + // hidden: '{remoteReachable == false || remoteReachable == null}' + // } + // },{ + // xtype: 'container', + // hidden: true, + // bind: { + // hidden: '{remoteReachable == false || remoteReachable == null}' + // }, + // items: [{ + // xtype: 'button', + // width: 332, + // margin: '0 0 10 0', + // text: '

' + 'Log In'.t() + '
', + // baseCls: 'command-center-login-button', + // handler: function(){ + // window.location = rpc.remoteUrl + "appliances/add/" + rpc.serverUID; + // } + // },{ + // xtype: 'button', + // width: 332, + // text: '
' + 'Create Account'.t() + '
', + // baseCls: 'command-center-create-button', + // handler: function(){ + // window.location = rpc.remoteUrl + "/login/create-account/add-appliance/" + rpc.serverUID; + // } + // }] + // },{ + // xtype: 'component', + // margin: '0 0 20 0', + // style: { textAlign: 'center' }, + // html: '

' + 'To continue, you must connect to ETM Dashboard which is currently unreachable from this device.'.t() + '
' + + // '

' + 'You must configure Internet connectivity to ETM Dashboard to continue.'.t() + '
', + // hidden: true, + // bind: { + // hidden: '{remoteReachable == true || remoteReachable == null}' + // } + // },{ + // xtype: 'container', + // layout: { + // type: 'hbox', + // align: 'center' + // }, + // defaults: { + // xtype: 'button', + // scale: 'medium', + // focusable: false, + // margin: 5 + // }, + // hidden: true, + // bind: { + // hidden: '{remoteReachable == true || remoteReachable == null}' + // }, + // items: [{ + // iconCls: 'fa fa-play fa-lg', + // text: 'Configure Internet'.t(), + // handler: 'resetWizard' + // }] + // }); + // } + // view.down('[itemId=intro]').add(items); - // fadein - Ext.defer(function () { - me.getView().down('container').addCls('fadein'); - }, 100); + // // fadein + // Ext.defer(function () { + // me.getView().down('container').addCls('fadein'); + // }, 100); - Ext.defer(function () { - var remoteReachable = rpc.setup.getRemoteReachable(); - vm.set("remoteReachable", remoteReachable); - }, 500); + // Ext.defer(function () { + // var remoteReachable = rpc.setup.getRemoteReachable(); + // vm.set("remoteReachable", remoteReachable); + // }, 500); - // check if resuming - if (!rpc.wizardSettings.wizardComplete && rpc.wizardSettings.completedStep != null) { - vm.set('resuming', true); - } - }, + // // check if resuming + // if (!rpc.wizardSettings.wizardComplete && rpc.wizardSettings.completedStep != null) { + // vm.set('resuming', true); + // } + // }, - resetWizard: function() { - var me = this; - if(rpc.remote && !rpc.remoteReachable){ - if(Util.setRpcJsonrpc("admin") == true){ - me.resetWizardContinue(); - }else{ - Util.authenticate("passwd", function (isNonDefaultPassword) { - if (isNonDefaultPassword) { - var msg = Ext.create('Ext.window.MessageBox'); - msg.textField.inputType = 'password'; - msg.prompt( - 'Authentication required'.t(), - 'Please enter admin password'.t(), function(btn, p) { - if (btn === 'ok') { - Util.authenticate(p, function (flag) { - me.resetWizardContinue(); - }); - } - } - ); - } else { - me.resetWizardContinue(); - } - }); - } - }else{ - me.resetWizardContinue(); - } - }, + // resetWizard: function() { + // var me = this; + // if(rpc.remote && !rpc.remoteReachable){ + // if(Util.setRpcJsonrpc("admin") == true){ + // me.resetWizardContinue(); + // }else{ + // Util.authenticate("passwd", function (isNonDefaultPassword) { + // if (isNonDefaultPassword) { + // var msg = Ext.create('Ext.window.MessageBox'); + // msg.textField.inputType = 'password'; + // msg.prompt( + // 'Authentication required'.t(), + // 'Please enter admin password'.t(), function(btn, p) { + // if (btn === 'ok') { + // Util.authenticate(p, function (flag) { + // me.resetWizardContinue(); + // }); + // } + // } + // ); + // } else { + // me.resetWizardContinue(); + // } + // }); + // } + // }else{ + // me.resetWizardContinue(); + // } + // }, - resetWizardContinue: function(){ - var me = this, vm = me.getViewModel(); + // resetWizardContinue: function(){ + // var me = this, vm = me.getViewModel(); - vm.set('resuming', false); + // vm.set('resuming', false); - rpc.wizardSettings.completedStep = null; - rpc.wizardSettings.wizardComplete = false; - me.openSetup(); + // rpc.wizardSettings.completedStep = null; + // rpc.wizardSettings.wizardComplete = false; + // me.openSetup(); - }, + // }, - resumeWizard: function () { - var me = this, msg = Ext.create('Ext.window.MessageBox'); - msg.textField.inputType = 'password'; + // resumeWizard: function () { + // var me = this, msg = Ext.create('Ext.window.MessageBox'); + // msg.textField.inputType = 'password'; - msg.prompt( - 'Authentication required'.t(), - 'Please enter admin password'.t(), function(btn, p) { - if (btn === 'ok') { - Util.authenticate(p, function () { - me.openSetup(); - }); - } - } - ); - }, + // msg.prompt( + // 'Authentication required'.t(), + // 'Please enter admin password'.t(), function(btn, p) { + // if (btn === 'ok') { + // Util.authenticate(p, function () { + // me.openSetup(); + // }); + // } + // } + // ); + // }, - openSetup: function () { - var me = this; - me.getView().removeAll(); - me.getView().setStyle({ - background: '#F5F5F5' - }); - me.getView().add({ - xtype: 'container', - width: '100%', - layout: { - type: 'hbox', - align: 'stretch' - }, - items: [{ - xtype: 'component', - plugins: 'responsive', - responsiveConfig: { - 'width >= 840': { flex: 1 }, - 'width < 840': { flex: 0 } - } - }, { - xtype: 'setupwizard', - height: 600, - flex: 1, - plugins: 'responsive', - responsiveConfig: { - 'width >= 840': { width: 800, flex: 0 }, - 'width < 840': { flex: 1 } - }, - }, { - xtype: 'component', - plugins: 'responsive', - responsiveConfig: { - 'width >= 840': { flex: 1 }, - 'width < 840': { flex: 0 } - } - }] + // openSetup: function () { + // var me = this; + // me.getView().removeAll(); + // me.getView().setStyle({ + // background: '#F5F5F5' + // }); + // me.getView().add({ + // xtype: 'container', + // width: '100%', + // layout: { + // type: 'hbox', + // align: 'stretch' + // }, + // items: [{ + // xtype: 'component', + // plugins: 'responsive', + // responsiveConfig: { + // 'width >= 840': { flex: 1 }, + // 'width < 840': { flex: 0 } + // } + // }, { + // xtype: 'setupwizard', + // height: 600, + // flex: 1, + // plugins: 'responsive', + // responsiveConfig: { + // 'width >= 840': { width: 800, flex: 0 }, + // 'width < 840': { flex: 1 } + // }, + // }, { + // xtype: 'component', + // plugins: 'responsive', + // responsiveConfig: { + // 'width >= 840': { flex: 1 }, + // 'width < 840': { flex: 0 } + // } + // }] - }); - } - } + // }); + // } + // } }); From ae11b99b8698d4e53ae11c257a3a4cad06ed0a40 Mon Sep 17 00:00:00 2001 From: Shubham Jambhale Date: Fri, 14 Feb 2025 17:30:19 +0530 Subject: [PATCH 2/4] vue.conf file add and Debian changes --- debian/control | 1 + uvm/servlets/setup/app/view/Util.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/debian/control b/debian/control index 5262df9148..be13007d5a 100644 --- a/debian/control +++ b/debian/control @@ -407,6 +407,7 @@ Depends: ${misc:Depends}, untangle-sync-settings, untangle-python3-runtests, untangle-python3-support-diagnostics, + untangle-vue-ui, unzip, zip Description: UVM Platform diff --git a/uvm/servlets/setup/app/view/Util.js b/uvm/servlets/setup/app/view/Util.js index 15ad65cd57..d3f513f97d 100644 --- a/uvm/servlets/setup/app/view/Util.js +++ b/uvm/servlets/setup/app/view/Util.js @@ -158,9 +158,9 @@ Ext.define('Ung.Setup.Util', { } if (typeof exception === 'string') { - Util.showWarningMessage(exception, '', Util.goToStartPage); + this.showWarningMessage(exception, '', this.goToStartPage); } else { - Util.showWarningMessage(exception.message, details, Util.goToStartPage); + this.showWarningMessage(exception.message, details, this.goToStartPage); } }, From c3fe2de9134721ab4abed300b74dbcbb6115e801 Mon Sep 17 00:00:00 2001 From: Mayur Dhande Date: Fri, 14 Feb 2025 18:45:52 +0530 Subject: [PATCH 3/4] NGFW-15021 added vue.conf file --- debian/control | 2 +- .../usr/share/untangle/conf/apache2/conf.d/vue.conf | 13 +++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 uvm/hier/usr/share/untangle/conf/apache2/conf.d/vue.conf diff --git a/debian/control b/debian/control index be13007d5a..8eb456d40c 100644 --- a/debian/control +++ b/debian/control @@ -407,7 +407,7 @@ Depends: ${misc:Depends}, untangle-sync-settings, untangle-python3-runtests, untangle-python3-support-diagnostics, - untangle-vue-ui, + untangle-vue-ui, unzip, zip Description: UVM Platform diff --git a/uvm/hier/usr/share/untangle/conf/apache2/conf.d/vue.conf b/uvm/hier/usr/share/untangle/conf/apache2/conf.d/vue.conf new file mode 100644 index 0000000000..ad2109985e --- /dev/null +++ b/uvm/hier/usr/share/untangle/conf/apache2/conf.d/vue.conf @@ -0,0 +1,13 @@ +# Vue app/components + +Alias /vue /usr/share/untangle/web/vue + + Require all granted + Satisfy Any + + RewriteEngine On + RewriteBase /vue + RewriteCond %{REQUEST_FILENAME} !-d + RewriteCond %{REQUEST_FILENAME} !-f + RewriteRule . index.html [L] + From c6f5bcde9097a0547e438a4b34ec3c2ed7483c35 Mon Sep 17 00:00:00 2001 From: Mayur Dhande Date: Mon, 17 Feb 2025 17:37:47 +0530 Subject: [PATCH 4/4] NGFW-15021 removed commented code --- uvm/servlets/setup/app/view/Main.js | 255 ---------------------------- 1 file changed, 255 deletions(-) diff --git a/uvm/servlets/setup/app/view/Main.js b/uvm/servlets/setup/app/view/Main.js index d5d84e6129..24b7180f4f 100644 --- a/uvm/servlets/setup/app/view/Main.js +++ b/uvm/servlets/setup/app/view/Main.js @@ -9,265 +9,10 @@ Ext.define('Ung.Setup.Main', { }, layout: 'fit', padding: 20, - // items: [{ - // xtype: 'container', - // itemId: 'intro', - // baseCls: 'intro', - // padding: '0 0 300 0', - // layout: { - // type: 'vbox', - // align: 'center' - // }, - // items: [{ - // xtype: 'component', - // style: { textAlign: 'center' }, - // html: '

' + Ext.String.format('Thanks for choosing {0}!'.t(), rpc.oemShortName) + '

' - // }] - // }], - // listeners: { - // afterrender: 'onAfterRender' - // }, listeners: { afterrender: function (view) { view.setHtml(''); }, } - - // controller: { - - // onAfterRender: function () { - // var me = this, - // view = me.getView(), - // vm = me.getViewModel(), - // items = []; - - // // Configure main based on remote. - // if(!rpc.remote){ - // // Local Setup Wizard configuration - // items.push({ - // xtype: 'component', - // margin: '0 0 20 0', - // style: { textAlign: 'center' }, - // html: Ext.String.format('A wizard will guide you through the initial setup and configuration of the {0}.'.t(), rpc.oemProductName) - // }); - // items.push({ - // xtype: 'container', - // layout: { - // type: 'hbox', - // align: 'center' - // }, - // defaults: { - // xtype: 'button', - // scale: 'medium', - // focusable: false, - // margin: 5 - // }, - // items: [{ - // iconCls: 'fa fa-play fa-lg', - // text: 'Resume Setup Wizard'.t(), - // hidden: true, - // bind: { - // hidden: '{!resuming}' - // }, - // handler: 'resumeWizard' - // }, { - // bind: { - // iconCls: 'fa {!resuming ? "fa-play" : "fa-refresh" } fa-lg', - // text: '{!resuming ? "Run Setup Wizard" : "Restart"}'.t(), - // }, - // handler: 'resetWizard' - // }] - // }); - // }else{ - // items.push({ - // xtype: 'component', - // margin: '0 0 20 0', - // html: '' + 'Checking Internet connectivity'.t(), - // hidden: false, - // bind: { - // hidden: '{remoteReachable != null}' - // } - // },{ - // xtype: 'component', - // margin: '0 0 20 0', - // style: { textAlign: 'center' }, - // html: 'To continue, you must log in using your ETM Dashboard account. If you do not have one, you can create a free account.'.t(), - // hidden: true, - // bind: { - // hidden: '{remoteReachable == false || remoteReachable == null}' - // } - // },{ - // xtype: 'container', - // hidden: true, - // bind: { - // hidden: '{remoteReachable == false || remoteReachable == null}' - // }, - // items: [{ - // xtype: 'button', - // width: 332, - // margin: '0 0 10 0', - // text: '
' + 'Log In'.t() + '
', - // baseCls: 'command-center-login-button', - // handler: function(){ - // window.location = rpc.remoteUrl + "appliances/add/" + rpc.serverUID; - // } - // },{ - // xtype: 'button', - // width: 332, - // text: '
' + 'Create Account'.t() + '
', - // baseCls: 'command-center-create-button', - // handler: function(){ - // window.location = rpc.remoteUrl + "/login/create-account/add-appliance/" + rpc.serverUID; - // } - // }] - // },{ - // xtype: 'component', - // margin: '0 0 20 0', - // style: { textAlign: 'center' }, - // html: '

' + 'To continue, you must connect to ETM Dashboard which is currently unreachable from this device.'.t() + '
' + - // '

' + 'You must configure Internet connectivity to ETM Dashboard to continue.'.t() + '
', - // hidden: true, - // bind: { - // hidden: '{remoteReachable == true || remoteReachable == null}' - // } - // },{ - // xtype: 'container', - // layout: { - // type: 'hbox', - // align: 'center' - // }, - // defaults: { - // xtype: 'button', - // scale: 'medium', - // focusable: false, - // margin: 5 - // }, - // hidden: true, - // bind: { - // hidden: '{remoteReachable == true || remoteReachable == null}' - // }, - // items: [{ - // iconCls: 'fa fa-play fa-lg', - // text: 'Configure Internet'.t(), - // handler: 'resetWizard' - // }] - // }); - // } - // view.down('[itemId=intro]').add(items); - - // // fadein - // Ext.defer(function () { - // me.getView().down('container').addCls('fadein'); - // }, 100); - - // Ext.defer(function () { - // var remoteReachable = rpc.setup.getRemoteReachable(); - // vm.set("remoteReachable", remoteReachable); - // }, 500); - - // // check if resuming - // if (!rpc.wizardSettings.wizardComplete && rpc.wizardSettings.completedStep != null) { - // vm.set('resuming', true); - // } - // }, - - // resetWizard: function() { - // var me = this; - // if(rpc.remote && !rpc.remoteReachable){ - // if(Util.setRpcJsonrpc("admin") == true){ - // me.resetWizardContinue(); - // }else{ - // Util.authenticate("passwd", function (isNonDefaultPassword) { - // if (isNonDefaultPassword) { - // var msg = Ext.create('Ext.window.MessageBox'); - // msg.textField.inputType = 'password'; - // msg.prompt( - // 'Authentication required'.t(), - // 'Please enter admin password'.t(), function(btn, p) { - // if (btn === 'ok') { - // Util.authenticate(p, function (flag) { - // me.resetWizardContinue(); - // }); - // } - // } - // ); - // } else { - // me.resetWizardContinue(); - // } - // }); - // } - // }else{ - // me.resetWizardContinue(); - // } - // }, - - // resetWizardContinue: function(){ - // var me = this, vm = me.getViewModel(); - - // vm.set('resuming', false); - - // rpc.wizardSettings.completedStep = null; - // rpc.wizardSettings.wizardComplete = false; - // me.openSetup(); - - // }, - - // resumeWizard: function () { - // var me = this, msg = Ext.create('Ext.window.MessageBox'); - // msg.textField.inputType = 'password'; - - // msg.prompt( - // 'Authentication required'.t(), - // 'Please enter admin password'.t(), function(btn, p) { - // if (btn === 'ok') { - // Util.authenticate(p, function () { - // me.openSetup(); - // }); - // } - // } - // ); - // }, - - // openSetup: function () { - // var me = this; - // me.getView().removeAll(); - // me.getView().setStyle({ - // background: '#F5F5F5' - // }); - // me.getView().add({ - // xtype: 'container', - // width: '100%', - // layout: { - // type: 'hbox', - // align: 'stretch' - // }, - // items: [{ - // xtype: 'component', - // plugins: 'responsive', - // responsiveConfig: { - // 'width >= 840': { flex: 1 }, - // 'width < 840': { flex: 0 } - // } - // }, { - // xtype: 'setupwizard', - // height: 600, - // flex: 1, - // plugins: 'responsive', - // responsiveConfig: { - // 'width >= 840': { width: 800, flex: 0 }, - // 'width < 840': { flex: 1 } - // }, - // }, { - // xtype: 'component', - // plugins: 'responsive', - // responsiveConfig: { - // 'width >= 840': { flex: 1 }, - // 'width < 840': { flex: 0 } - // } - // }] - - // }); - // } - // } });