UX: Improve indication of 2FA status in user's preferences.

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);

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}}
 

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