UX: Separate section for 2FA settings, more consistent layout

UX: Separate section for 2FA settings, more consistent layout

diff --git a/app/assets/javascripts/discourse/templates/preferences/account.hbs b/app/assets/javascripts/discourse/templates/preferences/account.hbs
index 3e1b967..6fa346c 100644
--- a/app/assets/javascripts/discourse/templates/preferences/account.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/account.hbs
@@ -80,32 +80,38 @@
 
     {{passwordProgress}}
   </div>
+</div>
 
+<div class="control-group pref-second-factor">
+  <label class="control-label">{{i18n 'user.second_factor.title'}}</label>
+  {{#unless model.second_factor_enabled}}
+    <label>
+        {{i18n 'user.second_factor.short_description'}}
+    </label>
+  {{/unless}}
   <div class="controls pref-second-factor">
-    {{#if model.second_factor_enabled}}
-      {{i18n 'user.second_factor.disable'}}
-    {{else}}
-      {{i18n 'user.second_factor.enable'}}
-    {{/if}}
-
     {{#if isCurrentUser}}
-      {{#link-to "preferences.second-factor" class="btn btn-default btn-small btn-icon pad-left no-text"}}
-        {{d-icon "pencil-alt"}}
-      {{/link-to}}
+      {{#if model.second_factor_enabled}}
+        {{#link-to "preferences.second-factor" class="btn btn-default"}}
+          {{d-icon "unlock"}} {{i18n 'user.second_factor.disable'}}
+        {{/link-to}}
+      {{else}}
+        {{#link-to "preferences.second-factor" class="btn btn-default"}}
+          {{d-icon "lock"}} {{i18n 'user.second_factor.enable'}}
+        {{/link-to}}
+      {{/if}}
     {{/if}}
   </div>
 
   <div class="controls pref-second-factor-backup">
     {{#if model.second_factor_enabled}}
-      {{#if model.second_factor_backup_enabled}}
-        {{i18n 'user.second_factor_backup.manage'}}
-      {{else}}
-        {{i18n 'user.second_factor_backup.enable_long'}}
-      {{/if}}
-
       {{#if isCurrentUser}}
-        {{#link-to "preferences.second-factor-backup" class="btn btn-default btn-small btn-icon pad-left no-text"}}
-          {{d-icon "pencil-alt"}}
+        {{#link-to "preferences.second-factor-backup"}}
+        {{#if model.second_factor_backup_enabled}}
+          {{i18n 'user.second_factor_backup.manage'}}
+        {{else}}
+          {{i18n 'user.second_factor_backup.enable_long'}}
+        {{/if}}
         {{/link-to}}
       {{/if}}
     {{/if}}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index a2152ab..3064a8f 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -924,8 +924,8 @@ en:
 
       second_factor:
         title: "Two Factor Authentication"
-        disable: "Disable two factor authentication"
-        enable: "Enable two factor authentication for enhanced account security"
+        disable: "Disable Two Factor Authentication"
+        enable: "Enable Two Factor Authentication"
         confirm_password_description: "Please confirm your password to continue"
         label: "Code"
         rate_limit: "Please wait before trying another authentication code."
@@ -933,6 +933,8 @@ en:
           Scan this QR code in a supported app (<a href="https://www.google.com/search?q=authenticator+apps+for+android" target="_blank">Android</a> – <a href="https://www.google.com/search?q=authenticator+apps+for+ios" target="_blank">iOS</a>) and enter your authentication code.
         disable_description: "Please enter the authentication code from your app"
         show_key_description: "Enter manually"
+        short_description: |
+          Protect your account with one-time use security codes.
         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://www.google.com/search?q=authenticator+apps+for+android" target='_blank'>Android</a> and <a href="https://www.google.com/search?q=authenticator+apps+for+ios">iOS</a> devices.
         oauth_enabled_warning: "Please note that social logins will be disabled once two factor authentication has been enabled on your account."

GitHub sha: 33888729

Follow up to 33888729919ea68c2a927fe98a2ed0447151332a.