implement two factor check during login

management/templates/index.html

@@ -297,7 +297,7 @@ function ajax_with_indicator(options) {
 }
 
 var api_credentials = ["", ""];
-function api(url, method, data, callback, callback_error) {
+function api(url, method, data, callback, callback_error, headers) {
   // from http://www.webtoolkit.info/javascript-base64.html
   function base64encode(input) {
     _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
@@ -335,7 +335,7 @@ function api(url, method, data, callback, callback_error) {
     method: method,
     cache: false,
     data: data,
-
+    headers: headers,
     // the custom DNS api sends raw POST/PUT bodies --- prevent URL-encoding
     processData: typeof data != "string",
     mimeType: typeof data == "string" ? "text/plain; charset=ascii" : null,

management/templates/login.html

@@ -1,4 +1,29 @@
-<h1 style="margin: 1em; text-align: center">{{hostname}}</h1>
+<style>
+  .title {
+    margin: 1em;
+    text-align: center;
+  }
+
+  .subtitle {
+    margin: 2em;
+    text-align: center;
+  }
+
+  .login {
+    margin: 0 auto;
+    max-width: 32em;
+  }
+
+  .login #loginOtp {
+    display: none;
+  }
+
+  #loginForm.twofactor #loginOtp {
+    display: block
+  }
+</style>
+
+<h1 class="title">{{hostname}}</h1>
 
 {% if no_users_exist or no_admins_exist %}
 <div class="row">
@@ -20,10 +45,10 @@ sudo tools/mail.py user make-admin me@{{hostname}}</pre>
 </div>
 {% endif %}
 
-<p style="margin: 2em; text-align: center;">Log in here for your Mail-in-a-Box control panel.</p>
+<p class="subtitle">Log in here for your Mail-in-a-Box control panel.</p>
 
-<div style="margin: 0 auto; max-width: 32em;">
-  <form class="form-horizontal" role="form" onsubmit="do_login(); return false;" method="get">
+<div class="login">
+  <form id="loginForm" class="form-horizontal" role="form" onsubmit="do_login(); return false;" method="get">
     <div class="form-group">
       <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
       <div class="col-sm-9">
@@ -45,6 +70,12 @@ sudo tools/mail.py user make-admin me@{{hostname}}</pre>
         </div>
       </div>
     </div>
+    <div class="form-group" id="loginOtp">
+        <label for="loginOtpInput" class="col-sm-3 control-label">Two Factor Code</label>
+        <div class="col-sm-9">
+            <input type="text" class="form-control" id="loginOtpInput" placeholder="123456">
+        </div>
+    </div>
     <div class="form-group">
       <div class="col-sm-offset-3 col-sm-9">
         <button type="submit" class="btn btn-default">Sign in</button>
@@ -53,7 +84,6 @@ sudo tools/mail.py user make-admin me@{{hostname}}</pre>
   </form>
 </div>
 
-
 <script>
 function do_login() {
   if ($('#loginEmail').val() == "") {
@@ -75,17 +105,21 @@ function do_login() {
   api(
   "/me",
   "GET",
-  { },
-  function(response){
+  {},
+  function(response) {
     // This API call always succeeds. It returns a JSON object indicating
     // whether the request was authenticated or not.
-    if (response.status != "ok") {
-      // Show why the login failed.
-      show_modal_error("Login Failed", response.reason)
-
-      // Reset any saved credentials.
-      do_logout();
+    if (response.status != 'ok') {
+      if (response.status === 'missing_token' && !$('#loginForm').hasClass('twofactor')) {
+        $('#loginForm').addClass('twofactor');
+      } else {
+        $('#loginForm').removeClass('twofactor');
+        // Show why the login failed.
+        show_modal_error("Login Failed", response.reason)
 
+        // Reset any saved credentials.
+        do_logout();
+      }
     } else if (!("api_key" in response)) {
       // Login succeeded but user might not be authorized!
       show_modal_error("Login Failed", "You are not an administrator on this system.")
@@ -102,6 +136,8 @@ function do_login() {
       // Try to wipe the username/password information.
       $('#loginEmail').val('');
       $('#loginPassword').val('');
+      $('#loginOtpInput').val('');
+      $('#loginForm').removeClass('twofactor');
 
       // Remember the credentials.
       if (typeof localStorage != 'undefined' && typeof sessionStorage != 'undefined') {
@@ -119,7 +155,11 @@ function do_login() {
       // which confuses the loading indicator.
       setTimeout(function() { show_panel(!switch_back_to_panel || switch_back_to_panel == "login" ? 'system_status' : switch_back_to_panel) }, 300);
     }
-  })
+  },
+  undefined,
+  {
+    'x-auth-token': $('#loginOtpInput').val()
+  });
 }
 
 function do_logout() {
@@ -132,6 +172,8 @@ function do_logout() {
 }
 
 function show_login() {
+  $('#loginForm').removeClass('twofactor');
+  $('#loginOtpInput').val('');
   $('#loginEmail,#loginPassword').each(function() {
     var input = $(this);
     if (!$.trim(input.val())) {