mailinabox/management/templates/ssl.html

<style>
</style>

<h2>TLS (SSL) Certificates</h2>

<p>A TLS (formerly called SSL) certificate is a cryptographic file that proves to anyone connecting to a web address that the connection is secure between you and the owner of that address.</p>

<p>You need a TLS certificate for this box&rsquo;s hostname ({{hostname}}) and every other domain name and subdomain that this box is hosting a website for (see the list below).</p>

<h3>Provision a Certificate</h3>

<p>We can provision an SSL certificate for you from <a href="https://letsencrypt.org/" target="_blank">Let&rsquo;s Encrypt</a>, a free SSL certificate provider.</p>

<p id="ssl_provision_status"></p>

<table id="ssl_provision_problems" style="display: none" class="table">
  <thead>
    <tr>
      <th>Domain</th>
      <th>Problem</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<h3>Certificate Status</h3>

<table id="ssl_domains" class="table" style="margin-bottom: 2em; width: auto; display: none">
  <thead>
    <tr>
      <th>Domain</th>
      <th>Certificate Status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<p>A multi-domain or wildcard certificate will be automatically applied to any domains it is valid for.</p>

<h3 id="ssl_install_header">Install Certificate</h3>

<p>There are many places where you can get a free or cheap certificate. We recommend <a href="https://www.namecheap.com/security/ssl-certificates/domain-validation.aspx">Namecheap&rsquo;s $9 certificate</a>, <a href="https://www.startssl.com/">StartSSL&rsquo;s free express lane</a> or <a href="https://buy.wosign.com/free/">WoSign&rsquo;s free TLS</a></a>.</p>

<p>Which domain are you getting a certificate for?</p>

<p><select id="ssldomain" onchange="show_csr()" class="form-control" style="width: auto"></select></p>

<p>What country are you in? This is required by some TLS certificate providers. You may leave this blank if you know your TLS certificate provider doesn't require it.</p>

<p><select id="sslcc" onchange="show_csr()" class="form-control" style="width: auto">
	<option value="">(Select)</option>
	{% for code, name in csr_country_codes %}
		<option value="{{code}}">{{name}}</option>
	{% endfor %}
</select></p>

<div id="csr_info" style="display: none">
  <p>You will need to provide the certificate provider this Certificate Signing Request (CSR):</p>

  <pre id="ssl_csr"></pre>

  <p><small>The CSR is safe to share. It can only be used in combination with a secret key stored on this machine.</small></p>

  <p>The certificate provider will then provide you with a TLS/SSL certificate. They may also provide you with an intermediate chain. Paste each separately into the boxes below:</p>

  <p style="margin-bottom: .5em">TLS/SSL certificate:</p>
  <p><textarea id="ssl_paste_cert" class="form-control" style="max-width: 40em; height: 8em" placeholder="-----BEGIN CERTIFICATE-----&#xA;stuff here&#xA;-----END CERTIFICATE-----"></textarea></p>

  <p style="margin-bottom: .5em">TLS/SSL intermediate chain (if provided):</p>
  <p><textarea id="ssl_paste_chain" class="form-control" style="max-width: 40em; height: 8em" placeholder="-----BEGIN CERTIFICATE-----&#xA;stuff here&#xA;-----END CERTIFICATE-----&#xA;-----BEGIN CERTIFICATE-----&#xA;more stuff here&#xA;-----END CERTIFICATE-----"></textarea></p>

  <p>After you paste in the information, click the install button.</p>

  <button class="btn-primary" onclick="install_cert()">Install</button>
</div>

<script>
function show_tls() {
 api(
    "/ssl/status",
    "GET",
    {
    },
    function(res) {
      // provisioning status
      if (res.can_provision.length > 0) {
          $('#ssl_provision_status')
             .removeClass("text-warning").removeClass("text-success").addClass("text-danger")
             .text("Domains: " + res.can_provision.join(", "));
      } else if (res.cant_provision.length == 0) {
          $('#ssl_provision_status')
              .addClass("text-success").removeClass("text-warning").removeClass("text-danger")
              .text("No domains hosted on this box need a new TLS certificate at this time.");
      } else {
          $('#ssl_provision_status')
              .removeClass("text-success").addClass("text-warning").removeClass("text-danger")
              .text("No TLS certificates can be provisoned at this time:");
      }
      $('#ssl_provision_problems').toggle(res.cant_provision.length > 0);
      $('#ssl_provision_problems tbody').text("");
      for (var i = 0; i < res.cant_provision.length; i++) {
        var domain = res.cant_provision[i];
        var row = $("<tr><th class='domain'><a href=''></a></th><td class='status'></td></tr>");
        $('#ssl_provision_problems tbody').append(row);
        row.attr('data-domain', domain.domain);
        row.find('.domain a').text(domain.domain);
        row.find('.domain a').attr('href', 'https://' + domain.domain);
        row.find('.status').text(domain.problem);
      }

      // certificate status
      var domains = res.status;
      var tb = $('#ssl_domains tbody');
      tb.text('');
      $('#ssldomain').html('<option value="">(select)</option>');
      $('#ssl_domains').show();
      for (var i = 0; i < domains.length; i++) {
        var row = $("<tr><th class='domain'><a href=''></a></th><td class='status'></td> <td class='actions'><a href='#' onclick='return ssl_install(this);' class='btn btn-xs'>Install Certificate</a></td></tr>");
        tb.append(row);
        row.attr('data-domain', domains[i].domain);
        row.find('.domain a').text(domains[i].domain);
        row.find('.domain a').attr('href', 'https://' + domains[i].domain);
        row.addClass("text-" + domains[i].status);
        row.find('.status').text(domains[i].text);
        if (domains[i].status == "success") {
          row.find('.actions a').addClass('btn-default').text('Replace Certificate');
        } else {
          row.find('.actions a').addClass('btn-primary').text('Install Certificate');
        }

        $('#ssldomain').append($('<option>').text(domains[i].domain));
      }
    });
}

function ssl_install(elem) {
  var domain = $(elem).parents('tr').attr('data-domain');
  $('#ssldomain').val(domain);
  $('#csr_info').slideDown();
  $('#ssl_csr').text('Loading...');
  show_csr();
  $('html, body').animate({ scrollTop: $('#ssl_install_header').offset().top - $('.navbar-fixed-top').height() - 20 })
  return false;
}

function show_csr() {
 api(
    "/ssl/csr/" + $('#ssldomain').val(),
    "POST",
    {
        countrycode: $('#sslcc').val()
    },
    function(data) {
      $('#ssl_csr').text(data);
    });
}

function install_cert() {
 api(
    "/ssl/install",
    "POST",
    {
      domain: $('#ssldomain').val(),
      cert: $('#ssl_paste_cert').val(),
      chain: $('#ssl_paste_chain').val()
    },
    function(status) {
      if (/^OK($|\n)/.test(status)) {
        console.log(status)
        show_modal_error("TLS Certificate Installation", "Certificate has been installed. Check that you have no connection problems to the domain.", function() { show_ssl(); $('#csr_info').slideUp(); });
      } else {
        show_modal_error("TLS Certificate Installation", status);
      }
    });
}
</script>