Merge pull request #5875 from hnb-ku/master

FEATURE: New design for the login / create account forms

app/assets/javascripts/discourse/templates/mobile/modal/login.hbs

@@ -14,7 +14,7 @@
           <table>
             <tr>
               <td>
-                <label for='login-account-name'>{{i18n 'login.username'}}&nbsp;</label>
+                <label for='login-account-name'>{{i18n 'login.username'}}</label>
               </td>
               <td>
                 {{text-field value=loginName type="email" placeholderKey="login.email_placeholder" id="login-account-name" autocorrect="off" autocapitalize="off"}}
@@ -32,10 +32,10 @@
             {{/if}}
             <tr>
               <td>
-                <label for='login-account-password'>{{i18n 'login.password'}}&nbsp;</label>
+                <label for='login-account-password'>{{i18n 'login.password'}}</label>
               </td>
               <td>
-                {{text-field value=loginPassword type="password" id="login-account-password" maxlength="200"}} &nbsp;
+                {{text-field value=loginPassword type="password" id="login-account-password" maxlength="200"}}
               </td>
             </tr>
             <tr>

app/assets/javascripts/discourse/templates/modal/create-account.hbs

@@ -1,13 +1,9 @@
 {{#create-account email=accountEmail disabled=submitDisabled action="createAccount"}}
-
   {{#unless complete}}
     {{#d-modal-body title="create_account.title"}}
-      {{#unless hasAuthOptions}}
+    
-        {{login-buttons externalLogin="externalLogin"}}
-      {{/unless}}
-
       {{#if showCreateForm}}
-        <div>
+        <div class="login-form">
           <form>
           <table>
 
@@ -15,12 +11,13 @@
                 <td class="label"><label for='new-account-email'>{{i18n 'user.email.title'}}</label></td>
                 <td>
                 {{input type="email" value=accountEmail id="new-account-email" disabled=emailValidated name="email" autofocus="autofocus"}}
-                &nbsp;{{input-tip validation=emailValidation}}
                 </td>
           </tr>
+          
           <tr class="instructions create-account-email">
             <td></td>
-            <td><label>{{i18n 'user.email.instructions'}}</label></td>
+                {{input-tip validation=emailValidation}}
+                <td><label>{{i18n 'user.email.instructions'}}</label></td>
           </tr>
 
           {{#if usernameRequired}}
@@ -28,11 +25,11 @@
                   <td class="label"><label for='new-account-username'>{{i18n 'user.username.title'}}</label></td>
                   <td>
                   {{input value=accountUsername id="new-account-username" name="username" maxlength=maxUsernameLength autocomplete="off"}}
-                  &nbsp;{{input-tip validation=usernameValidation id="username-validation"}}
                   </td>
             </tr>
             <tr class="instructions">
               <td></td>
+              {{input-tip validation=usernameValidation id="username-validation"}}
               <td><label>{{i18n 'user.username.instructions'}}</label></td>
             </tr>
           {{/if}}
@@ -43,11 +40,12 @@
                 <label for='new-account-name'>{{i18n 'user.name.title'}}</label>
               </td>
               <td>
-                {{text-field value=accountName id="new-account-name"}}&nbsp;{{input-tip validation=nameValidation}}
+                {{text-field value=accountName id="new-account-name"}}
               </td>
             </tr>
             <tr class="instructions">
               <td></td>
+              {{input-tip validation=nameValidation}}
               <td><label>{{nameInstructions}}</label></td>
             </tr>
           {{/if}}
@@ -63,14 +61,14 @@
                 <td class="label"><label for='new-account-password'>{{i18n 'user.password.title'}}</label></td>
                 <td>
                 {{password-field value=accountPassword type="password" id="new-account-password" capsLockOn=capsLockOn}}
-                &nbsp;{{input-tip validation=passwordValidation}}
                 </td>
             </tr>
             <tr class="instructions">
               <td></td>
+              {{input-tip validation=passwordValidation}}
               <td>
                 <label>{{passwordInstructions}}</label>
-                <div class="caps-lock-warning {{unless capsLockOn 'invisible'}}">
+                <div class="caps-lock-warning {{unless capsLockOn 'hidden'}}">
                   {{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}</div>
               </td>
             </tr>
@@ -97,6 +95,10 @@
           </form>
         </div>
       {{/if}}
+      
+      {{#unless hasAuthOptions}}
+        {{login-buttons externalLogin="externalLogin"}}
+      {{/unless}}
     {{/d-modal-body}}
 
     {{#if showCreateForm}}

app/assets/javascripts/discourse/templates/modal/login.hbs

@@ -1,12 +1,5 @@
 {{#login-modal screenX=lastX screenY=lastY loginName=loginName loginPassword=loginPassword loginSecondFactor=loginSecondFactor action="login"}}
   {{#d-modal-body title="login.title" class="login-modal"}}
-    {{#if showLoginButtons}}
-      {{login-buttons
-        canLoginLocalWithEmail=canLoginLocalWithEmail
-        processingEmailLink=processingEmailLink
-        emailLogin='emailLogin'
-        externalLogin='externalLogin'}}
-    {{/if}}
 
     {{#if canLoginLocal}}
       <form id='login-form' method='post'>
@@ -30,7 +23,7 @@
             </tr>
             <tr>
               <td></td>
-              <td><div class="caps-lock-warning {{unless capsLockOn 'invisible'}}">{{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}</div></td>
+              <td><div class="caps-lock-warning {{unless capsLockOn 'hidden'}}">{{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}</div></td>
               <td></td>
             </tr>
           </table>
@@ -42,6 +35,14 @@
     {{/if}}
     {{authMessage}}
     <div id='login-alert' class={{alertClass}}>{{alert}}</div>
+    
+    {{#if showLoginButtons}}
+      {{login-buttons
+        canLoginLocalWithEmail=canLoginLocalWithEmail
+        processingEmailLink=processingEmailLink
+        emailLogin='emailLogin'
+        externalLogin='externalLogin'}}
+    {{/if}}
   {{/d-modal-body}}
 
   <div class="modal-footer">

app/assets/stylesheets/desktop/login.scss

@@ -1,31 +1,118 @@
-// style that apply to the login popup
+// -webkit- prefix needed for 
+// flexbox on Safari 8
+// can be removed once support
+// for safari 8 is dropped
 
-#login-buttons {
+// shared styles used
-  button {
+// on both the login and
-    margin: 0 5px 5px 0;
+// create accont modals
-    min-width: 180px;
+.login-modal,
-    &:lang(zh_CN) {
+.create-account {
-      min-width: 200px;
+  #login-buttons:not(.hidden) {
+    display: -webkit-flex;
+    -webkit-flex-direction: column;
+    -webkit-justify-content: center;
+    -webkit-flex-basis: 50%;
+    -webkit-align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-basis: 50%;
+    align-items: center;
+    min-height: 200px;
+    border-left: 1px solid $primary-low;
+
+    button {
+      margin: 0.35em;
+      width: 160px;
+      &:lang(zh_CN) {
+        min-width: 200px;
+      }
     }
   }
-  margin-top: 10px;
-  margin-bottom: 20px;
-}
 
-// Create account
+  #login-form {
+    -webkit-flex: 1 0 auto;
+    flex: 1 0 auto;
+    padding: 1em 0;
+  }
 
-.create-account {
+  tr:not(.instructions) {
-  form {
+    td {
+      display: -webkit-flex;
+      display: flex;
+      padding: 5px 0 0 0;
+    }
+  }
+
+  tr.input label {
     margin-bottom: 0;
   }
-  table {
+}
-    width: 100%;
+
-  }
+// styles used on
-  tr.input {
+// login modal only
-    td {
+.d-modal.login-modal {
-      padding-top: 10px;
+  .modal-body,
+  #credentials {
+    display: -webkit-flex;
+    -webkit-align-items: center;
+    -webkit-justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    tr {
+      display: -webkit-flex;
+      -webkit-flex-direction: column;
+      display: flex;
+      flex-direction: column;
     }
-    input, label {
+  }
+}
+
+// styles used on the
+// create account
+// modal only
+.d-modal.create-account {
+  .modal-body {
+    display: -webkit-flex;
+    -webkit-justify-content: space-evenly;
+    display: flex;
+    justify-content: space-evenly;
+  }
+
+  .create-account-form tr {
+    display: -webkit-flex;
+    -webkit-flex-direction: column;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .login-form {
+    display: -webkit-flex;
+    -webkit-flex-basis: 50%;
+    -webkit-align-items: center;
+    display: flex;
+    flex-basis: 50%;
+    align-items: center;
+
+    tr:not(.password-confirmation) {
+      display: -webkit-flex;
+      -webkit-flex-direction: column;
+      display: flex;
+      flex-direction: column;
+      margin-top: 0.15em;
+    }
+  }
+
+  form {
+    margin: 0 auto;
+  }
+
+  tr.input {
+    input,
+    label {
       margin-bottom: 0;
     }
     .tip {
@@ -33,6 +120,72 @@
     }
   }
 
+  .tip {
+    &:not(:empty) + td {
+      display: none;
+    }
+
+    &:not(:empty),
+    &:empty + td {
+      min-height: 1.75em;
+      width: 240px;
+      font-size: $font-down-1;
+    }
+  }
+
+  .invites-show {
+    padding-top: 20px;
+
+    .two-col {
+      margin-top: 30px;
+    }
+    .col-image {
+      width: 200px;
+      img {
+        width: 200px;
+      }
+    }
+    .col-form {
+      margin-left: 200px;
+      .inline-invite-img {
+        display: none;
+      }
+    }
+    form {
+      .controls,
+      .input {
+        margin-left: 20px;
+      }
+      input,
+      label {
+        margin-bottom: 0;
+      }
+      .user-field .control-label:not(.checkbox-label) {
+        margin-left: 20px;
+      }
+    }
+  }
+
+  .password-reset,
+  .invites-show {
+    .col-form {
+      padding-left: 20px;
+    }
+    h2 {
+      margin-bottom: 12px;
+    }
+    .col-image img {
+      width: 200px;
+      height: 200px;
+    }
+  }
+
+  .password-reset {
+    .col-form {
+      padding-top: 40px;
+    }
+  }
+
   .tos-agree {
     margin-bottom: 12px;
   }
@@ -52,53 +205,3 @@
     padding-top: 20px;
   }
 }
-
-.password-reset, .invites-show {
-  .col-form {
-    padding-left: 20px;
-  }
-  h2 {
-    margin-bottom: 12px;
-  }
-  .col-image img {
-    width: 200px;
-    height: 200px;
-  }
-}
-
-.password-reset {
-  .col-form {
-    padding-top: 40px;
-  }
-}
-
-.invites-show {
-  padding-top: 20px;
-
-  .two-col {
-    margin-top: 30px;
-  }
-  .col-image {
-    width: 200px;
-    img {
-      width: 200px;
-    }
-  }
-  .col-form {
-    margin-left: 200px;
-    .inline-invite-img {
-      display: none;
-    }
-  }
-  form {
-    .controls, .input {
-      margin-left: 20px;
-    }
-    input, label {
-      margin-bottom: 0;
-    }
-    .user-field .control-label:not(.checkbox-label) {
-      margin-left: 20px;
-    }
-  }
-}

app/assets/stylesheets/mobile/login.scss

@@ -1,62 +1,175 @@
-// style that apply to the login popup
+// -webkit- prefix needed for 
+// flexbox on Safari 8
+// can be removed once support
+// for safari 8 is dropped
 
-.btn-social {
+// shared styles
-  width: 150px;
+// used in both login and
-  font-size: $font-up-1;
+// create account modals
-  overflow: hidden;
+.login-modal,
-  white-space: nowrap;
+.create-account {
-}
+  .modal-body {
-
+    display: -webkit-flex;
-#login-buttons {
+    -webkit-align-items: center;
-  button {
+    -webkit-flex-direction: column-reverse;
-    margin: 0 0 5px 0;
+    display: flex;
+    align-items: center;
+    flex-direction: column-reverse;
   }
-  display: inline-block;
-}
 
-#login-form {
+  .modal-inner-container {
- 
+    max-width: 350px;
-  label { float: left; display: block; }
+  }
-  textarea, input, select {
+
-    font-size: $font-up-1;
+  #login-buttons:not(.hidden) {
-    clear: left;
+    display: -webkit-flex;
-    margin-top: 0;
+    -webkit-flex-wrap: wrap;
+    -webkit-justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    padding-bottom: 1em;
+
+    button {
+      margin: 0.15em;
+      max-width: 50%;
+      min-width: 158px;
+      font-size: $font-up-1;
+      overflow: hidden;
+      white-space: nowrap;
     }
-  td { padding: 4px; }
+  }
-}
 
-a#new-account-link { white-space:nowrap; }
+  #login-form,
+  .login-form {
+    border-top: 1px solid $primary-low;
+  }
 
-// Create account
+  form {
+    display: -webkit-flex;
+    -webkit-justify-content: center;
+    display: flex;
+    justify-content: center;
+    width: 320px;
+  }
+
+  table {
+    width: 100%;
+    max-width: 90vw; // Iphone 5s
+    margin: 0 auto;
+  }
+
+  tr {
+    &.input td label {
+      margin-top: 0.75em;
+    }
+
+    &:not(.instructions) td {
+      padding: 2px 0 0 0;
+    }
+
+    &:not(.password-confirmation) {
+      display: -webkit-flex;
+      -webkit-flex-direction: column;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .tip {
+    &:not(:empty) + td {
+      display: none;
+    }
+
+    &:not(:empty),
+    &:empty + td {
+      font-size: $font-down-1;
+    }
+  }
+
+  .modal-body input[type="text"],
+  .modal-body input[type="email"],
+  .modal-body input[type="password"] {
+    margin-top: 0;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .modal-footer {
+    width: 330px;
+    box-sizing: border-box;
+    margin: 0 auto;
+  }
 
-.login-modal, .create-account {
   .btn-primary {
     margin-bottom: 10px;
     float: left;
   }
-}
 
-
+  .alert.alert-error {
-$label-width: 85px;
+    padding: 0.5em 1em;
-$input-width: 184px;
+    margin: 0;
-
-.create-account .modal-body {
-  input[type=text], input[type=email], input[type=password] {
-    display: inline-block;
-    margin-bottom: 5px;
-    margin-top: 10px;
-    width: $input-width;
   }
 
-  tr.instructions {
+  #new-account-link {
-    label {
+    white-space: nowrap;
-      color: dark-light-choose($primary-medium, $secondary-medium);
+  }
+}
+
+// Styles for the
+// login modal only
+.d-modal.login-modal {
+  .modal-body {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+  }
+
+  #credentials {
+    width: 100%;
+    tr {
+      display: -webkit-flex;
+      -webkit-flex-direction: column;
+      display: flex;
+      flex-direction: column;
     }
   }
 
-  tr.input {
+  #login-form {
-    td.label {
+    td {
-      width: $label-width;
+      padding: 0;
+      width: 100%;
+      margin: 0 auto;
+    }
+
+    label {
+      float: left;
+      display: block;
+    }
+    textarea,
+    input,
+    select {
+      font-size: $font-up-1;
+      clear: left;
+      margin-top: 0;
+    }
+  }
+
+  tr {
+    td label {
+      margin-top: 0.75em;
+      padding: 4px 0;
+    }
+  }
+}
+
+// styles for the
+// create account
+// modal only
+.create-account .modal-body {
+  tr.instructions {
+    label {
+      color: dark-light-choose($primary-medium, $secondary-medium);
     }
   }
 }
@@ -65,31 +178,17 @@ $input-width: 184px;
   .user-fields {
     margin-top: 10px;
     padding-top: 15px;
-    border-top: 1px solid #e9e9e9;
+    border-top: 1px solid $primary-low;
   }
 
   .user-field.confirm {
     margin-top: 10px;
     margin-bottom: 10px;
   }
-  
-  .user-field {
-    label {
-      width: $label-width;
-    }
-
-    input[type=text] {
-      margin-top: 0;
-      width: $input-width;
-    }
-    .controls {
-      margin-left: $label-width;
-    }
-  }
 }
 
-
+.password-reset,
-.password-reset, .invites-show {
+.invites-show {
   margin-top: 30px;
   .col-image {
     padding-top: 12px;
@@ -120,7 +219,6 @@ $input-width: 184px;
   }
 }
 
-
 .invites-show {
   .col-image {
     display: none;