Begin groups phase 2b

frontend/src/hooks/api/auth/index.tsx

@@ -5,7 +5,6 @@ export {
   useSendMfaToken,
   useSendPasswordResetEmail,
   useSendVerificationEmail,
-  useVerifyEmailVerificationCode,
   useVerifyMfaToken,
-  useVerifyPasswordResetCode
-} from "./queries";
+  useVerifyPasswordResetCode,
+  useVerifySignupEmailVerificationCode} from "./queries";

frontend/src/hooks/api/auth/queries.tsx

@@ -164,7 +164,7 @@ export const useSendVerificationEmail = () => {
   });
 };
 
-export const useVerifyEmailVerificationCode = () => {
+export const useVerifySignupEmailVerificationCode = () => {
   return useMutation({
     mutationFn: async ({ email, code }: { email: string; code: string }) => {
       const { data } = await apiRequest.post("/api/v3/signup/email/verify", {

frontend/src/hooks/api/users/index.tsx

@@ -1,4 +1,9 @@
-export { useAddUserToWsE2EE, useAddUserToWsNonE2EE } from "./mutation";
+export {
+  useAddUserToWsE2EE,
+  useAddUserToWsNonE2EE,
+  useSendEmailVerificationCode,
+  useVerifyEmailVerificationCode
+} from "./mutation";
 export {
   fetchOrgUsers,
   useAddUserToOrg,

frontend/src/hooks/api/users/mutation.tsx

@@ -61,3 +61,23 @@ export const useAddUserToWsNonE2EE = () => {
     }
   });
 };
+
+export const useSendEmailVerificationCode = () => {
+  return useMutation({
+    mutationFn: async () => {
+      await apiRequest.post("/api/v2/users/me/emails/code");
+      return {};
+    }
+  });
+};
+
+export const useVerifyEmailVerificationCode = () => {
+  return useMutation({
+    mutationFn: async ({ code }: { code: string }) => {
+      await apiRequest.post("/api/v2/users/me/emails/verify", {
+        code
+      });
+      return {};
+    }
+  });
+};

frontend/src/pages/signup/index.tsx

@@ -13,7 +13,7 @@ import TeamInviteStep from "@app/components/signup/TeamInviteStep";
 import UserInfoStep from "@app/components/signup/UserInfoStep";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { useServerConfig } from "@app/context";
-import { useVerifyEmailVerificationCode } from "@app/hooks/api";
+import { useVerifySignupEmailVerificationCode } from "@app/hooks/api";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
 
@@ -34,7 +34,7 @@ export default function SignUp() {
   const [isSignupWithEmail, setIsSignupWithEmail] = useState(false);
   const [isCodeInputCheckLoading, setIsCodeInputCheckLoading] = useState(false);
   const { t } = useTranslation();
-  const { mutateAsync } = useVerifyEmailVerificationCode();
+  const { mutateAsync } = useVerifySignupEmailVerificationCode();
   const { config } = useServerConfig();
 
   useEffect(() => {

frontend/src/views/Signup/SignupSSO.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import jwt_decode from "jwt-decode";
 
-import { BackupPDFStep, UserInfoSSOStep } from "./components";
+import { BackupPDFStep, EmailConfirmationStep,UserInfoSSOStep } from "./components";
 
 type Props = {
   providerAuthToken: string;
@@ -28,6 +28,8 @@ export const SignupSSO = ({ providerAuthToken }: Props) => {
           />
         );
       case 1:
+        return <EmailConfirmationStep />;
+      case 2:
         return (
           <BackupPDFStep email={username} password={password} name={`${firstName} ${lastName}`} />
         );

frontend/src/views/Signup/components/EmailConfirmationStep/EmailConfirmationStep.tsx

@@ -0,0 +1,149 @@
+// confirm email
+// if same email exists, then trigger fn to merge automatically
+import { useState } from "react";
+import ReactCodeInput from "react-code-input";
+
+// import Error from "@app/components/basic/Error";
+import { createNotification } from "@app/components/notifications";
+import { Button } from "@app/components/v2";
+import { useUser } from "@app/context";
+import { useSendEmailVerificationCode, useVerifyEmailVerificationCode } from "@app/hooks/api";
+
+// The style for the verification code input
+const props = {
+  inputStyle: {
+    fontFamily: "monospace",
+    margin: "4px",
+    MozAppearance: "textfield",
+    width: "55px",
+    borderRadius: "5px",
+    fontSize: "24px",
+    height: "55px",
+    paddingLeft: "7",
+    backgroundColor: "#0d1117",
+    color: "white",
+    border: "1px solid #2d2f33",
+    textAlign: "center",
+    outlineColor: "#8ca542",
+    borderColor: "#2d2f33"
+  }
+} as const;
+const propsPhone = {
+  inputStyle: {
+    fontFamily: "monospace",
+    margin: "4px",
+    MozAppearance: "textfield",
+    width: "40px",
+    borderRadius: "5px",
+    fontSize: "24px",
+    height: "40px",
+    paddingLeft: "7",
+    backgroundColor: "#0d1117",
+    color: "white",
+    border: "1px solid #2d2f33",
+    textAlign: "center",
+    outlineColor: "#8ca542",
+    borderColor: "#2d2f33"
+  }
+} as const;
+
+export const EmailConfirmationStep = () => {
+  const { user } = useUser();
+  const [code, setCode] = useState("");
+  // const [codeError, setCodeError] = useState(false);
+  const [isResendingVerificationEmail] = useState(false);
+  const [isLoading] = useState(false);
+
+  const { mutateAsync: sendEmailVerificationCode } = useSendEmailVerificationCode();
+  const { mutateAsync: verifyEmailVerificationCode } = useVerifyEmailVerificationCode();
+
+  const checkCode = async () => {
+    try {
+      console.log("checkCode code: ", code);
+      await verifyEmailVerificationCode({ code });
+      console.log("checkCode 2");
+    } catch (err) {
+      createNotification({
+        text: "Failed to verify code",
+        type: "error"
+      });
+    }
+  };
+
+  const resendCode = async () => {
+    try {
+      console.log("resendCode");
+      await sendEmailVerificationCode();
+      console.log("resendCode");
+    } catch (err) {
+      createNotification({
+        text: "Failed to resend code",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mx-auto h-full w-full pb-4 md:px-8">
+      <p className="text-md flex justify-center text-bunker-200">
+        We&apos;ve sent a verification code to
+      </p>
+      <p className="text-md my-1 flex justify-center font-semibold text-bunker-200">
+        {user?.email}
+      </p>
+      <div className="mx-auto hidden w-max min-w-[20rem] md:block">
+        <ReactCodeInput
+          name=""
+          inputMode="tel"
+          type="text"
+          fields={6}
+          onChange={setCode}
+          {...props}
+          className="mt-6 mb-2"
+        />
+      </div>
+      <div className="mx-auto mt-4 block w-max md:hidden">
+        <ReactCodeInput
+          name=""
+          inputMode="tel"
+          type="text"
+          fields={6}
+          onChange={setCode}
+          {...propsPhone}
+          className="mt-2 mb-2"
+        />
+      </div>
+      {/* {codeError && <Error text="Oops. Your code is wrong. Please try again." />} */}
+      <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
+        <div className="text-l w-full py-1 text-lg">
+          <Button
+            type="submit"
+            onClick={checkCode}
+            size="sm"
+            isFullWidth
+            className="h-14"
+            colorSchema="primary"
+            variant="outline_bg"
+            isLoading={isLoading}
+          >
+            {" "}
+            Verify
+          </Button>
+        </div>
+      </div>
+      <div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
+        <div className="flex flex-row items-baseline gap-1 text-sm">
+          <span className="text-bunker-400">Don&apos;t see the code?</span>
+          <div className="text-md mt-2 flex flex-row text-bunker-400">
+            <button disabled={isLoading} onClick={resendCode} type="button">
+              <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+                {isResendingVerificationEmail ? "Resending..." : "Resend"}
+              </span>
+            </button>
+          </div>
+        </div>
+        <p className="pb-2 text-sm text-bunker-400">Make sure to check your spam inbox.</p>
+      </div>
+    </div>
+  );
+};

frontend/src/views/Signup/components/EmailConfirmationStep/index.tsx

@@ -0,0 +1 @@
+export { EmailConfirmationStep } from "./EmailConfirmationStep";

frontend/src/views/Signup/components/index.tsx

@@ -1,2 +1,3 @@
 export { BackupPDFStep } from "./BackupPDFStep";
+export { EmailConfirmationStep } from "./EmailConfirmationStep";
 export { UserInfoSSOStep } from "./UserInfoSSOStep";