Logistration page redesign

src/base-container/components/default-layout/LargeLayout.jsx

@@ -12,31 +12,33 @@ const LargeLayout = () => {
 
   return (
     <div className="w-50 d-flex">
-      <div className="col-md-9 bg-primary-400">
+      <div className="col-md-9 dark-blueish-background-color">
         <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
           <Image className="logo position-absolute" alt={getConfig().SITE_NAME} src={getConfig().LOGO_WHITE_URL} />
         </Hyperlink>
         <div className="min-vh-100 d-flex align-items-center">
           <div className={classNames({ 'large-yellow-line mr-n4.5': getConfig().SITE_NAME === 'edX' })} />
           <h1
             className={classNames(
-              'display-2 text-white mw-xs',
+              'text-white mw-xs',
               { 'ml-6': getConfig().SITE_NAME !== 'edX' },
             )}
           >
-            {formatMessage(messages['start.learning'])}
-            <div className="text-accent-a">
-              {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+            <div className='montserrat-font'>
+              <div className="bigger-text">
+                {formatMessage(messages['start.learning'])}
+              </div>
+              <div className="pumpkin-orange-text bigger-text">
+                {formatMessage(messages['with.site.name'], { siteName: getConfig().SITE_NAME })}
+              </div>
             </div>
           </h1>
         </div>
       </div>
       <div className="col-md-3 bg-white p-0">
-        <svg className="ml-n1 w-100 h-100 large-screen-svg-primary" preserveAspectRatio="xMaxYMin meet">
-          <g transform="skewX(171.6)">
-            <rect x="0" y="0" height="100%" width="100%" />
-          </g>
-        </svg>
+        <div className='curve-container'>
+          <div className='curve-divider'></div>
+        </div>
       </div>
     </div>
   );

src/base-container/components/default-layout/messages.js

@@ -3,12 +3,14 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 const messages = defineMessages({
   'start.learning': {
     id: 'start.learning',
-    defaultMessage: 'Start learning',
+    // defaultMessage: 'Start learning',
+    defaultMessage: 'Start learning with',
     description: 'Header text for logistration MFE pages',
   },
   'with.site.name': {
     id: 'with.site.name',
-    defaultMessage: 'with {siteName}',
+    // defaultMessage: 'with {siteName}',
+    defaultMessage: 'Cognitive Class',
     description: 'Header text with site name for logistration MFE pages',
   },
 });

src/base-container/index.jsx

@@ -60,6 +60,7 @@ const BaseContainer = ({ children, showWelcomeBanner }) => {
     <>
       <div className="col-md-12 extra-large-screen-top-stripe" />
       <div className="layout">
+        {/* SN-TODO: Update Small and Medium layouts according to Large */}
         <MediaQuery maxWidth={breakpoints.small.maxWidth - 1}>
           {authenticatedUser ? <AuthSmallLayout username={username} /> : <DefaultSmallLayout />}
         </MediaQuery>

src/common-components/PasswordField.jsx

@@ -55,7 +55,7 @@ const PasswordField = (props) => {
   );
 
   return (
-    <Form.Group controlId={props.name} isInvalid={props.errorMessage !== ''}>
+    <Form.Group className='grid-1' controlId={props.name} isInvalid={props.errorMessage !== ''}>
       <OverlayTrigger key="tooltip" placement={placement} overlay={tooltip} show={showTooltip}>
         <Form.Control
           as="input"

src/common-components/SocialAuthProviders.jsx

@@ -26,7 +26,7 @@ const SocialAuthProviders = (props) => {
       id={provider.id}
       key={provider.id}
       type="button"
-      className={`btn-social btn-${provider.id} ${index % 2 === 0 ? 'mr-3' : ''}`}
+      className={`btn-social btn-${provider.id} `}
       data-provider-url={referrer === LOGIN_PAGE ? provider.loginUrl : provider.registerUrl}
       onClick={handleSubmit}
     >

src/login/LoginPage.jsx

@@ -162,20 +162,20 @@ class LoginPage extends React.Component {
     return errors.password;
   }
 
+  clickRegisterPage() {
+    const registerTab = document.querySelector('[id="controlled-tab-tab-/register"]');
+    console.log(registerTab);
+    registerTab.click();
+  };
+
+  // Third party login button renderers
   renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl) {
     const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
-    const isSocialAuthActive = !!providers.length && !currentProvider;
+    const isSocialAuthActive = !!providers.length && !currentProvider;     
     const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
 
     return (
-      <>
-        {(isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive))
-          && (
-            <div className="mt-4 mb-3 h4">
-              {intl.formatMessage(messages['login.other.options.heading'])}
-            </div>
-          )}
-
+      <div>
         {(!isEnterpriseLoginDisabled && isSocialAuthActive) && (
           <Hyperlink className="btn btn-link btn-sm text-body p-0 mb-4" destination={this.getEnterPriseLoginURL()}>
             <Icon src={Institution} className="institute-icon" />
@@ -194,13 +194,24 @@ class LoginPage extends React.Component {
               />
             )}
             {isSocialAuthActive && (
-              <div className="row m-0">
+              <div className="grid m-0">
                 <SocialAuthProviders socialAuthProviders={providers} />
               </div>
             )}
           </>
         )}
-      </>
+
+        {/* SN-TODO:  This controls the "Or sign in with:" text that goes
+                      along with the third party auth buttons. I set this
+                      to true so that I can consistently see the heading,
+                      but REVERT this hack before deploying to prod*/}
+        {(isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive))
+          && (
+            <div className="other-login-option-lite h4 text-center">
+              {intl.formatMessage(messages['login.other.options.heading'])}
+            </div>
+          )}
+      </div>
     );
   }
 
@@ -231,7 +242,7 @@ class LoginPage extends React.Component {
     }
 
     return (
-      <>
+      <div>
         <Helmet>
           <title>{intl.formatMessage(messages['login.page.title'],
             { siteName: getConfig().SITE_NAME })}
@@ -242,7 +253,7 @@ class LoginPage extends React.Component {
           redirectUrl={this.props.loginResult.redirectUrl}
           finishAuthUrl={thirdPartyAuthContext.finishAuthUrl}
         />
-        <div className="mw-xs mt-3">
+        <div>
           <ThirdPartyAuthAlert
             currentProvider={thirdPartyAuthContext.currentProvider}
             platformName={thirdPartyAuthContext.platformName}
@@ -253,54 +264,65 @@ class LoginPage extends React.Component {
           {activationMsgType && <AccountActivationMessage messageType={activationMsgType} />}
           {this.props.resetPassword && !this.props.loginError ? <ResetPasswordSuccess /> : null}
           <Form name="sign-in-form" id="sign-in-form">
-            <FormGroup
-              name="emailOrUsername"
-              value={this.state.emailOrUsername}
-              autoComplete="on"
-              handleChange={(e) => this.setState({ emailOrUsername: e.target.value, isSubmitted: false })}
-              handleFocus={this.handleOnFocus}
-              handleBlur={this.handleOnBlur}
-              errorMessage={this.state.errors.emailOrUsername}
-              floatingLabel={intl.formatMessage(messages['login.user.identity.label'])}
-            />
-            <PasswordField
-              name="password"
-              value={this.state.password}
-              autoComplete="off"
-              showRequirements={false}
-              handleChange={(e) => this.setState({ password: e.target.value, isSubmitted: false })}
-              handleFocus={this.handleOnFocus}
-              handleBlur={this.handleOnBlur}
-              errorMessage={this.state.errors.password}
-              floatingLabel={intl.formatMessage(messages['login.password.label'])}
-            />
-            <StatefulButton
-              name="sign-in"
-              id="sign-in"
-              type="submit"
-              variant="brand"
-              className="login-button-width"
-              state={submitState}
-              labels={{
-                default: intl.formatMessage(messages['sign.in.button']),
-                pending: '',
-              }}
-              onClick={this.handleSubmit}
-              onMouseDown={(e) => e.preventDefault()}
-            />
-            <Link
-              id="forgot-password"
-              name="forgot-password"
-              className="btn btn-link font-weight-500 text-body"
-              to={updatePathWithQueryParams(RESET_PAGE)}
-              onClick={this.handleForgotPasswordLinkClickEvent}
-            >
-              {intl.formatMessage(messages['forgot.password'])}
-            </Link>
             {this.renderThirdPartyAuth(providers, secondaryProviders, currentProvider, thirdPartyAuthApiStatus, intl)}
+            <FormGroup
+                name="emailOrUsername"
+                value={this.state.emailOrUsername}
+                autoComplete="on"
+                handleChange={(e) => this.setState({ emailOrUsername: e.target.value, isSubmitted: false })}
+                handleFocus={this.handleOnFocus}
+                handleBlur={this.handleOnBlur}
+                errorMessage={this.state.errors.emailOrUsername}
+                floatingLabel={intl.formatMessage(messages['login.user.identity.label'])}
+              />
+            <div className='margin-top-1rem'>
+              <PasswordField
+                name="password"
+                value={this.state.password}
+                autoComplete="off"
+                showRequirements={false}
+                handleChange={(e) => this.setState({ password: e.target.value, isSubmitted: false })}
+                handleFocus={this.handleOnFocus}
+                handleBlur={this.handleOnBlur}
+                errorMessage={this.state.errors.password}
+                floatingLabel={intl.formatMessage(messages['login.password.label'])}
+              />
+            </div>
+            <div className='forgot-password-container-outer margin-bottom-3rem'>
+              <div className='forgot-password-container-inner'>
+                <Link
+                  id="forgot-password"
+                  name="forgot-password"
+                  className=""
+                  to={updatePathWithQueryParams(RESET_PAGE)}
+                  onClick={this.handleForgotPasswordLinkClickEvent}
+                >
+                  {intl.formatMessage(messages['forgot.password'])}
+                </Link>
+              </div>
+            </div>
+            <div className='login-button-container'>
+              <StatefulButton
+                name="sign-in"
+                id="sign-in"
+                type="submit"
+                variant="brand"
+                className="login-button-width"
+                state={submitState}
+                labels={{
+                  default: intl.formatMessage(messages['sign.in.button']),
+                  pending: '',
+                }}
+                onClick={this.handleSubmit}
+                onMouseDown={(e) => e.preventDefault()}
+              />
+            </div>
+            <div className='signin-page-box'>
+              <a>Don't have an account? <a className='sign-up-page-link' onClick={this.clickRegisterPage}>Sign up here</a></a>
+            </div>            
           </Form>
         </div>
-      </>
+      </div>
     );
   }
 

src/login/messages.jsx

@@ -19,12 +19,12 @@ const messages = defineMessages({
   },
   'sign.in.button': {
     id: 'sign.in.button',
-    defaultMessage: 'Sign in',
+    defaultMessage: 'Login',
     description: 'Sign in button label that appears on login page',
   },
   'forgot.password': {
     id: 'forgot.password',
-    defaultMessage: 'Forgot password',
+    defaultMessage: 'Forgot password?',
     description: 'Button text for forgot password',
   },
   'institution.login.button': {
@@ -44,7 +44,7 @@ const messages = defineMessages({
   },
   'login.other.options.heading': {
     id: 'login.other.options.heading',
-    defaultMessage: 'Or sign in with:',
+    defaultMessage: 'or Sign in with Email:',
     description: 'Text that appears above other sign in options like social auth buttons',
   },
   'non.compliant.password.title': {

src/logistration/Logistration.jsx

@@ -84,13 +84,19 @@ const Logistration = (props) => {
 
   return (
     <BaseContainer>
-      <div>
+      <div className='content-align-center montserrat-font'>
+        <div className='logistration-title'>
+          {selectedPage === LOGIN_PAGE
+            ? <>Log in to your account</>
+            : <>Sign up</>}
+        </div>
         {disablePublicAccountCreation
           ? (
             <>
               <Redirect to={updatePathWithQueryParams(LOGIN_PAGE)} />
               {institutionLogin && (
-                <Tabs defaultActiveKey="" id="controlled-tab" onSelect={handleInstitutionLogin}>
+                // register/sign up tabs
+                <Tabs defaultActiveKey="" id="controlled-tab" onSelect={handleInstitutionLogin}> 
                   <Tab title={tabTitle} eventKey={LOGIN_PAGE} />
                 </Tabs>
               )}
@@ -104,24 +110,30 @@ const Logistration = (props) => {
           )
           : (
             <div>
-              {institutionLogin
-                ? (
-                  <Tabs defaultActiveKey="" id="controlled-tab" onSelect={handleInstitutionLogin}>
-                    <Tab title={tabTitle} eventKey={selectedPage === LOGIN_PAGE ? LOGIN_PAGE : REGISTER_PAGE} />
-                  </Tabs>
-                )
-                : (!isValidTpaHint() && (
-                  <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={handleOnSelect}>
-                    <Tab title={formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
-                    <Tab title={formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
-                  </Tabs>
-                ))}
+              {/* IMPORTANT: register/sign up tabs */}
+              <div className='hide'>
+                {institutionLogin
+                  ? (
+                    <Tabs defaultActiveKey="" id="controlled-tab" onSelect={handleInstitutionLogin}>
+                      <Tab title={tabTitle} eventKey={selectedPage === LOGIN_PAGE ? LOGIN_PAGE : REGISTER_PAGE} />
+                    </Tabs>
+                  )
+                  : (!isValidTpaHint() && (
+                    <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={handleOnSelect}>
+                      <Tab title={formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
+                      <Tab title={formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
+                    </Tabs>
+                  ))}
+              </div>
               { key && (
                 <Redirect to={updatePathWithQueryParams(key)} />
               )}
               <div id="main-content" className="main-content">
                 {selectedPage === LOGIN_PAGE
-                  ? <LoginPage institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />
+                  ? 
+                  <div>
+                    <LoginPage institutionLogin={institutionLogin} handleInstitutionLogin={handleInstitutionLogin} />
+                  </div>
                   : (
                     <RegistrationPage
                       institutionLogin={institutionLogin}