Adds UX suggested changes.

VAN-324
2021-01-28 00:49:01 +05:00
parent f0f9957a0f
commit f2accba715
4 changed files with 167 additions and 125 deletions
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -387,7 +387,7 @@ class RegistrationPage extends React.Component {
                <ValidationFormGroup
                  for={field.name}
                  key={field.name}
-                  className="pt-10 mb-0"
+                  className="pt-10 mb-20 small"
                >
                  { nodes }
                </ValidationFormGroup>
@@ -404,7 +404,7 @@ class RegistrationPage extends React.Component {
                key={field.name}
                invalid={this.state.errors[stateVar] !== ''}
                invalidMessage={field.errorMessages.required}
-                className="custom-control mb-0"
+                className="custom-control mb-20 small"
              >
                <Input {...props} />
                {beforeLink}
@@ -428,7 +428,7 @@ class RegistrationPage extends React.Component {
              key={field.name}
              invalid={this.state.errors[stateVar] !== ''}
              invalidMessage={field.errorMessages.required}
-              className="mb-0"
+              className="mb-20"
            >
              <label htmlFor={field.name} className="h6 pt-10">{field.label} (required)</label>
              <Input {...props} />
@@ -444,7 +444,7 @@ class RegistrationPage extends React.Component {
  addExtraOptionalFields() {
    const fields = this.props.formData.fields.map((field) => {
      let options = null;
-      let cssClass = 'mb-0';
+      let cssClass = 'mb-20';
      if (REGISTRATION_EXTRA_FIELDS.includes(field.name)) {
        if (!field.required && field.name !== 'honor_code' && field.name !== 'country') {
          REGISTRATION_OPTIONAL_MAP[field.name] = true;
@@ -506,9 +506,6 @@ class RegistrationPage extends React.Component {
          <div className="row tpa-container">
            <SocialAuthProviders socialAuthProviders={providers} referrer={REGISTER_PAGE} />
          </div>
-          <h4 className="d-block mx-auto mt-4">
-            {intl.formatMessage(messages['create.a.new.one.here'])}
-          </h4>
        </>
      );
    } else if (thirdPartyAuthApiStatus === PENDING_STATE) {
@@ -572,21 +569,14 @@ class RegistrationPage extends React.Component {
                <span>{intl.formatMessage(messages['already.have.an.edx.account'])}</span>
                <a href={LOGIN_PAGE} onClick={this.handleLoginLinkClickEvent}>{intl.formatMessage(messages['sign.in.hyperlink'])}</a>
              </div>
-              {(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE)
-                && !currentProvider ? (
-                  <div className="d-block mb-4 mt-4">
-                    <h4 className="d-block mx-auto mb-4">
-                      {intl.formatMessage(messages['create.an.account.using'])}
-                    </h4>
-                  </div>
-                ) : <h2 className="mt-4">{intl.formatMessage(messages['create.an.account'])}</h2>}
-              {this.renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl)}
+              <hr className="mb-20 border-gray-200" />
+              <h3 className="mb-20">{intl.formatMessage(messages['create.a.new.account'])}</h3>
              <Form className="mb-4 form-group">
                <ValidationFormGroup
                  for="name"
                  invalid={this.state.errors.name !== ''}
                  invalidMessage={this.state.errors.name}
-                  className="mb-0"
+                  className="mb-20"
                  helpText="This name will be used by any certificates that you earn."
                >
                  <label htmlFor="name" className="h6 pt-10">
@@ -608,7 +598,7 @@ class RegistrationPage extends React.Component {
                  for="username"
                  invalid={this.state.errors.username !== ''}
                  invalidMessage={this.state.errors.username}
-                  className="mb-0"
+                  className="mb-20"
                  helpText="The name that will identify you in your courses. It cannot be changed later."
                >
                  <label htmlFor="username" className="h6 pt-10">
@@ -631,7 +621,7 @@ class RegistrationPage extends React.Component {
                  for="email"
                  invalid={this.state.errors.email !== ''}
                  invalidMessage={this.state.errors.email}
-                  className="mb-0"
+                  className="mb-20"
                  helpText="This is what you will use to login."
                >
                  <label htmlFor="email" className="h6 pt-10">
@@ -654,7 +644,7 @@ class RegistrationPage extends React.Component {
                    for="password"
                    invalid={this.state.errors.password !== ''}
                    invalidMessage={this.state.errors.password}
-                    className="mb-0"
+                    className="mb-20"
                    helpText="Your password must contain at least 8 characters, including 1 letter & 1 number."
                  >
                    <label htmlFor="password" className="h6 pt-10">
@@ -687,20 +677,34 @@ class RegistrationPage extends React.Component {
                    onChange={e => this.handleOnOptional(e)}
                    required
                  />
-                  <p role="presentation" id="additionalFields" className="mb-0" onClick={e => this.handleOnOptional(e)}>
+                  <p role="presentation" id="additionalFields" className="mb-20 small" onClick={e => this.handleOnOptional(e)}>
                    {intl.formatMessage(messages['support.education.research'])}
                  </p>
                </ValidationFormGroup>
                { this.state.enableOptionalField ? this.addExtraOptionalFields() : null}
                <StatefulButton
                  type="button"
-                  className="btn-primary mt-10"
+                  variant="brand"
                  state={submitState}
                  labels={{
                    default: intl.formatMessage(messages['create.account.button']),
                  }}
                  onClick={this.handleSubmit}
                />
+                {(providers.length || secondaryProviders.length || thirdPartyAuthApiStatus === PENDING_STATE)
+                  && !currentProvider ? (
+                    <div className="d-block mb-4 mt-4">
+                      <hr className="mt-0 border-gray-200" />
+                      <span className="d-blockmb-4 text-left">
+                        {intl.formatMessage(messages['create.an.account.using'])}
+                      </span>
+                    </div>
+                  ) : <span className="mt-4 text-left">{intl.formatMessage(messages['create.an.account.using'])}</span>}
+                {this.renderThirdPartyAuth(providers,
+                  secondaryProviders,
+                  currentProvider,
+                  thirdPartyAuthApiStatus,
+                  intl)}
              </Form>
            </div>
          </div>
--- a/src/register/messages.jsx
+++ b/src/register/messages.jsx
@@ -18,13 +18,13 @@ const messages = defineMessages({
  },
  'create.an.account.using': {
    id: 'create.an.account.using',
-    defaultMessage: 'Create an account using',
-    description: 'A message that appears before social auth buttons',
+    defaultMessage: 'or create an account using',
+    description: 'A message that after optional form fields checkbox',
  },
-  'create.a.new.one.here': {
-    id: 'create.a.new.one.here',
-    defaultMessage: 'or create a new one here',
-    description: 'Text that appears after social auth buttons and before the registration form',
+  'create.a.new.account': {
+    id: 'create.a.new.account',
+    defaultMessage: 'Create a new account',
+    description: 'Text that appears before social auth buttons and before the registration form',
  },
  'register.institution.login.button': {
    id: 'register.institution.login.button',
@@ -108,7 +108,7 @@ const messages = defineMessages({
  },
  'support.education.research': {
    id: 'support.education.research',
-    defaultMessage: 'Support education research by providing additional information',
+    defaultMessage: 'Support education research by providing additional information. (Optional)',
    description: 'Text for a checkbox to ask user for if they are willing to provide extra information for education research',
  },
  'register.optional.label': {
--- a/src/register/tests/RegistrationPage.test.jsx
+++ b/src/register/tests/RegistrationPage.test.jsx
@@ -317,7 +317,7 @@ describe('./RegistrationPage.js', () => {
    store.dispatch = jest.fn(store.dispatch);

    const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
-    registrationPage.find('button.btn-primary').simulate('click');
+    registrationPage.find('button.btn-brand').simulate('click');
    expect(store.dispatch).not.toHaveBeenCalledWith(registerNewUser(formPayload));
  });

--- a/src/register/tests/snapshots/RegistrationPage.test.jsx.snap
+++ b/src/register/tests/snapshots/RegistrationPage.test.jsx.snap
@@ -32,16 +32,19 @@ exports[`./RegistrationPage.js should display no password field when current pro
           Sign in.
        </a>
      </div>
-      <h2
-        className="mt-4"
+      <hr
+        className="mb-20 border-gray-200"
+      />
+      <h3
+        className="mb-20"
      >
-        Create an Account
-      </h2>
+        Create a new account
+      </h3>
      <form
        className="mb-4 form-group"
      >
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -70,7 +73,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -100,7 +103,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -129,7 +132,7 @@ exports[`./RegistrationPage.js should display no password field when current pro
          </small>
        </div>
        <div
-          className="form-group custom-control mb-0"
+          className="form-group custom-control mb-20 small"
        >
          <input
            aria-describedby=""
@@ -173,18 +176,18 @@ exports[`./RegistrationPage.js should display no password field when current pro
            value={false}
          />
          <p
-            className="mb-0"
+            className="mb-20 small"
            id="additionalFields"
            onClick={[Function]}
            role="presentation"
          >
-            Support education research by providing additional information
+            Support education research by providing additional information. (Optional)
          </p>
        </div>
        <button
          aria-disabled={false}
          aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
          disabled={false}
          onClick={[Function]}
          type="button"
@@ -195,6 +198,11 @@ exports[`./RegistrationPage.js should display no password field when current pro
            Create Account
          </span>
        </button>
+        <span
+          className="mt-4 text-left"
+        >
+          or create an account using
+        </span>
      </form>
    </div>
  </div>
@@ -224,52 +232,19 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
           Sign in.
        </a>
      </div>
-      <div
-        className="d-block mb-4 mt-4"
+      <hr
+        className="mb-20 border-gray-200"
+      />
+      <h3
+        className="mb-20"
      >
-        <h4
-          className="d-block mx-auto mb-4"
-        >
-          Create an account using
-        </h4>
-      </div>
-      <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"
-            className="mx-auto"
-          >
-            <img
-              alt="icon Apple"
-              className="icon-image"
-              src="https://edx.devstack.lms/logo.png"
-            />
-            <span
-              aria-hidden="true"
-              className="pl-2"
-            >
-              Apple
-            </span>
-          </div>
-        </button>
-      </div>
-      <h4
-        className="d-block mx-auto mt-4"
-      >
-        or create a new one here
-      </h4>
+        Create a new account
+      </h3>
      <form
        className="mb-4 form-group"
      >
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -298,7 +273,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -328,7 +303,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -357,7 +332,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -386,7 +361,7 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
          </small>
        </div>
        <div
-          className="form-group custom-control mb-0"
+          className="form-group custom-control mb-20 small"
        >
          <input
            aria-describedby=""
@@ -430,18 +405,18 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
            value={false}
          />
          <p
-            className="mb-0"
+            className="mb-20 small"
            id="additionalFields"
            onClick={[Function]}
            role="presentation"
          >
-            Support education research by providing additional information
+            Support education research by providing additional information. (Optional)
          </p>
        </div>
        <button
          aria-disabled={false}
          aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
          disabled={false}
          onClick={[Function]}
          type="button"
@@ -452,6 +427,45 @@ exports[`./RegistrationPage.js should match TPA provider snapshot 1`] = `
            Create Account
          </span>
        </button>
+        <div
+          className="d-block mb-4 mt-4"
+        >
+          <hr
+            className="mt-0 border-gray-200"
+          />
+          <span
+            className="d-blockmb-4 text-left"
+          >
+            or create an account using
+          </span>
+        </div>
+        <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"
+              className="mx-auto"
+            >
+              <img
+                alt="icon Apple"
+                className="icon-image"
+                src="https://edx.devstack.lms/logo.png"
+              />
+              <span
+                aria-hidden="true"
+                className="pl-2"
+              >
+                Apple
+              </span>
+            </div>
+          </button>
+        </div>
      </form>
    </div>
  </div>
@@ -481,16 +495,19 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
           Sign in.
        </a>
      </div>
-      <h2
-        className="mt-4"
+      <hr
+        className="mb-20 border-gray-200"
+      />
+      <h3
+        className="mb-20"
      >
-        Create an Account
-      </h2>
+        Create a new account
+      </h3>
      <form
        className="mb-4 form-group"
      >
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -519,7 +536,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -549,7 +566,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -578,7 +595,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -607,7 +624,7 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
          </small>
        </div>
        <div
-          className="form-group custom-control mb-0"
+          className="form-group custom-control mb-20 small"
        >
          <input
            aria-describedby=""
@@ -651,18 +668,18 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
            value={false}
          />
          <p
-            className="mb-0"
+            className="mb-20 small"
            id="additionalFields"
            onClick={[Function]}
            role="presentation"
          >
-            Support education research by providing additional information
+            Support education research by providing additional information. (Optional)
          </p>
        </div>
        <button
          aria-disabled={false}
          aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
          disabled={false}
          onClick={[Function]}
          type="button"
@@ -673,6 +690,11 @@ exports[`./RegistrationPage.js should match default section snapshot 1`] = `
            Create Account
          </span>
        </button>
+        <span
+          className="mt-4 text-left"
+        >
+          or create an account using
+        </span>
      </form>
    </div>
  </div>
@@ -702,16 +724,19 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
           Sign in.
        </a>
      </div>
-      <h2
-        className="mt-4"
+      <hr
+        className="mb-20 border-gray-200"
+      />
+      <h3
+        className="mb-20"
      >
-        Create an Account
-      </h2>
+        Create a new account
+      </h3>
      <form
        className="mb-4 form-group"
      >
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -740,7 +765,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -770,7 +795,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -799,7 +824,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -828,7 +853,7 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
          </small>
        </div>
        <div
-          className="form-group custom-control mb-0"
+          className="form-group custom-control mb-20 small"
        >
          <input
            aria-describedby=""
@@ -872,18 +897,18 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
            value={false}
          />
          <p
-            className="mb-0"
+            className="mb-20 small"
            id="additionalFields"
            onClick={[Function]}
            role="presentation"
          >
-            Support education research by providing additional information
+            Support education research by providing additional information. (Optional)
          </p>
        </div>
        <button
          aria-disabled={true}
          aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary mt-10 disabled btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-pending disabled btn btn-brand"
          disabled={false}
          onClick={[Function]}
          type="button"
@@ -903,6 +928,11 @@ exports[`./RegistrationPage.js should match pending button state snapshot 1`] =
            Create Account
          </span>
        </button>
+        <span
+          className="mt-4 text-left"
+        >
+          or create an account using
+        </span>
      </form>
    </div>
  </div>
@@ -958,16 +988,19 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
           Sign in.
        </a>
      </div>
-      <h2
-        className="mt-4"
+      <hr
+        className="mb-20 border-gray-200"
+      />
+      <h3
+        className="mb-20"
      >
-        Create an Account
-      </h2>
+        Create a new account
+      </h3>
      <form
        className="mb-4 form-group"
      >
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -996,7 +1029,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -1026,7 +1059,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -1055,7 +1088,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
          </small>
        </div>
        <div
-          className="form-group mb-0"
+          className="form-group mb-20"
        >
          <label
            className="h6 pt-10"
@@ -1084,7 +1117,7 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
          </small>
        </div>
        <div
-          className="form-group custom-control mb-0"
+          className="form-group custom-control mb-20 small"
        >
          <input
            aria-describedby=""
@@ -1128,18 +1161,18 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
            value={false}
          />
          <p
-            className="mb-0"
+            className="mb-20 small"
            id="additionalFields"
            onClick={[Function]}
            role="presentation"
          >
-            Support education research by providing additional information
+            Support education research by providing additional information. (Optional)
          </p>
        </div>
        <button
          aria-disabled={false}
          aria-live="assertive"
-          className="pgn__stateful-btn pgn__stateful-btn-state-default btn-primary mt-10 btn btn-primary"
+          className="pgn__stateful-btn pgn__stateful-btn-state-default btn btn-brand"
          disabled={false}
          onClick={[Function]}
          type="button"
@@ -1150,6 +1183,11 @@ exports[`./RegistrationPage.js should show error message on 409 1`] = `
            Create Account
          </span>
        </button>
+        <span
+          className="mt-4 text-left"
+        >
+          or create an account using
+        </span>
      </form>
    </div>
  </div>