Save signup fields

airbyte-webapp/src/packages/cloud/lib/auth/GoogleAuthService.ts

@@ -6,6 +6,7 @@ import {
   signInWithEmailAndPassword,
   sendPasswordResetEmail,
   confirmPasswordReset,
+  updateProfile,
   applyActionCode,
   sendEmailVerification,
   EmailAuthProvider,
@@ -89,6 +90,13 @@ export class GoogleAuthService implements AuthService {
     );
   }
 
+  async updateProfile(displayName: string): Promise<void> {
+    if (this.auth.currentUser === null) {
+      throw new Error("Not able to update profile for not loggedIn user!");
+    }
+    return updateProfile(this.auth.currentUser, { displayName });
+  }
+
   async reauthenticate(
     email: string,
     password: string

airbyte-webapp/src/packages/cloud/lib/domain/users/UserService.ts

@@ -34,6 +34,8 @@ class UserService extends AirbyteRequestService {
     authProvider: string;
     email: string;
     name: string;
+    companyName: string;
+    news: boolean;
     invitedWorkspaceId?: string;
     status?: "invited";
   }): Promise<User> {

airbyte-webapp/src/packages/cloud/services/auth/AuthService.tsx

@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useMemo } from "react";
 import { useQueryClient } from "react-query";
 import { useResetter } from "rest-hooks";
+import { User as FbUser } from "firebase/auth";
 
 import { GoogleAuthService } from "packages/cloud/lib/auth/GoogleAuthService";
 import useTypesafeReducer from "hooks/useTypesafeReducer";
@@ -35,7 +36,10 @@ export type AuthLogin = (values: {
 export type AuthSignUp = (form: {
   email: string;
   password: string;
-}) => Promise<User | null>;
+  companyName: string;
+  name: string;
+  news: boolean;
+}) => Promise<void>;
 
 export type AuthChangeEmail = (
   email: string,
@@ -64,6 +68,46 @@ type AuthContextApi = {
 
 export const AuthContext = React.createContext<AuthContextApi | null>(null);
 
+const getTempSignUpStorageKey = (currentUser: FbUser): string =>
+  `${currentUser.uid}/temp-signup-data`;
+
+const TempSignUpValuesProvider = {
+  get: (
+    currentUser: FbUser
+  ): {
+    companyName: string;
+    name: string;
+    news: boolean;
+  } => {
+    try {
+      const key = getTempSignUpStorageKey(currentUser);
+
+      const storedValue = localStorage.getItem(key);
+
+      if (storedValue) {
+        return JSON.parse(storedValue);
+      }
+    } catch (err) {
+      // passthrough and return default values
+    }
+
+    return {
+      companyName: "",
+      name: currentUser.email ?? "",
+      news: false,
+    };
+  },
+  save: (
+    currentUser: FbUser,
+    v: { companyName: string; name: string; news: boolean }
+  ) => {
+    localStorage.setItem(
+      getTempSignUpStorageKey(currentUser),
+      JSON.stringify(v)
+    );
+  },
+};
+
 export const AuthenticationProvider: React.FC = ({ children }) => {
   const [
     state,
@@ -89,11 +133,14 @@ export const AuthenticationProvider: React.FC = ({ children }) => {
           );
         } catch (err) {
           if (currentUser.email) {
+            const encodedData = TempSignUpValuesProvider.get(currentUser);
             user = await userService.create({
               authProvider: AuthProviders.GoogleIdentityPlatform,
               authUserId: currentUser.uid,
               email: currentUser.email,
-              name: currentUser.email,
+              name: encodedData.name,
+              companyName: encodedData.companyName,
+              news: encodedData.news,
             });
           }
         }
@@ -158,17 +205,18 @@ export const AuthenticationProvider: React.FC = ({ children }) => {
       async signUp(form: {
         email: string;
         password: string;
-      }): Promise<User | null> {
-        await authService.signUp(form.email, form.password);
-        // const user = await userService.create({
-        //   authProvider: AuthProviders.GoogleIdentityPlatform,
-        //   authUserId: fbUser.user!.uid,
-        //   email: form.email,
-        //   name: form.email,
-        // });
+        companyName: string;
+        name: string;
+        news: boolean;
+      }): Promise<void> {
+        const creds = await authService.signUp(form.email, form.password);
+        TempSignUpValuesProvider.save(creds.user, {
+          companyName: form.companyName,
+          name: form.name,
+          news: form.news,
+        });
 
         await authService.sendEmailVerifiedLink();
-        return null;
       },
       user: state.currentUser,
     }),

airbyte-webapp/src/packages/cloud/views/auth/SignupPage/SignupPage.tsx

@@ -20,10 +20,10 @@ import SpecialBlock from "./components/SpecialBlock";
 
 type FormValues = {
   name: string;
-  company: string;
+  companyName: string;
   email: string;
   password: string;
-  subscribe: boolean;
+  news: boolean;
   security: boolean;
 };
 
@@ -38,7 +38,7 @@ const SignupPageValidationSchema = yup.object().shape({
     .min(6, "signup.password.minLength")
     .required("form.empty.error"),
   name: yup.string().required("form.empty.error"),
-  company: yup.string().required("form.empty.error"),
+  companyName: yup.string().required("form.empty.error"),
   security: yup.boolean().oneOf([true], "form.empty.error"),
 });
 
@@ -58,10 +58,10 @@ const SignupPage: React.FC = () => {
       <Formik<FormValues>
         initialValues={{
           name: "",
-          company: "",
+          companyName: "",
           email: "",
           password: "",
-          subscribe: true,
+          news: true,
           security: false,
         }}
         validationSchema={SignupPageValidationSchema}
@@ -98,7 +98,7 @@ const SignupPage: React.FC = () => {
                   />
                 )}
               </Field>
-              <Field name="company">
+              <Field name="companyName">
                 {({ field, meta }: FieldProps<string>) => (
                   <LabeledInput
                     {...field}
@@ -158,7 +158,7 @@ const SignupPage: React.FC = () => {
               </Field>
             </FieldItem>
             <FieldItem>
-              <Field name="subscribe">
+              <Field name="news">
                 {({ field, meta }: FieldProps<string>) => (
                   <MarginBlock>
                     <CheckBoxControl