From 766d742e6210a899caaf0d4ab1d3369ac3e96987 Mon Sep 17 00:00:00 2001 From: Waheed Ahmed Date: Wed, 27 Jan 2021 12:56:37 +0500 Subject: [PATCH] Incorporate UX review for login page. (#94) VAN-321 --- src/_style.scss | 10 +- .../InstitutionLogistration.jsx | 2 +- src/common-components/SocialAuthProviders.jsx | 8 +- .../SocialAuthProviders.test.jsx.snap | 13 +- src/login/LoginHelpLinks.jsx | 18 ++- src/login/LoginPage.jsx | 16 ++- src/login/tests/LoginPage.test.jsx | 4 +- .../__snapshots__/LoginPage.test.jsx.snap | 122 +++++++++++------- .../RegistrationPage.test.jsx.snap | 13 +- 9 files changed, 116 insertions(+), 90 deletions(-) diff --git a/src/_style.scss b/src/_style.scss index ef37356a..5db65fe9 100644 --- a/src/_style.scss +++ b/src/_style.scss @@ -91,12 +91,6 @@ $apple-focus-black: $apple-black; border-color: $facebook-blue; background-color: $facebook-blue; - .icon-image { - margin-left: 2px; - width: 20px; - height: 20px; - } - &:hover, &:focus { background-color: $facebook-focus-blue; @@ -255,6 +249,10 @@ $apple-focus-black: $apple-black; margin-top: 20px; } +.mb-20 { + margin-bottom: 20px; +} + .pt-10 { padding-top: 10px; } diff --git a/src/common-components/InstitutionLogistration.jsx b/src/common-components/InstitutionLogistration.jsx index 64fe87ed..042b4b7f 100644 --- a/src/common-components/InstitutionLogistration.jsx +++ b/src/common-components/InstitutionLogistration.jsx @@ -10,7 +10,7 @@ export const RenderInstitutionButton = props => { if (secondaryProviders !== undefined && secondaryProviders.length > 0) { return ( `; diff --git a/src/login/LoginHelpLinks.jsx b/src/login/LoginHelpLinks.jsx index 98c6bc2f..df5fa2d9 100644 --- a/src/login/LoginHelpLinks.jsx +++ b/src/login/LoginHelpLinks.jsx @@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons'; import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; import { getConfig } from '@edx/frontend-platform'; +import { Hyperlink } from '@edx/paragon'; import SwitchContent from '../common-components/SwitchContent'; import { @@ -28,23 +29,26 @@ const LoginHelpLinks = (props) => { }; const forgotPasswordLink = () => ( - - + {intl.formatMessage(messages['forgot.password.link'])} - + ); const signUpLink = () => ( - + {intl.formatMessage(messages['register.link'])} - + ); const loginIssueSupportURL = (config) => (config.LOGIN_ISSUE_SUPPORT_LINK ? ( - + {intl.formatMessage(messages['other.sign.in.issues'])} - + ) : null); diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx index 06f6a6db..b403af3c 100644 --- a/src/login/LoginPage.jsx +++ b/src/login/LoginPage.jsx @@ -199,15 +199,17 @@ class LoginPage extends React.Component {

-

+
+

{intl.formatMessage(messages['sign.in.heading'])} -

+
{intl.formatMessage(messages['email.label'])} @@ -220,7 +222,6 @@ class LoginPage extends React.Component { value={this.state.email} onChange={e => this.handleOnChange(e)} /> -

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

 - + {intl.formatMessage(messages['enterprise.login.link.text'])} {(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE) && !currentProvider ? ( -
-

{intl.formatMessage(messages['or.sign.in.with'])}

+
+
+ {intl.formatMessage(messages['or.sign.in.with'])}
) : null} {this.renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl)} diff --git a/src/login/tests/LoginPage.test.jsx b/src/login/tests/LoginPage.test.jsx index c1771f8e..71753459 100644 --- a/src/login/tests/LoginPage.test.jsx +++ b/src/login/tests/LoginPage.test.jsx @@ -146,7 +146,7 @@ describe('LoginPage', () => { const loginPage = mount(reduxWrapper()); loginPage.find('input#loginPassword').simulate('change', { target: { value: 'test', name: 'password' } }); - loginPage.find('button.btn-primary').simulate('click'); + loginPage.find('button.btn-brand').simulate('click'); expect(loginPage.find('LoginPage').state('errors')).toEqual(errorState); }); @@ -156,7 +156,7 @@ describe('LoginPage', () => { const loginPage = mount(reduxWrapper()); loginPage.find('input#loginEmail').simulate('change', { target: { value: 'test@example.com', name: 'email' } }); - loginPage.find('button.btn-primary').simulate('click'); + loginPage.find('button.btn-brand').simulate('click'); expect(loginPage.find('LoginPage').state('errors')).toEqual(errorState); }); diff --git a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap index 0fac4b49..f9ce811d 100644 --- a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap +++ b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap @@ -26,11 +26,14 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `

-

+

Sign In -

+ @@ -44,7 +47,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = ` Email -

The email address you used to register with edX. -

+
-

- or sign in with -

+
+ or sign in with
-
@@ -218,11 +224,14 @@ exports[`LoginPage should match default section snapshot 1`] = `

-

+

Sign In -

+
@@ -236,7 +245,7 @@ exports[`LoginPage should match default section snapshot 1`] = ` Email -

The email address you used to register with edX. -

+

-

+

Sign In -

+ @@ -432,7 +445,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = ` Email -

The email address you used to register with edX. -

+

-

+

Sign In -

+ @@ -590,7 +607,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = ` Email -

The email address you used to register with edX. -

+

-

+

Sign In -

+ @@ -773,7 +794,7 @@ exports[`LoginPage should show error message 1`] = ` Email -

The email address you used to register with edX. -

+ -