Update

frontend/src/pages/api/auth/CompleteAccountInformationSignup.ts

@@ -70,7 +70,7 @@ const completeAccountInformationSignup = async ({
     verifier,
     organizationName,
     providerAuthToken,
-    attributionSource,
+    ...(attributionSource ? { attributionSource } : {})
   });
 
   return data;

frontend/src/pages/login.tsx

@@ -1,139 +0,0 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import Head from "next/head";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import axios from "axios"
-
-// import ListBox from '@app/components/basic/Listbox';
-import InitialLoginStep from "@app/components/login/InitialLoginStep";
-import MFAStep from "@app/components/login/MFAStep";
-import PasswordInputStep from "@app/components/login/PasswordInputStep";
-import { fetchUserDetails } from "@app/hooks/api/users/queries";
-import { useProviderAuth } from "@app/hooks/useProviderAuth";
-import { getAuthToken, isLoggedIn } from "@app/reactQuery";
-
-import getOrganizations from "./api/organization/getOrgs";
-
-export default function Login() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [step, setStep] = useState(1);
-  const { t } = useTranslation();
-
-  // const lang = router.locale ?? 'en';
-  const {
-    providerAuthToken,
-    email: providerEmail,
-    setProviderAuthToken,
-    isProviderUserCompleted
-  } = useProviderAuth();
-
-  if (providerAuthToken && isProviderUserCompleted === false) {
-    router.push(`/signup?providerAuthToken=${encodeURIComponent(providerAuthToken)}`);
-  }
-
-  // const setLanguage = async (to: string) => {
-  //   router.push('/login', '/login', { locale: to });
-  //   localStorage.setItem('lang', to);
-  // };
-
-  useEffect(() => {
-    // TODO(akhilmhdh): workspace will be controlled by a workspace context
-    const redirectToDashboard = async () => {
-      try {
-        const userOrgs = await getOrganizations();
-        // userWorkspace = userWorkspaces[0] && userWorkspaces[0]._id;
-        const userOrg = userOrgs[0] && userOrgs[0]._id;
-
-        // user details
-        const userDetails = await fetchUserDetails()
-        // send details back to client
-
-        const queryParams = new URLSearchParams(window.location.search)
-        if (queryParams && queryParams.get("callback_port")) {
-          const callbackPort = queryParams.get("callback_port")
-
-          // send post request to cli with details
-          const cliUrl = `http://localhost:${callbackPort}`
-          const instance = axios.create()
-          await instance.post(cliUrl, { email: userDetails.email, privateKey: localStorage.getItem("PRIVATE_KEY"), JTWToken: getAuthToken() })
-        }
-        router.push(`/org/${userOrg}/overview`);
-      } catch (error) {
-        console.log("Error - Not logged in yet");
-      }
-    };
-    if (isLoggedIn()) {
-      redirectToDashboard();
-    }
-  }, []);
-
-  const renderView = (loginStep: number) => {
-    if (providerAuthToken && step === 1) {
-      return (
-        <PasswordInputStep
-          email={providerEmail}
-          password={password}
-          providerAuthToken={providerAuthToken}
-          setPassword={setPassword}
-          setProviderAuthToken={setProviderAuthToken}
-          setStep={setStep}
-        />
-      );
-    }
-
-    if (loginStep === 1) {
-      return <InitialLoginStep
-        setStep={setStep}
-        email={email}
-        setEmail={setEmail}
-        password={password}
-        setPassword={setPassword}
-      />;
-    }
-
-    if (step === 2) {
-      return (
-        <MFAStep
-          email={email || providerEmail}
-          password={password}
-          providerAuthToken={providerAuthToken}
-        />
-      );
-    }
-
-    return <div />;
-  };
-
-  return (
-    <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
-      <Head>
-        <title>{t("common.head-title", { title: t("login.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content={t("login.og-title") ?? ""} />
-        <meta name="og:description" content={t("login.og-description") ?? ""} />
-      </Head>
-      <Link href="/">
-        <div className="mb-4 mt-20 flex justify-center">
-          <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
-        </div>
-      </Link>
-      {renderView(step)}
-      {/* <div className="absolute right-4 top-0 mt-4 flex items-center justify-center">
-        <div className="mx-auto w-48">
-          <ListBox
-            isSelected={lang}
-            onChange={setLanguage}
-            data={['en', 'ko', 'fr', 'pt-BR']}
-            isFull
-            text={`${t('common.language')}: `}
-          />
-        </div>
-      </div> */}
-    </div>
-  );
-}

frontend/src/pages/login/index.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { Login } from "@app/views/Login";
+
+export default function LoginPage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+      <Head>
+        <title>{t("common.head-title", { title: t("login.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content={t("login.og-title") ?? ""} />
+        <meta name="og:description" content={t("login.og-description") ?? ""} />
+      </Head>
+      <Link href="/">
+        <div className="mb-4 mt-20 flex justify-center">
+          <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
+        </div>
+      </Link>
+      <Login />
+    </div>
+  );
+}

frontend/src/pages/login/sso/index.tsx

@@ -0,0 +1,30 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router"
+import { LoginSSO } from "@app/views/Login";
+
+export default function LoginSSOPage() {
+    const { t } = useTranslation();
+    const router = useRouter();
+    const token = router.query.token as string;
+
+    return (
+        <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+            <Head>
+                <title>{t("common.head-title", { title: t("login.title") })}</title>
+                <link rel="icon" href="/infisical.ico" />
+                <meta property="og:image" content="/images/message.png" />
+                <meta property="og:title" content={t("login.og-title") ?? ""} />
+                <meta name="og:description" content={t("login.og-description") ?? ""} />
+            </Head>
+            <Link href="/">
+                <div className="mb-4 mt-20 flex justify-center">
+                <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
+                </div>
+            </Link>
+            <LoginSSO providerAuthToken={token} />
+    </div>
+    );
+}

frontend/src/pages/saml-sso.tsx

@@ -1,90 +0,0 @@
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import Head from "next/head";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { Button, Input } from "@app/components/v2";
-import { isLoggedIn } from "@app/reactQuery";
-
-import getOrganizations from "./api/organization/getOrgs";
-
-export default function Login() {
-  const router = useRouter();
-  const [password, setPassword] = useState("");
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    // TODO(akhilmhdh): workspace will be controlled by a workspace context
-    const redirectToDashboard = async () => {
-      let userOrg;
-      try {
-        const userOrgs = await getOrganizations();
-        userOrg = userOrgs[0] && userOrgs[0]._id;
-        router.push(`/org/${userOrg}/overview`);
-      } catch (error) {
-        console.log("Error - Not logged in yet");
-      }
-    };
-    if (isLoggedIn()) {
-      redirectToDashboard();
-    }
-  }, []);
-
-  return (
-    <div className="flex h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
-      <Head>
-        <title>{t("common.head-title", { title: t("login.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content={t("login.og-title") ?? ""} />
-        <meta name="og:description" content={t("login.og-description") ?? ""} />
-      </Head>
-      <Link href="/">
-        <div className="mb-4 mt-20 flex justify-center">
-          <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
-        </div>
-      </Link>
-      <div className="mx-auto w-full max-w-md md:px-6">
-        <p className="mx-auto mb-6 flex w-max justify-center text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8">
-          What’s your email?
-        </p>
-        <div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] md:min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
-          <div className="flex items-center justify-center w-full rounded-lg max-h-24 md:max-h-28">
-            <Input
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              type="email"
-              placeholder="Enter your email..."
-              isRequired
-              autoComplete="email"
-              id="email"
-              className="h-12"
-            />
-          </div>
-        </div>
-        <div className='lg:w-1/6 w-1/4 w-full mx-auto flex items-center justify-center min-w-[20rem] md:min-w-[22rem] text-center rounded-md mt-4'>
-          <Button
-              colorSchema="primary" 
-              variant="outline_bg"
-              onClick={() => {}} 
-              isFullWidth
-              className="h-14"
-          > 
-              {t("login.login")} 
-          </Button>
-        </div>
-        <div className="flex flex-row items-center justify-center mt-4">
-          <button
-            onClick={() => {router.push("/login")}}
-            type="button"
-            className="text-bunker-300 text-sm hover:underline mt-2 hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer"
-          >
-            {t("login.other-option")}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/src/pages/signup/index.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import Head from "next/head";
 import Image from "next/image";
 import { useRouter } from "next/router";
-
 import CodeInputStep from "@app/components/signup/CodeInputStep";
 import DownloadBackupPDF from "@app/components/signup/DonwloadBackupPDFStep";
 import EnterEmailStep from "@app/components/signup/EnterEmailStep";
@@ -13,10 +12,8 @@ import TeamInviteStep from "@app/components/signup/TeamInviteStep";
 import UserInfoStep from "@app/components/signup/UserInfoStep";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
-import { useProviderAuth } from "@app/hooks/useProviderAuth";
-
-import checkEmailVerificationCode from "./api/auth/CheckEmailVerificationCode";
-import getOrganizations from "./api/organization/getOrgs";
+import checkEmailVerificationCode from "@app/pages/api/auth/CheckEmailVerificationCode";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
 
 /**
  * @returns the signup page
@@ -35,15 +32,6 @@ export default function SignUp() {
   const [isSignupWithEmail, setIsSignupWithEmail] = useState(false);
   const [isCodeInputCheckLoading, setIsCodeInputCheckLoading] = useState(false);
   const { t } = useTranslation();
-  const { email: providerEmail, providerAuthToken, isProviderUserCompleted } = useProviderAuth();
-
-  if (providerAuthToken && isProviderUserCompleted) {
-    router.push(`/login?providerAuthToken=${encodeURIComponent(providerAuthToken)}`);
-  }
-
-  if (providerAuthToken && step < 3) {
-    setStep(3);
-  }
 
   useEffect(() => {
     const tryAuth = async () => {
@@ -121,7 +109,7 @@ export default function SignUp() {
       return (
         <UserInfoStep
           incrementStep={incrementStep}
-          email={email || providerEmail}
+          email={email}
           password={password}
           setPassword={setPassword}
           name={name}
@@ -130,7 +118,7 @@ export default function SignUp() {
           setOrganizationName={setOrganizationName}
           attributionSource={attributionSource}
           setAttributionSource={setAttributionSource}
-          providerAuthToken={providerAuthToken}
+          providerAuthToken={undefined}
         />
       );
     }
@@ -139,7 +127,7 @@ export default function SignUp() {
       return (
         <DownloadBackupPDF
           incrementStep={incrementStep}
-          email={email || providerEmail}
+          email={email}
           password={password}
           name={name}
         />

frontend/src/pages/signup/sso/index.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+import Image from "next/image";
+import { useRouter } from "next/router"
+import { SignupSSO } from "@app/views/Signup";
+
+export default function SignupSSOPage() {
+    const { t } = useTranslation();
+    const router = useRouter();
+    const token = router.query.token as string;
+
+    return (
+        <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+            <Head>
+                <title>{t("common.head-title", { title: t("signup.title") })}</title>
+                <link rel="icon" href="/infisical.ico" />
+                <meta property="og:image" content="/images/message.png" />
+                <meta property="og:title" content={t("signup.og-title") as string} />
+                <meta name="og:description" content={t("signup.og-description") as string} />
+            </Head>
+            <div className="mb-4 mt-20 flex justify-center">
+                <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
+            </div>
+            <SignupSSO providerAuthToken={token} />
+        </div>
+    );
+}