mailinabox/management/templates/login.html

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">

            <h1 style="margin: 1em; text-align: center">{{hostname}}</h1>

        </div>
    </div>
{% if no_admins_exist %}
    <div class="row">
        <div class="col-md-offset-2 col-md-8">

            <p class="text-danger">There are no administrative users on this system! To make an administrative user,
            log into this machine using SSH (like when you first set it up) and run:</p>
            <pre>cd mailinabox
            sudo tools/mail.py user make-admin your@emailaddress.com</pre>
            <hr>

        </div>
    </div>
{% endif %}
    <div class="row">
        <div class="col-sm-12 col-md-offset-2 col-md-10 col-lg-offset-3 col-lg-6">

            <center>
                <p style="margin: 2em">Log in here for your Mail-in-a-Box control panel.</p>
            </center>

            <form class="form-horizontal" role="form" onsubmit="do_login(); return false;">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                        <input name="email" type="email" class="form-control" id="loginEmail" placeholder="Email">
                    </div>
                </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                        <div class="col-sm-10">
                            <input name="password" type="password" class="form-control" id="loginPassword" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input name='remember' type="checkbox" id="loginRemember"> Remember me
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                </div>
            </form>

        </div>
    </div>

    <script>
    function do_login() {
      if ($('#loginEmail').val() == "") {
        show_modal_error("Login Failed", "Enter your email address.")
        return false;
      }
      if ($('#loginPassword').val() == "") {
        show_modal_error("Login Failed", "Enter your email password.")
        return false;
      }

      // Exchange the email address & password for an API key.
      api_credentials = [$('#loginEmail').val(), $('#loginPassword').val()]

      api(
      "/me",
      "GET",
      { },
      function(response){ 
        // This API call always succeeds. It returns a JSON object indicating
        // whether the request was authenticated or not.
        if (response.status != "authorized") {
          // Show why the login failed.
          show_modal_error("Login Failed", response.reason)

          // Reset any saved credentials.
          do_logout();

        } else {
          // Login succeeded.

          // Save the new credentials.
          api_credentials = [response.api_key, ""];

          // Try to wipe the username/password information.
          $('#loginEmail').val('');
          $('#loginPassword').val('');

          // Remember the credentials.
          if (typeof localStorage != 'undefined' && typeof sessionStorage != 'undefined') {
            if ($('#loginRemember').val()) {
              localStorage.setItem("miab-cp-credentials", api_credentials.join(":"));
              sessionStorage.removeItem("miab-cp-credentials");
            } else {
              localStorage.removeItem("miab-cp-credentials");
              sessionStorage.setItem("miab-cp-credentials", api_credentials.join(":"));
            }
          }

          // Open the next panel the user wants to go to. Do this after the XHR response
          // is over so that we don't start a new XHR request while this one is finishing,
          // which confuses the loading indicator.
          setTimeout(function() { show_panel(!switch_back_to_panel ? 'system_status' : switch_back_to_panel) }, 300);
        }
      })
    }

    function do_logout() {
      api_credentials = ["", ""];
      if (typeof localStorage != 'undefined')
        localStorage.removeItem("miab-cp-credentials");
      if (typeof sessionStorage != 'undefined')
        sessionStorage.removeItem("miab-cp-credentials");
      show_panel('login');
    }
    </script>

</div>