TOTP two-factor authentication

management/templates/2fa.html

@@ -0,0 +1,79 @@
+<style>
+</style>
+
+<h2>Two-Factor Authentication</h2>
+
+<p>Two-factor authentication (2FA) is <i>something you know</i> and <i>something you have</i>.</p>
+
+<p>Regular password-based logins are one-factor (something you know). 2FA makes an account more secure by guarding against a lost or guessed password, since you also need a special device to access your account. You can turn on 2FA for your account here.</p>
+
+<p>Your authentication method is currently: <strong id="2fa_current"> </strong></p>
+
+<h3>TOTP</h3>
+
+<p>TOTP is a time-based one-time password method of two-factor authentication.</p>
+
+<p>You will need a TOTP-compatible device, such as any Android device with the <a href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp">FreeOTP Authenticator</a> app. We&rsquo;ll generate a QR code that you import into your device or app. After you generate the QR code, you&rsquo;ll activate 2FA by entering your first activation code provided by your device or app.</p>
+
+  <p><button onclick="totp_initialize()">Generate QR Code</button></p>
+  <div id="totp-form" class="row" style="display: none">
+    <div class="col-sm-6">
+      <center>QR Code</center>
+      <img id="totp_qr_code" src="" class="img-responsive">
+    </div>
+    <div class="col-sm-6">
+      <form class="form" role="form" onsubmit="totp_activate(); return false;">
+        <div class="form-group">
+          <label for="inputTOTP" class="control-label">Activation Code</label>
+          <p><input class="form-control" id="inputTOTP" placeholder="enter 6-digit code"></p>
+          <p><input type="submit" class="btn btn-primary" value="Activate"></p>
+        </div>
+      </form>
+    </div>
+  </div>
+
+<p>When using TOTP 2FA, your password becomes your previous plain password plus a space plus the code generated by your TOTP device.</p>
+
+<script>
+function show_2fa() {
+ $('#2fa_current').text('loading...');
+ api(
+    "/me/2fa",
+    "GET",
+    {
+    },
+    function(response) {
+      $('#2fa_current').text(response.method);
+    });
+}
+
+var secret = null;
+
+function totp_initialize() {
+ api(
+    "/me/2fa/totp/initialize",
+    "POST",
+    {
+    },
+    function(response) {
+      $('#totp_qr_code').attr('src', 'data:image/png;base64,' + response.qr);
+      $('#totp-form').fadeIn();
+      secret = response.secret;
+    });
+}
+
+function totp_activate() {
+ api(
+    "/me/2fa/totp/activate",
+    "POST",
+    {
+      "secret": secret,
+      "code": $('#inputTOTP').val()
+    },
+    function(response) {
+      show_modal_error("Two-Factor Authentication", $("<pre/>").text(response.message));
+      if (response.status == "OK")
+        $('#totp-form').fadeOut();
+    });
+}
+</script>

management/templates/index.html

@@ -115,6 +115,12 @@
             </li>
             <li><a href="#sync_guide" onclick="return show_panel(this);">Contacts/Calendar</a></li>
             <li><a href="#web" onclick="return show_panel(this);">Web</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">You <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#2fa" onclick="return show_panel(this);">Two-Factor Authentication</a></li>
+              </ul>
+            </li>
           </ul>
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#" onclick="do_logout(); return false;" style="color: white">Log out?</a></li>
@@ -168,6 +174,10 @@
       {% include "ssl.html" %}
       </div>
 
+      <div id="panel_2fa" class="admin_panel">
+      {% include "2fa.html" %}
+      </div>
+
       <hr>
 
       <footer>