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

Make logistration pages responsive. (#69)

Browse Source 
Made logistration pages response for smaller devices using
paragon components and bootstrap classes.

VAN-222
This commit is contained in:
Waheed Ahmed
2021-01-06 12:36:55 +05:00
committed by GitHub
parent 5fa1d40dbf
commit 56a1caaacb
23 changed files with 1965 additions and 2256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/logistration/NotFoundPage.jsx → src/common-components/NotFoundPage.jsx
View File

@@ -4,7 +4,7 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
export default function NotFoundPage() {
return (
<div className="container-fluid d-flex py-5 justify-content-center align-items-start text-center">
<p className="my-0 py-5 text-muted" style={{ maxWidth: '32em' }}>
<p className="my-0 py-5 text-muted mw-32em">
<FormattedMessage
id="error.notfound.message"
defaultMessage="The page you're looking for is unavailable or there's an error in the URL. Please check the URL and try again."

1
src/common-components/index.jsx
View File

@@ -2,3 +2,4 @@ export { default as HeaderLayout } from './HeaderLayout';
export { default as RedirectLogistration } from './RedirectLogistration';
export { default as registerIcons } from './RegisterFaIcons';
export { default as UnAuthOnlyRoute } from './UnAuthOnlyRoute';
export { default as NotFoundPage } from './NotFoundPage';

65
src/forgot-password/ForgotPasswordPage.jsx
View File

@@ -54,46 +54,41 @@ const ForgotPasswordPage = (props) => {
}) => (
<>
{status === 'complete' ? <Redirect to={LOGIN_PAGE} /> : null}
<div className="d-flex justify-content-center forgot-password-container">
<div className="d-flex flex-column" style={{ width: '450px' }}>
<Form className="m-4">
<div className="form-group">
{status === 'forbidden' ? <RequestInProgressAlert /> : null}
<h3 className="text-center mt-3">
{intl.formatMessage(messages['logisration.forgot.password.page.heading'])}
</h3>
<p className="mb-4">
{intl.formatMessage(messages['logisration.forgot.password.page.instructions'])}
</p>
<div className="d-flex flex-column align-items-start">
<ValidationFormGroup
className="mb-0"
for="email"
invalid={!values.isEmailValid}
invalidMessage={invalidEmailMessage}
>
<label htmlFor="forgot-password-input" className="h6 mr-1">
{intl.formatMessage(messages['logisration.forgot.password.page.email.field.label'])}
</label>
<Input
name="email"
id="forgot-password-input"
type="email"
placeholder="username@domain.com"
value={values.email}
onChange={e => validateEmail(e, setFieldValue)}
style={{ width: '400px' }}
/>
</ValidationFormGroup>
</div>
<div className="d-flex justify-content-center m-4">
<div className="d-flex flex-column">
<Form className="mw-420">
{status === 'forbidden' ? <RequestInProgressAlert /> : null}
<h3 className="text-center mt-3">
{intl.formatMessage(messages['logisration.forgot.password.page.heading'])}
</h3>
<p className="mb-4">
{intl.formatMessage(messages['logisration.forgot.password.page.instructions'])}
</p>
<ValidationFormGroup
className="mb-0 w-100"
for="email"
invalid={!values.isEmailValid}
invalidMessage={invalidEmailMessage}
>
<Form.Label htmlFor="forgot-password-input" className="h6 mr-1">
{intl.formatMessage(messages['logisration.forgot.password.page.email.field.label'])}
</Form.Label>
<Input
name="email"
id="forgot-password-input"
type="email"
placeholder="username@domain.com"
value={values.email}
onChange={e => validateEmail(e, setFieldValue)}
/>
<p className="mb-2">
{intl.formatMessage(messages['logisration.forgot.password.page.email.field.help.text'])}
</p>
<LoginHelpLinks page="forgot-password" />
</div>
</ValidationFormGroup>
<LoginHelpLinks page="forgot-password" />
<StatefulButton
type="button"
className="btn-primary submit"
className="btn-primary submit mt-3"
state={status}
labels={{
default: intl.formatMessage(messages['logisration.forgot.password.page.submit.button']),

9
src/forgot-password/RequestInProgressAlert.jsx
View File

@@ -2,14 +2,11 @@ import React from 'react';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import Alert from '../logistration/Alert';
import { Alert } from '@edx/paragon';
const RequestInProgressAlert = () => (
<Alert
className="alert-warning mt-n2"
icon={<FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />}
>
<Alert variant="warning">
<FontAwesomeIcon className="mr-2" icon={faExclamationTriangle} />
<FormattedMessage
id="logistration.forgot.password.request.inprogress.message"
defaultMessage="Your previous request is still in progress, please try again in a few moments."

481
src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
View File

@@ -2,111 +2,93 @@
exports[`ForgotPasswordPage should match default section snapshot 1`] = `
<div
className="d-flex justify-content-center forgot-password-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "450px",
}
}
>
<form
className="m-4"
className="mw-420"
>
<div
className="form-group"
<h3
className="text-center mt-3"
>
<h3
className="text-center mt-3"
Password assistance
</h3>
<p
className="mb-4"
>
Please enter your log-in or recovery email address below and we will send you an email with instructions.
</p>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="forgot-password-input"
>
Password assistance
</h3>
<p
className="mb-4"
>
Please enter your log-in or recovery email address below and we will send you an email with instructions.
</p>
<div
className="d-flex flex-column align-items-start"
>
<div
className="form-group mb-0"
>
<label
className="h6 mr-1"
htmlFor="forgot-password-input"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="forgot-password-input"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
style={
Object {
"width": "400px",
}
}
type="email"
value=""
/>
</div>
</div>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="forgot-password-input"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
type="email"
value=""
/>
<p
className="mb-2"
>
The email address you used to register with edX.
</p>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
/>
</svg>
Need other help signing in?
</button>
/>
</svg>
Need other help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
"padding": ".1px 0",
}
}
>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</div>
/>
</div>
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-null btn-primary submit btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-null btn-primary submit mt-3 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
@@ -124,139 +106,118 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
<div
className="d-flex justify-content-center forgot-password-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "450px",
}
}
>
<form
className="m-4"
className="mw-420"
>
<div
className="form-group"
className="fade alert alert-warning show"
role="alert"
>
<div
className="alert d-flex align-items-start alert-warning mt-n2"
<svg
aria-hidden="true"
className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
data-icon="exclamation-triangle"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<div>
<svg
aria-hidden="true"
className="svg-inline--fa fa-exclamation-triangle fa-w-18 mr-2"
data-icon="exclamation-triangle"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 576 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
fill="currentColor"
style={Object {}}
/>
</svg>
</div>
<div>
<span>
Your previous request is still in progress, please try again in a few moments.
</span>
</div>
</div>
<h3
className="text-center mt-3"
<path
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
fill="currentColor"
style={Object {}}
/>
</svg>
<span>
Your previous request is still in progress, please try again in a few moments.
</span>
</div>
<h3
className="text-center mt-3"
>
Password assistance
</h3>
<p
className="mb-4"
>
Please enter your log-in or recovery email address below and we will send you an email with instructions.
</p>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="forgot-password-input"
>
Password assistance
</h3>
<p
className="mb-4"
>
Please enter your log-in or recovery email address below and we will send you an email with instructions.
</p>
<div
className="d-flex flex-column align-items-start"
>
<div
className="form-group mb-0"
>
<label
className="h6 mr-1"
htmlFor="forgot-password-input"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="forgot-password-input"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
style={
Object {
"width": "400px",
}
}
type="email"
value=""
/>
</div>
</div>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="forgot-password-input"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
type="email"
value=""
/>
<p
className="mb-2"
>
The email address you used to register with edX.
</p>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
/>
</svg>
Need other help signing in?
</button>
/>
</svg>
Need other help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
"padding": ".1px 0",
}
}
>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</div>
/>
</div>
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-forbidden btn-primary submit btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-forbidden btn-primary submit mt-3 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
@@ -274,111 +235,93 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
<div
className="d-flex justify-content-center forgot-password-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "450px",
}
}
>
<form
className="m-4"
className="mw-420"
>
<div
className="form-group"
<h3
className="text-center mt-3"
>
<h3
className="text-center mt-3"
Password assistance
</h3>
<p
className="mb-4"
>
Please enter your log-in or recovery email address below and we will send you an email with instructions.
</p>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="forgot-password-input"
>
Password assistance
</h3>
<p
className="mb-4"
>
Please enter your log-in or recovery email address below and we will send you an email with instructions.
</p>
<div
className="d-flex flex-column align-items-start"
>
<div
className="form-group mb-0"
>
<label
className="h6 mr-1"
htmlFor="forgot-password-input"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="forgot-password-input"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
style={
Object {
"width": "400px",
}
}
type="email"
value=""
/>
</div>
</div>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="forgot-password-input"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
type="email"
value=""
/>
<p
className="mb-2"
>
The email address you used to register with edX.
</p>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
/>
</svg>
Need other help signing in?
</button>
/>
</svg>
Need other help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
"padding": ".1px 0",
}
}
>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</div>
/>
</div>
<button
aria-disabled={true}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary submit disabled btn btn-primary"
className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary submit mt-3 disabled btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"

6
src/index.jsx
View File

@@ -11,12 +11,14 @@ import { Redirect, Route, Switch } from 'react-router-dom';
import { messages as headerMessages } from '@edx/frontend-component-header';
import configureStore from './data/configureStore';
import { LoginPage, RegistrationPage, NotFoundPage } from './logistration';
import { LoginPage, RegistrationPage } from './logistration';
import {
LOGIN_PAGE, PAGE_NOT_FOUND, REGISTER_PAGE, RESET_PAGE, PASSWORD_RESET_CONFIRM,
} from './data/constants';
import ForgotPasswordPage from './forgot-password';
import { HeaderLayout, UnAuthOnlyRoute, registerIcons } from './common-components';
import {
HeaderLayout, UnAuthOnlyRoute, registerIcons, NotFoundPage,
} from './common-components';
import ResetPasswordPage from './reset-password';
import appMessages from './i18n';

30
src/logistration/Alert.jsx
View File

@@ -1,30 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
function Alert(props) {
return (
<div className={classNames('alert d-flex align-items-start', props.className)}>
<div>
{props.icon}
</div>
<div>
{props.children}
</div>
</div>
);
}
Alert.propTypes = {
className: PropTypes.string,
icon: PropTypes.node,
children: PropTypes.node,
};
Alert.defaultProps = {
className: undefined,
icon: undefined,
children: undefined,
};
export default Alert;

4
src/logistration/ConfirmationAlert.jsx
View File

@@ -25,13 +25,13 @@ const ConfirmationAlert = (props) => {
<Alert
variant="success"
>
<h4 style={{ color: 'green' }}>
<Alert.Heading className="text-success">
<FormattedMessage
id="logistration.forgot.password.confirmation.title"
defaultMessage="Check Your Email"
description="Forgot password confirmation title"
/>
</h4>
</Alert.Heading>
<FormattedMessage
id="logistration.forgot.password.confirmation.message"
defaultMessage="You entered {strongEmail}. If this email address is associated with your edX account, we will send a message with password recovery instructions to this email address. {lineBreak}If you do not receive a password reset message after 1 minute, verify that you entered the correct email address, or check your spam folder.{lineBreak} If you need further assistance, {technicalSupportLink}."

33
src/logistration/InstitutionLogistration.jsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { getConfig } from '@edx/frontend-platform';
import PropTypes from 'prop-types';
import { Button } from '@edx/paragon';
import { Button, Hyperlink } from '@edx/paragon';
import messages from './messages';
export const RenderInstitutionButton = props => {
@@ -34,25 +34,22 @@ const InstitutionLogistration = props => {
return (
<>
<div className="d-flex justify-content-center institution-login-container">
<div className="d-flex flex-column" style={{ width: '450px' }}>
<p className="mt-5 ml-3 mb-4" style={{ color: '#23419f', fontSize: '20px' }}>
<div className="d-flex justify-content-center m-4">
<div className="d-flex flex-column mw-500">
<h3 className="mt-5 mb-4 font-weight-normal">
{headingTitle}
</h3>
<p className="mb-2">
{intl.formatMessage(messages['logistration.institution.login.page.sub.heading'])}
</p>
<div style={{ fontSize: '16px' }}>
<p
className="mb-2"
style={{ fontSize: '16px' }}
>
{intl.formatMessage(messages['logistration.institution.login.page.sub.heading'])}
</p>
<div className="mb-2 ml-2">
<ul>
{secondaryProviders.map(
provider => <li key={provider}><a href={lmsBaseUrl + provider.loginUrl}>{provider.name}</a></li>,
)}
</ul>
</div>
<div className="mb-2 ml-2">
<ul>
{secondaryProviders.map(provider => (
<li key={provider}>
<Hyperlink destination={lmsBaseUrl + provider.loginUrl}>{provider.name}</Hyperlink>
</li>
))}
</ul>
</div>
<div className="section-heading-line mb-4">
<h4>or</h4>

97
src/logistration/LoginPage.jsx
View File

@@ -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}
/>
<div className="d-flex justify-content-center login-container">
<div className="d-flex flex-column" style={{ width: '400px' }}>
<div className="d-flex justify-content-center m-4">
<div className="d-flex flex-column">
{thirdPartyAuthContext.currentProvider
&& (
<ThirdPartyAuthAlert
@@ -172,54 +174,47 @@ class LoginPage extends React.Component {
</div>
</>
) : null }
<form className="m-0">
<div className="form-group">
<div className="d-flex flex-column align-items-start">
<ValidationFormGroup
for="email"
invalid={this.state.errors.email !== ''}
invalidMessage={intl.formatMessage(messages['logistration.email.format.validation.message'])}
>
<label htmlFor="loginEmail" className="h6 mr-1">
{intl.formatMessage(messages['logistration.login.page.email.label'])}
</label>
<Input
name="email"
id="loginEmail"
type="email"
placeholder="username@domain.com"
value={this.state.email}
onChange={e => this.handleOnChange(e)}
style={{ width: '400px' }}
/>
</ValidationFormGroup>
</div>
<Form className="m-0 mw-420">
<ValidationFormGroup
for="email"
invalid={this.state.errors.email !== ''}
invalidMessage={intl.formatMessage(messages['logistration.email.format.validation.message'])}
className="mb-0 w-100"
>
<Form.Label htmlFor="loginEmail" className="h6 mr-1">
{intl.formatMessage(messages['logistration.login.page.email.label'])}
</Form.Label>
<Input
name="email"
id="loginEmail"
type="email"
placeholder="username@domain.com"
value={this.state.email}
onChange={e => this.handleOnChange(e)}
/>
<p className="mb-4">{intl.formatMessage(messages['logistration.email.help.message'])}</p>
<div className="d-flex flex-column align-items-start">
<ValidationFormGroup
for="password"
invalid={this.state.errors.password !== ''}
invalidMessage={intl.formatMessage(messages['logistration.login.page.password.validation.message'])}
className="mb-0"
>
<label htmlFor="loginPassword" className="h6 mr-1">
{intl.formatMessage(messages['logistration.password'])}
</label>
<Input
name="password"
id="loginPassword"
type="password"
value={this.state.password}
onChange={e => this.handleOnChange(e)}
style={{ width: '400px' }}
/>
</ValidationFormGroup>
</div>
<LoginHelpLinks page={LOGIN_PAGE} />
<a className="field-link mt-0" href={this.getEnterPriseLoginURL()}>
{intl.formatMessage(messages['logistration.enterprise.login.link.text'])}
</a>
</div>
</ValidationFormGroup>
<ValidationFormGroup
for="password"
invalid={this.state.errors.password !== ''}
invalidMessage={intl.formatMessage(messages['logistration.login.page.password.validation.message'])}
className="mb-0 w-100"
>
<Form.Label htmlFor="loginPassword" className="h6 mr-1">
{intl.formatMessage(messages['logistration.password'])}
</Form.Label>
<Input
name="password"
id="loginPassword"
type="password"
value={this.state.password}
onChange={e => this.handleOnChange(e)}
/>
</ValidationFormGroup>
<LoginHelpLinks page={LOGIN_PAGE} />
<Hyperlink className="field-link mt-0 mb-3" destination={this.getEnterPriseLoginURL()}>
{intl.formatMessage(messages['logistration.enterprise.login.link.text'])}
</Hyperlink>
<StatefulButton
type="submit"
className="btn-primary submit"
@@ -229,7 +224,7 @@ class LoginPage extends React.Component {
}}
onClick={this.handleSubmit}
/>
</form>
</Form>
{thirdPartyAuthContext.providers.length && !thirdPartyAuthContext.currentProvider ? (
<>
<div className="section-heading-line mb-4">

7
src/logistration/RegistrationFailure.jsx
View File

@@ -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) ? (
<li key={error} style={{ textAlign: 'left' }}>
<li key={error} className="text-left">
{error.user_message}
</li>
) : null
@@ -26,13 +25,13 @@ const RegistrationFailureMessage = (props) => {
return (
<Alert variant="danger">
<h4 style={{ color: '#a0050e' }}>
<Alert.Heading className="text-danger">
<FormattedMessage
id="logistration.registration.request.failure.header.description.message"
defaultMessage="We couldn't create your account."
description="error message when registration failure."
/>
</h4>
</Alert.Heading>
<div>
<ul>
{userErrors}

254
src/logistration/RegistrationPage.jsx
View File

@@ -446,145 +446,147 @@ class RegistrationPage extends React.Component {
redirectUrl={this.props.registrationResult.redirectUrl}
finishAuthUrl={finishAuthUrl}
/>
<div className="register-container mx-auto">
{this.renderErrors()}
{currentProvider && (
<ThirdPartyAuthAlert
currentProvider={currentProvider}
platformName={this.props.thirdPartyAuthContext.platformName}
referrer="register"
/>
)}
<div className="text-left">
<span>{intl.formatMessage(messages['logistration.already.have.an.edx.account'])}</span>
<a href={LOGIN_PAGE}>{intl.formatMessage(messages['logistration.sign.in.hyperlink'])}</a>
</div>
{(providers.length || secondaryProviders.length) && !currentProvider ? (
<div className="d-block mb-4 mt-4">
<span className="d-block mx-auto mb-4 section-heading-line">
{intl.formatMessage(messages['logistration.create.an.account.using'])}
</span>
<div className="row tpa-container">
<SocialAuthProviders socialAuthProviders={providers} referrer={REGISTER_PAGE} />
</div>
<RenderInstitutionButton
onSubmitHandler={this.handleInstitutionLogin}
secondaryProviders={this.props.thirdPartyAuthContext.secondaryProviders}
buttonTitle={intl.formatMessage(messages['logistration.register.institution.login.button'])}
<div className="d-flex justify-content-center m-4">
<div className="d-flex flex-column">
{this.renderErrors()}
{currentProvider && (
<ThirdPartyAuthAlert
currentProvider={currentProvider}
platformName={this.props.thirdPartyAuthContext.platformName}
referrer="register"
/>
<span className="d-block mx-auto text-center mt-4 section-heading-line">
{intl.formatMessage(messages['logistration.create.a.new.one.here'])}
</span>
)}
<div className="text-left">
<span>{intl.formatMessage(messages['logistration.already.have.an.edx.account'])}</span>
<a href={LOGIN_PAGE}>{intl.formatMessage(messages['logistration.sign.in.hyperlink'])}</a>
</div>
) : null}
<Form className="mb-4 mx-auto form-group">
<ValidationFormGroup
for="name"
invalid={this.state.errors.name !== ''}
invalidMessage={this.state.errors.name}
>
<label htmlFor="name" className="h6 pt-3">
{intl.formatMessage(messages['logistration.fullname.label'])}
</label>
<Input
name="name"
id="name"
type="text"
placeholder=""
value={this.state.name}
onChange={e => this.handleOnChange(e)}
onBlur={e => this.handleOnBlur(e)}
required
/>
</ValidationFormGroup>
<ValidationFormGroup
for="username"
invalid={this.state.errors.username !== ''}
invalidMessage={this.state.errors.username}
>
<label htmlFor="username" className="h6 pt-3">
{intl.formatMessage(messages['logistration.username.label'])}
</label>
<Input
name="username"
id="username"
type="text"
placeholder=""
value={this.state.username}
onChange={e => this.handleOnChange(e)}
onBlur={e => this.handleOnBlur(e)}
required
/>
</ValidationFormGroup>
<ValidationFormGroup
for="email"
invalid={this.state.errors.email !== ''}
invalidMessage={this.state.errors.email}
>
<label htmlFor="email" className="h6 pt-3">
{intl.formatMessage(messages['logistration.register.page.email.label'])}
</label>
<Input
name="email"
id="email"
type="email"
placeholder="username@domain.com"
value={this.state.email}
onChange={e => this.handleOnChange(e)}
onBlur={e => this.handleOnBlur(e)}
required
/>
</ValidationFormGroup>
{!currentProvider && (
{(providers.length || secondaryProviders.length) && !currentProvider ? (
<div className="d-block mb-4 mt-4">
<span className="d-block mx-auto mb-4 section-heading-line">
{intl.formatMessage(messages['logistration.create.an.account.using'])}
</span>
<div className="row tpa-container">
<SocialAuthProviders socialAuthProviders={providers} referrer={REGISTER_PAGE} />
</div>
<RenderInstitutionButton
onSubmitHandler={this.handleInstitutionLogin}
secondaryProviders={this.props.thirdPartyAuthContext.secondaryProviders}
buttonTitle={intl.formatMessage(messages['logistration.register.institution.login.button'])}
/>
<span className="d-block mx-auto text-center mt-4 section-heading-line">
{intl.formatMessage(messages['logistration.create.a.new.one.here'])}
</span>
</div>
) : null}
<Form className="mb-4 form-group mw-500">
<ValidationFormGroup
for="password"
invalid={this.state.errors.password !== ''}
invalidMessage={this.state.errors.password}
for="name"
invalid={this.state.errors.name !== ''}
invalidMessage={this.state.errors.name}
>
<label htmlFor="password" className="h6 pt-3">
{intl.formatMessage(messages['logistration.password.label'])}
<label htmlFor="name" className="h6 pt-3">
{intl.formatMessage(messages['logistration.fullname.label'])}
</label>
<Input
name="password"
id="password"
type="password"
name="name"
id="name"
type="text"
placeholder=""
value={this.state.password}
value={this.state.name}
onChange={e => this.handleOnChange(e)}
onBlur={e => this.handleOnBlur(e)}
required
/>
</ValidationFormGroup>
)}
{ this.addExtraRequiredFields() }
<ValidationFormGroup
for="optional"
className="custom-control"
>
<Input
name="optional"
id="optional"
type="checkbox"
value={this.state.enableOptionalField}
checked={this.state.enableOptionalField}
onChange={e => this.handleOnOptional(e)}
required
<ValidationFormGroup
for="username"
invalid={this.state.errors.username !== ''}
invalidMessage={this.state.errors.username}
>
<label htmlFor="username" className="h6 pt-3">
{intl.formatMessage(messages['logistration.username.label'])}
</label>
<Input
name="username"
id="username"
type="text"
placeholder=""
value={this.state.username}
onChange={e => this.handleOnChange(e)}
onBlur={e => this.handleOnBlur(e)}
required
/>
</ValidationFormGroup>
<ValidationFormGroup
for="email"
invalid={this.state.errors.email !== ''}
invalidMessage={this.state.errors.email}
>
<label htmlFor="email" className="h6 pt-3">
{intl.formatMessage(messages['logistration.register.page.email.label'])}
</label>
<Input
name="email"
id="email"
type="email"
placeholder="username@domain.com"
value={this.state.email}
onChange={e => this.handleOnChange(e)}
onBlur={e => this.handleOnBlur(e)}
required
/>
</ValidationFormGroup>
{!currentProvider && (
<ValidationFormGroup
for="password"
invalid={this.state.errors.password !== ''}
invalidMessage={this.state.errors.password}
>
<label htmlFor="password" className="h6 pt-3">
{intl.formatMessage(messages['logistration.password.label'])}
</label>
<Input
name="password"
id="password"
type="password"
placeholder=""
value={this.state.password}
onChange={e => this.handleOnChange(e)}
onBlur={e => this.handleOnBlur(e)}
required
/>
</ValidationFormGroup>
)}
{ this.addExtraRequiredFields() }
<ValidationFormGroup
for="optional"
className="custom-control"
>
<Input
name="optional"
id="optional"
type="checkbox"
value={this.state.enableOptionalField}
checked={this.state.enableOptionalField}
onChange={e => this.handleOnOptional(e)}
required
/>
<p role="presentation" id="additionalFields" onClick={e => this.handleOnOptional(e)}>
{intl.formatMessage(messages['logistration.support.education.research'])}
</p>
</ValidationFormGroup>
{ this.state.enableOptionalField ? this.addExtraOptionalFields() : null}
<StatefulButton
type="button"
className="btn-primary submit mt-4"
state={submitState}
labels={{
default: intl.formatMessage(messages['logistration.create.account.button']),
}}
onClick={this.handleSubmit}
/>
<p role="presentation" id="additionalFields" onClick={e => this.handleOnOptional(e)}>
{intl.formatMessage(messages['logistration.support.education.research'])}
</p>
</ValidationFormGroup>
{ this.state.enableOptionalField ? this.addExtraOptionalFields() : null}
<StatefulButton
type="button"
className="btn-primary submit mt-4"
state={submitState}
labels={{
default: intl.formatMessage(messages['logistration.create.account.button']),
}}
onClick={this.handleSubmit}
/>
</Form>
</Form>
</div>
</div>
</>
);

46
src/logistration/_style.scss
View File

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

1
src/logistration/index.js
View File

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

3
src/logistration/tests/LoginPage.test.jsx
View File

@@ -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(<IntlLoginPage {...props} />));
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);
});

10
src/logistration/tests/__snapshots__/ConfirmationAlert.test.jsx.snap
View File

@@ -5,17 +5,13 @@ exports[`ConfirmationAlert should match default confirmation message snapshot 1`
className="fade alert alert-success show"
role="alert"
>
<h4
style={
Object {
"color": "green",
}
}
<div
className="text-success alert-heading h4"
>
<span>
Check Your Email
</span>
</h4>
</div>
<span>
You entered
<strong>

1015
src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
View File

@@ -2,15 +2,10 @@
exports[`LoginPage should match TPA provider snapshot 1`] = `
<div
className="d-flex justify-content-center login-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "400px",
}
}
>
<div
className="d-flex flex-row"
@@ -32,132 +27,112 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
Sign In
</h2>
<form
className="m-0"
className="m-0 mw-420"
>
<div
className="form-group"
className="form-group mb-0 w-100"
>
<div
className="d-flex flex-column align-items-start"
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
<div
className="form-group"
>
<label
className="h6 mr-1"
htmlFor="loginEmail"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="loginEmail"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
style={
Object {
"width": "400px",
}
}
type="email"
value=""
/>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
The email address you've provided isn't formatted correctly.
</strong>
</div>
</div>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="loginEmail"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
type="email"
value=""
/>
<p
className="mb-4"
>
The email address you used to register with edX.
</p>
<div
className="d-flex flex-column align-items-start"
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
<div
className="form-group mb-0"
>
<label
className="h6 mr-1"
htmlFor="loginPassword"
>
Password
</label>
<input
aria-describedby=""
className="form-control"
id="loginPassword"
name="password"
onChange={[Function]}
style={
Object {
"width": "400px",
}
}
type="password"
value=""
/>
<strong
className="invalid-feedback"
id="password-invalid-feedback"
>
Please enter your password.
</strong>
</div>
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
The email address you've provided isn't formatted correctly.
</strong>
</div>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginPassword"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
Password
</label>
<input
aria-describedby=""
className="form-control"
id="loginPassword"
name="password"
onChange={[Function]}
type="password"
value=""
/>
<strong
className="invalid-feedback"
id="password-invalid-feedback"
>
Please enter your password.
</strong>
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
/>
</svg>
Need help signing in?
</button>
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
"padding": ".1px 0",
}
}
>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</div>
<a
className="field-link mt-0"
href="http://localhost:18000/enterprise/login"
>
Sign in with your company or school
</a>
/>
</div>
<a
className="field-link mt-0 mb-3"
href="http://localhost:18000/enterprise/login"
onClick={[Function]}
target="_self"
>
Sign in with your company or school
</a>
<button
aria-disabled={false}
aria-live="assertive"
@@ -213,15 +188,10 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
exports[`LoginPage should match default section snapshot 1`] = `
<div
className="d-flex justify-content-center login-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "400px",
}
}
>
<div
className="d-flex flex-row"
@@ -243,132 +213,112 @@ exports[`LoginPage should match default section snapshot 1`] = `
Sign In
</h2>
<form
className="m-0"
className="m-0 mw-420"
>
<div
className="form-group"
className="form-group mb-0 w-100"
>
<div
className="d-flex flex-column align-items-start"
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
<div
className="form-group"
>
<label
className="h6 mr-1"
htmlFor="loginEmail"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="loginEmail"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
style={
Object {
"width": "400px",
}
}
type="email"
value=""
/>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
The email address you've provided isn't formatted correctly.
</strong>
</div>
</div>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="loginEmail"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
type="email"
value=""
/>
<p
className="mb-4"
>
The email address you used to register with edX.
</p>
<div
className="d-flex flex-column align-items-start"
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
<div
className="form-group mb-0"
>
<label
className="h6 mr-1"
htmlFor="loginPassword"
>
Password
</label>
<input
aria-describedby=""
className="form-control"
id="loginPassword"
name="password"
onChange={[Function]}
style={
Object {
"width": "400px",
}
}
type="password"
value=""
/>
<strong
className="invalid-feedback"
id="password-invalid-feedback"
>
Please enter your password.
</strong>
</div>
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
The email address you've provided isn't formatted correctly.
</strong>
</div>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginPassword"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
Password
</label>
<input
aria-describedby=""
className="form-control"
id="loginPassword"
name="password"
onChange={[Function]}
type="password"
value=""
/>
<strong
className="invalid-feedback"
id="password-invalid-feedback"
>
Please enter your password.
</strong>
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
/>
</svg>
Need help signing in?
</button>
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
"padding": ".1px 0",
}
}
>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</div>
<a
className="field-link mt-0"
href="http://localhost:18000/enterprise/login"
>
Sign in with your company or school
</a>
/>
</div>
<a
className="field-link mt-0 mb-3"
href="http://localhost:18000/enterprise/login"
onClick={[Function]}
target="_self"
>
Sign in with your company or school
</a>
<button
aria-disabled={false}
aria-live="assertive"
@@ -390,15 +340,10 @@ exports[`LoginPage should match default section snapshot 1`] = `
exports[`LoginPage should match forget password alert message snapshot 1`] = `
<div
className="d-flex justify-content-center login-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "400px",
}
}
>
<div
className="d-flex flex-row"
@@ -420,132 +365,112 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
Sign In
</h2>
<form
className="m-0"
className="m-0 mw-420"
>
<div
className="form-group"
className="form-group mb-0 w-100"
>
<div
className="d-flex flex-column align-items-start"
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
<div
className="form-group"
>
<label
className="h6 mr-1"
htmlFor="loginEmail"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="loginEmail"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
style={
Object {
"width": "400px",
}
}
type="email"
value=""
/>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
The email address you've provided isn't formatted correctly.
</strong>
</div>
</div>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="loginEmail"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
type="email"
value=""
/>
<p
className="mb-4"
>
The email address you used to register with edX.
</p>
<div
className="d-flex flex-column align-items-start"
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
<div
className="form-group mb-0"
>
<label
className="h6 mr-1"
htmlFor="loginPassword"
>
Password
</label>
<input
aria-describedby=""
className="form-control"
id="loginPassword"
name="password"
onChange={[Function]}
style={
Object {
"width": "400px",
}
}
type="password"
value=""
/>
<strong
className="invalid-feedback"
id="password-invalid-feedback"
>
Please enter your password.
</strong>
</div>
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
The email address you've provided isn't formatted correctly.
</strong>
</div>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginPassword"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
Password
</label>
<input
aria-describedby=""
className="form-control"
id="loginPassword"
name="password"
onChange={[Function]}
type="password"
value=""
/>
<strong
className="invalid-feedback"
id="password-invalid-feedback"
>
Please enter your password.
</strong>
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
/>
</svg>
Need help signing in?
</button>
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
"padding": ".1px 0",
}
}
>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</div>
<a
className="field-link mt-0"
href="http://localhost:18000/enterprise/login"
>
Sign in with your company or school
</a>
/>
</div>
<a
className="field-link mt-0 mb-3"
href="http://localhost:18000/enterprise/login"
onClick={[Function]}
target="_self"
>
Sign in with your company or school
</a>
<button
aria-disabled={false}
aria-live="assertive"
@@ -567,15 +492,10 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
exports[`LoginPage should match pending button state snapshot 1`] = `
<div
className="d-flex justify-content-center login-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "400px",
}
}
>
<div
className="d-flex flex-row"
@@ -597,132 +517,112 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
Sign In
</h2>
<form
className="m-0"
className="m-0 mw-420"
>
<div
className="form-group"
className="form-group mb-0 w-100"
>
<div
className="d-flex flex-column align-items-start"
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
<div
className="form-group"
>
<label
className="h6 mr-1"
htmlFor="loginEmail"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="loginEmail"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
style={
Object {
"width": "400px",
}
}
type="email"
value=""
/>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
The email address you've provided isn't formatted correctly.
</strong>
</div>
</div>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="loginEmail"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
type="email"
value=""
/>
<p
className="mb-4"
>
The email address you used to register with edX.
</p>
<div
className="d-flex flex-column align-items-start"
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
<div
className="form-group mb-0"
>
<label
className="h6 mr-1"
htmlFor="loginPassword"
>
Password
</label>
<input
aria-describedby=""
className="form-control"
id="loginPassword"
name="password"
onChange={[Function]}
style={
Object {
"width": "400px",
}
}
type="password"
value=""
/>
<strong
className="invalid-feedback"
id="password-invalid-feedback"
>
Please enter your password.
</strong>
</div>
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
The email address you've provided isn't formatted correctly.
</strong>
</div>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginPassword"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
Password
</label>
<input
aria-describedby=""
className="form-control"
id="loginPassword"
name="password"
onChange={[Function]}
type="password"
value=""
/>
<strong
className="invalid-feedback"
id="password-invalid-feedback"
>
Please enter your password.
</strong>
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
/>
</svg>
Need help signing in?
</button>
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
"padding": ".1px 0",
}
}
>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</div>
<a
className="field-link mt-0"
href="http://localhost:18000/enterprise/login"
>
Sign in with your company or school
</a>
/>
</div>
<a
className="field-link mt-0 mb-3"
href="http://localhost:18000/enterprise/login"
onClick={[Function]}
target="_self"
>
Sign in with your company or school
</a>
<button
aria-disabled={true}
aria-live="assertive"
@@ -753,15 +653,10 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
exports[`LoginPage should show error message 1`] = `
<div
className="d-flex justify-content-center login-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "400px",
}
}
>
<div
className="fade alert alert-danger show"
@@ -800,132 +695,112 @@ exports[`LoginPage should show error message 1`] = `
Sign In
</h2>
<form
className="m-0"
className="m-0 mw-420"
>
<div
className="form-group"
className="form-group mb-0 w-100"
>
<div
className="d-flex flex-column align-items-start"
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
<div
className="form-group"
>
<label
className="h6 mr-1"
htmlFor="loginEmail"
>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="loginEmail"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
style={
Object {
"width": "400px",
}
}
type="email"
value=""
/>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
The email address you've provided isn't formatted correctly.
</strong>
</div>
</div>
Email
</label>
<input
aria-describedby=""
className="form-control"
id="loginEmail"
name="email"
onChange={[Function]}
placeholder="username@domain.com"
type="email"
value=""
/>
<p
className="mb-4"
>
The email address you used to register with edX.
</p>
<div
className="d-flex flex-column align-items-start"
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
<div
className="form-group mb-0"
>
<label
className="h6 mr-1"
htmlFor="loginPassword"
>
Password
</label>
<input
aria-describedby=""
className="form-control"
id="loginPassword"
name="password"
onChange={[Function]}
style={
Object {
"width": "400px",
}
}
type="password"
value=""
/>
<strong
className="invalid-feedback"
id="password-invalid-feedback"
>
Please enter your password.
</strong>
</div>
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
The email address you've provided isn't formatted correctly.
</strong>
</div>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginPassword"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
Password
</label>
<input
aria-describedby=""
className="form-control"
id="loginPassword"
name="password"
onChange={[Function]}
type="password"
value=""
/>
<strong
className="invalid-feedback"
id="password-invalid-feedback"
>
Please enter your password.
</strong>
</div>
<button
className="mt-1 field-link"
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-caret-right fa-w-6 mr-1"
data-icon="caret-right"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
viewBox="0 0 192 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
fill="currentColor"
style={Object {}}
/>
</svg>
Need help signing in?
</button>
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
"padding": ".1px 0",
}
}
>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</div>
<a
className="field-link mt-0"
href="http://localhost:18000/enterprise/login"
>
Sign in with your company or school
</a>
/>
</div>
<a
className="field-link mt-0 mb-3"
href="http://localhost:18000/enterprise/login"
onClick={[Function]}
target="_self"
>
Sign in with your company or school
</a>
<button
aria-disabled={false}
aria-live="assertive"

1766
src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
View File

@@ -2,959 +2,967 @@
exports[`./RegistrationPage.js should display no password field when current provider is present 1`] = `
<div
className="register-container mx-auto"
className="d-flex justify-content-center m-4"
>
<div
className="fade alert-warning mt-n2 alert show"
id="tpa-alert"
role="alert"
>
<span>
You've successfully signed into Google. We just need a little more information before you start learning with openedX.
</span>
</div>
<div
className="text-left"
>
<span>
Already have an edX account?
</span>
<a
href="/login"
>
Sign in.
</a>
</div>
<form
className="mb-4 mx-auto form-group"
className="d-flex flex-column"
>
<div
className="form-group"
className="fade alert-warning mt-n2 alert show"
id="tpa-alert"
role="alert"
>
<label
className="h6 pt-3"
htmlFor="name"
>
Full Name (required)
</label>
<input
aria-describedby=""
className="form-control"
id="name"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="username"
>
Public Username (required)
</label>
<input
aria-describedby=""
className="form-control"
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
placeholder="username@domain.com"
required={true}
type="email"
value=""
/>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={true}
className="form-check-input"
id="honor_code"
name="honor_code"
onChange={[Function]}
required={true}
type="checkbox"
value={true}
/>
I agree to the Your Platform Name Here
<a
href="/honor"
onClick={[Function]}
target="_self"
>
Honor Code
</a>
<strong
className="invalid-feedback"
id="honor_code-invalid-feedback"
>
You must agree to the Your Platform Name Here Honor Code
</strong>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={false}
className="form-check-input"
id="optional"
name="optional"
onChange={[Function]}
required={true}
type="checkbox"
value={false}
/>
<p
id="additionalFields"
onClick={[Function]}
role="presentation"
>
Support education research by providing additional information
</p>
</div>
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit mt-4 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
<span
className="d-flex align-items-center justify-content-center"
>
Create Account
<span>
You've successfully signed into Google. We just need a little more information before you start learning with openedX.
</span>
</button>
</form>
</div>
<div
className="text-left"
>
<span>
Already have an edX account?
</span>
<a
href="/login"
>
Sign in.
</a>
</div>
<form
className="mb-4 form-group mw-500"
>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="name"
>
Full Name (required)
</label>
<input
aria-describedby=""
className="form-control"
id="name"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="username"
>
Public Username (required)
</label>
<input
aria-describedby=""
className="form-control"
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
placeholder="username@domain.com"
required={true}
type="email"
value=""
/>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={true}
className="form-check-input"
id="honor_code"
name="honor_code"
onChange={[Function]}
required={true}
type="checkbox"
value={true}
/>
I agree to the Your Platform Name Here
<a
href="/honor"
onClick={[Function]}
target="_self"
>
Honor Code
</a>
<strong
className="invalid-feedback"
id="honor_code-invalid-feedback"
>
You must agree to the Your Platform Name Here Honor Code
</strong>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={false}
className="form-check-input"
id="optional"
name="optional"
onChange={[Function]}
required={true}
type="checkbox"
value={false}
/>
<p
id="additionalFields"
onClick={[Function]}
role="presentation"
>
Support education research by providing additional information
</p>
</div>
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit mt-4 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
<span
className="d-flex align-items-center justify-content-center"
>
Create Account
</span>
</button>
</form>
</div>
</div>
`;
exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
<div
className="register-container mx-auto"
className="d-flex justify-content-center m-4"
>
<div
className="text-left"
className="d-flex flex-column"
>
<span>
Already have an edX account?
</span>
<a
href="/login"
>
Sign in.
</a>
</div>
<div
className="d-block mb-4 mt-4"
>
<span
className="d-block mx-auto mb-4 section-heading-line"
>
Create an account using
</span>
<div
className="row tpa-container"
className="text-left"
>
<span>
Already have an edX account?
</span>
<a
href="/login"
>
Sign in.
</a>
</div>
<div
className="d-block mb-4 mt-4"
>
<span
className="d-block mx-auto mb-4 section-heading-line"
>
Create an account using
</span>
<div
className="row tpa-container"
>
<button
className="btn-social btn-oa2-apple-id"
id="oa2-apple-id"
onClick={[Function]}
type="button"
>
<div
aria-hidden="true"
>
<img
alt="icon Apple"
className="icon-image"
src="https://edx.devstack.lms/logo.png"
/>
</div>
<span
aria-hidden="true"
className="pl-2"
>
Apple
</span>
</button>
</div>
<span
className="d-block mx-auto text-center mt-4 section-heading-line"
>
or create a new one here
</span>
</div>
<form
className="mb-4 form-group mw-500"
>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="name"
>
Full Name (required)
</label>
<input
aria-describedby=""
className="form-control"
id="name"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="username"
>
Public Username (required)
</label>
<input
aria-describedby=""
className="form-control"
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
placeholder="username@domain.com"
required={true}
type="email"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="password"
>
Password (required)
</label>
<input
aria-describedby=""
className="form-control"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="password"
value=""
/>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={true}
className="form-check-input"
id="honor_code"
name="honor_code"
onChange={[Function]}
required={true}
type="checkbox"
value={true}
/>
I agree to the Your Platform Name Here
<a
href="/honor"
onClick={[Function]}
target="_self"
>
Honor Code
</a>
<strong
className="invalid-feedback"
id="honor_code-invalid-feedback"
>
You must agree to the Your Platform Name Here Honor Code
</strong>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={false}
className="form-check-input"
id="optional"
name="optional"
onChange={[Function]}
required={true}
type="checkbox"
value={false}
/>
<p
id="additionalFields"
onClick={[Function]}
role="presentation"
>
Support education research by providing additional information
</p>
</div>
<button
className="btn-social btn-oa2-apple-id"
id="oa2-apple-id"
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit mt-4 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
<div
aria-hidden="true"
>
<img
alt="icon Apple"
className="icon-image"
src="https://edx.devstack.lms/logo.png"
/>
</div>
<span
aria-hidden="true"
className="pl-2"
className="d-flex align-items-center justify-content-center"
>
Apple
Create Account
</span>
</button>
</div>
<span
className="d-block mx-auto text-center mt-4 section-heading-line"
>
or create a new one here
</span>
</form>
</div>
<form
className="mb-4 mx-auto form-group"
>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="name"
>
Full Name (required)
</label>
<input
aria-describedby=""
className="form-control"
id="name"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="username"
>
Public Username (required)
</label>
<input
aria-describedby=""
className="form-control"
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
placeholder="username@domain.com"
required={true}
type="email"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="password"
>
Password (required)
</label>
<input
aria-describedby=""
className="form-control"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="password"
value=""
/>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={true}
className="form-check-input"
id="honor_code"
name="honor_code"
onChange={[Function]}
required={true}
type="checkbox"
value={true}
/>
I agree to the Your Platform Name Here
<a
href="/honor"
onClick={[Function]}
target="_self"
>
Honor Code
</a>
<strong
className="invalid-feedback"
id="honor_code-invalid-feedback"
>
You must agree to the Your Platform Name Here Honor Code
</strong>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={false}
className="form-check-input"
id="optional"
name="optional"
onChange={[Function]}
required={true}
type="checkbox"
value={false}
/>
<p
id="additionalFields"
onClick={[Function]}
role="presentation"
>
Support education research by providing additional information
</p>
</div>
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit mt-4 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
<span
className="d-flex align-items-center justify-content-center"
>
Create Account
</span>
</button>
</form>
</div>
`;
exports[`./RegistrationPage.js should match default section snapshot 1`] = `
<div
className="register-container mx-auto"
className="d-flex justify-content-center m-4"
>
<div
className="text-left"
>
<span>
Already have an edX account?
</span>
<a
href="/login"
>
Sign in.
</a>
</div>
<form
className="mb-4 mx-auto form-group"
className="d-flex flex-column"
>
<div
className="form-group"
className="text-left"
>
<label
className="h6 pt-3"
htmlFor="name"
>
Full Name (required)
</label>
<input
aria-describedby=""
className="form-control"
id="name"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="username"
>
Public Username (required)
</label>
<input
aria-describedby=""
className="form-control"
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
placeholder="username@domain.com"
required={true}
type="email"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="password"
>
Password (required)
</label>
<input
aria-describedby=""
className="form-control"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="password"
value=""
/>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={true}
className="form-check-input"
id="honor_code"
name="honor_code"
onChange={[Function]}
required={true}
type="checkbox"
value={true}
/>
I agree to the Your Platform Name Here
<a
href="/honor"
onClick={[Function]}
target="_self"
>
Honor Code
</a>
<strong
className="invalid-feedback"
id="honor_code-invalid-feedback"
>
You must agree to the Your Platform Name Here Honor Code
</strong>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={false}
className="form-check-input"
id="optional"
name="optional"
onChange={[Function]}
required={true}
type="checkbox"
value={false}
/>
<p
id="additionalFields"
onClick={[Function]}
role="presentation"
>
Support education research by providing additional information
</p>
</div>
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit mt-4 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
<span
className="d-flex align-items-center justify-content-center"
>
Create Account
<span>
Already have an edX account?
</span>
</button>
</form>
<a
href="/login"
>
Sign in.
</a>
</div>
<form
className="mb-4 form-group mw-500"
>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="name"
>
Full Name (required)
</label>
<input
aria-describedby=""
className="form-control"
id="name"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="username"
>
Public Username (required)
</label>
<input
aria-describedby=""
className="form-control"
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
placeholder="username@domain.com"
required={true}
type="email"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="password"
>
Password (required)
</label>
<input
aria-describedby=""
className="form-control"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="password"
value=""
/>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={true}
className="form-check-input"
id="honor_code"
name="honor_code"
onChange={[Function]}
required={true}
type="checkbox"
value={true}
/>
I agree to the Your Platform Name Here
<a
href="/honor"
onClick={[Function]}
target="_self"
>
Honor Code
</a>
<strong
className="invalid-feedback"
id="honor_code-invalid-feedback"
>
You must agree to the Your Platform Name Here Honor Code
</strong>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={false}
className="form-check-input"
id="optional"
name="optional"
onChange={[Function]}
required={true}
type="checkbox"
value={false}
/>
<p
id="additionalFields"
onClick={[Function]}
role="presentation"
>
Support education research by providing additional information
</p>
</div>
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit mt-4 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
<span
className="d-flex align-items-center justify-content-center"
>
Create Account
</span>
</button>
</form>
</div>
</div>
`;
exports[`./RegistrationPage.js should match pending button state snapshot 1`] = `
<div
className="register-container mx-auto"
className="d-flex justify-content-center m-4"
>
<div
className="text-left"
>
<span>
Already have an edX account?
</span>
<a
href="/login"
>
Sign in.
</a>
</div>
<form
className="mb-4 mx-auto form-group"
className="d-flex flex-column"
>
<div
className="form-group"
className="text-left"
>
<label
className="h6 pt-3"
htmlFor="name"
>
Full Name (required)
</label>
<input
aria-describedby=""
className="form-control"
id="name"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="username"
>
Public Username (required)
</label>
<input
aria-describedby=""
className="form-control"
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
placeholder="username@domain.com"
required={true}
type="email"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="password"
>
Password (required)
</label>
<input
aria-describedby=""
className="form-control"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="password"
value=""
/>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={true}
className="form-check-input"
id="honor_code"
name="honor_code"
onChange={[Function]}
required={true}
type="checkbox"
value={true}
/>
I agree to the Your Platform Name Here
<span>
Already have an edX account?
</span>
<a
href="/honor"
onClick={[Function]}
target="_self"
href="/login"
>
Honor Code
Sign in.
</a>
<strong
className="invalid-feedback"
id="honor_code-invalid-feedback"
>
You must agree to the Your Platform Name Here Honor Code
</strong>
</div>
<div
className="form-group custom-control"
<form
className="mb-4 form-group mw-500"
>
<input
aria-describedby=""
checked={false}
className="form-check-input"
id="optional"
name="optional"
onChange={[Function]}
required={true}
type="checkbox"
value={false}
/>
<p
id="additionalFields"
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="name"
>
Full Name (required)
</label>
<input
aria-describedby=""
className="form-control"
id="name"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="username"
>
Public Username (required)
</label>
<input
aria-describedby=""
className="form-control"
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
placeholder="username@domain.com"
required={true}
type="email"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="password"
>
Password (required)
</label>
<input
aria-describedby=""
className="form-control"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="password"
value=""
/>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={true}
className="form-check-input"
id="honor_code"
name="honor_code"
onChange={[Function]}
required={true}
type="checkbox"
value={true}
/>
I agree to the Your Platform Name Here
<a
href="/honor"
onClick={[Function]}
target="_self"
>
Honor Code
</a>
<strong
className="invalid-feedback"
id="honor_code-invalid-feedback"
>
You must agree to the Your Platform Name Here Honor Code
</strong>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={false}
className="form-check-input"
id="optional"
name="optional"
onChange={[Function]}
required={true}
type="checkbox"
value={false}
/>
<p
id="additionalFields"
onClick={[Function]}
role="presentation"
>
Support education research by providing additional information
</p>
</div>
<button
aria-disabled={true}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary submit mt-4 disabled btn btn-primary"
disabled={false}
onClick={[Function]}
role="presentation"
>
Support education research by providing additional information
</p>
</div>
<button
aria-disabled={true}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary submit mt-4 disabled btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
<span
className="d-flex align-items-center justify-content-center"
type="button"
>
<span
className="pgn__stateful-btn-icon"
className="d-flex align-items-center justify-content-center"
>
<span
aria-hidden={true}
className="icon fa fa-spinner fa-spin"
id="Icon1"
/>
className="pgn__stateful-btn-icon"
>
<span
aria-hidden={true}
className="icon fa fa-spinner fa-spin"
id="Icon1"
/>
</span>
Create Account
</span>
Create Account
</span>
</button>
</form>
</button>
</form>
</div>
</div>
`;
exports[`./RegistrationPage.js should show error message on 409 1`] = `
<div
className="register-container mx-auto"
className="d-flex justify-content-center m-4"
>
<div
className="fade alert alert-danger show"
role="alert"
className="d-flex flex-column"
>
<h4
style={
Object {
"color": "#a0050e",
}
}
<div
className="fade alert alert-danger show"
role="alert"
>
<div
className="text-danger alert-heading h4"
>
<span>
We couldn't create your account.
</span>
</div>
<div>
<ul>
<li
className="text-left"
>
It looks like test@gmail.com belongs to an existing account. Try again with a different email address.
</li>
<li
className="text-left"
>
It looks like test belongs to an existing account. Try again with a different username.
</li>
</ul>
</div>
</div>
<div
className="text-left"
>
<span>
We couldn't create your account.
Already have an edX account?
</span>
</h4>
<div>
<ul>
<li
style={
Object {
"textAlign": "left",
}
}
>
It looks like test@gmail.com belongs to an existing account. Try again with a different email address.
</li>
<li
style={
Object {
"textAlign": "left",
}
}
>
It looks like test belongs to an existing account. Try again with a different username.
</li>
</ul>
</div>
</div>
<div
className="text-left"
>
<span>
Already have an edX account?
</span>
<a
href="/login"
>
Sign in.
</a>
</div>
<form
className="mb-4 mx-auto form-group"
>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="name"
>
Full Name (required)
</label>
<input
aria-describedby=""
className="form-control"
id="name"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="username"
>
Public Username (required)
</label>
<input
aria-describedby=""
className="form-control"
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
placeholder="username@domain.com"
required={true}
type="email"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="password"
>
Password (required)
</label>
<input
aria-describedby=""
className="form-control"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="password"
value=""
/>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={true}
className="form-check-input"
id="honor_code"
name="honor_code"
onChange={[Function]}
required={true}
type="checkbox"
value={true}
/>
I agree to the Your Platform Name Here
<a
href="/honor"
onClick={[Function]}
target="_self"
href="/login"
>
Honor Code
Sign in.
</a>
<strong
className="invalid-feedback"
id="honor_code-invalid-feedback"
>
You must agree to the Your Platform Name Here Honor Code
</strong>
</div>
<div
className="form-group custom-control"
<form
className="mb-4 form-group mw-500"
>
<input
aria-describedby=""
checked={false}
className="form-check-input"
id="optional"
name="optional"
onChange={[Function]}
required={true}
type="checkbox"
value={false}
/>
<p
id="additionalFields"
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="name"
>
Full Name (required)
</label>
<input
aria-describedby=""
className="form-control"
id="name"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="username"
>
Public Username (required)
</label>
<input
aria-describedby=""
className="form-control"
id="username"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="text"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="email"
>
Email (required)
</label>
<input
aria-describedby=""
className="form-control"
id="email"
name="email"
onBlur={[Function]}
onChange={[Function]}
placeholder="username@domain.com"
required={true}
type="email"
value=""
/>
</div>
<div
className="form-group"
>
<label
className="h6 pt-3"
htmlFor="password"
>
Password (required)
</label>
<input
aria-describedby=""
className="form-control"
id="password"
name="password"
onBlur={[Function]}
onChange={[Function]}
placeholder=""
required={true}
type="password"
value=""
/>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={true}
className="form-check-input"
id="honor_code"
name="honor_code"
onChange={[Function]}
required={true}
type="checkbox"
value={true}
/>
I agree to the Your Platform Name Here
<a
href="/honor"
onClick={[Function]}
target="_self"
>
Honor Code
</a>
<strong
className="invalid-feedback"
id="honor_code-invalid-feedback"
>
You must agree to the Your Platform Name Here Honor Code
</strong>
</div>
<div
className="form-group custom-control"
>
<input
aria-describedby=""
checked={false}
className="form-check-input"
id="optional"
name="optional"
onChange={[Function]}
required={true}
type="checkbox"
value={false}
/>
<p
id="additionalFields"
onClick={[Function]}
role="presentation"
>
Support education research by providing additional information
</p>
</div>
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit mt-4 btn btn-primary"
disabled={false}
onClick={[Function]}
role="presentation"
type="button"
>
Support education research by providing additional information
</p>
</div>
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit mt-4 btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
<span
className="d-flex align-items-center justify-content-center"
>
Create Account
</span>
</button>
</form>
<span
className="d-flex align-items-center justify-content-center"
>
Create Account
</span>
</button>
</form>
</div>
</div>
`;

54
src/reset-password/InvalidToken.jsx
View File

@@ -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 = () => {
</Hyperlink>
);
const forgotPassword = (<strong>Forgot Password</strong>);
const forgotPassword = (
<strong>
<FormattedMessage
id="logistration.reset.password.request.forgot.password.text"
defaultMessage="Forgot Password"
description="Forgot password page help text."
/>
</strong>
);
return (
<div className="d-flex justify-content-center reset-password-container">
<div className="d-flex flex-column" style={{ width: '400px' }}>
<div className="form-group">
<div className="text-center mt-3">
<Alert className="alert-danger mt-n2">
<h4 style={{ color: '#a0050e' }}>
<FormattedMessage
id="logistration.reset.password.request.invalid.token.header.message"
defaultMessage="Invalid Password Reset Link"
description=""
/>
</h4>
<div className="d-flex justify-content-center m-4">
<div className="d-flex flex-column">
<div className="text-center mw-420">
<Alert variant="danger">
<Alert.Heading className="text-danger">
<FormattedMessage
id="logistration.reset.password.request.invalid.token.description.message"
defaultMessage="This password reset link is invalid. It may have been used already. To reset your password, go to the {loginPasswordLink} page and select {forgotPassword}"
description=""
values={{
forgotPassword,
loginPasswordLink,
}}
id="logistration.reset.password.request.invalid.token.header.message"
defaultMessage="Invalid Password Reset Link"
description="Invalid password reset link help text heading."
/>
</Alert>
</div>
</Alert.Heading>
<FormattedMessage
id="logistration.reset.password.request.invalid.token.description.message"
defaultMessage="This password reset link is invalid. It may have been used already. To reset your password, go to the {loginPasswordLink} page and select {forgotPassword}"
description="Invalid password reset link help text message."
values={{
forgotPassword,
loginPasswordLink,
}}
/>
</Alert>
</div>
</div>
</div>

31
src/reset-password/ResetFailure.jsx
View File

@@ -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 (
<div className="d-flex justify-content-center reset-password-container">
<div className="d-flex flex-column" style={{ width: '400px' }}>
<div className="form-group">
<div className="text-center mt-3">
<Alert variant="danger">
<div style={{ color: '#a0050e' }}>
<FormattedMessage
id="logistration.reset.password.request.failure.header.message"
defaultMessage="{errorMessage} "
description="error message when password reset failure."
values={{
errorMessage,
}}
/>
</div>
</Alert>
</div>
<div className="d-flex justify-content-center m-4">
<div className="d-flex flex-column">
<div className="text-center mw-420">
<Alert variant="danger">
<FormattedMessage
id="logistration.reset.password.request.failure.header.message"
defaultMessage="{errorMessage} "
description="error message when password reset failure."
values={{
errorMessage,
}}
/>
</Alert>
</div>
</div>
</div>

26
src/reset-password/ResetPasswordPage.jsx
View File

@@ -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' ? <ResetFailureMessage errors={props.errors} /> : null}
<div className="d-flex justify-content-center reset-password-container">
<div className="d-flex flex-column" style={{ width: '450px' }}>
<form className="m-4">
<div className="form-group">
<div className="d-flex justify-content-center m-4">
<div className="d-flex flex-column">
<Form>
<div className="reset-password-container">
<h3 className="text-center mt-3">
{intl.formatMessage(messages['logistration.reset.password.page.heading'])}
</h3>
@@ -89,27 +91,28 @@ const ResetPasswordPage = (props) => {
for="reset-password-input"
invalid={!passwordValid}
invalidMessage={validationMessage}
className="w-100"
>
<label htmlFor="reset-password-input" className="h6 mr-1">
<Form.Label htmlFor="reset-password-input" className="h6 mr-1">
{intl.formatMessage(messages['logistration.reset.password.page.new.field.label'])}
</label>
</Form.Label>
<Input
name="new-password1"
id="reset-password-input"
type="password"
placeholder=""
onBlur={e => handleNewPasswordChange(e)}
style={{ width: '400px' }}
/>
</ValidationFormGroup>
<ValidationFormGroup
for="confirm-password-input"
invalid={!passwordMatch}
invalidMessage={intl.formatMessage(messages['logistration.reset.password.page.invalid.match.message'])}
className="w-100"
>
<label htmlFor="confirm-password-input" className="h6 mr-1">
<Form.Label htmlFor="confirm-password-input" className="h6 mr-1">
{intl.formatMessage(messages['logistration.reset.password.page.confirm.field.label'])}
</label>
</Form.Label>
<Input
name="new-password2"
id="confirm-password-input"
@@ -117,7 +120,6 @@ const ResetPasswordPage = (props) => {
placeholder=""
value={confirmPasswordInput}
onChange={e => handleConfirmPasswordChange(e)}
style={{ width: '400px' }}
/>
</ValidationFormGroup>
</div>
@@ -131,7 +133,7 @@ const ResetPasswordPage = (props) => {
}}
onClick={e => handleSubmit(e)}
/>
</form>
</Form>
</div>
</div>
</>

40
src/reset-password/ResetSuccess.jsx
View File

@@ -4,7 +4,7 @@ import { Alert } from '@edx/paragon';
const ResetSuccessMessage = () => {
const loginPasswordLink = (
<Alert.Link href="/login" className="font-weight-normal" style={{ color: '#0075b4' }}>
<Alert.Link href="/login" className="font-weight-normal text-info">
<FormattedMessage
id="logistration.reset.password.confirmation.support.link"
defaultMessage="Sign-in to your account."
@@ -14,28 +14,26 @@ const ResetSuccessMessage = () => {
);
return (
<div className="d-flex justify-content-center reset-password-container">
<div className="d-flex flex-column" style={{ width: '400px' }}>
<div className="form-group">
<div className="text-center mt-3">
<Alert variant="success mt-n2">
<Alert.Heading style={{ color: 'green' }}>
<FormattedMessage
id="logistration.reset.password.request.success.header.message"
defaultMessage="Password Reset Complete."
description="header message when reset is successful."
/>
</Alert.Heading>
<div className="d-flex justify-content-center m-4">
<div className="d-flex flex-column">
<div className="text-center mw-420">
<Alert variant="success">
<Alert.Heading className="text-success">
<FormattedMessage
id="logistration.reset.password.request.success.header.description.message"
defaultMessage="Your password has been reset. {loginPasswordLink}"
description="message when reset password is successful."
values={{
loginPasswordLink,
}}
id="logistration.reset.password.request.success.header.message"
defaultMessage="Password Reset Complete."
description="header message when reset is successful."
/>
</Alert>
</div>
</Alert.Heading>
<FormattedMessage
id="logistration.reset.password.request.success.header.description.message"
defaultMessage="Your password has been reset. {loginPasswordLink}"
description="message when reset password is successful."
values={{
loginPasswordLink,
}}
/>
</Alert>
</div>
</div>
</div>

240
src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
View File

@@ -2,56 +2,43 @@
exports[`ResetPasswordPage should match invalid token message section snapshot 1`] = `
<div
className="d-flex justify-content-center reset-password-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "400px",
}
}
>
<div
className="form-group"
className="text-center mw-420"
>
<div
className="text-center mt-3"
className="fade alert alert-danger show"
role="alert"
>
<div
className="alert d-flex align-items-start alert-danger mt-n2"
className="text-danger alert-heading h4"
>
<div />
<div>
<h4
style={
Object {
"color": "#a0050e",
}
}
>
<span>
Invalid Password Reset Link
</span>
</h4>
<span>
This password reset link is invalid. It may have been used already. To reset your password, go to the
<a
href="/login"
onClick={[Function]}
target="_self"
>
<span>
sign-in
</span>
</a>
page and select
<strong>
Forgot Password
</strong>
</span>
</div>
<span>
Invalid Password Reset Link
</span>
</div>
<span>
This password reset link is invalid. It may have been used already. To reset your password, go to the
<a
href="/login"
onClick={[Function]}
target="_self"
>
<span>
sign-in
</span>
</a>
page and select
<strong>
<span>
Forgot Password
</span>
</strong>
</span>
</div>
</div>
</div>
@@ -60,21 +47,16 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
exports[`ResetPasswordPage should match pending reset message section snapshot 1`] = `
<div
className="d-flex justify-content-center reset-password-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "450px",
}
}
>
<form
className="m-4"
className=""
>
<div
className="form-group"
className="reset-password-container"
>
<h3
className="text-center mt-3"
@@ -90,10 +72,10 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
className="d-flex flex-column align-items-start"
>
<div
className="form-group"
className="form-group w-100"
>
<label
className="h6 mr-1"
className="h6 mr-1 form-label"
htmlFor="reset-password-input"
>
New Password
@@ -105,19 +87,14 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
name="new-password1"
onBlur={[Function]}
placeholder=""
style={
Object {
"width": "400px",
}
}
type="password"
/>
</div>
<div
className="form-group"
className="form-group w-100"
>
<label
className="h6 mr-1"
className="h6 mr-1 form-label"
htmlFor="confirm-password-input"
>
Confirm Password
@@ -129,11 +106,6 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
name="new-password2"
onChange={[Function]}
placeholder=""
style={
Object {
"width": "400px",
}
}
type="password"
value=""
/>
@@ -176,21 +148,16 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
exports[`ResetPasswordPage should match reset password default section snapshot 1`] = `
<div
className="d-flex justify-content-center reset-password-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "450px",
}
}
>
<form
className="m-4"
className=""
>
<div
className="form-group"
className="reset-password-container"
>
<h3
className="text-center mt-3"
@@ -206,10 +173,10 @@ exports[`ResetPasswordPage should match reset password default section snapshot
className="d-flex flex-column align-items-start"
>
<div
className="form-group"
className="form-group w-100"
>
<label
className="h6 mr-1"
className="h6 mr-1 form-label"
htmlFor="reset-password-input"
>
New Password
@@ -221,19 +188,14 @@ exports[`ResetPasswordPage should match reset password default section snapshot
name="new-password1"
onBlur={[Function]}
placeholder=""
style={
Object {
"width": "400px",
}
}
type="password"
/>
</div>
<div
className="form-group"
className="form-group w-100"
>
<label
className="h6 mr-1"
className="h6 mr-1 form-label"
htmlFor="confirm-password-input"
>
Confirm Password
@@ -245,11 +207,6 @@ exports[`ResetPasswordPage should match reset password default section snapshot
name="new-password2"
onChange={[Function]}
placeholder=""
style={
Object {
"width": "400px",
}
}
type="password"
value=""
/>
@@ -283,57 +240,38 @@ exports[`ResetPasswordPage should match reset password default section snapshot
exports[`ResetPasswordPage should match successful reset message section snapshot 1`] = `
<div
className="d-flex justify-content-center reset-password-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "400px",
}
}
>
<div
className="form-group"
className="text-center mw-420"
>
<div
className="text-center mt-3"
className="fade alert alert-success show"
role="alert"
>
<div
className="fade alert alert-success mt-n2 show"
role="alert"
className="text-success alert-heading h4"
>
<div
className="alert-heading h4"
style={
Object {
"color": "green",
}
}
>
<span>
Password Reset Complete.
</span>
</div>
<span>
Your password has been reset.
<a
className="font-weight-normal alert-link"
href="/login"
onClick={[Function]}
onKeyDown={[Function]}
style={
Object {
"color": "#0075b4",
}
}
>
<span>
Sign-in to your account.
</span>
</a>
Password Reset Complete.
</span>
</div>
<span>
Your password has been reset.
<a
className="font-weight-normal text-info alert-link"
href="/login"
onClick={[Function]}
onKeyDown={[Function]}
>
<span>
Sign-in to your account.
</span>
</a>
</span>
</div>
</div>
</div>
@@ -343,58 +281,36 @@ exports[`ResetPasswordPage should match successful reset message section snapsho
exports[`ResetPasswordPage should match unsuccessful reset message section snapshot 1`] = `
Array [
<div
className="d-flex justify-content-center reset-password-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "400px",
}
}
>
<div
className="form-group"
className="text-center mw-420"
>
<div
className="text-center mt-3"
className="fade alert alert-danger show"
role="alert"
>
<div
className="fade alert alert-danger show"
role="alert"
>
<div
style={
Object {
"color": "#a0050e",
}
}
>
<span>
Password reset was unsuccessfull.
</span>
</div>
</div>
<span>
Password reset was unsuccessfull.
</span>
</div>
</div>
</div>
</div>,
<div
className="d-flex justify-content-center reset-password-container"
className="d-flex justify-content-center m-4"
>
<div
className="d-flex flex-column"
style={
Object {
"width": "450px",
}
}
>
<form
className="m-4"
className=""
>
<div
className="form-group"
className="reset-password-container"
>
<h3
className="text-center mt-3"
@@ -410,10 +326,10 @@ Array [
className="d-flex flex-column align-items-start"
>
<div
className="form-group"
className="form-group w-100"
>
<label
className="h6 mr-1"
className="h6 mr-1 form-label"
htmlFor="reset-password-input"
>
New Password
@@ -425,19 +341,14 @@ Array [
name="new-password1"
onBlur={[Function]}
placeholder=""
style={
Object {
"width": "400px",
}
}
type="password"
/>
</div>
<div
className="form-group"
className="form-group w-100"
>
<label
className="h6 mr-1"
className="h6 mr-1 form-label"
htmlFor="confirm-password-input"
>
Confirm Password
@@ -449,11 +360,6 @@ Array [
name="new-password2"
onChange={[Function]}
placeholder=""
style={
Object {
"width": "400px",
}
}
type="password"
value=""
/>