Merge pull request #2142 from shinyichen/login

Fixed mobile layout for login and registration forms
adsabs · Apr 14, 2021 · a6b57a7 · a6b57a7
2 parents efa4dd6 + d4dca1f
commit a6b57a7
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 20 deletions.
diff --git a/src/js/widgets/authentication/templates/container.html b/src/js/widgets/authentication/templates/container.html
@@ -1,3 +1,4 @@
-<div class="form-container s-form-container  col-sm-10 col-sm-offset-1  col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
-
-</div>
+<div
+  class="form-container s-form-container  col-sm-10 col-sm-offset-1  col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3"
+  style="padding-right: 0;"
+></div>
diff --git a/src/js/widgets/authentication/templates/log-in.html b/src/js/widgets/authentication/templates/log-in.html
@@ -1,13 +1,9 @@
 <div class="panel panel-default">
   <legend class="panel-heading">
     Log in to ADS
-    <button class="show-register btn btn-default pull-right">
-      sign up for an account
-    </button>
     <div class="s-form-note">
       <i class="fa fa-info-circle" aria-hidden="true"></i> Your ADS Classic
-      credentials will not work here. <br />
-      You'll have to make a new account to access this system.
+      credentials will not work here. You'll have to make a new account to access this system.
     </div>
   </legend>
   <form class="panel-body">
@@ -35,18 +31,20 @@
       />
     </div>
 
+    <button class="btn btn-link show-reset-password-1">
+      Forgot your password?
+    </button>
+    <span class="help-block no-show s-help-block"></span>
+
     <div class="form-group has-feedback">
       <span class="help-block no-show s-help-block s-help-block-submit"></span>
       <button type="submit" class="btn btn-primary-faded submit-login">
         Submit
       </button>
     </div>
 
-    <div class="form-group">
-      <button class="btn btn-link show-reset-password-1">
-        Forgot your password?
-      </button>
-      <span class="help-block no-show s-help-block"></span>
+    <div style="display: flex; justify-content: center;">
+      <strong>Don't have an account yet?&nbsp;<a class="show-register">Register</a></strong>
     </div>
   </form>
 

diff --git a/src/js/widgets/authentication/templates/register.html b/src/js/widgets/authentication/templates/register.html
@@ -1,6 +1,5 @@
 <div class="panel panel-default">
             <legend class="panel-heading">Register for an ADS Account
-             <button class="show-login btn btn-default pull-right"> I already have an account </button>
             </legend>
     <form class="panel-body">
         <div class="form-group has-feedback">
@@ -27,6 +26,10 @@
             <span class="help-block no-show s-help-block"></span>
         </div>
 
+        <div style="display: flex; justify-content: center;">
+            <strong>Already have an account?&nbsp;<a class="show-login">Login</a></strong>
+        </div>
+
         <div class="form-group">
             <div class="g-recaptcha"></div>
         </div>

diff --git a/src/js/widgets/authentication/templates/reset-password-1.html b/src/js/widgets/authentication/templates/reset-password-1.html
@@ -1,6 +1,5 @@
 <div class="panel panel-default">
     <legend class="panel-heading"> Password Reset
-        <button class="show-login btn btn-default pull-right"> return to login form </button>
     </legend>
     <form class="panel-body">
         <div class="form-group has-feedback">
@@ -14,6 +13,10 @@
             <span class="help-block no-show s-help-block"></span>
         </div>
 
+        <div style="display: flex; justify-content: center;">
+            <strong><a class="show-login">Return to login form</a></strong>
+        </div>
+
         <div class="form-group">
             <div class="g-recaptcha"></div>
         </div>

diff --git a/test/mocha/js/widgets/authentication_widget.spec.js b/test/mocha/js/widgets/authentication_widget.spec.js
@@ -31,7 +31,7 @@ define([
 
       //should render nothing since there is no subview indicated in the view model
       expect(normalizeSpace($('#test').html())).to.eql(
-        '<div class="s-authentication-container row s-form-widget"><div class="form-container s-form-container col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3"> </div></div>'
+        '<div class="s-authentication-container row s-form-widget"><div class="form-container s-form-container col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3" style="padding-right: 0;"></div> </div>'
       );
 
       a.setSubView('login');
@@ -78,7 +78,7 @@ define([
 
       a.setSubView('login');
 
-      $('.show-register').click();
+      $('.show-register').trigger('click');
 
       expect(publishStub.args[0]).to.eql([
         '[Router]-Navigate-With-Trigger',
@@ -90,7 +90,7 @@ define([
 
       a.setSubView('reset-password-1');
 
-      $('.show-login').click();
+      $('.show-login').trigger('click');
 
       expect(publishStub.args[1]).to.eql([
         '[Router]-Navigate-With-Trigger',
@@ -102,7 +102,7 @@ define([
 
       a.setSubView('register');
 
-      $('.show-login').click();
+      $('.show-login').trigger('click');
 
       expect(publishStub.args[2]).to.eql([
         '[Router]-Navigate-With-Trigger',
@@ -114,7 +114,7 @@ define([
 
       a.setSubView('login');
 
-      $('.show-reset-password-1').click();
+      $('.show-reset-password-1').trigger('click');
 
       expect(publishStub.args[3]).to.eql([
         '[Router]-Navigate-With-Trigger',