Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Incorporate UX review for login page. (#94)

Browse Source 
VAN-321
This commit is contained in:
Waheed Ahmed
2021-01-27 12:56:37 +05:00
committed by GitHub
parent 0c55724ab6
commit 766d742e62
9 changed files with 116 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/_style.scss
View File

@@ -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;
}

2
src/common-components/InstitutionLogistration.jsx
View File

@@ -10,7 +10,7 @@ export const RenderInstitutionButton = props => {
if (secondaryProviders !== undefined && secondaryProviders.length > 0) {
return (
<Button
className="mt-2"
className="w-auto mb-20"
block
variant="outline-primary"
onClick={onSubmitHandler}

8
src/common-components/SocialAuthProviders.jsx
View File

@@ -27,12 +27,10 @@ function SocialAuthProviders(props) {
onClick={handleSubmit}
>
{provider.iconImage ? (
<>
<div aria-hidden="true">
<img className="icon-image" src={provider.iconImage} alt={`icon ${provider.name}`} />
</div>
<div className="mx-auto" aria-hidden="true">
<img className="icon-image" src={provider.iconImage} alt={`icon ${provider.name}`} />
<span className="pl-2" aria-hidden="true">{provider.name}</span>
</>
</div>
)
: (
<>

13
src/common-components/tests/__snapshots__/SocialAuthProviders.test.jsx.snap
View File

@@ -88,18 +88,19 @@ exports[`SocialAuthProviders should match social auth provider with iconImage sn
>
<div
aria-hidden="true"
className="mx-auto"
>
<img
alt="icon Apple"
className="icon-image"
src="https://edx.devstack.lms/logo.png"
/>
<span
aria-hidden="true"
className="pl-2"
>
Apple
</span>
</div>
<span
aria-hidden="true"
className="pl-2"
>
Apple
</span>
</button>
`;

18
src/login/LoginHelpLinks.jsx
View File

@@ -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 = () => (
<a className="field-link" href={RESET_PAGE} onClick={handleForgotPasswordLinkClickEvent}>
<Hyperlink
className="field-link"
destination={RESET_PAGE}
onClick={handleForgotPasswordLinkClickEvent}
>
{intl.formatMessage(messages['forgot.password.link'])}
</a>
</Hyperlink>
);
const signUpLink = () => (
<a className="field-link" href={REGISTER_PAGE}>
<Hyperlink className="field-link" destination={REGISTER_PAGE}>
{intl.formatMessage(messages['register.link'])}
</a>
</Hyperlink>
);
const loginIssueSupportURL = (config) => (config.LOGIN_ISSUE_SUPPORT_LINK
? (
<a className="field-link" href={config.LOGIN_ISSUE_SUPPORT_LINK}>
<Hyperlink className="field-link" destination={config.LOGIN_ISSUE_SUPPORT_LINK}>
{intl.formatMessage(messages['other.sign.in.issues'])}
</a>
</Hyperlink>
)
: null);

16
src/login/LoginPage.jsx
View File

@@ -199,15 +199,17 @@ class LoginPage extends React.Component {
</Hyperlink>
</p>
</div>
<h2 className="text-left mt-2 mb-3">
<hr className="mt-0 border-gray-200" />
<h3 className="text-left mt-2 mb-3">
{intl.formatMessage(messages['sign.in.heading'])}
</h2>
</h3>
<Form className="m-0">
<ValidationFormGroup
for="email"
invalid={this.state.errors.email !== ''}
invalidMessage={intl.formatMessage(messages['email.format.validation.message'])}
className="mb-0 w-100"
helpText={intl.formatMessage(messages['email.help.message'])}
>
<Form.Label htmlFor="loginEmail" className="h6 mr-1">
{intl.formatMessage(messages['email.label'])}
@@ -220,7 +222,6 @@ class LoginPage extends React.Component {
value={this.state.email}
onChange={e => this.handleOnChange(e)}
/>
<p className="mb-4">{intl.formatMessage(messages['email.help.message'])}</p>
</ValidationFormGroup>
<ValidationFormGroup
for="password"
@@ -240,12 +241,12 @@ class LoginPage extends React.Component {
/>
</ValidationFormGroup>
<LoginHelpLinks page={LOGIN_PAGE} />
<Hyperlink className="field-link mt-0 mb-3" destination={this.getEnterPriseLoginURL()}>
<Hyperlink className="field-link mt-0 mb-3 small" destination={this.getEnterPriseLoginURL()}>
{intl.formatMessage(messages['enterprise.login.link.text'])}
</Hyperlink>
<StatefulButton
type="submit"
className="btn-primary"
variant="brand"
state={submitState}
labels={{
default: intl.formatMessage(messages['sign.in.button']),
@@ -255,8 +256,9 @@ class LoginPage extends React.Component {
</Form>
{(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE)
&& !currentProvider ? (
<div className="mb-4 pt-10">
<h4>{intl.formatMessage(messages['or.sign.in.with'])}</h4>
<div className="mb-20">
<hr className="mt-20 mb-20 border-gray-200" />
{intl.formatMessage(messages['or.sign.in.with'])}
</div>
) : null}
{this.renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl)}

4
src/login/tests/LoginPage.test.jsx
View File

@@ -146,7 +146,7 @@ describe('LoginPage', () => {
const loginPage = mount(reduxWrapper(<IntlLoginPage {...props} />));
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(<IntlLoginPage {...props} />));
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);
});

122
src/login/tests/__snapshots__/LoginPage.test.jsx.snap
View File

@@ -26,11 +26,14 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
</a>
</p>
</div>
<h2
<hr
className="mt-0 border-gray-200"
/>
<h3
className="text-left mt-2 mb-3"
>
Sign In
</h2>
</h3>
<form
className="m-0"
>
@@ -44,7 +47,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
Email
</label>
<input
aria-describedby=""
aria-describedby="email-help-text"
className="form-control"
id="loginEmail"
name="email"
@@ -53,11 +56,12 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
type="email"
value=""
/>
<p
className="mb-4"
<small
className="form-text text-muted"
id="email-help-text"
>
The email address you used to register with edX.
</p>
</small>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
@@ -131,7 +135,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
/>
</div>
<a
className="field-link mt-0 mb-3"
className="field-link mt-0 mb-3 small"
href="http://localhost:18000/enterprise/login"
onClick={[Function]}
target="_self"
@@ -141,7 +145,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
disabled={false}
onClick={[Function]}
type="submit"
@@ -154,11 +158,12 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
</button>
</form>
<div
className="mb-4 pt-10"
className="mb-20"
>
<h4>
or sign in with
</h4>
<hr
className="mt-20 mb-20 border-gray-200"
/>
or sign in with
</div>
<div
className="row tpa-container"
@@ -172,19 +177,20 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
>
<div
aria-hidden="true"
className="mx-auto"
>
<img
alt="icon Apple"
className="icon-image"
src="https://edx.devstack.lms/logo.png"
/>
<span
aria-hidden="true"
className="pl-2"
>
Apple
</span>
</div>
<span
aria-hidden="true"
className="pl-2"
>
Apple
</span>
</button>
</div>
</div>
@@ -218,11 +224,14 @@ exports[`LoginPage should match default section snapshot 1`] = `
</a>
</p>
</div>
<h2
<hr
className="mt-0 border-gray-200"
/>
<h3
className="text-left mt-2 mb-3"
>
Sign In
</h2>
</h3>
<form
className="m-0"
>
@@ -236,7 +245,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
Email
</label>
<input
aria-describedby=""
aria-describedby="email-help-text"
className="form-control"
id="loginEmail"
name="email"
@@ -245,11 +254,12 @@ exports[`LoginPage should match default section snapshot 1`] = `
type="email"
value=""
/>
<p
className="mb-4"
<small
className="form-text text-muted"
id="email-help-text"
>
The email address you used to register with edX.
</p>
</small>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
@@ -323,7 +333,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
/>
</div>
<a
className="field-link mt-0 mb-3"
className="field-link mt-0 mb-3 small"
href="http://localhost:18000/enterprise/login"
onClick={[Function]}
target="_self"
@@ -333,7 +343,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
disabled={false}
onClick={[Function]}
type="submit"
@@ -414,11 +424,14 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
</a>
</p>
</div>
<h2
<hr
className="mt-0 border-gray-200"
/>
<h3
className="text-left mt-2 mb-3"
>
Sign In
</h2>
</h3>
<form
className="m-0"
>
@@ -432,7 +445,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
Email
</label>
<input
aria-describedby=""
aria-describedby="email-help-text"
className="form-control"
id="loginEmail"
name="email"
@@ -441,11 +454,12 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
type="email"
value=""
/>
<p
className="mb-4"
<small
className="form-text text-muted"
id="email-help-text"
>
The email address you used to register with edX.
</p>
</small>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
@@ -519,7 +533,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
/>
</div>
<a
className="field-link mt-0 mb-3"
className="field-link mt-0 mb-3 small"
href="http://localhost:18000/enterprise/login"
onClick={[Function]}
target="_self"
@@ -529,7 +543,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
disabled={false}
onClick={[Function]}
type="submit"
@@ -572,11 +586,14 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
</a>
</p>
</div>
<h2
<hr
className="mt-0 border-gray-200"
/>
<h3
className="text-left mt-2 mb-3"
>
Sign In
</h2>
</h3>
<form
className="m-0"
>
@@ -590,7 +607,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
Email
</label>
<input
aria-describedby=""
aria-describedby="email-help-text"
className="form-control"
id="loginEmail"
name="email"
@@ -599,11 +616,12 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
type="email"
value=""
/>
<p
className="mb-4"
<small
className="form-text text-muted"
id="email-help-text"
>
The email address you used to register with edX.
</p>
</small>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
@@ -677,7 +695,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
/>
</div>
<a
className="field-link mt-0 mb-3"
className="field-link mt-0 mb-3 small"
href="http://localhost:18000/enterprise/login"
onClick={[Function]}
target="_self"
@@ -687,7 +705,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
<button
aria-disabled={true}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary disabled btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-pending disabled btn btn-brand"
disabled={false}
onClick={[Function]}
type="submit"
@@ -755,11 +773,14 @@ exports[`LoginPage should show error message 1`] = `
</a>
</p>
</div>
<h2
<hr
className="mt-0 border-gray-200"
/>
<h3
className="text-left mt-2 mb-3"
>
Sign In
</h2>
</h3>
<form
className="m-0"
>
@@ -773,7 +794,7 @@ exports[`LoginPage should show error message 1`] = `
Email
</label>
<input
aria-describedby=""
aria-describedby="email-help-text"
className="form-control"
id="loginEmail"
name="email"
@@ -782,11 +803,12 @@ exports[`LoginPage should show error message 1`] = `
type="email"
value=""
/>
<p
className="mb-4"
<small
className="form-text text-muted"
id="email-help-text"
>
The email address you used to register with edX.
</p>
</small>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
@@ -860,7 +882,7 @@ exports[`LoginPage should show error message 1`] = `
/>
</div>
<a
className="field-link mt-0 mb-3"
className="field-link mt-0 mb-3 small"
href="http://localhost:18000/enterprise/login"
onClick={[Function]}
target="_self"
@@ -870,7 +892,7 @@ exports[`LoginPage should show error message 1`] = `
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
disabled={false}
onClick={[Function]}
type="submit"

13
src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
View File

@@ -244,19 +244,20 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
>
<div
aria-hidden="true"
className="mx-auto"
>
<img
alt="icon Apple"
className="icon-image"
src="https://edx.devstack.lms/logo.png"
/>
<span
aria-hidden="true"
className="pl-2"
>
Apple
</span>
</div>
<span
aria-hidden="true"
className="pl-2"
>
Apple
</span>
</button>
</div>
<h4