PR comments

airbytehq · Feb 8, 2023 · 046fa95 · 046fa95
1 parent dcd0eed
commit 046fa95
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 51 deletions.
diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
@@ -164,8 +164,8 @@
   "signup.details.instantSetup": "Instant setup",
   "signup.details.freeTrial": "14-day free trial",
   "signup.title": "Create your Airbyte account",
-  "signup.method.email": "Sign up with email",
-  "signup.method.oauth": "Sign up with Google or Github",
+  "signup.method.email": "Sign up using email",
+  "signup.method.oauth": "Sign up using Google or GitHub",
   "email.duplicate": "Email already exists",
   "email.notfound": "Email not found",
   "email.disabled": "Your account is disabled",

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.tsx b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SignupForm.tsx
@@ -96,27 +96,23 @@ export const EmailField: React.FC<{ label?: React.ReactNode }> = ({ label }) =>
   return (
     <Field name="email">
       {({ field, meta }: FieldProps<string>) => (
-        <>
-          {" "}
-          <LabeledInput
-            {...field}
-            label={label || <FormattedMessage id="login.yourEmail" />}
-            placeholder={formatMessage({
-              id: "login.yourEmail.placeholder",
-            })}
-            type="text"
-            error={(!!meta.error && meta.touched) || (meta.touched && !isCorporateEmail(field.value))}
-            message={getMessage({ touched: meta.touched, error: meta.error, value: field.value })}
-          />
-        </>
+        <LabeledInput
+          {...field}
+          label={label || <FormattedMessage id="login.yourEmail" />}
+          placeholder={formatMessage({
+            id: "login.yourEmail.placeholder",
+          })}
+          type="text"
+          error={(!!meta.error && meta.touched) || (meta.touched && !isCorporateEmail(field.value))}
+          message={getMessage({ touched: meta.touched, error: meta.error, value: field.value })}
+        />
       )}
     </Field>
   );
 };
 
 export const PasswordField: React.FC<{ label?: React.ReactNode }> = ({ label }) => {
   const { formatMessage } = useIntl();
-  const isSimpleLeftSide = useExperiment("authPage.signup.simplifyLeftSide", false);
 
   return (
     <Field name="password">
@@ -130,28 +126,26 @@ export const PasswordField: React.FC<{ label?: React.ReactNode }> = ({ label })
             })}
             type="password"
             error={!!meta.error && meta.touched}
-            message={meta.touched && meta.error && formatMessage({ id: meta.error })}
           />
-          {isSimpleLeftSide && (
-            <FlexContainer gap="sm" alignItems="center" className={styles.passwordCheckContainer}>
-              <FontAwesomeIcon
-                icon={Boolean(meta.error) && meta.touched ? faXmarkCircle : faCheckCircle}
-                className={classNames(styles.checkIcon, {
-                  [styles.error]: Boolean(meta.error) && meta.touched,
-                  [styles.valid]: meta.touched && !meta.error,
-                })}
-              />
 
-              <Text
-                size="sm"
-                className={classNames({
-                  [styles.error]: Boolean(meta.error) && meta.touched,
-                })}
-              >
-                <FormattedMessage id="signup.password.minLength" />
-              </Text>
-            </FlexContainer>
-          )}
+          <FlexContainer gap="sm" alignItems="center" className={styles.passwordCheckContainer}>
+            <FontAwesomeIcon
+              icon={Boolean(meta.error) && meta.touched ? faXmarkCircle : faCheckCircle}
+              className={classNames(styles.checkIcon, {
+                [styles.error]: Boolean(meta.error) && meta.touched,
+                [styles.valid]: meta.touched && !meta.error,
+              })}
+            />
+
+            <Text
+              size="sm"
+              className={classNames({
+                [styles.error]: Boolean(meta.error) && meta.touched,
+              })}
+            >
+              <FormattedMessage id="signup.password.minLength" />
+            </Text>
+          </FlexContainer>
         </>
       )}
     </Field>

diff --git a/...packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.module.scss b/...packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.module.scss
@@ -9,7 +9,3 @@
   min-width: fit-content;
   color: colors.$dark-blue;
 }
-
-.detailsContainer {
-  overflow: visible;
-}
diff --git a/...app/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.tsx b/...app/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.tsx
@@ -30,7 +30,7 @@ export const SimpleLeftSide: React.FC = () => {
         <FormattedMessage id="signup.title" />
       </Heading>
 
-      <FlexContainer className={styles.detailsContainer} alignItems="center">
+      <FlexContainer justifyContent="center" alignItems="center">
         <Detail>
           <FormattedMessage id="signup.details.noCreditCard" />
         </Detail>
@@ -41,7 +41,7 @@ export const SimpleLeftSide: React.FC = () => {
           <FormattedMessage id="signup.details.freeTrial" />
         </Detail>
       </FlexContainer>
-      {showOauth ? <OAuthLogin isSignUpPage /> : <SignupForm />}
+      {showOauth ? <OAuthLogin /> : <SignupForm />}
 
       {showOauth ? (
         <Button

diff --git a/...pp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/check.svg b/...pp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/check.svg