From 56a1caaacbcf51879e6115e571b27fcc218fde28 Mon Sep 17 00:00:00 2001 From: Waheed Ahmed Date: Wed, 6 Jan 2021 12:36:55 +0500 Subject: [PATCH] Make logistration pages responsive. (#69) Made logistration pages response for smaller devices using paragon components and bootstrap classes. VAN-222 --- .../NotFoundPage.jsx | 2 +- src/common-components/index.jsx | 1 + src/forgot-password/ForgotPasswordPage.jsx | 65 +- .../RequestInProgressAlert.jsx | 9 +- .../ForgotPasswordPage.test.jsx.snap | 481 ++--- src/index.jsx | 6 +- src/logistration/Alert.jsx | 30 - src/logistration/ConfirmationAlert.jsx | 4 +- src/logistration/InstitutionLogistration.jsx | 33 +- src/logistration/LoginPage.jsx | 97 +- src/logistration/RegistrationFailure.jsx | 7 +- src/logistration/RegistrationPage.jsx | 254 +-- src/logistration/_style.scss | 46 +- src/logistration/index.js | 1 - src/logistration/tests/LoginPage.test.jsx | 3 +- .../ConfirmationAlert.test.jsx.snap | 10 +- .../__snapshots__/LoginPage.test.jsx.snap | 1015 +++++----- .../RegistrationPage.test.jsx.snap | 1766 +++++++++-------- src/reset-password/InvalidToken.jsx | 54 +- src/reset-password/ResetFailure.jsx | 31 +- src/reset-password/ResetPasswordPage.jsx | 26 +- src/reset-password/ResetSuccess.jsx | 40 +- .../ResetPasswordPage.test.jsx.snap | 240 +-- 23 files changed, 1965 insertions(+), 2256 deletions(-) rename src/{logistration => common-components}/NotFoundPage.jsx (88%) delete mode 100644 src/logistration/Alert.jsx diff --git a/src/logistration/NotFoundPage.jsx b/src/common-components/NotFoundPage.jsx similarity index 88% rename from src/logistration/NotFoundPage.jsx rename to src/common-components/NotFoundPage.jsx index 14258ce1..5386f9d1 100644 --- a/src/logistration/NotFoundPage.jsx +++ b/src/common-components/NotFoundPage.jsx @@ -4,7 +4,7 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n'; export default function NotFoundPage() { return (
-

+

{ }) => ( <> {status === 'complete' ? : null} -

-
-
-
- {status === 'forbidden' ? : null} -

- {intl.formatMessage(messages['logisration.forgot.password.page.heading'])} -

-

- {intl.formatMessage(messages['logisration.forgot.password.page.instructions'])} -

-
- - - validateEmail(e, setFieldValue)} - style={{ width: '400px' }} - /> - -
+
+
+ + {status === 'forbidden' ? : null} +

+ {intl.formatMessage(messages['logisration.forgot.password.page.heading'])} +

+

+ {intl.formatMessage(messages['logisration.forgot.password.page.instructions'])} +

+ + + {intl.formatMessage(messages['logisration.forgot.password.page.email.field.label'])} + + validateEmail(e, setFieldValue)} + />

{intl.formatMessage(messages['logisration.forgot.password.page.email.field.help.text'])}

- -
+ + ( - } - > + +
-
-

+

+ Please enter your log-in or recovery email address below and we will send you an email with instructions. +

+
+

-

- Please enter your log-in or recovery email address below and we will send you an email with instructions. -

-
-
- - -
-
+ Email + +

The email address you used to register with edX.

- + /> + + Need other help signing in? + +
-
-
+ />
+ /> + + Need other help signing in? + +
-
-
+ />
+ /> + + Need other help signing in? + +
-
-
+ />
- ); -} - -Alert.propTypes = { - className: PropTypes.string, - icon: PropTypes.node, - children: PropTypes.node, -}; - -Alert.defaultProps = { - className: undefined, - icon: undefined, - children: undefined, -}; - -export default Alert; diff --git a/src/logistration/ConfirmationAlert.jsx b/src/logistration/ConfirmationAlert.jsx index 36af6c33..8d40e400 100644 --- a/src/logistration/ConfirmationAlert.jsx +++ b/src/logistration/ConfirmationAlert.jsx @@ -25,13 +25,13 @@ const ConfirmationAlert = (props) => { -

+ -

+ { @@ -34,25 +34,22 @@ const InstitutionLogistration = props => { return ( <> -
-
-

+

+
+

{headingTitle} +

+

+ {intl.formatMessage(messages['logistration.institution.login.page.sub.heading'])}

-
-

- {intl.formatMessage(messages['logistration.institution.login.page.sub.heading'])} -

-
- -
+
+
    + {secondaryProviders.map(provider => ( +
  • + {provider.name} +
    • + ))} +

or

diff --git a/src/logistration/LoginPage.jsx b/src/logistration/LoginPage.jsx index 06f631c4..b770fed2 100644 --- a/src/logistration/LoginPage.jsx +++ b/src/logistration/LoginPage.jsx @@ -1,7 +1,9 @@ import React from 'react'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; -import { Input, StatefulButton, ValidationFormGroup } from '@edx/paragon'; +import { + Form, Hyperlink, Input, StatefulButton, ValidationFormGroup, +} from '@edx/paragon'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; @@ -138,8 +140,8 @@ class LoginPage extends React.Component { redirectUrl={this.props.loginResult.redirectUrl} finishAuthUrl={thirdPartyAuthContext.finishAuthUrl} /> -
-
+
+
{thirdPartyAuthContext.currentProvider && ( ) : null } - -
-
- - - this.handleOnChange(e)} - style={{ width: '400px' }} - /> - -
+ + + + {intl.formatMessage(messages['logistration.login.page.email.label'])} + + this.handleOnChange(e)} + />

{intl.formatMessage(messages['logistration.email.help.message'])}

-
- - - this.handleOnChange(e)} - style={{ width: '400px' }} - /> - -
- - - {intl.formatMessage(messages['logistration.enterprise.login.link.text'])} - -
+ + + + {intl.formatMessage(messages['logistration.password'])} + + this.handleOnChange(e)} + /> + + + + {intl.formatMessage(messages['logistration.enterprise.login.link.text'])} + - + {thirdPartyAuthContext.providers.length && !thirdPartyAuthContext.currentProvider ? ( <>
diff --git a/src/logistration/RegistrationFailure.jsx b/src/logistration/RegistrationFailure.jsx index 6778309b..6f5901e2 100644 --- a/src/logistration/RegistrationFailure.jsx +++ b/src/logistration/RegistrationFailure.jsx @@ -1,7 +1,6 @@ import React, { useEffect } from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from '@edx/frontend-platform/i18n'; - import { Alert } from '@edx/paragon'; const RegistrationFailureMessage = (props) => { @@ -16,7 +15,7 @@ const RegistrationFailureMessage = (props) => { const errors = errorMessage[key]; const errorList = errors.map((error) => ( (error.user_message) ? ( -
  • +
  • {error.user_message}
    • ) : null @@ -26,13 +25,13 @@ const RegistrationFailureMessage = (props) => { return ( -

    + -

    +
      {userErrors} diff --git a/src/logistration/RegistrationPage.jsx b/src/logistration/RegistrationPage.jsx index 1b818227..dd5dbec9 100644 --- a/src/logistration/RegistrationPage.jsx +++ b/src/logistration/RegistrationPage.jsx @@ -446,145 +446,147 @@ class RegistrationPage extends React.Component { redirectUrl={this.props.registrationResult.redirectUrl} finishAuthUrl={finishAuthUrl} /> -
      - {this.renderErrors()} - {currentProvider && ( - - )} -
      - {intl.formatMessage(messages['logistration.already.have.an.edx.account'])} - {intl.formatMessage(messages['logistration.sign.in.hyperlink'])} -
      - {(providers.length || secondaryProviders.length) && !currentProvider ? ( -
      - - {intl.formatMessage(messages['logistration.create.an.account.using'])} - -
      - -
      - +
      + {this.renderErrors()} + {currentProvider && ( + - - {intl.formatMessage(messages['logistration.create.a.new.one.here'])} - + )} +
      + {intl.formatMessage(messages['logistration.already.have.an.edx.account'])} + {intl.formatMessage(messages['logistration.sign.in.hyperlink'])}
      - ) : null} -
      - - - this.handleOnChange(e)} - onBlur={e => this.handleOnBlur(e)} - required - /> - - - - this.handleOnChange(e)} - onBlur={e => this.handleOnBlur(e)} - required - /> - - - - this.handleOnChange(e)} - onBlur={e => this.handleOnBlur(e)} - required - /> - - {!currentProvider && ( + {(providers.length || secondaryProviders.length) && !currentProvider ? ( +
      + + {intl.formatMessage(messages['logistration.create.an.account.using'])} + +
      + +
      + + + {intl.formatMessage(messages['logistration.create.a.new.one.here'])} + +
      + ) : null} + - - )} - { this.addExtraRequiredFields() } - - this.handleOnOptional(e)} - required + + + this.handleOnChange(e)} + onBlur={e => this.handleOnBlur(e)} + required + /> + + + + this.handleOnChange(e)} + onBlur={e => this.handleOnBlur(e)} + required + /> + + {!currentProvider && ( + + + this.handleOnChange(e)} + onBlur={e => this.handleOnBlur(e)} + required + /> + + )} + { this.addExtraRequiredFields() } + + this.handleOnOptional(e)} + required + /> + + + { this.state.enableOptionalField ? this.addExtraOptionalFields() : null} + - - - { this.state.enableOptionalField ? this.addExtraOptionalFields() : null} - - + +
      ); diff --git a/src/logistration/_style.scss b/src/logistration/_style.scss index 5c4b8679..393b552d 100644 --- a/src/logistration/_style.scss +++ b/src/logistration/_style.scss @@ -14,17 +14,6 @@ $microsoft-focus-black: #000; $apple-black: #000000; $apple-focus-black: $apple-black; -.login-container { - margin: 4rem; - line-height: 1.5; -} - -.register-container { - @extend .login-container; - - width: 30rem; -} - .logistration-header { border-bottom: 1px solid #e7e7e7; height: 3.75rem; @@ -226,3 +215,38 @@ $apple-focus-black: $apple-black; .full-vertical-height{ height: 100vh; } + +.help-links { + margin-left: -5px; +} + +.mw-420 { + max-width: 420px; +} + +.mw-500 { + max-width: 500px; +} + +.mw-32em { + max-width: 32em; +} + +@media (min-width: 576px) { + .reset-password-container { + width: 420px; + max-width: 420px; + } +} + +@media (max-width: 450px) { + .section-heading-line { + position: relative; + text-align: center; + + &:before, + &:after { + width: 10%; + } + } +} diff --git a/src/logistration/index.js b/src/logistration/index.js index 9032553c..a9e89934 100644 --- a/src/logistration/index.js +++ b/src/logistration/index.js @@ -3,4 +3,3 @@ export { default as RegistrationPage } from './RegistrationPage'; export { default as reducer } from './data/reducers'; export { default as saga } from './data/sagas'; export { storeName } from './data/selectors'; -export { default as NotFoundPage } from './NotFoundPage'; diff --git a/src/logistration/tests/LoginPage.test.jsx b/src/logistration/tests/LoginPage.test.jsx index 3df38d32..93afdd1f 100644 --- a/src/logistration/tests/LoginPage.test.jsx +++ b/src/logistration/tests/LoginPage.test.jsx @@ -123,9 +123,10 @@ describe('LoginPage', () => { }); it('updates the error state for invalid email', () => { - const errorState = { email: null, password: null }; + const errorState = { email: null, password: '' }; const loginPage = mount(reduxWrapper()); + loginPage.find('input#loginPassword').simulate('change', { target: { value: 'test', name: 'password' } }); loginPage.find('button.submit').simulate('click'); expect(loginPage.find('LoginPage').state('errors')).toEqual(errorState); }); diff --git a/src/logistration/tests/__snapshots__/ConfirmationAlert.test.jsx.snap b/src/logistration/tests/__snapshots__/ConfirmationAlert.test.jsx.snap index 1aeaf531..fe157cdd 100644 --- a/src/logistration/tests/__snapshots__/ConfirmationAlert.test.jsx.snap +++ b/src/logistration/tests/__snapshots__/ConfirmationAlert.test.jsx.snap @@ -5,17 +5,13 @@ exports[`ConfirmationAlert should match default confirmation message snapshot 1` className="fade alert alert-success show" role="alert" > -

      Check Your Email -

      +
      You entered diff --git a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap b/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap index 959bd9e0..8fd13f12 100644 --- a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap +++ b/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap @@ -2,15 +2,10 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
      -
      -
      - - - - The email address you've provided isn't formatted correctly. - -
      -
      + Email + +

      The email address you used to register with edX.

      -
      -
      - - - - Please enter your password. - -
      -
      -
      +
      +
      + + /> + + Need help signing in? + +
      + + Sign in with your company or school +
      +
      +
      + + /> + + Need help signing in? + +
      + + Sign in with your company or school +
      +
      +
      + + /> + + Need help signing in? + +
      + + Sign in with your company or school +
      +
      +
      + + /> + + Need help signing in? + +
      + + Sign in with your company or school +
      +
      +
      + + /> + + Need help signing in? + +
      + + Sign in with your company or school + - +
      +
      + + Already have an edX account? + + + Sign in. + +
      +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + I agree to the Your Platform Name Here + + Honor Code + + + + You must agree to the Your Platform Name Here Honor Code + +
      +
      + + +
      + +
      +
      `; exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
      - - Already have an edX account? - - - Sign in. - -
      -
      - - Create an account using -
      + + Already have an edX account? + + + Sign in. + +
      +
      + + Create an account using + +
      + +
      + + or create a new one here + +
      +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + I agree to the Your Platform Name Here + + Honor Code + + + + You must agree to the Your Platform Name Here Honor Code + +
      +
      + + +
      -
      - - or create a new one here - +
      -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - I agree to the Your Platform Name Here - - Honor Code - - - - You must agree to the Your Platform Name Here Honor Code - -
      -
      - - -
      - -
      `; exports[`./RegistrationPage.js should match default section snapshot 1`] = `
      - - Already have an edX account? - - - Sign in. - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - I agree to the Your Platform Name Here - - Honor Code - - - - You must agree to the Your Platform Name Here Honor Code - -
      -
      - - -
      - -
      + + Sign in. + +
      +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + I agree to the Your Platform Name Here + + Honor Code + + + + You must agree to the Your Platform Name Here Honor Code + +
      +
      + + +
      + +
      +
    `; exports[`./RegistrationPage.js should match pending button state snapshot 1`] = `
    - - Already have an edX account? - - - Sign in. - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - I agree to the Your Platform Name Here + + Already have an edX account? + - Honor Code + Sign in. - - - You must agree to the Your Platform Name Here Honor Code -
    -
    - -

    + + +

    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + I agree to the Your Platform Name Here + + Honor Code + + + + You must agree to the Your Platform Name Here Honor Code + +
    +
    + + +
    +
    - - + + +
    `; exports[`./RegistrationPage.js should show error message on 409 1`] = `
    -

    +
    + + We couldn't create your account. + +
    +
    +
      +
    • + It looks like test@gmail.com belongs to an existing account. Try again with a different email address. +
      • +
    • + It looks like test belongs to an existing account. Try again with a different username. +
      • +
    +
    +

    +
    - We couldn't create your account. + Already have an edX account? - -
    -
      -
    • - It looks like test@gmail.com belongs to an existing account. Try again with a different email address. -
      • -
    • - It looks like test belongs to an existing account. Try again with a different username. -
      • -
    -
    -
    -
    - - Already have an edX account? - - - Sign in. - -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - I agree to the Your Platform Name Here - Honor Code + Sign in. - - - You must agree to the Your Platform Name Here Honor Code -
    -
    - -

    + + +

    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + I agree to the Your Platform Name Here + + Honor Code + + + + You must agree to the Your Platform Name Here Honor Code + +
    +
    + + +
    +
    - - + + Create Account + + + +
    `; diff --git a/src/reset-password/InvalidToken.jsx b/src/reset-password/InvalidToken.jsx index 6295fe5d..a1f9d6c9 100644 --- a/src/reset-password/InvalidToken.jsx +++ b/src/reset-password/InvalidToken.jsx @@ -1,8 +1,6 @@ import React from 'react'; import { FormattedMessage } from '@edx/frontend-platform/i18n'; -import { Hyperlink } from '@edx/paragon'; - -import Alert from '../logistration/Alert'; +import { Alert, Hyperlink } from '@edx/paragon'; const InvalidTokenMessage = () => { const loginPasswordLink = ( @@ -15,31 +13,37 @@ const InvalidTokenMessage = () => { ); - const forgotPassword = (Forgot Password); + const forgotPassword = ( + + + + ); return ( -
    -
    -
    -
    - -

    - -

    +
    +
    +
    + + - -
    + + +
    diff --git a/src/reset-password/ResetFailure.jsx b/src/reset-password/ResetFailure.jsx index 50890860..b1fdcb67 100644 --- a/src/reset-password/ResetFailure.jsx +++ b/src/reset-password/ResetFailure.jsx @@ -1,29 +1,24 @@ import React from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage } from '@edx/frontend-platform/i18n'; - import { Alert } from '@edx/paragon'; const ResetFailureMessage = (props) => { const errorMessage = props.errors; return ( -
    -
    -
    -
    - -
    - -
    -     -
    +
    +
    +
    + + +
    diff --git a/src/reset-password/ResetPasswordPage.jsx b/src/reset-password/ResetPasswordPage.jsx index 00f69bfd..b146088f 100644 --- a/src/reset-password/ResetPasswordPage.jsx +++ b/src/reset-password/ResetPasswordPage.jsx @@ -1,7 +1,9 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { Input, StatefulButton, ValidationFormGroup } from '@edx/paragon'; +import { + Form, Input, StatefulButton, ValidationFormGroup, +} from '@edx/paragon'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { getQueryParameters } from '@edx/frontend-platform'; @@ -74,10 +76,10 @@ const ResetPasswordPage = (props) => { return ( <> {props.status === 'failure' ? : null} -
    -
    -
    -
    +
    +
    + +

    {intl.formatMessage(messages['logistration.reset.password.page.heading'])}

    @@ -89,27 +91,28 @@ const ResetPasswordPage = (props) => { for="reset-password-input" invalid={!passwordValid} invalidMessage={validationMessage} + className="w-100" > - + handleNewPasswordChange(e)} - style={{ width: '400px' }} /> - + { placeholder="" value={confirmPasswordInput} onChange={e => handleConfirmPasswordChange(e)} - style={{ width: '400px' }} />
    @@ -131,7 +133,7 @@ const ResetPasswordPage = (props) => { }} onClick={e => handleSubmit(e)} /> - +
    diff --git a/src/reset-password/ResetSuccess.jsx b/src/reset-password/ResetSuccess.jsx index 9798cb86..db5d5063 100644 --- a/src/reset-password/ResetSuccess.jsx +++ b/src/reset-password/ResetSuccess.jsx @@ -4,7 +4,7 @@ import { Alert } from '@edx/paragon'; const ResetSuccessMessage = () => { const loginPasswordLink = ( - + { ); return ( -
    -
    -
    -
    - - - - +
    +
    +
    + + - -
    + + +
    diff --git a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap index 86c275bf..336cd00b 100644 --- a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap +++ b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap @@ -2,56 +2,43 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1`] = `
    -
    -
    -

    - - Invalid Password Reset Link - -

    - - This password reset link is invalid. It may have been used already. To reset your password, go to the - - - sign-in - - - page and select - - Forgot Password - - -
    + + Invalid Password Reset Link +
    + + This password reset link is invalid. It may have been used already. To reset your password, go to the + + + sign-in + + + page and select + + + Forgot Password + + +
    @@ -60,21 +47,16 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1 exports[`ResetPasswordPage should match pending reset message section snapshot 1`] = `