Merge pull request #116 from edx/fix-scroll-login-page

fix scroll on login page errors

src/login/LoginFailure.jsx

@@ -16,7 +16,6 @@ import messages from './messages';
 const LoginFailureMessage = (props) => {
   const { intl } = props;
   const { context, errorCode, value } = props.loginError;
-
   let errorList;
 
   switch (errorCode) {

src/login/LoginPage.jsx

@@ -46,6 +46,7 @@ class LoginPage extends React.Component {
       passwordValid: false,
       formValid: false,
       institutionLogin: false,
+      isSubmitted: false,
     };
   }
 
@@ -69,6 +70,7 @@ class LoginPage extends React.Component {
 
   handleSubmit = (e) => {
     e.preventDefault();
+    this.setState({ isSubmitted: true });
     const params = (new URL(document.location)).searchParams;
     const payload = {
       email: this.state.email,
@@ -87,7 +89,6 @@ class LoginPage extends React.Component {
       this.validateInput('password', payload.password);
       return;
     }
-
     this.props.loginRequest(payload);
   }
 
@@ -118,6 +119,7 @@ class LoginPage extends React.Component {
   handleOnChange(e) {
     this.setState({
       [e.target.name]: e.target.value,
+      isSubmitted: false,
     });
     this.validateInput(e.target.name, e.target.value);
   }
@@ -191,6 +193,7 @@ class LoginPage extends React.Component {
                 />
               )}
               {this.props.loginError ? <LoginFailureMessage loginError={this.props.loginError} /> : null}
+              {this.state.isSubmitted ? window.scrollTo({ left: 0, top: 0, behavior: 'smooth' }) : null}
               {activationMsgType && <AccountActivationMessage messageType={activationMsgType} />}
               {this.props.forgotPassword.status === 'complete' ? <ConfirmationAlert email={this.props.forgotPassword.email} /> : null}
               <div className="d-flex flex-row">

src/login/tests/LoginPage.test.jsx

@@ -12,6 +12,10 @@ import LoginPage from '../LoginPage';
 import { RenderInstitutionButton } from '../../common-components';
 import { PENDING_STATE } from '../../data/constants';
 
+import LoginFailureMessage from '../LoginFailure';
+
+const IntlLoginFailureMessage = injectIntl(LoginFailureMessage);
+
 jest.mock('@edx/frontend-platform/analytics');
 
 analytics.sendTrackEvent = jest.fn();
@@ -320,4 +324,14 @@ describe('LoginPage', () => {
     const loginPage = mount(reduxWrapper(<IntlLoginPage {...props} />));
     expect(loginPage.find(<CookiePolicyBanner />)).toBeTruthy();
   });
+
+  it('form only be scrollable on submission', () => {
+    const loginPage = mount(reduxWrapper(<IntlLoginPage {...props} />));
+
+    loginPage.find('input#loginPassword').simulate('change', { target: { value: 'test@example.com', name: 'password' } });
+    loginPage.find('button.btn-brand').simulate('click');
+
+    expect(loginPage.find(<IntlLoginFailureMessage />)).toBeTruthy();
+    expect(loginPage.find('LoginPage').state('isSubmitted')).toEqual(true);
+  });
 });