From 796c7e4cdb8418f40cbc2217e1588c913c305b92 Mon Sep 17 00:00:00 2001
From: Waheed Ahmed <waheed.ahmed@arbisoft.com>
Date: Wed, 6 Jan 2021 13:43:58 +0500
Subject: [PATCH] Fix max-width issue with social auth buttons. (#70)

VAN-222
---
 src/logistration/LoginPage.jsx                |  186 +-
 src/logistration/RegistrationPage.jsx         |  252 +--
 .../__snapshots__/LoginPage.test.jsx.snap     | 1402 ++++++-------
 .../RegistrationPage.test.jsx.snap            | 1742 +++++++++--------
 4 files changed, 1813 insertions(+), 1769 deletions(-)

diff --git a/src/logistration/LoginPage.jsx b/src/logistration/LoginPage.jsx
index b770fed2..0d281775 100644
--- a/src/logistration/LoginPage.jsx
+++ b/src/logistration/LoginPage.jsx
@@ -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>
       </>
diff --git a/src/logistration/RegistrationPage.jsx b/src/logistration/RegistrationPage.jsx
index dd5dbec9..34bc6494 100644
--- a/src/logistration/RegistrationPage.jsx
+++ b/src/logistration/RegistrationPage.jsx
@@ -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>
       </>
diff --git a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap b/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
index 8fd13f12..41af41d9 100644
--- a/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
+++ b/src/logistration/tests/__snapshots__/LoginPage.test.jsx.snap
@@ -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>
 `;
diff --git a/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap b/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
index 7a354fb5..e38d2ccf 100644
--- a/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
+++ b/src/logistration/tests/__snapshots__/RegistrationPage.test.jsx.snap
@@ -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>
 `;