web-based administrative UI

closes #19

management/templates/login.html

@@ -0,0 +1,102 @@
+<div class="row">
+  <div class="col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
+    <center>
+      <h1 style="margin: 1em">{{hostname}}</h1>
+      <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.
+      show_panel(!switch_back_to_panel ? 'system_status' : switch_back_to_panel)
+    }
+  })
+}
+
+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>