Migrate password fields to .form-control (#2966)

web/css/src/themes/dark.css

@@ -854,8 +854,6 @@ a.vst-text:active b {
 
 .additional-control.remove-ns {}
 
-.hide-password {}
-
 .toggle-psw-visibility-icon {}
 
 .show-passwords-enabled-action {}

web/css/src/themes/default.css

@@ -2538,11 +2538,12 @@ a.vst-text:active b {
   display: none;
 }
 
-.hide-password {
+.toggle-password {
   color: #aaa;
-  margin-left: -36px;
-  padding-left: 3px;
   z-index: 1;
+  position: absolute;
+  top: 9px;
+  right: 12px;
 }
 
 .toggle-psw-visibility-icon {
@@ -3829,35 +3830,33 @@ li[aria-expanded="true"] a {
   }
 }
 
-meter {
-  /* Reset the default appearance */
+.password-meter {
   appearance: none;
-  margin: 0 auto 1em;
-  width: 373px;
+  display: block;
+  width: 100%;
   background-color: #e7e7e7;
   height: 3px;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  margin-left: 3px;
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
   box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
 }
 
-meter[value="1"] { background: red; }
-meter[value="2"] { background: orange; }
-meter[value="3"] { background: yellow; }
-meter[value="4"] { background: green; }
+.password-meter[value="1"] { background: red; }
+.password-meter[value="2"] { background: orange; }
+.password-meter[value="3"] { background: yellow; }
+.password-meter[value="4"] { background: green; }
 
 /* Webkit based browsers */
-meter[value="1"]::-webkit-meter-optimum-value { background: red; }
-meter[value="2"]::-webkit-meter-optimum-value { background: orange; }
-meter[value="3"]::-webkit-meter-optimum-value { background: yellow; }
-meter[value="4"]::-webkit-meter-optimum-value { background: green; }
+.password-meter[value="1"]::-webkit-meter-optimum-value { background: red; }
+.password-meter[value="2"]::-webkit-meter-optimum-value { background: orange; }
+.password-meter[value="3"]::-webkit-meter-optimum-value { background: yellow; }
+.password-meter[value="4"]::-webkit-meter-optimum-value { background: green; }
 
 /* Gecko based browsers */
-meter[value="1"]::-moz-meter-bar { background: red; }
-meter[value="2"]::-moz-meter-bar { background: orange; }
-meter[value="3"]::-moz-meter-bar { background: yellow; }
-meter[value="4"]::-moz-meter-bar { background: green; }
+.password-meter[value="1"]::-moz-meter-bar { background: red; }
+.password-meter[value="2"]::-moz-meter-bar { background: orange; }
+.password-meter[value="3"]::-moz-meter-bar { background: yellow; }
+.password-meter[value="4"]::-moz-meter-bar { background: green; }
 
 /* Global utilities
    ========================================================================== */
@@ -3900,6 +3899,10 @@ meter[value="4"]::-moz-meter-bar { background: green; }
   margin-left: 10px !important;
 }
 
+.u-mb10 {
+  margin-bottom: 10px !important;
+}
+
 .u-mb20 {
   margin-bottom: 20px !important;
 }
@@ -3924,6 +3927,10 @@ meter[value="4"]::-moz-meter-bar { background: green; }
   padding-left: 50px !important;
 }
 
+.u-pos-relative {
+  position: relative !important;
+}
+
 .u-input-width {
   width: 380px !important;
 }

web/css/src/themes/vestia.css

@@ -496,11 +496,9 @@ a.vst-text:hover b,
   border-radius: 4px !important;
 }
 
-meter {
-  width: 379px !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  margin-left: 0 !important;
+.password-meter {
+  border-radius: 0;
+  box-shadow: none;
 }
 
 .vst-input,

web/js/events.js

@@ -166,7 +166,7 @@ VE.helpers.warn = function(msg) {
 }
 
 VE.helpers.extendPasswordFields = function() {
-    var references = ['.password'];
+    var references = ['.js-password-input'];
 
     $(document).ready(function() {
         $(references).each(function(i, ref) {
@@ -184,7 +184,7 @@ VE.helpers.initAdditionalPasswordFieldElements = function(ref) {
     $(ref).prop('autocomplete', 'off');
 
     var enabled_html = enabled ? '' : 'show-passwords-enabled-action';
-    var html = '<span class="hide-password"><i class="toggle-psw-visibility-icon fas fa-eye-slash ' + enabled_html + '" onClick="VE.helpers.toggleHiddenPasswordText(\'' + ref + '\', this)"></i></span>';
+    var html = '<span class="toggle-password"><i class="toggle-psw-visibility-icon fas fa-eye-slash ' + enabled_html + '" onClick="VE.helpers.toggleHiddenPasswordText(\'' + ref + '\', this)"></i></span>';
     $(ref).after(html);
 }
 

web/js/pages/add_db.js

@@ -4,7 +4,7 @@
 App.Actions.DB.update_db_username_hint = function(elm, hint) {
     if (hint.trim() == '') {
         $(elm).parent().find('.hint').text('');
-    } 
+    }
     $(elm).parent().find('.hint').text(GLOBAL.DB_USER_PREFIX + hint);
 }
 
@@ -14,7 +14,7 @@ App.Actions.DB.update_db_username_hint = function(elm, hint) {
 App.Actions.DB.update_db_databasename_hint = function(elm, hint) {
     if (hint.trim() == '') {
         $(elm).parent().find('.hint').text('');
-    } 
+    }
     $(elm).parent().find('.hint').text(GLOBAL.DB_DBNAME_PREFIX + hint);
 }
 
@@ -26,7 +26,7 @@ App.Listeners.DB.keypress_db_username = function() {
     if (current_val.trim() != '') {
         App.Actions.DB.update_db_username_hint(ref, current_val);
     }
-    
+
     ref.bind('keypress input', function(evt) {
         clearTimeout(window.frp_usr_tmt);
         window.frp_usr_tmt = setTimeout(function() {
@@ -44,7 +44,7 @@ App.Listeners.DB.keypress_db_databasename = function() {
     if (current_val.trim() != '') {
         App.Actions.DB.update_db_databasename_hint(ref, current_val);
     }
-    
+
     ref.bind('keypress input', function(evt) {
         clearTimeout(window.frp_dbn_tmt);
         window.frp_dbn_tmt = setTimeout(function() {
@@ -54,19 +54,19 @@ App.Listeners.DB.keypress_db_databasename = function() {
     });
 }
 
-App.Actions.DB.update_v_password = function (){
+App.Actions.DB.update_password_meter = function (){
     var password = $('input[name="v_password"]').val();
     var min_small = new RegExp(/^(?=.*[a-z]).+$/);
     var min_cap = new RegExp(/^(?=.*[A-Z]).+$/);
-    var min_num = new RegExp(/^(?=.*\d).+$/); 
+    var min_num = new RegExp(/^(?=.*\d).+$/);
     var min_length = 8;
     var score = 0;
-    
+
     if(password.length >= min_length) { score = score + 1; }
     if(min_small.test(password)) { score = score + 1;}
     if(min_cap.test(password)) { score = score + 1;}
     if(min_num.test(password)) { score = score+ 1; }
-    $('#meter').val(score);   
+    $('.password-meter').val(score);
 }
 
 App.Listeners.DB.keypress_v_password = function() {
@@ -75,7 +75,7 @@ App.Listeners.DB.keypress_v_password = function() {
         clearTimeout(window.frp_usr_tmt);
         window.frp_usr_tmt = setTimeout(function() {
             var elm = $(evt.target);
-            App.Actions.DB.update_v_password(elm, $(elm).val());
+            App.Actions.DB.update_password_meter(elm, $(elm).val());
         }, 100);
     });
 }
@@ -88,7 +88,7 @@ App.Listeners.DB.keypress_v_password();
 App.Listeners.DB.keypress_db_username();
 App.Listeners.DB.keypress_db_databasename();
 
-randomString = function(min_length = 16) {    
-        $('input[name=v_password]').val(randomString2(min_length));
-        App.Actions.DB.update_v_password();
+applyRandomString = function(min_length = 16) {
+    $('input[name=v_password]').val(randomString2(min_length));
+    App.Actions.DB.update_password_meter();
 }

web/js/pages/add_mail_acc.js

@@ -73,7 +73,7 @@ $('#v_blackhole').on('click', function(evt){
        $('#id_fwd_for').hide();
     }else{
        $('#v_fwd').prop('disabled', false);
-       $('#id_fwd_for').show();        
+       $('#id_fwd_for').show();
     }
 });
 $('form[name="v_quota"]').on('submit', function(evt) {
@@ -85,19 +85,19 @@ $('form[name="v_quota"]').on('submit', function(evt) {
     });
 });
 
-App.Actions.MAIL_ACC.update_v_password = function (){
+App.Actions.MAIL_ACC.update_password_meter = function (){
     var password = $('input[name="v_password"]').val();
     var min_small = new RegExp(/^(?=.*[a-z]).+$/);
     var min_cap = new RegExp(/^(?=.*[A-Z]).+$/);
-    var min_num = new RegExp(/^(?=.*\d).+$/); 
+    var min_num = new RegExp(/^(?=.*\d).+$/);
     var min_length = 8;
     var score = 0;
-    
+
     if(password.length >= min_length) { score = score + 1; }
     if(min_small.test(password)) { score = score + 1;}
     if(min_cap.test(password)) { score = score + 1;}
     if(min_num.test(password)) { score = score+ 1; }
-    $('#meter').val(score);   
+    $('.password-meter').val(score);
 }
 
 App.Listeners.MAIL_ACC.keypress_v_password = function() {
@@ -106,7 +106,7 @@ App.Listeners.MAIL_ACC.keypress_v_password = function() {
         clearTimeout(window.frp_usr_tmt);
         window.frp_usr_tmt = setTimeout(function() {
             var elm = $(evt.target);
-            App.Actions.MAIL_ACC.update_v_password(elm, $(elm).val());
+            App.Actions.MAIL_ACC.update_password_meter(elm, $(elm).val());
         }, 100);
     });
 }
@@ -114,14 +114,14 @@ App.Listeners.MAIL_ACC.keypress_v_password = function() {
 App.Listeners.MAIL_ACC.keypress_v_password();
 
 
-randomString = function(min_length = 16) {
-    var randomstring = randomString2(min_length);
-        $('input[name=v_password]').val(randomstring);
+applyRandomString = function(min_length = 16) {
+    var randomString = randomString2(min_length);
+        $('input[name=v_password]').val(randomString);
         if($('input[name=v_password]').attr('type') == 'text')
-            $('#v_password').text(randomstring);
+            $('#v_password').text(randomString);
         else
-            $('#v_password').text(Array(randomstring.length+1).join('*'));      
-        App.Actions.MAIL_ACC.update_v_password();
+            $('#v_password').text(Array(randomString.length+1).join('*'));
+        App.Actions.MAIL_ACC.update_password_meter();
         generate_mail_credentials();
 }
 

web/js/pages/add_user.js

@@ -10,28 +10,28 @@ $(function() {
         }else{
             document.getElementById('v_notify').value = '';
         }
-    });    
+    });
 });
 
 
-randomString = function (min_length = 16) {
+applyRandomString = function (min_length = 16) {
     $("input[name=v_password]").val(randomString2(min_length));
-    App.Actions.WEB.update_v_password();
+    App.Actions.WEB.update_password_meter();
 };
 
-App.Actions.WEB.update_v_password = function (){
+App.Actions.WEB.update_password_meter = function (){
     var password = $('input[name="v_password"]').val();
     var min_small = new RegExp(/^(?=.*[a-z]).+$/);
     var min_cap = new RegExp(/^(?=.*[A-Z]).+$/);
-    var min_num = new RegExp(/^(?=.*\d).+$/); 
+    var min_num = new RegExp(/^(?=.*\d).+$/);
     var min_length = 8;
     var score = 0;
-    
+
     if(password.length >= min_length) { score = score + 1; }
     if(min_small.test(password)) { score = score + 1;}
     if(min_cap.test(password)) { score = score + 1;}
     if(min_num.test(password)) { score = score+ 1; }
-    $('#meter').val(score);   
+    $('.password-meter').val(score);
 }
 
 App.Listeners.WEB.keypress_v_password = function() {
@@ -40,9 +40,9 @@ App.Listeners.WEB.keypress_v_password = function() {
         clearTimeout(window.frp_usr_tmt);
         window.frp_usr_tmt = setTimeout(function() {
             var elm = $(evt.target);
-            App.Actions.WEB.update_v_password(elm, $(elm).val());
+            App.Actions.WEB.update_password_meter(elm, $(elm).val());
         }, 100);
     });
 }
 
-App.Listeners.WEB.keypress_v_password();
+App.Listeners.WEB.keypress_v_password();

web/js/pages/edit_db.js

@@ -4,7 +4,7 @@
 App.Actions.DB.update_db_username_hint = function(elm, hint) {
     if (hint.trim() == '') {
         $(elm).parent().find('.hint').text('');
-    } 
+    }
     $(elm).parent().find('.hint').text(GLOBAL.DB_USER_PREFIX + hint);
 }
 
@@ -14,7 +14,7 @@ App.Actions.DB.update_db_username_hint = function(elm, hint) {
 App.Actions.DB.update_db_databasename_hint = function(elm, hint) {
     if (hint.trim() == '') {
         $(elm).parent().find('.hint').text('');
-    } 
+    }
     $(elm).parent().find('.hint').text(GLOBAL.DB_DBNAME_PREFIX + hint);
 }
 
@@ -25,8 +25,8 @@ App.Listeners.DB.keypress_db_username = function() {
     var current_val = ref.val();
     if (current_val.trim() != '') {
         App.Actions.DB.update_db_username_hint(ref, current_val);
-    }    
-    
+    }
+
     ref.bind('keypress input', function(evt) {
         clearTimeout(window.frp_usr_tmt);
         window.frp_usr_tmt = setTimeout(function() {
@@ -47,8 +47,8 @@ App.Listeners.DB.keypress_db_databasename = function() {
     }
     if (current_val.trim() != '') {
         App.Actions.DB.update_db_username_hint(ref, current_val);
-    }   
-    
+    }
+
     ref.bind('keypress input', function(evt) {
         clearTimeout(window.frp_dbn_tmt);
         window.frp_dbn_tmt = setTimeout(function() {
@@ -58,19 +58,19 @@ App.Listeners.DB.keypress_db_databasename = function() {
     });
 }
 
-App.Actions.DB.update_v_password = function (){
+App.Actions.DB.update_password_meter = function (){
     var password = $('input[name="v_password"]').val();
     var min_small = new RegExp(/^(?=.*[a-z]).+$/);
     var min_cap = new RegExp(/^(?=.*[A-Z]).+$/);
-    var min_num = new RegExp(/^(?=.*\d).+$/); 
+    var min_num = new RegExp(/^(?=.*\d).+$/);
     var min_length = 8;
     var score = 0;
-    
+
     if(password.length >= min_length) { score = score + 1; }
     if(min_small.test(password)) { score = score + 1;}
     if(min_cap.test(password)) { score = score + 1;}
     if(min_num.test(password)) { score = score+ 1; }
-    $('#meter').val(score);   
+    $('.password-meter').val(score);
 }
 
 App.Listeners.DB.keypress_v_password = function() {
@@ -79,7 +79,7 @@ App.Listeners.DB.keypress_v_password = function() {
         clearTimeout(window.frp_usr_tmt);
         window.frp_usr_tmt = setTimeout(function() {
             var elm = $(evt.target);
-            App.Actions.DB.update_v_password(elm, $(elm).val());
+            App.Actions.DB.update_password_meter(elm, $(elm).val());
         }, 100);
     });
 }
@@ -93,9 +93,7 @@ App.Listeners.DB.keypress_db_username();
 App.Listeners.DB.keypress_db_databasename();
 
 
-randomString = function(min_length = 16) {
+applyRandomString = function(min_length = 16) {
     $('input[name=v_password]').val(randomString2(min_length));
-    App.Actions.DB.update_v_password();
+    App.Actions.DB.update_password_meter();
 }
-
-     

web/js/pages/edit_mail_acc.js

@@ -24,7 +24,7 @@ App.Actions.MAIL_ACC.disable_unlimited = function(elm, source_elm) {
     $(source_elm).css('opacity', '0.5');
 }
 
-// 
+//
 App.Actions.MAIL_ACC.toggle_unlimited_feature = function(evt) {
     var elm = $(evt.target);
     var ref = elm.prev('.vst-input');
@@ -53,19 +53,19 @@ App.Listeners.MAIL_ACC.init = function() {
     });
 }
 
-App.Actions.MAIL_ACC.update_v_password = function (){
+App.Actions.MAIL_ACC.update_password_meter = function (){
     var password = $('input[name="v_password"]').val();
     var min_small = new RegExp(/^(?=.*[a-z]).+$/);
     var min_cap = new RegExp(/^(?=.*[A-Z]).+$/);
-    var min_num = new RegExp(/^(?=.*\d).+$/); 
+    var min_num = new RegExp(/^(?=.*\d).+$/);
     var min_length = 8;
     var score = 0;
-    
+
     if(password.length >= min_length) { score = score + 1; }
     if(min_small.test(password)) { score = score + 1;}
     if(min_cap.test(password)) { score = score + 1;}
     if(min_num.test(password)) { score = score+ 1; }
-    $('#meter').val(score);   
+    $('.password-meter').val(score);
 }
 
 App.Listeners.MAIL_ACC.keypress_v_password = function() {
@@ -74,34 +74,34 @@ App.Listeners.MAIL_ACC.keypress_v_password = function() {
         clearTimeout(window.frp_usr_tmt);
         window.frp_usr_tmt = setTimeout(function() {
             var elm = $(evt.target);
-            App.Actions.MAIL_ACC.update_v_password(elm, $(elm).val());
+            App.Actions.MAIL_ACC.update_password_meter(elm, $(elm).val());
         }, 100);
     });
 }
 
 $('#v_blackhole').on('click', function(evt){
-       if($('#v_blackhole').is(':checked')){
-           $('#v_fwd').prop('disabled', true);
-           $('#v_fwd_for').prop('checked', true);
-           $('#id_fwd_for').hide();
-       }else{
-           $('#v_fwd').prop('disabled', false);
-           $('#id_fwd_for').show();       
-       }
-    });
+    if($('#v_blackhole').is(':checked')){
+        $('#v_fwd').prop('disabled', true);
+        $('#v_fwd_for').prop('checked', true);
+        $('#id_fwd_for').hide();
+    }else{
+        $('#v_fwd').prop('disabled', false);
+        $('#id_fwd_for').show();
+    }
+});
 
 App.Listeners.MAIL_ACC.keypress_v_password();
 
 
-randomString = function (min_length = 16) {
-  var randomstring = randomString2(min_length);
-  $("input[name=v_password]").val(randomstring);
-  if ($("input[name=v_password]").attr("type") == "text")
-    $("#v_password").text(randomstring);
-  else 
-    $("#v_password").text(Array(randomstring.length + 1).join("*"));
-  App.Actions.MAIL_ACC.update_v_password();
-  generate_mail_credentials();
+applyRandomString = function (min_length = 16) {
+    var randomString = randomString2(min_length);
+    $("input[name=v_password]").val(randomString);
+    if ($("input[name=v_password]").attr("type") == "text")
+        $("#v_password").text(randomString);
+    else
+        $("#v_password").text(Array(randomString.length + 1).join("*"));
+    App.Actions.MAIL_ACC.update_password_meter();
+    generate_mail_credentials();
 };
 
 generate_mail_credentials = function() {
@@ -132,7 +132,7 @@ $(document).ready(function() {
         $('#v_account').text($(this).val());
         generate_mail_credentials();
     });
-  
+
     $('input[name=v_password]').change(function(){
         if($('input[name=v_password]').attr('type') == 'text')
             $('#v_password').text($(this).val());

web/js/pages/edit_user.js

@@ -1,20 +1,20 @@
-randomString = function(min_length = 16) {
-        $('input[name=v_password]').val(randomString2(min_length));
-        App.Actions.WEB.update_v_password();
+applyRandomString = function(min_length = 16) {
+    $('input[name=v_password]').val(randomString2(min_length));
+    App.Actions.WEB.update_password_meter();
 }
 
-App.Actions.WEB.update_v_password = function (){
+App.Actions.WEB.update_password_meter = function (){
     var password = $('input[name="v_password"]').val();
     var min_small = new RegExp(/^(?=.*[a-z]).+$/);
     var min_cap = new RegExp(/^(?=.*[A-Z]).+$/);
-    var min_num = new RegExp(/^(?=.*\d).+$/); 
+    var min_num = new RegExp(/^(?=.*\d).+$/);
     var min_length = 8;
     var score = 0;
     if(password.length >= min_length) { score = score + 1; }
     if(min_small.test(password)) { score = score + 1;}
     if(min_cap.test(password)) { score = score + 1;}
     if(min_num.test(password)) { score = score+ 1; }
-    $('#meter').val(score);   
+    $('.password-meter').val(score);
 }
 
 App.Listeners.WEB.keypress_v_password = function() {
@@ -23,7 +23,7 @@ App.Listeners.WEB.keypress_v_password = function() {
         clearTimeout(window.frp_usr_tmt);
         window.frp_usr_tmt = setTimeout(function() {
             var elm = $(evt.target);
-            App.Actions.WEB.update_v_password(elm, $(elm).val());
+            App.Actions.WEB.update_password_meter(elm, $(elm).val());
         }, 100);
     });
 }
@@ -57,4 +57,4 @@ $(document).ready(function(){
         i < 2 ? $(ns).parent().find('span').hide() : $(ns).parent().find('span').show();
     });
 
-});
+});

web/js/pages/setup_webapp.js

@@ -1,4 +1,4 @@
-randomString = function(target, min_length = 16) {
+applyRandomStringToTarget = function(target, min_length = 16) {
     elm = document.getElementById(target);
     $(elm).val(randomString2(min_length));
-}
+}

web/templates/pages/add_db.html

@@ -102,13 +102,13 @@
 							</tr>
 							<tr>
 								<td class="u-pt6">
-									<?=_('Password');?> <a href="javascript:randomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<input type="text" class="vst-input password" name="v_password"><br>
-									<meter max="4" id="meter"></meter>
+									<label for="v_password" class="form-label">
+										<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+									</label>
+									<div class="u-pos-relative u-input-width u-mb10">
+										<input type="text" class="form-control js-password-input" name="v_password" id="v_password">
+										<meter max="4" class="password-meter"></meter>
+									</div>
 								</td>
 							</tr>
 							<tr>

web/templates/pages/add_mail_acc.html

@@ -55,13 +55,13 @@
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Password');?> <a href="javascript:randomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input password" name="v_password"><br>
-								<meter max="4" id="meter"></meter>
+								<label for="v_password" class="form-label">
+									<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+								</label>
+								<div class="u-pos-relative u-input-width u-mb10">
+									<input type="text" class="form-control js-password-input" name="v_password" id="v_password">
+									<meter max="4" class="password-meter"></meter>
+								</div>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/add_user.html

@@ -55,18 +55,18 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_email" class="form-label"><?=_('Email');?></label>
-								<input type="email" class="form-control u-input-width" name="v_email" id="v_email" value="<?=htmlentities(trim($v_email, "'"))?>" tabindex="3">
+								<input type="email" class="form-control" name="v_email" id="v_email" value="<?=htmlentities(trim($v_email, "'"))?>" tabindex="3">
 							</td>
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Password');?> <a href="javascript:randomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>" tabindex="4"><br>
-								<meter max="4" id="meter"></meter>
+								<label for="v_password" class="form-label">
+									<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+								</label>
+								<div class="u-pos-relative u-mb10">
+									<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?=htmlentities(trim($v_password, "'"))?>" tabindex="4">
+									<meter max="4" class="password-meter"></meter>
+								</div>
 							</td>
 						</tr>
 						<tr>
@@ -158,7 +158,7 @@
 							</td>
 						</tr>
 					</table>
-					<table class="data-col2"></table>
+					<table class="data-col2 u-mb20"></table>
 				</td>
 			</tr>
 		</table>

web/templates/pages/edit_db.html

@@ -63,13 +63,13 @@
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Password');?> <a href="javascript:randomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>"><br>
-								<meter max="4" id="meter"></meter>
+								<label for="v_password" class="form-label">
+									<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+								</label>
+								<div class="u-pos-relative u-mb10">
+									<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?=htmlentities(trim($v_password, "'"))?>">
+									<meter max="4" class="password-meter"></meter>
+								</div>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_mail_acc.html

@@ -50,13 +50,13 @@
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Password');?> <a href="javascript:randomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>"><br>
-								<meter max="4" id="meter"></meter>
+								<label for="v_password" class="form-label">
+									<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+								</label>
+								<div class="u-pos-relative u-input-width u-mb10">
+									<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?=htmlentities(trim($v_password, "'"))?>">
+									<meter max="4" class="password-meter"></meter>
+								</div>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_server.html

@@ -436,12 +436,10 @@
 													</tr>
 													<tr>
 														<td class="u-pt6">
-															<?=_('Password');?>
-														</td>
-													</tr>
-													<tr>
-														<td>
-															<input type="text" class="vst-input password" name="v_smtp_relay_pass">
+															<label for="v_smtp_relay_pass" class="form-label"><?=_('Password');?></label>
+															<div class="u-pos-relative">
+																<input type="text" class="form-control js-password-input" name="v_smtp_relay_pass" id="v_smtp_relay_pass">
+															</div>
 														</td>
 													</tr>
 												</table>
@@ -508,17 +506,15 @@
 											<tr>
 												<td class="u-pl50 u-pt6">
 													<label for="v_mysql_host" class="form-label"><?=_('Host'). ' #'.$i ?></label>
-													<input type="text" class="form-control" name="v_mysql_host" id="v_mysql_host" value="<?=$value['HOST']?>" disabled>
+													<input type="text" class="form-control u-input-width" name="v_mysql_host" id="v_mysql_host" value="<?=$value['HOST']?>" disabled>
 												</td>
 											</tr>
 											<tr>
 												<td class="u-pl50 u-pt6">
-													<?=_('Password');?>
-												</td>
-											</tr>
-											<tr>
-												<td class="u-pl50">
-													<input type="text" class="vst-input password" name="v_mysql_password" value="">
+													<label for="v_mysql_password" class="form-label"><?=_('Password');?></label>
+													<div class="u-pos-relative">
+														<input type="text" class="form-control js-password-input" name="v_mysql_password" id="v_mysql_password">
+													</div>
 												</td>
 											</tr>
 											<tr>
@@ -531,10 +527,10 @@
 											</tr>
 											<tr>
 												<td class="u-pl50 u-pt6">
-													<label for="v_mysql_max" class="form-label">
+													<label for="v_mysql_current" class="form-label">
 														<?=_('Current Number Of Databases');?>
 													</label>
-													<input type="text" class="form-control u-mb20" name="v_mysql_max" id="v_mysql_max" value="<?=$value['U_DB_BASES']; ?>" disabled>
+													<input type="text" class="form-control u-mb20" name="v_mysql_current" id="v_mysql_current" value="<?=$value['U_DB_BASES']; ?>" disabled>
 												</td>
 											</tr>
 										<?php }} ?>
@@ -691,12 +687,10 @@
 															</tr>
 															<tr>
 																<td class="u-pt6">
-																	<?=_('Password');?>
-																</td>
-															</tr>
-															<tr>
-																<td>
-																	<input type="text" class="vst-input password" name="v_backup_password" value="<?=trim($v_backup_password, "'")?>">
+																	<label for="v_backup_password" class="form-label"><?=_('Password');?></label>
+																	<div class="u-pos-relative">
+																		<input type="text" class="form-control js-password-input" name="v_backup_password" id="v_backup_password" value="<?=trim($v_backup_password, "'")?>">
+																	</div>
 																</td>
 															</tr>
 															<tr>

web/templates/pages/edit_user.html

@@ -76,7 +76,7 @@
 						<tr>
 							<td class="u-pt18">
 								<label for="v_user" class="form-label"><?=_('Username');?></label>
-								<input type="text" class="form-control" name="v_user" id="v_user" value="<?=htmlentities(trim($v_username, "'"))?>" disabled>
+								<input type="text" class="form-control u-input-width" name="v_user" id="v_user" value="<?=htmlentities(trim($v_username, "'"))?>" disabled>
 								<input type="hidden" name="v_username" value="<?=htmlentities(trim($v_username, "'"))?>">
 							</td>
 						</tr>
@@ -92,7 +92,7 @@
 						<tr>
 							<td class="u-pt6">
 								<label for="v_email" class="form-label"><?=_('Email');?></label>
-								<input type="email" class="form-control u-input-width" name="v_email" id="v_email" value="<?=htmlentities(trim($v_email, "'"))?>" <?php if (($_SESSION['userContext'] !=='admin' ) && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !=='yes' )) { echo 'disabled' ; }?>>
+								<input type="email" class="form-control" name="v_email" id="v_email" value="<?=htmlentities(trim($v_email, "'"))?>" <?php if (($_SESSION['userContext'] !=='admin' ) && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !=='yes' )) { echo 'disabled' ; }?>>
 								<?php if (($_SESSION['userContext'] !== 'admin') && ($_SESSION['POLICY_USER_EDIT_DETAILS'] !== 'yes')) {?>
 									<input type="hidden" name="v_email" value="<?=htmlentities(trim($v_email, "'"))?>">
 								<?php } ?>
@@ -100,13 +100,13 @@
 						</tr>
 						<tr>
 							<td class="u-pt6">
-								<?=_('Password');?> <a href="javascript:randomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<input type="text" class="vst-input password" name="v_password" value="<?=htmlentities(trim($v_password, "'"))?>"><br>
-								<meter max="4" id="meter"></meter>
+								<label for="v_password" class="form-label">
+									<?=_('Password');?> <a href="javascript:applyRandomString();" title="<?=_('generate');?>"><i class="fas fa-sync status-icon green icon-large"></i></a>
+								</label>
+								<div class="u-pos-relative u-mb10">
+									<input type="text" class="form-control js-password-input" name="v_password" id="v_password" value="<?=htmlentities(trim($v_password, "'"))?>">
+									<meter max="4" class="password-meter"></meter>
+								</div>
 							</td>
 						</tr>
 						<tr>

web/templates/pages/edit_web.html

@@ -124,12 +124,12 @@
 									</tr>
 									<tr>
 										<td class="u-pt6">
-											<?=_('Password');?> / <a href="javascript:WEBrandom();" class="generate"><?=_('generate');?></a>
-										</td>
-									</tr>
-									<tr>
-										<td>
-											<input type="text" class="vst-input password" name="v_stats_password" value="<?=htmlentities(trim($v_stats_password, "'"))?>" id="v_password">
+											<label for="v_password" class="form-label">
+												<?=_('Password');?> / <a href="javascript:WEBrandom();" class="generate"><?=_('generate');?></a>
+											</label>
+											<div class="u-pos-relative">
+												<input type="text" class="form-control js-password-input" name="v_stats_password" id="v_password" value="<?=trim($v_stats_password, "'")?>">
+											</div>
 										</td>
 									</tr>
 								</table>
@@ -544,12 +544,10 @@
 													</tr>
 													<tr>
 														<td class="u-pl50 u-pt6">
-															<?=_('Password');?> / <a href="javascript:void(0);" onClick="FTPrandom(this)" ; class="generate"><?=_('generate');?></a>
-														</td>
-													</tr>
-													<tr>
-														<td class="u-pl50">
-															<input type="text" class="vst-input v-ftp-user-psw password" name="v_ftp_user[<?=$i ?>][v_ftp_password]" value="<?=htmlentities(trim($v_ftp_password, "'"))?>">
+															<label for="v_ftp_user[<?=$i ?>][v_ftp_password]" class="form-label">
+																<?=_('Password');?> / <a href="javascript:void(0);" onClick="FTPrandom(this)" ; class="generate"><?=_('generate');?></a>
+															</label>
+															<input type="text" class="form-control v-ftp-user-psw" name="v_ftp_user[<?=$i ?>][v_ftp_password]" id="v_ftp_user[<?=$i ?>][v_ftp_password]" value="<?=htmlentities(trim($v_ftp_password, "'"))?>">
 														</td>
 													</tr>
 													<tr>
@@ -612,12 +610,10 @@
 			</tr>
 			<tr>
 				<td class="u-pl50 u-pt6">
-					<?=_('Password');?> / <a href="javascript:void(0);" onClick="FTPrandom(this)" ; class="generate"><?=_('generate');?></a>
-				</td>
-			</tr>
-			<tr>
-				<td class="u-pl50">
-					<input type="text" class="vst-input v-ftp-user-psw password" name="v_ftp_user[%INDEX%][v_ftp_password]" value="">
+					<label for="v_ftp_user[%INDEX%][v_ftp_password]" class="form-label">
+						<?=_('Password');?> / <a href="javascript:void(0);" onClick="FTPrandom(this)" ; class="generate"><?=_('generate');?></a>
+					</label>
+					<input type="text" class="form-control v-ftp-user-psw" name="v_ftp_user[%INDEX%][v_ftp_password]" id="v_ftp_user[%INDEX%][v_ftp_password]">
 				</td>
 			</tr>
 			<tr>

web/templates/pages/setup_webapp.html

@@ -65,7 +65,7 @@
 						<?php if($f_type != 'boolean'): ?>
 							<label for="<?=$f_name?>" class="form-label">
 								<?=$f_label?>
-								<?php if ($f_type === 'password'):?> / <a href="javascript:randomString('<?=$f_name?>');" class="generate"><?=_('generate');?></a> <?php endif?>
+								<?php if ($f_type === 'password'):?> / <a href="javascript:applyRandomStringToTarget('<?=$f_name?>');" class="generate"><?=_('generate');?></a> <?php endif?>
 							</label>
 						<?php endif; ?>
 						<?php if (in_array($f_type, ['select']) && count($form_control['options']) ):?>