Adjust ST V3

2026-10-13 01:29:27 +00:00 · 2023-10-05 14:53:59 +01:00
parent a2bebb5afa 5fce85ca41
commit abf6034aca
40 changed files with 905 additions and 943 deletions
@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faGithub,faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faGitlab, faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
 import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -9,74 +9,94 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button } from "../v2";

 export default function InitialSignupStep({
-    setIsSignupWithEmail,
+  setIsSignupWithEmail
 }: {
-    setIsSignupWithEmail: (value: boolean) => void
+  setIsSignupWithEmail: (value: boolean) => void;
 }) {
-    const { t } = useTranslation();
-    const router = useRouter();
+  const { t } = useTranslation();
+  const router = useRouter();

-    return <div className='flex flex-col mx-auto w-full justify-center items-center'>
-        <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >{t("signup.initial-title")}</h1>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md'>
-            <Button
-                colorSchema="primary"
-                variant="solid"
-                onClick={() => {
-                    window.open("/api/v1/sso/redirect/google");
-                    window.close();
-                }}
-                leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-                className="h-12 w-full mx-0"
-            >
-                {t("signup.continue-with-google")}
-            </Button>
-        </div>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] rounded-md mt-4'>
-            <Button
-                colorSchema="primary"
-                variant="outline_bg"
-                onClick={() => {
-                    window.open("/api/v1/sso/redirect/github");
-                    window.close();
-                }}
-                leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
-                className="h-12 w-full mx-0"
-            >
-                Continue with GitHub
-            </Button>
-        </div>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
-            <Button
-                colorSchema="primary"
-                variant="outline_bg"
-                onClick={() => {
-                    setIsSignupWithEmail(true);
-                }}
-                leftIcon={<FontAwesomeIcon icon={faEnvelope} className="mr-2" />}
-                className="h-12 w-full mx-0"
-            >
-                Continue with Email
-            </Button>
-        </div>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] text-center rounded-md mt-4'>
-            <Button
-                colorSchema="primary" 
-                variant="outline_bg"
-                onClick={() => router.push("/saml-sso")} 
-                leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
-                className="h-12 w-full mx-0"
-            > 
-                Continue with SSO
-            </Button>
-        </div>
-        <div className='lg:w-1/6 w-1/4 min-w-[20rem] px-8 text-center mt-6 text-xs text-bunker-400'>
-            {t("signup.create-policy")}
-        </div>
-        <div className="mt-2 text-bunker-400 text-xs flex flex-row">
-            <Link href="/login">
-                <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("signup.already-have-account")}</span>
-            </Link>
-        </div>
+  return (
+    <div className="mx-auto flex w-full flex-col items-center justify-center">
+      <h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        {t("signup.initial-title")}
+      </h1>
+      <div className="w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
+        <Button
+          colorSchema="primary"
+          variant="solid"
+          onClick={() => {
+            window.open("/api/v1/sso/redirect/google");
+            window.close();
+          }}
+          leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
+          className="mx-0 h-12 w-full"
+        >
+          {t("signup.continue-with-google")}
+        </Button>
+      </div>
+      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          onClick={() => {
+            window.open("/api/v1/sso/redirect/github");
+            window.close();
+          }}
+          leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
+          className="mx-0 h-12 w-full"
+        >
+          Continue with GitHub
+        </Button>
+      </div>
+      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md lg:w-1/6">
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          onClick={() => {
+            window.open("/api/v1/sso/redirect/gitlab");
+            window.close();
+          }}
+          leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
+          className="mx-0 h-12 w-full"
+        >
+          Continue with GitLab
+        </Button>
+      </div>
+      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md text-center lg:w-1/6">
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          onClick={() => {
+            setIsSignupWithEmail(true);
+          }}
+          leftIcon={<FontAwesomeIcon icon={faEnvelope} className="mr-2" />}
+          className="mx-0 h-12 w-full"
+        >
+          Continue with Email
+        </Button>
+      </div>
+      <div className="mt-4 w-1/4 min-w-[20rem] rounded-md text-center lg:w-1/6">
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          onClick={() => router.push("/saml-sso")}
+          leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
+          className="mx-0 h-12 w-full"
+        >
+          Continue with SSO
+        </Button>
+      </div>
+      <div className="mt-6 w-1/4 min-w-[20rem] px-8 text-center text-xs text-bunker-400 lg:w-1/6">
+        {t("signup.create-policy")}
+      </div>
+      <div className="mt-2 flex flex-row text-xs text-bunker-400">
+        <Link href="/login">
+          <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+            {t("signup.already-have-account")}
+          </span>
+        </Link>
+      </div>
    </div>
+  );
 }
@@ -4,9 +4,10 @@ export enum AuthMethod {
  EMAIL = "email",
  GOOGLE = "google",
  GITHUB = "github",
-  OKTA_SAML = "okta-saml",
-  AZURE_SAML = "azure-saml",
-  JUMPCLOUD_SAML = "jumpcloud-saml"
+  GITLAB = "gitlab",
+	OKTA_SAML = "okta-saml",
+	AZURE_SAML = "azure-saml",
+	JUMPCLOUD_SAML = "jumpcloud-saml"
 }

 export type User = {
@@ -21,6 +21,7 @@ import {
  faCheck,
  faEnvelope,
  faInfinity,
+  faInfo,
  faMobile,
  faPlus,
  faQuestion
@@ -122,6 +123,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
  const createWs = useCreateWorkspace();
  const uploadWsKey = useUploadWsKey();
  const addWsUser = useAddUserToWs();
+  const infisicalPlatformVersion = process.env.NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION;

  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
    "addNewWs",
@@ -696,6 +698,12 @@ export const AppLayout = ({ children }: LayoutProps) => {
                      </div>
                    </button>
                  )}
+                  {infisicalPlatformVersion && (
+                  <div className="mb-2 w-full pl-5 duration-200 hover:text-mineshaft-200">
+                    <FontAwesomeIcon icon={faInfo} className="mr-4 px-[0.1rem]" />
+                      Platform Version: {infisicalPlatformVersion}
+                  </div>
+                  )}
              </div>
            </nav>
          </aside>
@@ -2,10 +2,10 @@ import { FormEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faGithub,faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faGitlab, faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import axios from "axios"
+import axios from "axios";

 import Error from "@app/components/basic/Error";
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -16,208 +16,234 @@ import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";

 type Props = {
-    setStep: (step: number) => void;
-    email: string;
-    setEmail: (email: string) => void;
-    password: string;
-    setPassword: (email: string) => void;
-}
+  setStep: (step: number) => void;
+  email: string;
+  setEmail: (email: string) => void;
+  password: string;
+  setPassword: (email: string) => void;
+};

-export const InitialStep = ({
-    setStep,
-    email,
-    setEmail,
-    password,
-    setPassword
-}: Props) => {
-    const router = useRouter();
-    const { createNotification } = useNotificationContext();
-    const { t } = useTranslation();
-    const [isLoading, setIsLoading] = useState(false);
-    const [loginError, setLoginError] = useState(false);
-    const { data: serverDetails } = useFetchServerStatus();
-    const queryParams = new URLSearchParams(window.location.search);
+export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: Props) => {
+  const router = useRouter();
+  const { createNotification } = useNotificationContext();
+  const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
+  const [loginError, setLoginError] = useState(false);
+  const { data: serverDetails } = useFetchServerStatus();
+  const queryParams = new URLSearchParams(window.location.search);

-    const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-        try {
-            if (!email || !password) {
-                return;
-            }
+  const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      if (!email || !password) {
+        return;
+      }

-            setIsLoading(true);
-            if (queryParams && queryParams.get("callback_port")) {
-                const callbackPort = queryParams.get("callback_port")
+      setIsLoading(true);
+      if (queryParams && queryParams.get("callback_port")) {
+        const callbackPort = queryParams.get("callback_port");

-                // attemptCliLogin
-                const isCliLoginSuccessful = await attemptCliLogin({
-                    email: email.toLowerCase(),
-                    password,
-                })
+        // attemptCliLogin
+        const isCliLoginSuccessful = await attemptCliLogin({
+          email: email.toLowerCase(),
+          password
+        });

-                if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
+        if (isCliLoginSuccessful && isCliLoginSuccessful.success) {
+          if (isCliLoginSuccessful.mfaEnabled) {
+            // case: login requires MFA step
+            setStep(1);
+            setIsLoading(false);
+            return;
+          }
+          // case: login was successful
+          const cliUrl = `http://localhost:${callbackPort}`;

-                    if (isCliLoginSuccessful.mfaEnabled) {
-                        // case: login requires MFA step
-                        setStep(1);
-                        setIsLoading(false);
-                        return;
-                    }
-                    // case: login was successful
-                    const cliUrl = `http://localhost:${callbackPort}`
+          // send request to server endpoint
+          const instance = axios.create();
+          await instance.post(cliUrl, { ...isCliLoginSuccessful.loginResponse });

-                    // send request to server endpoint
-                    const instance = axios.create()
-                    await instance.post(cliUrl, { ...isCliLoginSuccessful.loginResponse })
+          // cli page
+          router.push("/cli-redirect");

-                    // cli page
-                    router.push("/cli-redirect");
-
-                    // on success, router.push to cli Login Successful page
-
-                }
-            } else {
-                const isLoginSuccessful = await attemptLogin({
-                    email: email.toLowerCase(),
-                    password,
-                });
-                if (isLoginSuccessful && isLoginSuccessful.success) {
-                    // case: login was successful
-
-                    if (isLoginSuccessful.mfaEnabled) {
-                        // case: login requires MFA step
-                        setStep(1);
-                        setIsLoading(false);
-                        return;
-                    }
-                    const userOrgs = await fetchOrganizations();
-                    const userOrg = userOrgs[0] && userOrgs[0]._id;
-
-                    // case: login does not require MFA step
-                    createNotification({
-                        text: "Successfully logged in",
-                        type: "success"
-                    });
-                    router.push(`/org/${userOrg}/overview`);
-                }
-            }
-
-
-        } catch (err) {
-            setLoginError(true);
-            createNotification({
-                text: "Login unsuccessful. Double-check your credentials and try again.",
-                type: "error"
-            });
+          // on success, router.push to cli Login Successful page
        }
+      } else {
+        const isLoginSuccessful = await attemptLogin({
+          email: email.toLowerCase(),
+          password
+        });
+        if (isLoginSuccessful && isLoginSuccessful.success) {
+          // case: login was successful

-        setIsLoading(false);
+          if (isLoginSuccessful.mfaEnabled) {
+            // case: login requires MFA step
+            setStep(1);
+            setIsLoading(false);
+            return;
+          }
+          const userOrgs = await fetchOrganizations();
+          const userOrg = userOrgs[0] && userOrgs[0]._id;
+
+          // case: login does not require MFA step
+          createNotification({
+            text: "Successfully logged in",
+            type: "success"
+          });
+          router.push(`/org/${userOrg}/overview`);
+        }
+      }
+    } catch (err) {
+      setLoginError(true);
+      createNotification({
+        text: "Login unsuccessful. Double-check your credentials and try again.",
+        type: "error"
+      });
    }

-    return (
-        <form onSubmit={handleLogin} className='flex flex-col mx-auto w-full justify-center items-center'>
-            <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
-                <Button
-                    colorSchema="primary" 
-                    variant="outline_bg"
-                    onClick={() => {
-                        const callbackPort = queryParams.get("callback_port");
-                        
-                        window.open(`/api/v1/sso/redirect/google${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
-                        window.close();
-                    }} 
-                    leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-                    className="h-11 w-full mx-0"
-                > 
-                    {t("login.continue-with-google")}
-                </Button>
-            </div>
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
-                <Button
-                    colorSchema="primary" 
-                    variant="outline_bg"
-                    onClick={() => {
-                        const callbackPort = queryParams.get("callback_port");
-                        
-                        window.open(`/api/v1/sso/redirect/github${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
-                        
-                        window.close();
-                    }} 
-                    leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
-                    className="h-11 w-full mx-0"
-                > 
-                    Continue with GitHub
-                </Button>
-            </div>
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
-                <Button
-                    colorSchema="primary"
-                    variant="outline_bg"
-                    onClick={() => {
-                        setStep(2);
-                    }}
-                    leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
-                    className="h-11 w-full mx-0"
-                >
-                    Continue with SSO
-                </Button>
-            </div>
-            <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center my-4 py-2'>
-                <div className='w-full border-t border-mineshaft-400/60' /> 
-                <span className="mx-2 text-mineshaft-200 text-xs">or</span>
-                <div className='w-full border-t border-mineshaft-400/60' />
-            </div>
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md'>
-                <Input
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    type="email"
-                    placeholder="Enter your email..."
-                    isRequired
-                    autoComplete="username"
-                    className="h-11"
-                />
-            </div>
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
-                <Input
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    type="password"
-                    placeholder="Enter your password..."
-                    isRequired
-                    autoComplete="current-password"
-                    id="current-password"
-                    className="h-11 select:-webkit-autofill:focus"
-                />
-            </div>
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-5'>
-                <Button
-                    type="submit"
-                    size="sm"
-                    isFullWidth
-                    className='h-11'
-                    colorSchema="primary"
-                    variant="solid"
-                    isLoading={isLoading}
-                > Continue with Email </Button>
-            </div>
-            {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
-            {
-                !serverDetails?.inviteOnlySignup ?
-                <div className="mt-6 text-bunker-400 text-sm flex flex-row">
-                    <span className="mr-1">Don&apos;t have an acount yet?</span>
-                    <Link href="/signup">
-                        <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t("login.create-account")}</span>
-                    </Link>
-                </div> : <div />
-            }
-            <div className="text-bunker-400 text-sm flex flex-row">
-                <span className="mr-1">Forgot password?</span>
-                <Link href="/verify-email">
-                    <span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>Recover your account</span>
-                </Link>
-            </div>
-        </form>
-    );
-}
+    setIsLoading(false);
+  };
+
+  return (
+    <form
+      onSubmit={handleLogin}
+      className="mx-auto flex w-full flex-col items-center justify-center"
+    >
+      <h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
+        Login to Infisical
+      </h1>
+      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          onClick={() => {
+            const callbackPort = queryParams.get("callback_port");
+
+            window.open(
+              `/api/v1/sso/redirect/google${callbackPort ? `?callback_port=${callbackPort}` : ""}`
+            );
+            window.close();
+          }}
+          leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
+          className="mx-0 h-11 w-full"
+        >
+          {t("login.continue-with-google")}
+        </Button>
+      </div>
+      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          onClick={() => {
+            const callbackPort = queryParams.get("callback_port");
+
+            window.open(
+              `/api/v1/sso/redirect/github${callbackPort ? `?callback_port=${callbackPort}` : ""}`
+            );
+
+            window.close();
+          }}
+          leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
+          className="mx-0 h-11 w-full"
+        >
+          Continue with GitHub
+        </Button>
+      </div>
+      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          onClick={() => {
+            const callbackPort = queryParams.get("callback_port");
+
+            window.open(
+              `/api/v1/sso/redirect/gitlab${callbackPort ? `?callback_port=${callbackPort}` : ""}`
+            );
+
+            window.close();
+          }}
+          leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
+          className="mx-0 h-11 w-full"
+        >
+          Continue with GitLab
+        </Button>
+      </div>
+      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Button
+          colorSchema="primary"
+          variant="outline_bg"
+          onClick={() => {
+            setStep(2);
+          }}
+          leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
+          className="mx-0 h-11 w-full"
+        >
+          Continue with SSO
+        </Button>
+      </div>
+      <div className="my-4 flex w-1/4 min-w-[20rem] flex-row items-center py-2 lg:w-1/6">
+        <div className="w-full border-t border-mineshaft-400/60" />
+        <span className="mx-2 text-xs text-mineshaft-200">or</span>
+        <div className="w-full border-t border-mineshaft-400/60" />
+      </div>
+      <div className="w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Input
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          type="email"
+          placeholder="Enter your email..."
+          isRequired
+          autoComplete="username"
+          className="h-11"
+        />
+      </div>
+      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Input
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          type="password"
+          placeholder="Enter your password..."
+          isRequired
+          autoComplete="current-password"
+          id="current-password"
+          className="select:-webkit-autofill:focus h-11"
+        />
+      </div>
+      <div className="mt-5 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+        <Button
+          type="submit"
+          size="sm"
+          isFullWidth
+          className="h-11"
+          colorSchema="primary"
+          variant="solid"
+          isLoading={isLoading}
+        >
+          {" "}
+          Continue with Email{" "}
+        </Button>
+      </div>
+      {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
+      {!serverDetails?.inviteOnlySignup ? (
+        <div className="mt-6 flex flex-row text-sm text-bunker-400">
+          <span className="mr-1">Don&apos;t have an acount yet?</span>
+          <Link href="/signup">
+            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+              {t("login.create-account")}
+            </span>
+          </Link>
+        </div>
+      ) : (
+        <div />
+      )}
+      <div className="flex flex-row text-sm text-bunker-400">
+        <span className="mr-1">Forgot password?</span>
+        <Link href="/verify-email">
+          <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
+            Recover your account
+          </span>
+        </Link>
+      </div>
+    </form>
+  );
+};
@@ -1,5 +1,6 @@
 import { faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";

 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
@@ -37,17 +38,6 @@ export const APIKeyTable = () => {
    }
  };

-  const formatDate = (dateToFormat: string) => {
-    const date = new Date(dateToFormat);
-    const year = date.getFullYear();
-    const month = date.getMonth() + 1;
-    const day = date.getDate();
-
-    const formattedDate = `${day}/${month}/${year}`;
-
-    return formattedDate;
-  };
-
  return (
    <TableContainer>
      <Table>
@@ -69,9 +59,9 @@ export const APIKeyTable = () => {
              return (
                <Tr className="h-10" key={`api-key-${_id}`}>
                  <Td>{name}</Td>
-                  <Td>{formatDate(lastUsed)}</Td>
-                  <Td>{formatDate(createdAt)}</Td>
-                  <Td>{formatDate(expiresAt)}</Td>
+                  <Td>{format(new Date(lastUsed), "yyyy-MM-dd")}</Td>
+                  <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                  <Td>{format(new Date(expiresAt), "yyyy-MM-dd")}</Td>
                  <Td>
                    <IconButton
                      onClick={async () => {
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
-import { faGithub, faGoogle, IconDefinition } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faGitlab, faGoogle, IconDefinition } from "@fortawesome/free-brands-svg-icons";
 import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -10,129 +10,127 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { Switch } from "@app/components/v2";
 import { useUser } from "@app/context";
 import { useUpdateUserAuthMethods } from "@app/hooks/api";
-import {
-    AuthMethod
-} from "@app/hooks/api/users/types";
+import { AuthMethod } from "@app/hooks/api/users/types";

 interface AuthMethodOption {
-    label: string,
-    value: AuthMethod,
-    icon: IconDefinition;
+  label: string;
+  value: AuthMethod;
+  icon: IconDefinition;
 }

 const authMethodOpts: AuthMethodOption[] = [
-    { label: "Email", value: AuthMethod.EMAIL, icon: faEnvelope },
-    { label: "Google", value: AuthMethod.GOOGLE, icon: faGoogle },
-    { label: "GitHub", value: AuthMethod.GITHUB, icon: faGithub }
+  { label: "Email", value: AuthMethod.EMAIL, icon: faEnvelope },
+  { label: "Google", value: AuthMethod.GOOGLE, icon: faGoogle },
+  { label: "GitHub", value: AuthMethod.GITHUB, icon: faGithub },
+  { label: "GitLab", value: AuthMethod.GITLAB, icon: faGitlab }
 ];

 const samlProviders = [AuthMethod.OKTA_SAML, AuthMethod.JUMPCLOUD_SAML, AuthMethod.AZURE_SAML];

 const schema = yup.object({
-    authMethods: yup.array().required("Auth method is required")
+  authMethods: yup.array().required("Auth method is required")
 });

 export type FormData = yup.InferType<typeof schema>;

 export const AuthMethodSection = () => {
-    const { createNotification } = useNotificationContext();
-    const { user } = useUser();
-    const { mutateAsync } = useUpdateUserAuthMethods();
-    
-    const {
-        reset,
-        setValue,
-        watch,
-    } = useForm<FormData>({
-        defaultValues: {
-            authMethods: user.authMethods,
-        },
-        resolver: yupResolver(schema)
-    });
-    
-    const authMethods = watch("authMethods");
-    
-    useEffect(() => {
-        if (user) {
-            reset({
-                authMethods: user.authMethods,
-            });
-        }
-    }, [user]);
-    
-    const onAuthMethodToggle = async (value: boolean, authMethodOpt: AuthMethodOption) => {
-        const hasSamlEnabled = user.authMethods
-            .some((authMethod: AuthMethod) => samlProviders.includes(authMethod));
+  const { createNotification } = useNotificationContext();
+  const { user } = useUser();
+  const { mutateAsync } = useUpdateUserAuthMethods();

-        if (hasSamlEnabled) {
-            createNotification({
-                text: "SAML authentication can only be configured in your organization settings",
-                type: "error"
-            });
-        }
-        
-        const newAuthMethods = value 
-            ? [...authMethods, authMethodOpt.value] 
-            : authMethods.filter(auth => auth !== authMethodOpt.value);
-        
-        if (value) {
-            const newUser = await mutateAsync({
-                authMethods: newAuthMethods
-            });
+  const { reset, setValue, watch } = useForm<FormData>({
+    defaultValues: {
+      authMethods: user.authMethods
+    },
+    resolver: yupResolver(schema)
+  });

-            setValue("authMethods", newUser.authMethods);
-            createNotification({
-                text: "Successfully enabled authentication method",
-                type: "success"
-            });
-            return;
-        }
-        
-        if (newAuthMethods.length === 0) {
-            createNotification({
-                text: "You must keep at least 1 authentication method enabled",
-                type: "error"
-            });
-            return;
-        }
-        
-        const newUser = await mutateAsync({
-            authMethods: newAuthMethods
-        });
-        
-        setValue("authMethods", newUser.authMethods);
-        createNotification({
-            text: "Successfully disabled authentication method",
-            type: "success"
-        });
+  const authMethods = watch("authMethods");
+
+  useEffect(() => {
+    if (user) {
+      reset({
+        authMethods: user.authMethods
+      });
    }
-    
-    return (
-        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-            <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
-                Authentication methods
-            </h2> 
-            <p className="text-gray-400 mb-4">
-                By enabling a SSO provider, you are allowing an account with that provider which uses the same email address as your existing Infisical account to be able to log in to Infisical.
-            </p>
-            <div className="mb-4">
-                {user && authMethodOpts.map((authMethodOpt) => {
-                    return (
-                        <div className="flex p-4 items-center" key={`auth-method-${authMethodOpt.value}`}>
-                            <div className="flex items-center">
-                                <FontAwesomeIcon icon={authMethodOpt.icon} className="mr-4" />
-                            </div>
-                            <Switch
-                                id={`enable-${authMethodOpt.value}-auth`}
-                                onCheckedChange={(value) => onAuthMethodToggle(value, authMethodOpt)}
-                                isChecked={authMethods?.includes(authMethodOpt.value) ?? false}
-                            >
-                                <p className="w-12 mr-4">{authMethodOpt.label}</p>
-                            </Switch>
-                        </div>
-                    ); 
-                })}
-            </div>
-        </div>
+  }, [user]);
+
+  const onAuthMethodToggle = async (value: boolean, authMethodOpt: AuthMethodOption) => {
+    const hasSamlEnabled = user.authMethods.some((authMethod: AuthMethod) =>
+      samlProviders.includes(authMethod)
    );
-}
+
+    if (hasSamlEnabled) {
+      createNotification({
+        text: "SAML authentication can only be configured in your organization settings",
+        type: "error"
+      });
+    }
+
+    const newAuthMethods = value
+      ? [...authMethods, authMethodOpt.value]
+      : authMethods.filter((auth) => auth !== authMethodOpt.value);
+
+    if (value) {
+      const newUser = await mutateAsync({
+        authMethods: newAuthMethods
+      });
+
+      setValue("authMethods", newUser.authMethods);
+      createNotification({
+        text: "Successfully enabled authentication method",
+        type: "success"
+      });
+      return;
+    }
+
+    if (newAuthMethods.length === 0) {
+      createNotification({
+        text: "You must keep at least 1 authentication method enabled",
+        type: "error"
+      });
+      return;
+    }
+
+    const newUser = await mutateAsync({
+      authMethods: newAuthMethods
+    });
+
+    setValue("authMethods", newUser.authMethods);
+    createNotification({
+      text: "Successfully disabled authentication method",
+      type: "success"
+    });
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">
+        Authentication methods
+      </h2>
+      <p className="mb-4 text-gray-400">
+        By enabling a SSO provider, you are allowing an account with that provider which uses the
+        same email address as your existing Infisical account to be able to log in to Infisical.
+      </p>
+      <div className="mb-4">
+        {user &&
+          authMethodOpts.map((authMethodOpt) => {
+            return (
+              <div className="flex items-center p-4" key={`auth-method-${authMethodOpt.value}`}>
+                <div className="flex items-center">
+                  <FontAwesomeIcon icon={authMethodOpt.icon} className="mr-4" />
+                </div>
+                <Switch
+                  id={`enable-${authMethodOpt.value}-auth`}
+                  onCheckedChange={(value) => onAuthMethodToggle(value, authMethodOpt)}
+                  isChecked={authMethods?.includes(authMethodOpt.value) ?? false}
+                >
+                  <p className="mr-4 w-12">{authMethodOpt.label}</p>
+                </Switch>
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+};
@@ -140,15 +140,19 @@ export const AddServiceTokenV3Modal = ({
        if (serviceTokenData) {
            reset({
                name: serviceTokenData.name,
-                scopes: serviceTokenData.scopes.map((scope: ServiceTokenV3Scope) => {
+                scopes: serviceTokenData.scopes.map(({
+                    environment,
+                    secretPath,
+                    permissions
+                }: ServiceTokenV3Scope) => {
                    let permission = "read";
-                    if (scope.permissions.includes(Permission.WRITE)) {
+                    if (permissions.includes(Permission.WRITE)) {
                        permission = "readWrite";
                    }
-                    
+
                    return ({
-                        environment: "dev",
-                        secretPath: "/",
+                        environment,
+                        secretPath,
                        permission
                    })
                }),
@@ -1,5 +1,6 @@
 import { faKey, faPencil,faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";

 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { ProjectPermissionCan } from "@app/components/permissions";
@@ -70,17 +71,6 @@ export const ServiceTokenV3Table = ({
            });
        }
    }
-    
-    const formatDate = (dateToFormat: string) => {
-        const date = new Date(dateToFormat);
-        const year = date.getFullYear();
-        const month = date.getMonth() + 1;
-        const day = date.getDate();
-    
-        const formattedDate = `${day}/${month}/${year}`;
-    
-        return formattedDate;
-    };
      
    return (
        <TableContainer>
@@ -171,9 +161,9 @@ export const ServiceTokenV3Table = ({
                                    })}
                                </Td> 
                                {/* <Td>{usageCount}</Td> */}
-                                <Td>{lastUsed ? formatDate(lastUsed) : "-"}</Td>
-                                <Td>{formatDate(createdAt)}</Td>
-                                <Td>{expiresAt ? formatDate(expiresAt) : "-"}</Td>
+                                <Td>{lastUsed ? format(new Date(lastUsed), "yyyy-MM-dd") : "-"}</Td>
+                                <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
+                                <Td>{expiresAt ? format(new Date(expiresAt), "yyyy-MM-dd") : "-"}</Td>
                                <Td className="flex justify-end">
                                    <ProjectPermissionCan
                                        I={ProjectPermissionActions.Edit}