UX cleanup changes to 2FA flow.

app/assets/javascripts/admin/components/cancel-link.js.es6

@@ -0,0 +1,3 @@
+export default Ember.Component.extend({
+  tagName: ''
+});

app/assets/javascripts/discourse/controllers/preferences/account.js.es6

@@ -40,9 +40,9 @@ 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';
+  @computed
+  showTwoFactorModalText() {
+    return I18n.t('user.second_factor.title').toLowerCase();
   },
 
   actions: {

app/assets/javascripts/discourse/controllers/preferences/second-factor.js.es6

@@ -18,7 +18,17 @@ export default Ember.Controller.extend({
 
   @computed('loading')
   submitButtonText(loading) {
-    return loading ? 'loading' : 'submit';
+    return loading ? 'loading' : 'continue';
+  },
+
+  @computed('loading')
+  enableButtonText(loading) {
+    return loading ? 'loading' : 'enable';
+  },
+
+  @computed('loading')
+  disableButtonText(loading) {
+    return loading ? 'loading' : 'disable';
   },
 
   @computed

app/assets/javascripts/discourse/templates/components/cancel-link.hbs

@@ -0,0 +1,3 @@
+{{#link-to route args}}
+  {{i18n 'cancel'}}
+{{/link-to}}

app/assets/javascripts/discourse/templates/preferences-second-factor.hbs

@@ -15,7 +15,7 @@
     {{/if}}
 
     {{#if model.second_factor_enabled}}
-      <label class='control-label'>{{i18n 'login.second_factor_label'}}</label>
+      <label class='control-label'>{{i18n 'user.second_factor.label'}}</label>
 
       <div class="control-group">
         <div class="controls">
@@ -32,7 +32,9 @@
           {{d-button action="disableSecondFactor"
               class="btn btn-primary"
               disabled=loading
-              label=submitButtonText}}
+              label=disableButtonText}}
+
+          {{cancel-link route="preferences.account" args= model.username}}
         </div>
       </div>
     {{else}}
@@ -66,7 +68,7 @@
         </div>
 
         <div class="control-group">
-          <label class="control-label input-prepend">{{i18n 'login.second_factor_label'}}</label>
+          <label class="control-label input-prepend">{{i18n 'user.second_factor.label'}}</label>
 
           <div class="controls">
             {{second-factor-input value=secondFactorToken inputId='second-factor-token'}}
@@ -78,7 +80,9 @@
             {{d-button action="enableSecondFactor"
                 class="btn btn-primary"
                 disabled=loading
-                label=submitButtonText}}
+                label=enableButtonText}}
+
+            {{cancel-link route="preferences.account" args= model.username}}
           </div>
         </div>
       {{else}}
@@ -108,9 +112,12 @@
             {{d-button action="resetPassword"
                 class="btn"
                 disabled=resetPasswordLoading
+                icon="envelope"
                 label='user.change_password.action'}}
 
             {{resetPasswordProgress}}
+
+            {{cancel-link route="preferences.account" args= model.username}}
           </div>
         </div>
       {{/if}}

app/assets/javascripts/discourse/templates/preferences/account.hbs

@@ -63,27 +63,18 @@
         {{i18n 'user.change_password.action'}}
       {{/if}}
     </a>
+
     {{passwordProgress}}
   </div>
-</div>
 
-<div class="control-group pref-second-factor">
-  <label class="control-label">{{i18n 'user.second_factor.title'}}</label>
-
-  <div class="instructions">
-    <a href {{action "showTwoFactorModal"}}>{{i18n 'user.second_factor.info_prompt'}}</a>
-  </div>
-
-  <div class="controls">
-    <b class="{{secondFactorStatusClass}}">
+  <div class="controls pref-second-factor">
     {{#if model.second_factor_enabled}}
-        {{i18n 'user.second_factor.enabled_status'}}
-        {{d-icon 'check'}}
+      {{i18n 'user.second_factor.disable'}}
     {{else}}
-        {{i18n 'user.second_factor.disabled_status'}}
-        {{d-icon 'times'}}
+      {{i18n 'enable'}}
+      <a href {{action "showTwoFactorModal"}}>{{showTwoFactorModalText}}</a>
+      {{i18n 'user.second_factor.enable'}}
     {{/if}}
-    </b>
 
     {{#if isCurrentUser}}
       {{#link-to "preferences.second-factor" class="btn btn-small btn-icon pad-left no-text"}}

app/assets/stylesheets/desktop/user.scss

@@ -100,6 +100,10 @@
   }
 }
 
+.pref-second-factor {
+  margin-top: 10px;
+}
+
 .user-invite-list {
   width: 100%;
   margin-top: 15px;

app/controllers/users_controller.rb

@@ -970,7 +970,7 @@ class UsersController < ApplicationController
     )
 
     render json: success_json.merge(
-      key: current_user.user_second_factor.data,
+      key: current_user.user_second_factor.data.scan(/.{4}/).join(" "),
       qr: qrcode_svg
     )
   end

config/locales/client.en.yml

@@ -313,6 +313,7 @@ en:
 
     enable: "Enable"
     disable: "Disable"
+    continue: "Continue"
     undo: "Undo"
     revert: "Revert"
     failed: "Failed"
@@ -727,15 +728,14 @@ en:
 
       second_factor:
         title: "Two Factor Authentication"
-        disable: "Disable Two Factor Authentication"
-        enabled_status: "Status: On"
-        disabled_status: "Status: Off"
+        disable: "Disable two factor authentication"
+        enable: "for enhanced account security"
         confirm_password_description: "Please confirm your password to continue"
+        label: "Code"
         enable_description: |
           Scan this QR code in a supported app (<a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2" target="_blank">Android</a> – <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8" target="_blank">iOS</a> – <a href="https://www.microsoft.com/en-us/store/p/authenticator/9wzdncrfj3rj" target='_blank'>Windows Phone</a>) and enter your authentication code.
         disable_description: "Please enter the authentication code from your app:"
         show_key_description: "Enter manually"
-        info_prompt: "What is Two Factor Authentication?"
         extended_description: |
           Two factor authentication adds extra security to your account by requiring a one-time token in addition to your password. Tokens can be generated on <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2" target='_blank'>Android</a>, <a href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8">iOS</a>, and <a href="https://www.microsoft.com/en-us/store/p/authenticator/9wzdncrfj3rj" target='_blank'>Windows Phone</a> devices.
         oauth_enabled_warning: "Please note that social logins will be disabled once two factor authentication has been enabled on your account."
@@ -1131,9 +1131,8 @@ en:
       title: "Log In"
       username: "User"
       password: "Password"
-      second_factor_title: "Two Factor Authentication Required"
+      second_factor_title: "Two Factor Authentication"
       second_factor_description: "Please enter the authentication code from your app:"
-      second_factor_label: "Code"
       email_placeholder: "email or username"
       caps_lock_warning: "Caps Lock is on"
       error: "Unknown error"