unify user preferences views

app/assets/javascripts/discourse/templates/preferences-email.hbs

@@ -1,4 +1,4 @@
-<section class='user-right user-preferences'>
+<section class='user-preferences'>
   <form class="form-horizontal">
 
     <div class="control-group">
@@ -9,6 +9,7 @@
 
     {{#if success}}
       <div class="control-group">
+        <div class="controls">
           <div class="instructions">
             <p>
               {{#if model.staff}}
@@ -19,10 +20,11 @@
             </p>
           </div>
         </div>
+      </div>
     {{else}}
       {{#if error}}
         <div class="control-group">
-          <div class="instructions">
+          <div class="controls">
             <div class='alert alert-error'>{{errorMessage}}</div>
           </div>
         </div>
@@ -34,6 +36,7 @@
           {{text-field value=newEmail id="change-email" classNames="input-xxlarge" autofocus="autofocus"}}
           {{input-tip validation=emailValidation}}
         </div>
+        <div class="controls">
           <div class='instructions'>
             {{#if taken}}
               {{i18n 'user.change_email.taken'}}
@@ -42,6 +45,7 @@
             {{/if}}
           </div>
         </div>
+      </div>
 
       <div class="control-group">
         <div class="controls">

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

@@ -1,7 +1,11 @@
-<section class="user-content user-preferences second-factor-backup-preferences">
+<section class="user-preferences second-factor-backup-preferences">
   <form class="form-horizontal">
-    <h2>{{i18n "user.second_factor_backup.title"}}</h2>
 
+    <div class="control-group">
+      <div class="controls">
+        <h3>{{i18n "user.second_factor_backup.title"}}</h3>
+      </div>
+      <div class="controls">
         {{#if successMessage}}
           <div class="alert alert-success">
             {{successMessage}}
@@ -13,13 +17,25 @@
             {{errorMessage}}
           </div>
         {{/if}}
+      </div>
+    </div>
 
-    <div class="second-factor-form">
+    <label class='control-label'>{{i18n 'user.second_factor.label'}}</label>
+    <div class="control-group">
+      <div class="controls">
         {{second-factor-input
           value=secondFactorToken
           maxlength=6
           inputId="second-factor-token"}}
 
+        <div class='instructions'>
+          {{i18n "user.second_factor.disable_description"}}
+        </div>
+      </div>
+    </div>
+
+    <div class="control-group">
+      <div class="controls">
         <div class="actions">
             {{d-button
               action="generateSecondFactorCodes"
@@ -34,11 +50,6 @@
               label="user.second_factor_backup.disable"}}
           {{/if}}
         </div>
-    </div>
-
-    <div class="instructions">
-      {{i18n "user.second_factor.disable_description"}}
-    </div>
 
         {{#conditional-loading-section isLoading=loading}}
           {{#if backupCodes}}
@@ -51,11 +62,13 @@
             {{backup-codes
               copyBackupCode=(action "copyBackupCode")
               backupCodes=backupCodes}}
-      {{/if}}
-    {{/conditional-loading-section}}
 
             {{#link-to "preferences.account" model.username}}
               {{i18n "go_back"}}
             {{/link-to}}
+          {{/if}}
+        {{/conditional-loading-section}}
+      </div>
+    </div>
   </form>
 </section>

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

@@ -1,5 +1,6 @@
-<section class='user-content user-preferences'>
+<section class='user-preferences'>
   <form class="form-horizontal">
+
     <div class="control-group">
       <div class="controls">
         <h3>{{i18n 'user.second_factor.title'}}</h3>
@@ -8,7 +9,7 @@
 
     {{#if errorMessage}}
       <div class="control-group">
-        <div class="instructions">
+        <div class="controls">
           <div class='alert alert-error'>{{errorMessage}}</div>
         </div>
       </div>
@@ -22,7 +23,7 @@
           {{second-factor-input value=secondFactorToken inputId='second-factor-token'}}
         </div>
 
-        <div class='instructions'>
+        <div class='instructions controls'>
           {{i18n 'user.second_factor.disable_description'}}
         </div>
       </div>
@@ -97,7 +98,7 @@
                 autofocus="autofocus"}}
           </div>
 
-          <div class='instructions'>
+          <div class='instructions controls'>
             {{i18n 'user.second_factor.confirm_password_description'}}
           </div>
         </div>

app/assets/javascripts/discourse/templates/preferences-username.hbs

@@ -1,4 +1,4 @@
-<section class='user-content'>
+<section class='user-preferences'>
   <form class="form-horizontal">
 
     <div class="control-group">

app/assets/stylesheets/common/base/user.scss

@@ -563,11 +563,6 @@
       margin-right: 10px;
     }
 
-    .second-factor-form {
-      display: flex;
-      align-items: center;
-    }
-
     .form-horizontal .instructions {
       margin-left: 0;
     }

app/assets/stylesheets/desktop/user.scss

@@ -292,10 +292,6 @@
     margin-top: 0;
   }
 
-  .form-horizontal .instructions {
-    margin-left: 8px;
-  }
-
   .pref-mailing-list-mode .controls {
     select {
       width: 400px;

test/javascripts/acceptance/preferences-test.js.es6

@@ -125,7 +125,7 @@ QUnit.test("second factor", assert => {
   });
 
   fillIn("#password", "secrets");
-  click(".user-content .btn-primary");
+  click(".user-preferences .btn-primary");
 
   andThen(() => {
     assert.ok(exists("#test-qr"), "shows qr code");
@@ -156,7 +156,7 @@ QUnit.test("second factor backup", assert => {
   });
 
   fillIn("#second-factor-token", "111111");
-  click(".second-factor-form .btn-primary");
+  click(".user-preferences .btn-primary");
 
   andThen(() => {
     assert.ok(exists(".backup-codes-area"), "shows backup codes");