Finished implementing two-factor auth feature

Geeklog-Core · Dec 17, 2017 · adfe263 · adfe263
1 parent a3923e4
commit adfe263
Show file tree

Hide file tree

Showing 11 changed files with 631 additions and 300 deletions.
diff --git a/language/english.php b/language/english.php
@@ -438,17 +438,17 @@
     'tfa_help1' => 'Make sure to install "Google Authenticator" application on your mobile device before you enable Two Factor Authentication.',
     'tfa_help2' => 'Enable Two Factor Authentication.',
     'tfa_help3' => 'Run "Google Authenticator", tap on the plus icon and scan the QR code.',
-    'tfa_help4' => 'Print or download the codes below in case you cannot use your mobile device you installed the Google Authenticator.  Each code is valid only one-time.  If you generate a new set of codes, then the current set will be invalid.',
+    'tfa_help4' => 'Print or download the backup codes below in case you cannot use your mobile device you installed the Google Authenticator.  Each backup code is valid only one-time.  If you generate a new set of backup codes, then the current set will be invalid.',
     'tfa_help5' => 'Hit the "Save" button at the bottom of the screen.',
-    'tfa_enter_code' => 'Enter the %d-digit code your Google Authenticator app is showing',
+    'tfa_enter_code' => 'Enter the %d-digit code your Google Authenticator app is showing or one of the backup code you have got in your preference page.',
     'tfa_code' => 'Google Authenticator Code',
+    'tfa_authenticate' => 'Authenticate',
     'tfa_qrcode' => 'QR Code',
-    'tfa_show_qrcode' => 'Show QR code',
-    'tfa_hide_qrcode' => 'Hide QR code',
-    'tfa_do_not_require_tfa_again' => 'Don\'t require Two Factor Authentication again on this device',
+    'tfa_show_hide' => 'Show/Hide',
     'tfa_backup_code' => 'Backup Codes',
     'tfa_download' => 'Download Backup Codes',
-    'tfa_new_backup_code' => 'Generate a new set of backup codes'
+    'tfa_new_backup_code' => 'Generate a new set of backup codes',
+    'tfa_generate_confirm' => 'Go ahead?'
 );
 
 ###############################################################################

diff --git a/language/english_utf-8.php b/language/english_utf-8.php
@@ -438,17 +438,17 @@
     'tfa_help1' => 'Make sure to install "Google Authenticator" application on your mobile device before you enable Two Factor Authentication.',
     'tfa_help2' => 'Enable Two Factor Authentication.',
     'tfa_help3' => 'Run "Google Authenticator", tap on the plus icon and scan the QR code.',
-    'tfa_help4' => 'Print or download the codes below in case you cannot use your mobile device you installed the Google Authenticator.  Each code is valid only one-time.  If you generate a new set of codes, then the current set will be invalid.',
+    'tfa_help4' => 'Print or download the backup codes below in case you cannot use your mobile device you installed the Google Authenticator.  Each backup code is valid only one-time.  If you generate a new set of backup codes, then the current set will be invalid.',
     'tfa_help5' => 'Hit the "Save" button at the bottom of the screen.',
-    'tfa_enter_code' => 'Enter the %d-digit code your Google Authenticator app is showing',
+    'tfa_enter_code' => 'Enter the %d-digit code your Google Authenticator app is showing or one of the backup code you have got in your preference page.',
     'tfa_code' => 'Google Authenticator Code',
+    'tfa_authenticate' => 'Authenticate',
     'tfa_qrcode' => 'QR Code',
-    'tfa_show_qrcode' => 'Show QR code',
-    'tfa_hide_qrcode' => 'Hide QR code',
-    'tfa_do_not_require_tfa_again' => 'Don\'t require Two Factor Authentication again on this device',
+    'tfa_show_hide' => 'Show/Hide',
     'tfa_backup_code' => 'Backup Codes',
     'tfa_download' => 'Download Backup Codes',
-    'tfa_new_backup_code' => 'Generate a new set of backup codes'
+    'tfa_new_backup_code' => 'Generate a new set of backup codes',
+    'tfa_generate_confirm' => 'Go ahead?'
 );
 
 ###############################################################################

diff --git a/language/japanese_utf-8.php b/language/japanese_utf-8.php
@@ -446,17 +446,17 @@
     'tfa_help1' => '2段階認証を有効にする前に、Google認証システムのアプリケーションをモバイル端末にインストールしてください。',
     'tfa_help2' => '「2段階認証を有効にする」を「はい」にしてください。',
     'tfa_help3' => 'Google認証システムを起動して、プラスアイコンをタップし、QRコードをスキャンしてください。',
-    'tfa_help4' => 'Google認証システムをインストールしたデバイスを使えない場合に備えて、下記のコードを印刷するかダウンロードしてください。各コードは1回だけ有効です。新しいコードを生成すると、現在のコードは無効になります。',
+    'tfa_help4' => 'Google認証システムをインストールしたデバイスを使えない場合に備えて、下記のバックアップコードを印刷するかダウンロードしてください。各バックアップコードは1回だけ有効です。新しいバックアップコードを生成すると、現在のバックアップコードは無効になります。',
     'tfa_help5' => '画面下部の「保存」をクリックしてください。',
-    'tfa_enter_code' => 'Google認証システムに表示されている%d桁の数字を入力してください',
+    'tfa_enter_code' => 'Google認証システムに表示されている%d桁の数字かマイアカウントのページに表示されていたバックアップコードを入力してください',
     'tfa_code' => '認証コード',
+    'tfa_authenticate' => '認証',
     'tfa_qrcode' => 'QRコード',
-    'tfa_show_qrcode' => 'QRコードを表示',
-    'tfa_hide_qrcode' => 'QRコードを隠す',
-    'tfa_do_not_require_tfa_again' => 'このデバイスでは今後2段階認証を要求しない',
+    'tfa_show_hide' => '表示する/隠す',
     'tfa_backup_code' => 'バックアップコード',
     'tfa_download' => 'バックアップコードをダウンロード',
-    'tfa_new_backup_code' => 'バックアップコードを再作成'
+    'tfa_new_backup_code' => 'バックアップコードを生成し直す',
+    'tfa_generate_confirm' => '実行してもよいですか?'
 );
 
 ###############################################################################

diff --git a/public_html/javascript/two_factor_auth.js b/public_html/javascript/two_factor_auth.js
@@ -1,39 +1,80 @@
-// Hide QR code
+// This script is loaded only when two factor authentication is enabled
 var geeklog;
 
 geeklog = geeklog || {};
 
 geeklog.tfa = {
     elements: document.getElementsByClassName('tfa'),
+
+    /**
+     * Initialize the Two Factor Auth handlers
+     */
     init: function () {
         'use strict';
         var self = this;
 
         // Hide QR code and backup codes at first
         this.hideTFAElements();
 
-        // Show/Hide QR code image
+        // Show/Hide QR code image and backup codes
         document.getElementById('enable_tfa').addEventListener('change', function (ev) {
             if (ev.target.value === '0') {
                 self.hideTFAElements();
             } else {
                 self.showTFAElements();
             }
         }, false);
+
+        // Show/Hide QR code image
+        document.getElementById('tfa_flip_qrcode').addEventListener('click', function (ev) {
+            self.showHide(document.getElementById('tfa_qrcode'));
+            ev.preventDefault();
+        }, false);
+
+        // Show/Hide Backup codes
+        document.getElementById('tfa_flip_backupcodes').addEventListener('click', function (ev) {
+            self.showHide(document.getElementById('tfa_backupcodes'));
+            ev.preventDefault();
+        }, false);
     },
-    showTFAElements: function () {
+
+    /**
+     * Show / Hide an element
+     *
+     * @param elem
+     */
+    showHide: function (elem) {
+        'use strict';
+        elem.style.display = (elem.style.display === '') ? 'none' : '';
+    },
+
+    /**
+     * Show / Hide elements
+     * @param elements
+     * @param style
+     */
+    common: function (elements, style) {
         'use strict';
         var i;
-        for (i = 0; i < this.elements.length; i++) {
-            this.elements[i].style.display = '';
+        for (i = 0; i <elements.length; i++) {
+            elements[i].style.display = style;
         }
     },
+
+    /**
+     * Show elements with "tfa" class
+     */
+    showTFAElements: function () {
+        'use strict';
+        this.common(this.elements, '');
+    },
+
+    /**
+     * Hide elements with "tfa" class
+     */
     hideTFAElements: function () {
         'use strict';
-        var i;
-        for (i = 0; i < this.elements.length; i++) {
-            this.elements[i].style.display = 'none';
-        }
+        this.common(this.elements, 'none');
     }
 };
 

diff --git a/public_html/layout/denim/preferences/profile.thtml b/public_html/layout/denim/preferences/profile.thtml
@@ -90,13 +90,21 @@
           </select>
         </dd>
 
-        <dt class="tfa"><label for="tfa_qrcode">{lang_tfa_qrcode}</label></dt>
-        <dd class="tfa"><img src="{qrcode_data}" alt="" id="qrcode_data"{xhtml}></dd>
+        <dt><label for="tfa_qrcode">{lang_tfa_qrcode}</label></dt>
+        <dd>
+          <a id="tfa_flip_qrcode" href="#">{lang_tfa_show_hide}</a><br{xhtml}>
+          <img class="tfa" src="{qrcode_data}" alt="" id="tfa_qrcode"{xhtml}>
+        </dd>
+
+        <dt><label for="tfa_backup_code">{lang_tfa_backup_code}</label></dt>
+        <dd>
+          <ul>
+            <li><a id="tfa_flip_backupcodes" href="#">{lang_tfa_show_hide}</a></li>
+            <li><a id="tfa_download_backupcodes" href="{site_url}/usersettings.php?mode=download_backupcodes&amp;{token_name}={token_value}">{lang_tfa_download}</a></li>
+            <li><a id="tfa_generate_backupcodes" href="{site_url}/usersettings.php?mode=generate_backupcodes&amp;{token_name}={token_value}" onclick="return window.confirm('{tfa_generate_confirm}');">{lang_tfa_new_backup_code}</a></li>
+          </ul>
 
-        <dt class="tfa"><label for="tfa_backup_code">{lang_tfa_backup_code}</label></dt>
-        <dd class="tfa">
-          <p class="tfa"><a href="{site_url}/usersettings.php?mode=download_backupcodes" id="tfa_backup_code">{lang_tfa_download}</a></p>
-          <ul class="tfa">
+          <ul class="tfa" id="tfa_backupcodes">
             {backup_codes}
           </ul>
         </dd>

diff --git a/public_html/layout/denim/users/twofactorauthform.thtml b/public_html/layout/denim/users/twofactorauthform.thtml
@@ -0,0 +1,23 @@
+{# start {templatelocation} #}
+
+{start_block_twofactorauth}
+  <form action="{site_url}/users.php" method="post" id="twofactorauthform" class="compact uk-form">
+    <fieldset>
+      <p class="form_message">{lang_tfa_enter_code}</p>
+
+      <dl class="form_block">
+        <dt><label for="users-twofactorauthform-code">{lang_tfa_code}</label></dt>
+        <dd><input type="text" name="tfa_code" id="users-twofactorauthform-code" class="size3"{xhtml}></dd>
+      </dl>
+
+      <div class="submit">
+        <button type="submit" value="{lang_tfa_authenticate}" class="uk-button uk-button-primary uk-margin-small-bottom">{lang_tfa_authenticate}</button>
+        <input type="hidden" name="uid" value="{uid}">
+        <input type="hidden" name="mode" value="twofactorauth"{xhtml}>
+        <input type="hidden" name="{token_name}" value="{token_value}"{xhtml}>
+      </div>
+   </fieldset>
+  </form>
+{end_block}
+
+{# end {templatelocation} #}
diff --git a/public_html/layout/modern_curve/preferences/profile.thtml b/public_html/layout/modern_curve/preferences/profile.thtml
@@ -58,6 +58,58 @@
   </fieldset>
 </div>
 
+{!if enable_twofactorauth}
+<div>
+  <fieldset>
+    <legend>{lang_tfa_two_factor_auth}</legend>
+
+    <div class="compact">
+      <div class="profile_notes uk-panel uk-panel-box">
+        <div class="uk-panel-title">
+          <i class="uk-icon-info-circle uk-text-primary"></i>
+          <span>{lang_tfa_two_factor_auth}</span>
+        </div>
+        <ol>
+          <li>{lang_tfa_help1}</li>
+          <li>{lang_tfa_help2}</li>
+          <li>{lang_tfa_help3}</li>
+          <li>{lang_tfa_help4}</li>
+          <li>{lang_tfa_help5}</li>
+        </ol>
+      </div>
+
+      <dl class="form_block">
+        <dt><label for="enable_tfa">{lang_enable_twofactorauth}</label></dt>
+        <dd>
+          <select name="enable_tfa" id="enable_tfa">
+            {enable_tfa_options}
+          </select>
+        </dd>
+
+        <dt><label for="tfa_qrcode">{lang_tfa_qrcode}</label></dt>
+        <dd>
+          <a id="tfa_flip_qrcode" href="#">{lang_tfa_show_hide}</a><br{xhtml}>
+          <img class="tfa" src="{qrcode_data}" alt="" id="tfa_qrcode"{xhtml}>
+        </dd>
+
+        <dt><label for="tfa_backup_code">{lang_tfa_backup_code}</label></dt>
+        <dd>
+          <ul>
+            <li><a id="tfa_flip_backupcodes" href="#">{lang_tfa_show_hide}</a></li>
+            <li><a id="tfa_download_backupcodes" href="{site_url}/usersettings.php?mode=download_backupcodes&amp;{token_name}={token_value}">{lang_tfa_download}</a></li>
+            <li><a id="tfa_generate_backupcodes" href="{site_url}/usersettings.php?mode=generate_backupcodes&amp;{token_name}={token_value}" onclick="return window.confirm('{tfa_generate_confirm}');">{lang_tfa_new_backup_code}</a></li>
+          </ul>
+
+          <ul class="tfa" id="tfa_backupcodes">
+            {backup_codes}
+          </ul>
+        </dd>
+      </dl>
+    </div>
+  </fieldset>
+</div>
+{!endif}
+
 <div id="pe_userinfo" class="jsenabled_hide">
   <fieldset>
     <legend>{lang_personal_info_legend}</legend>

diff --git a/public_html/layout/modern_curve/users/twofactorauthform.thtml b/public_html/layout/modern_curve/users/twofactorauthform.thtml
@@ -0,0 +1,23 @@
+{# start {templatelocation} #}
+
+{start_block_twofactorauth}
+<form action="{site_url}/users.php" method="post" id="twofactorauthform" class="compact uk-form">
+    <fieldset>
+        <p class="form_message">{lang_tfa_enter_code}</p>
+
+        <dl class="form_block">
+            <dt><label for="users-twofactorauthform-code">{lang_tfa_code}</label></dt>
+            <dd><input type="text" name="tfa_code" id="users-twofactorauthform-code"{xhtml}></dd>
+        </dl>
+
+        <div class="submit">
+            <button type="submit" value="{lang_tfa_authenticate}">{lang_tfa_authenticate}</button>
+            <input type="hidden" name="uid" value="{uid}">
+            <input type="hidden" name="mode" value="twofactorauth"{xhtml}>
+            <input type="hidden" name="{token_name}" value="{token_value}"{xhtml}>
+        </div>
+    </fieldset>
+</form>
+{end_block}
+
+{# end {templatelocation} #}