From 4e2b109a7240ca1962743046cee9773c1d64dc4f Mon Sep 17 00:00:00 2001
From: Bernard `Guyzmo` Pratz <guyzmo+github@m0g.net>
Date: Wed, 27 Jan 2016 18:30:19 +0100
Subject: [PATCH] Improved UI for services handling

* Used a three button row and with a nice message

Signed-off-by: Bernard `Guyzmo` Pratz <guyzmo+github@m0g.net>
---
 management/templates/aliases.html | 65 ++++++++++++++++++++++---------
 management/templates/users.html   | 53 ++++++++++++++++++-------
 2 files changed, 84 insertions(+), 34 deletions(-)

diff --git a/management/templates/aliases.html b/management/templates/aliases.html
index 50f538b2..f8fb3c17 100644
--- a/management/templates/aliases.html
+++ b/management/templates/aliases.html
@@ -26,7 +26,7 @@
     </div>
   </div>
   <div class="form-group">
-    <label for="addaliasAddress" class="col-sm-1 control-label">Alias</label>
+    <label for="addaliasAddress" class="col-sm-2 control-label">Alias</label>
     <div class="col-sm-10">
       <input type="email" class="form-control" id="addaliasAddress">
       <div style="margin-top: 3px; padding-left: 3px; font-size: 90%" class="text-muted">
@@ -36,7 +36,7 @@
     </div>
   </div>
   <div class="form-group">
-    <label for="addaliasForwardsTo" class="col-sm-1 control-label">Forwards To</label>
+    <label for="addaliasForwardsTo" class="col-sm-2 control-label">Forwards To</label>
     <div class="col-sm-10">
       <textarea class="form-control" rows="3" id="addaliasForwardsTo"></textarea>
       <div style="margin-top: 3px; padding-left: 3px; font-size: 90%" class="text-muted">
@@ -45,7 +45,7 @@
     </div>
   </div>
   <div class="form-group">
-    <label for="addaliasSenders" class="col-sm-1 control-label">Permitted Senders</label>
+    <label for="addaliasSenders" class="col-sm-2 control-label">Permitted Senders</label>
     <div class="col-sm-10">
       <div class="radio">
         <label>
@@ -65,19 +65,16 @@
     </div>
   </div>
   <div class="form-group">
-    <label for="addaliasDnsHandling" class="col-sm-1 control-label">New domain</label>
+    <label for="addaliasDnsHandling" class="col-sm-2 control-label">Services</label>
     <div class="col-sm-10">
-      <div class="checkbox">
-        <label>
-          <input id="addaliasDnsHandling" name="addaliasDnsHandling" type="checkbox" checked>
-          If the email is of a non-managed domain, create DNS configuration for the domain.
-        </label>
+      <div id="alias_service_buttons" class="btn-group btn-group-xs">
+        <button id="addaliasMailHandling" data-mode="mail" class="btn btn-xs btn-success active" disabled>MAIL</button>
+        <button id="addaliasDnsHandling" data-mode="dns" class="btn btn-xs btn-success active">DNS</button>
+    	<button id="addaliasWebHandling" data-mode="www" class="btn btn-xs btn-success active">WWW</button>
       </div>
-      <div class="checkbox">
-        <label>
-          <input id="addaliasWebHandling" name="addaliasWebHandling" type="checkbox" id="addaliasWebHandling" checked>
-          If the email is of a non-managed domain, create Web configuration for the domain.
-        </label>
+      <div id="alias_service_info" class="text-info small" style="display: none; margin: .5em 0 0 0;">
+        <span class="dns hidden">When deactivated, the DNS service is not configured for the domain</span>
+        <span class="www hidden">When deactivated, the Web services is not configured for the domain</span>
       </div>
     </div>
   </div>
@@ -182,7 +179,33 @@ function show_aliases() {
       }
     })
     $('#alias_type_buttons button[data-mode="regular"]').click(); // init
-  })
+
+    // Service buttons
+    $('#alias_service_buttons button').off('click').click(function() {
+      if ($(this).hasClass('active')) {
+        $(this).removeClass('active');
+        $(this).addClass('btn-default');
+        $(this).removeClass('btn-success');
+        $('#alias_service_info .www').addClass('hidden');
+        $('#alias_service_info .dns').addClass('hidden');
+        if ($(this).attr('data-mode') == "dns") {
+          $('#alias_service_info').slideDown();
+          $('#addalias-form .dns').removeClass('hidden');
+        } else if ($(this).attr('data-mode') == "www") {
+          $('#alias_service_info').slideDown();
+          $('#addalias-form .www').removeClass('hidden');
+        }
+      } else {
+        $(this).addClass('active');
+        $(this).removeClass('btn-default');
+        $(this).addClass('btn-success');
+        $('#alias_service_info').slideUp();
+        $('#addalias-form .www').addClass('hidden');
+        $('#addalias-form .dns').addClass('hidden');
+      }
+      return false;
+    });
+  });
 }
 
 var is_alias_add_update = false;
@@ -191,8 +214,8 @@ function do_add_alias() {
   var form_address = $("#addaliasAddress").val();
   var form_forwardsto = $("#addaliasForwardsTo").val();
   var form_senders = ($('#addaliasForwardsToAdvanced').prop('checked') ? $("#addaliasSenders").val() : '');
-  var form_dns = $('#addaliasDnsHandling').prop('checked');
-  var form_web = $('#addaliasWebHandling').prop('checked');
+  var form_dns = $('#addaliasDnsHandling').hasClass('active');
+  var form_web = $('#addaliasWebHandling').hasClass('active');
   if ($('#addaliasForwardsToAdvanced').prop('checked') && !/\S/.exec($("#addaliasSenders").val())) {
     show_modal_error(title, "You did not enter any permitted senders.");
     return false;
@@ -225,13 +248,17 @@ function aliases_reset_form() {
   $("#addaliasAddress").val('')
   $("#addaliasForwardsTo").val('')
   $("#addaliasSenders").val('')
-  $('#addaliasDnsHandling').prop('disabled', false);
-  $('#addaliasWebHandling').prop('disabled', false);
   $('#alias-cancel').addClass('hidden');
   $('#add-alias-button').text('Add Alias');
   is_alias_add_update = false;
+
+  $('#addaliasDnsHandling').prop('disabled', false).addClass('btn-success');
+  $('#addaliasWebHandling').prop('disabled', false).addClass('btn-success');
+
 }
 
+
+
 function aliases_edit(elem) {
   var address = $(elem).parents('tr').attr('data-address');
   var receiverdivs = $(elem).parents('tr').find('.forwardsTo div');
diff --git a/management/templates/users.html b/management/templates/users.html
index 6e07673a..8c57c20f 100644
--- a/management/templates/users.html
+++ b/management/templates/users.html
@@ -29,24 +29,20 @@
     </select>
   </div>
   <div class="form-group">
-    <label for="adduserDnsHandling" class="col-sm-1 control-label">New domain</label>
-    <div class="col-sm-10">
-      <div class="checkbox">
-        <label>
-          <input id="adduserDnsHandling" name="adduserDnsHandling" type="checkbox" checked>
-          If the email is of a non-managed domain, create DNS configuration for the domain.
-        </label>
-      </div>
-      <div class="checkbox">
-        <label>
-          <input id="adduserWebHandling" name="adduserWebHandling" type="checkbox" id="adduserWebHandling" checked>
-          If the email is of a non-managed domain, create Web configuration for the domain.
-        </label>
+    <div class="col-sm-15">
+      <div id="user_service_buttons" class="btn-group btn-group">
+        <button id="adduserMailHandling" data-mode="mail" class="btn btn-success active" disabled>MAIL</button>
+        <button id="adduserDnsHandling" data-mode="dns" class="btn btn-success active">DNS</button>
+    	<button id="adduserWebHandling" data-mode="www" class="btn btn-success active">WWW</button>
       </div>
     </div>
   </div>
   <button type="submit" class="btn btn-primary">Add User</button>
 </form>
+<div id="user_service_info" class="text-info small" style="display: none; margin: .5em 0 0 0;">
+  <span class="dns hidden">When deactivated, the DNS service is not configured for the domain</span>
+  <span class="www hidden">When deactivated, the Web services is not configured for the domain</span>
+</div>
 <ul style="margin-top: 1em; padding-left: 1.5em; font-size: 90%;">
   <li>Passwords must be at least four characters and may not contain spaces. For best results, <a href="#" onclick="return generate_random_password()">generate a random password</a>.</li>
   <li>Use <a href="#" onclick="return show_panel('aliases')">aliases</a> to create email addresses that forward to existing accounts.</li>
@@ -154,14 +150,41 @@ function show_users() {
         }
       }
     })
+
+    // Service buttons
+    $('#user_service_buttons button').off('click').click(function() {
+      if ($(this).hasClass('active')) {
+        $(this).removeClass('active');
+        $(this).addClass('btn-default');
+        $(this).removeClass('btn-success');
+        $('#user_service_info .www').addClass('hidden');
+        $('#user_service_info .dns').addClass('hidden');
+        if ($(this).attr('data-mode') == "dns") {
+          $('#user_service_info').slideDown();
+          $('#user_service_info .dns').removeClass('hidden');
+        } else if ($(this).attr('data-mode') == "www") {
+          $('#user_service_info').slideDown();
+          $('#user_service_info .www').removeClass('hidden');
+        }
+      } else {
+        $(this).addClass('active');
+        $(this).removeClass('btn-default');
+        $(this).addClass('btn-success');
+        $('#user_service_info').slideUp();
+        $('#user_service_info .www').addClass('hidden');
+        $('#user_service_info .dns').addClass('hidden');
+      }
+      return false;
+    });
+
 }
 
 function do_add_user() {
   var email = $("#adduserEmail").val();
   var pw = $("#adduserPassword").val();
   var privs = $("#adduserPrivs").val();
-  var form_dns = $('#adduserDnsHandling').prop('checked');
-  var form_web = $('#adduserWebHandling').prop('checked');
+  var form_dns = $('#adduserDnsHandling').hasClass('active');
+  var form_web = $('#adduserWebHandling').hasClass('active');
   api(
     "/mail/users/add",
     "POST",