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

Fix max-width issue with social auth buttons. (#70)

Browse Source 
VAN-222
This commit is contained in:
Waheed Ahmed
2021-01-06 13:43:58 +05:00
committed by GitHub
parent 56a1caaacb
commit 796c7e4cdb
4 changed files with 1813 additions and 1769 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/logistration/LoginPage.jsx
View File

@@ -142,99 +142,101 @@ class LoginPage extends React.Component {
/>
<div className="d-flex justify-content-center m-4">
<div className="d-flex flex-column">
{thirdPartyAuthContext.currentProvider
&& (
<ThirdPartyAuthAlert
currentProvider={thirdPartyAuthContext.currentProvider}
platformName={thirdPartyAuthContext.platformName}
/>
)}
{this.props.loginError ? <LoginFailureMessage loginError={this.props.loginError} /> : null}
{this.props.forgotPassword.status === 'complete' ? <ConfirmationAlert email={this.props.forgotPassword.email} /> : null}
<div className="d-flex flex-row">
<p>
{intl.formatMessage(messages['logistration.first.time.here'])}
<a className="ml-1" href={REGISTER_PAGE}>
{intl.formatMessage(messages['logistration.create.an.account'])}.
</a>
</p>
<div className="mw-420">
{thirdPartyAuthContext.currentProvider
&& (
<ThirdPartyAuthAlert
currentProvider={thirdPartyAuthContext.currentProvider}
platformName={thirdPartyAuthContext.platformName}
/>
)}
{this.props.loginError ? <LoginFailureMessage loginError={this.props.loginError} /> : null}
{this.props.forgotPassword.status === 'complete' ? <ConfirmationAlert email={this.props.forgotPassword.email} /> : null}
<div className="d-flex flex-row">
<p>
{intl.formatMessage(messages['logistration.first.time.here'])}
<a className="ml-1" href={REGISTER_PAGE}>
{intl.formatMessage(messages['logistration.create.an.account'])}.
</a>
</p>
</div>
<h2 className="text-left mt-2 mb-3">
{intl.formatMessage(messages['logistration.login.institution.login.sign.in'])}
</h2>
{thirdPartyAuthContext.secondaryProviders.length ? (
<>
<RenderInstitutionButton
onSubmitHandler={this.handleInstitutionLogin}
secondaryProviders={thirdPartyAuthContext.secondaryProviders}
buttonTitle={intl.formatMessage(messages['logistration.login.institution.login.button'])}
/>
<div className="section-heading-line mb-4">
<h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
</div>
</>
) : null }
<Form className="m-0">
<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>
</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"
state={submitState}
labels={{
default: intl.formatMessage(messages['logistration.sign.in.button']),
}}
onClick={this.handleSubmit}
/>
</Form>
{thirdPartyAuthContext.providers.length && !thirdPartyAuthContext.currentProvider ? (
<>
<div className="section-heading-line mb-4">
<h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
</div>
<div className="row tpa-container">
<SocialAuthProviders socialAuthProviders={thirdPartyAuthContext.providers} />
</div>
</>
) : null}
</div>
<h2 className="text-left mt-2 mb-3">
{intl.formatMessage(messages['logistration.login.institution.login.sign.in'])}
</h2>
{thirdPartyAuthContext.secondaryProviders.length ? (
<>
<RenderInstitutionButton
onSubmitHandler={this.handleInstitutionLogin}
secondaryProviders={thirdPartyAuthContext.secondaryProviders}
buttonTitle={intl.formatMessage(messages['logistration.login.institution.login.button'])}
/>
<div className="section-heading-line mb-4">
<h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
</div>
</>
) : null }
<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>
</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"
state={submitState}
labels={{
default: intl.formatMessage(messages['logistration.sign.in.button']),
}}
onClick={this.handleSubmit}
/>
</Form>
{thirdPartyAuthContext.providers.length && !thirdPartyAuthContext.currentProvider ? (
<>
<div className="section-heading-line mb-4">
<h4>{intl.formatMessage(messages['logistration.or.sign.in.with'])}</h4>
</div>
<div className="row tpa-container">
<SocialAuthProviders socialAuthProviders={thirdPartyAuthContext.providers} />
</div>
</>
) : null}
</div>
</div>
</>

252
src/logistration/RegistrationPage.jsx
View File

@@ -448,144 +448,146 @@ class RegistrationPage extends React.Component {
/>
<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"
/>
)}
<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="mw-500">
{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 form-group mw-500">
<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">
<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>
</div>
</>

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

@@ -8,179 +8,183 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
className="d-flex flex-column"
>
<div
className="d-flex flex-row"
>
<p>
First time here?
<a
className="ml-1"
href="/register"
>
Create an Account
.
</a>
</p>
</div>
<h2
className="text-left mt-2 mb-3"
>
Sign In
</h2>
<form
className="m-0 mw-420"
className="mw-420"
>
<div
className="form-group mb-0 w-100"
className="d-flex flex-row"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
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>
First time here?
<a
className="ml-1"
href="/register"
>
Create an Account
.
</a>
</p>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
The email address you've provided isn't formatted correctly.
</strong>
</div>
<div
className="form-group mb-0 w-100"
<h2
className="text-left mt-2 mb-3"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginPassword"
>
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 {}}
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
Sign In
</h2>
<form
className="m-0"
>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
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>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
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"
>
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 {}}
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"padding": ".1px 0",
"height": null,
}
}
/>
</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"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
>
<span
className="d-flex align-items-center justify-content-center"
>
Sign in
</span>
</button>
</form>
<div
className="section-heading-line mb-4"
>
<h4>
or sign in with
</h4>
</div>
<div
className="row tpa-container"
>
<button
className="btn-social btn-oa2-apple-id"
data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
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
style={
Object {
"padding": ".1px 0",
}
}
/>
</div>
<span
aria-hidden="true"
className="pl-2"
<a
className="field-link mt-0 mb-3"
href="http://localhost:18000/enterprise/login"
onClick={[Function]}
target="_self"
>
Apple
</span>
</button>
Sign in with your company or school
</a>
<button
aria-disabled={false}
aria-live="assertive"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
>
<span
className="d-flex align-items-center justify-content-center"
>
Sign in
</span>
</button>
</form>
<div
className="section-heading-line mb-4"
>
<h4>
or sign in with
</h4>
</div>
<div
className="row tpa-container"
>
<button
className="btn-social btn-oa2-apple-id"
data-provider-url="/auth/login/apple-id/?auth_entry=login&next=/dashboard"
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>
</div>
</div>
</div>
@@ -194,146 +198,150 @@ exports[`LoginPage should match default section snapshot 1`] = `
className="d-flex flex-column"
>
<div
className="d-flex flex-row"
>
<p>
First time here?
<a
className="ml-1"
href="/register"
>
Create an Account
.
</a>
</p>
</div>
<h2
className="text-left mt-2 mb-3"
>
Sign In
</h2>
<form
className="m-0 mw-420"
className="mw-420"
>
<div
className="form-group mb-0 w-100"
className="d-flex flex-row"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
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>
First time here?
<a
className="ml-1"
href="/register"
>
Create an Account
.
</a>
</p>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
The email address you've provided isn't formatted correctly.
</strong>
</div>
<div
className="form-group mb-0 w-100"
<h2
className="text-left mt-2 mb-3"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginPassword"
>
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 {}}
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
Sign In
</h2>
<form
className="m-0"
>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
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>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
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"
>
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 {}}
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"padding": ".1px 0",
"height": null,
}
}
/>
</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"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
>
<span
className="d-flex align-items-center justify-content-center"
>
Sign in
</span>
</button>
</form>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</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"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
>
<span
className="d-flex align-items-center justify-content-center"
>
Sign in
</span>
</button>
</form>
</div>
</div>
</div>
`;
@@ -346,146 +354,150 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
className="d-flex flex-column"
>
<div
className="d-flex flex-row"
>
<p>
First time here?
<a
className="ml-1"
href="/register"
>
Create an Account
.
</a>
</p>
</div>
<h2
className="text-left mt-2 mb-3"
>
Sign In
</h2>
<form
className="m-0 mw-420"
className="mw-420"
>
<div
className="form-group mb-0 w-100"
className="d-flex flex-row"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
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>
First time here?
<a
className="ml-1"
href="/register"
>
Create an Account
.
</a>
</p>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
The email address you've provided isn't formatted correctly.
</strong>
</div>
<div
className="form-group mb-0 w-100"
<h2
className="text-left mt-2 mb-3"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginPassword"
>
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 {}}
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
Sign In
</h2>
<form
className="m-0"
>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
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>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
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"
>
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 {}}
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"padding": ".1px 0",
"height": null,
}
}
/>
</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"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
>
<span
className="d-flex align-items-center justify-content-center"
>
Sign in
</span>
</button>
</form>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</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"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
>
<span
className="d-flex align-items-center justify-content-center"
>
Sign in
</span>
</button>
</form>
</div>
</div>
</div>
`;
@@ -498,155 +510,159 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
className="d-flex flex-column"
>
<div
className="d-flex flex-row"
>
<p>
First time here?
<a
className="ml-1"
href="/register"
>
Create an Account
.
</a>
</p>
</div>
<h2
className="text-left mt-2 mb-3"
>
Sign In
</h2>
<form
className="m-0 mw-420"
className="mw-420"
>
<div
className="form-group mb-0 w-100"
className="d-flex flex-row"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
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>
First time here?
<a
className="ml-1"
href="/register"
>
Create an Account
.
</a>
</p>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
The email address you've provided isn't formatted correctly.
</strong>
</div>
<div
className="form-group mb-0 w-100"
<h2
className="text-left mt-2 mb-3"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginPassword"
>
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 {}}
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
Sign In
</h2>
<form
className="m-0"
>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
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>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
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"
>
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 {}}
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"padding": ".1px 0",
"height": null,
}
}
/>
</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"
className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary submit disabled btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
>
<span
className="d-flex align-items-center justify-content-center"
>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</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"
className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary submit disabled btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
>
<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>
Sign in
</span>
Sign in
</span>
</button>
</form>
</button>
</form>
</div>
</div>
</div>
`;
@@ -659,163 +675,167 @@ exports[`LoginPage should show error message 1`] = `
className="d-flex flex-column"
>
<div
className="fade alert alert-danger show"
role="alert"
className="mw-420"
>
<div
className="alert-heading h4"
>
<span>
We couldn't sign you in.
</span>
</div>
<ul>
<li>
Email or password is incorrect.
</li>
</ul>
</div>
<div
className="d-flex flex-row"
>
<p>
First time here?
<a
className="ml-1"
href="/register"
>
Create an Account
.
</a>
</p>
</div>
<h2
className="text-left mt-2 mb-3"
>
Sign In
</h2>
<form
className="m-0 mw-420"
>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
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>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
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"
>
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 {}}
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"height": null,
}
}
className="fade alert alert-danger show"
role="alert"
>
<div
className="alert-heading h4"
>
<span>
We couldn't sign you in.
</span>
</div>
<ul>
<li>
Email or password is incorrect.
</li>
</ul>
</div>
<div
className="d-flex flex-row"
>
<p>
First time here?
<a
className="ml-1"
href="/register"
>
Create an Account
.
</a>
</p>
</div>
<h2
className="text-left mt-2 mb-3"
>
Sign In
</h2>
<form
className="m-0"
>
<div
className="form-group mb-0 w-100"
>
<label
className="h6 mr-1 form-label"
htmlFor="loginEmail"
>
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>
<strong
className="invalid-feedback"
id="email-invalid-feedback"
>
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"
>
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 {}}
/>
</svg>
Need help signing in?
</button>
<div
className="pgn-transition-replace-group position-relative"
style={
Object {
"padding": ".1px 0",
"height": null,
}
}
/>
</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"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
>
<span
className="d-flex align-items-center justify-content-center"
>
Sign in
</span>
</button>
</form>
<div
style={
Object {
"padding": ".1px 0",
}
}
/>
</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"
className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary submit btn btn-primary"
disabled={false}
onClick={[Function]}
type="submit"
>
<span
className="d-flex align-items-center justify-content-center"
>
Sign in
</span>
</button>
</form>
</div>
</div>
</div>
`;

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

@@ -8,162 +8,166 @@ exports[`./RegistrationPage.js should display no password field when current pro
className="d-flex flex-column"
>
<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 form-group mw-500"
className="mw-500"
>
<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"
>
<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>
</div>
`;
@@ -176,215 +180,219 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
className="d-flex flex-column"
>
<div
className="text-left"
className="mw-500"
>
<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"
>
<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 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>
`;
@@ -397,175 +405,179 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
className="d-flex flex-column"
>
<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"
className="mw-500"
>
<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"
>
<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>
</div>
`;
@@ -578,184 +590,188 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
className="d-flex flex-column"
>
<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"
className="mw-500"
>
<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"
>
<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>
</div>
`;
@@ -768,201 +784,205 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
className="d-flex flex-column"
>
<div
className="fade alert alert-danger show"
role="alert"
className="mw-500"
>
<div
className="text-danger alert-heading h4"
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>
</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>
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"
>
<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"
>
<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>
</div>
`;