[Web] Show JID example when editing a domain

data/web/css/site/edit.css

@@ -40,4 +40,8 @@ table.footable>tbody>tr.footable-empty>td {
   -moz-transform:rotateX(180deg);
   -webkit-transform:rotateX(180deg);
   transform:rotateX(180deg);
+}
+.input-group-addon-xmpp {
+  background-color: #fff;
+  border: 0px solid #fff;
 }

data/web/edit.php

@@ -362,12 +362,13 @@ if (isset($_SESSION['mailcow_cc_role'])) {
               </div>
               <div class="form-group" data-acl="<?=$_SESSION['acl']['xmpp_prefix'];?>">
                 <label class="control-label col-sm-2" for="xmpp_prefix"><?=$lang['edit']['xmpp_prefix'];?></label>
-                <div class="col-md-3">
+                <div class="col-md-10">
                   <div class="input-group">
-                    <input type="text" class="form-control" name="xmpp_prefix" value="<?=htmlspecialchars($result['xmpp_prefix'], ENT_QUOTES, 'UTF-8');?>" required>
+                    <input type="text" class="form-control" id="xmpp-prefix" name="xmpp_prefix" value="<?=htmlspecialchars($result['xmpp_prefix'], ENT_QUOTES, 'UTF-8');?>" required>
                     <span class="input-group-addon">.<?=htmlspecialchars($domain, ENT_QUOTES, 'UTF-8');?></span>
                   </div>
                   <small class="help-block"><?=sprintf($lang['edit']['xmpp_prefix_info'], getenv('MAILCOW_HOSTNAME'));?></small>
+                  <p><?=$lang['edit']['xmpp_example_jid'];?>: <code>username@<span class="xmpp-prefix-preview"></span>.<?=htmlspecialchars($domain, ENT_QUOTES, 'UTF-8');?></code></p>
                 </div>
               </div>
               <hr>

data/web/js/site/edit.js

@@ -28,34 +28,42 @@ $(document).ready(function() {
     $('#mailbox-passwd-hidden-info').addClass('hidden');
     $('#mailbox-passwd-form-groups').removeClass('hidden');
   });
-});
-if ($("#editSelectMultipleBookings").val() == "custom") {
-  $("#multiple_bookings_custom_div").show();
-  $('input[name=multiple_bookings]').val($("#multiple_bookings_custom").val());
-}
-$("#editSelectMultipleBookings").change(function() {
-  $('input[name=multiple_bookings]').val($("#editSelectMultipleBookings").val());
-  if ($('input[name=multiple_bookings]').val() == "custom") {
-    $("#multiple_bookings_custom_div").show();
-  }
-  else {
-    $("#multiple_bookings_custom_div").hide();
-  }
-});
-if ($("#editSelectSenderACL option[value='\*']:selected").length > 0){
-  $("#sender_acl_disabled").show();
-}
-$('#editSelectSenderACL').change(function() {
+  // Preview XMPP JID
+  $('.xmpp-prefix-preview').text($("#xmpp-prefix").val());
+  $("#xmpp-prefix").bind("change keypress keyup blur", function() {
+    $('.xmpp-prefix-preview').text($(this).val());
+  });
+  // Sender ACL
   if ($("#editSelectSenderACL option[value='\*']:selected").length > 0){
     $("#sender_acl_disabled").show();
   }
-  else {
-    $("#sender_acl_disabled").hide();
+  $('#editSelectSenderACL').change(function() {
+    if ($("#editSelectSenderACL option[value='\*']:selected").length > 0){
+      $("#sender_acl_disabled").show();
+    }
+    else {
+      $("#sender_acl_disabled").hide();
+    }
+  });
+  // Resources
+  if ($("#editSelectMultipleBookings").val() == "custom") {
+    $("#multiple_bookings_custom_div").show();
+    $('input[name=multiple_bookings]').val($("#multiple_bookings_custom").val());
   }
+  $("#editSelectMultipleBookings").change(function() {
+    $('input[name=multiple_bookings]').val($("#editSelectMultipleBookings").val());
+    if ($('input[name=multiple_bookings]').val() == "custom") {
+      $("#multiple_bookings_custom_div").show();
+    }
+    else {
+      $("#multiple_bookings_custom_div").hide();
+    }
+  });
+  $("#multiple_bookings_custom").bind("change keypress keyup blur", function() {
+    $('input[name=multiple_bookings]').val($("#multiple_bookings_custom").val());
+  });
 });
-$("#multiple_bookings_custom").bind("change keypress keyup blur", function() {
-  $('input[name=multiple_bookings]').val($("#multiple_bookings_custom").val());
-});
+
 jQuery(function($){
   // http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
   function validateEmail(email) {

data/web/lang/lang.de.json

@@ -531,6 +531,7 @@
         "xmpp_access_info": "XMPP muss für diese Domain aktiviert sein.",
         "xmpp_admin": "XMPP Administrator",
         "xmpp_admin_info": "<b>Vorsicht:</b> Ernennt den Benutzer zum Administrator der jeweiligen XMPP Domain.",
+        "xmpp_example_jid": "<b>Beispiel JID</b> (Passwort entspricht Mailbox-Passwort)",
         "generate": "generieren",
         "grant_types": "Grant types",
         "hostname": "Servername",

data/web/lang/lang.en.json

@@ -532,6 +532,7 @@
         "xmpp_access_info": "XMPP must be enabled for this domain.",
         "xmpp_admin": "XMPP administrator",
         "xmpp_admin_info": "<b>Danger:</b> Promotes a user to an XMPP administrator of this domain.",
+        "xmpp_example_jid": "<b>Example JID</b> (login with mailbox password)",
         "generate": "generate",
         "grant_types": "Grant types",
         "hostname": "Hostname",