Fix lint errors, merge conflicts

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/api/integrations/createIntegration.ts

@@ -34,7 +34,7 @@ const createIntegration = ({
   owner,
   path,
   region,
-  secretPath
+  secretPath,
 }: Props) =>
   SecurityClient.fetchCall("/api/v1/integration", {
     method: "POST",
@@ -54,7 +54,7 @@ const createIntegration = ({
       owner,
       path,
       region,
-      secretPath
+      secretPath,
     })
   }).then(async (res) => {
     if (res && res.status === 200) {

frontend/src/pages/integrations/bitbucket/create.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import queryString from "query-string";
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "../../../components/v2";
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthBitBucketWorkspaces,
+  useGetIntegrationAuthById,
+} from "../../../hooks/api/integrationAuth";
+import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function BitBucketCreateIntegrationPage() {
+  const router = useRouter();
+
+  const [targetAppId, setTargetAppId] = useState("");
+  const [targetEnvironmentId, setTargetEnvironmentId] = useState("");
+
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
+  const { data: targetEnvironments } = useGetIntegrationAuthBitBucketWorkspaces((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+    integrationAuthId: (integrationAuthId as string) ?? "",
+    workspaceSlug: targetEnvironmentId
+  });
+
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
+    }
+  }, [workspace]);
+
+  useEffect(() => {
+    if (integrationAuthApps) {
+      if (integrationAuthApps.length > 0) {
+        setTargetAppId(integrationAuthApps[0].appId as string);
+      } else {
+        setTargetAppId("none");
+      }
+    }
+  }, [integrationAuthApps]);
+
+  useEffect(() => {
+    if (targetEnvironments) {
+      if (targetEnvironments.length > 0) {
+        setTargetEnvironmentId(targetEnvironments[0].slug);
+      } else {
+        setTargetEnvironmentId("none");
+      }
+    }
+  }, [targetEnvironments]);
+
+  const handleButtonClick = async () => {
+    try {
+      setIsLoading(true);
+
+      if (!integrationAuth?._id) return;
+
+      const targetApp = integrationAuthApps?.find(
+        (integrationAuthApp) => integrationAuthApp.appId === targetAppId
+      );
+      const targetEnvironment = targetEnvironments?.find(
+        (environment) => environment.slug === targetEnvironmentId
+      );
+
+      if (!targetApp || !targetApp.appId || !targetEnvironment) return;
+
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: targetApp.name,
+        appId: targetApp.appId,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment: targetEnvironment.name,
+        targetEnvironmentId: targetEnvironment.slug,
+        targetService: null,
+        targetServiceId: null,
+        owner: null,
+        path: null,
+        region: null,
+        secretPath
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return integrationAuth &&
+    workspace &&
+    selectedSourceEnvironment &&
+    integrationAuthApps &&
+    targetEnvironments ? (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">BitBucket Integration</CardTitle>
+        <FormControl label="Project Environment" className="mt-4">
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className="w-full border border-mineshaft-500"
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem
+                value={sourceEnvironment.slug}
+                key={`source-environment-${sourceEnvironment.slug}`}
+              >
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
+        <FormControl label="BitBucket Workspace">
+          <Select
+            value={targetEnvironmentId}
+            onValueChange={(val) => setTargetEnvironmentId(val)}
+            className="w-full border border-mineshaft-500"
+            isDisabled={targetEnvironments.length === 0}
+          >
+            {targetEnvironments.length > 0 ? (
+              targetEnvironments.map((targetEnvironment) => (
+                <SelectItem
+                  value={targetEnvironment.slug as string}
+                  key={`target-environment-${targetEnvironment.slug as string}`}
+                >
+                  {targetEnvironment.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-environment-none">
+                No workspaces found
+              </SelectItem>
+            )}
+          </Select>
+        </FormControl>
+        <FormControl label="BitBucket Repo">
+          <Select
+            value={targetAppId}
+            onValueChange={(val) => setTargetAppId(val)}
+            className="w-full border border-mineshaft-500"
+          >
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem
+                  value={integrationAuthApp.appId as string}
+                  key={`target-app-${integrationAuthApp.appId as string}`}
+                >
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No repositories found
+              </SelectItem>
+            )}
+          </Select>
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
+        >
+          Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : (
+    <div />
+  );
+}
+
+BitBucketCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/bitbucket/oauth2/callback.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import queryString from "query-string";
+
+import AuthorizeIntegration from "../../../api/integrations/authorizeIntegration";
+
+export default function BitBucketOAuth2CallbackPage() {
+  const router = useRouter();
+  const { code, state } = queryString.parse(router.asPath.split("?")[1]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        // validate state
+        if (state !== localStorage.getItem("latestCSRFToken")) return;
+        localStorage.removeItem("latestCSRFToken");
+
+        const integrationAuth = await AuthorizeIntegration({
+          workspaceId: localStorage.getItem("projectData.id") as string,
+          code: code as string,
+          integration: "bitbucket"
+        });
+
+        router.push(`/integrations/bitbucket/create?integrationAuthId=${integrationAuth._id}`);
+      } catch (err) {
+        console.error(err);
+      }
+    })();
+  }, []);
+
+  return <div />;
+}
+
+BitBucketOAuth2CallbackPage.requireAuth = true;

frontend/src/pages/integrations/cloud-66/authorize.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function Cloud66CreateIntegrationPage() {
+  const router = useRouter();
+  const [apiKey, setApiKey] = useState("");
+  const [apiKeyErrorText, setApiKeyErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleButtonClick = async () => {
+    try {
+      setApiKeyErrorText("");
+      if (apiKey.length === 0) {
+        setApiKeyErrorText("Access token cannot be blank");
+        return;
+      }
+
+      setIsLoading(true);
+
+      const integrationAuth = await saveIntegrationAccessToken({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "cloud-66",
+        accessId: null,
+        accessToken: apiKey,
+        url: null,
+        namespace: null
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/cloud-66/create?integrationAuthId=${integrationAuth._id}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Cloud 66 Integration</CardTitle>
+        <FormControl
+          label="Cloud 66 Personal Access Token"
+          errorText={apiKeyErrorText}
+          isError={apiKeyErrorText !== "" ?? false}
+        >
+          <Input placeholder="" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+        >
+          Connect to Cloud 66
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+Cloud66CreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/cloud-66/create.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import queryString from "query-string";
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "../../../components/v2";
+import {
+  useGetIntegrationAuthApps, 
+  useGetIntegrationAuthById,
+} from "../../../hooks/api/integrationAuth";
+import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function Cloud66CreateIntegrationPage() {
+  const router = useRouter();
+
+  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+    integrationAuthId: (integrationAuthId as string) ?? ""
+  });
+
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [targetApp, setTargetApp] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
+    }
+  }, [workspace]);
+
+  useEffect(() => {
+    if (integrationAuthApps) {
+      if (integrationAuthApps.length > 0) {
+        setTargetApp(integrationAuthApps[0].name);
+      } else {
+        setTargetApp("none");
+      }
+    }
+  }, [integrationAuthApps]);
+
+  const handleButtonClick = async () => {
+    try {
+      if (!integrationAuth?._id) return;
+
+      setIsLoading(true);
+
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: targetApp,
+        appId:
+          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
+            ?.appId ?? null,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment: null,
+        targetEnvironmentId: null,
+        targetService: null,
+        targetServiceId: null,
+        owner: null,
+        path: null,
+        region: null,
+        secretPath
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return integrationAuth &&
+    workspace &&
+    selectedSourceEnvironment &&
+    integrationAuthApps &&
+    targetApp ? (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Cloud 66 Integration</CardTitle>
+        <FormControl label="Project Environment" className="mt-4">
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className="w-full border border-mineshaft-500"
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem
+                value={sourceEnvironment.slug}
+                key={`source-environment-${sourceEnvironment.slug}`}
+              >
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
+        <FormControl label="Cloud 66 Application" className="mt-4">
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className="w-full border border-mineshaft-500"
+            isDisabled={integrationAuthApps.length === 0}
+          >
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem
+                  value={integrationAuthApp.name}
+                  key={`target-app-${integrationAuthApp.name}`}
+                >
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No applications found
+              </SelectItem>
+            )}
+          </Select>
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
+        >
+          Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : (
+    <div />
+  );
+}
+
+Cloud66CreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/digital-ocean-app-platform/authorize.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function DigitalOceanAppPlatformCreateIntegrationPage() {
+  const router = useRouter();
+  const [apiKey, setApiKey] = useState("");
+  const [apiKeyErrorText, setApiKeyErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleButtonClick = async () => {
+    try {
+      setApiKeyErrorText("");
+      if (apiKey.length === 0) {
+        setApiKeyErrorText("API Key cannot be blank");
+        return;
+      }
+
+      setIsLoading(true);
+
+      const integrationAuth = await saveIntegrationAccessToken({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "digital-ocean-app-platform",
+        accessId: null,
+        accessToken: apiKey,
+        url: null,
+        namespace: null
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/digital-ocean-app-platform/create?integrationAuthId=${integrationAuth._id}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Digital Ocean App Platform Integration</CardTitle>
+        <FormControl
+          label="Digital Ocean API Key"
+          errorText={apiKeyErrorText}
+          isError={apiKeyErrorText !== "" ?? false}
+        >
+          <Input placeholder="" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+        >
+          Connect to Digital Ocean App Platform
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+DigitalOceanAppPlatformCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/digital-ocean-app-platform/create.tsx

@@ -0,0 +1,155 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import queryString from "query-string";
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "../../../components/v2";
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById
+} from "../../../hooks/api/integrationAuth";
+import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function DigitalOceanAppPlatformCreateIntegrationPage() {
+  const router = useRouter();
+
+  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+    integrationAuthId: (integrationAuthId as string) ?? ""
+  });
+
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [targetApp, setTargetApp] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
+    }
+  }, [workspace]);
+
+  useEffect(() => {
+    if (integrationAuthApps) {
+      if (integrationAuthApps.length > 0) {
+        setTargetApp(integrationAuthApps[0].name);
+      } else {
+        setTargetApp("none");
+      }
+    }
+  }, [integrationAuthApps]);
+
+  const handleButtonClick = async () => {
+    try {
+      if (!integrationAuth?._id) return;
+
+      setIsLoading(true);
+
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: targetApp,
+        appId:
+          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
+            ?.appId ?? null,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment: null,
+        targetEnvironmentId: null,
+        targetService: null,
+        targetServiceId: null,
+        owner: null,
+        path: null,
+        region: null,
+        secretPath
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return integrationAuth &&
+    workspace &&
+    selectedSourceEnvironment &&
+    integrationAuthApps &&
+    targetApp ? (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Digital Ocean App Platform Integration</CardTitle>
+        <FormControl label="Project Environment" className="mt-4">
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className="w-full border border-mineshaft-500"
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem
+                value={sourceEnvironment.slug}
+                key={`source-environment-${sourceEnvironment.slug}`}
+              >
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
+        <FormControl label="Digital Ocean App Platform Service" className="mt-4">
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className="w-full border border-mineshaft-500"
+            isDisabled={integrationAuthApps.length === 0}
+          >
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem
+                  value={integrationAuthApp.name}
+                  key={`target-app-${integrationAuthApp.name}`}
+                >
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No services found
+              </SelectItem>
+            )}
+          </Select>
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
+        >
+          Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : (
+    <div />
+  );
+}
+
+DigitalOceanAppPlatformCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/northflank/authorize.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function NorthflankCreateIntegrationPage() {
+  const router = useRouter();
+  const [apiKey, setApiKey] = useState("");
+  const [apiKeyErrorText, setApiKeyErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleButtonClick = async () => {
+    try {
+      setApiKeyErrorText("");
+      if (apiKey.length === 0) {
+        setApiKeyErrorText("API Key cannot be blank");
+        return;
+      }
+
+      setIsLoading(true);
+
+      const integrationAuth = await saveIntegrationAccessToken({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "northflank",
+        accessToken: apiKey,
+        accessId: null,
+        url: null,
+        namespace: null
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/northflank/create?integrationAuthId=${integrationAuth._id}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Northflank Integration</CardTitle>
+        <FormControl
+          label="Northflank API Token"
+          errorText={apiKeyErrorText}
+          isError={apiKeyErrorText !== "" ?? false}
+        >
+          <Input placeholder="" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+        >
+          Connect to Northflank
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+NorthflankCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/northflank/create.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import queryString from "query-string";
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "../../../components/v2";
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById,
+  useGetIntegrationAuthNorthflankSecretGroups
+} from "../../../hooks/api/integrationAuth";
+import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+import createIntegration from "../../api/integrations/createIntegration";
+
+export default function NorthflankCreateIntegrationPage() {
+  const router = useRouter();
+
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [targetAppId, setTargetAppId] = useState("");
+  const [targetSecretGroupId, setTargetSecretGroupId] = useState<string | null>(null);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+    integrationAuthId: (integrationAuthId as string) ?? ""
+  });
+  const { data: integrationAuthSecretGroups } = useGetIntegrationAuthNorthflankSecretGroups({
+    integrationAuthId: (integrationAuthId as string) ?? "",
+    appId: targetAppId
+  });
+  
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
+    }
+  }, [workspace]);
+
+  useEffect(() => {
+    if (integrationAuthApps) {
+      if (integrationAuthApps.length > 0) {
+        // setTargetApp(integrationAuthApps[0].name);
+        setTargetAppId(integrationAuthApps[0].appId as string);
+      } else {
+        // setTargetApp("none");
+        setTargetAppId("none");
+      }
+    }
+  }, [integrationAuthApps]);
+  
+  useEffect(() => {
+    if (integrationAuthSecretGroups) {
+      if (integrationAuthSecretGroups.length > 0) {
+        // case: project has at least 1 secret group in Northflank
+        setTargetSecretGroupId(integrationAuthSecretGroups[0].groupId);
+      } else {
+        // case: project has no secret groups in Northflank
+        setTargetSecretGroupId("none");
+      }
+    }
+      
+  }, [integrationAuthSecretGroups]);
+  
+  const handleButtonClick = async () => {
+    try {
+      if (!integrationAuth?._id) return;
+
+      setIsLoading(true);
+
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: integrationAuthApps?.find(
+            (integrationAuthApp) => integrationAuthApp.appId === targetAppId
+          )?.name ?? null,
+        appId: targetAppId,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment: null,
+        targetEnvironmentId: null,
+        targetService: null,
+        targetServiceId: targetSecretGroupId,
+        owner: null,
+        path: null,
+        region: null,
+        secretPath
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  
+  return integrationAuth &&
+    workspace &&
+    selectedSourceEnvironment &&
+    integrationAuthApps &&
+    targetAppId ? (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Northflank Integration</CardTitle>
+        <FormControl label="Project Environment" className="mt-4">
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className="w-full border border-mineshaft-500"
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem
+                value={sourceEnvironment.slug}
+                key={`source-environment-${sourceEnvironment.slug}`}
+              >
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
+        <FormControl label="Northflank Project" className="mt-4">
+          <Select
+            value={targetAppId}
+            onValueChange={(val) => setTargetAppId(val)}
+            className="w-full border border-mineshaft-500"
+            isDisabled={integrationAuthApps.length === 0}
+          >
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem
+                  value={integrationAuthApp.appId as string}
+                  key={`target-environment-${integrationAuthApp.name}`}
+                >
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No projects found
+              </SelectItem>
+            )}
+          </Select>
+        </FormControl>
+        {targetSecretGroupId && integrationAuthSecretGroups && (
+          <FormControl label="Secret Group" className="mt-4">
+            <Select
+              value={targetSecretGroupId}
+              onValueChange={(val) => setTargetSecretGroupId(val)}
+              className="w-full border border-mineshaft-500"
+              isDisabled={integrationAuthSecretGroups.length === 0}
+            >
+              {integrationAuthSecretGroups.length > 0 ? (
+                integrationAuthSecretGroups.map((secretGroup: any) => (
+                  <SelectItem
+                    value={secretGroup.groupId}
+                    key={`target-secret-group-${secretGroup.groupId}`}
+                  >
+                    {secretGroup.name}
+                  </SelectItem>
+                ))
+              ) : (
+                <SelectItem value="none" key="target-secret-group-none">
+                  No secret groups found
+                </SelectItem>
+              )}
+            </Select>
+          </FormControl>
+        )}
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0 || integrationAuthSecretGroups?.length === 0}
+        >
+          Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : (
+    <div />
+  );
+}
+
+NorthflankCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/terraform-cloud/authorize.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+import saveIntegrationAccessToken from "../../api/integrations/saveIntegrationAccessToken";
+
+export default function TerraformCloudCreateIntegrationPage() {
+  const router = useRouter();
+  const [apiKey, setApiKey] = useState("");
+  const [apiKeyErrorText, setApiKeyErrorText] = useState("");
+  const [workspacesId, setWorkSpacesId] = useState("");
+  const [workspacesIdErrorText, setWorkspacesIdErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleButtonClick = async () => {
+    try {
+      setApiKeyErrorText("");
+      setWorkspacesIdErrorText("");
+
+      if (apiKey.length === 0) {
+        setApiKeyErrorText("API Token cannot be blank");
+        return;
+      }
+      
+      if (workspacesId.length === 0) {
+        setWorkspacesIdErrorText("Workspace Id cannot be blank");
+        return;
+      }
+
+      setIsLoading(true);
+
+      const integrationAuth = await saveIntegrationAccessToken({
+        workspaceId: localStorage.getItem("projectData.id"),
+        integration: "terraform-cloud",
+        accessId: workspacesId,
+        accessToken: apiKey,
+        url: null,
+        namespace: null
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/terraform-cloud/create?integrationAuthId=${integrationAuth._id}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Terraform Cloud Integration</CardTitle>
+        <FormControl
+          label="Terraform Cloud API Token"
+          errorText={apiKeyErrorText}
+          isError={apiKeyErrorText !== "" ?? false}
+        >
+          <Input placeholder="API Token" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
+        </FormControl>
+        <FormControl
+          label="Terraform Cloud Workspace ID"
+          errorText={workspacesIdErrorText}
+          isError={workspacesIdErrorText !== "" ?? false}
+        >
+          <Input placeholder="Workspace Id" value={workspacesId} onChange={(e) => setWorkSpacesId(e.target.value)} />
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+        >
+          Connect to Terraform Cloud
+        </Button>
+      </Card>
+    </div>
+  );
+}
+
+TerraformCloudCreateIntegrationPage.requireAuth = true;

frontend/src/pages/integrations/terraform-cloud/create.tsx

@@ -0,0 +1,189 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import queryString from "query-string";
+
+import {
+  Button,
+  Card,
+  CardTitle,
+  FormControl,
+  Input,
+  Select,
+  SelectItem
+} from "../../../components/v2";
+import {
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById
+} from "../../../hooks/api/integrationAuth";
+import { useGetWorkspaceById } from "../../../hooks/api/workspace";
+import createIntegration from "../../api/integrations/createIntegration";
+
+const variableTypes = [
+  { name: "env" },
+  { name: "terraform" }
+];
+
+export default function TerraformCloudCreateIntegrationPage() {
+  const router = useRouter();
+
+  const { integrationAuthId } = queryString.parse(router.asPath.split("?")[1]);
+
+  const { data: workspace } = useGetWorkspaceById(localStorage.getItem("projectData.id") ?? "");
+  const { data: integrationAuth } = useGetIntegrationAuthById((integrationAuthId as string) ?? "");
+  const { data: integrationAuthApps } = useGetIntegrationAuthApps({
+    integrationAuthId: (integrationAuthId as string) ?? ""
+  });
+
+  const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
+  const [targetApp, setTargetApp] = useState("");
+  const [secretPath, setSecretPath] = useState("/");
+  const [variableType, setVariableType] = useState("");
+  const [variableTypeErrorText, setVariableTypeErrorText] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (workspace) {
+      setSelectedSourceEnvironment(workspace.environments[0].slug);
+      setVariableType(variableTypes[0].name);
+    }
+  }, [workspace]);
+
+  useEffect(() => {
+    if (integrationAuthApps) {
+      if (integrationAuthApps.length > 0) {
+        setTargetApp(integrationAuthApps[0].name);
+      } else {
+        setTargetApp("none");
+      }
+    }
+  }, [integrationAuthApps]);
+
+  const handleButtonClick = async () => {
+    try {
+      if (!integrationAuth?._id) return;
+
+      setVariableTypeErrorText("");
+      if (variableType.length === 0 ) {
+      setVariableTypeErrorText("Variable Type cannot be blank!")
+      return;
+      }
+
+      setIsLoading(true);
+
+      await createIntegration({
+        integrationAuthId: integrationAuth?._id,
+        isActive: true,
+        app: targetApp,
+        appId:
+          integrationAuthApps?.find((integrationAuthApp) => integrationAuthApp.name === targetApp)
+            ?.appId ?? null,
+        sourceEnvironment: selectedSourceEnvironment,
+        targetEnvironment: null,
+        targetEnvironmentId: null,
+        targetService: variableType,
+        targetServiceId: null,
+        owner: null,
+        path: null,
+        region: null,
+        secretPath
+      });
+
+      setIsLoading(false);
+
+      router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+
+  return integrationAuth &&
+    workspace &&
+    selectedSourceEnvironment &&
+    integrationAuthApps &&
+    targetApp ? (
+    <div className="flex h-full w-full items-center justify-center">
+      <Card className="max-w-md rounded-md p-8">
+        <CardTitle className="text-center">Terraform Cloud Integration</CardTitle>
+        <FormControl label="Project Environment" className="mt-4">
+          <Select
+            value={selectedSourceEnvironment}
+            onValueChange={(val) => setSelectedSourceEnvironment(val)}
+            className="w-full border border-mineshaft-500"
+          >
+            {workspace?.environments.map((sourceEnvironment) => (
+              <SelectItem
+                value={sourceEnvironment.slug}
+                key={`source-environment-${sourceEnvironment.slug}`}
+              >
+                {sourceEnvironment.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </FormControl>
+        <FormControl label="Secrets Path">
+          <Input
+            value={secretPath}
+            onChange={(evt) => setSecretPath(evt.target.value)}
+            placeholder="Provide a path, default is /"
+          />
+        </FormControl>
+        <FormControl label="Category" className="mt-4" errorText={variableTypeErrorText}
+            isError={variableTypeErrorText !== "" ?? false}>
+          <Select
+            value={variableType}
+            onValueChange={(val) => setVariableType(val)}
+            className="w-full border border-mineshaft-500"
+          >
+            {
+              variableTypes.map((variable) => (
+                <SelectItem
+                  value={variable.name}
+                  key={`target-app-${variable.name}`}
+                >
+                  {variable.name}
+                </SelectItem>
+              ))
+            }
+          </Select>
+        </FormControl>
+        <FormControl label="Terraform Cloud Project" className="mt-4">
+          <Select
+            value={targetApp}
+            onValueChange={(val) => setTargetApp(val)}
+            className="w-full border border-mineshaft-500"
+            isDisabled={integrationAuthApps.length === 0}
+          >
+            {integrationAuthApps.length > 0 ? (
+              integrationAuthApps.map((integrationAuthApp) => (
+                <SelectItem
+                  value={integrationAuthApp.name}
+                  key={`target-app-${integrationAuthApp.name}`}
+                >
+                  {integrationAuthApp.name}
+                </SelectItem>
+              ))
+            ) : (
+              <SelectItem value="none" key="target-app-none">
+                No project found
+              </SelectItem>
+            )}
+          </Select>
+        </FormControl>
+        <Button
+          onClick={handleButtonClick}
+          color="mineshaft"
+          className="mt-4"
+          isLoading={isLoading}
+          isDisabled={integrationAuthApps.length === 0}
+        >
+          Create Integration
+        </Button>
+      </Card>
+    </div>
+  ) : (
+    <div />
+  );
+}
+
+TerraformCloudCreateIntegrationPage.requireAuth = true;

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,28 @@
+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,31 @@
+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/org/[id]/overview/index.tsx

@@ -5,7 +5,6 @@ import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Head from "next/head";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { faSlack } from "@fortawesome/free-brands-svg-icons";
@@ -325,9 +324,12 @@ export default function Organization() {
           {orgWorkspaces.filter(ws => ws?.name?.toLowerCase().includes(searchFilter.toLowerCase())).map(workspace => <div key={workspace._id} className="h-40 min-w-72 rounded-md bg-mineshaft-800 border border-mineshaft-600 p-4 flex flex-col justify-between">
             <div className="text-lg text-mineshaft-100 mt-0">{workspace.name}</div>
             <div className="text-sm text-mineshaft-300 mt-0 pb-6">{(workspace.environments?.length || 0)} environments</div>
-            <Link href={`/project/${workspace._id}/secrets`}>
-              <div className="group cursor-default ml-auto hover:bg-primary-800/20 text-sm text-mineshaft-300 hover:text-mineshaft-200 bg-mineshaft-900 py-2 px-4 rounded-full w-max border border-mineshaft-600 hover:border-primary-500/80">Explore <FontAwesomeIcon icon={faArrowRight} className="pl-1.5 pr-0.5 group-hover:pl-2 group-hover:pr-0 duration-200" /></div>
-            </Link>
+            <button type="button" onClick={() => {
+              router.push(`/project/${workspace._id}/secrets`);
+              localStorage.setItem("projectData.id", workspace._id);
+            }}>
+                <div className="group cursor-default ml-auto hover:bg-primary-800/20 text-sm text-mineshaft-300 hover:text-mineshaft-200 bg-mineshaft-900 py-2 px-4 rounded-full w-max border border-mineshaft-600 hover:border-primary-500/80">Explore <FontAwesomeIcon icon={faArrowRight} className="pl-1.5 pr-0.5 group-hover:pl-2 group-hover:pr-0 duration-200" /></div>
+            </button>
           </div>)}
         </div>
         {orgWorkspaces.length === 0 && ( 

frontend/src/pages/project/[id]/allowlist/index.tsx

@@ -0,0 +1,21 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { IPAllowlistPage } from "@app/views/Project/IPAllowListPage";
+
+const ProjectAllowlist = () => {
+    const { t } = useTranslation();
+    return (
+        <>
+            <Head>
+                <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
+                <link rel="icon" href="/infisical.ico" />
+            </Head>
+            <IPAllowlistPage />
+        </>
+    );
+}
+
+export default ProjectAllowlist;
+
+ProjectAllowlist.requireAuth = true;

frontend/src/pages/project/[id]/members/index.tsx

@@ -183,7 +183,9 @@ export default function Users() {
         <div className="ml-2 flex min-w-max flex-row items-start justify-start">
           <Button
             text={String(t("section.members.add-member"))}
-            onButtonPressed={openAddModal}
+            onButtonPressed={() => {
+              openAddModal();
+            }}
             color="mineshaft"
             size="md"
             icon={faPlus}

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

@@ -13,10 +13,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 +33,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 +110,7 @@ export default function SignUp() {
       return (
         <UserInfoStep
           incrementStep={incrementStep}
-          email={email || providerEmail}
+          email={email}
           password={password}
           setPassword={setPassword}
           name={name}
@@ -130,7 +119,7 @@ export default function SignUp() {
           setOrganizationName={setOrganizationName}
           attributionSource={attributionSource}
           setAttributionSource={setAttributionSource}
-          providerAuthToken={providerAuthToken}
+          providerAuthToken={undefined}
         />
       );
     }
@@ -139,7 +128,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,28 @@
+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>
+    );
+}