aliases.html 8.05 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13
<style>
#alias_table .actions > * { padding-right: 3px; }
#alias_table .alias-required .remove { display: none }
</style>

<h2>Aliases</h2>

<h3>Add a mail alias</h3>

<p>Aliases are email forwarders. An alias can forward email to a <a href="javascript:show_panel('users')">mail user</a> or to any email address.</p>

<form class="form-horizontal" role="form" onsubmit="do_add_alias(); return false;">
  <div class="form-group">
14 15
    <div class="col-sm-offset-1 col-sm-11">
      <div id="alias_type_buttons" class="btn-group btn-group-xs">
16 17 18 19 20 21 22
        <button type="button" class="btn btn-default active" data-mode="regular">Regular</button>
        <button type="button" class="btn btn-default" data-mode="catchall">Catch-All</button>
        <button type="button" class="btn btn-default" data-mode="domainalias">Domain Alias</button>
      </div>
      <div id="alias_mode_info" class="text-info small" style="display: none; margin: .5em 0 0 0;">
        <span class="catchall hidden">A catch-all alias captures all otherwise unmatched email to a domain. Enter just a part of an email address starting with the @-sign.</span>
        <span class="domainalias hidden">A domain alias forwards all otherwise unmatched mail from one domain to another domain, preserving the part before the @-sign.</span>
23 24 25 26 27
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="addaliasEmail" class="col-sm-1 control-label">Alias</label>
28
    <div class="col-sm-10">
29
      <input type="email" class="form-control" id="addaliasEmail">
30
      <div style="margin-top: 3px; padding-left: 3px; font-size: 90%" class="text-muted">You may use international (non-ASCII) characters for the domain part of the email address only.</div>
31 32 33
    </div>
  </div>
  <div class="form-group">
34
    <label for="addaliasTargets" class="col-sm-1 control-label">Forward To</label>
35
    <div class="col-sm-10">
36
      <textarea class="form-control" rows="3" id="addaliasTargets"></textarea>
37 38 39
    </div>
  </div>
  <div class="form-group">
40 41
    <div class="col-sm-offset-1 col-sm-11">
      <button id="add-alias-button" type="submit" class="btn btn-primary">Add Alias</button>
42 43 44 45 46 47 48 49 50 51
      <button id="alias-cancel" class="btn btn-default hidden" onclick="aliases_reset_form(); return false;">Cancel</button>
    </div>
  </div>
</form>

<h3>Existing mail aliases</h3>
<table id="alias_table" class="table" style="width: auto">
  <thead>
    <tr>
      <th></th>
52
      <th>Alias<br></th>
53 54 55 56 57 58 59
      <th>Forwards To</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

60
<p style="margin-top: 1.5em"><small>hostmaster@, postmaster@, and admin@ email addresses are required on some domains.</small></p>
61 62 63 64 65

<div style="display: none">
  <table>
  <tr id="alias-template">
    <td class='actions'>
66
        <a href="#" onclick="aliases_edit(this); scroll_top(); return false;" class='edit' title="Edit Alias">
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
          <span class="glyphicon glyphicon-pencil"></span>
        </a>
        <a href="#" onclick="aliases_remove(this); return false;" class='remove' title="Remove Alias">
          <span class="glyphicon glyphicon-trash"></span>
        </a>
    </td>
    <td class='email'> </td>
    <td class='target'> </td>
  </tr>
  </table>
</div>


<script>
function show_aliases() {
  $('#alias_table tbody').html("<tr><td colspan='2' class='text-muted'>Loading...</td></tr>")
  api(
    "/mail/aliases",
    "GET",
    { format: 'json' },
    function(r) {
      $('#alias_table tbody').html("");
      for (var i = 0; i < r.length; i++) {
90 91 92
        var hdr = $("<tr><td colspan='3'><h4/></td></tr>");
        hdr.find('h4').text(r[i].domain);
        $('#alias_table tbody').append(hdr);
93

94 95 96 97 98 99 100
        for (var k = 0; k < r[i].aliases.length; k++) {
          var alias = r[i].aliases[k];

          var n = $("#alias-template").clone();
          n.attr('id', '');

          if (alias.required) n.addClass('alias-required');
101 102
          n.attr('data-email', alias.source_display); // this is decoded from IDNA, but will get re-coded to IDNA on the backend
          n.find('td.email').text(alias.source_display)
103 104 105 106
          for (var j = 0; j < alias.destination.length; j++)
            n.find('td.target').append($("<div></div>").text(alias.destination[j]))
          $('#alias_table tbody').append(n);
        }
107 108
      }
    })
109 110 111 112 113

  $(function() {
    $('#alias_type_buttons button').off('click').click(function() {
      $('#alias_type_buttons button').removeClass('active');
      $(this).addClass('active');
114
      if ($(this).attr('data-mode') == "regular") {
115
        $('#addaliasEmail').attr('type', 'email');
116 117 118 119 120 121 122 123 124 125 126
        $('#addaliasEmail').attr('placeholder', 'incoming email address (e.g. you@yourdomain.com)');
	$('#addaliasTargets').attr('placeholder', 'forward to these email addresses (one per line or separated by commas)');
        $('#alias_mode_info').slideUp();
      } else if ($(this).attr('data-mode') == "catchall") {
        $('#addaliasEmail').attr('type', 'text');
        $('#addaliasEmail').attr('placeholder', 'incoming catch-all address (e.g. @yourdomain.com)');
	$('#addaliasTargets').attr('placeholder', 'forward to these email addresses (one per line or separated by commas)');
        $('#alias_mode_info').slideDown();
        $('#alias_mode_info span').addClass('hidden');
        $('#alias_mode_info span.catchall').removeClass('hidden');
      } else if ($(this).attr('data-mode') == "domainalias") {
127
        $('#addaliasEmail').attr('type', 'text');
128 129 130 131 132
        $('#addaliasEmail').attr('placeholder', 'incoming domain (@yourdomain.com)');
        $('#addaliasTargets').attr('placeholder', 'forward to domain (@yourdomain.com)');
        $('#alias_mode_info').slideDown();
        $('#alias_mode_info span').addClass('hidden');
        $('#alias_mode_info span.domainalias').removeClass('hidden');
133 134
      }
    })
135
    $('#alias_type_buttons button[data-mode="regular"]').click(); // init
136
  })
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
}

var is_alias_add_update = false;
function do_add_alias() {
  var title = (!is_alias_add_update) ? "Add Alias" : "Update Alias";
  var email = $("#addaliasEmail").val();
  var targets = $("#addaliasTargets").val();
  api(
    "/mail/aliases/add",
    "POST",
    {
      update_if_exists: is_alias_add_update ? '1' : '0',
      source: email,
      destination: targets
    },
    function(r) {
      // Responses are multiple lines of pre-formatted text.
      show_modal_error(title, $("<pre/>").text(r));
      show_aliases()
      aliases_reset_form();
    },
    function(r) {
      show_modal_error(title, r);
    });
  return false;
}

function aliases_reset_form() {
  $("#addaliasEmail").prop('disabled', false);
  $("#addaliasEmail").val('')
  $("#addaliasTargets").val('')
  $('#alias-cancel').addClass('hidden');
169
  $('#add-alias-button').text('Add Alias');
170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185
  is_alias_add_update = false;
}

function aliases_edit(elem) {
  var email = $(elem).parents('tr').attr('data-email');
  var targetdivs = $(elem).parents('tr').find('.target div');
  var targets = "";
  for (var i = 0; i < targetdivs.length; i++)
    targets += $(targetdivs[i]).text() + "\n";

  is_alias_add_update = true;
  $('#alias-cancel').removeClass('hidden');
  $("#addaliasEmail").prop('disabled', true);
  $("#addaliasEmail").val(email);
  $("#addaliasTargets").val(targets);
  $('#add-alias-button').text('Update');
186 187 188 189 190 191
  if (email.charAt(0) == '@' && targets.charAt(0) == '@')
    $('#alias_type_buttons button[data-mode="domainalias"]').click();
  else if (email.charAt(0) == '@')
    $('#alias_type_buttons button[data-mode="catchall"]').click();
  else
    $('#alias_type_buttons button[data-mode="regular"]').click();
192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214
  $('body').animate({ scrollTop: 0 })
}

function aliases_remove(elem) {
  var email = $(elem).parents('tr').attr('data-email');
  show_modal_confirm(
    "Remove Alias",
    "Remove " + email + "?",
    "Remove",
    function() {
      api(
        "/mail/aliases/remove",
        "POST",
        {
          source: email
        },
        function(r) {
          // Responses are multiple lines of pre-formatted text.
          show_modal_error("Remove User", $("<pre/>").text(r));
          show_aliases();
        });
    });
}
215 216 217 218 219 220

function scroll_top() {
        $('html, body').animate({
            scrollTop: $("#panel_aliases").offset().top
        }, 1000);
}
221
</script>