From e137b7f8367a16226cf9818f6b148d11ddd7a514 Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Fri, 23 Feb 2018 10:29:03 +0800
Subject: [PATCH] UX: Improve indication of 2FA status in user's preferences.

---
 .../controllers/preferences/account.js.es6    |  5 ++++
 .../templates/preferences/account.hbs         | 28 +++++++++++--------
 config/locales/client.en.yml                  |  4 +--
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/preferences/account.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/account.js.es6
index 9dc6083f15c..d8c54177d43 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/account.js.es6
+++ b/app/assets/javascripts/discourse/controllers/preferences/account.js.es6
@@ -40,6 +40,11 @@ export default Ember.Controller.extend(CanCheckEmails, PreferencesTabController,
     return !this.siteSettings.enable_sso && this.siteSettings.enable_local_logins;
   },
 
+  @computed("model.second_factor_enabled")
+  secondFactorStatusClass(secondFactorEnabled) {
+    return secondFactorEnabled ? 'tip good' : 'tip bad';
+  },
+
   actions: {
     save() {
       this.set('saved', false);
diff --git a/app/assets/javascripts/discourse/templates/preferences/account.hbs b/app/assets/javascripts/discourse/templates/preferences/account.hbs
index 225db632b9c..a9a367d3da1 100644
--- a/app/assets/javascripts/discourse/templates/preferences/account.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/account.hbs
@@ -69,21 +69,25 @@
 <div class="control-group pref-second-factor">
   <label class="control-label">{{i18n 'user.second_factor.title'}}</label>
 
-  <div class="controls">
-    {{#link-to "preferences.second-factor" class="btn"}}
-      {{#if model.second_factor_enabled}}
-        {{d-icon "unlock-alt"}}
-        {{i18n 'user.second_factor.disable'}}
-      {{else}}
-        {{d-icon "lock"}}
-        {{i18n 'user.second_factor.enable'}}
-      {{/if}}
-    {{/link-to}}
-  </div>
-
   <div class="instructions">
     <a href {{action "showTwoFactorModal"}}>{{i18n 'user.second_factor.info_prompt'}}</a>
   </div>
+
+  <div class="controls">
+    <b class="{{secondFactorStatusClass}}">
+      {{#if model.second_factor_enabled}}
+        {{i18n 'user.second_factor.enabled_status'}}
+        {{d-icon 'check'}}
+      {{else}}
+        {{i18n 'user.second_factor.disabled_status'}}
+        {{d-icon 'times'}}
+      {{/if}}
+    </b>
+
+    {{#link-to "preferences.second-factor" class="btn btn-small btn-icon pad-left no-text"}}
+      {{d-icon "pencil"}}
+    {{/link-to}}
+  </div>
 </div>
 {{/if}}
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 1f7d00b8059..877297c1981 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -710,8 +710,8 @@ en:
 
       second_factor:
         title: "Two Factor Authentication"
-        enable: "Enable Two Factor Authentication"
-        disable: "Disable Two Factor Authentication"
+        enabled_status: "Status: On"
+        disabled_status: "Status: Off"
         confirm_password_description: "Confirm your password to continue enabling Two Factor Authentication."
         enable_description: |
           To complete Two Factor Authentication setup, scan the following QR code