Fix mail account sidebar not updating (#3037)

* Fix mail account sidebar not updating

* Add extra white line

* Update edit_mail_acc.html

Co-authored-by: Jaap Marcus <9754650+jaapmarcus@users.noreply.github.com>

web/js/pages/add_mail_acc.js

@@ -118,9 +118,9 @@ 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);
+            $('.js-password-output').text(randomString);
         else
-            $('#v_password').text(Array(randomString.length+1).join('*'));
+            $('.js-password-output').text(Array(randomString.length+1).join('*'));
         App.Actions.MAIL_ACC.update_password_meter();
         generate_mail_credentials();
 }
@@ -128,7 +128,7 @@ applyRandomString = function(min_length = 16) {
 generate_mail_credentials = function() {
     var div = $('.mail-infoblock').clone();
     div.find('#mail_configuration').remove();
-    var pass=$('#v_password').text();
+    var pass=$('.js-password-output').text();
     var output = div.text();
     output=output.replace(/(?:\r\n|\r|\n|\t)/g, "|");
     output=output.replace(/ {2}/g, "");
@@ -140,29 +140,29 @@ generate_mail_credentials = function() {
     output=output.replace(/ $/, "");
     output=output.replace(/:\|/g, ": ");
     output=output.replace(/\|/g, "\n");
-    $('#v_credentials').val(output);
+    $('.js-hidden-credentials').val(output);
 }
 
 $(document).ready(function() {
-    $('#v_account').text($('input[name=v_account]').val());
-    $('#v_password').text($('input[name=v_password]').val());
+    $('.js-account-output').text($('input[name=v_account]').val());
+    $('.js-password-output').text($('input[name=v_password]').val());
     generate_mail_credentials();
 
     $('input[name=v_account]').change(function(){
-        $('#v_account').text($(this).val());
+        $('.js-account-output').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());
+            $('.js-password-output').text($(this).val());
         else
-            $('#v_password').text(Array($(this).val().length+1).join('*'));
+            $('.js-password-output').text(Array($(this).val().length+1).join('*'));
         generate_mail_credentials();
     });
 
     $('.toggle-psw-visibility-icon').click(function(){
-        $('#v_password').text($('input[name=v_password]').val());
+        $('.js-password-output').text($('input[name=v_password]').val());
         generate_mail_credentials();
     });
 

web/js/pages/edit_mail_acc.js

@@ -109,9 +109,9 @@ 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);
+        $(".js-password-output").text(randomString);
     else
-        $("#v_password").text(Array(randomString.length + 1).join("*"));
+        $(".js-password-output").text(Array(randomString.length + 1).join("*"));
     App.Actions.MAIL_ACC.update_password_meter();
     generate_mail_credentials();
 };
@@ -119,8 +119,8 @@ applyRandomString = function (min_length = 16) {
 generate_mail_credentials = function() {
     var div = $('.mail-infoblock').clone();
     div.find('#mail_configuration').remove();
-    var pass=div.find('#v_password').text();
-    if (pass=="") div.find('#v_password').text(' ');
+    var pass=div.find('.js-password-output').text();
+    if (pass=="") div.find('.js-password-output').text(' ');
     var output = div.text();
     output=output.replace(/(?:\r\n|\r|\n|\t)/g, "|");
     output=output.replace(/ {2}/g, "");
@@ -132,32 +132,32 @@ generate_mail_credentials = function() {
     output=output.replace(/ $/, "");
     output=output.replace(/:\|/g, ": ");
     output=output.replace(/\|/g, "\n");
-    $('#v_credentials').val(output);
+    $('.js-hidden-credentials').val(output);
 }
 
 $(document).ready(function() {
-    $('#v_account').text($('input[name=v_account]').val());
-    $('#v_password').text($('input[name=v_password]').val());
+    $('.js-account-output').text($('input[name=v_account]').val());
+    $('.js-password-output').text($('input[name=v_password]').val());
     generate_mail_credentials();
 
     $('input[name=v_account]').change(function(){
-        $('#v_account').text($(this).val());
+        $('.js-account-output').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());
+            $('.js-password-output').text($(this).val());
         else
-            $('#v_password').text(Array($(this).val().length+1).join('*'));
+            $('.js-password-output').text(Array($(this).val().length+1).join('*'));
         generate_mail_credentials();
     });
 
     $('.toggle-psw-visibility-icon').click(function(){
         if($('input[name=v_password]').attr('type') == 'text')
-            $('#v_password').text($('input[name=v_password]').val());
+            $('.js-password-output').text($('input[name=v_password]').val());
         else
-            $('#v_password').text(Array($('input[name=v_password]').val().length+1).join('*'));
+            $('.js-password-output').text(Array($('input[name=v_password]').val().length+1).join('*'));
         generate_mail_credentials();
     });
 

web/templates/pages/add_mail_acc.html

@@ -100,16 +100,17 @@
               <?=_('Send login credentials to email address') ?>
             </label>
             <input type="email" class="form-control" name="v_send_email" id="v_send_email" value="<?=htmlentities(trim($v_send_email, "'"))?>">
-            <input type="hidden" name="v_credentials" id="v_credentials">
+            <input type="hidden" name="v_credentials" class="js-hidden-credentials">
           </div>
         </div>
         <div>
           <div class="mail-infoblock">
             <table>
               <tr><td colspan="2"><strong><?=strtoupper(_('Common account settings'));?></strong></td><tr>
-              <tr><td><?=_('Username');?>: </td><td><span id="v_account">example</span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
-              <tr><td><?=_('Password');?>: </td><td><span id="v_password"></span></td></tr>
-              <?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr><?php } ?>
+              <tr><td><?=_('Username');?>: </td><td><span class="js-account-output">example</span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
+              <tr><td><?=_('Password');?>: </td><td><span class="js-password-output"></span></td></tr>
+              <?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr>
+              <?php } ?>
               <tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
 
               <tr><td colspan="2"><strong><?=strtoupper(_('IMAP settings'));?></strong></td></tr>

web/templates/pages/edit_mail_acc.html

@@ -51,7 +51,7 @@
               <?=_('Send login credentials to email address') ?>
             </label>
             <input type="email" class="form-control" name="v_send_email" id="v_send_email" value="<?=htmlentities(trim($v_send_email, "'"))?>">
-            <input type="hidden" name="v_credentials" id="v_credentials">
+            <input type="hidden" name="v_credentials" class="js-hidden-credentials">
           </div>
           <div class="u-mb10">
             <label for="v_quota" class="form-label">
@@ -113,9 +113,10 @@
           <div class="mail-infoblock">
             <table>
               <tr><td colspan="2"><strong><?=strtoupper(_('Common account settings'));?></strong></td><tr>
-              <tr><td><?=_('Username');?>: </td><td><span id="v_account"></span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
-              <tr><td><?=_('Password');?>: </td><td><span id="v_password"></span></td></tr>
-              <?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr><?php } ?>
+              <tr><td><?=_('Username');?>: </td><td><span class="js-account-output"></span>@<?=htmlentities(trim($v_domain, "'"))?></td></tr>
+              <tr><td><?=_('Password');?>: </td><td><span class="js-password-output"></span></td></tr>
+              <?php if ($_SESSION['WEBMAIL_SYSTEM']) {?><tr><td><?=_('Webmail');?>: </td><td><a class="vst" href="http://<?=htmlentities($v_webmail_alias)?>" target="_blank">http://<?=htmlentities($v_webmail_alias)?></a></td></tr>
+              <?php } ?>
               <tr><td><?=_('Hostname');?>: </td><td>mail.<?=htmlentities($v_domain)?></td></tr>
 
               <tr><td colspan="2"><strong><?=strtoupper(_('IMAP settings'));?></strong></td></tr>