external
/
mailinabox
mirror of https://github.com/mail-in-a-box/mailinabox.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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>
This commit is contained in:
Bernard `Guyzmo` Pratz 2016-01-27 18:30:19 +01:00
parent 1d9b678d89
commit 4e2b109a72
2 changed files with 84 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
management/templates/aliases.html
View File

@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="form-group"> <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"> <div class="col-sm-10">
<input type="email" class="form-control" id="addaliasAddress"> <input type="email" class="form-control" id="addaliasAddress">
<div style="margin-top: 3px; padding-left: 3px; font-size: 90%" class="text-muted"> <div style="margin-top: 3px; padding-left: 3px; font-size: 90%" class="text-muted">
@ -36,7 +36,7 @@
</div> </div>
</div> </div>
<div class="form-group"> <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"> <div class="col-sm-10">
<textarea class="form-control" rows="3" id="addaliasForwardsTo"></textarea> <textarea class="form-control" rows="3" id="addaliasForwardsTo"></textarea>
<div style="margin-top: 3px; padding-left: 3px; font-size: 90%" class="text-muted"> <div style="margin-top: 3px; padding-left: 3px; font-size: 90%" class="text-muted">
@ -45,7 +45,7 @@
</div> </div>
</div> </div>
<div class="form-group"> <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="col-sm-10">
<div class="radio"> <div class="radio">
<label> <label>
@ -65,19 +65,16 @@
</div> </div>
</div> </div>
<div class="form-group"> <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="col-sm-10">
<div class="checkbox"> <div id="alias_service_buttons" class="btn-group btn-group-xs">
<label> <button id="addaliasMailHandling" data-mode="mail" class="btn btn-xs btn-success active" disabled>MAIL</button>
<input id="addaliasDnsHandling" name="addaliasDnsHandling" type="checkbox" checked> <button id="addaliasDnsHandling" data-mode="dns" class="btn btn-xs btn-success active">DNS</button>
If the email is of a non-managed domain, create DNS configuration for the domain. <button id="addaliasWebHandling" data-mode="www" class="btn btn-xs btn-success active">WWW</button>
</label>
</div> </div>
<div class="checkbox"> <div id="alias_service_info" class="text-info small" style="display: none; margin: .5em 0 0 0;">
<label> <span class="dns hidden">When deactivated, the DNS service is not configured for the domain</span>
<input id="addaliasWebHandling" name="addaliasWebHandling" type="checkbox" id="addaliasWebHandling" checked> <span class="www hidden">When deactivated, the Web services is not configured for the domain</span>
If the email is of a non-managed domain, create Web configuration for the domain.
</label>
</div> </div>
</div> </div>
</div> </div>
@ -182,7 +179,33 @@ function show_aliases() {
} }
}) })
$('#alias_type_buttons button[data-mode="regular"]').click(); // init $('#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; var is_alias_add_update = false;
@ -191,8 +214,8 @@ function do_add_alias() {
var form_address = $("#addaliasAddress").val(); var form_address = $("#addaliasAddress").val();
var form_forwardsto = $("#addaliasForwardsTo").val(); var form_forwardsto = $("#addaliasForwardsTo").val();
var form_senders = ($('#addaliasForwardsToAdvanced').prop('checked') ? $("#addaliasSenders").val() : ''); var form_senders = ($('#addaliasForwardsToAdvanced').prop('checked') ? $("#addaliasSenders").val() : '');
var form_dns = $('#addaliasDnsHandling').prop('checked'); var form_dns = $('#addaliasDnsHandling').hasClass('active');
var form_web = $('#addaliasWebHandling').prop('checked'); var form_web = $('#addaliasWebHandling').hasClass('active');
if ($('#addaliasForwardsToAdvanced').prop('checked') && !/\S/.exec($("#addaliasSenders").val())) { if ($('#addaliasForwardsToAdvanced').prop('checked') && !/\S/.exec($("#addaliasSenders").val())) {
show_modal_error(title, "You did not enter any permitted senders."); show_modal_error(title, "You did not enter any permitted senders.");
return false; return false;
@ -225,13 +248,17 @@ function aliases_reset_form() {
$("#addaliasAddress").val('') $("#addaliasAddress").val('')
$("#addaliasForwardsTo").val('') $("#addaliasForwardsTo").val('')
$("#addaliasSenders").val('') $("#addaliasSenders").val('')
$('#addaliasDnsHandling').prop('disabled', false);
$('#addaliasWebHandling').prop('disabled', false);
$('#alias-cancel').addClass('hidden'); $('#alias-cancel').addClass('hidden');
$('#add-alias-button').text('Add Alias'); $('#add-alias-button').text('Add Alias');
is_alias_add_update = false; is_alias_add_update = false;
$('#addaliasDnsHandling').prop('disabled', false).addClass('btn-success');
$('#addaliasWebHandling').prop('disabled', false).addClass('btn-success');
} }
function aliases_edit(elem) { function aliases_edit(elem) {
var address = $(elem).parents('tr').attr('data-address'); var address = $(elem).parents('tr').attr('data-address');
var receiverdivs = $(elem).parents('tr').find('.forwardsTo div'); var receiverdivs = $(elem).parents('tr').find('.forwardsTo div');

53
management/templates/users.html
View File

@ -29,24 +29,20 @@
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="adduserDnsHandling" class="col-sm-1 control-label">New domain</label> <div class="col-sm-15">
<div class="col-sm-10"> <div id="user_service_buttons" class="btn-group btn-group">
<div class="checkbox"> <button id="adduserMailHandling" data-mode="mail" class="btn btn-success active" disabled>MAIL</button>
<label> <button id="adduserDnsHandling" data-mode="dns" class="btn btn-success active">DNS</button>
<input id="adduserDnsHandling" name="adduserDnsHandling" type="checkbox" checked> <button id="adduserWebHandling" data-mode="www" class="btn btn-success active">WWW</button>
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> </div>
</div> </div>
</div> </div>
<button type="submit" class="btn btn-primary">Add User</button> <button type="submit" class="btn btn-primary">Add User</button>
</form> </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%;"> <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>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> <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() { function do_add_user() {
var email = $("#adduserEmail").val(); var email = $("#adduserEmail").val();
var pw = $("#adduserPassword").val(); var pw = $("#adduserPassword").val();
var privs = $("#adduserPrivs").val(); var privs = $("#adduserPrivs").val();
var form_dns = $('#adduserDnsHandling').prop('checked'); var form_dns = $('#adduserDnsHandling').hasClass('active');
var form_web = $('#adduserWebHandling').prop('checked'); var form_web = $('#adduserWebHandling').hasClass('active');
api( api(
"/mail/users/add", "/mail/users/add",
"POST", "POST",