
<html>
<head>
  <meta charset="utf-8" />
  <title>Dokku Setup</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <style>
    .bd-callout {
      padding: 1.25rem;
      margin-top: 1.25rem;
      margin-bottom: 1.25rem;
      border: 1px solid #eee;
      border-left-width: .25rem;
      border-radius: .25rem;
    }
    .bd-callout p:last-child {
      margin-bottom: 0;
    }
    .bd-callout-info {
      border-left-color: #5bc0de;
    }
    pre {
      font-size: 80%;
      margin-bottom: 0;
    }
    h1 small {
      font-size: 50%;
    }
    h5 {
      font-size: 1rem;
    }
    .container {
      width: 640px;
    }
    .result {
      padding-left: 20px;
    }
    input.form-control, textarea.form-control {
      background-color: #fafbfc;
      font-size: 14px;
    }
    input.form-control::placeholder, textarea.form-control::placeholder {
      color:  #adb2b8
    }
  </style>
</head>
<body>
  <div class="container">
    <form id="form" role="form">
      <h1 class="pt-3">Dokku Setup <small class="text-muted">v0.21.4</small></h1>
      <div class="alert alert-warning small" role="alert">
        <strong>Warning:</strong> The SSH key filled out here can grant root access to the server. Please complete the setup as soon as possible.
      </div>

      <div class="row">
        <div class="col">
          <h3>Admin Access</h3>
          <div class="form-group">
            <label for="key">Public SSH Keys</label><br />
            <textarea class="form-control" name="keys" rows="5" id="key" placeholder="Begins with 'ssh-rsa', 'ssh-dss', 'ssh-ed25519', 'ecdsa-sha2-nistp256', 'ecdsa-sha2-nistp384', or 'ecdsa-sha2-nistp521'"></textarea>
            <small class="form-text text-muted">Public keys allow users to ssh onto the server as the <code>dokku</code> user, as well as remotely execute Dokku commands. They are currently auto-populated from: <code>/root/.ssh/authorized_keys</code>, and can be changed later via the  <a href="http://dokku.viewdocs.io/dokku/deployment/user-management/" target="_blank"><code>dokku ssh-keys</code></a> plugin.</small>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <h3>Hostname Configuration</h3>
          <div class="form-group">
            <label for="hostname">Hostname</label>
            <input class="form-control" type="text" id="hostname" name="hostname" value="dokku-1" placeholder="A hostname or ip address such as dokku-1" />
            <small class="form-text text-muted">This will be used as the default host for all applications, and can be changed later via the <a href="http://dokku.viewdocs.io/dokku/configuration/domains/" target="_blank"><code>dokku domains:set-global</code></a> command.</small>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="vhost" name="vhost" value="true">
            <label class="form-check-label" for="vhost">Use virtualhost naming for apps</label>
            <small class="form-text text-muted">When enabled, Nginx will be run on port 80 and proxy requests to apps based on hostname.</small>
            <small class="form-text text-muted">When disabled, a specific port will be setup for each application on first deploy, and requests to that port will be proxied to the relevant app.</small>
          </div>
          <div class="alert alert-warning small mt-3 d-block" role="alert">
            <strong>Warning:</strong> UFW is active. To allow traffic to specific ports, run <code>sudo ufw allow PORT</code> for the port in question.
          </div>
          <div class="bd-callout bd-callout-info">
            <h5>What will app URLs look like?</h5>
            <pre><code id="example">http://hostname:port</code></pre>
          </div>
        </div>
      </div>
      <button type="button" onclick="setup()" class="btn btn-primary">Finish Setup</button> <span class="result"></span>
    </form>
  </div>

  <div id="error-output"></div>
  <script>
    var $ = document.querySelector.bind(document)

    function setup() {
      if ($("#key").value.trim() == "") {
        alert("Your admin public key cannot be blank.")
        return
      }
      if ($("#hostname").value.trim() == "") {
        alert("Your hostname cannot be blank.")
        return
      }
      var data = new FormData($("#form"))

      var inputs = [].slice.call(document.querySelectorAll("input, textarea, button"))
      inputs.forEach(function (input) {
        input.disabled = true
      })

      var result = $(".result")
      fetch("/setup", {method: "POST", body: data})
        .then(function(response) {
            if (response.ok) {
                return response.json()
            } else {
                throw new Error('Server returned error')
            }
        })
        .then(function(response) {
          result.classList.add("text-success");
          result.textContent = "Success! Redirecting in 3 seconds. .."
          setTimeout(function() {
            window.location.href = "http://dokku.viewdocs.io/dokku~v0.21.4/deployment/application-deployment/";
          }, 3000);
        })
        .catch(function (error) {
          result.classList.add("text-danger");
          result.textContent = "Could not send the request"
        })
    }

    function update() {
      if ($("#vhost").matches(":checked") && $("#hostname").value.match(/^(\d{1,3}\.){3}\d{1,3}$/)) {
        alert("In order to use virtualhost naming, the hostname must not be an IP but a valid domain name.")
        $("#vhost").checked = false;
      }
      if ($("#vhost").matches(':checked')) {
        $("#example").textContent = "http://<app-name>."+$("#hostname").value
      } else {
        $("#example").textContent = "http://"+$("#hostname").value+":<app-port>"
      }
    }
    $("#vhost").addEventListener("change", update);
    $("#hostname").addEventListener("input", update);
    update();
  </script>
</body>
</html>
