Fix merge conflicts

frontend/src/views/IntegrationsPage/IntegrationsPage.tsx

@@ -17,6 +17,7 @@ import {
   useUpdateBotActiveStatus
 } from "@app/hooks/api";
 import { IntegrationAuth } from "@app/hooks/api/types";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";
 
 import { CloudIntegrationSection } from "./components/CloudIntegrationSection";
 import { FrameworkIntegrationSection } from "./components/FrameworkIntegrationSection";
@@ -92,7 +93,7 @@ export const IntegrationsPage = withProjectPermission(
         isIntegrationsAuthorizedEmpty &&
         isIntegrationsEmpty
       ) {
-        if (bot?.id)
+        if (bot?.id && currentWorkspace?.version === ProjectVersion.V1)
           updateBotActiveStatusSync({
             isActive: false,
             botId: bot.id,
@@ -113,7 +114,7 @@ export const IntegrationsPage = withProjectPermission(
       if (!selectedCloudIntegration) return;
 
       try {
-        if (bot && !bot.isActive) {
+        if (bot && !bot.isActive && currentWorkspace?.version === ProjectVersion.V1) {
           const botKey = generateBotKey(bot.publicKey, latestWsKey!);
           await updateBotActiveStatus({
             workspaceId,

frontend/src/views/IntegrationsPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -59,7 +59,7 @@ export const IntegrationsSection = ({
               <Link href={`/project/${workspaceId}/settings`} passHref>
                 <a className="underline underline-offset-2">project settings </a>
               </Link>
-              to re-enable it .
+              to re-enable it.
             </AlertDescription>
           </Alert>
         </div>
@@ -77,7 +77,7 @@ export const IntegrationsSection = ({
         <div className="flex flex-col space-y-4 p-6 pt-0">
           {integrations?.map((integration) => (
             <div
-              className="max-w-8xl flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-6 pb-2"
+              className="max-w-8xl flex justify-between rounded-md border border-mineshaft-600 bg-mineshaft-800 p-3 pb-0"
               key={`integration-${integration?.id.toString()}`}
             >
               <div className="flex">

frontend/src/views/Login/Login.tsx

@@ -7,9 +7,9 @@ import { getAuthToken, isLoggedIn } from "@app/reactQuery";
 
 import { 
     InitialStep,
+    LDAPStep,
     MFAStep,
-    SAMLSSOStep
-} from "./components";
+    SAMLSSOStep} from "./components";
 import { navigateUserToOrg } from "./Login.utils";
 
 export const Login = () => {
@@ -72,7 +72,10 @@ export const Login = () => {
                 return (
                     <SAMLSSOStep setStep={setStep} />
                 );
-            
+            case 3:
+                return (
+                    <LDAPStep setStep={setStep} />
+                );
             default:
                 return <div />;
         }

frontend/src/views/Login/LoginSSO.tsx

@@ -15,7 +15,7 @@ export const LoginSSO = ({ providerAuthToken }: Props) => {
     const [password, setPassword] = useState("");
 
     const {
-        email,
+        username,
         isUserCompleted
     } = jwt_decode(providerAuthToken) as any;
     
@@ -35,7 +35,7 @@ export const LoginSSO = ({ providerAuthToken }: Props) => {
                 return (
                     <PasswordStep 
                         providerAuthToken={providerAuthToken}
-                        email={email}
+                        email={username}
                         password={password}
                         setPassword={setPassword}
                         setStep={setStep}
@@ -45,7 +45,7 @@ export const LoginSSO = ({ providerAuthToken }: Props) => {
                 return (
                     <MFAStep 
                         providerAuthToken={providerAuthToken}
-                        email={email}
+                        email={username}
                         password={password}
                     />
                 );

frontend/src/views/Login/components/InitialStep/InitialStep.tsx

@@ -180,7 +180,20 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
           leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
           className="mx-0 h-10 w-full"
         >
-          Continue with SAML SSO
+          Continue with SAML
+        </Button>
+      </div>
+      <div className="mt-2 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(3);
+          }}
+          leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
+          className="mx-0 h-10 w-full"
+        >
+          Continue with LDAP
         </Button>
       </div>
       <div className="my-4 flex w-1/4 min-w-[20rem] flex-row items-center py-2 lg:w-1/6">

frontend/src/views/Login/components/LDAPStep/LDAPStep.tsx

@@ -0,0 +1,137 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, Input } from "@app/components/v2";
+import { loginLDAPRedirect } from "@app/hooks/api/auth/queries";
+
+type Props = {
+    setStep: (step: number) => void;
+}
+
+export const LDAPStep = ({
+    setStep
+}: Props) => {
+    const { createNotification } = useNotificationContext();
+    const [organizationSlug, setOrganizationSlug] = useState("");
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    
+    const { t } = useTranslation();
+
+    // const queryParams = new URLSearchParams(window.location.search);
+
+    const handleSubmission = async (e:React.FormEvent) => {
+        e.preventDefault()
+        try {
+            const { nextUrl } = await loginLDAPRedirect({
+                organizationSlug,
+                username,
+                password
+            });
+            
+            if (!nextUrl) {
+                createNotification({
+                    text: "Login unsuccessful. Double-check your credentials and try again.",
+                    type: "error"
+                });
+                
+                return;
+            }
+            
+            createNotification({
+                text: "Successfully logged in",
+                type: "success"
+            });
+
+            // redirects either to /login/sso or /signup/sso
+            window.open(nextUrl);
+            window.close();
+        } catch (err) {
+            createNotification({
+                text: "Login unsuccessful. Double-check your credentials and try again.",
+                type: "error"
+            });
+        }
+        
+        // TODO: add callback port support
+        
+        // const callbackPort = queryParams.get("callback_port");
+        // window.open(`/api/v1/ldap/redirect/saml2/${ssoIdentifier}${callbackPort ? `?callback_port=${callbackPort}` : ""}`);
+        // window.close();
+    }
+
+    return (
+        <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&apos;s your LDAP Login?
+            </p>
+            <form onSubmit={handleSubmission}>
+            <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={organizationSlug}
+                    onChange={(e) => setOrganizationSlug(e.target.value)}
+                    type="text"
+                    placeholder="Enter your organization slug..."
+                    isRequired
+                    autoComplete="email"
+                    id="email"
+                    className="h-12"
+                />
+                </div>
+            </div>
+            <div className="mt-2 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={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    type="text"
+                    placeholder="Enter your LDAP username..."
+                    isRequired
+                    autoComplete="email"
+                    id="email"
+                    className="h-12"
+                />
+                </div>
+            </div>
+            <div className="mt-2 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="password"
+                    placeholder="Enter your LDAP password..."
+                    isRequired
+                    autoComplete="current-password"
+                    id="current-password"
+                    className="select:-webkit-autofill:focus h-10"
+                />
+                </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
+                    type="submit" 
+                    colorSchema="primary" 
+                    variant="outline_bg"
+                    isFullWidth
+                    className="h-14"
+                > 
+                    {t("login.login")} 
+                </Button>
+            </div>
+            </form>
+            <div className="flex flex-row items-center justify-center mt-4">
+                <button
+                onClick={() => {
+                    setStep(0);
+                }}
+                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>
+    );
+};

frontend/src/views/Login/components/LDAPStep/index.tsx

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

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

@@ -1,4 +1,5 @@
 export { InitialStep } from "./InitialStep";
+export { LDAPStep } from "./LDAPStep";
 export { MFAStep } from "./MFAStep";
 export { SAMLSSOStep } from "./SAMLSSOStep";
 

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx

@@ -46,7 +46,7 @@ export const OrgMembersSection = () => {
   const handleAddMemberModal = () => {
     if (currentOrg?.authEnforced) {
       createNotification({
-        text: "You cannot invite users when org-level auth is configured for your organization",
+        text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
         type: "error"
       });
       return;
@@ -113,8 +113,8 @@ export const OrgMembersSection = () => {
       />
       <DeleteActionModal
         isOpen={popUp.removeMember.isOpen}
-        title={`Are you sure want to remove member with email ${
-          (popUp?.removeMember?.data as { email: string })?.email || ""
+        title={`Are you sure want to remove member with username ${
+          (popUp?.removeMember?.data as { username: string })?.username || ""
         }?`}
         onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
         deleteKey="confirm"

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -41,7 +41,7 @@ type Props = {
     popUpName: keyof UsePopUpState<["removeMember", "upgradePlan"]>,
     data?: {
       orgMembershipId?: string;
-      email?: string;
+      username?: string;
       description?: string;
     }
   ) => void;
@@ -141,10 +141,11 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
     () =>
       members?.filter(
         ({ user: u, inviteEmail }) =>
-          u?.firstName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.lastName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.email?.toLowerCase().includes(searchMemberFilter) ||
-          inviteEmail?.includes(searchMemberFilter)
+          u?.firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.username?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.email?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          inviteEmail?.includes(searchMemberFilter.toLowerCase())
       ),
     [members, searchMemberFilter]
   );
@@ -162,7 +163,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
           <THead>
             <Tr>
               <Th>Name</Th>
-              <Th>Email</Th>
+              <Th>Username</Th>
               <Th>Role</Th>
               <Th className="w-5" />
             </Tr>
@@ -174,10 +175,11 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                 ({ user: u, inviteEmail, role, roleId, id: orgMembershipId, status }) => {
                   const name = u && u.firstName ? `${u.firstName} ${u.lastName}` : "-";
                   const email = u?.email || inviteEmail;
+                  const username = u?.username ?? inviteEmail ?? "-";
                   return (
                     <Tr key={`org-membership-${orgMembershipId}`} className="w-full">
                       <Td>{name}</Td>
-                      <Td>{email}</Td>
+                      <Td>{username}</Td>
                       <Td>
                         <OrgPermissionCan
                           I={OrgPermissionActions.Edit}
@@ -206,7 +208,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                                     ))}
                                 </Select>
                               )}
-                              {(status === "invited" || status === "verified") &&
+                              {(status === "invited" || status === "verified") && email &&
                                 serverDetails?.emailConfigured && (
                                   <Button
                                     isDisabled={!isAllowed}
@@ -231,7 +233,15 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
                             {(isAllowed) => (
                               <IconButton
                                 onClick={() => {
-                                  handlePopUpOpen("removeMember", { orgMembershipId, email });
+                                  if (currentOrg?.authEnforced) {
+                                    createNotification({
+                                      text: "You cannot manage users from Infisical when org-level auth is enforced for your organization",
+                                      type: "error"
+                                    });
+                                    return;
+                                  }
+                                  
+                                  handlePopUpOpen("removeMember", { orgMembershipId, username });
                                 }}
                                 size="lg"
                                 colorSchema="danger"

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx

@@ -81,6 +81,18 @@ const SIMPLE_PERMISSION_OPTIONS = [
     subtitle: "Define organization level SSO requirements",
     icon: faSignIn,
     formName: "sso"
+  },
+  {
+    title: "LDAP",
+    subtitle: "Define organization level LDAP requirements",
+    icon: faSignIn,
+    formName: "ldap"
+  },
+  {
+    title: "SCIM",
+    subtitle: "Define organization level SCIM requirements",
+    icon: faUsers,
+    formName: "scim"
   }
 ] as const;
 

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.utils.ts

@@ -34,6 +34,8 @@ export const formSchema = z.object({
       "incident-contact": generalPermissionSchema,
       "secret-scanning": generalPermissionSchema,
       sso: generalPermissionSchema,
+      scim: generalPermissionSchema,
+      ldap: generalPermissionSchema,
       billing: generalPermissionSchema,
       identity: generalPermissionSchema
     })

frontend/src/views/Project/MembersPage/MembersPage.tsx

@@ -5,12 +5,7 @@ import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
 
-import {
-  IdentityTab,
-  MemberListTab,
-  ProjectRoleListTab,
-  ServiceTokenTab
-} from "./components";
+import { IdentityTab, MemberListTab, ProjectRoleListTab, ServiceTokenTab } from "./components";
 
 enum TabSections {
   Member = "members",
@@ -23,19 +18,14 @@ export const MembersPage = withProjectPermission(
   () => {
     return (
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-        <div className="mb-6 w-full py-6 px-6 max-w-7xl mx-auto">
-          <p className="mr-4 mb-4 text-3xl font-semibold text-white">
-            Project Access Control
-          </p>
+        <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+          <p className="mr-4 mb-4 text-3xl font-semibold text-white">Project Access Control</p>
           <Tabs defaultValue={TabSections.Member}>
             <TabList>
               <Tab value={TabSections.Member}>People</Tab>
               <Tab value={TabSections.Identities}>
                 <div className="flex items-center">
                   <p>Machine Identities</p>
-                  <div className="ml-2 rounded-md text-yellow text-sm inline-block bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] opacity-80 hover:opacity-100 cursor-default">
-                    New
-                  </div>
                 </div>
               </Tab>
               <Tab value={TabSections.ServiceTokens}>Service Tokens</Tab>

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityRoles.tsx

@@ -0,0 +1,459 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faClock, faEdit, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  IconButton,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Spinner,
+  Tag,
+  Tooltip
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useGetProjectRoles, useUpdateIdentityWorkspaceRole } from "@app/hooks/api";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { TWorkspaceUser } from "@app/hooks/api/types";
+import { ProjectUserMembershipTemporaryMode } from "@app/hooks/api/workspace/types";
+import { groupBy } from "@app/lib/fn/array";
+
+const temporaryRoleFormSchema = z.object({
+  temporaryRange: z.string().min(1, "Required")
+});
+
+type TTemporaryRoleFormSchema = z.infer<typeof temporaryRoleFormSchema>;
+
+type TTemporaryRoleFormProps = {
+  temporaryConfig?: {
+    isTemporary?: boolean;
+    temporaryAccessEndTime?: string | null;
+    temporaryAccessStartTime?: string | null;
+    temporaryRange?: string | null;
+  };
+  onSetTemporary: (data: { temporaryRange: string; temporaryAccessStartTime?: string }) => void;
+  onRemoveTemporary: () => void;
+};
+
+const IdentityTemporaryRoleForm = ({
+  temporaryConfig: defaultValues = {},
+  onSetTemporary,
+  onRemoveTemporary
+}: TTemporaryRoleFormProps) => {
+  const { popUp, handlePopUpToggle } = usePopUp(["setTempRole"] as const);
+  const { control, handleSubmit } = useForm<TTemporaryRoleFormSchema>({
+    resolver: zodResolver(temporaryRoleFormSchema),
+    values: {
+      temporaryRange: defaultValues.temporaryRange || "1h"
+    }
+  });
+  const isTemporaryFieldValue = defaultValues.isTemporary;
+  const isExpired =
+    isTemporaryFieldValue && new Date() > new Date(defaultValues.temporaryAccessEndTime || "");
+
+  return (
+    <Popover
+      open={popUp.setTempRole.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("setTempRole", isOpen);
+      }}
+    >
+      <PopoverTrigger>
+        <IconButton ariaLabel="role-temp" variant="plain" size="md">
+          <Tooltip content={isExpired ? "Access Expired" : "Grant Temporary Access"}>
+            <FontAwesomeIcon
+              icon={faClock}
+              className={twMerge(
+                isTemporaryFieldValue && "text-primary",
+                isExpired && "text-red-600"
+              )}
+            />
+          </Tooltip>
+        </IconButton>
+      </PopoverTrigger>
+      <PopoverContent
+        arrowClassName="fill-gray-600"
+        side="right"
+        sideOffset={12}
+        hideCloseBtn
+        className="border border-gray-600 pt-4"
+      >
+        <div className="flex flex-col space-y-4">
+          <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+            Set Role Temporarily
+          </div>
+          {isExpired && <Tag colorSchema="red">Expired</Tag>}
+          <Controller
+            control={control}
+            name="temporaryRange"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Validity"
+                isError={Boolean(error?.message)}
+                errorText={error?.message}
+                helperText={
+                  <span>
+                    1m, 2h, 3d.{" "}
+                    <a
+                      href="https://github.com/vercel/ms?tab=readme-ov-file#examples"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary-700"
+                    >
+                      More
+                    </a>
+                  </span>
+                }
+              >
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center space-x-2">
+            {isTemporaryFieldValue && (
+              <Button
+                size="xs"
+                type="submit"
+                onClick={() => {
+                  handleSubmit(({ temporaryRange }) => {
+                    onSetTemporary({
+                      temporaryRange,
+                      temporaryAccessStartTime: new Date().toISOString()
+                    });
+                    handlePopUpToggle("setTempRole");
+                  })();
+                }}
+              >
+                Restart
+              </Button>
+            )}
+            {!isTemporaryFieldValue ? (
+              <Button
+                size="xs"
+                type="submit"
+                onClick={() =>
+                  handleSubmit(({ temporaryRange }) => {
+                    onSetTemporary({
+                      temporaryRange,
+                      temporaryAccessStartTime:
+                        defaultValues.temporaryAccessStartTime || new Date().toISOString()
+                    });
+                    handlePopUpToggle("setTempRole");
+                  })()
+                }
+              >
+                Grant access
+              </Button>
+            ) : (
+              <Button
+                size="xs"
+                variant="outline_bg"
+                colorSchema="danger"
+                onClick={() => {
+                  onRemoveTemporary();
+                  handlePopUpToggle("setTempRole");
+                }}
+              >
+                Revoke Access
+              </Button>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const formSchema = z.record(
+  z.object({
+    isChecked: z.boolean().optional(),
+    temporaryAccess: z.union([
+      z.object({
+        isTemporary: z.literal(true),
+        temporaryRange: z.string().min(1),
+        temporaryAccessStartTime: z.string().datetime(),
+        temporaryAccessEndTime: z.string().datetime().nullable().optional()
+      }),
+      z.boolean()
+    ])
+  })
+);
+type TForm = z.infer<typeof formSchema>;
+
+export type TMemberRolesProp = {
+  disableEdit?: boolean;
+  identityId: string;
+  roles: TWorkspaceUser["roles"];
+};
+
+const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
+
+export const IdentityRoles = ({
+  roles = [],
+  disableEdit = false,
+  identityId
+}: TMemberRolesProp) => {
+  const { currentWorkspace } = useWorkspace();
+  const { createNotification } = useNotificationContext();
+  const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
+  const [searchRoles, setSearchRoles] = useState("");
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    setValue,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema)
+  });
+
+  const workspaceId = currentWorkspace?.id || "";
+
+  const { data: projectRoles, isLoading: isRolesLoading } = useGetProjectRoles(workspaceId);
+  const userRolesGroupBySlug = groupBy(roles, ({ customRoleSlug, role }) => customRoleSlug || role);
+
+  const updateIdentityWorkspaceRole = useUpdateIdentityWorkspaceRole();
+
+  const handleRoleUpdate = async (data: TForm) => {
+    const selectedRoles = Object.keys(data)
+      .filter((el) => Boolean(data[el].isChecked))
+      .map((el) => {
+        const isTemporary = Boolean(data[el].temporaryAccess);
+        if (!isTemporary) {
+          return { role: el, isTemporary: false as const };
+        }
+
+        const tempCfg = data[el].temporaryAccess as {
+          temporaryRange: string;
+          temporaryAccessStartTime: string;
+        };
+
+        return {
+          role: el,
+          isTemporary: true as const,
+          temporaryMode: ProjectUserMembershipTemporaryMode.Relative,
+          temporaryRange: tempCfg.temporaryRange,
+          temporaryAccessStartTime: tempCfg.temporaryAccessStartTime
+        };
+      });
+
+    try {
+      await updateIdentityWorkspaceRole.mutateAsync({
+        workspaceId,
+        identityId,
+        roles: selectedRoles
+      });
+      createNotification({ text: "Successfully updated identity role", type: "success" });
+      handlePopUpToggle("editRole");
+      setSearchRoles("");
+    } catch (err) {
+      createNotification({ text: "Failed to update identity role", type: "error" });
+    }
+  };
+
+  const formatRoleName = (role: string, customRoleName?: string) => {
+    if (role === ProjectMembershipRole.Custom) return customRoleName;
+    if (role === ProjectMembershipRole.Member) return "Developer";
+    return role;
+  };
+
+  return (
+    <div className="flex items-center space-x-2">
+      {roles
+        .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+        .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+          const isExpired = new Date() > new Date(temporaryAccessEndTime || ("" as string));
+          return (
+            <Tag key={id} className="capitalize">
+              <div className="flex items-center space-x-2">
+                <div>{formatRoleName(role, customRoleName)}</div>
+                {isTemporary && (
+                  <div>
+                    <Tooltip content={isExpired ? "Expired Temporary Access" : "Temporary Access"}>
+                      <FontAwesomeIcon
+                        icon={faClock}
+                        className={twMerge(isExpired && "text-red-600")}
+                      />
+                    </Tooltip>
+                  </div>
+                )}
+              </div>
+            </Tag>
+          );
+        })}
+      {roles.length > MAX_ROLES_TO_BE_SHOWN_IN_TABLE && (
+        <HoverCard>
+          <HoverCardTrigger>
+            <Tag>+{roles.length - MAX_ROLES_TO_BE_SHOWN_IN_TABLE}</Tag>
+          </HoverCardTrigger>
+          <HoverCardContent className="border border-gray-700 bg-mineshaft-800 p-4">
+            {roles
+              .slice(MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+              .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+                const isExpired = new Date() > new Date(temporaryAccessEndTime || ("" as string));
+                return (
+                  <Tag key={id} className="capitalize">
+                    <div className="flex items-center space-x-2">
+                      <div>{formatRoleName(role, customRoleName)}</div>
+                      {isTemporary && (
+                        <div>
+                          <Tooltip
+                            content={isExpired ? "Expired Temporary Access" : "Temporary Access"}
+                          >
+                            <FontAwesomeIcon
+                              icon={faClock}
+                              className={twMerge(
+                                new Date() > new Date(temporaryAccessEndTime as string) &&
+                                "text-red-600"
+                              )}
+                            />
+                          </Tooltip>
+                        </div>
+                      )}
+                    </div>
+                  </Tag>
+                );
+              })}{" "}
+          </HoverCardContent>
+        </HoverCard>
+      )}
+      <div>
+        <Popover
+          open={popUp.editRole.isOpen}
+          onOpenChange={(isOpen) => {
+            handlePopUpToggle("editRole", isOpen);
+            reset();
+          }}
+        >
+          {!disableEdit && (
+            <PopoverTrigger>
+              <IconButton size="sm" variant="plain" ariaLabel="update">
+                <FontAwesomeIcon icon={faEdit} />
+              </IconButton>
+            </PopoverTrigger>
+          )}
+          <PopoverContent hideCloseBtn className="pt-4">
+            {isRolesLoading ? (
+              <div className="flex h-8 w-full items-center justify-center">
+                <Spinner />
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit(handleRoleUpdate)} id="role-update-form">
+                <div className="thin-scrollbar max-h-80 space-y-4 overflow-y-auto">
+                  {projectRoles
+                    ?.filter(
+                      ({ name, slug }) =>
+                        name.toLowerCase().includes(searchRoles.toLowerCase()) ||
+                        slug.toLowerCase().includes(searchRoles.toLowerCase())
+                    )
+                    ?.map(({ id, name, slug }) => {
+                      const userProjectRoleDetails = userRolesGroupBySlug?.[slug]?.[0];
+
+                      return (
+                        <div key={id} className="flex items-center space-x-4">
+                          <div className="flex-grow">
+                            <Controller
+                              control={control}
+                              defaultValue={Boolean(userProjectRoleDetails?.id)}
+                              name={`${slug}.isChecked`}
+                              render={({ field }) => (
+                                <Checkbox
+                                  id={slug}
+                                  isChecked={field.value}
+                                  onCheckedChange={(isChecked) => {
+                                    field.onChange(isChecked);
+                                    setValue(`${slug}.temporaryAccess`, false);
+                                  }}
+                                >
+                                  {name}
+                                </Checkbox>
+                              )}
+                            />
+                          </div>
+                          <div>
+                            <Controller
+                              control={control}
+                              name={`${slug}.temporaryAccess`}
+                              defaultValue={
+                                userProjectRoleDetails?.isTemporary
+                                  ? {
+                                    isTemporary: true,
+                                    temporaryAccessStartTime:
+                                      userProjectRoleDetails.temporaryAccessStartTime as string,
+                                    temporaryRange:
+                                      userProjectRoleDetails.temporaryRange as string,
+                                    temporaryAccessEndTime:
+                                      userProjectRoleDetails.temporaryAccessEndTime
+                                  }
+                                  : false
+                              }
+                              render={({ field }) => (
+                                <IdentityTemporaryRoleForm
+                                  temporaryConfig={
+                                    typeof field.value === "boolean"
+                                      ? { isTemporary: field.value }
+                                      : field.value
+                                  }
+                                  onSetTemporary={(data) => {
+                                    setValue(`${slug}.isChecked`, true, { shouldDirty: true });
+                                    console.log(data);
+                                    field.onChange({ isTemporary: true, ...data });
+                                  }}
+                                  onRemoveTemporary={() => {
+                                    setValue(`${slug}.isChecked`, false, { shouldDirty: true });
+                                    field.onChange(false);
+                                  }}
+                                />
+                              )}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
+                </div>
+                <div className="mt-3 flex items-center space-x-2 border-t border-t-gray-700 pt-3">
+                  <div>
+                    <Input
+                      className="w-full p-1.5 pl-8"
+                      size="xs"
+                      value={searchRoles}
+                      onChange={(el) => setSearchRoles(el.target.value)}
+                      leftIcon={<FontAwesomeIcon icon={faSearch} />}
+                      placeholder="Search roles.."
+                    />
+                  </div>
+                  <div>
+                    <Button
+                      size="xs"
+                      type="submit"
+                      form="role-update-form"
+                      leftIcon={<FontAwesomeIcon icon={faCheck} />}
+                      isDisabled={!isDirty || isSubmitting}
+                      isLoading={isSubmitting}
+                    >
+                      Save
+                    </Button>
+                  </div>
+                </div>
+              </form>
+            )}
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+};

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -2,13 +2,10 @@ import { faServer, 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";
 import {
   EmptyState,
   IconButton,
-  Select,
-  SelectItem,
   Table,
   TableContainer,
   TableSkeleton,
@@ -19,13 +16,11 @@ import {
   Tr
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import {
-  useGetProjectRoles,
-  useGetWorkspaceIdentityMemberships,
-  useUpdateIdentityWorkspaceRole
-} from "@app/hooks/api";
+import { useGetWorkspaceIdentityMemberships } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
+import { IdentityRoles } from "./IdentityRoles";
+
 type Props = {
   handlePopUpOpen: (
     popUpName: keyof UsePopUpState<["deleteIdentity", "identity"]>,
@@ -37,39 +32,9 @@ type Props = {
 };
 
 export const IdentityTable = ({ handlePopUpOpen }: Props) => {
-  const { createNotification } = useNotificationContext();
   const { currentWorkspace } = useWorkspace();
-  const workspaceId = currentWorkspace?.id || "";
   const { data, isLoading } = useGetWorkspaceIdentityMemberships(currentWorkspace?.id || "");
 
-  const { data: roles } = useGetProjectRoles(workspaceId);
-
-  const { mutateAsync: updateMutateAsync } = useUpdateIdentityWorkspaceRole();
-
-  const handleChangeRole = async ({ identityId, role }: { identityId: string; role: string }) => {
-    try {
-      await updateMutateAsync({
-        identityId,
-        workspaceId,
-        role
-      });
-
-      createNotification({
-        text: "Successfully updated identity role",
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      const error = err as any;
-      const text = error?.response?.data?.message ?? "Failed to update identity role";
-
-      createNotification({
-        text,
-        type: "error"
-      });
-    }
-  };
-
   return (
     <TableContainer>
       <Table>
@@ -86,7 +51,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
           {!isLoading &&
             data &&
             data.length > 0 &&
-            data.map(({ identity: { id, name }, role, customRole, createdAt }) => {
+            data.map(({ identity: { id, name }, roles, createdAt }) => {
               return (
                 <Tr className="h-10" key={`st-v3-${id}`}>
                   <Td>{name}</Td>
@@ -95,28 +60,9 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                       I={ProjectPermissionActions.Edit}
                       a={ProjectPermissionSub.Identity}
                     >
-                      {(isAllowed) => {
-                        return (
-                          <Select
-                            value={role === "custom" ? (customRole?.slug as string) : role}
-                            isDisabled={!isAllowed}
-                            className="w-40 bg-mineshaft-600"
-                            dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                            onValueChange={(selectedRole) =>
-                              handleChangeRole({
-                                identityId: id,
-                                role: selectedRole
-                              })
-                            }
-                          >
-                            {(roles || []).map(({ slug, name: roleName }) => (
-                              <SelectItem value={slug} key={`owner-option-${slug}`}>
-                                {roleName}
-                              </SelectItem>
-                            ))}
-                          </Select>
-                        );
-                      }}
+                      {(isAllowed) => (
+                        <IdentityRoles roles={roles} disableEdit={!isAllowed} identityId={id} />
+                      )}
                     </ProjectPermissionCan>
                   </Td>
                   <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>

frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
@@ -9,10 +9,6 @@ import { z } from "zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import {
-  decryptAssymmetric,
-  encryptAssymmetric
-} from "@app/components/utilities/cryptography/crypto";
 import {
   Button,
   DeleteActionModal,
@@ -38,22 +34,21 @@ import {
   ProjectPermissionActions,
   ProjectPermissionSub,
   useOrganization,
-  useSubscription,
   useUser,
   useWorkspace
 } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
-  useAddUserToWs,
+  useAddUserToWsE2EE,
+  useAddUserToWsNonE2EE,
   useDeleteUserFromWorkspace,
   useGetOrgUsers,
-  useGetProjectRoles,
   useGetUserWsKey,
-  useGetWorkspaceUsers,
-  useUpdateUserWorkspaceRole,
-  useUploadWsKey
+  useGetWorkspaceUsers
 } from "@app/hooks/api";
-import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";
+
+import { MemberRoles } from "./MemberRoles";
 
 const addMemberFormSchema = z.object({
   orgMembershipId: z.string().trim()
@@ -63,7 +58,6 @@ type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
 
 export const MemberListTab = () => {
   const { createNotification } = useNotificationContext();
-  const { subscription } = useSubscription();
   const { t } = useTranslation();
 
   const { currentOrg } = useOrganization();
@@ -74,12 +68,10 @@ export const MemberListTab = () => {
   const orgId = currentOrg?.id || "";
   const workspaceId = currentWorkspace?.id || "";
 
-  const { data: roles, isLoading: isRolesLoading } = useGetProjectRoles(workspaceId);
-
   const { data: wsKey } = useGetUserWsKey(workspaceId);
   const { data: members, isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
   const { data: orgUsers } = useGetOrgUsers(orgId);
-
+  
   const [searchMemberFilter, setSearchMemberFilter] = useState("");
 
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
@@ -95,12 +87,12 @@ export const MemberListTab = () => {
     formState: { isSubmitting }
   } = useForm<TAddMemberForm>({ resolver: zodResolver(addMemberFormSchema) });
 
-  const { mutateAsync: addUserToWorkspace } = useAddUserToWs();
-  const { mutateAsync: uploadWsKey } = useUploadWsKey();
+  const { mutateAsync: addUserToWorkspace } = useAddUserToWsE2EE();
+  const { mutateAsync: addUserToWorkspaceNonE2EE } = useAddUserToWsNonE2EE();
   const { mutateAsync: removeUserFromWorkspace } = useDeleteUserFromWorkspace();
-  const { mutateAsync: updateUserWorkspaceRole } = useUpdateUserWorkspaceRole();
 
   const onAddMember = async ({ orgMembershipId }: TAddMemberForm) => {
+    if (!currentWorkspace) return;
     if (!currentOrg?.id) return;
     // TODO(akhilmhdh): Move to memory storage
     const userPrivateKey = localStorage.getItem("PRIVATE_KEY");
@@ -113,13 +105,27 @@ export const MemberListTab = () => {
     const orgUser = (orgUsers || []).find(({ id }) => id === orgMembershipId);
     if (!orgUser) return;
 
-    try {
-      await addUserToWorkspace({
-        workspaceId,
-        userPrivateKey,
-        decryptKey: wsKey,
-        members: [{ orgMembershipId, userPublicKey: orgUser.user.publicKey }]
-      });
+    try { // TODO: update
+      if (currentWorkspace.version === ProjectVersion.V1) {
+        await addUserToWorkspace({
+          workspaceId,
+          userPrivateKey,
+          decryptKey: wsKey,
+          members: [{ orgMembershipId, userPublicKey: orgUser.user.publicKey }]
+        });
+      } else if (currentWorkspace.version === ProjectVersion.V2) {
+        await addUserToWorkspaceNonE2EE({
+          projectId: workspaceId,
+          usernames: [orgUser.user.username]
+        });
+      } else {
+        createNotification({
+          text: "Failed to add user to project, unknown project type",
+          type: "error"
+        });
+
+        return;
+      }
       createNotification({
         text: "Successfully added user to the project",
         type: "success"
@@ -136,11 +142,11 @@ export const MemberListTab = () => {
   };
 
   const handleRemoveUser = async () => {
-    const membershipId = (popUp?.removeMember?.data as { id: string })?.id;
+    const username = (popUp?.removeMember?.data as { username: string })?.username;
     if (!currentOrg?.id) return;
 
     try {
-      await removeUserFromWorkspace({ workspaceId, membershipId });
+      await removeUserFromWorkspace({ workspaceId, usernames: [username] });
       createNotification({
         text: "Successfully removed user from project",
         type: "success"
@@ -155,105 +161,29 @@ export const MemberListTab = () => {
     handlePopUpClose("removeMember");
   };
 
-  const isIamOwner = useMemo(
-    () => members?.find(({ user: u }) => userId === u?.id)?.role === "owner",
-    [userId, members]
-  );
-
-  const findRoleFromId = useCallback(
-    (roleId: string) => {
-      return (roles || []).find(({ id }) => id === roleId);
-    },
-    [roles]
-  );
-
-  const onRoleChange = async (membershipId: string, role: string) => {
-    if (!currentOrg?.id) return;
-
-    try {
-      const isCustomRole = !Object.values(ProjectMembershipRole).includes(
-        role as ProjectMembershipRole
-      );
-
-      if (isCustomRole && subscription && !subscription?.rbac) {
-        handlePopUpOpen("upgradePlan", {
-          description: "You can assign custom roles to members if you upgrade your Infisical plan."
-        });
-        return;
-      }
-
-      await updateUserWorkspaceRole({ membershipId, role, workspaceId });
-      createNotification({
-        text: "Successfully updated user role",
-        type: "success"
-      });
-    } catch (error) {
-      console.error(error);
-      createNotification({
-        text: "Failed to update user role",
-        type: "error"
-      });
-    }
-  };
-
   const filterdUsers = useMemo(
     () =>
       members?.filter(
         ({ user: u, inviteEmail }) =>
-          u?.firstName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.lastName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.email?.toLowerCase().includes(searchMemberFilter) ||
-          inviteEmail?.includes(searchMemberFilter)
+          u?.firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.username?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.email?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          inviteEmail?.includes(searchMemberFilter.toLowerCase())
       ),
     [members, searchMemberFilter]
   );
 
   const filteredOrgUsers = useMemo(() => {
-    const wsUserEmails = new Map();
+    const wsUserUsernames = new Map();
     members?.forEach((member) => {
-      wsUserEmails.set(member.user.email, true);
+      wsUserUsernames.set(member.user.username, true);
     });
     return (orgUsers || []).filter(
-      ({ status, user: u }) => status === "accepted" && !wsUserEmails.has(u.email)
+      ({ status, user: u }) => status === "accepted" && !wsUserUsernames.has(u.username)
     );
   }, [orgUsers, members]);
 
-  const onGrantAccess = async (grantedUserId: string, publicKey: string) => {
-    try {
-      const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
-      if (!PRIVATE_KEY || !wsKey) return;
-
-      // assymmetrically decrypt symmetric key with local private key
-      const key = decryptAssymmetric({
-        ciphertext: wsKey.encryptedKey,
-        nonce: wsKey.nonce,
-        publicKey: wsKey.sender.publicKey,
-        privateKey: PRIVATE_KEY
-      });
-
-      const { ciphertext, nonce } = encryptAssymmetric({
-        plaintext: key,
-        publicKey,
-        privateKey: PRIVATE_KEY
-      });
-
-      await uploadWsKey({
-        userId: grantedUserId,
-        nonce,
-        encryptedKey: ciphertext,
-        workspaceId: currentWorkspace?.id || ""
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to grant access to user",
-        type: "error"
-      });
-    }
-  };
-
-  const isLoading = isMembersLoading || isRolesLoading;
-
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-4 flex items-center justify-between">
@@ -284,95 +214,69 @@ export const MemberListTab = () => {
             <THead>
               <Tr>
                 <Th>Name</Th>
-                <Th>Email</Th>
+                <Th>Username</Th>
                 <Th>Role</Th>
                 <Th className="w-5" />
               </Tr>
             </THead>
             <TBody>
-              {isLoading && <TableSkeleton columns={4} innerKey="project-members" />}
-              {!isLoading &&
-                filterdUsers?.map(
-                  ({ user: u, inviteEmail, id: membershipId, status, roleId, role }) => {
-                    const name = u ? `${u.firstName} ${u.lastName}` : "-";
-                    const email = u?.email || inviteEmail;
+              {isMembersLoading && <TableSkeleton columns={4} innerKey="project-members" />}
+              {!isMembersLoading &&
+                filterdUsers?.map(({ user: u, inviteEmail, id: membershipId, roles }) => {
+                  const name = u ? `${u.firstName} ${u.lastName}` : "-";
+                  const email = u?.email || inviteEmail;
 
-                    return (
-                      <Tr key={`membership-${membershipId}`} className="w-full">
-                        <Td>{name}</Td>
-                        <Td>{email}</Td>
-                        <Td>
+                  return (
+                    <Tr key={`membership-${membershipId}`} className="w-full">
+                      <Td>{name}</Td>
+                      <Td>{email}</Td>
+                      <Td>
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Edit}
+                          a={ProjectPermissionSub.Member}
+                        >
+                          {(isAllowed) => (
+                              <MemberRoles
+                                roles={roles}
+                                disableEdit={u.id === user?.id || !isAllowed}
+                                onOpenUpgradeModal={(description) =>
+                                  handlePopUpOpen("upgradePlan", { description })
+                                }
+                                membershipId={membershipId}
+                              />
+                          )}
+                        </ProjectPermissionCan>
+                      </Td>
+                      <Td>
+                        {userId !== u?.id && (
                           <ProjectPermissionCan
-                            I={ProjectPermissionActions.Edit}
+                            I={ProjectPermissionActions.Delete}
                             a={ProjectPermissionSub.Member}
                           >
                             {(isAllowed) => (
-                              <>
-                                <Select
-                                  value={role === "custom" ? findRoleFromId(roleId)?.slug : role}
-                                  isDisabled={userId === u?.id || !isAllowed}
-                                  className="w-40 bg-mineshaft-600"
-                                  dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
-                                  onValueChange={(selectedRole) =>
-                                    onRoleChange(membershipId, selectedRole)
-                                  }
-                                >
-                                  {(roles || [])
-                                    .filter(({ slug }) =>
-                                      slug === "owner" ? isIamOwner || role === "owner" : true
-                                    )
-                                    .map(({ slug, name: roleName }) => (
-                                      <SelectItem value={slug} key={`owner-option-${slug}`}>
-                                        {roleName}
-                                      </SelectItem>
-                                    ))}
-                                </Select>
-                                {status === "completed" && user.email !== email && (
-                                  <div className="rounded-md border border-mineshaft-700 bg-white/5 text-white duration-200 hover:bg-primary hover:text-black">
-                                    <Button
-                                      colorSchema="secondary"
-                                      isDisabled={!isAllowed}
-                                      onClick={() => onGrantAccess(u?.id, u?.publicKey)}
-                                    >
-                                      Grant Access
-                                    </Button>
-                                  </div>
-                                )}
-                              </>
+                              <IconButton
+                                size="lg"
+                                colorSchema="danger"
+                                variant="plain"
+                                ariaLabel="update"
+                                className="ml-4"
+                                isDisabled={userId === u?.id || !isAllowed}
+                                onClick={() =>
+                                  handlePopUpOpen("removeMember", { username: u.username })
+                                }
+                              >
+                                <FontAwesomeIcon icon={faXmark} />
+                              </IconButton>
                             )}
                           </ProjectPermissionCan>
-                        </Td>
-                        <Td>
-                          {userId !== u?.id && (
-                            <ProjectPermissionCan
-                              I={ProjectPermissionActions.Delete}
-                              a={ProjectPermissionSub.Member}
-                            >
-                              {(isAllowed) => (
-                                <IconButton
-                                  size="lg"
-                                  colorSchema="danger"
-                                  variant="plain"
-                                  ariaLabel="update"
-                                  className="ml-4"
-                                  isDisabled={userId === u?.id || !isAllowed}
-                                  onClick={() =>
-                                    handlePopUpOpen("removeMember", { id: membershipId })
-                                  }
-                                >
-                                  <FontAwesomeIcon icon={faXmark} />
-                                </IconButton>
-                              )}
-                            </ProjectPermissionCan>
-                          )}
-                        </Td>
-                      </Tr>
-                    );
-                  }
-                )}
+                        )}
+                      </Td>
+                    </Tr>
+                  );
+                })}
             </TBody>
           </Table>
-          {!isLoading && filterdUsers?.length === 0 && (
+          {!isMembersLoading && filterdUsers?.length === 0 && (
             <EmptyState title="No project members found" icon={faUsers} />
           )}
         </TableContainer>
@@ -389,20 +293,20 @@ export const MemberListTab = () => {
             <form onSubmit={handleSubmit(onAddMember)}>
               <Controller
                 control={control}
-                defaultValue={filteredOrgUsers?.[0]?.user?.email}
+                defaultValue={filteredOrgUsers?.[0]?.user?.username}
                 name="orgMembershipId"
                 render={({ field, fieldState: { error } }) => (
-                  <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
+                  <FormControl label="Username" isError={Boolean(error)} errorText={error?.message}>
                     <Select
                       position="popper"
                       className="w-full"
-                      defaultValue={filteredOrgUsers?.[0]?.user?.email}
+                      defaultValue={filteredOrgUsers?.[0]?.user?.username}
                       value={field.value}
                       onValueChange={field.onChange}
                     >
                       {filteredOrgUsers.map(({ id: orgUserId, user: u }) => (
                         <SelectItem value={orgUserId} key={`org-membership-join-${orgUserId}`}>
-                          {u?.email}
+                          {u?.username}
                         </SelectItem>
                       ))}
                     </Select>
@@ -441,7 +345,7 @@ export const MemberListTab = () => {
       <DeleteActionModal
         isOpen={popUp.removeMember.isOpen}
         deleteKey="remove"
-        title="Do you want to remove this user from the org?"
+        title="Do you want to remove this user from the project?"
         onChange={(isOpen) => handlePopUpToggle("removeMember", isOpen)}
         onDeleteApproved={handleRemoveUser}
       />

frontend/src/views/Project/MembersPage/components/MemberListTab/MemberRoles.tsx

@@ -0,0 +1,473 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faClock, faEdit, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  IconButton,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Spinner,
+  Tag,
+  Tooltip
+} from "@app/components/v2";
+import { useSubscription, useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useGetProjectRoles, useUpdateUserWorkspaceRole } from "@app/hooks/api";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { TWorkspaceUser } from "@app/hooks/api/types";
+import { ProjectUserMembershipTemporaryMode } from "@app/hooks/api/workspace/types";
+import { groupBy } from "@app/lib/fn/array";
+
+const temporaryRoleFormSchema = z.object({
+  temporaryRange: z.string().min(1, "Required")
+});
+
+type TTemporaryRoleFormSchema = z.infer<typeof temporaryRoleFormSchema>;
+
+type TTemporaryRoleFormProps = {
+  temporaryConfig?: {
+    isTemporary?: boolean;
+    temporaryAccessEndTime?: string | null;
+    temporaryAccessStartTime?: string | null;
+    temporaryRange?: string | null;
+  };
+  onSetTemporary: (data: { temporaryRange: string; temporaryAccessStartTime?: string }) => void;
+  onRemoveTemporary: () => void;
+};
+
+const TemporaryRoleForm = ({
+  temporaryConfig: defaultValues = {},
+  onSetTemporary,
+  onRemoveTemporary
+}: TTemporaryRoleFormProps) => {
+  const { popUp, handlePopUpToggle } = usePopUp(["setTempRole"] as const);
+  const { control, handleSubmit } = useForm<TTemporaryRoleFormSchema>({
+    resolver: zodResolver(temporaryRoleFormSchema),
+    values: {
+      temporaryRange: defaultValues.temporaryRange || "1h"
+    }
+  });
+  const isTemporaryFieldValue = defaultValues.isTemporary;
+  const isExpired =
+    isTemporaryFieldValue && new Date() > new Date(defaultValues.temporaryAccessEndTime || "");
+
+  return (
+    <Popover
+      open={popUp.setTempRole.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("setTempRole", isOpen);
+      }}
+    >
+      <PopoverTrigger>
+        <IconButton ariaLabel="role-temp" variant="plain" size="md">
+          <Tooltip content={isExpired ? "Timed access expired" : "Grant timed access"}>
+            <FontAwesomeIcon
+              icon={faClock}
+              className={twMerge(
+                isTemporaryFieldValue && "text-primary",
+                isExpired && "text-red-600"
+              )}
+            />
+          </Tooltip>
+        </IconButton>
+      </PopoverTrigger>
+      <PopoverContent
+        arrowClassName="fill-gray-600"
+        side="right"
+        sideOffset={12}
+        hideCloseBtn
+        className="border border-gray-600 pt-4"
+      >
+        <div className="flex flex-col space-y-4">
+          <div className="border-b border-b-gray-700 pb-2 text-sm text-mineshaft-300">
+            Configure timed access
+          </div>
+          {isExpired && <Tag colorSchema="red">Expired</Tag>}
+          <Controller
+            control={control}
+            name="temporaryRange"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Validity"
+                isError={Boolean(error?.message)}
+                errorText={error?.message}
+                helperText={
+                  <span>
+                    1m, 2h, 3d.{" "}
+                    <a
+                      href="https://github.com/vercel/ms?tab=readme-ov-file#examples"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary-700"
+                    >
+                      More
+                    </a>
+                  </span>
+                }
+              >
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center space-x-2">
+            {isTemporaryFieldValue && (
+              <Button
+                size="xs"
+                type="submit"
+                onClick={() => {
+                  handleSubmit(({ temporaryRange }) => {
+                    onSetTemporary({
+                      temporaryRange,
+                      temporaryAccessStartTime: new Date().toISOString()
+                    });
+                    handlePopUpToggle("setTempRole");
+                  })();
+                }}
+              >
+                Restart
+              </Button>
+            )}
+            {!isTemporaryFieldValue ? (
+              <Button
+                size="xs"
+                type="submit"
+                onClick={() =>
+                  handleSubmit(({ temporaryRange }) => {
+                    onSetTemporary({
+                      temporaryRange,
+                      temporaryAccessStartTime:
+                        defaultValues.temporaryAccessStartTime || new Date().toISOString()
+                    });
+                    handlePopUpToggle("setTempRole");
+                  })()
+                }
+              >
+                Grant access
+              </Button>
+            ) : (
+              <Button
+                size="xs"
+                variant="outline_bg"
+                colorSchema="danger"
+                onClick={() => {
+                  onRemoveTemporary();
+                  handlePopUpToggle("setTempRole");
+                }}
+              >
+                Revoke Access
+              </Button>
+            )}
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+const formSchema = z.record(
+  z.object({
+    isChecked: z.boolean().optional(),
+    temporaryAccess: z.union([
+      z.object({
+        isTemporary: z.literal(true),
+        temporaryRange: z.string().min(1),
+        temporaryAccessStartTime: z.string().datetime(),
+        temporaryAccessEndTime: z.string().datetime().nullable().optional()
+      }),
+      z.boolean()
+    ])
+  })
+);
+type TForm = z.infer<typeof formSchema>;
+
+export type TMemberRolesProp = {
+  disableEdit?: boolean;
+  membershipId: string;
+  onOpenUpgradeModal: (description: string) => void;
+  roles: TWorkspaceUser["roles"];
+};
+
+const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
+
+export const MemberRoles = ({
+  roles = [],
+  disableEdit = false,
+  membershipId,
+  onOpenUpgradeModal
+}: TMemberRolesProp) => {
+  const { currentWorkspace } = useWorkspace();
+  const { createNotification } = useNotificationContext();
+  const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
+  const [searchRoles, setSearchRoles] = useState("");
+  const { subscription } = useSubscription();
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    setValue,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TForm>({
+    resolver: zodResolver(formSchema)
+  });
+
+  const workspaceId = currentWorkspace?.id || "";
+
+  const { data: projectRoles, isLoading: isRolesLoading } = useGetProjectRoles(workspaceId);
+  const userRolesGroupBySlug = groupBy(roles, ({ customRoleSlug, role }) => customRoleSlug || role);
+
+  const updateMembershipRole = useUpdateUserWorkspaceRole();
+
+  const handleRoleUpdate = async (data: TForm) => {
+    const selectedRoles = Object.keys(data)
+      .filter((el) => Boolean(data[el].isChecked))
+      .map((el) => {
+        const isTemporary = Boolean(data[el].temporaryAccess);
+        if (!isTemporary) {
+          return { role: el, isTemporary: false as const };
+        }
+
+        const tempCfg = data[el].temporaryAccess as {
+          temporaryRange: string;
+          temporaryAccessStartTime: string;
+        };
+
+        return {
+          role: el,
+          isTemporary: true as const,
+          temporaryMode: ProjectUserMembershipTemporaryMode.Relative,
+          temporaryRange: tempCfg.temporaryRange,
+          temporaryAccessStartTime: tempCfg.temporaryAccessStartTime
+        };
+      });
+
+    const hasCustomRoleSelected = selectedRoles.some(
+      (el) => !Object.values(ProjectMembershipRole).includes(el.role as ProjectMembershipRole)
+    );
+
+    if (hasCustomRoleSelected && subscription && !subscription?.rbac) {
+      onOpenUpgradeModal(
+        "You can assign custom roles to members if you upgrade your Infisical plan."
+      );
+      return;
+    }
+
+    try {
+      await updateMembershipRole.mutateAsync({
+        workspaceId,
+        membershipId,
+        roles: selectedRoles
+      });
+      createNotification({ text: "Successfully updated role", type: "success" });
+      handlePopUpToggle("editRole");
+      setSearchRoles("");
+    } catch (err) {
+      createNotification({ text: "Failed to update role", type: "error" });
+    }
+  };
+
+  const formatRoleName = (role: string, customRoleName?: string) => {
+    if (role === ProjectMembershipRole.Custom) return customRoleName;
+    if (role === ProjectMembershipRole.Member) return "Developer";
+    return role;
+  };
+
+  return (
+    <div className="flex items-center space-x-2">
+      {roles
+        .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+        .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+          const isExpired = new Date() > new Date(temporaryAccessEndTime || ("" as string));
+          return (
+            <Tag key={id}>
+              <div className="flex items-center space-x-2">
+                <div>{formatRoleName(role, customRoleName)}</div>
+                {isTemporary && (
+                  <div>
+                    <Tooltip content={isExpired ? "Timed role expired" : "Timed role access"}>
+                      <FontAwesomeIcon
+                        icon={faClock}
+                        className={twMerge(isExpired && "text-red-600")}
+                      />
+                    </Tooltip>
+                  </div>
+                )}
+              </div>
+            </Tag>
+          );
+        })}
+      {roles.length > MAX_ROLES_TO_BE_SHOWN_IN_TABLE && (
+        <HoverCard>
+          <HoverCardTrigger>
+            <Tag>+{roles.length - MAX_ROLES_TO_BE_SHOWN_IN_TABLE}</Tag>
+          </HoverCardTrigger>
+          <HoverCardContent className="border border-gray-700 bg-mineshaft-800 p-4">
+            {roles
+              .slice(MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+              .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+                const isExpired = new Date() > new Date(temporaryAccessEndTime || ("" as string));
+                return (
+                  <Tag key={id} className="capitalize">
+                    <div className="flex items-center space-x-2">
+                      <div>{formatRoleName(role, customRoleName)}</div>
+                      {isTemporary && (
+                        <div>
+                          <Tooltip
+                            content={isExpired ? "Access expired" : "Temporary access"}
+                          >
+                            <FontAwesomeIcon
+                              icon={faClock}
+                              className={twMerge(
+                                new Date() > new Date(temporaryAccessEndTime as string) &&
+                                "text-red-600"
+                              )}
+                            />
+                          </Tooltip>
+                        </div>
+                      )}
+                    </div>
+                  </Tag>
+                );
+              })}{" "}
+          </HoverCardContent>
+        </HoverCard>
+      )}
+      <div>
+        <Popover
+          open={popUp.editRole.isOpen}
+          onOpenChange={(isOpen) => {
+            handlePopUpToggle("editRole", isOpen);
+            reset();
+          }}
+        >
+          {!disableEdit && (
+            <PopoverTrigger>
+              <IconButton size="sm" variant="plain" ariaLabel="update">
+                <FontAwesomeIcon icon={faEdit} />
+              </IconButton>
+            </PopoverTrigger>
+          )}
+          <PopoverContent hideCloseBtn className="pt-4">
+            {isRolesLoading ? (
+              <div className="flex h-8 w-full items-center justify-center">
+                <Spinner />
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit(handleRoleUpdate)} id="role-update-form">
+                <div className="thin-scrollbar max-h-80 space-y-4 overflow-y-auto">
+                  {projectRoles
+                    ?.filter(
+                      ({ name, slug }) =>
+                        name.toLowerCase().includes(searchRoles.toLowerCase()) ||
+                        slug.toLowerCase().includes(searchRoles.toLowerCase())
+                    )
+                    ?.map(({ id, name, slug }) => {
+                      const userProjectRoleDetails = userRolesGroupBySlug?.[slug]?.[0];
+
+                      return (
+                        <div key={id} className="flex items-center space-x-4">
+                          <div className="flex-grow">
+                            <Controller
+                              control={control}
+                              defaultValue={Boolean(userProjectRoleDetails?.id)}
+                              name={`${slug}.isChecked`}
+                              render={({ field }) => (
+                                <Checkbox
+                                  id={slug}
+                                  isChecked={field.value}
+                                  onCheckedChange={(isChecked) => {
+                                    field.onChange(isChecked);
+                                    setValue(`${slug}.temporaryAccess`, false);
+                                  }}
+                                >
+                                  {name}
+                                </Checkbox>
+                              )}
+                            />
+                          </div>
+                          <div>
+                            <Controller
+                              control={control}
+                              name={`${slug}.temporaryAccess`}
+                              defaultValue={
+                                userProjectRoleDetails?.isTemporary
+                                  ? {
+                                    isTemporary: true,
+                                    temporaryAccessStartTime:
+                                      userProjectRoleDetails.temporaryAccessStartTime as string,
+                                    temporaryRange:
+                                      userProjectRoleDetails.temporaryRange as string,
+                                    temporaryAccessEndTime:
+                                      userProjectRoleDetails.temporaryAccessEndTime
+                                  }
+                                  : false
+                              }
+                              render={({ field }) => (
+                                <TemporaryRoleForm
+                                  temporaryConfig={
+                                    typeof field.value === "boolean"
+                                      ? { isTemporary: field.value }
+                                      : field.value
+                                  }
+                                  onSetTemporary={(data) => {
+                                    setValue(`${slug}.isChecked`, true, { shouldDirty: true });
+                                    console.log(data);
+                                    field.onChange({ isTemporary: true, ...data });
+                                  }}
+                                  onRemoveTemporary={() => {
+                                    setValue(`${slug}.isChecked`, false, { shouldDirty: true });
+                                    field.onChange(false);
+                                  }}
+                                />
+                              )}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
+                </div>
+                <div className="mt-3 flex items-center space-x-2 border-t border-t-gray-700 pt-3">
+                  <div>
+                    <Input
+                      className="w-full p-1.5 pl-8"
+                      size="xs"
+                      value={searchRoles}
+                      onChange={(el) => setSearchRoles(el.target.value)}
+                      leftIcon={<FontAwesomeIcon icon={faSearch} />}
+                      placeholder="Search roles.."
+                    />
+                  </div>
+                  <div>
+                    <Button
+                      size="xs"
+                      type="submit"
+                      form="role-update-form"
+                      leftIcon={<FontAwesomeIcon icon={faCheck} />}
+                      isDisabled={!isDirty || isSubmitting}
+                      isLoading={isSubmitting}
+                    >
+                      Save
+                    </Button>
+                  </div>
+                </div>
+              </form>
+            )}
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+};

frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -9,6 +9,7 @@ import {
   faXmarkCircle
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Button, ContentLoader, EmptyState, IconButton, Tooltip } from "@app/components/v2";
@@ -170,9 +171,18 @@ export const SecretApprovalRequestChanges = ({
           <IconButton variant="outline_bg" ariaLabel="go-back" onClick={onGoBack}>
             <FontAwesomeIcon icon={faArrowLeft} />
           </IconButton>
-          <div className="flex items-center space-x-2 rounded-3xl bg-red-600 px-4 py-2 text-white">
+          <div
+            className={twMerge(
+              "flex items-center space-x-2 rounded-3xl px-4 py-2 text-white",
+              secretApprovalRequestDetails.status === "close" ? "bg-red-600" : "bg-green-600"
+            )}
+          >
             <FontAwesomeIcon icon={faCodeBranch} size="sm" />
-            <span>{secretApprovalRequestDetails.status}</span>
+            <span className="capitalize">
+              {secretApprovalRequestDetails.status === "close"
+                ? "closed"
+                : secretApprovalRequestDetails.status}
+            </span>
           </div>
           <div className="flex flex-grow flex-col">
             <div className="mb-1 text-lg">

frontend/src/views/SecretMainPage/SecretMainPage.tsx

@@ -1,10 +1,11 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/router";
 import { subject } from "@casl/ability";
 import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import NavHeader from "@app/components/navigation/NavHeader";
 import { PermissionDeniedBanner } from "@app/components/permissions";
 import { ContentLoader } from "@app/components/v2";
@@ -27,6 +28,7 @@ import {
   useGetWsTags
 } from "@app/hooks/api";
 
+import { ProjectIndexSecretsSection } from "../SecretOverviewPage/components/ProjectIndexSecretsSection";
 import { ActionBar } from "./components/ActionBar";
 import { CreateSecretForm } from "./components/CreateSecretForm";
 import { FolderListView } from "./components/FolderListView";
@@ -46,9 +48,10 @@ const LOADER_TEXT = [
 
 export const SecretMainPage = () => {
   const { t } = useTranslation();
-  const { currentWorkspace } = useWorkspace();
+  const { currentWorkspace, isLoading: isWorkspaceLoading } = useWorkspace();
   const router = useRouter();
   const { permission } = useProjectPermission();
+  const { createNotification } = useNotificationContext();
 
   const [isVisible, setIsVisible] = useState(false);
   const [sortDir, setSortDir] = useState<SortDir>(SortDir.ASC);
@@ -74,6 +77,20 @@ export const SecretMainPage = () => {
     ProjectPermissionSub.SecretRollback
   );
 
+  useEffect(() => {
+    if (
+      !isWorkspaceLoading &&
+      !currentWorkspace?.environments.find((env) => env.slug === environment) &&
+      router.isReady
+    ) {
+      router.push(`/project/${workspaceId}/secrets/overview`);
+      createNotification({
+        text: "No envronment found with given slug",
+        type: "error"
+      });
+    }
+  }, [isWorkspaceLoading, currentWorkspace, environment, router.isReady]);
+
   const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
 
   // fetch secrets
@@ -219,6 +236,7 @@ export const SecretMainPage = () => {
             protectionPolicyName={boardPolicy?.name}
           />
         </div>
+        <ProjectIndexSecretsSection decryptFileKey={decryptFileKey!} />
         {!isRollbackMode ? (
           <>
             <ActionBar

frontend/src/views/SecretMainPage/components/ActionBar/CreateSecretImportForm.tsx

@@ -81,7 +81,7 @@ export const CreateSecretImportForm = ({
       });
     } catch (err) {
       console.error(err);
-      const axiosError = err as AxiosError
+      const axiosError = err as AxiosError;
       if (axiosError?.response?.status === 401) {
         createNotification({
           text: "You do not have access to the selected environment/path",

frontend/src/views/SecretMainPage/components/SecretListView/CreateReminderForm.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faClock } from "@fortawesome/free-solid-svg-icons";
+import { faClock, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { twMerge } from "tailwind-merge";
@@ -9,20 +9,28 @@ import { z } from "zod";
 import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2";
 
 const ReminderFormSchema = z.object({
-  note: z.string().optional(),
+  note: z.string().optional().nullable(),
   days: z
     .number()
     .min(1, { message: "Must be at least 1 day" })
     .max(365, { message: "Must be less than 365 days" })
+    .nullable()
 });
 export type TReminderFormSchema = z.infer<typeof ReminderFormSchema>;
 
 interface ReminderFormProps {
   isOpen: boolean;
+  repeatDays?: number | null;
+  note?: string | null;
   onOpenChange: (isOpen: boolean, data?: TReminderFormSchema) => void;
 }
 
-export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps) => {
+export const CreateReminderForm = ({
+  isOpen,
+  onOpenChange,
+  repeatDays,
+  note
+}: ReminderFormProps) => {
   const {
     register,
     control,
@@ -31,32 +39,31 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps)
     handleSubmit,
     formState: { isSubmitting }
   } = useForm<TReminderFormSchema>({
+    defaultValues: {
+      days: repeatDays || undefined,
+      note: note || ""
+    },
     resolver: zodResolver(ReminderFormSchema)
   });
 
   const handleFormSubmit = async (data: TReminderFormSchema) => {
-    console.log(data);
     onOpenChange(false, data);
   };
 
   useEffect(() => {
     if (isOpen) {
-      reset();
+      reset({
+        days: repeatDays || undefined,
+        note: note || ""
+      });
     }
   }, [isOpen]);
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
       <ModalContent
-        title="Create secret reminder"
-        // ? QUESTION: Should this specifically say its for secret rotation?
-        // ? Or should we be call it something more generic?
-        subTitle={
-          <div>
-            Set up a reminder for when this secret should be rotated. Everyone with access to this
-            project will be notified when the reminder is triggered.
-          </div>
-        }
+        title={`${repeatDays ? "Update" : "Create"} reminder`}
+        subTitle="Set up a reminder for when this secret should be rotated. Everyone with access to this project will be notified when the reminder is triggered."
       >
         <form onSubmit={handleSubmit(handleFormSubmit)}>
           <div className="space-y-2">
@@ -68,7 +75,7 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps)
                   <>
                     <FormControl
                       className="mb-0"
-                      label="How many days between"
+                      label="Reminder Interval (in days)"
                       isError={Boolean(fieldState.error)}
                       errorText={fieldState.error?.message || ""}
                     >
@@ -76,6 +83,7 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps)
                         onChange={(el) => setValue("days", parseInt(el.target.value, 10))}
                         type="number"
                         placeholder="31"
+                        value={field.value || undefined}
                       />
                     </FormControl>
                     <div
@@ -84,7 +92,8 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps)
                         field.value ? "opacity-60" : "opacity-0"
                       )}
                     >
-                      Every {field.value > 1 ? `${field.value} days` : "day"}
+                      A reminder will be sent every{" "}
+                      {field.value && field.value > 1 ? `${field.value} days` : "day"}
                     </div>
                   </>
                 )}
@@ -102,17 +111,27 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps)
               />
             </FormControl>
           </div>
-          <div className="mt-7 flex items-center">
+          <div className="mt-7 flex items-center space-x-4">
             <Button
               isDisabled={isSubmitting}
               isLoading={isSubmitting}
               key="layout-create-project-submit"
-              className="mr-4"
+              className=""
               leftIcon={<FontAwesomeIcon icon={faClock} />}
               type="submit"
             >
-              Create reminder
+              {repeatDays ? "Update" : "Create"} reminder
             </Button>
+            {repeatDays && (
+              <Button
+                key="layout-cancel-create-project"
+                onClick={() => onOpenChange(false, { days: null, note: null })}
+                colorSchema="danger"
+                leftIcon={<FontAwesomeIcon icon={faTrash} />}
+              >
+                Delete reminder
+              </Button>
+            )}
             <Button
               key="layout-cancel-create-project"
               onClick={() => onOpenChange(false)}

frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx

@@ -5,6 +5,7 @@ import {
   faCheckCircle,
   faCircle,
   faCircleDot,
+  faClock,
   faPlus,
   faTag
 } from "@fortawesome/free-solid-svg-icons";
@@ -33,9 +34,11 @@ import {
   Tooltip
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
+import { useToggle } from "@app/hooks";
 import { useGetSecretVersion } from "@app/hooks/api";
 import { DecryptedSecret, UserWsKeyPair, WsTag } from "@app/hooks/api/types";
 
+import { CreateReminderForm } from "./CreateReminderForm";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
 
 type Props = {
@@ -147,262 +150,317 @@ export const SecretDetailSidebar = ({
     await onSaveSecret(secret, { ...secret, ...data }, () => reset());
   };
 
+  const [createReminderFormOpen, setCreateReminderFormOpen] = useToggle(false);
+
+  const secretReminderRepeatDays = watch("reminderRepeatDays");
+  const secretReminderNote = watch("reminderNote");
+
   return (
-    <Drawer
-      onOpenChange={(state) => {
-        if (isOpen && isDirty) {
-          if (
-            // eslint-disable-next-line no-alert
-            window.confirm("You have edited the secret. Are you sure you want to reset the change?")
-          ) {
-            onToggle(false);
-            reset();
-          } else return;
-        }
-        onToggle(state);
-      }}
-      isOpen={isOpen}
-    >
-      <DrawerContent title="Secret">
-        <form onSubmit={handleSubmit(handleFormSubmit)} className="h-full">
-          <div className="flex h-full flex-col">
-            <FormControl label="Key">
-              <Input isDisabled {...register("key")} />
-            </FormControl>
-            <ProjectPermissionCan
-              I={ProjectPermissionActions.Edit}
-              a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
-            >
-              {(isAllowed) => (
-                <Controller
-                  name="value"
-                  key="secret-value"
-                  control={control}
-                  render={({ field }) => (
-                    <FormControl label="Value">
-                      <SecretInput
-                        isReadOnly={isReadOnly}
-                        key="secret-value"
-                        isDisabled={isOverridden || !isAllowed}
-                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
-                        {...field}
-                        autoFocus={false}
-                      />
-                    </FormControl>
-                  )}
-                />
-              )}
-            </ProjectPermissionCan>
-            <div className="mb-2 border-b border-mineshaft-600 pb-4">
+    <>
+      <CreateReminderForm
+        repeatDays={secretReminderRepeatDays}
+        note={secretReminderNote}
+        isOpen={createReminderFormOpen}
+        onOpenChange={(_, data) => {
+          setCreateReminderFormOpen.toggle();
+
+          if (data) {
+            setValue("reminderRepeatDays", data.days, { shouldDirty: true });
+            setValue("reminderNote", data.note, { shouldDirty: true });
+          }
+        }}
+      />
+      <Drawer
+        onOpenChange={(state) => {
+          if (isOpen && isDirty) {
+            if (
+              // eslint-disable-next-line no-alert
+              window.confirm(
+                "You have edited the secret. Are you sure you want to reset the change?"
+              )
+            ) {
+              onToggle(false);
+              reset();
+            } else return;
+          }
+          onToggle(state);
+        }}
+        isOpen={isOpen}
+      >
+        <DrawerContent title="Secret">
+          <form onSubmit={handleSubmit(handleFormSubmit)} className="h-full">
+            <div className="flex h-full flex-col">
+              <FormControl label="Key">
+                <Input isDisabled {...register("key")} />
+              </FormControl>
               <ProjectPermissionCan
                 I={ProjectPermissionActions.Edit}
                 a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
               >
                 {(isAllowed) => (
-                  <Switch
-                    isDisabled={!isAllowed}
-                    id="personal-override"
-                    onCheckedChange={handleOverrideClick}
-                    isChecked={isOverridden}
-                  >
-                    Override with a personal value
-                  </Switch>
+                  <Controller
+                    name="value"
+                    key="secret-value"
+                    control={control}
+                    render={({ field }) => (
+                      <FormControl label="Value">
+                        <SecretInput
+                          isReadOnly={isReadOnly}
+                          key="secret-value"
+                          isDisabled={isOverridden || !isAllowed}
+                          containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
+                          {...field}
+                          autoFocus={false}
+                        />
+                      </FormControl>
+                    )}
+                  />
                 )}
               </ProjectPermissionCan>
-            </div>
-            {isOverridden && (
-              <Controller
-                name="valueOverride"
-                control={control}
-                render={({ field }) => (
-                  <FormControl label="Value Override">
-                    <SecretInput
-                      isReadOnly={isReadOnly}
-                      containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
-                      {...field}
-                    />
-                  </FormControl>
-                )}
-              />
-            )}
-            <FormControl label="Tags" className="">
-              <div className="grid auto-cols-min grid-flow-col gap-2 overflow-hidden pt-2">
-                {fields.map(({ tagColor, id: formId, name, id }) => (
-                  <Tag
-                    className="flex w-min items-center space-x-2"
-                    key={formId}
-                    onClose={() => {
-                      if (cannotEditSecret) {
-                        createNotification({ type: "error", text: "Access denied" });
-                        return;
-                      }
-                      const tag = tags?.find(({ id: tagId }) => id === tagId);
-                      if (tag) handleTagSelect(tag);
-                    }}
-                  >
-                    <div
-                      className="h-3 w-3 rounded-full"
-                      style={{ backgroundColor: tagColor || "#bec2c8" }}
-                    />
-                    <div className="text-sm">{name}</div>
-                  </Tag>
-                ))}
-                <DropdownMenu>
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Edit}
-                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
-                  >
-                    {(isAllowed) => (
-                      <DropdownMenuTrigger asChild>
-                        <IconButton
-                          ariaLabel="add"
-                          variant="outline_bg"
-                          size="xs"
-                          className="rounded-md"
-                          isDisabled={!isAllowed}
-                        >
-                          <FontAwesomeIcon icon={faPlus} />
-                        </IconButton>
-                      </DropdownMenuTrigger>
-                    )}
-                  </ProjectPermissionCan>
-                  <DropdownMenuContent align="end" className="z-[100]">
-                    <DropdownMenuLabel>Apply tags to this secrets</DropdownMenuLabel>
-                    {tags.map((tag) => {
-                      const { id: tagId, name, color } = tag;
-
-                      const isSelected = selectedTagsGroupById?.[tagId];
-                      return (
-                        <DropdownMenuItem
-                          onClick={() => handleTagSelect(tag)}
-                          key={tagId}
-                          icon={isSelected && <FontAwesomeIcon icon={faCheckCircle} />}
-                          iconPos="right"
-                        >
-                          <div className="flex items-center">
-                            <div
-                              className="mr-2 h-2 w-2 rounded-full"
-                              style={{ background: color || "#bec2c8" }}
-                            />
-                            {name}
-                          </div>
-                        </DropdownMenuItem>
-                      );
-                    })}
-                    <ProjectPermissionCan
-                      I={ProjectPermissionActions.Create}
-                      a={ProjectPermissionSub.Tags}
-                    >
-                      {(isAllowed) => (
-                        <DropdownMenuItem asChild>
-                          <Button
-                            size="xs"
-                            className="w-full"
-                            colorSchema="primary"
-                            variant="outline_bg"
-                            leftIcon={<FontAwesomeIcon icon={faTag} />}
-                            onClick={onCreateTag}
-                            isDisabled={!isAllowed}
-                          >
-                            Create a tag
-                          </Button>
-                        </DropdownMenuItem>
-                      )}
-                    </ProjectPermissionCan>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-            </FormControl>
-            <FormControl label="Comments & Notes">
-              <TextArea
-                className="border border-mineshaft-600 text-sm"
-                {...register("comment")}
-                readOnly={isReadOnly}
-                rows={5}
-              />
-            </FormControl>
-            <div className="my-2 mb-6 border-b border-mineshaft-600 pb-4">
-              <Controller
-                control={control}
-                name="skipMultilineEncoding"
-                render={({ field: { value, onChange, onBlur } }) => (
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Edit}
-                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
-                  >
-                    {(isAllowed) => (
-                      <Switch
-                        id="skipmultiencoding-option"
-                        onCheckedChange={(isChecked) => onChange(!isChecked)}
-                        isChecked={!value}
-                        onBlur={onBlur}
-                        isDisabled={!isAllowed}
-                        className="items-center"
-                      >
-                        Enable multi line encoding
-                        <Tooltip
-                          content="Infisical encodes multiline secrets by escaping newlines and wrapping in quotes. To disable, enable this option"
-                          className="z-[100]"
-                        >
-                          <FontAwesomeIcon icon={faCircleQuestion} className="ml-1" size="sm" />
-                        </Tooltip>
-                      </Switch>
-                    )}
-                  </ProjectPermissionCan>
-                )}
-              />
-            </div>
-            <div className="dark mb-4 flex-grow text-sm text-bunker-300">
-              <div className="mb-2">Version History</div>
-              <div className="flex h-48 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-bunker-800 p-2 dark:[color-scheme:dark]">
-                {secretVersion?.map(({ createdAt, value, id }, i) => (
-                  <div key={id} className="flex flex-col space-y-1">
-                    <div className="flex items-center space-x-2">
-                      <div>
-                        <FontAwesomeIcon icon={i === 0 ? faCircleDot : faCircle} size="sm" />
-                      </div>
-                      <div>{format(new Date(createdAt), "Pp")}</div>
-                    </div>
-                    <div className="ml-1.5 flex items-center space-x-2 border-l border-bunker-300 pl-4">
-                      <div className="self-start rounded-sm bg-primary-500/30 px-1">Value:</div>
-                      <div className="break-all font-mono">{value}</div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className="flex flex-col space-y-4">
-              <div className="flex items-center space-x-4">
+              <div className="mb-2 border-b border-mineshaft-600 pb-4">
                 <ProjectPermissionCan
                   I={ProjectPermissionActions.Edit}
                   a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
                 >
                   {(isAllowed) => (
-                    <Button
-                      isFullWidth
-                      type="submit"
-                      isDisabled={isSubmitting || !isDirty || !isAllowed}
-                      isLoading={isSubmitting}
+                    <Switch
+                      isDisabled={!isAllowed}
+                      id="personal-override"
+                      onCheckedChange={handleOverrideClick}
+                      isChecked={isOverridden}
                     >
-                      Save Changes
-                    </Button>
-                  )}
-                </ProjectPermissionCan>
-                <ProjectPermissionCan
-                  I={ProjectPermissionActions.Delete}
-                  a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
-                >
-                  {(isAllowed) => (
-                    <Button colorSchema="danger" isDisabled={!isAllowed} onClick={onDeleteSecret}>
-                      Delete
-                    </Button>
+                      Override with a personal value
+                    </Switch>
                   )}
                 </ProjectPermissionCan>
               </div>
+              {isOverridden && (
+                <Controller
+                  name="valueOverride"
+                  control={control}
+                  render={({ field }) => (
+                    <FormControl label="Value Override">
+                      <SecretInput
+                        isReadOnly={isReadOnly}
+                        containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800  px-2 py-1.5"
+                        {...field}
+                      />
+                    </FormControl>
+                  )}
+                />
+              )}
+              <FormControl label="Tags" className="">
+                <div className="grid auto-cols-min grid-flow-col gap-2 overflow-hidden pt-2">
+                  {fields.map(({ tagColor, id: formId, name, id }) => (
+                    <Tag
+                      className="flex w-min items-center space-x-2"
+                      key={formId}
+                      onClose={() => {
+                        if (cannotEditSecret) {
+                          createNotification({ type: "error", text: "Access denied" });
+                          return;
+                        }
+                        const tag = tags?.find(({ id: tagId }) => id === tagId);
+                        if (tag) handleTagSelect(tag);
+                      }}
+                    >
+                      <div
+                        className="h-3 w-3 rounded-full"
+                        style={{ backgroundColor: tagColor || "#bec2c8" }}
+                      />
+                      <div className="text-sm">{name}</div>
+                    </Tag>
+                  ))}
+                  <DropdownMenu>
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Edit}
+                      a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                    >
+                      {(isAllowed) => (
+                        <DropdownMenuTrigger asChild>
+                          <IconButton
+                            ariaLabel="add"
+                            variant="outline_bg"
+                            size="xs"
+                            className="rounded-md"
+                            isDisabled={!isAllowed}
+                          >
+                            <FontAwesomeIcon icon={faPlus} />
+                          </IconButton>
+                        </DropdownMenuTrigger>
+                      )}
+                    </ProjectPermissionCan>
+                    <DropdownMenuContent align="end" className="z-[100]">
+                      <DropdownMenuLabel>Add tags to this secret</DropdownMenuLabel>
+                      {tags.map((tag) => {
+                        const { id: tagId, name, color } = tag;
+
+                        const isSelected = selectedTagsGroupById?.[tagId];
+                        return (
+                          <DropdownMenuItem
+                            onClick={() => handleTagSelect(tag)}
+                            key={tagId}
+                            icon={isSelected && <FontAwesomeIcon icon={faCheckCircle} />}
+                            iconPos="right"
+                          >
+                            <div className="flex items-center">
+                              <div
+                                className="mr-2 h-2 w-2 rounded-full"
+                                style={{ background: color || "#bec2c8" }}
+                              />
+                              {name}
+                            </div>
+                          </DropdownMenuItem>
+                        );
+                      })}
+                      <ProjectPermissionCan
+                        I={ProjectPermissionActions.Create}
+                        a={ProjectPermissionSub.Tags}
+                      >
+                        {(isAllowed) => (
+                          <DropdownMenuItem asChild>
+                            <Button
+                              size="xs"
+                              className="w-full"
+                              colorSchema="primary"
+                              variant="outline_bg"
+                              leftIcon={<FontAwesomeIcon icon={faTag} />}
+                              onClick={onCreateTag}
+                              isDisabled={!isAllowed}
+                            >
+                              Create a tag
+                            </Button>
+                          </DropdownMenuItem>
+                        )}
+                      </ProjectPermissionCan>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </FormControl>
+              <FormControl label="Reminder">
+                {secretReminderRepeatDays && secretReminderRepeatDays > 0 ? (
+                  <div className="mt-2 ml-1 flex items-center justify-between">
+                    <div className="flex items-center space-x-2">
+                      <FontAwesomeIcon className="text-primary-500" icon={faClock} />
+                      <span className="text-sm text-bunker-300">
+                        Reminder every {secretReminderRepeatDays}{" "}
+                        {secretReminderRepeatDays > 1 ? "days" : "day"}
+                      </span>
+                    </div>
+                    <div>
+                      <Button
+                        className="px-2 py-1"
+                        variant="outline_bg"
+                        onClick={() => setCreateReminderFormOpen.on()}
+                      >
+                        Update
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="mt-2 ml-1 flex items-center space-x-2">
+                    <Button
+                      className="px-2 py-1"
+                      variant="outline_bg"
+                      leftIcon={<FontAwesomeIcon icon={faClock} />}
+                      onClick={() => setCreateReminderFormOpen.on()}
+                    >
+                      Create Reminder
+                    </Button>
+                  </div>
+                )}
+              </FormControl>
+              <FormControl label="Comments & Notes">
+                <TextArea
+                  className="border border-mineshaft-600 text-sm"
+                  {...register("comment")}
+                  readOnly={isReadOnly}
+                  rows={5}
+                />
+              </FormControl>
+              <div className="my-2 mb-6 border-b border-mineshaft-600 pb-4">
+                <Controller
+                  control={control}
+                  name="skipMultilineEncoding"
+                  render={({ field: { value, onChange, onBlur } }) => (
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Edit}
+                      a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                    >
+                      {(isAllowed) => (
+                        <Switch
+                          id="skipmultiencoding-option"
+                          onCheckedChange={(isChecked) => onChange(!isChecked)}
+                          isChecked={!value}
+                          onBlur={onBlur}
+                          isDisabled={!isAllowed}
+                          className="items-center"
+                        >
+                          Enable multi line encoding
+                          <Tooltip
+                            content="Infisical encodes multiline secrets by escaping newlines and wrapping in quotes. To disable, enable this option"
+                            className="z-[100]"
+                          >
+                            <FontAwesomeIcon icon={faCircleQuestion} className="ml-1" size="sm" />
+                          </Tooltip>
+                        </Switch>
+                      )}
+                    </ProjectPermissionCan>
+                  )}
+                />
+              </div>
+              <div className="dark mb-4 flex-grow text-sm text-bunker-300">
+                <div className="mb-2">Version History</div>
+                <div className="flex h-48 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-bunker-800 p-2 dark:[color-scheme:dark]">
+                  {secretVersion?.map(({ createdAt, value, id }, i) => (
+                    <div key={id} className="flex flex-col space-y-1">
+                      <div className="flex items-center space-x-2">
+                        <div>
+                          <FontAwesomeIcon icon={i === 0 ? faCircleDot : faCircle} size="sm" />
+                        </div>
+                        <div>{format(new Date(createdAt), "Pp")}</div>
+                      </div>
+                      <div className="ml-1.5 flex items-center space-x-2 border-l border-bunker-300 pl-4">
+                        <div className="self-start rounded-sm bg-primary-500/30 px-1">Value:</div>
+                        <div className="break-all font-mono">{value}</div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div className="flex flex-col space-y-4">
+                <div className="flex items-center space-x-4">
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Edit}
+                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                  >
+                    {(isAllowed) => (
+                      <Button
+                        isFullWidth
+                        type="submit"
+                        isDisabled={isSubmitting || !isDirty || !isAllowed}
+                        isLoading={isSubmitting}
+                      >
+                        Save Changes
+                      </Button>
+                    )}
+                  </ProjectPermissionCan>
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Delete}
+                    a={subject(ProjectPermissionSub.Secrets, { environment, secretPath })}
+                  >
+                    {(isAllowed) => (
+                      <Button colorSchema="danger" isDisabled={!isAllowed} onClick={onDeleteSecret}>
+                        Delete
+                      </Button>
+                    )}
+                  </ProjectPermissionCan>
+                </div>
+              </div>
             </div>
-          </div>
-        </form>
-      </DrawerContent>
-    </Drawer>
+          </form>
+        </DrawerContent>
+      </Drawer>
+    </>
   );
 };

frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx

@@ -1,24 +1,4 @@
 /* eslint-disable simple-import-sort/imports */
-import { memo, useEffect } from "react";
-import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { subject } from "@casl/ability";
-import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
-import {
-  faCheck,
-  faClock,
-  faClose,
-  faCodeBranch,
-  faComment,
-  faCopy,
-  faEllipsis,
-  faKey,
-  faTag,
-  faTags
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { AnimatePresence, motion } from "framer-motion";
-import { twMerge } from "tailwind-merge";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
@@ -48,9 +28,29 @@ import {
 import { useToggle } from "@app/hooks";
 import { DecryptedSecret } from "@app/hooks/api/secrets/types";
 import { WsTag } from "@app/hooks/api/types";
+import { subject } from "@casl/ability";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import {
+  faCheck,
+  faClock,
+  faClose,
+  faCodeBranch,
+  faComment,
+  faCopy,
+  faEllipsis,
+  faKey,
+  faTag,
+  faTags
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AnimatePresence, motion } from "framer-motion";
+import { memo, useEffect } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
 
-import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
 import { CreateReminderForm } from "./CreateReminderForm";
+import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
 
 type Props = {
   secret: DecryptedSecret;
@@ -104,16 +104,19 @@ export const SecretItem = memo(
       setValue,
       reset,
       getValues,
-      formState: { isDirty, isSubmitting }
+      trigger,
+      formState: { isDirty, isSubmitting, errors }
     } = useForm<TFormSchema>({
       defaultValues: secret,
       values: secret,
       resolver: zodResolver(formSchema)
     });
 
+    const secretReminderRepeatDays = watch("reminderRepeatDays");
+    const secretReminderNote = watch("reminderNote");
+
     const overrideAction = watch("overrideAction");
     const hasComment = Boolean(watch("comment"));
-    const hasReminder = Boolean(watch("reminderRepeatDays"));
 
     const selectedTags = watch("tags", []);
     const selectedTagsGroupById = selectedTags.reduce<Record<string, boolean>>(
@@ -191,6 +194,8 @@ export const SecretItem = memo(
     return (
       <>
         <CreateReminderForm
+          repeatDays={secretReminderRepeatDays}
+          note={secretReminderNote}
           isOpen={createReminderFormOpen}
           onOpenChange={(_, data) => {
             setCreateReminderFormOpen.toggle();
@@ -231,15 +236,18 @@ export const SecretItem = memo(
                 <Controller
                   name="key"
                   control={control}
-                  render={({ field }) => (
+                  render={({ field, fieldState: { error } }) => (
                     <Input
                       autoComplete="off"
                       isReadOnly={isReadOnly}
                       autoCapitalization={currentWorkspace?.autoCapitalization}
                       variant="plain"
                       isDisabled={isOverriden}
+                      placeholder={error?.message}
+                      isError={Boolean(error)}
+                      onKeyUp={() => trigger("key")}
                       {...field}
-                      className="w-full px-0 focus:text-bunker-100 focus:ring-transparent"
+                      className="w-full px-0 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
                     />
                   )}
                 />
@@ -317,7 +325,7 @@ export const SecretItem = memo(
                       )}
                     </ProjectPermissionCan>
                     <DropdownMenuContent align="end">
-                      <DropdownMenuLabel>Apply tags to this secrets</DropdownMenuLabel>
+                      <DropdownMenuLabel>Add tags to this secret</DropdownMenuLabel>
                       {tags.map((tag) => {
                         const { id: tagId, name, color } = tag;
 
@@ -380,22 +388,24 @@ export const SecretItem = memo(
                     <IconButton
                       className={twMerge(
                         "w-0 overflow-hidden p-0 group-hover:mr-2 group-hover:w-5 data-[state=open]:w-6",
-                        hasReminder && "w-5 text-primary"
+                        Boolean(secretReminderRepeatDays) && "w-5 text-primary"
                       )}
                       variant="plain"
                       size="md"
                       ariaLabel="add-reminder"
                     >
-                      <Tooltip content="Reminder">
+                      <Tooltip
+                        content={
+                          secretReminderRepeatDays && secretReminderRepeatDays > 0
+                            ? `Every ${secretReminderRepeatDays} day${
+                                Number(secretReminderRepeatDays) > 1 ? "s" : ""
+                              }
+                          `
+                            : "Reminder"
+                        }
+                      >
                         <FontAwesomeIcon
-                          onClick={() => {
-                            if (!hasReminder) {
-                              setCreateReminderFormOpen.on();
-                            } else {
-                              setValue("reminderRepeatDays", null, { shouldDirty: true });
-                              setValue("reminderNote", null, { shouldDirty: true });
-                            }
-                          }}
+                          onClick={() => setCreateReminderFormOpen.on()}
                           icon={faClock}
                         />
                       </Tooltip>
@@ -491,7 +501,7 @@ export const SecretItem = memo(
                     animate={{ x: 0, opacity: 1 }}
                     exit={{ x: -10, opacity: 0 }}
                   >
-                    <Tooltip content="Save">
+                    <Tooltip content={errors.key ? errors.key?.message : "Save"}>
                       <IconButton
                         ariaLabel="more"
                         variant="plain"
@@ -501,12 +511,16 @@ export const SecretItem = memo(
                           "p-0 text-primary opacity-0 group-hover:opacity-100",
                           isDirty && "opacity-100"
                         )}
-                        isDisabled={isSubmitting}
+                        isDisabled={isSubmitting || Boolean(errors.key)}
                       >
                         {isSubmitting ? (
                           <Spinner className="m-0 h-4 w-4 p-0" />
                         ) : (
-                          <FontAwesomeIcon icon={faCheck} size="lg" className="text-primary" />
+                          <FontAwesomeIcon
+                            icon={faCheck}
+                            size="lg"
+                            className={twMerge("text-primary", errors.key && "text-mineshaft-300")}
+                          />
                         )}
                       </IconButton>
                     </Tooltip>

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx

@@ -206,7 +206,7 @@ export const SecretListView = ({
         reminderRepeatDays,
         reminderNote
       } = modSecret;
-      const hasKeyChanged = oldKey !== key;
+      const hasKeyChanged = oldKey !== key && key;
 
       const tagIds = tags?.map(({ id }) => id);
       const oldTagIds = (orgSecret?.tags || []).map(({ id }) => id);

frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.utils.ts

@@ -8,7 +8,7 @@ export enum SecretActionType {
 }
 
 export const formSchema = z.object({
-  key: z.string().trim(),
+  key: z.string().trim().min(1, { message: "Secret key is required" }),
   value: z.string().transform((val) => (val.at(-1) === "\n" ? `${val.trim()}\n` : val.trim())),
   idOverride: z.string().trim().optional(),
   valueOverride: z

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -2,22 +2,35 @@ import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { subject } from "@casl/ability";
+import { faCheckCircle, faCircle } from "@fortawesome/free-regular-svg-icons";
 import {
+  faAngleDown,
   faArrowDown,
   faArrowUp,
   faFolderBlank,
-  faMagnifyingGlass
+  faFolderPlus,
+  faList,
+  faMagnifyingGlass,
+  faPlus
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import NavHeader from "@app/components/navigation/NavHeader";
-import { PermissionDeniedBanner } from "@app/components/permissions";
+import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
   EmptyState,
   IconButton,
   Input,
+  Modal,
+  ModalContent,
   Table,
   TableContainer,
   TableSkeleton,
@@ -29,7 +42,14 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
-import { useOrganization, useWorkspace } from "@app/context";
+import { UpgradeProjectAlert } from "@app/components/v2/UpgradeProjectAlert";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useOrganization,
+  useWorkspace
+} from "@app/context";
+import { usePopUp } from "@app/hooks";
 import {
   useCreateFolder,
   useCreateSecretV3,
@@ -39,10 +59,12 @@ import {
   useGetUserWsKey,
   useUpdateSecretV3
 } from "@app/hooks/api";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";
 
+import { FolderForm } from "../SecretMainPage/components/ActionBar/FolderForm";
+import { CreateSecretForm } from "./components/CreateSecretForm";
 import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
 import { ProjectIndexSecretsSection } from "./components/ProjectIndexSecretsSection";
-// import { ProjectIndexSecretsSection } from "./components/ProjectIndexSecretsSection";
 import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
 import { SecretOverviewTableRow } from "./components/SecretOverviewTableRow";
 
@@ -86,6 +108,11 @@ export const SecretOverviewPage = () => {
   }, [isWorkspaceLoading, workspaceId, router.isReady]);
 
   const userAvailableEnvs = currentWorkspace?.environments || [];
+  const [visibleEnvs, setVisibleEnvs] = useState(userAvailableEnvs);
+
+  useEffect(() => {
+    setVisibleEnvs(userAvailableEnvs);
+  }, [userAvailableEnvs]);
 
   const {
     data: secrets,
@@ -109,6 +136,40 @@ export const SecretOverviewPage = () => {
   const { mutateAsync: deleteSecretV3 } = useDeleteSecretV3();
   const { mutateAsync: createFolder } = useCreateFolder();
 
+  const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
+    "addSecretsInAllEnvs",
+    "addFolder",
+    "misc"
+  ] as const);
+
+  const handleFolderCreate = async (folderName: string) => {
+    const promises = userAvailableEnvs.map((env) => {
+      const environment = env.slug;
+      return createFolder({
+        name: folderName,
+        path: secretPath,
+        environment,
+        projectId: workspaceId
+      });
+    });
+
+    const results = await Promise.allSettled(promises);
+    const isFoldersAdded = results.some((result) => result.status === "fulfilled");
+
+    if (isFoldersAdded) {
+      handlePopUpClose("addFolder");
+      createNotification({
+        type: "success",
+        text: "Successfully created folder"
+      });
+    } else {
+      createNotification({
+        type: "error",
+        text: "Failed to create folder"
+      });
+    }
+  };
+
   const handleSecretCreate = async (env: string, key: string, value: string) => {
     try {
       // create folder if not existing
@@ -149,6 +210,14 @@ export const SecretOverviewPage = () => {
     }
   };
 
+  const handleEnvSelect = (envId: string) => {
+    if (visibleEnvs.map((env) => env.id).includes(envId)) {
+      setVisibleEnvs(visibleEnvs.filter((env) => env.id !== envId));
+    } else {
+      setVisibleEnvs(visibleEnvs.concat(userAvailableEnvs.filter((env) => env.id === envId)));
+    }
+  };
+
   const handleSecretUpdate = async (env: string, key: string, value: string, secretId?: string) => {
     try {
       await updateSecretV3({
@@ -225,7 +294,7 @@ export const SecretOverviewPage = () => {
       }
     }
     const query: Record<string, string> = { ...router.query, env: slug };
-    const envIndex = userAvailableEnvs.findIndex((el) => slug === el.slug);
+    const envIndex = visibleEnvs.findIndex((el) => slug === el.slug);
     if (envIndex !== -1) {
       router.push({
         pathname: "/project/[id]/secrets/[env]",
@@ -268,159 +337,315 @@ export const SecretOverviewPage = () => {
     filteredFolderNames?.length === 0;
 
   return (
-    <div className="container mx-auto px-6 text-mineshaft-50 dark:[color-scheme:dark]">
-      <ProjectIndexSecretsSection decryptFileKey={latestFileKey!} />
-      <div className="relative right-5 ml-4">
-        <NavHeader pageName={t("dashboard.title")} isProjectRelated />
-      </div>
-      <div className="mt-6">
-        <p className="text-3xl font-semibold text-bunker-100">Secrets Overview</p>
-        <p className="text-md text-bunker-300">
-          Inject your secrets using
-          <a
-            className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-            href="https://infisical.com/docs/cli/overview"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Infisical CLI
-          </a>
-          ,
-          <a
-            className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-            href="https://infisical.com/docs/documentation/getting-started/api"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Infisical API
-          </a>
-          ,
-          <a
-            className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-            href="https://infisical.com/docs/sdks/overview"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Infisical SDKs
-          </a>
-          , and
-          <a
-            className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
-            href="https://infisical.com/docs/documentation/getting-started/introduction"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            more
-          </a>
-          .
-        </p>
-      </div>
-      <div className="mt-8 flex items-center justify-between">
-        <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
-        <div className="w-80">
-          <Input
-            className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
-            placeholder="Search by secret/folder name..."
-            value={searchFilter}
-            onChange={(e) => setSearchFilter(e.target.value)}
-            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-          />
+    <>
+      <div className="container mx-auto px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+        <ProjectIndexSecretsSection decryptFileKey={latestFileKey!} />
+        <div className="relative right-5 ml-4">
+          <NavHeader pageName={t("dashboard.title")} isProjectRelated />
         </div>
-      </div>
-      <div className="thin-scrollbar mt-4" ref={parentTableRef}>
-        <TableContainer className="max-h-[calc(100vh-250px)] overflow-y-auto">
-          <Table>
-            <THead>
-              <Tr className="sticky top-0 z-20 border-0">
-                <Th className="sticky left-0 z-20 min-w-[20rem] border-b-0 p-0">
-                  <div className="flex items-center border-b border-r border-mineshaft-600 px-5 pt-3.5 pb-3">
-                    Name
+        <div className="space-y-8">
+          <div className="mt-6">
+            <p className="text-3xl font-semibold text-bunker-100">Secrets Overview</p>
+            <p className="text-md text-bunker-300">
+              Inject your secrets using
+              <a
+                className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                href="https://infisical.com/docs/cli/overview"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Infisical CLI
+              </a>
+              ,
+              <a
+                className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                href="https://infisical.com/docs/documentation/getting-started/api"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Infisical API
+              </a>
+              ,
+              <a
+                className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                href="https://infisical.com/docs/sdks/overview"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Infisical SDKs
+              </a>
+              , and
+              <a
+                className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                href="https://infisical.com/docs/documentation/getting-started/introduction"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                more
+              </a>
+              .
+            </p>
+          </div>
+
+          {currentWorkspace?.version === ProjectVersion.V1 && (
+            <UpgradeProjectAlert project={currentWorkspace} />
+          )}
+
+          <div className="flex items-center justify-between">
+            <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
+            <div className="flex flex-row items-center justify-center space-x-2">
+              {userAvailableEnvs.length > 0 && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
                     <IconButton
+                      ariaLabel="Environments"
                       variant="plain"
-                      className="ml-2"
-                      ariaLabel="sort"
-                      onClick={() => setSortDir((prev) => (prev === "asc" ? "desc" : "asc"))}
+                      size="sm"
+                      className="flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 hover:border-primary/60 hover:bg-primary/10"
                     >
-                      <FontAwesomeIcon icon={sortDir === "asc" ? faArrowDown : faArrowUp} />
+                      <Tooltip content="Choose visible environments" className="mb-2">
+                        <FontAwesomeIcon icon={faList} />
+                      </Tooltip>
                     </IconButton>
-                  </div>
-                </Th>
-                {userAvailableEnvs?.map(({ name, slug }, index) => {
-                  const envSecKeyCount = getEnvSecretKeyCount(slug);
-                  const missingKeyCount = secKeys.length - envSecKeyCount;
-                  return (
-                    <Th
-                      className="min-table-row min-w-[11rem] border-b-0 p-0 text-center"
-                      key={`secret-overview-${name}-${index + 1}`}
-                    >
-                      <div className="flex items-center justify-center border-b border-mineshaft-600 px-5 pt-3.5 pb-[0.83rem]">
-                        <button
-                          type="button"
-                          className="text-sm font-medium duration-100 hover:text-mineshaft-100"
-                          onClick={() => handleExploreEnvClick(slug)}
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
+                    {userAvailableEnvs.map((availableEnv) => {
+                      const { id: envId, name } = availableEnv;
+
+                      const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
+                      return (
+                        <DropdownMenuItem
+                          onClick={() => handleEnvSelect(envId)}
+                          key={envId}
+                          icon={
+                            isEnvSelected ? (
+                              <FontAwesomeIcon className="text-primary" icon={faCheckCircle} />
+                            ) : (
+                              <FontAwesomeIcon className="text-mineshaft-400" icon={faCircle} />
+                            )
+                          }
+                          iconPos="left"
                         >
-                          {name}
-                        </button>
-                        {missingKeyCount > 0 && (
-                          <Tooltip
-                            className="max-w-none lowercase"
-                            content={`${missingKeyCount} secrets missing\n compared to other environments`}
-                          >
-                            <div className="ml-2 flex h-[1.1rem] cursor-default items-center justify-center rounded-sm border border-red-400 bg-red-600 p-1 text-xs font-medium text-bunker-100">
-                              <span className="text-bunker-100">{missingKeyCount}</span>
-                            </div>
-                          </Tooltip>
-                        )}
-                      </div>
-                    </Th>
-                  );
-                })}
-              </Tr>
-            </THead>
-            <TBody>
-              {canViewOverviewPage && isTableLoading && (
-                <TableSkeleton
-                  columns={userAvailableEnvs.length + 1}
-                  innerKey="secret-overview-loading"
-                  rows={5}
-                  className="bg-mineshaft-700"
-                />
+                          <div className="flex items-center">{name}</div>
+                        </DropdownMenuItem>
+                      );
+                    })}
+                    {/* <DropdownMenuItem className="px-1.5" asChild>
+                    <Button
+                      size="xs"
+                      className="w-full"
+                      colorSchema="primary"
+                      variant="outline_bg"
+                      leftIcon={<FontAwesomeIcon icon={faHockeyPuck} />}
+                      // onClick={onCreateTag}
+                    >
+                      Create an environment
+                    </Button>
+                  </DropdownMenuItem> */}
+                  </DropdownMenuContent>
+                </DropdownMenu>
               )}
-              {isTableEmpty && !isTableLoading && (
-                <Tr>
-                  <Td colSpan={userAvailableEnvs.length + 1}>
-                    <EmptyState title="Let's add some secrets" icon={faFolderBlank} iconSize="3x">
-                      <Link
-                        href={{
-                          pathname: "/project/[id]/secrets/[env]",
-                          query: { id: workspaceId, env: userAvailableEnvs?.[0]?.slug }
-                        }}
+              <div className="w-80">
+                <Input
+                  className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
+                  placeholder="Search by secret/folder name..."
+                  value={searchFilter}
+                  onChange={(e) => setSearchFilter(e.target.value)}
+                  leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+                />
+              </div>
+              {userAvailableEnvs.length > 0 && (
+                <div>
+                  <ProjectPermissionCan
+                    I={ProjectPermissionActions.Create}
+                    a={subject(ProjectPermissionSub.Secrets, { secretPath })}
+                  >
+                    {(isAllowed) => (
+                      <Button
+                        variant="outline_bg"
+                        leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                        onClick={() => handlePopUpOpen("addSecretsInAllEnvs")}
+                        className="h-10 rounded-r-none"
+                        isDisabled={!isAllowed}
+                      >
+                        Add Secret
+                      </Button>
+                    )}
+                  </ProjectPermissionCan>
+                  <DropdownMenu
+                    open={popUp.misc.isOpen}
+                    onOpenChange={(isOpen) => handlePopUpToggle("misc", isOpen)}
+                  >
+                    <DropdownMenuTrigger asChild>
+                      <IconButton
+                        ariaLabel="add-folder-or-import"
+                        variant="outline_bg"
+                        className="rounded-l-none bg-mineshaft-600 p-3"
+                      >
+                        <FontAwesomeIcon icon={faAngleDown} />
+                      </IconButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <div className="flex flex-col space-y-1 p-1.5">
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Create}
+                          a={subject(ProjectPermissionSub.Secrets, { secretPath })}
+                        >
+                          {(isAllowed) => (
+                            <Button
+                              leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
+                              onClick={() => {
+                                handlePopUpOpen("addFolder");
+                                handlePopUpClose("misc");
+                              }}
+                              isDisabled={!isAllowed}
+                              variant="outline_bg"
+                              className="h-10"
+                              isFullWidth
+                            >
+                              Add Folder
+                            </Button>
+                          )}
+                        </ProjectPermissionCan>
+                      </div>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="thin-scrollbar mt-4" ref={parentTableRef}>
+          <TableContainer className="max-h-[calc(100vh-250px)] overflow-y-auto">
+            <Table>
+              <THead>
+                <Tr className="sticky top-0 z-20 border-0">
+                  <Th className="sticky left-0 z-20 min-w-[20rem] border-b-0 p-0">
+                    <div className="flex items-center border-b border-r border-mineshaft-600 px-5 pt-3.5 pb-3">
+                      Name
+                      <IconButton
+                        variant="plain"
+                        className="ml-2"
+                        ariaLabel="sort"
+                        onClick={() => setSortDir((prev) => (prev === "asc" ? "desc" : "asc"))}
+                      >
+                        <FontAwesomeIcon icon={sortDir === "asc" ? faArrowDown : faArrowUp} />
+                      </IconButton>
+                    </div>
+                  </Th>
+                  {visibleEnvs?.map(({ name, slug }, index) => {
+                    const envSecKeyCount = getEnvSecretKeyCount(slug);
+                    const missingKeyCount = secKeys.length - envSecKeyCount;
+                    return (
+                      <Th
+                        className="min-table-row min-w-[11rem] border-b-0 p-0 text-center"
+                        key={`secret-overview-${name}-${index + 1}`}
+                      >
+                        <div className="flex items-center justify-center border-b border-mineshaft-600 px-5 pt-3.5 pb-[0.83rem]">
+                          <button
+                            type="button"
+                            className="text-sm font-medium duration-100 hover:text-mineshaft-100"
+                            onClick={() => handleExploreEnvClick(slug)}
+                          >
+                            {name}
+                          </button>
+                          {missingKeyCount > 0 && (
+                            <Tooltip
+                              className="max-w-none lowercase"
+                              content={`${missingKeyCount} secrets missing\n compared to other environments`}
+                            >
+                              <div className="ml-2 flex h-[1.1rem] cursor-default items-center justify-center rounded-sm border border-red-400 bg-red-600 p-1 text-xs font-medium text-bunker-100">
+                                <span className="text-bunker-100">{missingKeyCount}</span>
+                              </div>
+                            </Tooltip>
+                          )}
+                        </div>
+                      </Th>
+                    );
+                  })}
+                </Tr>
+              </THead>
+              <TBody>
+                {canViewOverviewPage && isTableLoading && (
+                  <TableSkeleton
+                    columns={visibleEnvs.length + 1}
+                    innerKey="secret-overview-loading"
+                    rows={5}
+                    className="bg-mineshaft-700"
+                  />
+                )}
+                {userAvailableEnvs.length > 0 && visibleEnvs.length === 0 && (
+                  <Tr>
+                    <Td colSpan={visibleEnvs.length + 1}>
+                      <EmptyState title="You have no visible environments" iconSize="3x" />
+                    </Td>
+                  </Tr>
+                )}
+                {userAvailableEnvs.length === 0 && (
+                  <Tr>
+                    <Td colSpan={visibleEnvs.length + 1}>
+                      <EmptyState
+                        title="You have no environments, start by adding some"
+                        iconSize="3x"
+                      >
+                        <Link
+                          href={{
+                            pathname: "/project/[id]/settings",
+                            query: { id: workspaceId },
+                            hash: "environments"
+                          }}
+                        >
+                          <Button
+                            className="mt-4"
+                            variant="outline_bg"
+                            colorSchema="primary"
+                            size="md"
+                          >
+                            Add environments
+                          </Button>
+                        </Link>
+                      </EmptyState>
+                    </Td>
+                  </Tr>
+                )}
+                {isTableEmpty && !isTableLoading && visibleEnvs.length > 0 && (
+                  <Tr>
+                    <Td colSpan={visibleEnvs.length + 1}>
+                      <EmptyState
+                        title={
+                          searchFilter
+                            ? "No secret found for your search, add one now"
+                            : "Let's add some secrets"
+                        }
+                        icon={faFolderBlank}
+                        iconSize="3x"
                       >
                         <Button
                           className="mt-4"
                           variant="outline_bg"
                           colorSchema="primary"
                           size="md"
+                          onClick={() => handlePopUpOpen("addSecretsInAllEnvs")}
                         >
-                          Go to {userAvailableEnvs?.[0]?.name}
+                          Add Secrets
                         </Button>
-                      </Link>
-                    </EmptyState>
-                  </Td>
-                </Tr>
-              )}
-              {!isTableLoading &&
-                filteredFolderNames.map((folderName, index) => (
-                  <SecretOverviewFolderRow
-                    folderName={folderName}
-                    isFolderPresentInEnv={isFolderPresentInEnv}
-                    environments={userAvailableEnvs}
-                    key={`overview-${folderName}-${index + 1}`}
-                    onClick={handleFolderClick}
-                  />
-                ))}
-              {!isTableLoading &&
-                (userAvailableEnvs?.length > 0 ? (
+                      </EmptyState>
+                    </Td>
+                  </Tr>
+                )}
+                {!isTableLoading &&
+                  filteredFolderNames.map((folderName, index) => (
+                    <SecretOverviewFolderRow
+                      folderName={folderName}
+                      isFolderPresentInEnv={isFolderPresentInEnv}
+                      environments={visibleEnvs}
+                      key={`overview-${folderName}-${index + 1}`}
+                      onClick={handleFolderClick}
+                    />
+                  ))}
+                {!isTableLoading &&
+                  visibleEnvs?.length > 0 &&
                   filteredSecretNames.map((key, index) => (
                     <SecretOverviewTableRow
                       secretPath={secretPath}
@@ -428,43 +653,57 @@ export const SecretOverviewPage = () => {
                       onSecretDelete={handleSecretDelete}
                       onSecretUpdate={handleSecretUpdate}
                       key={`overview-${key}-${index + 1}`}
-                      environments={userAvailableEnvs}
+                      environments={visibleEnvs}
                       secretKey={key}
                       getSecretByKey={getSecretByKey}
                       expandableColWidth={expandableTableWidth}
                     />
-                  ))
-                ) : (
-                  <PermissionDeniedBanner />
-                ))}
-            </TBody>
-            <TFoot>
-              <Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
-                <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 p-0">
-                  <div
-                    className="w-full border-t border-r border-mineshaft-600"
-                    style={{ height: "45px" }}
-                  />
-                </Td>
-                {userAvailableEnvs.map(({ name, slug }) => (
-                  <Td key={`explore-${name}-btn`} className="border-0 border-mineshaft-600 p-0">
-                    <div className="flex w-full items-center justify-center border-r border-t border-mineshaft-600 px-5 py-2">
-                      <Button
-                        size="xs"
-                        variant="outline_bg"
-                        isFullWidth
-                        onClick={() => handleExploreEnvClick(slug)}
-                      >
-                        Explore
-                      </Button>
-                    </div>
+                  ))}
+              </TBody>
+              <TFoot>
+                <Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
+                  <Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 p-0">
+                    <div
+                      className="w-full border-t border-r border-mineshaft-600"
+                      style={{ height: "45px" }}
+                    />
                   </Td>
-                ))}
-              </Tr>
-            </TFoot>
-          </Table>
-        </TableContainer>
+                  {visibleEnvs?.map(({ name, slug }) => (
+                    <Td key={`explore-${name}-btn`} className="border-0 border-mineshaft-600 p-0">
+                      <div className="flex w-full items-center justify-center border-r border-t border-mineshaft-600 px-5 py-2">
+                        <Button
+                          size="xs"
+                          variant="outline_bg"
+                          isFullWidth
+                          onClick={() => handleExploreEnvClick(slug)}
+                        >
+                          Explore
+                        </Button>
+                      </div>
+                    </Td>
+                  ))}
+                </Tr>
+              </TFoot>
+            </Table>
+          </TableContainer>
+        </div>
       </div>
-    </div>
+      <CreateSecretForm
+        secretPath={secretPath}
+        isOpen={popUp.addSecretsInAllEnvs.isOpen}
+        getSecretByKey={getSecretByKey}
+        onTogglePopUp={(isOpen) => handlePopUpToggle("addSecretsInAllEnvs", isOpen)}
+        onClose={() => handlePopUpClose("addSecretsInAllEnvs")}
+        decryptFileKey={latestFileKey!}
+      />
+      <Modal
+        isOpen={popUp.addFolder.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("addFolder", isOpen)}
+      >
+        <ModalContent title="Create Folder">
+          <FolderForm onCreateFolder={handleFolderCreate} />
+        </ModalContent>
+      </Modal>
+    </>
   );
 };

frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -0,0 +1,232 @@
+import { Controller, useForm } from "react-hook-form";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalContent,
+  SecretInput,
+  Tooltip
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useCreateFolder, useCreateSecretV3, useUpdateSecretV3 } from "@app/hooks/api";
+import { DecryptedSecret, UserWsKeyPair } from "@app/hooks/api/types";
+
+const typeSchema = z
+  .object({
+    key: z.string().min(1, "Key is required"),
+    value: z.string().optional(),
+    environments: z.record(z.boolean().optional())
+  })
+  .refine((data) => data.key !== undefined, {
+    message: "Please enter secret name"
+  });
+
+type TFormSchema = z.infer<typeof typeSchema>;
+
+type Props = {
+  secretPath?: string;
+  decryptFileKey: UserWsKeyPair;
+  getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
+  // modal props
+  isOpen?: boolean;
+  onClose: () => void;
+  onTogglePopUp: (isOpen: boolean) => void;
+};
+
+export const CreateSecretForm = ({
+  secretPath = "/",
+  decryptFileKey,
+  isOpen,
+  getSecretByKey,
+  onClose,
+  onTogglePopUp
+}: Props) => {
+  const {
+    register,
+    handleSubmit,
+    control,
+    reset,
+    watch,
+    formState: { isSubmitting, errors }
+  } = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
+  const newSecretKey = watch("key");
+
+  const { currentWorkspace } = useWorkspace();
+  const workspaceId = currentWorkspace?.id || "";
+  const environments = currentWorkspace?.environments || [];
+
+  const { createNotification } = useNotificationContext();
+
+  const { mutateAsync: createSecretV3 } = useCreateSecretV3();
+  const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
+  const { mutateAsync: createFolder } = useCreateFolder();
+
+  const handleFormSubmit = async ({ key, value, environments: selectedEnv }: TFormSchema) => {
+    const environmentsSelected = environments.filter(({ slug }) => selectedEnv[slug]);
+    const isEnvironmentsSelected = environmentsSelected.length;
+
+    if (!isEnvironmentsSelected) {
+      createNotification({ type: "error", text: "Select at least one environment" });
+      return;
+    }
+
+    const promises = environmentsSelected.map(async (env) => {
+      const environment = env.slug;
+      // create folder if not existing
+      if (secretPath !== "/") {
+        // /hello/world -> [hello","world"]
+        const pathSegment = secretPath.split("/").filter(Boolean);
+        const parentPath = `/${pathSegment.slice(0, -1).join("/")}`;
+        const folderName = pathSegment.at(-1);
+        if (folderName && parentPath) {
+          await createFolder({
+            projectId: workspaceId,
+            path: parentPath,
+            environment,
+            name: folderName
+          });
+        }
+      }
+
+      const isEdit = getSecretByKey(environment, key) !== undefined;
+      if (isEdit) {
+        return updateSecretV3({
+          environment,
+          workspaceId,
+          secretPath,
+          secretName: key,
+          secretValue: value || "",
+          type: "shared",
+          latestFileKey: decryptFileKey
+        });
+      }
+
+      return createSecretV3({
+        environment,
+        workspaceId,
+        secretPath,
+        secretName: key,
+        secretValue: value || "",
+        secretComment: "",
+        type: "shared",
+        latestFileKey: decryptFileKey
+      });
+    });
+
+    const results = await Promise.allSettled(promises);
+    const isSecretsAdded = results.some((result) => result.status === "fulfilled");
+
+    if (isSecretsAdded) {
+      createNotification({
+        type: "success",
+        text: "Secrets created successfully"
+      });
+      onClose();
+      reset();
+    } else {
+      createNotification({
+        type: "error",
+        text: "Failed to create secrets"
+      });
+    }
+  };
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onTogglePopUp}>
+      <ModalContent
+        className="max-h-[80vh] overflow-y-auto"
+        title="Bulk Create & Update"
+        subTitle="Create & update a secret across many environments"
+      >
+        <form onSubmit={handleSubmit(handleFormSubmit)}>
+          <FormControl label="Key" isError={Boolean(errors?.key)} errorText={errors?.key?.message}>
+            <Input
+              {...register("key")}
+              placeholder="Type your secret name"
+              autoCapitalization={currentWorkspace?.autoCapitalization}
+            />
+          </FormControl>
+          <Controller
+            control={control}
+            name="value"
+            render={({ field }) => (
+              <FormControl
+                label="Value"
+                isError={Boolean(errors?.value)}
+                errorText={errors?.value?.message}
+              >
+                <SecretInput
+                  {...field}
+                  containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
+                />
+              </FormControl>
+            )}
+          />
+          <FormLabel label="Environments" className="mb-2" />
+          <div className="thin-scrollbar grid max-h-64 grid-cols-3 gap-4 overflow-auto py-2">
+            {environments.map((env) => {
+              return (
+                <Controller
+                  name={`environments.${env.slug}`}
+                  key={`secret-input-${env.slug}`}
+                  control={control}
+                  render={({ field }) => (
+                    <Checkbox
+                      isChecked={field.value}
+                      onCheckedChange={field.onChange}
+                      id={`secret-input-${env.slug}`}
+                      className="!justify-start"
+                    >
+                      <span className="flex w-full flex-row items-center justify-start whitespace-pre-wrap">
+                        <span title={env.name} className="truncate">
+                          {env.name}
+                        </span>
+                        <span>
+                          {getSecretByKey(env.slug, newSecretKey) && (
+                            <Tooltip
+                              className="max-w-[150px]"
+                              content="Secret already exists, and it will be overwritten"
+                            >
+                              <FontAwesomeIcon icon={faWarning} className="ml-1 text-yellow-400" />
+                            </Tooltip>
+                          )}
+                        </span>
+                      </span>
+                    </Checkbox>
+                  )}
+                />
+              );
+            })}
+          </div>
+          <div className="mt-7 flex items-center">
+            <Button
+              isDisabled={isSubmitting}
+              isLoading={isSubmitting}
+              key="layout-create-project-submit"
+              className="mr-4"
+              type="submit"
+            >
+              Create Secret
+            </Button>
+            <Button
+              key="layout-cancel-create-project"
+              onClick={onClose}
+              variant="plain"
+              colorSchema="secondary"
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/SecretOverviewPage/components/CreateSecretForm/index.tsx

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

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -15,6 +15,7 @@ import { useToggle } from "@app/hooks";
 import { DecryptedSecret } from "@app/hooks/api/secrets/types";
 
 import { SecretEditRow } from "./SecretEditRow";
+import SecretRenameRow from "./SecretRenameRow";
 
 type Props = {
   secretKey: string;
@@ -105,6 +106,13 @@ export const SecretOverviewTableRow = ({
                 width: `calc(${expandableColWidth}px - 1rem)`
               }}
             >
+              <SecretRenameRow
+                secretKey={secretKey}
+                environments={environments}
+                secretPath={secretPath}
+                getSecretByKey={getSecretByKey}
+              />
+
               <TableContainer>
                 <table className="secret-table">
                   <thead>
@@ -140,8 +148,13 @@ export const SecretOverviewTableRow = ({
                           key={`secret-expanded-${slug}-${secretKey}`}
                           className="hover:bg-mineshaft-700"
                         >
-                          <td className="flex" style={{ padding: "0.25rem 1rem" }}>
-                            <div className="flex h-8 items-center">{name}</div>
+                          <td
+                            className="flex h-full items-center"
+                            style={{ padding: "0.25rem 1rem" }}
+                          >
+                            <div title={name} className="flex h-8 w-[8rem] items-center ">
+                              <span className="truncate">{name}</span>
+                            </div>
                           </td>
                           <td className="col-span-2 h-8 w-full">
                             <SecretEditRow

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx

@@ -0,0 +1,258 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { subject } from "@casl/ability";
+import { faCheck, faClose, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AnimatePresence, motion } from "framer-motion";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { IconButton, Input, Spinner, Tooltip } from "@app/components/v2";
+import {
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useProjectPermission,
+  useWorkspace
+} from "@app/context";
+import { useToggle } from "@app/hooks";
+import { useGetUserWsKey, useUpdateSecretV3 } from "@app/hooks/api";
+import { DecryptedSecret } from "@app/hooks/api/types";
+import { SecretActionType } from "@app/views/SecretMainPage/components/SecretListView/SecretListView.utils";
+
+type Props = {
+  secretKey: string;
+  secretPath: string;
+  environments: { name: string; slug: string }[];
+  getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
+};
+
+export const formSchema = z.object({
+  key: z.string().trim().min(1, { message: "Secret key is required" })
+});
+
+type TFormSchema = z.infer<typeof formSchema>;
+
+function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }: Props) {
+  const { currentWorkspace } = useWorkspace();
+  const { permission } = useProjectPermission();
+  const { createNotification } = useNotificationContext();
+
+  const secrets = environments.map((env) => getSecretByKey(env.slug, secretKey));
+
+  const isReadOnly = environments.some((env) => {
+    const environment = env.slug;
+    const isSecretInEnvReadOnly =
+      permission.can(
+        ProjectPermissionActions.Read,
+        subject(ProjectPermissionSub.Secrets, { environment, secretPath })
+      ) &&
+      permission.cannot(
+        ProjectPermissionActions.Edit,
+        subject(ProjectPermissionSub.Secrets, { environment, secretPath })
+      );
+    if (isSecretInEnvReadOnly) {
+      return true;
+    }
+    return false;
+  });
+
+  const isOverriden = secrets.some(
+    (secret) =>
+      secret?.overrideAction === SecretActionType.Created ||
+      secret?.overrideAction === SecretActionType.Modified
+  );
+  const workspaceId = currentWorkspace?.id || "";
+
+  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
+
+  const [isSecNameCopied, setIsSecNameCopied] = useToggle(false);
+
+  const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
+
+  const {
+    handleSubmit,
+    control,
+    reset,
+    trigger,
+    getValues,
+    formState: { isDirty, isSubmitting, errors }
+  } = useForm<TFormSchema>({
+    defaultValues: { key: secretKey },
+    values: { key: secretKey },
+    resolver: zodResolver(formSchema)
+  });
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isSecNameCopied) {
+      timer = setTimeout(() => setIsSecNameCopied.off(), 2000);
+    }
+    return () => clearTimeout(timer);
+  }, [isSecNameCopied]);
+
+  const handleFormSubmit = async (data: TFormSchema) => {
+    if (!data.key) {
+      createNotification({
+        type: "error",
+        text: "Secret name cannot be empty"
+      });
+      return;
+    }
+
+    const promises = secrets
+      .filter((secret) => !!secret)
+      .map((secret) => {
+        if (!secret) return null;
+
+        return updateSecretV3({
+          environment: secret?.env,
+          workspaceId,
+          secretPath,
+          secretName: secret.key,
+          secretId: secret.id,
+          secretValue: secret.value || "",
+          type: "shared",
+          latestFileKey: decryptFileKey!,
+          tags: secret.tags.map((tag) => tag.id),
+          secretComment: secret.comment,
+          secretReminderRepeatDays: secret.reminderRepeatDays,
+          secretReminderNote: secret.reminderNote,
+          skipMultilineEncoding: secret.skipMultilineEncoding,
+          newSecretName: data.key
+        });
+      });
+
+    await Promise.all(promises)
+      .then(() => {
+        createNotification({
+          type: "success",
+          text: "Successfully renamed the secret"
+        });
+      })
+      .catch(() => {
+        createNotification({
+          type: "error",
+          text: "Error renaming the secret"
+        });
+      });
+  };
+
+  const copyTokenToClipboard = () => {
+    const [key] = getValues(["key"]);
+    navigator.clipboard.writeText(key as string);
+    setIsSecNameCopied.on();
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(handleFormSubmit)}
+      className="secret-table relative mb-2 flex w-full flex-row items-center justify-between overflow-hidden rounded-lg border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter"
+    >
+      <div className="flex h-11 flex-1 flex-shrink-0 items-center">
+        <span className="flex h-full min-w-[11rem] items-center justify-start border-r-2 border-mineshaft-600 px-4">
+          Key
+        </span>
+
+        <Controller
+          name="key"
+          control={control}
+          render={({ field, fieldState: { error } }) => (
+            <Input
+              autoComplete="off"
+              isReadOnly={isReadOnly}
+              autoCapitalization={currentWorkspace?.autoCapitalization}
+              variant="plain"
+              isDisabled={isOverriden}
+              placeholder={error?.message}
+              onKeyUp={() => trigger("key")}
+              isError={Boolean(error)}
+              {...field}
+              className="w-full px-2 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
+            />
+          )}
+        />
+      </div>
+
+      {isReadOnly || isOverriden ? (
+        <span className="mr-5 rounded-md bg-mineshaft-500 px-2">Read Only</span>
+      ) : (
+        <div className="group flex w-20 items-center justify-center border-l border-mineshaft-500 py-1">
+          <AnimatePresence exitBeforeEnter>
+            {!isDirty ? (
+              <motion.div
+                key="options"
+                className="flex flex-shrink-0 items-center space-x-4 px-3"
+                initial={{ x: 0, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                exit={{ x: 10, opacity: 0 }}
+              >
+                <Tooltip content="Copy secret name">
+                  <IconButton
+                    ariaLabel="copy-value"
+                    variant="plain"
+                    size="sm"
+                    className="p-0 opacity-0 group-hover:opacity-100"
+                    onClick={copyTokenToClipboard}
+                  >
+                    <FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} />
+                  </IconButton>
+                </Tooltip>
+              </motion.div>
+            ) : (
+              <motion.div
+                key="options-save"
+                className="flex flex-shrink-0 items-center space-x-4 px-3"
+                initial={{ x: -10, opacity: 0 }}
+                animate={{ x: 0, opacity: 1 }}
+                exit={{ x: -10, opacity: 0 }}
+              >
+                <Tooltip content={errors.key ? errors.key.message : "Save"}>
+                  <IconButton
+                    ariaLabel="more"
+                    variant="plain"
+                    type="submit"
+                    size="md"
+                    className={twMerge(
+                      "p-0 text-primary opacity-0 group-hover:opacity-100",
+                      isDirty && "opacity-100"
+                    )}
+                    isDisabled={isSubmitting || Boolean(errors.key)}
+                  >
+                    {isSubmitting ? (
+                      <Spinner className="m-0 h-4 w-4 p-0" />
+                    ) : (
+                      <FontAwesomeIcon
+                        icon={faCheck}
+                        size="lg"
+                        className={twMerge("text-primary", errors.key && "text-mineshaft-400")}
+                      />
+                    )}
+                  </IconButton>
+                </Tooltip>
+                <Tooltip content="Cancel">
+                  <IconButton
+                    ariaLabel="more"
+                    variant="plain"
+                    size="md"
+                    className={twMerge(
+                      "p-0 opacity-0 group-hover:opacity-100",
+                      isDirty && "opacity-100"
+                    )}
+                    onClick={() => reset()}
+                    isDisabled={isSubmitting}
+                  >
+                    <FontAwesomeIcon icon={faClose} size="lg" />
+                  </IconButton>
+                </Tooltip>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      )}
+    </form>
+  );
+}
+
+export default SecretRenameRow;

frontend/src/views/SecretRotationPage/SecretRotationPage.tsx

@@ -351,7 +351,7 @@ export const SecretRotationPage = withProjectPermission(
           {!isRotationProviderLoading &&
             secretRotationProviders?.providers.map((provider) => (
               <div
-                className="group relative flex h-32 cursor-pointer flex-row items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 hover:border-primary/40 hover:bg-primary/10"
+                className="group relative flex h-32 cursor-pointer flex-row items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 hover:border-primary/40 hover:bg-primary/10"
                 key={`infisical-rotation-provider-${provider.name}`}
                 tabIndex={0}
                 role="button"
@@ -362,8 +362,8 @@ export const SecretRotationPage = withProjectPermission(
               >
                 <img
                   src={`/images/secretRotation/${provider.image}`}
-                  height={70}
-                  width={70}
+                  className="max-h-16"
+                  style={{ maxWidth: "6rem" }}
                   alt="rotation provider logo"
                 />
                 <div className="ml-4 max-w-xs text-xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">

frontend/src/views/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx

@@ -90,7 +90,7 @@ export const CreateRotationForm = ({
       <ModalContent
         title={`Secret rotation for ${provider.name}`}
         subTitle="Provide the required inputs needed for the rotation"
-        className="max-w-2xl"
+        className="max-w-2xl max-h-screen overflow-scroll my-4"
       >
         <Stepper activeStep={wizardStep} direction="horizontal" className="mb-4">
           {WIZARD_STEPS.map(({ title, description }, index) => (

frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx

@@ -7,7 +7,7 @@ export const OrgSettingsPage = () => {
 
   return (
     <div className="flex justify-center bg-bunker-800 text-white w-full py-6">
-		<div className="max-w-7xl w-full px-6">
+		<div className="max-w-4xl w-full px-6">
 			<div className="mb-4">
 				<p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
 			</div>

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/LDAPModal.tsx

@@ -0,0 +1,229 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form"; 
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+    Button,
+    FormControl,
+    Input,
+    Modal,
+    ModalContent,
+    TextArea
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+    useCreateLDAPConfig,
+    useGetLDAPConfig,
+    useUpdateLDAPConfig
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const LDAPFormSchema = z.object({
+    url: z.string().default(""),
+    bindDN: z.string().default(""),
+    bindPass: z.string().default(""),
+    searchBase: z.string().default(""),
+    caCert: z.string().optional()
+});
+
+export type TLDAPFormData = z.infer<typeof LDAPFormSchema>;
+
+type Props = {
+  popUp: UsePopUpState<["addLDAP"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["addLDAP"]>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addLDAP"]>, state?: boolean) => void;
+};
+
+export const LDAPModal = ({
+    popUp,
+    handlePopUpClose,
+    handlePopUpToggle
+}: Props) => {
+    const { currentOrg } = useOrganization();
+    const { createNotification } = useNotificationContext();
+    const { mutateAsync: createMutateAsync, isLoading: createIsLoading } = useCreateLDAPConfig();
+    const { mutateAsync: updateMutateAsync, isLoading: updateIsLoading } = useUpdateLDAPConfig();
+    const { data } = useGetLDAPConfig(currentOrg?.id?? "");
+    
+    const {
+        control,
+        handleSubmit,
+        reset,
+    } = useForm<TLDAPFormData>({
+        resolver: zodResolver(LDAPFormSchema)
+    })
+    
+    useEffect(() => {
+        if (data) {
+            reset({
+                url: data?.url ?? "",
+                bindDN: data?.bindDN ?? "",
+                bindPass: data?.bindPass ?? "",
+                searchBase: data?.searchBase ?? "",
+                caCert: data?.caCert ?? ""
+            });
+        }
+    }, [data]);
+    
+    const onSSOModalSubmit = async ({
+        url,
+        bindDN,
+        bindPass,
+        searchBase,
+        caCert
+    }: TLDAPFormData) => {
+        try {
+            if (!currentOrg) return;
+            
+            if (!data) {
+                await createMutateAsync({
+                    organizationId: currentOrg.id,
+                    isActive: false,
+                    url,
+                    bindDN,
+                    bindPass,
+                    searchBase,
+                    caCert
+                });
+            } else {
+                await updateMutateAsync({
+                    organizationId: currentOrg.id,
+                    isActive: false,
+                    url,
+                    bindDN,
+                    bindPass,
+                    searchBase,
+                    caCert
+                });
+            }
+
+            handlePopUpClose("addLDAP");
+
+            createNotification({
+                text: `Successfully ${!data ? "added" : "updated"} LDAP configuration`,
+                type: "success"
+            });
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to ${!data ? "add" : "update"} LDAP configuration`,
+                type: "error"
+            });
+        }
+    }
+
+    return (
+        <Modal
+            isOpen={popUp?.addLDAP?.isOpen}
+                onOpenChange={(isOpen) => {
+                handlePopUpToggle("addLDAP", isOpen);
+                reset();
+            }}
+        >
+            <ModalContent title="Manage LDAP configuration">
+                <form onSubmit={handleSubmit(onSSOModalSubmit)}>
+                    <Controller
+                            control={control}
+                            name="url"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="URL"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        placeholder="ldaps://ldap.myorg.com:636"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="bindDN"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Bind DN"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        placeholder="cn=infisical,ou=Users,dc=example,dc=com"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="bindPass"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Bind Pass"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        type="password"
+                                        placeholder="********"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="searchBase"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="Search Base / User DN"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <Input 
+                                        {...field} 
+                                        placeholder="ou=people,dc=acme,dc=com"
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                        <Controller
+                            control={control}
+                            name="caCert"
+                            render={({ field, fieldState: { error } }) => (
+                                <FormControl
+                                    label="CA Certificate"
+                                    errorText={error?.message}
+                                    isError={Boolean(error)}
+                                >
+                                    <TextArea 
+                                        {...field} 
+                                        placeholder="-----BEGIN CERTIFICATE----- ..."
+                                    />
+                                </FormControl>
+                            )}
+                        />
+                    <div className="mt-8 flex items-center">
+                        <Button
+                            className="mr-4"
+                            size="sm"
+                            type="submit"
+                            isLoading={createIsLoading || updateIsLoading}
+                        >
+                            {!data ? "Add" : "Update"}
+                        </Button>
+                        <Button 
+                            colorSchema="secondary" 
+                            variant="plain"
+                            onClick={() => handlePopUpClose("addLDAP")}
+                        >
+                            Cancel
+                        </Button>
+                    </div>
+                </form>
+            </ModalContent>
+        </Modal>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx

@@ -2,14 +2,18 @@ import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { withPermission } from "@app/hoc";
 
 import { OrgGeneralAuthSection } from "./OrgGeneralAuthSection";
+import { OrgLDAPSection } from "./OrgLDAPSection";
+import { OrgScimSection } from "./OrgSCIMSection";
 import { OrgSSOSection } from "./OrgSSOSection";
 
 export const OrgAuthTab = withPermission(
   () => {
     return (
-      <div>
+      <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
         <OrgGeneralAuthSection />
         <OrgSSOSection />
+        <OrgLDAPSection />
+        <OrgScimSection />
       </div>
     );
   },

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx

@@ -1,16 +1,25 @@
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { Switch } from "@app/components/v2";
+import {
+    Switch,
+    UpgradePlanModal
+} from "@app/components/v2";
 import {
     OrgPermissionActions,
     OrgPermissionSubjects,
-    useOrganization 
+    useOrganization,
+    useSubscription
 } from "@app/context";
-import { useLogoutUser,useUpdateOrg } from "@app/hooks/api";
+import { useLogoutUser, useUpdateOrg } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
 
 export const OrgGeneralAuthSection = () => {
     const { createNotification } = useNotificationContext();
     const { currentOrg } = useOrganization();
+    const { subscription } = useSubscription();
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+        "upgradePlan"
+    ] as const);
     
     const { mutateAsync } = useUpdateOrg();
     
@@ -19,6 +28,10 @@ export const OrgGeneralAuthSection = () => {
     const handleEnforceOrgAuthToggle = async (value: boolean) => {
         try {
             if (!currentOrg?.id) return;
+            if (!subscription?.samlSSO) {
+                handlePopUpOpen("upgradePlan");
+                return;
+            }
             
             await mutateAsync({ 
                 orgId: currentOrg?.id, 
@@ -39,27 +52,51 @@ export const OrgGeneralAuthSection = () => {
         } catch (err) {
             console.error(err);
             createNotification({
-                text: `Failed to ${value ? "enforce" : "un-enforce"} org-level auth`,
+                text: (err as { response: { data: { message: string; }}}).response.data.message,
                 type: "error"
             });
         }
     }
 
     return (
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-            <h2 className="flex-1 text-xl font-semibold text-white mb-8">Settings</h2>
-            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
-                {(isAllowed) => (
-                    <Switch
-                        id="enforce-org-auth"
-                        onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
-                        isChecked={currentOrg?.authEnforced ?? false}
-                        isDisabled={!isAllowed}
-                    >
-                        Enforce SAML SSO
-                    </Switch>
-                )}
-            </OrgPermissionCan>
-        </div>
+        <>
+            {/* <div className="py-4">
+                <div className="mb-2 flex justify-between">
+                    <h3 className="text-md text-mineshaft-100">Allow users to send invites</h3>
+                    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+                        {(isAllowed) => (
+                            <Switch
+                                id="allow-org-invites"
+                                onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
+                                isChecked={currentOrg?.authEnforced ?? false}
+                                isDisabled={!isAllowed}
+                            />
+                        )}
+                    </OrgPermissionCan>
+                </div>
+                <p className="text-sm text-mineshaft-300">Allow members to invite new users to this organization</p>
+            </div> */}
+            <div className="py-4">
+                <div className="mb-2 flex justify-between"> 
+                    <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
+                    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+                        {(isAllowed) => (
+                            <Switch
+                                id="enforce-org-auth"
+                                onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
+                                isChecked={currentOrg?.authEnforced ?? false}
+                                isDisabled={!isAllowed}
+                            />
+                        )}
+                    </OrgPermissionCan>
+                </div>
+                <p className="text-sm text-mineshaft-300">Enforce members to authenticate via SAML to access this organization</p>
+            </div>
+            <UpgradePlanModal
+                isOpen={popUp.upgradePlan.isOpen}
+                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+                text="You can enforce SAML SSO if you switch to Infisical's Pro plan."
+            />
+        </>
     );
 }

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgLDAPSection.tsx

@@ -0,0 +1,139 @@
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  Switch,
+  UpgradePlanModal
+} from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription
+} from "@app/context";
+import { 
+    useCreateLDAPConfig,
+    useGetLDAPConfig,
+    useUpdateLDAPConfig
+} from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { LDAPModal } from "./LDAPModal";
+
+export const OrgLDAPSection = (): JSX.Element => {
+  const { currentOrg } = useOrganization();
+  const { subscription } = useSubscription();
+  const { createNotification } = useNotificationContext();
+  const { data } = useGetLDAPConfig(currentOrg?.id ?? "");
+  const { mutateAsync } = useUpdateLDAPConfig();
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "addLDAP",
+    "upgradePlan"
+  ] as const);
+  
+  const { mutateAsync: createMutateAsync } = useCreateLDAPConfig();
+
+  const handleLDAPToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+      if (!subscription?.ldap) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
+
+      await mutateAsync({
+        organizationId: currentOrg?.id,
+        isActive: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} LDAP`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${value ? "enable" : "disable"} LDAP`,
+        type: "error"
+      });
+    }
+  };
+
+  const addLDAPBtnClick = async () => {
+    try {
+      if (subscription?.ldap && currentOrg) {
+        if (!data) {
+          // case: LDAP is not configured
+          // -> initialize empty LDAP configuration
+          await createMutateAsync({
+            organizationId: currentOrg.id,
+            isActive: false,
+            url: "",
+            bindDN: "",
+            bindPass: "",
+            searchBase: "",
+          });
+        }
+
+        handlePopUpOpen("addLDAP");
+      } else {
+        handlePopUpOpen("upgradePlan");
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  return (
+    <>
+      <hr className="border-mineshaft-600" />
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">LDAP</h2>
+          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
+            {(isAllowed) => (
+              <Button
+                onClick={addLDAPBtnClick}
+                colorSchema="secondary"
+                isDisabled={!isAllowed}
+              >
+                Manage
+              </Button>
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">Manage LDAP authentication configuration</p>
+      </div>
+      {data && (
+        <div className="py-4">
+          <div className="mb-2 flex items-center justify-between">
+            <h2 className="text-md text-mineshaft-100">Enable LDAP</h2>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Ldap}>
+                {(isAllowed) => (
+                  <Switch
+                    id="enable-saml-sso"
+                    onCheckedChange={(value) => handleLDAPToggle(value)}
+                    isChecked={data ? data.isActive : false}
+                    isDisabled={!isAllowed}
+                  >
+                    Enable
+                  </Switch>
+                )}
+              </OrgPermissionCan>
+          </div>
+          <p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with LDAP</p>
+        </div>
+      )}
+        <LDAPModal
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <UpgradePlanModal
+            isOpen={popUp.upgradePlan.isOpen}
+            onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+            text="You can use LDAP authentication if you switch to Infisical's Enterprise plan."
+        />
+    </>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx

@@ -0,0 +1,117 @@
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { 
+    Button,
+    Switch,
+    UpgradePlanModal
+} from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  useOrganization,
+  useSubscription} from "@app/context";
+import { useUpdateOrg } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { ScimTokenModal } from "./ScimTokenModal";
+
+export const OrgScimSection = () => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    const { subscription } = useSubscription();
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+        "scimToken",
+        "deleteScimToken",
+        "upgradePlan"
+    ] as const);
+    
+    const { mutateAsync } = useUpdateOrg();
+    
+    const addScimTokenBtnClick = () => {
+        if (subscription?.scim) {
+            handlePopUpOpen("scimToken");
+        } else {
+            handlePopUpOpen("upgradePlan");
+        }
+    }
+    
+    const handleEnableSCIMToggle = async (value: boolean) => {
+        try {
+            if (!currentOrg?.id) return;
+            if (!subscription?.scim) {
+                handlePopUpOpen("upgradePlan");
+                return;
+            }
+            
+            await mutateAsync({
+                orgId: currentOrg?.id,
+                scimEnabled: value
+            });
+
+            createNotification({
+                text: `Successfully ${value ? "enabled" : "disabled"} SCIM provisioning`,
+                type: "success"
+            });
+        } catch (err) {
+            createNotification({
+                text: (err as { response: { data: { message: string; }}}).response.data.message,
+                type: "error"
+            });
+        }
+    }
+    
+    return (
+        <>
+            <hr className="border-mineshaft-600" />
+            <div className="py-4">
+                <div className="mb-2 flex justify-between items-center">
+                    <h2 className="text-md text-mineshaft-100">SCIM</h2>
+                    <OrgPermissionCan I={OrgPermissionActions.Read} a={OrgPermissionSubjects.Scim}>
+                    {(isAllowed) => (
+                        <Button
+                            onClick={addScimTokenBtnClick}
+                            colorSchema="secondary"
+                            isDisabled={!isAllowed}
+                        >
+                            Manage
+                        </Button>
+                    )}
+                </OrgPermissionCan>
+                </div>
+                <p className="text-sm text-mineshaft-300">Manage SCIM configuration</p>
+            </div>
+            <div className="py-4">
+                <div className="mb-2 flex justify-between items-center">
+                    <h2 className="text-md text-mineshaft-100">Enable SCIM</h2>
+                    <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Scim}>
+                        {(isAllowed) => (
+                            <Switch
+                                id="enable-scim"
+                                onCheckedChange={(value) => {
+                                    if (subscription?.scim) {
+                                        handleEnableSCIMToggle(value)
+                                    } else {
+                                        handlePopUpOpen("upgradePlan");
+                                    }
+                                }}
+                                isChecked={currentOrg?.scimEnabled ?? false}
+                                isDisabled={!isAllowed}
+                             />
+                        )}
+                    </OrgPermissionCan>
+                </div>
+                <p className="text-sm text-mineshaft-300">Allow member provisioning/deprovisioning with SCIM</p>
+            </div>
+            <ScimTokenModal 
+                popUp={popUp}
+                handlePopUpOpen={handlePopUpOpen}
+                handlePopUpToggle={handlePopUpToggle}
+            />
+            <UpgradePlanModal
+                isOpen={popUp.upgradePlan.isOpen}
+                onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+                text="You can use SCIM Provisioning if you switch to Infisical's Enterprise plan."
+            />
+        </>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx

@@ -1,7 +1,3 @@
-import { faPlus } 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 { OrgPermissionCan } from "@app/components/permissions";
 import { Button, Switch, UpgradePlanModal } from "@app/components/v2";
@@ -16,12 +12,6 @@ import { usePopUp } from "@app/hooks/usePopUp";
 
 import { SSOModal } from "./SSOModal";
 
-const ssoAuthProviderMap: { [key: string]: string } = {
-  "okta-saml": "Okta SAML",
-  "azure-saml": "Azure SAML",
-  "jumpcloud-saml": "JumpCloud SAML"
-};
-
 export const OrgSSOSection = (): JSX.Element => {
   const { currentOrg } = useOrganization();
   const { subscription } = useSubscription();
@@ -38,6 +28,11 @@ export const OrgSSOSection = (): JSX.Element => {
   const handleSamlSSOToggle = async (value: boolean) => {
     try {
       if (!currentOrg?.id) return;
+      
+      if (!subscription?.samlSSO) {
+        handlePopUpOpen("upgradePlan");
+        return;
+      }
 
       await mutateAsync({
         organizationId: currentOrg?.id,
@@ -83,74 +78,55 @@ export const OrgSSOSection = (): JSX.Element => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="mb-8 flex items-center">
-        <h2 className="flex-1 text-xl font-semibold text-white">SAML SSO Configuration</h2>
-        {!isLoading && (
-          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
-            {(isAllowed) => (
-              <Button
-                onClick={addSSOBtnClick}
-                colorSchema="secondary"
-                isDisabled={!isAllowed}
-                leftIcon={<FontAwesomeIcon icon={faPlus} />}
-              >
-                {data ? "Update SAML SSO" : "Set up SAML SSO"}
-              </Button>
-            )}
-          </OrgPermissionCan>
-        )}
-      </div>
-      {data && (
-        <div className="mb-4">
-          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
-            {(isAllowed) => (
-              <Switch
-                id="enable-saml-sso"
-                onCheckedChange={(value) => handleSamlSSOToggle(value)}
-                isChecked={data ? data.isActive : false}
-                isDisabled={!isAllowed}
-              >
-                Enable SAML SSO
-              </Switch>
-            )}
-          </OrgPermissionCan>
+    <>
+      <hr className="border-mineshaft-600" />
+      <div className="py-4">
+        <div className="mb-2 flex items-center justify-between">
+          <h2 className="text-md text-mineshaft-100">SAML</h2>
+          {!isLoading && (
+            <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Button
+                  onClick={addSSOBtnClick}
+                  colorSchema="secondary"
+                  isDisabled={!isAllowed}
+                >
+                  Manage
+                </Button>
+              )}
+            </OrgPermissionCan>
+          )}
         </div>
-      )}
-      <div className="mb-4">
-        <h3 className="text-sm text-mineshaft-400">SSO identifier</h3>
-        <p className="text-md text-gray-400">{data && data.id !== "" ? data.id : "-"}</p>
-      </div>
-      <div className="mb-4">
-        <h3 className="text-sm text-mineshaft-400">Type</h3>
-        <p className="text-md text-gray-400">
-          {data && data.authProvider !== "" ? ssoAuthProviderMap[data.authProvider] : "-"}
-        </p>
-      </div>
-      <div className="mb-4">
-        <h3 className="text-sm text-mineshaft-400">Entrypoint</h3>
-        <p className="text-md text-gray-400">
-          {data && data.entryPoint !== "" ? data.entryPoint : "-"}
-        </p>
-      </div>
-      <div className="mb-4">
-        <h3 className="text-sm text-mineshaft-400">Issuer</h3>
-        <p className="text-md text-gray-400">{data && data.issuer !== "" ? data.issuer : "-"}</p>
-      </div>
-      <div className="mb-4">
-        <h3 className="text-sm text-mineshaft-400">Last Logged In</h3>
-        <p className="text-md text-gray-400">{data?.lastUsed ? format(new Date(data?.lastUsed), "yyyy-MM-dd HH:mm:ss") : "-"}</p>
-      </div>
-      <SSOModal
-        popUp={popUp}
-        handlePopUpClose={handlePopUpClose}
-        handlePopUpToggle={handlePopUpToggle}
-      />
-      <UpgradePlanModal
-        isOpen={popUp.upgradePlan.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can use SAML SSO if you switch to Infisical's Pro plan."
-      />
-    </div>
+        <p className="text-sm text-mineshaft-300">Manage SAML authentication configuration</p>
+        </div>
+        <div className="py-4">
+          <div className="mb-2 flex items-center justify-between">
+            <h2 className="text-md text-mineshaft-100">Enable SAML</h2>
+            {!isLoading && (
+              <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+              {(isAllowed) => (
+                <Switch
+                  id="enable-saml-sso"
+                  onCheckedChange={(value) => handleSamlSSOToggle(value)}
+                  isChecked={data ? data.isActive : false}
+                  isDisabled={!isAllowed}
+                 />
+              )}
+            </OrgPermissionCan>
+            )}
+          </div>
+          <p className="text-sm text-mineshaft-300">Allow members to authenticate into Infisical with SAML</p>
+        </div>
+        <SSOModal
+          popUp={popUp}
+          handlePopUpClose={handlePopUpClose}
+          handlePopUpToggle={handlePopUpToggle}
+        />
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text="You can use SAML SSO if you switch to Infisical's Pro plan."
+        />
+    </>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/SSOModal.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
@@ -21,25 +21,27 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
 enum AuthProvider {
   OKTA_SAML = "okta-saml",
   AZURE_SAML = "azure-saml",
-  JUMPCLOUD_SAML = "jumpcloud-saml"
+  JUMPCLOUD_SAML = "jumpcloud-saml",
+  GOOGLE_SAML = "google-saml"
 }
 
 const ssoAuthProviders = [
   { label: "Okta SAML", value: AuthProvider.OKTA_SAML },
   { label: "Azure SAML", value: AuthProvider.AZURE_SAML },
-  { label: "JumpCloud SAML", value: AuthProvider.JUMPCLOUD_SAML }
+  { label: "JumpCloud SAML", value: AuthProvider.JUMPCLOUD_SAML },
+  { label: "Google SAML", value: AuthProvider.GOOGLE_SAML }
 ];
 
-const schema = yup
+const schema = z
   .object({
-    authProvider: yup.string().required("SSO Type is required"),
-    entryPoint: yup.string().required("IdP entrypoint is required"),
-    issuer: yup.string().required("Issuer string is required"),
-    cert: yup.string().required("IdP's public signing certificate is required")
+    authProvider: z.string().min(1, "SSO Type is required"),
+    entryPoint: z.string().default(""),
+    issuer: z.string().default(""),
+    cert: z.string().default("")
   })
   .required();
 
-export type AddSSOFormData = yup.InferType<typeof schema>;
+export type AddSSOFormData = z.infer<typeof schema>;
 
 type Props = {
   popUp: UsePopUpState<["addSSO"]>;
@@ -58,7 +60,7 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
     defaultValues: {
       authProvider: AuthProvider.OKTA_SAML
     },
-    resolver: yupResolver(schema)
+    resolver: zodResolver(schema)
   });
 
   useEffect(() => {
@@ -140,7 +142,15 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
           issuer: "IdP Entity ID",
           issuerPlaceholder: "xxx"
         };
-
+      case AuthProvider.GOOGLE_SAML:
+        return {
+          acsUrl: "ACS URL",
+          entityId: "SP Entity ID",
+          entryPoint: "SSO URL",
+          entryPointPlaceholder: "https://accounts.google.com/o/saml2/idp?idpid=xxx",
+          issuer: "IdP Entity ID",
+          issuerPlaceholder: "https://accounts.google.com/o/saml2/idp?idpid=xxx"
+        };
       default:
         return {
           acsUrl: "ACS URL",
@@ -163,7 +173,7 @@ export const SSOModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props)
         reset();
       }}
     >
-      <ModalContent title="Add SSO">
+      <ModalContent title="Manage SAML configuration">
         <form onSubmit={handleSubmit(onSSOModalSubmit)}>
           <Controller
             control={control}

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/ScimTokenModal.tsx

@@ -0,0 +1,343 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { faCheck, faCopy, faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { format } from "date-fns";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  DeleteActionModal,
+  EmptyState,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalContent,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useToggle } from "@app/hooks";
+import {
+    useCreateScimToken,
+    useDeleteScimToken,
+    useGetScimTokens} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = yup.object({
+  description: yup.string(),
+  ttlDays: yup.string().required("TTL is required")
+});
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["scimToken", "deleteScimToken"]>;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteScimToken"]>,
+    data?: {
+        scimTokenId: string;
+    }
+  ) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<
+      ["scimToken", "deleteScimToken"]
+    >,
+    state?: boolean
+  ) => void;
+};
+
+export const ScimTokenModal = ({
+  popUp,
+  handlePopUpOpen,
+  handlePopUpToggle
+}: Props) => {
+    const { currentOrg } = useOrganization();
+    const { t } = useTranslation();
+    const { createNotification } = useNotificationContext();
+    const [token, setToken] = useState("");
+
+    const [isScimUrlCopied, setIsScimUrlCopied] = useToggle(false);
+    const [isScimTokenCopied, setIsScimTokenCopied] = useToggle(false);
+    
+    const { data, isLoading } = useGetScimTokens(currentOrg?.id ?? "");
+    const { mutateAsync: createScimTokenMutateAsync  } = useCreateScimToken();
+    const { mutateAsync: deleteScimTokenMutateAsync  } = useDeleteScimToken();
+
+    const {
+        control,
+        handleSubmit,
+        reset,
+        formState: { isSubmitting }
+    } = useForm<FormData>({
+        resolver: yupResolver(schema),
+        defaultValues: {
+            description: "",
+            ttlDays: "365"
+        }
+    });
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (isScimUrlCopied) {
+      timer = setTimeout(() => setIsScimUrlCopied.off(), 2000);
+    }
+    
+    if (isScimTokenCopied) {
+      timer = setTimeout(() => setIsScimTokenCopied.off(), 2000);
+    }
+
+    return () => clearTimeout(timer);
+  }, [isScimTokenCopied, isScimUrlCopied]);
+
+  const onFormSubmit = async ({ description, ttlDays }: FormData) => {
+    try {
+        if (!currentOrg?.id) return;
+      
+        const { scimToken } = await createScimTokenMutateAsync({
+          organizationId: currentOrg.id,
+          description,
+          ttlDays: Number(ttlDays)
+        });
+        
+        setToken(scimToken);
+
+        createNotification({
+            text: "Successfully created SCIM token",
+            type: "success"
+        });
+    } catch (err) {
+        console.error(err);
+        createNotification({
+            text: "Failed to create SCIM token",
+            type: "error"
+        });
+    }
+  };
+
+  const onDeleteScimTokenSubmit = async (scimTokenId: string) => {
+    try {
+      if (!currentOrg?.id) return;
+      
+      await deleteScimTokenMutateAsync({
+          organizationId: currentOrg.id,
+          scimTokenId
+      });
+
+      handlePopUpToggle("deleteScimToken", false);
+
+      createNotification({
+        text: "Successfully deleted SCIM token",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete SCIM token",
+        type: "error"
+      });
+    }
+  };
+
+  const hasToken = Boolean(token);
+  const scimUrl = `${window.origin}/api/v1/scim`;
+
+  return (
+    <Modal
+      isOpen={popUp?.scimToken?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("scimToken", isOpen);
+        reset();
+        setToken("");
+      }}
+    >
+      <ModalContent title="Manage SCIM credentials">
+        <h2 className="mb-4">SCIM URL</h2>
+        <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+          <p className="mr-4 break-all">{scimUrl}</p>
+          <IconButton
+            ariaLabel="copy icon"
+            colorSchema="secondary"
+            className="group relative"
+            onClick={() => {
+                navigator.clipboard.writeText(scimUrl);
+                setIsScimUrlCopied.on();
+            }}
+          >
+            <FontAwesomeIcon icon={isScimUrlCopied ? faCheck : faCopy} />
+            <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+              {t("common.click-to-copy")}
+            </span>
+          </IconButton>
+        </div>
+        <h2 className="mb-4">New SCIM Token</h2>
+        {hasToken ? (
+          <div>
+            <div className="mb-4 flex items-center justify-between">
+              <p>We will only show this token once</p>
+              <Button
+                colorSchema="secondary"
+                type="submit"
+                onClick={() => {
+                  reset();
+                  setToken("");
+                }}
+              >
+                Got it
+              </Button>
+            </div>
+            <div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+              <p className="mr-4 break-all">{token}</p>
+              <IconButton
+                ariaLabel="copy icon"
+                colorSchema="secondary"
+                className="group relative"
+                onClick={() => {
+                    navigator.clipboard.writeText(token);
+                    setIsScimTokenCopied.on();
+                }}
+              >
+                <FontAwesomeIcon icon={isScimTokenCopied ? faCheck : faCopy} />
+                <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                  {t("common.click-to-copy")}
+                </span>
+              </IconButton>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit(onFormSubmit)} className="mb-8">
+            <Controller
+              control={control}
+              defaultValue=""
+              name="description"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Description (optional)"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="Description" />
+                </FormControl>
+              )}
+            />
+              <Controller
+                control={control}
+                defaultValue="365"
+                name="ttlDays"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl
+                    label="TTL (days)"
+                    isError={Boolean(error)}
+                    errorText={error?.message}
+                  >
+                    <div className="flex">
+                        <Input {...field} placeholder="0" type="number" min="0" step="1" />
+                        <Button
+                            className="ml-4"
+                            size="sm"
+                            type="submit"
+                            isLoading={isSubmitting}
+                            isDisabled={isSubmitting}
+                        >
+                            Create
+                        </Button>
+                    </div>
+                  </FormControl>
+                )}
+              />
+          </form>
+        )}
+        <h2 className="mb-4">SCIM Tokens</h2>
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th>Description</Th>
+                <Th>Expires At</Th>
+                <Th>Created At</Th>
+                <Th className="w-5" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isLoading && <TableSkeleton columns={4} innerKey="org-scim-tokens" />}
+              {!isLoading &&
+                data &&
+                data.length > 0 &&
+                data.map(
+                  ({
+                    id,
+                    description,
+                    ttlDays,
+                    createdAt
+                  }) => {
+                    
+                    let expiresAt;
+                    if (ttlDays > 0) {
+                      expiresAt = new Date(new Date(createdAt).getTime() + ttlDays * 86400 * 1000);
+                    }
+
+                    return (
+                      <Tr className="h-10 items-center" key={`mi-client-secret-${id}`}>
+                        <Td>{description === "" ? "-" : description}</Td>
+                        <Td>{expiresAt ? format(expiresAt, "yyyy-MM-dd HH:mm:ss") : "-"}</Td>
+                        <Td>{format(new Date(createdAt), "yyyy-MM-dd HH:mm:ss")}</Td>
+                        <Td>
+                          <IconButton
+                            onClick={() => {
+                              handlePopUpOpen("deleteScimToken", {
+                                scimTokenId: id
+                              });
+                            }}
+                            size="lg"
+                            colorSchema="primary"
+                            variant="plain"
+                            ariaLabel="update"
+                          >
+                            <FontAwesomeIcon icon={faXmark} />
+                          </IconButton>
+                        </Td>
+                      </Tr>
+                    );
+                  }
+                )}
+                {!isLoading && data && data?.length === 0 && (
+                    <Tr>
+                        <Td colSpan={4}>
+                            <EmptyState
+                            title="No SCIM tokens have been created yet"
+                            icon={faKey}
+                            />
+                        </Td>
+                    </Tr>
+                )}
+            </TBody>
+          </Table>
+        </TableContainer>
+        <DeleteActionModal
+          isOpen={popUp.deleteScimToken.isOpen}
+          title="Are you sure want to delete the SCIM token?"
+          onChange={(isOpen) => handlePopUpToggle("scimToken", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() => {
+        
+            const deleteScimTokenData = popUp?.deleteScimToken?.data as {
+                scimTokenId: string;
+            };
+
+            return onDeleteScimTokenSubmit(deleteScimTokenData.scimTokenId);
+          }}
+        />
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgDeleteSection/OrgDeleteSection.tsx

@@ -45,18 +45,21 @@ export const OrgDeleteSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Danger Zone</p>
-      <Button
-        isLoading={isLoading}
-        colorSchema="danger"
-        variant="outline_bg"
-        type="submit"
-        onClick={() => handlePopUpOpen("deleteOrg")}
-        isDisabled={Boolean(membership && membership.role !== "admin")}
-      >
-        {`Delete ${currentOrg?.name}`}
-      </Button>
+    <>
+      <hr className="border-mineshaft-600" />
+      <div className="py-4">
+        <p className="mb-4 text-md text-mineshaft-100">Danger Zone</p>
+        <Button
+          isLoading={isLoading}
+          colorSchema="danger"
+          variant="outline_bg"
+          type="submit"
+          onClick={() => handlePopUpOpen("deleteOrg")}
+          isDisabled={Boolean(membership && membership.role !== "admin")}
+        >
+          {`Delete ${currentOrg?.name}`}
+        </Button>
+      </div>
       <DeleteActionModal
         isOpen={popUp.deleteOrg.isOpen}
         title="Are you sure want to delete this organization?"
@@ -65,6 +68,6 @@ export const OrgDeleteSection = () => {
         deleteKey="confirm"
         onDeleteApproved={handleDeleteOrgSubmit}
       />
-    </div>
+    </>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgGeneralTab/OrgGeneralTab.tsx

@@ -3,15 +3,12 @@ import { useOrgPermission } from "@app/context";
 import { OrgDeleteSection } from "../OrgDeleteSection";
 import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
 import { OrgNameChangeSection } from "../OrgNameChangeSection";
-import { OrgSlugChangeSection } from "../OrgSlugChangeSection";
 
 export const OrgGeneralTab = () => {
   const { membership } = useOrgPermission();
-
   return (
-    <div>
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
       <OrgNameChangeSection />
-      <OrgSlugChangeSection />
       <OrgIncidentContactsSection />
       {membership && membership.role === "admin" && <OrgDeleteSection />}
     </div>

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsSection.tsx

@@ -18,9 +18,10 @@ export const OrgIncidentContactsSection = () => {
   const { permission } = useOrgPermission();
 
   return (
-    <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-      <div className="flex justify-between mb-4">
-        <p className="min-w-max text-xl font-semibold">{t("section.incident.incident-contacts")}</p>
+    <>
+      <hr className="border-mineshaft-600" />
+      <div className="flex items-center justify-between pt-4">
+        <p className="text-md text-mineshaft-100">{t("section.incident.incident-contacts")}</p>
         <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.IncidentAccount}>
           {(isAllowed) => (
             <Button
@@ -35,16 +36,18 @@ export const OrgIncidentContactsSection = () => {
           )}
         </OrgPermissionCan>
       </div>
-      {permission.can(OrgPermissionActions.Read, OrgPermissionSubjects.IncidentAccount) ? (
-        <OrgIncidentContactsTable />
-      ) : (
-        <PermissionDeniedBanner />
-      )}
+      <div className="py-4">
+        {permission.can(OrgPermissionActions.Read, OrgPermissionSubjects.IncidentAccount) ? (
+          <OrgIncidentContactsTable />
+        ) : (
+          <PermissionDeniedBanner />
+        )}
+      </div>
       <AddOrgIncidentContactModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}
         handlePopUpToggle={handlePopUpToggle}
       />
-    </div>
+    </>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -10,7 +10,12 @@ import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@a
 import { useUpdateOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name")
+  name: yup.string().required().label("Organization Name").max(64, "Too long, maximum length is 64 characters"),
+  slug: yup
+      .string()
+      .matches(/^[a-zA-Z0-9-]+$/, "Name must only contain alphanumeric characters or hyphens")
+      .required()
+      .label("Organization Slug")
 });
 
 type FormData = yup.InferType<typeof formSchema>;
@@ -25,40 +30,44 @@ export const OrgNameChangeSection = (): JSX.Element => {
 
   useEffect(() => {
     if (currentOrg) {
-      reset({ name: currentOrg.name });
+      reset({ 
+        name: currentOrg.name,
+        slug: currentOrg.slug
+      });
     }
   }, [currentOrg]);
 
-  const onFormSubmit = async ({ name }: FormData) => {
+  const onFormSubmit = async ({ name, slug }: FormData) => {
     try {
       if (!currentOrg?.id) return;
-      if (name === "") return;
 
-      await mutateAsync({ orgId: currentOrg?.id, name });
+      await mutateAsync({ 
+        orgId: currentOrg?.id, 
+        name,
+        slug
+      });
+      
       createNotification({
-        text: "Successfully renamed organization",
+        text: "Successfully updated organization details",
         type: "success"
       });
     } catch (error) {
       console.error(error);
       createNotification({
-        text: "Failed to rename organization",
+        text: "Failed to update organization details",
         type: "error"
       });
     }
   };
 
   return (
-    <form
-      onSubmit={handleSubmit(onFormSubmit)}
-      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-    >
-      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Organization Name</p>
-      <div className="mb-2 max-w-md">
+    <form onSubmit={handleSubmit(onFormSubmit)} className="py-4">
+      <div className="">
+        <h2 className="mb-2 text-md text-mineshaft-100">Organization Name</h2>
         <Controller
           defaultValue=""
           render={({ field, fieldState: { error } }) => (
-            <FormControl isError={Boolean(error)} errorText={error?.message}>
+            <FormControl isError={Boolean(error)} errorText={error?.message} className="max-w-md">
               <Input placeholder="Acme Corp" {...field} />
             </FormControl>
           )}
@@ -66,6 +75,19 @@ export const OrgNameChangeSection = (): JSX.Element => {
           name="name"
         />
       </div>
+      <div className="py-4">
+        <h2 className="mb-2 text-md text-mineshaft-100">Organization Slug</h2>
+        <Controller
+          defaultValue=""
+          render={({ field, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message} className="max-w-md">
+              <Input placeholder="acme" {...field} />
+            </FormControl>
+          )}
+          control={control}
+          name="slug"
+        />
+      </div>
       <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
         {(isAllowed) => (
           <Button
@@ -81,4 +103,4 @@ export const OrgNameChangeSection = (): JSX.Element => {
       </OrgPermissionCan>
     </form>
   );
-};
+};

frontend/src/views/Settings/OrgSettingsPage/components/OrgSlugChangeSection/OrgSlugChangeSection.tsx

@@ -1,88 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import { OrgPermissionCan } from "@app/components/permissions";
-import { Button, FormControl, Input } from "@app/components/v2";
-import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { useUpdateOrg } from "@app/hooks/api";
-
-const formSchema = yup.object({
-    slug: yup
-        .string()
-        .matches(/^[a-zA-Z0-9-]+$/, "Name must only contain alphanumeric characters or hyphens")
-        .required()
-        .label("Project Slug")
-});
-
-type FormData = yup.InferType<typeof formSchema>;
-
-export const OrgSlugChangeSection = (): JSX.Element => {
-    const { currentOrg } = useOrganization();
-    const { createNotification } = useNotificationContext();
-    const { handleSubmit, control, reset } = useForm<FormData>({
-        resolver: yupResolver(formSchema)
-    });
-    const { mutateAsync, isLoading } = useUpdateOrg();
-
-    useEffect(() => {
-        if (currentOrg) {
-            reset({ slug: currentOrg.slug });
-        }
-    }, [currentOrg]);
-
-    const onFormSubmit = async ({ slug }: FormData) => {
-        try {
-            if (!currentOrg?.id) return;
-            if (slug === "") return;
-
-            await mutateAsync({ orgId: currentOrg?.id, slug });
-            createNotification({
-                text: "Successfully updated organization slug",
-                type: "success"
-            });
-        } catch (error) {
-            console.error(error);
-            createNotification({
-                text: "Failed to update organization slug",
-                type: "error"
-            });
-        }
-    };
-    
-    return (
-        <form
-            onSubmit={handleSubmit(onFormSubmit)}
-            className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
-        >
-            <p className="mb-4 text-xl font-semibold text-mineshaft-100">Organization Slug</p>
-            <div className="mb-2 max-w-md">
-                <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                        <FormControl isError={Boolean(error)} errorText={error?.message}>
-                            <Input placeholder="acme" {...field} />
-                        </FormControl>
-                    )}
-                    control={control}
-                    name="slug"
-                />
-            </div>
-            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
-                {(isAllowed) => (
-                    <Button
-                        isLoading={isLoading}
-                        isDisabled={!isAllowed}
-                        colorSchema="primary"
-                        variant="outline_bg"
-                        type="submit"
-                    >
-                        Save
-                    </Button>
-                )}
-            </OrgPermissionCan>
-        </form>
-    );
-}

frontend/src/views/Settings/OrgSettingsPage/components/OrgSlugChangeSection/index.tsx

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

frontend/src/views/Settings/OrgSettingsPage/components/OrgTabGroup/OrgTabGroup.tsx

@@ -6,7 +6,7 @@ import { OrgGeneralTab } from "../OrgGeneralTab";
 
 const tabs = [
   { name: "General", key: "tab-org-general" },
-  { name: "Authentication", key: "tab-org-auth" }
+  { name: "Security", key: "tab-org-security" }
 ];
 export const OrgTabGroup = () => {
   return (

frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/APIKeySection.tsx

@@ -2,38 +2,36 @@ import { useTranslation } from "react-i18next";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Button } from "@app/components/v2";
+import { Button, Tooltip } from "@app/components/v2";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { AddAPIKeyModal } from "./AddAPIKeyModal";
 import { APIKeyTable } from "./APIKeyTable";
 
 export const APIKeySection = () => {
-    const { t } = useTranslation();
-    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
-        "addAPIKey"
-    ] as const);
+  const { t } = useTranslation();
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["addAPIKey"] as const);
 
-    return (
-        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-            <div className="flex justify-between mb-8">
-                <p className="text-xl font-semibold text-mineshaft-100">
-                    {t("settings.personal.api-keys.title")}
-                </p>
-                <Button
-                    colorSchema="secondary"
-                    type="submit"
-                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    onClick={() => handlePopUpOpen("addAPIKey")}
-                >
-                    Add API Key
-                </Button>
-            </div>
-            <APIKeyTable />
-            <AddAPIKeyModal 
-                popUp={popUp}
-                handlePopUpToggle={handlePopUpToggle}
-            />
-        </div>
-    );
-}
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">
+          {t("settings.personal.api-keys.title")}
+        </p>
+        <Tooltip content="API Keys are deprecated and will be removed in the future.">
+          <Button
+            isDisabled
+            colorSchema="secondary"
+            type="submit"
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            onClick={() => handlePopUpOpen("addAPIKey")}
+          >
+            Add API Key
+          </Button>
+        </Tooltip>
+      </div>
+      <APIKeyTable />
+      <AddAPIKeyModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+    </div>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/AddAPIKeyModal.tsx

@@ -170,7 +170,11 @@ export const AddAPIKeyModal = ({
                         >
                             Add
                         </Button>
-                        <Button colorSchema="secondary" variant="plain">
+                        <Button 
+                            colorSchema="secondary" 
+                            variant="plain" 
+                            onClick={() => handlePopUpToggle("addAPIKey", false)}
+                        >
                             Cancel
                         </Button>
                     </div>

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Modal.tsx

@@ -1,199 +0,0 @@
-import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form"; 
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
-
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-    Button,
-    FormControl,
-    IconButton,
-    Input,
-    Modal,
-    ModalContent} from "@app/components/v2";
-import { useToggle } from "@app/hooks";
-import {
-    useCreateAPIKeyV2,
-    useUpdateAPIKeyV2
-} from "@app/hooks/api";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-const schema = yup.object({
-    name: yup.string().required("API Key V2 name is required")
-}).required();
-
-export type FormData = yup.InferType<typeof schema>;
-
-type Props = {
-    popUp: UsePopUpState<["apiKeyV2"]>;
-    handlePopUpToggle: (popUpName: keyof UsePopUpState<["apiKeyV2"]>, state?: boolean) => void;
-};
-
-export const APIKeyV2Modal = ({
-    popUp,
-    handlePopUpToggle
-}: Props) => {
-    const [newAPIKey, setNewAPIKey] = useState("");
-    const [isAPIKeyCopied, setIsAPIKeyCopied] = useToggle(false);
-
-    const { createNotification } = useNotificationContext();
-    
-    const { mutateAsync: createMutateAsync } = useCreateAPIKeyV2();
-    const { mutateAsync: updateMutateAsync } = useUpdateAPIKeyV2();
-
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-    } = useForm<FormData>({
-        resolver: yupResolver(schema),
-        defaultValues: {
-            name: ""
-        }
-    });
-
-    useEffect(() => {
-        let timer: NodeJS.Timeout;
-
-        if (isAPIKeyCopied) {
-            timer = setTimeout(() => setIsAPIKeyCopied.off(), 2000);
-        }
-
-        return () => clearTimeout(timer);
-    }, [setIsAPIKeyCopied]);
-
-    useEffect(() => {
-        const apiKeyData = popUp?.apiKeyV2?.data as { 
-            apiKeyDataId: string;
-            name: string;
-        };
-        
-        if (apiKeyData) {
-            reset({
-                name: apiKeyData.name
-            });
-        } else {
-            reset({
-                name: ""
-            });
-        }
-    }, [popUp?.apiKeyV2?.data]);
-
-    const copyTokenToClipboard = () => {
-        navigator.clipboard.writeText(newAPIKey);
-        setIsAPIKeyCopied.on();
-    };
-
-    const onFormSubmit = async ({
-        name
-    }: FormData) => {
-        try {
-            const apiKeyData = popUp?.apiKeyV2?.data as { 
-                apiKeyDataId: string;
-                name: string;
-            };
-            
-            if (apiKeyData) {
-                // update
-
-                await updateMutateAsync({
-                    apiKeyDataId: apiKeyData.apiKeyDataId,
-                    name
-                });
-
-                handlePopUpToggle("apiKeyV2", false);
-            } else {
-                // create
-
-                const { apiKey } = await createMutateAsync({
-                    name
-                });
-                
-                setNewAPIKey(apiKey);
-            }
-            
-            createNotification({
-                text: `Successfully ${popUp?.apiKeyV2?.data ? "updated" : "created"} API Key`,
-                type: "success"
-            });
-        
-            reset();
-            
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: `Failed to ${popUp?.apiKeyV2?.data ? "updated" : "created"} API Key`,
-                type: "error"
-            });
-        }
-    }
-
-    const hasAPIKey = Boolean(newAPIKey);
-
-    return (
-        <Modal
-            isOpen={popUp?.apiKeyV2?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("apiKeyV2", isOpen);
-                reset();
-                setNewAPIKey("");
-            }}
-        >
-            <ModalContent title={`${popUp?.apiKeyV2?.data ? "Update" : "Create"} API Key V2`}>
-                {!hasAPIKey ? (
-                    <form onSubmit={handleSubmit(onFormSubmit)}>
-                        <Controller
-                            control={control}
-                            defaultValue=""
-                            name="name"
-                            render={({ field, fieldState: { error } }) => (
-                                <FormControl
-                                    label="Name"
-                                    isError={Boolean(error)}
-                                    errorText={error?.message}
-                                >
-                                <Input 
-                                    {...field} 
-                                    placeholder="My API Key"
-                                />
-                                </FormControl>
-                            )}
-                        />
-                        <div className="mt-8 flex items-center">
-                            <Button
-                                className="mr-4"
-                                size="sm"
-                                type="submit"
-                                isLoading={isSubmitting}
-                                isDisabled={isSubmitting}
-                            >
-                                {popUp?.apiKeyV2?.data ? "Update" : "Create"}
-                            </Button>
-                            <Button colorSchema="secondary" variant="plain">
-                                Cancel
-                            </Button>
-                        </div>
-                    </form>
-                ) : (
-                    <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
-                        <p className="mr-4 break-all">{newAPIKey}</p>
-                        <IconButton
-                            ariaLabel="copy icon"
-                            colorSchema="secondary"
-                            className="group relative"
-                            onClick={copyTokenToClipboard}
-                        >
-                            <FontAwesomeIcon icon={isAPIKeyCopied ? faCheck : faCopy} />
-                            <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-                                Click to copy
-                            </span>
-                        </IconButton>
-                    </div>
-                )}
-            </ModalContent>
-        </Modal>
-    );
-}

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Section.tsx

@@ -1,81 +0,0 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-    Button,
-    DeleteActionModal
-} from "@app/components/v2";
-import { useDeleteAPIKeyV2 } from "@app/hooks/api";
-import { usePopUp } from "@app/hooks/usePopUp";
-
-import { APIKeyV2Modal } from "./APIKeyV2Modal";
-import { APIKeyV2Table } from "./APIKeyV2Table";
-
-export const APIKeyV2Section = () => {
-    const { createNotification } = useNotificationContext();
-    const { mutateAsync: deleteMutateAsync } = useDeleteAPIKeyV2();
-    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
-        "apiKeyV2",
-        "deleteAPIKeyV2"
-    ] as const);
-    
-    const onDeleteAPIKeyDataSubmit = async (apiKeyDataId: string) => {
-        try {
-            await deleteMutateAsync({
-                apiKeyDataId
-            });
-            
-            createNotification({
-                text: "Successfully deleted API Key V2",
-                type: "success"
-            });
-            
-            handlePopUpClose("deleteAPIKeyV2");
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to delete API Key V2",
-                type: "error"
-            });
-        }
-      }
-
-    return (
-        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
-            <div className="flex justify-between mb-8">
-                <p className="text-xl font-semibold text-mineshaft-100">
-                    API Keys V2 (Beta)
-                </p>
-                <Button
-                    colorSchema="secondary"
-                    type="submit"
-                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    onClick={() => handlePopUpOpen("apiKeyV2")}
-                >
-                    Add API Key
-                </Button>
-            </div>
-            <APIKeyV2Table 
-                handlePopUpOpen={handlePopUpOpen}
-            />
-            <APIKeyV2Modal
-                popUp={popUp}
-                handlePopUpToggle={handlePopUpToggle}
-            />
-            <DeleteActionModal
-                isOpen={popUp.deleteAPIKeyV2.isOpen}
-                title={`Are you sure want to delete ${
-                (popUp?.deleteAPIKeyV2?.data as { name: string })?.name || ""
-                }?`}
-                onChange={(isOpen) => handlePopUpToggle("deleteAPIKeyV2", isOpen)}
-                deleteKey="confirm"
-                onDeleteApproved={() => 
-                    onDeleteAPIKeyDataSubmit(
-                        (popUp?.deleteAPIKeyV2?.data as { apiKeyDataId: string })?.apiKeyDataId
-                    )
-                }
-            />
-        </div>
-    );
-}

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/APIKeyV2Table.tsx

@@ -1,98 +0,0 @@
-import { faKey, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { format } from "date-fns";
-
-import {
-  EmptyState,
-  IconButton,
-  Table,
-  TableContainer,
-  TableSkeleton,
-  TBody,
-  Td,
-  Th,
-  THead,
-  Tr
-} from "@app/components/v2";
-import { useGetMyAPIKeysV2 } from "@app/hooks/api";
-import { UsePopUpState } from "@app/hooks/usePopUp";
-
-type Props = {
-  handlePopUpOpen: (
-    popUpName: keyof UsePopUpState<["deleteAPIKeyV2", "apiKeyV2"]>,
-    data?: {
-      apiKeyDataId?: string;
-      name?: string;
-    }
-  ) => void;
-};
-
-export const APIKeyV2Table = ({ handlePopUpOpen }: Props) => {
-  const { data, isLoading } = useGetMyAPIKeysV2();
-  return (
-    <TableContainer>
-      <Table>
-        <THead>
-          <Tr>
-            <Th className="">Name</Th>
-            <Th className="">Last Used</Th>
-            <Th className="">Created At</Th>
-            <Th className="w-5" />
-          </Tr>
-        </THead>
-        <TBody>
-          {isLoading && <TableSkeleton columns={4} innerKey="api-keys-v2" />}
-          {!isLoading &&
-            data &&
-            data.length > 0 &&
-            data.map(({ id, name, lastUsed, createdAt }) => {
-              return (
-                <Tr className="h-10" key={`api-key-v2-${id}`}>
-                  <Td>{name}</Td>
-                  <Td>{lastUsed ? format(new Date(lastUsed), "yyyy-MM-dd") : "-"}</Td>
-                  <Td>{format(new Date(createdAt), "yyyy-MM-dd")}</Td>
-                  <Td className="flex justify-end">
-                    <IconButton
-                      onClick={async () => {
-                        handlePopUpOpen("apiKeyV2", {
-                          apiKeyDataId: id,
-                          name
-                        });
-                      }}
-                      size="lg"
-                      colorSchema="primary"
-                      variant="plain"
-                      ariaLabel="update"
-                    >
-                      <FontAwesomeIcon icon={faPencil} />
-                    </IconButton>
-                    <IconButton
-                      onClick={() => {
-                        handlePopUpOpen("deleteAPIKeyV2", {
-                          apiKeyDataId: id
-                        });
-                      }}
-                      size="lg"
-                      colorSchema="danger"
-                      variant="plain"
-                      ariaLabel="update"
-                      className="ml-4"
-                    >
-                      <FontAwesomeIcon icon={faXmark} />
-                    </IconButton>
-                  </Td>
-                </Tr>
-              );
-            })}
-          {!isLoading && data && data?.length === 0 && (
-            <Tr>
-              <Td colSpan={4}>
-                <EmptyState title="No API key v2 on file" icon={faKey} />
-              </Td>
-            </Tr>
-          )}
-        </TBody>
-      </Table>
-    </TableContainer>
-  );
-};

frontend/src/views/Settings/PersonalSettingsPage/APIKeyV2Section/index.tsx

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

frontend/src/views/Settings/PersonalSettingsPage/ChangePasswordSection/ChangePasswordSection.tsx

@@ -48,8 +48,6 @@ export const ChangePasswordSection = () => {
 
   const onFormSubmit = async ({ oldPassword, newPassword }: FormData) => {
     try {
-      if (!user?.email) return;
-
       const errorCheck = await checkPassword({
         password: newPassword,
         setErrors
@@ -59,7 +57,7 @@ export const ChangePasswordSection = () => {
 
       setIsLoading(true);
       await attemptChangePassword({
-        email: user.email,
+        email: user.username,
         currentPassword: oldPassword,
         newPassword
       });

frontend/src/views/Settings/PersonalSettingsPage/PersonalAPIKeyTab/PersonalAPIKeyTab.tsx

@@ -1,11 +1,5 @@
 import { APIKeySection } from "../APIKeySection";
-// import { APIKeyV2Section } from "../APIKeyV2Section";
 
 export const PersonalAPIKeyTab = () => {
-    return (
-        <>
-            {/* <APIKeyV2Section /> */}
-            <APIKeySection />
-        </>
-    );
-}
+  return <APIKeySection />;
+};

frontend/src/views/Settings/PersonalSettingsPage/PersonalAuthTab/PersonalAuthTab.tsx

@@ -1,12 +1,22 @@
+import {
+    useGetUser
+} from "@app/hooks/api";
+import { AuthMethod } from "@app/hooks/api/users/types";
+
 import { AuthMethodSection } from "../AuthMethodSection";
 import { ChangePasswordSection } from "../ChangePasswordSection";
 import { MFASection } from "../SecuritySection";
 
 export const PersonalAuthTab = () => {
+    const { data: user } = useGetUser();
     return (
         <div>
-            <MFASection />
-            <AuthMethodSection />
+            {user && !user.authMethods.includes(AuthMethod.LDAP) && (
+                <>
+                    <MFASection />
+                    <AuthMethodSection />
+                </>
+            )}
             <ChangePasswordSection />
         </div>
     );

frontend/src/views/Settings/PersonalSettingsPage/PersonalGeneralTab/PersonalGeneralTab.tsx

@@ -1,4 +1,3 @@
-import { ChangeLanguageSection } from "../ChangeLanguageSection";
 import { DeleteAccountSection } from "../DeleteAccountSection";
 import { EmergencyKitSection } from "../EmergencyKitSection";
 import { SessionsSection } from "../SessionsSection";
@@ -8,10 +7,9 @@ export const PersonalGeneralTab = () => {
     return (
         <div>
             <UserNameSection />
-            <ChangeLanguageSection />
             <SessionsSection />
             <EmergencyKitSection />
             <DeleteAccountSection />
         </div>
     );
-}
+}

frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/PersonalTabGroup.tsx

@@ -1,44 +1,68 @@
-import { Fragment } from "react"
-import { Tab } from "@headlessui/react"
+import { Fragment } from "react";
+import Link from "next/link";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tab } from "@headlessui/react";
 
 import { PersonalAPIKeyTab } from "../PersonalAPIKeyTab";
 import { PersonalAuthTab } from "../PersonalAuthTab";
 import { PersonalGeneralTab } from "../PersonalGeneralTab";
 
 const tabs = [
-    { name: "General", key: "tab-account-general" },
-    { name: "Authentication", key: "tab-account-auth" },
-    { name: "API Keys", key: "tab-account-api-keys" }
+  { name: "General", key: "tab-account-general" },
+  { name: "Authentication", key: "tab-account-auth" },
+  { name: "API Keys", key: "tab-account-api-keys" }
 ];
 
 export const PersonalTabGroup = () => {
-    return (
-        <Tab.Group>
-            <Tab.List className="mb-4 border-b-2 border-mineshaft-800 w-full">
-                {tabs.map((tab) => (
-                    <Tab as={Fragment} key={tab.key}> 
-                        {({ selected }) => (
-                            <button 
-                                type="button"
-                                className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
-                            >
-                                {tab.name}
-                            </button>
-                        )}
-                    </Tab>
-                ))}
-            </Tab.List>
-            <Tab.Panels>
-                <Tab.Panel>
-                    <PersonalGeneralTab />
-                </Tab.Panel>
-                <Tab.Panel>
-                    <PersonalAuthTab />
-                </Tab.Panel>
-                <Tab.Panel>
-                    <PersonalAPIKeyTab />
-                </Tab.Panel>
-            </Tab.Panels>
-        </Tab.Group>
-    );
-}
+  return (
+    <Tab.Group>
+      <Tab.List className="mb-4 w-full border-b-2 border-mineshaft-800">
+        {tabs.map((tab) => (
+          <Tab as={Fragment} key={tab.key}>
+            {({ selected }) => (
+              <button
+                type="button"
+                className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
+                  selected ? "border-b border-white text-white" : "text-mineshaft-400"
+                }`}
+              >
+                {tab.name}
+              </button>
+            )}
+          </Tab>
+        ))}
+      </Tab.List>
+      <Tab.Panels>
+        <Tab.Panel>
+          <PersonalGeneralTab />
+        </Tab.Panel>
+        <Tab.Panel>
+          <PersonalAuthTab />
+        </Tab.Panel>
+        <Tab.Panel>
+          <div className="space-y-3">
+            <div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white">
+              <FontAwesomeIcon icon={faWarning} className="pr-6 text-4xl text-white/80" />
+              <div className="flex w-full flex-col text-sm">
+                <span className="mb-4 text-lg font-semibold">Deprecation Notice</span>
+                <p>
+                  API Keys are deprecated and will be removed in the future.
+                  <br /> Please use Machine Identity authentication for your applications and
+                  services.
+                </p>
+                <Link href="https://infisical.com/docs/documentation/platform/identities/overview">
+                  <a target="_blank" className="font-semibold text-primary-400">
+                    Learn more about Machine Identities
+                  </a>
+                </Link>
+              </div>
+            </div>
+
+            <PersonalAPIKeyTab />
+          </div>
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+};

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx

@@ -4,6 +4,7 @@ import {
   useGetUser,
   useUpdateMfaEnabled} from "@app/hooks/api";
 import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import { AuthMethod } from "@app/hooks/api/users/types";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 export const MFASection = () => {
@@ -18,6 +19,15 @@ export const MFASection = () => {
   
   const toggleMfa = async (state: boolean) => {
     try {
+      if (!user) return;
+      if (user.authMethods.includes(AuthMethod.LDAP)) {
+        createNotification({
+          text: "Two-factor authentication is not available for LDAP users.",
+          type: "error"
+        });
+        return;
+      }
+      
       const newUser = await mutateAsync({
         isMfaEnabled: state
       });

frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx

@@ -6,6 +6,7 @@ import {
 import { Alert, AlertDescription, Checkbox } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useGetUserWsKey, useGetWorkspaceBot, useUpdateBotActiveStatus } from "@app/hooks/api";
+import { ProjectVersion } from "@app/hooks/api/workspace/types";
 
 export const E2EESection = () => {
   const { currentWorkspace } = useWorkspace();
@@ -20,6 +21,7 @@ export const E2EESection = () => {
    * 3. Encrypt project key with bot's public key
    * 4. Send encrypted project key to backend and set bot status to active
    */
+
   const toggleBotActivate = async () => {
     let botKey;
     try {
@@ -75,7 +77,9 @@ export const E2EESection = () => {
     }
   };
 
-  return bot ? (
+  if (!currentWorkspace) return null;
+
+  return bot && currentWorkspace.version === ProjectVersion.V1 ? (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <p className="mb-3 text-xl font-semibold">End-to-End Encryption</p>
       <p className="mb-8 text-gray-400">

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx

@@ -63,7 +63,10 @@ export const EnvironmentSection = () => {
   };
 
   return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div
+      id="environments"
+      className="mb-6 scroll-m-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+    >
       <div className="mb-8 flex justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">Environments</p>
         <div>

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/CopyButton.tsx

@@ -0,0 +1,52 @@
+import { useCallback } from "react";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+
+type Props = {
+  value: string;
+  hoverText: string;
+  notificationText: string;
+  children: React.ReactNode;
+};
+
+export const CopyButton = ({ value, children, hoverText, notificationText }: Props) => {
+  const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
+  const { createNotification } = useNotificationContext();
+
+  const copyToClipboard = useCallback(() => {
+    if (isProjectIdCopied) {
+      return;
+    }
+
+    setIsProjectIdCopied.on();
+    navigator.clipboard.writeText(value);
+
+    createNotification({
+      text: notificationText,
+      type: "success"
+    });
+
+    const timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
+
+    // eslint-disable-next-line consistent-return
+    return () => clearTimeout(timer);
+  }, [isProjectIdCopied]);
+
+  return (
+    <Button
+      colorSchema="secondary"
+      className="group relative"
+      leftIcon={<FontAwesomeIcon icon={isProjectIdCopied ? faCheck : faCopy} />}
+      onClick={copyToClipboard}
+    >
+      {children}
+      <span className="absolute -left-8 -top-20 hidden translate-y-full justify-center rounded-md bg-bunker-800 py-2 px-3 text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+        {hoverText}
+      </span>
+    </Button>
+  );
+};

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx

@@ -1,7 +1,5 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
@@ -9,11 +7,12 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useToggle } from "@app/hooks";
 import { useRenameWorkspace } from "@app/hooks/api";
 
+import { CopyButton } from "./CopyButton";
+
 const formSchema = yup.object({
-  name: yup.string().required().label("Project Name")
+  name: yup.string().required().label("Project Name").max(64, "Too long, maximum length is 64 characters"),
 });
 
 type FormData = yup.InferType<typeof formSchema>;
@@ -22,7 +21,6 @@ export const ProjectNameChangeSection = () => {
   const { createNotification } = useNotificationContext();
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync, isLoading } = useRenameWorkspace();
-  const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
 
   const { handleSubmit, control, reset } = useForm<FormData>({ resolver: yupResolver(formSchema) });
 
@@ -34,16 +32,6 @@ export const ProjectNameChangeSection = () => {
     }
   }, [currentWorkspace]);
 
-  useEffect(() => {
-    let timer: NodeJS.Timeout;
-
-    if (isProjectIdCopied) {
-      timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
-    }
-
-    return () => clearTimeout(timer);
-}, [setIsProjectIdCopied]);
-
   const onFormSubmit = async ({ name }: FormData) => {
     try {
       if (!currentWorkspace?.id) return;
@@ -66,49 +54,50 @@ export const ProjectNameChangeSection = () => {
     }
   };
 
-  const copyProjectIdToClipboard = () => {
-    navigator.clipboard.writeText(currentWorkspace?.id || "");
-    setIsProjectIdCopied.on();
-
-    createNotification({
-      text: "Copied Project ID to clipboard",
-      type: "success"
-    });
-  }
-
   return (
     <form
       onSubmit={handleSubmit(onFormSubmit)}
       className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-      <div className="flex justify-betweens">
-        <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">Project Name</h2>
-        <div>
-          <Button
-            colorSchema="secondary"
-            className="group relative"
-            leftIcon={<FontAwesomeIcon icon={isProjectIdCopied ? faCheck : faCopy} />}
-            onClick={copyProjectIdToClipboard}
+      <div className="justify-betweens flex">
+        <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Name</h2>
+        <div className="space-x-2">
+          <CopyButton
+            value={currentWorkspace?.slug || ""}
+            hoverText="Click to project slug"
+            notificationText="Copied project slug to clipboard"
+          >
+            Copy Project Slug
+          </CopyButton>
+          <CopyButton
+            value={currentWorkspace?.id || ""}
+            hoverText="Click to project ID"
+            notificationText="Copied project ID to clipboard"
           >
             Copy Project ID
-            <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-              Click to copy
-            </span>
-          </Button>
+          </CopyButton>
         </div>
       </div>
-
       <div className="max-w-md">
-        <Controller
-          defaultValue=""
-          render={({ field, fieldState: { error } }) => (
-            <FormControl isError={Boolean(error)} errorText={error?.message}>
-              <Input placeholder="Project name" {...field} className="bg-mineshaft-800" />
-            </FormControl>
+        <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Workspace}>
+          {(isAllowed) => (
+            <Controller
+              defaultValue=""
+              render={({ field, fieldState: { error } }) => (
+                <FormControl isError={Boolean(error)} errorText={error?.message}>
+                  <Input
+                    placeholder="Project name"
+                    {...field}
+                    className="bg-mineshaft-800"
+                    isDisabled={!isAllowed}
+                  />
+                </FormControl>
+              )}
+              control={control}
+              name="name"
+            />
           )}
-          control={control}
-          name="name"
-        />
+        </ProjectPermissionCan>
       </div>
       <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Workspace}>
         {(isAllowed) => (

frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/WebhooksTab.tsx

@@ -139,7 +139,7 @@ export const WebhooksTab = withProjectPermission(
     };
 
     return (
-      <div className="mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="flex justify-between">
           <p className="text-xl font-semibold text-mineshaft-100">{t("settings.webhooks.title")}</p>
           <ProjectPermissionCan

frontend/src/views/Signup/SignupSSO.tsx

@@ -16,7 +16,7 @@ export const SignupSSO = ({
     const [password, setPassword] = useState("");
 
     const {
-        email,
+        username,
         organizationName,
         firstName,
         lastName,
@@ -27,7 +27,7 @@ export const SignupSSO = ({
             case 0:
                 return (
                     <UserInfoSSOStep 
-                        email={email}
+                        username={username}
                         name={`${firstName} ${lastName}`}
                         providerOrganizationName={organizationName}
                         password={password}
@@ -39,7 +39,7 @@ export const SignupSSO = ({
             case 1:
                 return (
                     <BackupPDFStep 
-                        email={email}
+                        email={username}
                         password={password}
                         name={`${firstName} ${lastName}`}
                     />

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

@@ -24,7 +24,7 @@ const client = new jsrp.client();
 
 type Props = {
   setStep: (step: number) => void;
-  email: string;
+  username: string;
   password: string;
   setPassword: (value: string) => void;
   name: string;
@@ -57,7 +57,7 @@ type Errors = {
  * @param {string} obj.setLastName - function managing the state of user's last name
  */
 export const UserInfoSSOStep = ({
-  email,
+  username,
   name,
   providerOrganizationName,
   password,
@@ -113,7 +113,7 @@ export const UserInfoSSOStep = ({
 
       client.init(
         {
-          username: email,
+          username,
           password
         },
         async () => {
@@ -156,7 +156,7 @@ export const UserInfoSSOStep = ({
               });
 
               const response = await completeAccountSignup({
-                email,
+                email: username,
                 firstName: name.split(" ")[0],
                 lastName: name.split(" ").slice(1).join(" "),
                 protectedKey,
@@ -244,6 +244,7 @@ export const UserInfoSSOStep = ({
               onChange={(e) => setOrganizationName(e.target.value)}
               isRequired
               className="h-12"
+              maxLength={64}
               disabled
             />
             {organizationNameError && (

frontend/src/views/admin/DashboardPage/DashboardPage.tsx

@@ -1,7 +1,24 @@
 import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
 import { useRouter } from "next/router";
+import { faAt } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
 
-import { ContentLoader, Switch, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import {
+  Button,
+  ContentLoader,
+  FormControl,
+  Input,
+  Select,
+  SelectItem,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+} from "@app/components/v2";
 import { useOrganization, useServerConfig, useUser } from "@app/context";
 import { useUpdateServerConfig } from "@app/hooks/api";
 
@@ -9,16 +26,47 @@ enum TabSections {
   Settings = "settings"
 }
 
+enum SignUpModes {
+  Disabled = "disabled",
+  Anyone = "anyone"
+}
+
+const formSchema = z.object({
+  signUpMode: z.nativeEnum(SignUpModes),
+  allowedSignUpDomain: z.string().optional().nullable()
+});
+
+type TDashboardForm = z.infer<typeof formSchema>;
 export const AdminDashboardPage = () => {
   const router = useRouter();
   const data = useServerConfig();
   const { config } = data;
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { isSubmitting, isDirty }
+  } = useForm<TDashboardForm>({
+    resolver: zodResolver(formSchema),
+    values: {
+      // eslint-disable-next-line
+      signUpMode: config.allowSignUp ? SignUpModes.Anyone : SignUpModes.Disabled,
+      allowedSignUpDomain: config.allowedSignUpDomain
+    }
+  });
+
+  const signupMode = watch("signUpMode");
+
   const { user, isLoading: isUserLoading } = useUser();
   const { orgs } = useOrganization();
-  const { mutate: updateServerConfig } = useUpdateServerConfig();
+  const { mutateAsync: updateServerConfig } = useUpdateServerConfig();
+
+  const { createNotification } = useNotificationContext();
 
   const isNotAllowed = !user?.superAdmin;
 
+  // TODO(akhilmhdh): on nextjs 14 roadmap this will be properly addressed with context split
   useEffect(() => {
     if (isNotAllowed && !isUserLoading) {
       if (orgs?.length) {
@@ -28,37 +76,115 @@ export const AdminDashboardPage = () => {
     }
   }, [isNotAllowed, isUserLoading]);
 
+  const onFormSubmit = async (formData: TDashboardForm) => {
+    try {
+      const { signUpMode, allowedSignUpDomain } = formData;
+      await updateServerConfig({
+        allowSignUp: signUpMode !== SignUpModes.Disabled,
+        allowedSignUpDomain: signUpMode === SignUpModes.Anyone ? allowedSignUpDomain : null
+      });
+      createNotification({
+        text: "Successfully changed sign up setting.",
+        type: "success"
+      });
+    } catch (e) {
+      console.error(e);
+      createNotification({
+        type: "error",
+        text: "Failed to update sign up setting."
+      });
+    }
+  };
+
   return (
-    <div className="container mx-auto max-w-7xl pb-12 text-white dark:[color-scheme:dark]">
-      <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+    <div className="container mx-auto max-w-7xl px-4 pb-12 text-white dark:[color-scheme:dark]">
+      <div className="mx-auto mb-6 w-full max-w-7xl pt-6">
         <div className="mb-8 flex flex-col items-start justify-between text-xl">
           <h1 className="text-3xl font-semibold">Admin Dashboard</h1>
           <p className="text-base text-bunker-300">Manage your Infisical instance.</p>
         </div>
-        {isUserLoading || isNotAllowed ? (
-          <ContentLoader text={isNotAllowed ? "Redirecting to org page..." : undefined} />
-        ) : (
-          <div>
-            <Tabs defaultValue={TabSections.Settings}>
-              <TabList>
-                <div className="flex w-full flex-row border-b border-mineshaft-600">
-                  <Tab value={TabSections.Settings}>General</Tab>
-                </div>
-              </TabList>
-              <TabPanel value={TabSections.Settings}>
-                <div className="flex items-center space-x-4">
-                  <Switch
-                    id="disable-invite"
-                    isChecked={Boolean(config?.allowSignUp)}
-                    onCheckedChange={(isChecked) => updateServerConfig({ allowSignUp: isChecked })}
-                  />
-                  <div className="flex-grow">Enable signup or invite</div>
-                </div>
-              </TabPanel>
-            </Tabs>
-          </div>
-        )}
       </div>
+      {isUserLoading || isNotAllowed ? (
+        <ContentLoader text={isNotAllowed ? "Redirecting to org page..." : undefined} />
+      ) : (
+        <div>
+          <Tabs defaultValue={TabSections.Settings}>
+            <TabList>
+              <div className="flex w-full flex-row border-b border-mineshaft-600">
+                <Tab value={TabSections.Settings}>General</Tab>
+              </div>
+            </TabList>
+            <TabPanel value={TabSections.Settings}>
+              <form
+                className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+                onSubmit={handleSubmit(onFormSubmit)}
+              >
+                <div className="flex justify-between">
+                  <div className="mb-4 text-xl font-semibold text-mineshaft-100">
+                    Allow user sign up
+                  </div>
+                  <Controller
+                    control={control}
+                    name="signUpMode"
+                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                      <FormControl
+                        className="max-w-72 w-72"
+                        errorText={error?.message}
+                        isError={Boolean(error)}
+                      >
+                        <Select
+                          className="w-72 bg-mineshaft-700"
+                          dropdownContainerClassName="bg-mineshaft-700"
+                          defaultValue={field.value}
+                          onValueChange={(e) => onChange(e)}
+                          {...field}
+                        >
+                          <SelectItem value={SignUpModes.Disabled}>Disabled</SelectItem>
+                          <SelectItem value={SignUpModes.Anyone}>Anyone</SelectItem>
+                        </Select>
+                      </FormControl>
+                    )}
+                  />
+                </div>
+                {signupMode === "anyone" && (
+                  <div className="mt-4 flex items-center justify-between">
+                    <div className="mb-4 flex text-mineshaft-100">
+                      Restrict sign up by email domain(s)
+                    </div>
+                    <Controller
+                      control={control}
+                      defaultValue=""
+                      name="allowedSignUpDomain"
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          label="Leave blank to allow any email domains"
+                          className="w-72"
+                          isError={Boolean(error)}
+                          errorText={error?.message}
+                        >
+                          <Input
+                            {...field}
+                            value={field.value || ""}
+                            placeholder="gmail.com, aws.com, redhat.com"
+                            leftIcon={<FontAwesomeIcon icon={faAt} />}
+                          />
+                        </FormControl>
+                      )}
+                    />
+                  </div>
+                )}
+                <Button
+                  type="submit"
+                  isLoading={isSubmitting}
+                  isDisabled={isSubmitting || !isDirty}
+                >
+                  Save
+                </Button>
+              </form>
+            </TabPanel>
+          </Tabs>
+        </div>
+      )}
     </div>
   );
 };

frontend/src/views/admin/SignUpPage/SignUpPage.tsx

@@ -84,6 +84,10 @@ export const SignUpPage = () => {
         tag: userPass.encryptedPrivateKeyTag,
         privateKey
       });
+      // TODO(akhilmhdh): This is such a confusing pattern and too unreliable
+      // Will be refactored in next iteration to make it url based rather than local storage ones
+      // Part of migration to nextjs 14
+      localStorage.setItem("orgData.id", res.organization.id);
       setStep(SignupSteps.BackupKey);
     } catch (err) {
       console.log(err);
@@ -130,8 +134,8 @@ export const SignUpPage = () => {
           >
             <div className="flex flex-col items-center space-y-2 text-center">
               <img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
-              <div className="text-4xl pt-4">Welcome to Infisical</div>
-              <div className="text-bunker-300 pb-4">Create your first Super Admin Account</div>
+              <div className="pt-4 text-4xl">Welcome to Infisical</div>
+              <div className="pb-4 text-bunker-300">Create your first Super Admin Account</div>
             </div>
             <form onSubmit={handleSubmit(handleFormSubmit)}>
               <div className="mt-8">
@@ -199,7 +203,14 @@ export const SignUpPage = () => {
                   )}
                 />
               </div>
-              <Button type="submit" colorSchema="primary" variant="outline_bg" isFullWidth className="mt-4" isLoading={isSubmitting}>
+              <Button
+                type="submit"
+                colorSchema="primary"
+                variant="outline_bg"
+                isFullWidth
+                className="mt-4"
+                isLoading={isSubmitting}
+              >
                 Continue
               </Button>
             </form>