From 046fa95fb462a2f2a7d706ddedde440c4f6e169d Mon Sep 17 00:00:00 2001
From: letiescanciano <leti@airbyte.io>
Date: Wed, 8 Feb 2023 15:07:26 +0100
Subject: [PATCH] PR comments

---
 .../src/packages/cloud/locales/en.json        |  4 +-
 .../auth/SignupPage/components/SignupForm.tsx | 62 +++++++++----------
 .../SimpleLeftSide/SimpleLeftSide.module.scss |  4 --
 .../SimpleLeftSide/SimpleLeftSide.tsx         |  4 +-
 .../components/SimpleLeftSide/check.svg       |  9 ---
 5 files changed, 32 insertions(+), 51 deletions(-)
 delete mode 100644 airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/check.svg

diff --git a/airbyte-webapp/src/packages/cloud/locales/en.json b/airbyte-webapp/src/packages/cloud/locales/en.json
index 3c188cead0f8..fad4a48e6756 100644
--- 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
index 47b0174e5a2e..40e9b64ae107 100644
--- 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,19 +96,16 @@ 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>
   );
@@ -116,7 +113,6 @@ export const EmailField: React.FC<{ label?: React.ReactNode }> = ({ label }) =>
 
 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/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.module.scss b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.module.scss
index ef349111375c..8d99e42f7382 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.module.scss
+++ b/airbyte-webapp/src/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/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.tsx b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.tsx
index 4270e9d1a556..5f0474ca72d3 100644
--- a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/SimpleLeftSide.tsx
+++ b/airbyte-webapp/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/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/check.svg b/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/check.svg
deleted file mode 100644
index 24689b906569..000000000000
--- a/airbyte-webapp/src/packages/cloud/views/auth/SignupPage/components/SimpleLeftSide/check.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-        d="M9 1.81818L10.6262 3.6934L12.905 2.70946L13.5565 5.10455L16.0365 5.20677L15.5843 7.64735L17.7744 8.81549L16.308 10.8182L17.7744 12.8209L15.5843 13.989L16.0365 16.4296L13.5565 16.5318L12.905 18.9269L10.6262 17.9429L9 19.8182L7.37382 17.9429L5.09505 18.9269L4.44354 16.5318L1.96352 16.4296L2.41572 13.989L0.225649 12.8209L1.692 10.8182L0.225649 8.81549L2.41572 7.64735L1.96352 5.20677L4.44354 5.10455L5.09505 2.70946L7.37382 3.6934L9 1.81818Z"
-        fill="#C0C3D9" />
-    <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M7.56983 14.1289L4.73486 11.2939L5.63534 10.3934L8.02007 12.7782L12.5855 8.21268L13.486 9.11316L8.4703 14.1289C8.22164 14.3775 7.81849 14.3775 7.56983 14.1289Z"
-        fill="white" />
-</svg>
-    
\ No newline at end of file