Merge remote-tracking branch 'origin/main' into misc/privilege-management-v2-transition

frontend/src/components/auth/DonwloadBackupPDFStep.tsx

@@ -1,93 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { useToggle } from "@app/hooks";
-import { generateUserBackupKey } from "@app/lib/crypto";
-
-import { createNotification } from "../notifications";
-import { generateBackupPDFAsync } from "../utilities/generateBackupPDF";
-import { Button } from "../v2";
-
-interface DownloadBackupPDFStepProps {
-  incrementStep: () => void;
-  email: string;
-  password: string;
-  name: string;
-}
-
-/**
- * This is the step of the signup flow where the user downloads the backup pdf
- * @param {object} obj
- * @param {function} obj.incrementStep - function that moves the user on to the next stage of signup
- * @param {string} obj.email - user's email
- * @param {string} obj.password - user's password
- * @param {string} obj.name - user's name
- * @returns
- */
-export default function DonwloadBackupPDFStep({
-  incrementStep,
-  email,
-  password,
-  name
-}: DownloadBackupPDFStepProps): JSX.Element {
-  const { t } = useTranslation();
-
-  const [isLoading, setIsLoading] = useToggle();
-
-  const handleBackupKeyGenerate = async () => {
-    try {
-      setIsLoading.on();
-      const generatedKey = await generateUserBackupKey(email, password);
-      await generateBackupPDFAsync({
-        generatedKey,
-        personalEmail: email,
-        personalName: name
-      });
-      incrementStep();
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to generate backup key"
-      });
-    } finally {
-      setIsLoading.off();
-    }
-  };
-
-  return (
-    <div className="mx-auto mb-36 flex h-full w-full flex-col items-center md:mb-16 md:px-6">
-      <p className="flex flex-col items-center justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
-        <FontAwesomeIcon
-          icon={faWarning}
-          className="mb-6 ml-2 mr-3 pt-1 text-6xl text-bunker-200"
-        />
-        {t("signup.step4-message")}
-      </p>
-      <div className="text-md mt-8 flex w-full max-w-md flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 pb-2 text-center text-bunker-300 md:min-w-[24rem] lg:w-1/6">
-        <div className="m-2 mx-auto mt-4 flex w-full flex-row items-center rounded-md px-3 text-center text-bunker-300 md:mt-8 md:min-w-[23rem] lg:w-1/6">
-          <span className="mb-2">
-            {t("signup.step4-description1")} {t("signup.step4-description3")}
-          </span>
-        </div>
-        <div className="mx-auto mb-2 mt-2 flex w-full flex-col items-center justify-center px-3 text-center text-sm md:mb-4 md:mt-4 md:min-w-[20rem] md:max-w-md md:text-left lg:w-1/6">
-          <div className="text-l w-full py-1 text-lg">
-            <Button
-              onClick={handleBackupKeyGenerate}
-              size="sm"
-              isFullWidth
-              isLoading={isLoading}
-              isDisabled={isLoading}
-              className="h-12"
-              colorSchema="primary"
-              variant="outline_bg"
-            >
-              Download PDF
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

frontend/src/components/project/ProjectOverviewChangeSection.tsx

@@ -9,9 +9,7 @@ import { Button, FormControl, Input, TextArea } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { useUpdateProject } from "@app/hooks/api";
 
-import { CopyButton } from "./CopyButton";
-
-const formSchema = z.object({
+const baseFormSchema = z.object({
   name: z.string().min(1, "Required").max(64, "Too long, maximum length is 64 characters"),
   description: z
     .string()
@@ -20,31 +18,55 @@ const formSchema = z.object({
     .optional()
 });
 
-type FormData = z.infer<typeof formSchema>;
+const formSchemaWithSlug = baseFormSchema.extend({
+  slug: z
+    .string()
+    .min(1, "Required")
+    .max(64, "Too long, maximum length is 64 characters")
+    .regex(
+      /^[a-z0-9]+(?:[_-][a-z0-9]+)*$/,
+      "Project slug can only contain lowercase letters and numbers, with optional single hyphens (-) or underscores (_) between words. Cannot start or end with a hyphen or underscore."
+    )
+});
 
-export const ProjectOverviewChangeSection = () => {
+type BaseFormData = z.infer<typeof baseFormSchema>;
+type FormDataWithSlug = z.infer<typeof formSchemaWithSlug>;
+
+type Props = {
+  showSlugField?: boolean;
+};
+
+export const ProjectOverviewChangeSection = ({ showSlugField = false }: Props) => {
   const { currentWorkspace } = useWorkspace();
   const { mutateAsync, isPending } = useUpdateProject();
+  const { handleSubmit, control, reset, watch } = useForm<BaseFormData | FormDataWithSlug>({
+    resolver: zodResolver(showSlugField ? formSchemaWithSlug : baseFormSchema)
+  });
 
-  const { handleSubmit, control, reset } = useForm<FormData>({ resolver: zodResolver(formSchema) });
+  const currentSlug = showSlugField ? watch("slug") : currentWorkspace?.slug;
 
   useEffect(() => {
     if (currentWorkspace) {
       reset({
         name: currentWorkspace.name,
-        description: currentWorkspace.description ?? ""
+        description: currentWorkspace.description ?? "",
+        ...(showSlugField && { slug: currentWorkspace.slug })
       });
     }
-  }, [currentWorkspace]);
+  }, [currentWorkspace, showSlugField]);
 
-  const onFormSubmit = async ({ name, description }: FormData) => {
+  const onFormSubmit = async (data: BaseFormData | FormDataWithSlug) => {
     try {
       if (!currentWorkspace?.id) return;
 
       await mutateAsync({
         projectID: currentWorkspace.id,
-        newProjectName: name,
-        newProjectDescription: description
+        newProjectName: data.name,
+        newProjectDescription: data.description,
+        ...(showSlugField &&
+          "slug" in data && {
+            newSlug: data.slug !== currentWorkspace.slug ? data.slug : undefined
+          })
       });
 
       createNotification({
@@ -65,20 +87,34 @@ export const ProjectOverviewChangeSection = () => {
       <div className="justify-betweens flex">
         <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Overview</h2>
         <div className="space-x-2">
-          <CopyButton
-            value={currentWorkspace?.slug || ""}
-            hoverText="Click to project slug"
-            notificationText="Copied project slug to clipboard"
+          <Button
+            variant="outline_bg"
+            size="sm"
+            onClick={() => {
+              navigator.clipboard.writeText(currentSlug || "");
+              createNotification({
+                text: "Copied project slug to clipboard",
+                type: "success"
+              });
+            }}
+            title="Click to copy project slug"
           >
             Copy Project Slug
-          </CopyButton>
-          <CopyButton
-            value={currentWorkspace?.id || ""}
-            hoverText="Click to project ID"
-            notificationText="Copied project ID to clipboard"
+          </Button>
+          <Button
+            variant="outline_bg"
+            size="sm"
+            onClick={() => {
+              navigator.clipboard.writeText(currentWorkspace?.id || "");
+              createNotification({
+                text: "Copied project ID to clipboard",
+                type: "success"
+              });
+            }}
+            title="Click to copy project ID"
           >
             Copy Project ID
-          </CopyButton>
+          </Button>
         </div>
       </div>
       <div>
@@ -113,6 +149,38 @@ export const ProjectOverviewChangeSection = () => {
               </ProjectPermissionCan>
             </div>
           </div>
+          {showSlugField && (
+            <div className="flex w-full flex-row items-end gap-4">
+              <div className="w-full max-w-md">
+                <ProjectPermissionCan
+                  I={ProjectPermissionActions.Edit}
+                  a={ProjectPermissionSub.Project}
+                >
+                  {(isAllowed) => (
+                    <Controller
+                      defaultValue=""
+                      render={({ field, fieldState: { error } }) => (
+                        <FormControl
+                          isError={Boolean(error)}
+                          errorText={error?.message}
+                          label="Project slug"
+                        >
+                          <Input
+                            placeholder="Project slug"
+                            {...field}
+                            className="bg-mineshaft-800"
+                            isDisabled={!isAllowed}
+                          />
+                        </FormControl>
+                      )}
+                      control={control}
+                      name="slug"
+                    />
+                  )}
+                </ProjectPermissionCan>
+              </div>
+            </div>
+          )}
           <div className="flex w-full flex-row items-end gap-4">
             <div className="w-full max-w-md">
               <ProjectPermissionCan

frontend/src/components/secrets/SecretReferenceDetails/SecretReferenceDetails.tsx

@@ -1,13 +1,21 @@
-import { useState } from "react";
-import { faChevronRight, faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+/* eslint-disable no-nested-ternary */
+import { useEffect, useState } from "react";
+import {
+  faChevronRight,
+  faExclamationTriangle,
+  faEye,
+  faEyeSlash
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Collapsible from "@radix-ui/react-collapsible";
+import { AxiosError } from "axios";
 import { twMerge } from "tailwind-merge";
 
+import { createNotification } from "@app/components/notifications";
 import { FormControl, FormLabel, SecretInput, Spinner, Tooltip } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useGetSecretReferenceTree } from "@app/hooks/api";
-import { TSecretReferenceTraceNode } from "@app/hooks/api/types";
+import { ApiErrorTypes, TApiErrors, TSecretReferenceTraceNode } from "@app/hooks/api/types";
 
 import style from "./SecretReferenceDetails.module.css";
 
@@ -84,7 +92,7 @@ export const SecretReferenceTree = ({ secretPath, environment, secretKey }: Prop
   const { currentWorkspace } = useWorkspace();
   const projectId = currentWorkspace?.id || "";
 
-  const { data, isPending } = useGetSecretReferenceTree({
+  const { data, isPending, isError, error } = useGetSecretReferenceTree({
     secretPath,
     environmentSlug: environment,
     projectId,
@@ -94,6 +102,26 @@ export const SecretReferenceTree = ({ secretPath, environment, secretKey }: Prop
   const tree = data?.tree;
   const secretValue = data?.value;
 
+  useEffect(() => {
+    if (error instanceof AxiosError) {
+      const err = error?.response?.data as TApiErrors;
+
+      if (err?.error === ApiErrorTypes.CustomForbiddenError) {
+        createNotification({
+          title: "You don't have permission to view reference tree",
+          text: "You don't have permission to view one or more of the referenced secrets.",
+          type: "error"
+        });
+        return;
+      }
+      createNotification({
+        title: "Error fetching secret reference tree",
+        text: "Please try again later.",
+        type: "error"
+      });
+    }
+  }, [error]);
+
   if (isPending) {
     return (
       <div className="flex items-center justify-center py-4">
@@ -114,11 +142,16 @@ export const SecretReferenceTree = ({ secretPath, environment, secretKey }: Prop
       </FormControl>
       <FormLabel className="mb-2" label="Reference Tree" />
       <div className="thin-scrollbar relative max-h-96 overflow-auto rounded-md border border-mineshaft-600 bg-bunker-700 py-6 text-sm text-mineshaft-200">
-        {tree && (
+        {isError ? (
+          <div className="flex items-center justify-center py-4">
+            <FontAwesomeIcon icon={faExclamationTriangle} className="mr-2 text-red-500" />
+            <p className="text-red-500">Error fetching secret reference tree</p>
+          </div>
+        ) : tree ? (
           <ul className={style.tree}>
             <SecretReferenceNode node={tree} isRoot secretKey={secretKey} />
           </ul>
-        )}
+        ) : null}
       </div>
       <div className="mt-2 text-sm text-mineshaft-400">
         Click a secret key to view its sub-references.

frontend/src/components/utilities/checks/password/PasswordCheck.ts

@@ -34,12 +34,12 @@ const passwordCheck = async ({
   const tests = [
     {
       name: "tooShort",
-      validator: (pwd: string) => pwd.length >= 14,
+      validator: (pwd: string) => pwd?.length >= 14,
       setError: setPasswordErrorTooShort
     },
     {
       name: "tooLong",
-      validator: (pwd: string) => pwd.length < 101,
+      validator: (pwd: string) => pwd?.length < 101,
       setError: setPasswordErrorTooLong
     },
     {

frontend/src/components/v2/Blur/Blur.tsx

@@ -0,0 +1,22 @@
+import { twMerge } from "tailwind-merge";
+
+import { Tooltip } from "../Tooltip/Tooltip";
+
+interface IProps {
+  className?: string;
+  tooltipText?: string;
+}
+
+export const Blur = ({ className, tooltipText }: IProps) => {
+  return (
+    <Tooltip content={tooltipText} isDisabled={!tooltipText}>
+      <div
+        className={twMerge("flex w-80 flex-grow items-center py-1 pl-4 pr-2", className)}
+        tabIndex={0}
+        role="button"
+      >
+        <span className="blur">********</span>
+      </div>
+    </Tooltip>
+  );
+};

frontend/src/components/v2/Blur/index.tsx

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

frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx

@@ -120,6 +120,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
 
     const isPopupOpen = Boolean(suggestionSource.isOpen) && isFocused;
     const { data: secrets } = useGetProjectSecrets({
+      viewSecretValue: false,
       environment: suggestionSource.environment || "",
       secretPath: suggestionSource.secretPath || "",
       workspaceId,

frontend/src/context/ProjectPermissionContext/types.ts

@@ -7,6 +7,15 @@ export enum ProjectPermissionActions {
   Delete = "delete"
 }
 
+export enum ProjectPermissionSecretActions {
+  DescribeAndReadValue = "read",
+  DescribeSecret = "describeSecret",
+  ReadValue = "readValue",
+  Create = "create",
+  Edit = "edit",
+  Delete = "delete"
+}
+
 export enum ProjectPermissionDynamicSecretActions {
   ReadRootCredential = "read-root-credential",
   CreateRootCredential = "create-root-credential",
@@ -162,7 +171,7 @@ export type SecretImportSubjectFields = {
 
 export type ProjectPermissionSet =
   | [
-      ProjectPermissionActions,
+      ProjectPermissionSecretActions,
       (
         | ProjectPermissionSub.Secrets
         | (ForcedSubject<ProjectPermissionSub.Secrets> & SecretSubjectFields)

frontend/src/hooks/api/admin/types.ts

@@ -50,6 +50,7 @@ export type TUpdateAdminSlackConfigDTO = {
 export type AdminGetUsersFilters = {
   limit: number;
   searchTerm: string;
+  adminsOnly: boolean;
 };
 
 export type AdminSlackConfig = {

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

@@ -2,6 +2,8 @@ export {
   useGetAuthToken,
   useOauthTokenExchange,
   useResetPassword,
+  useResetPasswordV2,
+  useResetUserPasswordV2,
   useSelectOrganization,
   useSendMfaToken,
   useSendPasswordResetEmail,

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

@@ -22,12 +22,15 @@ import {
   LoginLDAPRes,
   MfaMethod,
   ResetPasswordDTO,
+  ResetPasswordV2DTO,
+  ResetUserPasswordV2DTO,
   SendMfaTokenDTO,
   SetupPasswordDTO,
   SRP1DTO,
   SRPR1Res,
   TOauthTokenExchangeDTO,
   UserAgentType,
+  UserEncryptionVersion,
   VerifyMfaTokenDTO,
   VerifyMfaTokenRes,
   VerifySignupInviteDTO
@@ -247,7 +250,10 @@ export const useSendPasswordResetEmail = () => {
 export const useVerifyPasswordResetCode = () => {
   return useMutation({
     mutationFn: async ({ email, code }: { email: string; code: string }) => {
-      const { data } = await apiRequest.post("/api/v1/password/email/password-reset-verify", {
+      const { data } = await apiRequest.post<{
+        token: string;
+        userEncryptionVersion: UserEncryptionVersion;
+      }>("/api/v1/password/email/password-reset-verify", {
         email,
         code
       });
@@ -302,6 +308,26 @@ export const useResetPassword = () => {
   });
 };
 
+export const useResetPasswordV2 = () => {
+  return useMutation({
+    mutationFn: async (details: ResetPasswordV2DTO) => {
+      await apiRequest.post("/api/v2/password/password-reset", details, {
+        headers: {
+          Authorization: `Bearer ${details.verificationToken}`
+        }
+      });
+    }
+  });
+};
+
+export const useResetUserPasswordV2 = () => {
+  return useMutation({
+    mutationFn: async (details: ResetUserPasswordV2DTO) => {
+      await apiRequest.post("/api/v2/password/user/password-reset", details);
+    }
+  });
+};
+
 export const changePassword = async (details: ChangePasswordDTO) => {
   const { data } = await apiRequest.post("/api/v1/password/change-password", details);
   return data;

frontend/src/hooks/api/auth/types.ts

@@ -3,6 +3,11 @@ export type GetAuthTokenAPI = {
   organizationId?: string;
 };
 
+export enum UserEncryptionVersion {
+  V1 = 1,
+  V2 = 2
+}
+
 export type SendMfaTokenDTO = {
   email: string;
 };
@@ -136,6 +141,16 @@ export type ResetPasswordDTO = {
   password: string;
 };
 
+export type ResetPasswordV2DTO = {
+  newPassword: string;
+  verificationToken: string;
+};
+
+export type ResetUserPasswordV2DTO = {
+  oldPassword: string;
+  newPassword: string;
+};
+
 export type SetupPasswordDTO = {
   protectedKey: string;
   protectedKeyIV: string;

frontend/src/hooks/api/dashboard/index.ts

@@ -1,4 +1,5 @@
 export {
+  useGetAccessibleSecrets,
   useGetProjectSecretsDetails,
   useGetProjectSecretsOverview,
   useGetProjectSecretsQuickSearch

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

@@ -11,6 +11,7 @@ import {
   DashboardSecretsOrderBy,
   TDashboardProjectSecretsQuickSearch,
   TDashboardProjectSecretsQuickSearchResponse,
+  TGetAccessibleSecretsDTO,
   TGetDashboardProjectSecretsByKeys,
   TGetDashboardProjectSecretsDetailsDTO,
   TGetDashboardProjectSecretsOverviewDTO,
@@ -20,6 +21,8 @@ import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { mergePersonalSecrets } from "@app/hooks/api/secrets/queries";
 import { groupBy, unique } from "@app/lib/fn/array";
 
+import { SecretV3Raw } from "../types";
+
 export const dashboardKeys = {
   all: () => ["dashboard"] as const,
   getDashboardSecrets: ({
@@ -58,6 +61,17 @@ export const dashboardKeys = {
       ...dashboardKeys.getDashboardSecrets({ projectId, secretPath }),
       "quick-search",
       params
+    ] as const,
+  getAccessibleSecrets: ({
+    projectId,
+    secretPath,
+    environment,
+    filterByAction
+  }: TGetAccessibleSecretsDTO) =>
+    [
+      ...dashboardKeys.all(),
+      "accessible-secrets",
+      { projectId, secretPath, environment, filterByAction }
     ] as const
 };
 
@@ -207,6 +221,7 @@ export const useGetProjectSecretsDetails = (
     search = "",
     includeSecrets,
     includeFolders,
+    viewSecretValue,
     includeImports,
     includeDynamicSecrets,
     tags
@@ -231,6 +246,7 @@ export const useGetProjectSecretsDetails = (
       limit,
       orderBy,
       orderDirection,
+      viewSecretValue,
       offset,
       projectId,
       environment,
@@ -247,6 +263,7 @@ export const useGetProjectSecretsDetails = (
         limit,
         orderBy,
         orderDirection,
+        viewSecretValue,
         offset,
         projectId,
         environment,
@@ -292,6 +309,22 @@ export const fetchProjectSecretsQuickSearch = async ({
   return data;
 };
 
+const fetchAccessibleSecrets = async ({
+  projectId,
+  secretPath,
+  environment,
+  filterByAction
+}: TGetAccessibleSecretsDTO) => {
+  const { data } = await apiRequest.get<{ secrets: SecretV3Raw[] }>(
+    "/api/v1/dashboard/accessible-secrets",
+    {
+      params: { projectId, secretPath, environment, filterByAction }
+    }
+  );
+
+  return data.secrets;
+};
+
 export const useGetProjectSecretsQuickSearch = (
   {
     projectId,
@@ -354,3 +387,32 @@ export const useGetProjectSecretsQuickSearch = (
     placeholderData: (previousData) => previousData
   });
 };
+
+export const useGetAccessibleSecrets = ({
+  projectId,
+  secretPath,
+  environment,
+  filterByAction,
+  options
+}: TGetAccessibleSecretsDTO & {
+  options?: Omit<
+    UseQueryOptions<
+      SecretV3Raw[],
+      unknown,
+      SecretV3Raw[],
+      ReturnType<typeof dashboardKeys.getAccessibleSecrets>
+    >,
+    "queryKey" | "queryFn"
+  >;
+}) => {
+  return useQuery({
+    ...options,
+    queryKey: dashboardKeys.getAccessibleSecrets({
+      projectId,
+      secretPath,
+      environment,
+      filterByAction
+    }),
+    queryFn: () => fetchAccessibleSecrets({ projectId, secretPath, environment, filterByAction })
+  });
+};

frontend/src/hooks/api/dashboard/types.ts

@@ -1,3 +1,4 @@
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { TSecretFolder } from "@app/hooks/api/secretFolders/types";
@@ -69,6 +70,7 @@ export type TGetDashboardProjectSecretsDetailsDTO = Omit<
   TGetDashboardProjectSecretsOverviewDTO,
   "environments"
 > & {
+  viewSecretValue: boolean;
   environment: string;
   includeImports?: boolean;
   tags: Record<string, boolean>;
@@ -100,3 +102,12 @@ export type TGetDashboardProjectSecretsByKeys = {
   environment: string;
   keys: string[];
 };
+
+export type TGetAccessibleSecretsDTO = {
+  projectId: string;
+  secretPath: string;
+  environment: string;
+  filterByAction:
+    | ProjectPermissionSecretActions.DescribeSecret
+    | ProjectPermissionSecretActions.ReadValue;
+};

frontend/src/hooks/api/reactQuery.tsx

@@ -10,18 +10,14 @@ import {
   formatedConditionsOperatorNames,
   PermissionConditionOperators
 } from "@app/context/ProjectPermissionContext/types";
+import { camelCaseToSpaces } from "@app/lib/fn/string";
 
 import { ApiErrorTypes, TApiErrors } from "./types";
-
 // this is saved in react-query cache
 export const SIGNUP_TEMP_TOKEN_CACHE_KEY = ["infisical__signup-temp-token"];
 export const MFA_TEMP_TOKEN_CACHE_KEY = ["infisical__mfa-temp-token"];
 export const AUTH_TOKEN_CACHE_KEY = ["infisical__auth-token"];
 
-const camelCaseToSpaces = (input: string) => {
-  return input.replace(/([a-z])([A-Z])/g, "$1 $2");
-};
-
 export const queryClient = new QueryClient({
   mutationCache: new MutationCache({
     onError: (error) => {

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

@@ -79,6 +79,7 @@ export const decryptSecrets = (
       id: encSecret.id,
       env: encSecret.environment,
       key: secretKey,
+      secretValueHidden: encSecret.secretValueHidden,
       value: secretValue,
       tags: encSecret.tags,
       comment: secretComment,

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

@@ -137,6 +137,7 @@ export const useGetImportedSecretsSingleEnv = ({
             env: encSecret.environment,
             key: encSecret.secretKey,
             value: encSecret.secretValue,
+            secretValueHidden: encSecret.secretValueHidden,
             tags: encSecret.tags,
             comment: encSecret.secretComment,
             createdAt: encSecret.createdAt,
@@ -176,6 +177,7 @@ export const useGetImportedSecretsAllEnvs = ({
                 env: encSecret.environment,
                 key: encSecret.secretKey,
                 value: encSecret.secretValue,
+                secretValueHidden: encSecret.secretValueHidden,
                 tags: encSecret.tags,
                 comment: encSecret.secretComment,
                 createdAt: encSecret.createdAt,

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

@@ -75,6 +75,7 @@ export const useGetSnapshotSecrets = ({ snapshotId }: TSnapshotDataProps) =>
           id: secretVersion.secretId,
           env: data.environment.slug,
           key: secretVersion.secretKey,
+          secretValueHidden: secretVersion.secretValueHidden,
           value: secretVersion.secretValue || "",
           tags: secretVersion.tags,
           comment: secretVersion.secretComment,

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

@@ -26,8 +26,13 @@ import {
 
 export const secretKeys = {
   // this is also used in secretSnapshot part
-  getProjectSecret: ({ workspaceId, environment, secretPath }: TGetProjectSecretsKey) =>
-    [{ workspaceId, environment, secretPath }, "secrets"] as const,
+  getProjectSecret: ({
+    workspaceId,
+    environment,
+    secretPath,
+    viewSecretValue
+  }: TGetProjectSecretsKey) =>
+    [{ workspaceId, environment, secretPath, viewSecretValue }, "secrets"] as const,
   getSecretVersion: (secretId: string) => [{ secretId }, "secret-versions"] as const,
   getSecretAccessList: ({
     workspaceId,
@@ -44,13 +49,15 @@ export const fetchProjectSecrets = async ({
   environment,
   secretPath,
   includeImports,
-  expandSecretReferences
+  expandSecretReferences,
+  viewSecretValue
 }: TGetProjectSecretsKey) => {
   const { data } = await apiRequest.get<SecretV3RawResponse>("/api/v3/secrets/raw", {
     params: {
       environment,
       workspaceId,
       secretPath,
+      viewSecretValue,
       expandSecretReferences,
       include_imports: includeImports
     }
@@ -68,6 +75,7 @@ export const mergePersonalSecrets = (rawSecrets: SecretV3Raw[]) => {
       env: el.environment,
       key: el.secretKey,
       value: el.secretValue,
+      secretValueHidden: el.secretValueHidden,
       tags: el.tags || [],
       comment: el.secretComment || "",
       reminderRepeatDays: el.secretReminderRepeatDays,
@@ -107,6 +115,7 @@ export const useGetProjectSecrets = ({
   workspaceId,
   environment,
   secretPath,
+  viewSecretValue,
   options
 }: TGetProjectSecretsDTO & {
   options?: Omit<
@@ -123,8 +132,13 @@ export const useGetProjectSecrets = ({
     ...options,
     // wait for all values to be available
     enabled: Boolean(workspaceId && environment) && (options?.enabled ?? true),
-    queryKey: secretKeys.getProjectSecret({ workspaceId, environment, secretPath }),
-    queryFn: () => fetchProjectSecrets({ workspaceId, environment, secretPath }),
+    queryKey: secretKeys.getProjectSecret({
+      workspaceId,
+      environment,
+      secretPath,
+      viewSecretValue
+    }),
+    queryFn: () => fetchProjectSecrets({ workspaceId, environment, secretPath, viewSecretValue }),
     select: useCallback(
       (data: Awaited<ReturnType<typeof fetchProjectSecrets>>) => mergePersonalSecrets(data.secrets),
       []

frontend/src/hooks/api/secrets/types.ts

@@ -19,6 +19,7 @@ export type EncryptedSecret = {
   secretValueCiphertext: string;
   secretValueIV: string;
   secretValueTag: string;
+  secretValueHidden: boolean;
   __v: number;
   createdAt: string;
   updatedAt: string;
@@ -37,6 +38,7 @@ export type SecretV3RawSanitized = {
   version: number;
   key: string;
   value?: string;
+  secretValueHidden: boolean;
   comment?: string;
   reminderRepeatDays?: number | null;
   reminderNote?: string | null;
@@ -61,6 +63,7 @@ export type SecretV3Raw = {
   environment: string;
   version: number;
   type: string;
+  secretValueHidden: boolean;
   secretKey: string;
   secretPath: string;
   secretValue?: string;
@@ -95,6 +98,7 @@ export type SecretVersions = {
   envId: string;
   secretKey: string;
   secretValue?: string;
+  secretValueHidden: boolean;
   secretComment?: string;
   tags: WsTag[];
   __v: number;
@@ -115,6 +119,7 @@ export type TGetProjectSecretsKey = {
   environment: string;
   secretPath?: string;
   includeImports?: boolean;
+  viewSecretValue?: boolean;
   expandSecretReferences?: boolean;
 };
 

frontend/src/hooks/api/types.ts

@@ -47,7 +47,8 @@ export enum ApiErrorTypes {
   PermissionBoundaryError = "PermissionBoundaryError",
   BadRequestError = "BadRequest",
   UnauthorizedError = "UnauthorizedError",
-  ForbiddenError = "PermissionDenied"
+  ForbiddenError = "PermissionDenied",
+  CustomForbiddenError = "ForbiddenError"
 }
 
 export type TApiErrors =
@@ -70,6 +71,12 @@ export type TApiErrors =
       details: PureAbility["rules"];
       statusCode: 403;
     }
+  | {
+      reqId: string;
+      error: ApiErrorTypes.CustomForbiddenError;
+      message: string;
+      statusCode: 403;
+    }
   | {
       reqId: string;
       statusCode: 400;

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

@@ -251,12 +251,13 @@ export const useUpdateProject = () => {
   const queryClient = useQueryClient();
 
   return useMutation<Workspace, object, UpdateProjectDTO>({
-    mutationFn: async ({ projectID, newProjectName, newProjectDescription }) => {
+    mutationFn: async ({ projectID, newProjectName, newProjectDescription, newSlug }) => {
       const { data } = await apiRequest.patch<{ workspace: Workspace }>(
         `/api/v1/workspace/${projectID}`,
         {
           name: newProjectName,
-          description: newProjectDescription
+          description: newProjectDescription,
+          slug: newSlug
         }
       );
       return data.workspace;

frontend/src/hooks/api/workspace/types.ts

@@ -74,6 +74,7 @@ export type UpdateProjectDTO = {
   projectID: string;
   newProjectName: string;
   newProjectDescription?: string;
+  newSlug?: string;
 };
 
 export type UpdatePitVersionLimitDTO = { projectSlug: string; pitVersionLimit: number };

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -30,10 +30,13 @@ import {
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuTrigger,
+  Modal,
+  ModalContent,
   Tooltip
 } from "@app/components/v2";
 import { envConfig } from "@app/config/env";
 import { useOrganization, useSubscription, useUser } from "@app/context";
+import { isInfisicalCloud } from "@app/helpers/platform";
 import { usePopUp, useToggle } from "@app/hooks";
 import {
   useGetOrganizations,
@@ -50,6 +53,7 @@ import { ProjectType } from "@app/hooks/api/workspace/types";
 import { navigateUserToOrg } from "@app/pages/auth/LoginPage/Login.utils";
 
 import { MenuIconButton } from "../MenuIconButton";
+import { ServerAdminsPanel } from "../ServerAdminsPanel/ServerAdminsPanel";
 
 const getPlan = (subscription: SubscriptionPlan) => {
   if (subscription.dynamicSecret) return "Enterprise Plan";
@@ -77,6 +81,11 @@ export const INFISICAL_SUPPORT_OPTIONS = [
     <FontAwesomeIcon key={4} className="pr-4 text-sm" icon={faEnvelope} />,
     "Email Support",
     "mailto:[email protected]"
+  ],
+  [
+    <FontAwesomeIcon key={5} className="pr-4 text-sm" icon={faUsers} />,
+    "Instance Admins",
+    "server-admins"
   ]
 ];
 
@@ -89,6 +98,7 @@ export const MinimizedOrgSidebar = () => {
   const [openSupport, setOpenSupport] = useState(false);
   const [openUser, setOpenUser] = useState(false);
   const [openOrg, setOpenOrg] = useState(false);
+  const [showAdminsModal, setShowAdminsModal] = useState(false);
 
   const { user } = useUser();
   const { mutateAsync } = useGetOrgTrialUrl();
@@ -410,21 +420,39 @@ export const MinimizedOrgSidebar = () => {
                 side="right"
                 className="p-1"
               >
-                {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => (
-                  <DropdownMenuItem key={url as string}>
-                    <a
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      href={String(url)}
-                      className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
-                    >
-                      <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
-                        {icon}
-                        <div className="text-sm">{text}</div>
-                      </div>
-                    </a>
-                  </DropdownMenuItem>
-                ))}
+                {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => {
+                  if (url === "server-admins" && isInfisicalCloud()) {
+                    return null;
+                  }
+                  return (
+                    <DropdownMenuItem key={url as string}>
+                      {url === "server-admins" ? (
+                        <button
+                          type="button"
+                          onClick={() => setShowAdminsModal(true)}
+                          className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
+                        >
+                          <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
+                            {icon}
+                            <div className="text-sm">{text}</div>
+                          </div>
+                        </button>
+                      ) : (
+                        <a
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          href={String(url)}
+                          className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
+                        >
+                          <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
+                            {icon}
+                            <div className="text-sm">{text}</div>
+                          </div>
+                        </a>
+                      )}
+                    </DropdownMenuItem>
+                  );
+                })}
                 {envConfig.PLATFORM_VERSION && (
                   <div className="mb-2 mt-2 w-full cursor-default pl-5 text-sm duration-200 hover:text-mineshaft-200">
                     <FontAwesomeIcon icon={faInfo} className="mr-4 px-[0.1rem]" />
@@ -540,6 +568,13 @@ export const MinimizedOrgSidebar = () => {
           </div>
         </nav>
       </aside>
+      <Modal isOpen={showAdminsModal} onOpenChange={setShowAdminsModal}>
+        <ModalContent title="Server Administrators" subTitle="View all server administrators">
+          <div className="mb-2">
+            <ServerAdminsPanel />
+          </div>
+        </ModalContent>
+      </Modal>
       <CreateOrgModal
         isOpen={popUp?.createOrg?.isOpen}
         onClose={() => handlePopUpToggle("createOrg", false)}

frontend/src/layouts/OrganizationLayout/components/ServerAdminsPanel/ServerAdminsPanel.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  Input,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useDebounce } from "@app/hooks";
+import { useGetOrgUsers } from "@app/hooks/api";
+
+export const ServerAdminsPanel = () => {
+  const [searchUserFilter, setSearchUserFilter] = useState("");
+  const [debounedSearchTerm] = useDebounce(searchUserFilter, 500);
+  const { currentOrg } = useOrganization();
+
+  const { data: orgUsers, isPending } = useGetOrgUsers(currentOrg?.id || "");
+
+  const adminUsers = orgUsers?.filter((orgUser) => {
+    const isSuperAdmin = orgUser.user.superAdmin;
+    const matchesSearch = debounedSearchTerm
+      ? orgUser.user.email?.toLowerCase().includes(debounedSearchTerm.toLowerCase()) ||
+        orgUser.user.firstName?.toLowerCase().includes(debounedSearchTerm.toLowerCase()) ||
+        orgUser.user.lastName?.toLowerCase().includes(debounedSearchTerm.toLowerCase())
+      : true;
+    return isSuperAdmin && matchesSearch;
+  });
+
+  const isEmpty = !isPending && (!adminUsers || adminUsers.length === 0);
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="mb-4 px-4">
+        <Input
+          value={searchUserFilter}
+          onChange={(e) => setSearchUserFilter(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search server admins..."
+          className="w-full"
+        />
+      </div>
+      <div className="flex-1 px-2">
+        <TableContainer className="flex max-h-[30vh] flex-col overflow-auto">
+          <Table className="w-full table-fixed">
+            <THead className="sticky top-0 bg-bunker-800">
+              <Tr>
+                <Th className="w-1/2">Name</Th>
+                <Th className="w-1/2">Email</Th>
+              </Tr>
+            </THead>
+            <TBody>
+              {isPending && <TableSkeleton columns={2} innerKey="admins" />}
+              {!isPending &&
+                adminUsers?.map(({ user }) => {
+                  const name =
+                    user.firstName || user.lastName
+                      ? `${user.firstName} ${user.lastName}`
+                      : user.username;
+                  return (
+                    <Tr key={`admin-${user.id}`}>
+                      <Td className="w-1/2 break-words">{name}</Td>
+                      <Td className="w-1/2 break-words">{user.email}</Td>
+                    </Tr>
+                  );
+                })}
+            </TBody>
+          </Table>
+          {isEmpty && (
+            <div className="flex h-32 items-center justify-center text-sm text-mineshaft-400">
+              No server administrators found
+            </div>
+          )}
+        </TableContainer>
+      </div>
+    </div>
+  );
+};

frontend/src/lib/fn/permission.ts

@@ -0,0 +1,36 @@
+import { MongoAbility, subject } from "@casl/ability";
+
+import { ProjectPermissionSet } from "@app/context/ProjectPermissionContext";
+import {
+  ProjectPermissionSecretActions,
+  ProjectPermissionSub,
+  SecretSubjectFields
+} from "@app/context/ProjectPermissionContext/types";
+
+export function hasSecretReadValueOrDescribePermission(
+  permission: MongoAbility<ProjectPermissionSet>,
+  action: Extract<
+    ProjectPermissionSecretActions,
+    ProjectPermissionSecretActions.DescribeSecret | ProjectPermissionSecretActions.ReadValue
+  >,
+  subjectFields?: SecretSubjectFields
+) {
+  let canNewPermission = false;
+  let canOldPermission = false;
+
+  if (subjectFields) {
+    canNewPermission = permission.can(action, subject(ProjectPermissionSub.Secrets, subjectFields));
+    canOldPermission = permission.can(
+      ProjectPermissionSecretActions.DescribeAndReadValue,
+      subject(ProjectPermissionSub.Secrets, subjectFields)
+    );
+  } else {
+    canNewPermission = permission.can(action, ProjectPermissionSub.Secrets);
+    canOldPermission = permission.can(
+      ProjectPermissionSecretActions.DescribeAndReadValue,
+      ProjectPermissionSub.Secrets
+    );
+  }
+
+  return canNewPermission || canOldPermission;
+}

frontend/src/lib/fn/string.ts

@@ -7,3 +7,7 @@ export const formatReservedPaths = (secretPath: string) => {
   }
   return secretPath;
 };
+
+export const camelCaseToSpaces = (input: string) => {
+  return input.replace(/([a-z])([A-Z])/g, "$1 $2");
+};

frontend/src/pages/admin/OverviewPage/components/UserPanel.tsx

@@ -1,6 +1,14 @@
 import { useState } from "react";
-import { faMagnifyingGlass, faUsers, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCheckCircle,
+  faEllipsis,
+  faFilter,
+  faMagnifyingGlass,
+  faUsers,
+  faUserShield
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
@@ -8,7 +16,13 @@ import {
   Badge,
   Button,
   DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
   EmptyState,
+  IconButton,
   Input,
   Table,
   TableContainer,
@@ -17,11 +31,7 @@ import {
   Td,
   Th,
   THead,
-  Tr,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
+  Tr
 } from "@app/components/v2";
 import { useSubscription, useUser } from "@app/context";
 import { useDebounce, usePopUp } from "@app/hooks";
@@ -48,6 +58,7 @@ const UserPanelTable = ({
   ) => void;
 }) => {
   const [searchUserFilter, setSearchUserFilter] = useState("");
+  const [adminsOnly, setAdminsOnly] = useState(false);
   const { user } = useUser();
   const userId = user?.id || "";
   const [debounedSearchTerm] = useDebounce(searchUserFilter, 500);
@@ -55,18 +66,55 @@ const UserPanelTable = ({
 
   const { data, isPending, isFetchingNextPage, hasNextPage, fetchNextPage } = useAdminGetUsers({
     limit: 20,
-    searchTerm: debounedSearchTerm
+    searchTerm: debounedSearchTerm,
+    adminsOnly
   });
 
   const isEmpty = !isPending && !data?.pages?.[0].length;
+  const isTableFiltered = Boolean(adminsOnly);
+
   return (
     <>
-      <Input
-        value={searchUserFilter}
-        onChange={(e) => setSearchUserFilter(e.target.value)}
-        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search users..."
-      />
+      <div className="flex gap-2">
+        <Input
+          value={searchUserFilter}
+          onChange={(e) => setSearchUserFilter(e.target.value)}
+          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+          placeholder="Search users..."
+          className="flex-1"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <IconButton
+              ariaLabel="Filter Users"
+              variant="plain"
+              size="sm"
+              className={twMerge(
+                "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                isTableFiltered && "border-primary/50 text-primary"
+              )}
+            >
+              <FontAwesomeIcon icon={faFilter} />
+            </IconButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="p-0">
+            <DropdownMenuLabel>Filter By</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={(e) => {
+                e.preventDefault();
+                setAdminsOnly(!adminsOnly);
+              }}
+              icon={adminsOnly && <FontAwesomeIcon icon={faCheckCircle} />}
+              iconPos="right"
+            >
+              <div className="flex items-center gap-2">
+                <FontAwesomeIcon icon={faUserShield} className="text-yellow-700" />
+                <span>Server Admins</span>
+              </div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
       <div className="mt-4">
         <TableContainer>
           <Table>

frontend/src/pages/admin/SignUpPage/SignUpPage.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Helmet } from "react-helmet";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -8,16 +7,13 @@ import { AnimatePresence, motion } from "framer-motion";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { generateBackupPDFAsync } from "@app/components/utilities/generateBackupPDF";
 // TODO(akhilmhdh): rewrite this into module functions in lib
 import { saveTokenToLocalStorage } from "@app/components/utilities/saveTokenToLocalStorage";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { Button, ContentLoader, FormControl, Input } from "@app/components/v2";
 import { useServerConfig } from "@app/context";
 import { useCreateAdminUser, useSelectOrganization } from "@app/hooks/api";
-import { generateUserBackupKey, generateUserPassKey } from "@app/lib/crypto";
-
-import { DownloadBackupKeys } from "./components/DownloadBackupKeys";
+import { generateUserPassKey } from "@app/lib/crypto";
 
 const formSchema = z
   .object({
@@ -34,25 +30,17 @@ const formSchema = z
 
 type TFormSchema = z.infer<typeof formSchema>;
 
-enum SignupSteps {
-  DetailsForm = "details-form",
-  BackupKey = "backup-key"
-}
-
 export const SignUpPage = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const {
     control,
     handleSubmit,
-    getValues,
     formState: { isSubmitting }
   } = useForm<TFormSchema>({
     resolver: zodResolver(formSchema)
   });
 
-  const [step, setStep] = useState(SignupSteps.DetailsForm);
-
   const { config } = useServerConfig();
   const { mutateAsync: createAdminUser } = useCreateAdminUser();
   const { mutateAsync: selectOrganization } = useSelectOrganization();
@@ -84,7 +72,7 @@ export const SignUpPage = () => {
       // 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);
+      navigate({ to: "/admin" });
     } catch (err) {
       console.log(err);
       createNotification({
@@ -94,27 +82,7 @@ export const SignUpPage = () => {
     }
   };
 
-  const handleBackupKeyGenerate = async () => {
-    try {
-      const { email, password, firstName, lastName } = getValues();
-      const generatedKey = await generateUserBackupKey(email, password);
-      await generateBackupPDFAsync({
-        generatedKey,
-        personalEmail: email,
-        personalName: `${firstName} ${lastName}`
-      });
-      navigate({ to: "/admin" });
-    } catch (err) {
-      console.log(err);
-      createNotification({
-        type: "error",
-        text: "Failed to generate backup"
-      });
-    }
-  };
-
-  if (config?.initialized && step === SignupSteps.DetailsForm)
-    return <ContentLoader text="Redirecting to admin page..." />;
+  if (config?.initialized) return <ContentLoader text="Redirecting to admin page..." />;
 
   return (
     <div className="flex max-h-screen min-h-screen flex-col justify-center overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
@@ -127,56 +95,28 @@ export const SignUpPage = () => {
       </Helmet>
       <div className="flex items-center justify-center">
         <AnimatePresence mode="wait">
-          {step === SignupSteps.DetailsForm && (
-            <motion.div
-              className="text-mineshaft-200"
-              key="panel-1"
-              transition={{ duration: 0.15 }}
-              initial={{ opacity: 0, translateX: 30 }}
-              animate={{ opacity: 1, translateX: 0 }}
-              exit={{ opacity: 0, translateX: 30 }}
-            >
-              <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="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">
-                  <div className="flex items-center space-x-4">
-                    <Controller
-                      control={control}
-                      name="firstName"
-                      render={({ field, fieldState: { error } }) => (
-                        <FormControl
-                          label="First name"
-                          errorText={error?.message}
-                          isError={Boolean(error)}
-                        >
-                          <Input isFullWidth size="md" {...field} />
-                        </FormControl>
-                      )}
-                    />
-                    <Controller
-                      control={control}
-                      name="lastName"
-                      render={({ field, fieldState: { error } }) => (
-                        <FormControl
-                          label="Last name"
-                          errorText={error?.message}
-                          isError={Boolean(error)}
-                        >
-                          <Input isFullWidth size="md" {...field} />
-                        </FormControl>
-                      )}
-                    />
-                  </div>
+          <motion.div
+            className="text-mineshaft-200"
+            key="panel-1"
+            transition={{ duration: 0.15 }}
+            initial={{ opacity: 0, translateX: 30 }}
+            animate={{ opacity: 1, translateX: 0 }}
+            exit={{ opacity: 0, translateX: 30 }}
+          >
+            <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="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">
+                <div className="flex items-center space-x-4">
                   <Controller
                     control={control}
-                    name="email"
+                    name="firstName"
                     render={({ field, fieldState: { error } }) => (
                       <FormControl
-                        label="Email"
+                        label="First name"
                         errorText={error?.message}
                         isError={Boolean(error)}
                       >
@@ -186,56 +126,66 @@ export const SignUpPage = () => {
                   />
                   <Controller
                     control={control}
-                    name="password"
+                    name="lastName"
                     render={({ field, fieldState: { error } }) => (
                       <FormControl
-                        label="Password"
+                        label="Last name"
                         errorText={error?.message}
                         isError={Boolean(error)}
                       >
-                        <Input isFullWidth size="md" type="password" {...field} />
-                      </FormControl>
-                    )}
-                  />
-                  <Controller
-                    control={control}
-                    name="confirmPassword"
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        label="Confirm password"
-                        errorText={error?.message}
-                        isError={Boolean(error)}
-                      >
-                        <Input isFullWidth size="md" type="password" {...field} />
+                        <Input isFullWidth size="md" {...field} />
                       </FormControl>
                     )}
                   />
                 </div>
-                <Button
-                  type="submit"
-                  colorSchema="primary"
-                  variant="outline_bg"
-                  isFullWidth
-                  className="mt-4"
-                  isLoading={isSubmitting}
-                >
-                  Continue
-                </Button>
-              </form>
-            </motion.div>
-          )}
-          {step === SignupSteps.BackupKey && (
-            <motion.div
-              className="text-mineshaft-200"
-              key="panel-2"
-              transition={{ duration: 0.15 }}
-              initial={{ opacity: 0, translateX: 30 }}
-              animate={{ opacity: 1, translateX: 0 }}
-              exit={{ opacity: 0, translateX: 30 }}
-            >
-              <DownloadBackupKeys onGenerate={handleBackupKeyGenerate} />
-            </motion.div>
-          )}
+                <Controller
+                  control={control}
+                  name="email"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl label="Email" errorText={error?.message} isError={Boolean(error)}>
+                      <Input isFullWidth size="md" {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="password"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Password"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Input isFullWidth size="md" type="password" {...field} />
+                    </FormControl>
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name="confirmPassword"
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Confirm password"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Input isFullWidth size="md" type="password" {...field} />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <Button
+                type="submit"
+                colorSchema="primary"
+                variant="outline_bg"
+                isFullWidth
+                className="mt-4"
+                isLoading={isSubmitting}
+              >
+                Continue
+              </Button>
+            </form>
+          </motion.div>
         </AnimatePresence>
       </div>
     </div>

frontend/src/pages/admin/SignUpPage/components/DownloadBackupKeys/DownloadBackupKeys.tsx

@@ -1,56 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Button } from "@app/components/v2";
-import { useToggle } from "@app/hooks";
-
-type Props = {
-  onGenerate: () => Promise<void>;
-};
-
-export const DownloadBackupKeys = ({ onGenerate }: Props): JSX.Element => {
-  const { t } = useTranslation();
-  const [isLoading, setIsLoading] = useToggle();
-
-  return (
-    <div className="mx-auto mb-36 flex h-full w-full flex-col items-center md:mb-16 md:px-6">
-      <p className="flex flex-col items-center justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
-        <FontAwesomeIcon
-          icon={faWarning}
-          className="mb-6 ml-2 mr-3 pt-1 text-6xl text-bunker-200"
-        />
-        {t("signup.step4-message")}
-      </p>
-      <div className="text-md mt-8 flex w-full max-w-md flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 pb-2 text-center text-bunker-300 md:min-w-[24rem] lg:w-1/6">
-        <div className="m-2 mx-auto mt-4 flex w-full flex-row items-center rounded-md px-3 text-center text-bunker-300 md:mt-8 md:min-w-[23rem] lg:w-1/6">
-          <span className="mb-2">
-            {t("signup.step4-description1")} {t("signup.step4-description3")}
-          </span>
-        </div>
-        <div className="mx-auto mb-2 mt-2 flex w-full flex-col items-center justify-center px-3 text-center text-sm md:mb-4 md:mt-4 md:min-w-[20rem] md:max-w-md md:text-left lg:w-1/6">
-          <div className="text-l w-full py-1 text-lg">
-            <Button
-              onClick={async () => {
-                try {
-                  setIsLoading.on();
-                  await onGenerate();
-                } finally {
-                  setIsLoading.off();
-                }
-              }}
-              size="sm"
-              isFullWidth
-              className="h-12"
-              colorSchema="primary"
-              variant="outline_bg"
-              isLoading={isLoading}
-            >
-              Download PDF
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

frontend/src/pages/admin/SignUpPage/components/DownloadBackupKeys/index.tsx

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

frontend/src/pages/auth/PasswordResetPage/PasswordResetPage.tsx

@@ -1,396 +1,75 @@
-import crypto from "crypto";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "@tanstack/react-router";
+import { z } from "zod";
 
-import { FormEvent, useState } from "react";
-import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useNavigate, useSearch } from "@tanstack/react-router";
-import jsrp from "jsrp";
+import { UserEncryptionVersion } from "@app/hooks/api/auth/types";
 
-import InputField from "@app/components/basic/InputField";
-import passwordCheck from "@app/components/utilities/checks/password/PasswordCheck";
-import Aes256Gcm from "@app/components/utilities/cryptography/aes-256-gcm";
-import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
-import { Button } from "@app/components/v2";
-import { ROUTE_PATHS } from "@app/const/routes";
-import { useResetPassword, useVerifyPasswordResetCode } from "@app/hooks/api";
-import { getBackupEncryptedPrivateKey } from "@app/hooks/api/auth/queries";
+import { ConfirmEmailStep } from "./components/ConfirmEmailStep";
+import { EnterPasswordStep } from "./components/EnterPasswordStep";
+import { InputBackupKeyStep } from "./components/InputBackupKeyStep";
 
-// eslint-disable-next-line new-cap
-const client = new jsrp.client();
+enum Steps {
+  ConfirmEmail = 1,
+  InputBackupKey = 2,
+  EnterNewPassword = 3
+}
+
+const formData = z.object({
+  verificationToken: z.string(),
+  privateKey: z.string(),
+  userEncryptionVersion: z.nativeEnum(UserEncryptionVersion)
+});
+type TFormData = z.infer<typeof formData>;
 
 export const PasswordResetPage = () => {
-  const [verificationToken, setVerificationToken] = useState("");
-  const [step, setStep] = useState(1);
-  const [loading, setLoading] = useState(false);
-  const [backupKey, setBackupKey] = useState("");
-  const [privateKey, setPrivateKey] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [backupKeyError, setBackupKeyError] = useState(false);
-  const [passwordErrorTooShort, setPasswordErrorTooShort] = useState(false);
-  const [passwordErrorTooLong, setPasswordErrorTooLong] = useState(false);
-  const [passwordErrorNoLetterChar, setPasswordErrorNoLetterChar] = useState(false);
-  const [passwordErrorNoNumOrSpecialChar, setPasswordErrorNoNumOrSpecialChar] = useState(false);
-  const [passwordErrorRepeatedChar, setPasswordErrorRepeatedChar] = useState(false);
-  const [passwordErrorEscapeChar, setPasswordErrorEscapeChar] = useState(false);
-  const [passwordErrorLowEntropy, setPasswordErrorLowEntropy] = useState(false);
-  const [passwordErrorBreached, setPasswordErrorBreached] = useState(false);
+  const { watch, setValue } = useForm<TFormData>({
+    resolver: zodResolver(formData)
+  });
 
+  const verificationToken = watch("verificationToken");
+  const encryptionVersion = watch("userEncryptionVersion");
+  const privateKey = watch("privateKey");
+
+  const [step, setStep] = useState<Steps>(Steps.ConfirmEmail);
   const navigate = useNavigate();
-  const search = useSearch({ from: ROUTE_PATHS.Auth.PasswordResetPage.id });
-
-  const {
-    mutateAsync: verifyPasswordResetCodeMutateAsync,
-    isPending: isVerifyPasswordResetLoading
-  } = useVerifyPasswordResetCode();
-  const { mutateAsync: resetPasswordMutateAsync } = useResetPassword();
-
-  const parsedUrl = search;
-  const token = parsedUrl.token as string;
-  const email = (parsedUrl.to as string)?.replace(" ", "+").trim();
-
-  // Decrypt the private key with a backup key
-  const getEncryptedKeyHandler = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    try {
-      const result = await getBackupEncryptedPrivateKey({ verificationToken });
-
-      setPrivateKey(
-        Aes256Gcm.decrypt({
-          ciphertext: result.encryptedPrivateKey,
-          iv: result.iv,
-          tag: result.tag,
-          secret: backupKey
-        })
-      );
-      setStep(3);
-    } catch (err) {
-      console.error(err);
-      setBackupKeyError(true);
-    }
-  };
-
-  // If everything is correct, reset the password
-  const resetPasswordHandler = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    const errorCheck = await passwordCheck({
-      password: newPassword,
-      setPasswordErrorTooShort,
-      setPasswordErrorTooLong,
-      setPasswordErrorNoLetterChar,
-      setPasswordErrorNoNumOrSpecialChar,
-      setPasswordErrorRepeatedChar,
-      setPasswordErrorEscapeChar,
-      setPasswordErrorLowEntropy,
-      setPasswordErrorBreached
-    });
-
-    if (!errorCheck) {
-      client.init(
-        {
-          username: email,
-          password: newPassword
-        },
-        async () => {
-          client.createVerifier(async (_err: any, result: { salt: string; verifier: string }) => {
-            const derivedKey = await deriveArgonKey({
-              password: newPassword,
-              salt: result.salt,
-              mem: 65536,
-              time: 3,
-              parallelism: 1,
-              hashLen: 32
-            });
-
-            if (!derivedKey) throw new Error("Failed to derive key from password");
-
-            const key = crypto.randomBytes(32);
-
-            // create encrypted private key by encrypting the private
-            // key with the symmetric key [key]
-            const {
-              ciphertext: encryptedPrivateKey,
-              iv: encryptedPrivateKeyIV,
-              tag: encryptedPrivateKeyTag
-            } = Aes256Gcm.encrypt({
-              text: privateKey,
-              secret: key
-            });
-
-            // create the protected key by encrypting the symmetric key
-            // [key] with the derived key
-            const {
-              ciphertext: protectedKey,
-              iv: protectedKeyIV,
-              tag: protectedKeyTag
-            } = Aes256Gcm.encrypt({
-              text: key.toString("hex"),
-              secret: Buffer.from(derivedKey.hash)
-            });
-
-            await resetPasswordMutateAsync({
-              protectedKey,
-              protectedKeyIV,
-              protectedKeyTag,
-              encryptedPrivateKey,
-              encryptedPrivateKeyIV,
-              encryptedPrivateKeyTag,
-              salt: result.salt,
-              verifier: result.verifier,
-              verificationToken,
-              password: newPassword
-            });
-
-            navigate({ to: "/login" });
-
-            setLoading(false);
-          });
-        }
-      );
-    }
-  };
-
-  // Click a button to confirm email
-  const stepConfirmEmail = (
-    <div className="mx-1 my-32 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 py-6 drop-shadow-xl md:max-w-lg md:px-6">
-      <p className="mb-8 flex justify-center bg-gradient-to-br from-sky-400 to-primary bg-clip-text text-center text-4xl font-semibold text-transparent">
-        Confirm your email
-      </p>
-      <img
-        src="/images/envelope.svg"
-        style={{ height: "262px", width: "410px" }}
-        alt="verify email"
-      />
-      <div className="mx-auto mb-2 mt-4 flex max-h-24 max-w-md flex-col items-center justify-center px-4 text-lg md:p-2">
-        <Button
-          onClick={async () => {
-            try {
-              const response = await verifyPasswordResetCodeMutateAsync({
-                email,
-                code: token
-              });
-
-              setVerificationToken(response.token);
-              setStep(2);
-            } catch (err) {
-              console.log("ERROR", err);
-              navigate({ to: "/email-not-verified" });
-            }
-          }}
-          isLoading={isVerifyPasswordResetLoading}
-          size="lg"
-        >
-          Confirm Email
-        </Button>
-      </div>
-    </div>
-  );
-
-  // Input backup key
-  const stepInputBackupKey = (
-    <form
-      onSubmit={getEncryptedKeyHandler}
-      className="mx-1 my-32 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pb-3 pt-6 drop-shadow-xl md:max-w-lg md:px-6"
-    >
-      <p className="mx-auto mb-4 flex w-max justify-center text-2xl font-semibold text-bunker-100 md:text-3xl">
-        Enter your backup key
-      </p>
-      <div className="mt-4 flex flex-row items-center justify-center md:mx-2 md:pb-4">
-        <p className="flex w-max max-w-md justify-center text-sm text-gray-400">
-          You can find it in your emergency kit. You had to download the emergency kit during
-          signup.
-        </p>
-      </div>
-      <div className="mt-4 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-0 md:max-h-28 md:p-2">
-        <InputField
-          label="Backup Key"
-          onChangeHandler={setBackupKey}
-          type="password"
-          value={backupKey}
-          placeholder=""
-          isRequired
-          error={backupKeyError}
-          errorText="Something is wrong with the backup key"
-        />
-      </div>
-      <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
-        <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
-          <Button type="submit" size="lg">
-            Submit Backup Key
-          </Button>
-        </div>
-      </div>
-    </form>
-  );
-
-  // Enter new password
-  const stepEnterNewPassword = (
-    <form
-      onSubmit={resetPasswordHandler}
-      className="mx-1 my-32 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pb-3 pt-6 drop-shadow-xl md:max-w-lg md:px-6"
-    >
-      <p className="mx-auto flex w-max justify-center text-2xl font-semibold text-bunker-100 md:text-3xl">
-        Enter new password
-      </p>
-      <div className="mt-1 flex flex-row items-center justify-center md:mx-2 md:pb-4">
-        <p className="flex w-max max-w-md justify-center text-sm text-gray-400">
-          Make sure you save it somewhere safe.
-        </p>
-      </div>
-      <div className="mt-4 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-0 md:max-h-28 md:p-2">
-        <InputField
-          label="New Password"
-          onChangeHandler={(password) => {
-            setNewPassword(password);
-            passwordCheck({
-              password,
-              setPasswordErrorTooShort,
-              setPasswordErrorTooLong,
-              setPasswordErrorNoLetterChar,
-              setPasswordErrorNoNumOrSpecialChar,
-              setPasswordErrorRepeatedChar,
-              setPasswordErrorEscapeChar,
-              setPasswordErrorLowEntropy,
-              setPasswordErrorBreached
-            });
-          }}
-          type="password"
-          value={newPassword}
-          isRequired
-          error={
-            passwordErrorTooShort &&
-            passwordErrorTooLong &&
-            passwordErrorNoLetterChar &&
-            passwordErrorNoNumOrSpecialChar &&
-            passwordErrorRepeatedChar &&
-            passwordErrorEscapeChar &&
-            passwordErrorLowEntropy &&
-            passwordErrorBreached
-          }
-          autoComplete="new-password"
-          id="new-password"
-        />
-      </div>
-      {passwordErrorTooShort ||
-      passwordErrorTooLong ||
-      passwordErrorNoLetterChar ||
-      passwordErrorNoNumOrSpecialChar ||
-      passwordErrorRepeatedChar ||
-      passwordErrorEscapeChar ||
-      passwordErrorLowEntropy ||
-      passwordErrorBreached ? (
-        <div className="mx-2 mb-2 mt-3 flex w-full max-w-md flex-col items-start rounded-md bg-white/5 px-2 py-2">
-          <div className="mb-1 text-sm text-gray-400">Password should contain:</div>
-          <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorTooShort ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-            ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-            )}
-            <div className={`${passwordErrorTooShort ? "text-gray-400" : "text-gray-600"} text-sm`}>
-              at least 14 characters
-            </div>
-          </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorTooLong ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-            ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-            )}
-            <div className={`${passwordErrorTooLong ? "text-gray-400" : "text-gray-600"} text-sm`}>
-              at most 100 characters
-            </div>
-          </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorNoLetterChar ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-            ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-            )}
-            <div
-              className={`${passwordErrorNoLetterChar ? "text-gray-400" : "text-gray-600"} text-sm`}
-            >
-              at least 1 letter character
-            </div>
-          </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorNoNumOrSpecialChar ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-            ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-            )}
-            <div
-              className={`${
-                passwordErrorNoNumOrSpecialChar ? "text-gray-400" : "text-gray-600"
-              } text-sm`}
-            >
-              at least 1 number or special character
-            </div>
-          </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorRepeatedChar ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-            ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-            )}
-            <div
-              className={`${passwordErrorRepeatedChar ? "text-gray-400" : "text-gray-600"} text-sm`}
-            >
-              at most 3 repeated, consecutive characters
-            </div>
-          </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorEscapeChar ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-            ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-            )}
-            <div
-              className={`${passwordErrorEscapeChar ? "text-gray-400" : "text-gray-600"} text-sm`}
-            >
-              No escape characters allowed.
-            </div>
-          </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorLowEntropy ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-            ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-            )}
-            <div
-              className={`${passwordErrorLowEntropy ? "text-gray-400" : "text-gray-600"} text-sm`}
-            >
-              Password contains personal info.
-            </div>
-          </div>
-          <div className="ml-1 flex flex-row items-center justify-start">
-            {passwordErrorBreached ? (
-              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
-            ) : (
-              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
-            )}
-            <div className={`${passwordErrorBreached ? "text-gray-400" : "text-gray-600"} text-sm`}>
-              Password was found in a data breach.
-            </div>
-          </div>
-        </div>
-      ) : (
-        <div className="py-2" />
-      )}
-      <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
-        <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
-          <Button type="submit" onClick={() => setLoading(true)} size="lg" isLoading={loading}>
-            Submit New Password
-          </Button>
-        </div>
-      </div>
-    </form>
-  );
 
   return (
     <div className="flex h-screen w-full flex-col items-center justify-center bg-bunker-800">
-      {step === 1 && stepConfirmEmail}
-      {step === 2 && stepInputBackupKey}
-      {step === 3 && stepEnterNewPassword}
+      {step === Steps.ConfirmEmail && (
+        <ConfirmEmailStep
+          onComplete={(verifyToken, userEncryptionVersion) => {
+            setValue("verificationToken", verifyToken);
+            setValue("userEncryptionVersion", userEncryptionVersion);
+
+            if (userEncryptionVersion === UserEncryptionVersion.V2) {
+              setStep(Steps.EnterNewPassword);
+            } else {
+              setStep(Steps.InputBackupKey);
+            }
+          }}
+        />
+      )}
+      {step === Steps.InputBackupKey && (
+        <InputBackupKeyStep
+          verificationToken={verificationToken}
+          onComplete={(key) => {
+            setValue("privateKey", key);
+            setStep(Steps.EnterNewPassword);
+          }}
+        />
+      )}
+      {step === Steps.EnterNewPassword && (
+        <EnterPasswordStep
+          verificationToken={verificationToken}
+          privateKey={privateKey}
+          encryptionVersion={encryptionVersion}
+          onComplete={() => {
+            navigate({ to: "/login" });
+          }}
+        />
+      )}
     </div>
   );
 };

frontend/src/pages/auth/PasswordResetPage/components/ConfirmEmailStep.tsx

@@ -0,0 +1,54 @@
+import { useNavigate, useSearch } from "@tanstack/react-router";
+
+import { Button } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { useVerifyPasswordResetCode } from "@app/hooks/api";
+import { UserEncryptionVersion } from "@app/hooks/api/auth/types";
+
+type Props = {
+  onComplete: (verificationToken: string, encryptionVersion: UserEncryptionVersion) => void;
+};
+
+export const ConfirmEmailStep = ({ onComplete }: Props) => {
+  const navigate = useNavigate();
+  const search = useSearch({ from: ROUTE_PATHS.Auth.PasswordResetPage.id });
+  const { token, to: email } = search;
+
+  const {
+    mutateAsync: verifyPasswordResetCodeMutateAsync,
+    isPending: isVerifyPasswordResetLoading
+  } = useVerifyPasswordResetCode();
+  return (
+    <div className="mx-1 my-32 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 py-6 drop-shadow-xl md:max-w-lg md:px-6">
+      <p className="mb-8 flex justify-center bg-gradient-to-br from-sky-400 to-primary bg-clip-text text-center text-4xl font-semibold text-transparent">
+        Confirm your email
+      </p>
+      <img
+        src="/images/envelope.svg"
+        style={{ height: "262px", width: "410px" }}
+        alt="verify email"
+      />
+      <div className="mx-auto mb-2 mt-4 flex max-h-24 max-w-md flex-col items-center justify-center px-4 text-lg md:p-2">
+        <Button
+          onClick={async () => {
+            try {
+              const response = await verifyPasswordResetCodeMutateAsync({
+                email,
+                code: token
+              });
+
+              onComplete(response.token, response.userEncryptionVersion);
+            } catch (err) {
+              console.log("ERROR", err);
+              navigate({ to: "/email-not-verified" });
+            }
+          }}
+          isLoading={isVerifyPasswordResetLoading}
+          size="lg"
+        >
+          Confirm Email
+        </Button>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/auth/PasswordResetPage/components/EnterPasswordStep.tsx

@@ -0,0 +1,325 @@
+import crypto from "crypto";
+
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useSearch } from "@tanstack/react-router";
+import jsrp from "jsrp";
+import { z } from "zod";
+
+import passwordCheck from "@app/components/utilities/checks/password/PasswordCheck";
+import Aes256Gcm from "@app/components/utilities/cryptography/aes-256-gcm";
+import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { useResetPassword, useResetPasswordV2 } from "@app/hooks/api";
+import { UserEncryptionVersion } from "@app/hooks/api/auth/types";
+
+const formData = z.object({
+  password: z.string(),
+  passwordErrorTooShort: z.boolean().optional(),
+  passwordErrorTooLong: z.boolean().optional(),
+  passwordErrorNoLetterChar: z.boolean().optional(),
+  passwordErrorNoNumOrSpecialChar: z.boolean().optional(),
+  passwordErrorRepeatedChar: z.boolean().optional(),
+  passwordErrorEscapeChar: z.boolean().optional(),
+  passwordErrorLowEntropy: z.boolean().optional(),
+  passwordErrorBreached: z.boolean()
+});
+type TFormData = z.infer<typeof formData>;
+
+type Props = {
+  verificationToken: string;
+  privateKey: string;
+  encryptionVersion: UserEncryptionVersion;
+  onComplete: () => void;
+};
+
+export const EnterPasswordStep = ({
+  verificationToken,
+  encryptionVersion,
+  privateKey,
+  onComplete
+}: Props) => {
+  const search = useSearch({ from: ROUTE_PATHS.Auth.PasswordResetPage.id });
+  const { to: email } = search;
+
+  const {
+    control,
+    watch,
+    handleSubmit,
+    setValue,
+    formState: { isSubmitting }
+  } = useForm<TFormData>({
+    resolver: zodResolver(formData)
+  });
+  const { mutateAsync: resetPassword, isPending: isLoading } = useResetPassword();
+  const { mutateAsync: resetPasswordV2, isPending: isLoadingV2 } = useResetPasswordV2();
+
+  const passwordErrorTooShort = watch("passwordErrorTooShort");
+  const passwordErrorTooLong = watch("passwordErrorTooLong");
+  const passwordErrorNoLetterChar = watch("passwordErrorNoLetterChar");
+  const passwordErrorNoNumOrSpecialChar = watch("passwordErrorNoNumOrSpecialChar");
+  const passwordErrorRepeatedChar = watch("passwordErrorRepeatedChar");
+  const passwordErrorEscapeChar = watch("passwordErrorEscapeChar");
+  const passwordErrorLowEntropy = watch("passwordErrorLowEntropy");
+  const passwordErrorBreached = watch("passwordErrorBreached");
+
+  const isPasswordError =
+    passwordErrorTooShort ||
+    passwordErrorTooLong ||
+    passwordErrorNoLetterChar ||
+    passwordErrorNoNumOrSpecialChar ||
+    passwordErrorRepeatedChar ||
+    passwordErrorEscapeChar ||
+    passwordErrorLowEntropy ||
+    passwordErrorBreached;
+
+  const handlePasswordCheck = async (checkPassword: string) => {
+    const errorCheck = await passwordCheck({
+      password: checkPassword,
+      setPasswordErrorTooShort: (v) => setValue("passwordErrorTooShort", v),
+      setPasswordErrorTooLong: (v) => setValue("passwordErrorTooLong", v),
+      setPasswordErrorNoLetterChar: (v) => setValue("passwordErrorNoLetterChar", v),
+      setPasswordErrorNoNumOrSpecialChar: (v) => setValue("passwordErrorNoNumOrSpecialChar", v),
+      setPasswordErrorRepeatedChar: (v) => setValue("passwordErrorRepeatedChar", v),
+      setPasswordErrorEscapeChar: (v) => setValue("passwordErrorEscapeChar", v),
+      setPasswordErrorLowEntropy: (v) => setValue("passwordErrorLowEntropy", v),
+      setPasswordErrorBreached: (v) => setValue("passwordErrorBreached", v)
+    });
+
+    return errorCheck;
+  };
+
+  const resetPasswordHandler = async (data: TFormData) => {
+    const errorCheck = await handlePasswordCheck(data.password);
+
+    if (errorCheck) return;
+
+    if (encryptionVersion === UserEncryptionVersion.V2) {
+      await resetPasswordV2({
+        newPassword: data.password,
+        verificationToken
+      });
+    } else {
+      // eslint-disable-next-line new-cap
+      const client = new jsrp.client();
+      client.init(
+        {
+          username: email,
+          password: data.password
+        },
+        async () => {
+          client.createVerifier(async (_err: any, result: { salt: string; verifier: string }) => {
+            const derivedKey = await deriveArgonKey({
+              password: data.password,
+              salt: result.salt,
+              mem: 65536,
+              time: 3,
+              parallelism: 1,
+              hashLen: 32
+            });
+
+            if (!derivedKey) throw new Error("Failed to derive key from password");
+
+            const key = crypto.randomBytes(32);
+
+            // create encrypted private key by encrypting the private
+            // key with the symmetric key [key]
+            const {
+              ciphertext: encryptedPrivateKey,
+              iv: encryptedPrivateKeyIV,
+              tag: encryptedPrivateKeyTag
+            } = Aes256Gcm.encrypt({
+              text: privateKey,
+              secret: key
+            });
+
+            // create the protected key by encrypting the symmetric key
+            // [key] with the derived key
+            const {
+              ciphertext: protectedKey,
+              iv: protectedKeyIV,
+              tag: protectedKeyTag
+            } = Aes256Gcm.encrypt({
+              text: key.toString("hex"),
+              secret: Buffer.from(derivedKey.hash)
+            });
+
+            await resetPassword({
+              protectedKey,
+              protectedKeyIV,
+              protectedKeyTag,
+              encryptedPrivateKey,
+              encryptedPrivateKeyIV,
+              encryptedPrivateKeyTag,
+              salt: result.salt,
+              verifier: result.verifier,
+              verificationToken,
+              password: data.password
+            });
+          });
+        }
+      );
+    }
+    onComplete();
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(resetPasswordHandler)}
+      className="mx-1 my-32 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pb-3 pt-6 drop-shadow-xl md:max-w-lg md:px-6"
+    >
+      <p className="mx-auto flex w-max justify-center text-2xl font-semibold text-bunker-100 md:text-3xl">
+        Enter new password
+      </p>
+      <div className="mt-1 flex flex-row items-center justify-center md:mx-2 md:pb-4">
+        <p className="flex w-max max-w-md justify-center text-sm text-gray-400">
+          Make sure you save it somewhere safe.
+        </p>
+      </div>
+      <div className="mt-4 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-0 md:max-h-28 md:p-2">
+        <Controller
+          control={control}
+          name="password"
+          render={({ field }) => (
+            <FormControl
+              className="w-full"
+              label="New Password"
+              isRequired
+              isError={isPasswordError}
+            >
+              <Input
+                {...field}
+                onChange={(e) => {
+                  field.onChange(e);
+                  handlePasswordCheck(e.target.value);
+                }}
+                type="password"
+              />
+            </FormControl>
+          )}
+        />
+      </div>
+      {passwordErrorTooShort ||
+      passwordErrorTooLong ||
+      passwordErrorNoLetterChar ||
+      passwordErrorNoNumOrSpecialChar ||
+      passwordErrorRepeatedChar ||
+      passwordErrorEscapeChar ||
+      passwordErrorLowEntropy ||
+      passwordErrorBreached ? (
+        <div className="mx-2 mb-2 mt-3 flex w-full max-w-md flex-col items-start rounded-md bg-white/5 px-2 py-2">
+          <div className="mb-1 text-sm text-gray-400">Password should contain:</div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+            {passwordErrorTooShort ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div className={`${passwordErrorTooShort ? "text-gray-400" : "text-gray-600"} text-sm`}>
+              at least 14 characters
+            </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+            {passwordErrorTooLong ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div className={`${passwordErrorTooLong ? "text-gray-400" : "text-gray-600"} text-sm`}>
+              at most 100 characters
+            </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+            {passwordErrorNoLetterChar ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div
+              className={`${passwordErrorNoLetterChar ? "text-gray-400" : "text-gray-600"} text-sm`}
+            >
+              at least 1 letter character
+            </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+            {passwordErrorNoNumOrSpecialChar ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div
+              className={`${
+                passwordErrorNoNumOrSpecialChar ? "text-gray-400" : "text-gray-600"
+              } text-sm`}
+            >
+              at least 1 number or special character
+            </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+            {passwordErrorRepeatedChar ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div
+              className={`${passwordErrorRepeatedChar ? "text-gray-400" : "text-gray-600"} text-sm`}
+            >
+              at most 3 repeated, consecutive characters
+            </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+            {passwordErrorEscapeChar ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div
+              className={`${passwordErrorEscapeChar ? "text-gray-400" : "text-gray-600"} text-sm`}
+            >
+              No escape characters allowed.
+            </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+            {passwordErrorLowEntropy ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div
+              className={`${passwordErrorLowEntropy ? "text-gray-400" : "text-gray-600"} text-sm`}
+            >
+              Password contains personal info.
+            </div>
+          </div>
+          <div className="ml-1 flex flex-row items-center justify-start">
+            {passwordErrorBreached ? (
+              <FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
+            ) : (
+              <FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
+            )}
+            <div className={`${passwordErrorBreached ? "text-gray-400" : "text-gray-600"} text-sm`}>
+              Password was found in a data breach.
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="py-2" />
+      )}
+      <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
+        <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
+          <Button
+            type="submit"
+            colorSchema="secondary"
+            isLoading={isSubmitting || isLoading || isLoadingV2}
+            isDisabled={isSubmitting || isLoading || isLoadingV2}
+          >
+            Change Password
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};

frontend/src/pages/auth/PasswordResetPage/components/InputBackupKeyStep.tsx

@@ -0,0 +1,87 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import Aes256Gcm from "@app/components/utilities/cryptography/aes-256-gcm";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { getBackupEncryptedPrivateKey } from "@app/hooks/api/auth/queries";
+
+type Props = {
+  verificationToken: string;
+  onComplete: (privateKey: string) => void;
+};
+
+const formData = z.object({
+  backupKey: z.string()
+});
+type TFormData = z.infer<typeof formData>;
+
+export const InputBackupKeyStep = ({ verificationToken, onComplete }: Props) => {
+  const { control, handleSubmit, setError } = useForm<TFormData>({
+    resolver: zodResolver(formData)
+  });
+
+  const getEncryptedKeyHandler = async (data: z.infer<typeof formData>) => {
+    try {
+      const result = await getBackupEncryptedPrivateKey({ verificationToken });
+
+      const privateKey = Aes256Gcm.decrypt({
+        ciphertext: result.encryptedPrivateKey,
+        iv: result.iv,
+        tag: result.tag,
+        secret: data.backupKey
+      });
+
+      onComplete(privateKey);
+      // setStep(3);
+    } catch (err) {
+      console.error(err);
+      setError("backupKey", { message: "Failed to decrypt private key" });
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(getEncryptedKeyHandler)}
+      className="mx-1 my-32 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker px-4 pb-3 pt-6 drop-shadow-xl md:max-w-lg md:px-6"
+    >
+      <p className="mx-auto mb-4 flex w-max justify-center text-2xl font-semibold text-bunker-100">
+        Enter your backup key
+      </p>
+      <div className="mt-4 flex flex-row items-center justify-center md:mx-2 md:pb-4">
+        <p className="flex w-full px-4 text-center text-sm text-gray-400 sm:max-w-md">
+          You can find it in your emergency kit. You had to download the emergency kit during
+          signup.
+        </p>
+      </div>
+      <div className="mt-4 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-0 md:max-h-28 md:p-2">
+        <Controller
+          control={control}
+          name="backupKey"
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl
+              className="w-full"
+              isError={Boolean(error)}
+              errorText={error?.message}
+              label="Backup Key"
+            >
+              <Input
+                className="w-full"
+                value={value}
+                onChange={onChange}
+                placeholder="08af467b815ffa412f2c98cc3326acdb"
+              />
+            </FormControl>
+          )}
+        />
+      </div>
+      <div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
+        <div className="text-l m-8 mt-6 px-8 py-3 text-lg">
+          <Button type="submit" colorSchema="secondary">
+            Submit Backup Key
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};

frontend/src/pages/auth/SignUpInvitePage/SignUpInvitePage.tsx

@@ -4,7 +4,7 @@ import crypto from "crypto";
 
 import { useState } from "react";
 import { Helmet } from "react-helmet";
-import { faWarning, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, useNavigate, useSearch } from "@tanstack/react-router";
 import jsrp from "jsrp";
@@ -16,7 +16,6 @@ import InputField from "@app/components/basic/InputField";
 import checkPassword from "@app/components/utilities/checks/password/checkPassword";
 import Aes256Gcm from "@app/components/utilities/cryptography/aes-256-gcm";
 import { deriveArgonKey } from "@app/components/utilities/cryptography/crypto";
-import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
 import { saveTokenToLocalStorage } from "@app/components/utilities/saveTokenToLocalStorage";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { Button } from "@app/components/v2";
@@ -54,8 +53,6 @@ export const SignupInvitePage = () => {
   const [lastNameError, setLastNameError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [step, setStep] = useState(1);
-  const [, setBackupKeyError] = useState(false);
-  const [, setBackupKeyIssued] = useState(false);
   const [errors, setErrors] = useState<Errors>({});
 
   const [shouldShowMfa, toggleShowMfa] = useToggle(false);
@@ -205,7 +202,9 @@ export const SignupInvitePage = () => {
 
                 localStorage.setItem("orgData.id", orgId);
 
-                setStep(3);
+                navigate({
+                  to: `/organization/${ProjectType.SecretManager}/overview` as const
+                });
               };
 
               await completeSignupFlow();
@@ -367,44 +366,6 @@ export const SignupInvitePage = () => {
     </div>
   );
 
-  // Step 4 of the sign up process (download the emergency kit pdf)
-  const step4 = (
-    <div className="h-7/12 mx-1 mb-36 flex w-full max-w-xs flex-col items-center rounded-xl border border-mineshaft-600 bg-mineshaft-800 px-4 pb-6 pt-8 drop-shadow-xl md:mb-16 md:max-w-lg md:px-6">
-      <p className="flex justify-center bg-gradient-to-br from-white to-mineshaft-300 bg-clip-text text-center text-4xl font-semibold text-transparent">
-        Save your Emergency Kit
-      </p>
-      <div className="text-md mt-4 flex w-full max-w-md flex-col items-center justify-center rounded-md px-2 text-gray-400 md:mt-8">
-        <div>
-          If you get locked out of your account, your Emergency Kit is the only way to sign in.
-        </div>
-        <div className="mt-3">We recommend you download it and keep it somewhere safe.</div>
-      </div>
-      <div className="mx-auto mt-4 flex w-full max-w-xs flex-row items-center rounded-md bg-white/10 p-2 text-gray-400 md:max-w-md">
-        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" />
-        It contains your Secret Key which we cannot access or recover for you if you lose it.
-      </div>
-      <div className="mx-auto mt-4 flex max-h-24 max-w-max flex-col items-center justify-center px-2 py-3 text-lg md:px-4 md:py-5">
-        <Button
-          onClick={async () => {
-            await issueBackupKey({
-              email,
-              password,
-              personalName: `${firstName} ${lastName}`,
-              setBackupKeyError,
-              setBackupKeyIssued
-            });
-            navigate({
-              to: `/organization/${ProjectType.SecretManager}/overview` as const
-            });
-          }}
-          size="lg"
-        >
-          Download PDF
-        </Button>
-      </div>
-    </div>
-  );
-
   return (
     <div className="flex h-screen flex-col items-center justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
       <Helmet>
@@ -425,7 +386,8 @@ export const SignupInvitePage = () => {
               <img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
             </div>
           </Link>
-          {step === 1 ? stepConfirmEmail : step === 2 ? main : step4}
+          {step === 1 && stepConfirmEmail}
+          {step === 2 && main}
         </>
       )}
     </div>

frontend/src/pages/auth/SignUpPage/SignUpPage.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from "react-i18next";
 import { useNavigate } from "@tanstack/react-router";
 
 import CodeInputStep from "@app/components/auth/CodeInputStep";
-import DownloadBackupPDF from "@app/components/auth/DonwloadBackupPDFStep";
 import EnterEmailStep from "@app/components/auth/EnterEmailStep";
 import InitialSignupStep from "@app/components/auth/InitialSignupStep";
 import TeamInviteStep from "@app/components/auth/TeamInviteStep";
@@ -72,7 +71,7 @@ export const SignUpPage = () => {
         incrementStep();
       }
 
-      if (!serverDetails?.emailConfigured && step === 5) {
+      if (!serverDetails?.emailConfigured && step === 4) {
         navigate({
           to: `/organization/${ProjectType.SecretManager}/overview` as const
         });
@@ -119,17 +118,6 @@ export const SignUpPage = () => {
       );
     }
 
-    if (registerStep === 4) {
-      return (
-        <DownloadBackupPDF
-          incrementStep={incrementStep}
-          email={email}
-          password={password}
-          name={name}
-        />
-      );
-    }
-
     if (serverDetails?.emailConfigured) {
       return <TeamInviteStep />;
     }

frontend/src/pages/auth/SignUpSsoPage/SignUpSsoPage.tsx

@@ -6,7 +6,6 @@ import { jwtDecode } from "jwt-decode";
 
 import { ROUTE_PATHS } from "@app/const/routes";
 
-import { BackupPDFStep } from "./components/BackupPDFStep";
 import { EmailConfirmationStep } from "./components/EmailConfirmationStep";
 import { UserInfoSSOStep } from "./components/UserInfoSSOStep";
 
@@ -57,14 +56,9 @@ export const SignupSsoPage = () => {
             providerOrganizationName={organizationName}
             password={password}
             setPassword={setPassword}
-            setStep={setStep}
             providerAuthToken={token}
           />
         );
-      case 2:
-        return (
-          <BackupPDFStep email={username} password={password} name={`${firstName} ${lastName}`} />
-        );
       default:
         return <div />;
     }

frontend/src/pages/auth/SignUpSsoPage/components/BackupPDFStep/BackupPDFStep.tsx

@@ -1,71 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { faWarning } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useNavigate } from "@tanstack/react-router";
-
-import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKey";
-import { Button } from "@app/components/v2";
-import { ProjectType } from "@app/hooks/api/workspace/types";
-
-interface DownloadBackupPDFStepProps {
-  email: string;
-  password: string;
-  name: string;
-}
-
-/**
- * This is the step of the signup flow where the user downloads the backup pdf
- * @param {object} obj
- * @param {function} obj.incrementStep - function that moves the user on to the next stage of signup
- * @param {string} obj.email - user's email
- * @param {string} obj.password - user's password
- * @param {string} obj.name - user's name
- * @returns
- */
-export const BackupPDFStep = ({ email, password, name }: DownloadBackupPDFStepProps) => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-
-  return (
-    <div className="mx-auto mb-36 flex h-full w-full flex-col items-center md:mb-16 md:px-6">
-      <p className="flex justify-center bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
-        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />
-        {t("signup.step4-message")}
-      </p>
-      <div className="text-md mt-8 flex w-full max-w-md flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 pb-2 text-center text-bunker-300 md:min-w-[24rem] lg:w-1/6">
-        <div className="m-2 mx-auto mt-4 flex w-full flex-row items-center rounded-md px-3 text-center text-bunker-300 md:mt-8 md:min-w-[23rem] lg:w-1/6">
-          <span className="mb-2">
-            {t("signup.step4-description1")} {t("signup.step4-description3")}
-          </span>
-        </div>
-        <div className="mx-auto mb-2 mt-2 flex w-full flex-col items-center justify-center px-3 text-center text-sm md:mb-4 md:mt-4 md:min-w-[20rem] md:max-w-md md:text-left lg:w-1/6">
-          <div className="text-l w-full py-1 text-lg">
-            <Button
-              onClick={async () => {
-                await issueBackupKey({
-                  email,
-                  password,
-                  personalName: name,
-                  setBackupKeyError: () => {},
-                  setBackupKeyIssued: () => {}
-                });
-
-                navigate({
-                  to: `/organization/${ProjectType.SecretManager}/overview` as const
-                });
-              }}
-              size="sm"
-              isFullWidth
-              className="h-12"
-              colorSchema="primary"
-              variant="outline_bg"
-            >
-              {" "}
-              Download PDF{" "}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

frontend/src/pages/auth/SignUpSsoPage/components/BackupPDFStep/index.tsx

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

frontend/src/pages/auth/SignUpSsoPage/components/UserInfoSSOStep/UserInfoSSOStep.tsx

@@ -2,6 +2,7 @@ import crypto from "crypto";
 
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "@tanstack/react-router";
 import jsrp from "jsrp";
 import nacl from "tweetnacl";
 import { encodeBase64 } from "tweetnacl-util";
@@ -17,12 +18,12 @@ import { useToggle } from "@app/hooks";
 import { completeAccountSignup, useSelectOrganization } from "@app/hooks/api/auth/queries";
 import { MfaMethod } from "@app/hooks/api/auth/types";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
+import { ProjectType } from "@app/hooks/api/workspace/types";
 
 // eslint-disable-next-line new-cap
 const client = new jsrp.client();
 
 type Props = {
-  setStep: (step: number) => void;
   username: string;
   password: string;
   setPassword: (value: string) => void;
@@ -50,7 +51,6 @@ export const UserInfoSSOStep = ({
   providerOrganizationName,
   password,
   setPassword,
-  setStep,
   providerAuthToken
 }: Props) => {
   const [nameError, setNameError] = useState(false);
@@ -63,6 +63,7 @@ export const UserInfoSSOStep = ({
   const { t } = useTranslation();
   const { mutateAsync: selectOrganization } = useSelectOrganization();
   const [mfaSuccessCallback, setMfaSuccessCallback] = useState<() => void>(() => {});
+  const navigate = useNavigate();
 
   useEffect(() => {
     const randomPassword = crypto.randomBytes(32).toString("hex");
@@ -202,7 +203,9 @@ export const UserInfoSSOStep = ({
                   }
 
                   localStorage.setItem("orgData.id", orgId);
-                  setStep(2);
+                  navigate({
+                    to: `/organization/${ProjectType.SecretManager}/overview` as const
+                  });
                 } catch (error) {
                   setIsLoading(false);
                   console.error(error);

frontend/src/pages/auth/VerifyEmailPage/VerifyEmailPage.tsx

@@ -72,8 +72,9 @@ export const VerifyEmailPage = () => {
             Forgot your password?
           </p>
           <div className="mt-4 flex flex-row items-center justify-center md:mx-2 md:pb-4">
-            <p className="flex w-max justify-center text-sm text-gray-400">
-              You will need your emergency kit. Enter your email to start account recovery.
+            <p className="flex w-max justify-center text-center text-sm text-gray-400">
+              Enter your email to start the password reset process. You will receive an email with
+              instructions.
             </p>
           </div>
           <div className="mt-4 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-0 md:max-h-28 md:p-2">
@@ -102,8 +103,10 @@ export const VerifyEmailPage = () => {
             Look for an email in your inbox.
           </p>
           <div className="mt-4 flex flex-row items-center justify-center md:mx-2 md:pb-4">
-            <p className="flex w-max justify-center text-center text-sm text-gray-400">
-              An email with instructions has been sent to {email}.
+            <p className="w-max text-center text-sm text-gray-400">
+              If the email is in our system, you will receive an email at{" "}
+              <span className="italic">{email}</span> with instructions on how to reset your
+              password.
             </p>
           </div>
         </div>

frontend/src/pages/cert-manager/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -1,11 +1,12 @@
+import { ProjectOverviewChangeSection } from "@app/components/project/ProjectOverviewChangeSection";
+
 import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
 import { DeleteProjectSection } from "../DeleteProjectSection";
-import { ProjectOverviewChangeSection } from "../ProjectOverviewChangeSection";
 
 export const ProjectGeneralTab = () => {
   return (
     <div>
-      <ProjectOverviewChangeSection />
+      <ProjectOverviewChangeSection showSlugField />
       <AuditLogsRetentionSection />
       <DeleteProjectSection />
     </div>

frontend/src/pages/cert-manager/SettingsPage/components/ProjectOverviewChangeSection/CopyButton.tsx

@@ -1,51 +0,0 @@
-import { useCallback } from "react";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { createNotification } from "@app/components/notifications";
-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 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 px-3 py-2 text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-        {hoverText}
-      </span>
-    </Button>
-  );
-};

frontend/src/pages/cert-manager/SettingsPage/components/ProjectOverviewChangeSection/index.tsx

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

frontend/src/pages/cert-manager/SettingsPage/components/index.tsx

@@ -1,2 +1 @@
 export { DeleteProjectSection } from "./DeleteProjectSection";
-export { ProjectOverviewChangeSection } from "./ProjectOverviewChangeSection";

frontend/src/pages/kms/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -1,11 +1,12 @@
+import { ProjectOverviewChangeSection } from "@app/components/project/ProjectOverviewChangeSection";
+
 import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
 import { DeleteProjectSection } from "../DeleteProjectSection";
-import { ProjectOverviewChangeSection } from "../ProjectOverviewChangeSection";
 
 export const ProjectGeneralTab = () => {
   return (
     <div>
-      <ProjectOverviewChangeSection />
+      <ProjectOverviewChangeSection showSlugField />
       <AuditLogsRetentionSection />
       <DeleteProjectSection />
     </div>

frontend/src/pages/kms/SettingsPage/components/ProjectOverviewChangeSection/CopyButton.tsx

@@ -1,51 +0,0 @@
-import { useCallback } from "react";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { createNotification } from "@app/components/notifications";
-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 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 px-3 py-2 text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-        {hoverText}
-      </span>
-    </Button>
-  );
-};

frontend/src/pages/kms/SettingsPage/components/ProjectOverviewChangeSection/ProjectOverviewChangeSection.tsx

@@ -1,168 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, FormControl, Input, TextArea } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useUpdateProject } from "@app/hooks/api";
-
-import { CopyButton } from "./CopyButton";
-
-const formSchema = z.object({
-  name: z.string().min(1, "Required").max(64, "Too long, maximum length is 64 characters"),
-  description: z
-    .string()
-    .trim()
-    .max(256, "Description too long, max length is 256 characters")
-    .optional()
-});
-
-type FormData = z.infer<typeof formSchema>;
-
-export const ProjectOverviewChangeSection = () => {
-  const { currentWorkspace } = useWorkspace();
-  const { mutateAsync, isPending } = useUpdateProject();
-
-  const { handleSubmit, control, reset } = useForm<FormData>({ resolver: zodResolver(formSchema) });
-
-  useEffect(() => {
-    if (currentWorkspace) {
-      reset({
-        name: currentWorkspace.name,
-        description: currentWorkspace.description ?? ""
-      });
-    }
-  }, [currentWorkspace]);
-
-  const onFormSubmit = async ({ name, description }: FormData) => {
-    try {
-      if (!currentWorkspace?.id) return;
-
-      await mutateAsync({
-        projectID: currentWorkspace.id,
-        newProjectName: name,
-        newProjectDescription: description
-      });
-
-      createNotification({
-        text: "Successfully updated project overview",
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to update project overview",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="justify-betweens flex">
-        <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Overview</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
-          </CopyButton>
-        </div>
-      </div>
-      <div>
-        <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full flex-col gap-0">
-          <div className="flex w-full flex-row items-end gap-4">
-            <div className="w-full max-w-md">
-              <ProjectPermissionCan
-                I={ProjectPermissionActions.Edit}
-                a={ProjectPermissionSub.Project}
-              >
-                {(isAllowed) => (
-                  <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                        label="Project name"
-                      >
-                        <Input
-                          placeholder="Project name"
-                          {...field}
-                          className="bg-mineshaft-800"
-                          isDisabled={!isAllowed}
-                        />
-                      </FormControl>
-                    )}
-                    control={control}
-                    name="name"
-                  />
-                )}
-              </ProjectPermissionCan>
-            </div>
-          </div>
-          <div className="flex w-full flex-row items-end gap-4">
-            <div className="w-full max-w-md">
-              <ProjectPermissionCan
-                I={ProjectPermissionActions.Edit}
-                a={ProjectPermissionSub.Project}
-              >
-                {(isAllowed) => (
-                  <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                        label="Project description"
-                      >
-                        <TextArea
-                          placeholder="Project description"
-                          {...field}
-                          rows={3}
-                          className="thin-scrollbar max-w-md !resize-none bg-mineshaft-800"
-                          isDisabled={!isAllowed}
-                        />
-                      </FormControl>
-                    )}
-                    control={control}
-                    name="description"
-                  />
-                )}
-              </ProjectPermissionCan>
-            </div>
-          </div>
-          <div>
-            <ProjectPermissionCan
-              I={ProjectPermissionActions.Edit}
-              a={ProjectPermissionSub.Project}
-            >
-              {(isAllowed) => (
-                <Button
-                  colorSchema="secondary"
-                  type="submit"
-                  isLoading={isPending}
-                  isDisabled={isPending || !isAllowed}
-                >
-                  Save
-                </Button>
-              )}
-            </ProjectPermissionCan>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};

frontend/src/pages/kms/SettingsPage/components/ProjectOverviewChangeSection/index.tsx

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

frontend/src/pages/kms/SettingsPage/components/index.tsx

@@ -1,2 +1 @@
 export { DeleteProjectSection } from "./DeleteProjectSection";
-export { ProjectOverviewChangeSection } from "./ProjectOverviewChangeSection";

frontend/src/pages/organization/AuditLogsPage/components/LogsTable.tsx

@@ -28,7 +28,7 @@ type Props = {
 
 const AUDIT_LOG_LIMIT = 15;
 
-const TABLE_HEADERS = ["Timestamp", "Event", "Project", "Actor", "Source", "Metadata"] as const;
+const TABLE_HEADERS = ["Timestamp (MM/DD/YYYY)", "Event", "Project", "Actor", "Source", "Metadata"] as const;
 export type TAuditLogTableHeader = (typeof TABLE_HEADERS)[number];
 
 export const LogsTable = ({

frontend/src/pages/organization/AuditLogsPage/components/LogsTableRow.tsx

@@ -83,7 +83,7 @@ export const LogsTableRow = ({ auditLog, isOrgAuditLogs, showActorColumn }: Prop
     hours %= 12;
     hours = hours || 12; // the hour '0' should be '12'
 
-    const formattedDate = `${day}-${month}-${year} at ${hours}:${minutes} ${period}`;
+    const formattedDate = `${month}-${day}-${year} at ${hours}:${minutes} ${period}`;
     return formattedDate;
   };
 

frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/AddServiceTokenModal.tsx

@@ -58,6 +58,7 @@ const schema = z.object({
   permissions: z
     .object({
       read: z.boolean(),
+      readValue: z.boolean(),
       write: z.boolean()
     })
     .required()
@@ -296,6 +297,7 @@ export const AddServiceTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
               name="permissions"
               defaultValue={{
                 read: true,
+                readValue: false,
                 write: false
               }}
               render={({ field: { onChange, value }, fieldState: { error } }) => {

frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx

@@ -35,12 +35,13 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
   title,
   isDisabled
 }: Props<T>) => {
-  const { control } = useFormContext<TFormSchema>();
+  const { control, watch } = useFormContext<TFormSchema>();
   const items = useFieldArray({
     control,
     name: `permissions.${subject}`
   });
   const [isOpen, setIsOpen] = useToggle();
+  // const [hideFullReadAccess, setHideFullReadAccess] = useState(false);
 
   if (!items.fields.length) return <div />;
 
@@ -71,116 +72,138 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
       </div>
       {isOpen && (
         <div key={`select-${subject}-type`} className="flex flex-col space-y-4 bg-bunker-800 p-6">
-          {items.fields.map((el, rootIndex) => (
-            <div key={el.id} className="bg-mineshaft-800 p-5 first:rounded-t-md last:rounded-b-md">
-              {isConditionalSubjects(subject) && (
-                <div className="mb-6 mt-4 flex w-full items-center text-gray-300">
-                  <div className="w-1/4">Permission</div>
-                  <div className="mr-4 w-1/4">
-                    <Controller
-                      defaultValue={false as any}
-                      name={`permissions.${subject}.${rootIndex}.inverted`}
-                      render={({ field }) => (
-                        <Select
-                          value={String(field.value)}
-                          onValueChange={(val) => field.onChange(val === "true")}
-                          containerClassName="w-full"
-                          className="w-full"
-                          isDisabled={isDisabled}
-                        >
-                          <SelectItem value="false">Allow</SelectItem>
-                          <SelectItem value="true">Forbid</SelectItem>
-                        </Select>
-                      )}
-                    />
-                  </div>
-                  <div>
-                    <Tooltip
-                      asChild
-                      content={
-                        <>
-                          <p>
-                            Whether to allow or forbid the selected actions when the following
-                            conditions (if any) are met.
-                          </p>
-                          <p className="mt-2">Forbid rules must come after allow rules.</p>
-                        </>
-                      }
-                    >
-                      <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-gray-400" />
-                    </Tooltip>
-                  </div>
-                </div>
-              )}
-              <div className="flex text-gray-300">
-                <div className="w-1/4">Actions</div>
-                <div className="flex flex-grow flex-wrap justify-start gap-8">
-                  {actions.map(({ label, value }) => {
-                    if (typeof value !== "string") return undefined;
-                    return (
+          {items.fields.map((el, rootIndex) => {
+            let isFullReadAccessEnabled = false;
+
+            if (subject === ProjectPermissionSub.Secrets) {
+              isFullReadAccessEnabled = watch(`permissions.${subject}.${rootIndex}.read` as any);
+            }
+
+            return (
+              <div
+                key={el.id}
+                className="bg-mineshaft-800 p-5 first:rounded-t-md last:rounded-b-md"
+              >
+                {isConditionalSubjects(subject) && (
+                  <div className="mb-6 mt-4 flex w-full items-center text-gray-300">
+                    <div className="w-1/4">Permission</div>
+                    <div className="mr-4 w-1/4">
                       <Controller
-                        key={`${el.id}-${label}`}
-                        name={`permissions.${subject}.${rootIndex}.${value}` as any}
-                        control={control}
-                        defaultValue={false}
+                        defaultValue={false as any}
+                        name={`permissions.${subject}.${rootIndex}.inverted`}
                         render={({ field }) => (
-                          <div className="flex items-center justify-center">
-                            <Checkbox
-                              isDisabled={isDisabled}
-                              isChecked={Boolean(field.value)}
-                              onCheckedChange={field.onChange}
-                              id={`permissions.${subject}.${rootIndex}.${String(value)}`}
-                            >
-                              {label}
-                            </Checkbox>
-                          </div>
+                          <Select
+                            value={String(field.value)}
+                            onValueChange={(val) => field.onChange(val === "true")}
+                            containerClassName="w-full"
+                            className="w-full"
+                            isDisabled={isDisabled}
+                          >
+                            <SelectItem value="false">Allow</SelectItem>
+                            <SelectItem value="true">Forbid</SelectItem>
+                          </Select>
                         )}
                       />
-                    );
+                    </div>
+                    <div>
+                      <Tooltip
+                        asChild
+                        content={
+                          <>
+                            <p>
+                              Whether to allow or forbid the selected actions when the following
+                              conditions (if any) are met.
+                            </p>
+                            <p className="mt-2">Forbid rules must come after allow rules.</p>
+                          </>
+                        }
+                      >
+                        <FontAwesomeIcon icon={faInfoCircle} size="sm" className="text-gray-400" />
+                      </Tooltip>
+                    </div>
+                  </div>
+                )}
+                <div className="flex text-gray-300">
+                  <div className="w-1/4">Actions</div>
+                  <div className="flex flex-grow flex-wrap justify-start gap-8">
+                    {actions.map(({ label, value }, index) => {
+                      if (typeof value !== "string") return undefined;
+
+                      if (
+                        subject === ProjectPermissionSub.Secrets &&
+                        value === "read" &&
+                        !isFullReadAccessEnabled
+                      ) {
+                        return null;
+                      }
+
+                      return (
+                        <Controller
+                          key={`${el.id}-${index + 1}`}
+                          name={`permissions.${subject}.${rootIndex}.${value}` as any}
+                          control={control}
+                          defaultValue={false}
+                          render={({ field }) => {
+                            return (
+                              <div className="flex items-center justify-center">
+                                <Checkbox
+                                  isDisabled={isDisabled}
+                                  isChecked={Boolean(field.value)}
+                                  onCheckedChange={field.onChange}
+                                  id={`permissions.${subject}.${rootIndex}.${String(value)}`}
+                                >
+                                  {label}
+                                </Checkbox>
+                              </div>
+                            );
+                          }}
+                        />
+                      );
+                    })}
+                  </div>
+                </div>
+                {children &&
+                  cloneElement(children, {
+                    position: rootIndex
                   })}
+                <div
+                  className={twMerge(
+                    "mt-4 flex justify-start space-x-4",
+                    isConditionalSubjects(subject) && "justify-end"
+                  )}
+                >
+                  {!isDisabled && isConditionalSubjects(subject) && (
+                    <Button
+                      leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                      variant="star"
+                      size="xs"
+                      className="mt-2"
+                      onClick={() => {
+                        items.insert(rootIndex + 1, [
+                          { read: false, edit: false, create: false, delete: false } as any
+                        ]);
+                      }}
+                      isDisabled={isDisabled}
+                    >
+                      Add policy
+                    </Button>
+                  )}
+                  {!isDisabled && (
+                    <Button
+                      leftIcon={<FontAwesomeIcon icon={faTrash} />}
+                      variant="outline_bg"
+                      size="xs"
+                      className="mt-2 hover:border-red"
+                      onClick={() => items.remove(rootIndex)}
+                      isDisabled={isDisabled}
+                    >
+                      Remove policy
+                    </Button>
+                  )}{" "}
                 </div>
               </div>
-              {children &&
-                cloneElement(children, {
-                  position: rootIndex
-                })}
-              <div
-                className={twMerge(
-                  "mt-4 flex justify-start space-x-4",
-                  isConditionalSubjects(subject) && "justify-end"
-                )}
-              >
-                {!isDisabled && isConditionalSubjects(subject) && (
-                  <Button
-                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    variant="star"
-                    size="xs"
-                    className="mt-2"
-                    onClick={() => {
-                      items.insert(rootIndex + 1, [
-                        { read: false, edit: false, create: false, delete: false } as any
-                      ]);
-                    }}
-                    isDisabled={isDisabled}
-                  >
-                    Add policy
-                  </Button>
-                )}
-                {!isDisabled && (
-                  <Button
-                    leftIcon={<FontAwesomeIcon icon={faTrash} />}
-                    variant="outline_bg"
-                    size="xs"
-                    className="mt-2 hover:border-red"
-                    onClick={() => items.remove(rootIndex)}
-                    isDisabled={isDisabled}
-                  >
-                    Remove policy
-                  </Button>
-                )}{" "}
-              </div>
-            </div>
-          ))}
+            );
+          })}
         </div>
       )}
     </div>

frontend/src/pages/project/RoleDetailsBySlugPage/components/ProjectRoleModifySection.utils.tsx

@@ -1,5 +1,9 @@
+import { ReactNode } from "react";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { z } from "zod";
 
+import { Tooltip } from "@app/components/v2";
 import {
   ProjectPermissionActions,
   ProjectPermissionCmekActions,
@@ -12,6 +16,7 @@ import {
   ProjectPermissionIdentityActions,
   ProjectPermissionKmipActions,
   ProjectPermissionMemberActions,
+  ProjectPermissionSecretActions,
   ProjectPermissionSecretSyncActions,
   TPermissionCondition,
   TPermissionConditionOperators
@@ -25,6 +30,15 @@ const GeneralPolicyActionSchema = z.object({
   create: z.boolean().optional()
 });
 
+const SecretPolicyActionSchema = z.object({
+  [ProjectPermissionSecretActions.DescribeAndReadValue]: z.boolean().optional(), // existing read, gives both describe and read value
+  [ProjectPermissionSecretActions.DescribeSecret]: z.boolean().optional(),
+  [ProjectPermissionSecretActions.ReadValue]: z.boolean().optional(),
+  [ProjectPermissionSecretActions.Edit]: z.boolean().optional(),
+  [ProjectPermissionSecretActions.Delete]: z.boolean().optional(),
+  [ProjectPermissionSecretActions.Create]: z.boolean().optional()
+});
+
 const CmekPolicyActionSchema = z.object({
   read: z.boolean().optional(),
   edit: z.boolean().optional(),
@@ -141,7 +155,7 @@ export const projectRoleFormSchema = z.object({
     .refine((val) => val !== "custom", { message: "Cannot use custom as its a keyword" }),
   permissions: z
     .object({
-      [ProjectPermissionSub.Secrets]: GeneralPolicyActionSchema.extend({
+      [ProjectPermissionSub.Secrets]: SecretPolicyActionSchema.extend({
         inverted: z.boolean().optional(),
         conditions: ConditionSchema
       })
@@ -307,6 +321,33 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
           });
           return;
         }
+
+        if (subject === ProjectPermissionSub.Secrets) {
+          const canDescribeAndReadValue = action.includes(
+            ProjectPermissionSecretActions.DescribeAndReadValue
+          );
+          const canDescribe = action.includes(ProjectPermissionSecretActions.DescribeSecret);
+          const canReadValue = action.includes(ProjectPermissionSecretActions.ReadValue);
+
+          const canEdit = action.includes(ProjectPermissionSecretActions.Edit);
+          const canDelete = action.includes(ProjectPermissionSecretActions.Delete);
+          const canCreate = action.includes(ProjectPermissionSecretActions.Create);
+
+          // from above statement we are sure it won't be undefined
+          formVal[subject]!.push({
+            describeSecret: canDescribe,
+            read: canDescribeAndReadValue,
+            readValue: canReadValue,
+            create: canCreate,
+            edit: canEdit,
+            delete: canDelete,
+            conditions: conditions ? convertCaslConditionToFormOperator(conditions) : [],
+            inverted
+          });
+
+          return;
+        }
+
         // for other subjects
         const canRead = action.includes(ProjectPermissionActions.Read);
         const canEdit = action.includes(ProjectPermissionActions.Edit);
@@ -553,7 +594,7 @@ export type TProjectPermissionObject = {
   [K in ProjectPermissionSub]: {
     title: string;
     actions: {
-      label: string;
+      label: string | ReactNode;
       value: keyof Omit<
         NonNullable<NonNullable<TFormSchema["permissions"]>[K]>[number],
         "conditions" | "inverted"
@@ -566,10 +607,35 @@ export const PROJECT_PERMISSION_OBJECT: TProjectPermissionObject = {
   [ProjectPermissionSub.Secrets]: {
     title: "Secrets",
     actions: [
-      { label: "Read", value: "read" },
-      { label: "Create", value: "create" },
-      { label: "Modify", value: "edit" },
-      { label: "Remove", value: "delete" }
+      {
+        label: (
+          <div className="flex items-center gap-1.5">
+            <p className="opacity-60">
+              Read <span className="text-xs opacity-80">(legacy)</span>
+            </p>
+            <Tooltip
+              className="overflow-hidden whitespace-normal"
+              content={
+                <div>
+                  This is a legacy action and will be removed in the future.
+                  <br />
+                  <br /> You should instead use the{" "}
+                  <strong className="font-semibold">Describe Secret</strong> and{" "}
+                  <strong className="font-semibold">Read Value</strong> actions.
+                </div>
+              }
+            >
+              <FontAwesomeIcon icon={faWarning} className="mt-1 text-yellow-500" size="sm" />
+            </Tooltip>
+          </div>
+        ),
+        value: ProjectPermissionSecretActions.DescribeAndReadValue
+      },
+      { label: "Describe Secret", value: ProjectPermissionSecretActions.DescribeSecret },
+      { label: "Read Value", value: ProjectPermissionSecretActions.ReadValue },
+      { label: "Modify", value: ProjectPermissionSecretActions.Edit },
+      { label: "Remove", value: ProjectPermissionSecretActions.Delete },
+      { label: "Create", value: ProjectPermissionSecretActions.Create }
     ]
   },
   [ProjectPermissionSub.SecretFolders]: {

frontend/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx

@@ -19,6 +19,7 @@ import {
 import { getKeyValue } from "@app/helpers/parseEnvVar";
 import { useCreateFolder, useCreateSecretV3, useCreateWsTag, useGetWsTags } from "@app/hooks/api";
 import { SecretType } from "@app/hooks/api/types";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 
 const typeSchema = z
   .object({
@@ -275,7 +276,7 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
               isMulti
               options={environments.filter((environment) =>
                 permission.can(
-                  ProjectPermissionActions.Create,
+                  ProjectPermissionSecretActions.Create,
                   subject(ProjectPermissionSub.Secrets, {
                     environment: environment.slug,
                     secretPath,

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -25,10 +25,13 @@ import {
   ModalTrigger,
   Tooltip
 } from "@app/components/v2";
+import { Blur } from "@app/components/v2/Blur";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { useToggle } from "@app/hooks";
 import { SecretType } from "@app/hooks/api/types";
+import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 
 type Props = {
   defaultValue?: string | null;
@@ -39,6 +42,7 @@ type Props = {
   isVisible?: boolean;
   isImportedSecret: boolean;
   environment: string;
+  secretValueHidden: boolean;
   secretPath: string;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
   onSecretUpdate: (
@@ -58,6 +62,7 @@ export const SecretEditRow = ({
   isImportedSecret,
   onSecretUpdate,
   secretName,
+  secretValueHidden,
   onSecretCreate,
   onSecretDelete,
   environment,
@@ -76,6 +81,9 @@ export const SecretEditRow = ({
       value: defaultValue || null
     }
   });
+
+  const { permission } = useProjectPermission();
+
   const [isDeleting, setIsDeleting] = useToggle();
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
@@ -117,6 +125,11 @@ export const SecretEditRow = ({
     reset({ value });
   };
 
+  const canReadSecretValue = hasSecretReadValueOrDescribePermission(
+    permission,
+    ProjectPermissionSecretActions.ReadValue
+  );
+
   const handleDeleteSecret = useCallback(async () => {
     setIsDeleting.on();
     setIsModalOpen(false);
@@ -140,24 +153,29 @@ export const SecretEditRow = ({
       />
 
       <div className="flex-grow border-r border-r-mineshaft-600 pl-1 pr-2">
-        <Controller
-          disabled={isImportedSecret && !defaultValue}
-          control={control}
-          name="value"
-          render={({ field }) => (
-            <InfisicalSecretInput
-              {...field}
-              isReadOnly={isImportedSecret}
-              value={field.value as string}
-              key="secret-input"
-              isVisible={isVisible}
-              secretPath={secretPath}
-              environment={environment}
-              isImport={isImportedSecret}
-            />
-          )}
-        />
+        {secretValueHidden ? (
+          <Blur tooltipText="You do not have permission to read the value of this secret." />
+        ) : (
+          <Controller
+            disabled={isImportedSecret && !defaultValue}
+            control={control}
+            name="value"
+            render={({ field }) => (
+              <InfisicalSecretInput
+                {...field}
+                isReadOnly={isImportedSecret}
+                value={field.value as string}
+                key="secret-input"
+                isVisible={isVisible}
+                secretPath={secretPath}
+                environment={environment}
+                isImport={isImportedSecret}
+              />
+            )}
+          />
+        )}
       </div>
+
       <div
         className={twMerge(
           "flex w-24 justify-center space-x-3 pl-2 transition-all",
@@ -211,6 +229,7 @@ export const SecretEditRow = ({
             <div className="opacity-0 group-hover:opacity-100">
               <Tooltip content="Copy Secret">
                 <IconButton
+                  isDisabled={secretValueHidden}
                   ariaLabel="copy-value"
                   onClick={handleCopySecretToClipboard}
                   variant="plain"
@@ -220,48 +239,43 @@ export const SecretEditRow = ({
                 </IconButton>
               </Tooltip>
             </div>
-            <ProjectPermissionCan
-              I={ProjectPermissionActions.Read}
-              a={ProjectPermissionSub.Secrets}
-            >
-              {(isAllowed) => (
-                <div className="opacity-0 group-hover:opacity-100">
-                  <Modal>
-                    <ModalTrigger asChild>
-                      <div className="opacity-0 group-hover:opacity-100">
-                        <Tooltip
-                          content={
-                            hasSecretReference(defaultValue || "")
-                              ? "Secret Reference Tree"
-                              : "Secret does not contain references"
-                          }
-                        >
-                          <IconButton
-                            variant="plain"
-                            ariaLabel="reference-tree"
-                            className="h-full"
-                            isDisabled={!hasSecretReference(defaultValue || "") || !isAllowed}
-                          >
-                            <FontAwesomeIcon icon={faProjectDiagram} />
-                          </IconButton>
-                        </Tooltip>
-                      </div>
-                    </ModalTrigger>
-                    <ModalContent
-                      title="Secret Reference Details"
-                      subTitle="Visual breakdown of secrets referenced by this secret."
-                      onOpenAutoFocus={(e) => e.preventDefault()} // prevents secret input from displaying value on open
+
+            <div className="opacity-0 group-hover:opacity-100">
+              <Modal>
+                <ModalTrigger asChild>
+                  <div className="opacity-0 group-hover:opacity-100">
+                    <Tooltip
+                      content={
+                        hasSecretReference(defaultValue || "")
+                          ? "Secret Reference Tree"
+                          : "Secret does not contain references"
+                      }
                     >
-                      <SecretReferenceTree
-                        secretPath={secretPath}
-                        environment={environment}
-                        secretKey={secretName}
-                      />
-                    </ModalContent>
-                  </Modal>
-                </div>
-              )}
-            </ProjectPermissionCan>
+                      <IconButton
+                        variant="plain"
+                        ariaLabel="reference-tree"
+                        className="h-full"
+                        isDisabled={!hasSecretReference(defaultValue || "") || !canReadSecretValue}
+                      >
+                        <FontAwesomeIcon icon={faProjectDiagram} />
+                      </IconButton>
+                    </Tooltip>
+                  </div>
+                </ModalTrigger>
+                <ModalContent
+                  title="Secret Reference Details"
+                  subTitle="Visual breakdown of secrets referenced by this secret."
+                  onOpenAutoFocus={(e) => e.preventDefault()} // prevents secret input from displaying value on open
+                >
+                  <SecretReferenceTree
+                    secretPath={secretPath}
+                    environment={environment}
+                    secretKey={secretName}
+                  />
+                </ModalContent>
+              </Modal>
+            </div>
+
             <ProjectPermissionCan
               I={ProjectPermissionActions.Delete}
               a={subject(ProjectPermissionSub.Secrets, {

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretNoAccessOverviewTableRow.tsx

@@ -3,6 +3,7 @@ import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Td, Tooltip, Tr } from "@app/components/v2";
+import { Blur } from "@app/components/v2/Blur";
 
 type Props = {
   environments: { name: string; slug: string }[];
@@ -25,7 +26,7 @@ export const SecretNoAccessOverviewTableRow = ({ environments = [], count }: Pro
                   <div className="text-bunker-300">
                     <FontAwesomeIcon className="block" icon={faLock} />
                   </div>
-                  <div className="blur-sm">NO ACCESS</div>
+                  <Blur />
                 </div>
               </Tooltip>
             </div>

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx

@@ -221,10 +221,13 @@ export const SecretOverviewTableRow = ({
                               secretPath={secretPath}
                               isVisible={isSecretVisible}
                               secretName={secretKey}
+                              secretValueHidden={secret?.secretValueHidden || false}
                               defaultValue={
-                                secret?.valueOverride ||
-                                secret?.value ||
-                                importedSecret?.secret?.value
+                                secret?.secretValueHidden
+                                  ? ""
+                                  : secret?.valueOverride ||
+                                    secret?.value ||
+                                    importedSecret?.secret?.value
                               }
                               secretId={secret?.id}
                               isOverride={Boolean(secret?.valueOverride)}

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretRenameRow.tsx

@@ -10,15 +10,12 @@ import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import { IconButton, Input, Spinner, Tooltip } from "@app/components/v2";
-import {
-  ProjectPermissionActions,
-  ProjectPermissionSub,
-  useProjectPermission,
-  useWorkspace
-} from "@app/context";
+import { ProjectPermissionSub, useProjectPermission, useWorkspace } from "@app/context";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { useToggle } from "@app/hooks";
 import { useUpdateSecretV3 } from "@app/hooks/api";
 import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/types";
+import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 
 enum SecretActionType {
   Created = "created",
@@ -55,8 +52,11 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
       secretTags: (secretDetails?.tags || []).map((i) => i.slug)
     });
     const isSecretInEnvReadOnly =
-      permission.can(ProjectPermissionActions.Read, secretPermissionSubject) &&
-      permission.cannot(ProjectPermissionActions.Edit, secretPermissionSubject);
+      hasSecretReadValueOrDescribePermission(
+        permission,
+        ProjectPermissionSecretActions.DescribeSecret,
+        secretPermissionSubject
+      ) && permission.cannot(ProjectPermissionSecretActions.Edit, secretPermissionSubject);
     if (isSecretInEnvReadOnly) {
       return true;
     }

frontend/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchSecretItem.tsx

@@ -110,21 +110,31 @@ export const QuickSearchSecretItem = ({
             </Badge>
           )}
           {isSingleEnv ? (
-            <IconButton
-              size="md"
-              variant="plain"
-              colorSchema="secondary"
-              ariaLabel="Copy secret value"
-              onClick={(e) => {
-                e.stopPropagation();
-                const el = envSlugMap.get(groupSecret.env)?.name;
-                if (el) {
-                  handleCopy(groupSecret.value!, el);
-                }
-              }}
+            <Tooltip
+              isDisabled={!groupSecret?.secretValueHidden}
+              content={
+                groupSecret?.secretValueHidden
+                  ? "You do not have permission to view this secret value"
+                  : ""
+              }
             >
-              <FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} />
-            </IconButton>
+              <IconButton
+                size="md"
+                isDisabled={groupSecret?.secretValueHidden}
+                variant="plain"
+                colorSchema="secondary"
+                ariaLabel="Copy secret value"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  const el = envSlugMap.get(groupSecret.env)?.name;
+                  if (el) {
+                    handleCopy(groupSecret.value!, el);
+                  }
+                }}
+              >
+                <FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} />
+              </IconButton>
+            </Tooltip>
           ) : (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -158,14 +168,24 @@ export const QuickSearchSecretItem = ({
           )}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <IconButton
-                size="md"
-                variant="plain"
-                colorSchema="secondary"
-                ariaLabel="View secret value"
+              <Tooltip
+                isDisabled={!groupSecret?.secretValueHidden}
+                content={
+                  groupSecret?.secretValueHidden
+                    ? "You do not have permission to view this secret value"
+                    : ""
+                }
               >
-                <FontAwesomeIcon icon={faEye} />
-              </IconButton>
+                <IconButton
+                  size="md"
+                  isDisabled={groupSecret?.secretValueHidden}
+                  variant="plain"
+                  colorSchema="secondary"
+                  ariaLabel="View secret value"
+                >
+                  <FontAwesomeIcon icon={faEye} />
+                </IconButton>
+              </Tooltip>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <DropdownMenuLabel>Hover to Reveal...</DropdownMenuLabel>

frontend/src/pages/secret-manager/OverviewPage/components/SelectionPanel/SelectionPanel.tsx

@@ -11,6 +11,7 @@ import {
   useProjectPermission,
   useWorkspace
 } from "@app/context";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp } from "@app/hooks";
 import { useDeleteFolder, useDeleteSecretBatch } from "@app/hooks/api";
 import {
@@ -58,7 +59,7 @@ export const SelectionPanel = ({ secretPath, resetSelectedEntries, selectedEntri
   // user should have the ability to delete secrets/folders in at least one of the envs
   const shouldShowDelete = userAvailableEnvs.some((env) =>
     permission.can(
-      ProjectPermissionActions.Delete,
+      ProjectPermissionSecretActions.Delete,
       subject(ProjectPermissionSub.Secrets, {
         environment: env.slug,
         secretPath,
@@ -110,7 +111,7 @@ export const SelectionPanel = ({ secretPath, resetSelectedEntries, selectedEntri
         (accum: TDeleteSecretBatchDTO["secrets"], secretRecord) => {
           const entry = secretRecord[env.slug];
           const canDeleteSecret = permission.can(
-            ProjectPermissionActions.Delete,
+            ProjectPermissionSecretActions.Delete,
             subject(ProjectPermissionSub.Secrets, {
               environment: env.slug,
               secretPath,

frontend/src/pages/secret-manager/OverviewPage/components/SelectionPanel/components/MoveSecretsDialog/MoveSecretsDialog.tsx

@@ -25,7 +25,8 @@ import {
   Spinner,
   Switch
 } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
+import { ProjectPermissionSub, useProjectPermission } from "@app/context";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { useDebounce } from "@app/hooks";
 import { useMoveSecrets } from "@app/hooks/api";
 import { useGetProjectSecretsQuickSearch } from "@app/hooks/api/dashboard";
@@ -95,7 +96,7 @@ const Content = ({
         env.slug,
         {
           missingPermissions: permission.cannot(
-            ProjectPermissionActions.Delete,
+            ProjectPermissionSecretActions.Delete,
             subject(ProjectPermissionSub.Secrets, {
               environment: env.slug,
               secretPath: sourceSecretPath,

frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx

@@ -25,6 +25,7 @@ import {
   useProjectPermission,
   useWorkspace
 } from "@app/context";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
 import {
   useGetImportedSecretsSingleEnv,
@@ -37,6 +38,7 @@ import { useGetProjectSecretsDetails } from "@app/hooks/api/dashboard";
 import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
 import { ProjectType } from "@app/hooks/api/workspace/types";
+import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 
 import { SecretTableResourceCount } from "../OverviewPage/components/SecretTableResourceCount";
 import { SecretV2MigrationSection } from "../OverviewPage/components/SecretV2MigrationSection";
@@ -102,14 +104,27 @@ const Page = () => {
   const workspaceId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
   const secretPath = (routerQueryParams.secretPath as string) || "/";
-  const canReadSecret = permission.can(
-    ProjectPermissionActions.Read,
-    subject(ProjectPermissionSub.Secrets, {
+
+  const canReadSecret = hasSecretReadValueOrDescribePermission(
+    permission,
+    ProjectPermissionSecretActions.DescribeSecret,
+    {
       environment,
       secretPath,
       secretName: "*",
       secretTags: ["*"]
-    })
+    }
+  );
+
+  const canReadSecretValue = hasSecretReadValueOrDescribePermission(
+    permission,
+    ProjectPermissionSecretActions.ReadValue,
+    {
+      environment,
+      secretPath,
+      secretName: "*",
+      secretTags: ["*"]
+    }
   );
 
   const canReadSecretImports = permission.can(
@@ -176,6 +191,7 @@ const Page = () => {
     orderDirection,
     includeImports: canReadSecretImports && filter.include.import,
     includeFolders: filter.include.folder,
+    viewSecretValue: canReadSecretValue,
     includeDynamicSecrets: canReadDynamicSecret && filter.include.dynamic,
     includeSecrets: canReadSecret && filter.include.secret,
     tags: filter.tags

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx

@@ -21,6 +21,7 @@ import {
   faTrash
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AxiosError } from "axios";
 import FileSaver from "file-saver";
 import { twMerge } from "tailwind-merge";
 
@@ -54,7 +55,7 @@ import {
 import { usePopUp } from "@app/hooks";
 import { useCreateFolder, useDeleteSecretBatch, useMoveSecrets } from "@app/hooks/api";
 import { fetchProjectSecrets } from "@app/hooks/api/secrets/queries";
-import { SecretType, WsTag } from "@app/hooks/api/types";
+import { ApiErrorTypes, SecretType, TApiErrors, WsTag } from "@app/hooks/api/types";
 import { SecretSearchInput } from "@app/pages/secret-manager/OverviewPage/components/SecretSearchInput";
 
 import {
@@ -152,51 +153,71 @@ export const ActionBar = ({
   };
 
   const handleSecretDownload = async () => {
-    const { secrets: localSecrets, imports: localImportedSecrets } = await fetchProjectSecrets({
-      workspaceId,
-      expandSecretReferences: true,
-      includeImports: true,
-      environment,
-      secretPath
-    });
-    const secretsPicked = new Set<string>();
-    const secretsToDownload: { key: string; value?: string; comment?: string }[] = [];
-    localSecrets.forEach((el) => {
-      secretsPicked.add(el.secretKey);
-      secretsToDownload.push({
-        key: el.secretKey,
-        value: el.secretValue,
-        comment: el.secretComment
+    try {
+      const { secrets: localSecrets, imports: localImportedSecrets } = await fetchProjectSecrets({
+        workspaceId,
+        expandSecretReferences: true,
+        includeImports: true,
+        environment,
+        secretPath
+      });
+      const secretsPicked = new Set<string>();
+      const secretsToDownload: { key: string; value?: string; comment?: string }[] = [];
+      localSecrets.forEach((el) => {
+        secretsPicked.add(el.secretKey);
+        secretsToDownload.push({
+          key: el.secretKey,
+          value: el.secretValue,
+          comment: el.secretComment
+        });
       });
-    });
 
-    for (let i = localImportedSecrets.length - 1; i >= 0; i -= 1) {
-      for (let j = localImportedSecrets[i].secrets.length - 1; j >= 0; j -= 1) {
-        const secret = localImportedSecrets[i].secrets[j];
-        if (!secretsPicked.has(secret.secretKey)) {
-          secretsToDownload.push({
-            key: secret.secretKey,
-            value: secret.secretValue,
-            comment: secret.secretComment
-          });
+      for (let i = localImportedSecrets.length - 1; i >= 0; i -= 1) {
+        for (let j = localImportedSecrets[i].secrets.length - 1; j >= 0; j -= 1) {
+          const secret = localImportedSecrets[i].secrets[j];
+          if (!secretsPicked.has(secret.secretKey)) {
+            secretsToDownload.push({
+              key: secret.secretKey,
+              value: secret.secretValue,
+              comment: secret.secretComment
+            });
+          }
+          secretsPicked.add(secret.secretKey);
         }
-        secretsPicked.add(secret.secretKey);
       }
+
+      const file = secretsToDownload
+        .sort((a, b) => a.key.toLowerCase().localeCompare(b.key.toLowerCase()))
+        .reduce(
+          (prev, { key, comment, value }, index) =>
+            prev +
+            (comment
+              ? `${index === 0 ? "#" : "\n#"} ${comment}\n${key}=${value}\n`
+              : `${key}=${value}\n`),
+          ""
+        );
+
+      const blob = new Blob([file], { type: "text/plain;charset=utf-8" });
+      FileSaver.saveAs(blob, `${environment}.env`);
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        const error = err?.response?.data as TApiErrors;
+
+        if (error?.error === ApiErrorTypes.ForbiddenError && error.message.includes("readValue")) {
+          createNotification({
+            title: "You don't have permission to download secrets",
+            text: "You don't have permission to view one or more of the secrets in the current folder. Please contact your administrator.",
+            type: "error"
+          });
+          return;
+        }
+      }
+      createNotification({
+        title: "Failed to download secrets",
+        text: "Please try again later.",
+        type: "error"
+      });
     }
-
-    const file = secretsToDownload
-      .sort((a, b) => a.key.toLowerCase().localeCompare(b.key.toLowerCase()))
-      .reduce(
-        (prev, { key, comment, value }, index) =>
-          prev +
-          (comment
-            ? `${index === 0 ? "#" : "\n#"} ${comment}\n${key}=${value}\n`
-            : `${key}=${value}\n`),
-        ""
-      );
-
-    const blob = new Blob([file], { type: "text/plain;charset=utf-8" });
-    FileSaver.saveAs(blob, `${environment}.env`);
   };
 
   const handleSecretBulkDelete = async () => {

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/CopySecretsFromBoard.tsx

@@ -20,8 +20,9 @@ import {
 } from "@app/components/v2";
 import { SecretPathInput } from "@app/components/v2/SecretPathInput";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { useDebounce } from "@app/hooks";
-import { useGetProjectSecrets } from "@app/hooks/api";
+import { useGetAccessibleSecrets } from "@app/hooks/api/dashboard";
 
 const formSchema = z.object({
   environment: z.object({ name: z.string(), slug: z.string() }),
@@ -32,7 +33,7 @@ const formSchema = z.object({
       typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
     ),
   secrets: z
-    .object({ key: z.string(), value: z.string().optional() })
+    .object({ secretKey: z.string(), secretValue: z.string().optional() })
     .array()
     .min(1, "Select one or more secrets to copy")
 });
@@ -78,34 +79,38 @@ export const CopySecretsFromBoard = ({
   const selectedEnvSlug = watch("environment");
   const [debouncedEnvCopySecretPath] = useDebounce(envCopySecPath);
 
-  const { data: secrets, isPending: isSecretsLoading } = useGetProjectSecrets({
-    workspaceId,
-    environment: selectedEnvSlug.slug,
-    secretPath: debouncedEnvCopySecretPath,
-    options: {
-      enabled:
-        Boolean(workspaceId) &&
-        Boolean(selectedEnvSlug) &&
-        Boolean(debouncedEnvCopySecretPath) &&
-        isOpen
-    }
-  });
+  const { data: accessibleSecrets, isPending: isAccessibleSecretsLoading } =
+    useGetAccessibleSecrets({
+      projectId: workspaceId,
+      secretPath: debouncedEnvCopySecretPath,
+      environment: selectedEnvSlug.slug,
+      filterByAction: shouldIncludeValues
+        ? ProjectPermissionSecretActions.ReadValue
+        : ProjectPermissionSecretActions.DescribeSecret,
+      options: {
+        enabled:
+          Boolean(workspaceId) &&
+          Boolean(selectedEnvSlug) &&
+          Boolean(debouncedEnvCopySecretPath) &&
+          isOpen
+      }
+    });
 
   useEffect(() => {
     setValue("secrets", []);
   }, [debouncedEnvCopySecretPath, selectedEnvSlug]);
 
   const handleSecSelectAll = () => {
-    if (secrets) {
-      setValue("secrets", secrets, { shouldDirty: true });
+    if (accessibleSecrets) {
+      setValue("secrets", accessibleSecrets, { shouldDirty: true });
     }
   };
 
   const handleFormSubmit = async (data: TFormSchema) => {
     const secretsToBePulled: Record<string, { value: string; comments: string[] }> = {};
-    data.secrets.forEach(({ key, value }) => {
-      secretsToBePulled[key] = {
-        value: (shouldIncludeValues && value) || "",
+    data.secrets.forEach(({ secretKey, secretValue }) => {
+      secretsToBePulled[secretKey] = {
+        value: (shouldIncludeValues && secretValue) || "",
         comments: [""]
       };
     });
@@ -202,19 +207,19 @@ export const CopySecretsFromBoard = ({
                     <FilterableSelect
                       placeholder={
                         // eslint-disable-next-line no-nested-ternary
-                        isSecretsLoading
+                        isAccessibleSecretsLoading
                           ? "Loading secrets..."
-                          : secrets?.length
+                          : accessibleSecrets?.length
                             ? "Select secrets..."
                             : "No secrets found..."
                       }
-                      isLoading={isSecretsLoading}
-                      options={secrets}
+                      isLoading={isAccessibleSecretsLoading}
+                      options={accessibleSecrets}
                       value={value}
                       onChange={onChange}
                       isMulti
-                      getOptionValue={(option) => option.key}
-                      getOptionLabel={(option) => option.key}
+                      getOptionValue={(option) => option.secretKey}
+                      getOptionLabel={(option) => option.secretKey}
                     />
                   </FormControl>
                 )}
@@ -235,7 +240,10 @@ export const CopySecretsFromBoard = ({
               <Switch
                 id="populate-include-value"
                 isChecked={shouldIncludeValues}
-                onCheckedChange={(isChecked) => setShouldIncludeValues(isChecked as boolean)}
+                onCheckedChange={(isChecked) => {
+                  setValue("secrets", []);
+                  setShouldIncludeValues(isChecked as boolean);
+                }}
               >
                 Include secret values
               </Switch>

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx

@@ -13,12 +13,14 @@ import {
   faShare,
   faTag,
   faTrash,
+  faTriangleExclamation,
   faUser
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Link, useNavigate } from "@tanstack/react-router";
 import { format } from "date-fns";
+import { twMerge } from "tailwind-merge";
 
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
@@ -48,15 +50,18 @@ import {
   useProjectPermission,
   useWorkspace
 } from "@app/context";
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
 import { usePopUp, useToggle } from "@app/hooks";
 import { useGetSecretVersion } from "@app/hooks/api";
 import { ActorType } from "@app/hooks/api/auditLogs/enums";
 import { useGetSecretAccessList } from "@app/hooks/api/secrets/queries";
 import { SecretV3RawSanitized, WsTag } from "@app/hooks/api/types";
 import { ProjectType } from "@app/hooks/api/workspace/types";
+import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 
 import { CreateReminderForm } from "./CreateReminderForm";
 import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
+import { camelCaseToSpaces } from "@app/lib/fn/string";
 
 type Props = {
   isOpen?: boolean;
@@ -128,7 +133,7 @@ export const SecretDetailSidebar = ({
   const navigate = useNavigate();
 
   const cannotEditSecret = permission.cannot(
-    ProjectPermissionActions.Edit,
+    ProjectPermissionSecretActions.Edit,
     subject(ProjectPermissionSub.Secrets, {
       environment,
       secretPath,
@@ -136,16 +141,31 @@ export const SecretDetailSidebar = ({
       secretTags: selectTagSlugs
     })
   );
+
+  const cannotReadSecretValue = !hasSecretReadValueOrDescribePermission(
+    permission,
+    ProjectPermissionSecretActions.ReadValue,
+    {
+      environment,
+      secretPath,
+      secretName: secretKey,
+      secretTags: selectTagSlugs
+    }
+  );
+
   const isReadOnly =
-    permission.can(
-      ProjectPermissionActions.Read,
-      subject(ProjectPermissionSub.Secrets, {
+    hasSecretReadValueOrDescribePermission(
+      permission,
+      ProjectPermissionSecretActions.DescribeSecret,
+      {
         environment,
         secretPath,
         secretName: secretKey,
         secretTags: selectTagSlugs
-      })
-    ) && cannotEditSecret;
+      }
+    ) &&
+    cannotEditSecret &&
+    cannotReadSecretValue;
 
   const overrideAction = watch("overrideAction");
   const isOverridden =
@@ -325,38 +345,63 @@ export const SecretDetailSidebar = ({
                         key="secret-value"
                         control={control}
                         render={({ field }) => (
-                          <FormControl label="Value">
-                            <InfisicalSecretInput
-                              isReadOnly={isReadOnly}
-                              environment={environment}
-                              secretPath={secretPath}
-                              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>
+                          <div className="flex items-center gap-2">
+                            <FormControl
+                              className="flex-1"
+                              helperText={
+                                cannotReadSecretValue ? (
+                                  <div className="flex space-x-2">
+                                    <FontAwesomeIcon
+                                      icon={faTriangleExclamation}
+                                      className="mt-0.5 text-yellow-400"
+                                    />
+                                    <span>
+                                      The value of this secret is hidden because you do not have the
+                                      read secret value permission.
+                                    </span>
+                                  </div>
+                                ) : undefined
+                              }
+                              label="Value"
+                            >
+                              <div className="flex items-center gap-2">
+                                <InfisicalSecretInput
+                                  isReadOnly={isReadOnly || !isAllowed}
+                                  environment={environment}
+                                  secretPath={secretPath}
+                                  key="secret-value"
+                                  isDisabled={isOverridden}
+                                  containerClassName="text-bunker-300 w-full hover:border-primary-400/50 border border-mineshaft-600 bg-bunker-800 px-2 py-1.5"
+                                  {...field}
+                                  autoFocus={false}
+                                />
+                                <Tooltip
+                                  content="You don't have permission to view the secret value."
+                                  isDisabled={!secret?.secretValueHidden}
+                                >
+                                  <Button
+                                    isDisabled={secret?.secretValueHidden}
+                                    className="px-2 py-[0.43rem] font-normal"
+                                    variant="outline_bg"
+                                    leftIcon={<FontAwesomeIcon icon={faShare} />}
+                                    onClick={() => {
+                                      const value = secret?.valueOverride ?? secret?.value;
+                                      if (value) {
+                                        handleSecretShare(value);
+                                      }
+                                    }}
+                                  >
+                                    Share
+                                  </Button>
+                                </Tooltip>
+                              </div>
+                            </FormControl>
+                          </div>
                         )}
                       />
                     )}
                   </ProjectPermissionCan>
                 </div>
-                <div className="ml-1 mt-1.5 flex items-center">
-                  <Button
-                    className="w-full px-2 py-[0.43rem] font-normal"
-                    variant="outline_bg"
-                    leftIcon={<FontAwesomeIcon icon={faShare} />}
-                    onClick={() => {
-                      const value = secret?.valueOverride ?? secret?.value;
-                      if (value) {
-                        handleSecretShare(value);
-                      }
-                    }}
-                  >
-                    Share
-                  </Button>
-                </div>
               </div>
               <div className="mb-2 rounded border border-mineshaft-600 bg-mineshaft-900 p-4 px-0 pb-0">
                 <div className="mb-4 px-4">
@@ -683,77 +728,62 @@ export const SecretDetailSidebar = ({
               <div className="mb-4flex-grow dark cursor-default text-sm text-bunker-300">
                 <div className="mb-2 pl-1">Version History</div>
                 <div className="thin-scrollbar flex h-48 flex-col space-y-2 overflow-y-auto overflow-x-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 p-4 dark:[color-scheme:dark]">
-                  {secretVersion?.map(({ createdAt, secretValue, version, id, actor }) => (
-                    <div className="flex flex-row">
-                      <div key={id} className="flex w-full flex-col space-y-1">
-                        <div className="flex items-center">
-                          <div className="w-10">
-                            <div className="w-fit rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 text-sm text-mineshaft-300">
-                              v{version}
+                  {secretVersion?.map(
+                    ({ createdAt, secretValue, secretValueHidden, version, id, actor }) => (
+                      <div className="flex flex-row" key={id}>
+                        <div className="flex w-full flex-col space-y-1">
+                          <div className="flex items-center">
+                            <div className="w-10">
+                              <div className="w-fit rounded-md border border-mineshaft-600 bg-mineshaft-700 px-1 text-sm text-mineshaft-300">
+                                v{version}
+                              </div>
                             </div>
+                            <div>{format(new Date(createdAt), "Pp")}</div>
                           </div>
-                          <div>{format(new Date(createdAt), "Pp")}</div>
-                        </div>
-                        <div className="flex w-full cursor-default">
-                          <div className="relative w-10">
-                            <div className="absolute bottom-0 left-3 top-0 mt-0.5 border-l border-mineshaft-400/60" />
-                          </div>
-                          <div className="flex w-full cursor-default flex-col">
-                            {actor && (
-                              <div className="flex flex-row">
-                                <div className="flex w-fit flex-row text-sm">
-                                  Modified by:
-                                  <Tooltip content={getModifiedByName(actor.actorType, actor.name)}>
-                                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-                                    <div
-                                      onClick={() =>
-                                        onModifyHistoryClick(
-                                          actor.actorId,
-                                          actor.actorType,
-                                          actor.membershipId
-                                        )
-                                      }
-                                      className="cursor-pointer"
+                          <div className="flex w-full cursor-default">
+                            <div className="relative w-10">
+                              <div className="absolute bottom-0 left-3 top-0 mt-0.5 border-l border-mineshaft-400/60" />
+                            </div>
+                            <div className="flex w-full cursor-default flex-col">
+                              {actor && (
+                                <div className="flex flex-row">
+                                  <div className="flex w-fit flex-row text-sm">
+                                    Modified by:
+                                    <Tooltip
+                                      content={getModifiedByName(actor.actorType, actor.name)}
                                     >
-                                      <FontAwesomeIcon
-                                        icon={getModifiedByIcon(actor.actorType)}
-                                        className="ml-2"
-                                      />
-                                    </div>
-                                  </Tooltip>
+                                      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+                                      <div
+                                        onClick={() =>
+                                          onModifyHistoryClick(
+                                            actor.actorId,
+                                            actor.actorType,
+                                            actor.membershipId
+                                          )
+                                        }
+                                        className="cursor-pointer"
+                                      >
+                                        <FontAwesomeIcon
+                                          icon={getModifiedByIcon(actor.actorType)}
+                                          className="ml-2"
+                                        />
+                                      </div>
+                                    </Tooltip>
+                                  </div>
                                 </div>
-                              </div>
-                            )}
-                            <div className="flex flex-row">
-                              <div className="h-min w-fit rounded-sm bg-primary-500/10 px-1 text-primary-300/70">
-                                Value:
-                              </div>
-                              <div className="group break-all pl-1 font-mono">
-                                <div className="relative hidden cursor-pointer transition-all duration-200 group-[.show-value]:inline">
-                                  <button
-                                    type="button"
-                                    className="select-none text-left"
-                                    onClick={(e) => {
-                                      navigator.clipboard.writeText(secretValue || "");
-                                      const target = e.currentTarget;
-                                      target.style.borderBottom = "1px dashed";
-                                      target.style.paddingBottom = "-1px";
+                              )}
+                              <div className="flex flex-row">
+                                <div className="h-min w-fit rounded-sm bg-primary-500/10 px-1 text-primary-300/70">
+                                  Value:
+                                </div>
+                                <div className="group break-all pl-1 font-mono">
+                                  <div className="relative hidden cursor-pointer transition-all duration-200 group-[.show-value]:inline">
+                                    <button
+                                      type="button"
+                                      className="select-none text-left"
+                                      onClick={(e) => {
+                                        if (secretValueHidden) return;
 
-                                      // Create and insert popup
-                                      const popup = document.createElement("div");
-                                      popup.className =
-                                        "w-16 flex justify-center absolute top-6 left-0 text-xs text-primary-100 bg-mineshaft-800 px-1 py-0.5 rounded-md border border-primary-500/50";
-                                      popup.textContent = "Copied!";
-                                      target.parentElement?.appendChild(popup);
-
-                                      // Remove popup and border after delay
-                                      setTimeout(() => {
-                                        popup.remove();
-                                        target.style.borderBottom = "none";
-                                      }, 3000);
-                                    }}
-                                    onKeyDown={(e) => {
-                                      if (e.key === "Enter" || e.key === " ") {
                                         navigator.clipboard.writeText(secretValue || "");
                                         const target = e.currentTarget;
                                         target.style.borderBottom = "1px dashed";
@@ -771,75 +801,104 @@ export const SecretDetailSidebar = ({
                                           popup.remove();
                                           target.style.borderBottom = "none";
                                         }, 3000);
-                                      }
-                                    }}
-                                  >
-                                    {secretValue}
-                                  </button>
-                                  <button
-                                    type="button"
-                                    className="ml-1 cursor-pointer"
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      e.currentTarget
-                                        .closest(".group")
-                                        ?.classList.remove("show-value");
-                                    }}
-                                    onKeyDown={(e) => {
-                                      if (e.key === "Enter" || e.key === " ") {
+                                      }}
+                                      onKeyDown={(e) => {
+                                        if (secretValueHidden) return;
+
+                                        if (e.key === "Enter" || e.key === " ") {
+                                          navigator.clipboard.writeText(secretValue || "");
+                                          const target = e.currentTarget;
+                                          target.style.borderBottom = "1px dashed";
+                                          target.style.paddingBottom = "-1px";
+
+                                          // Create and insert popup
+                                          const popup = document.createElement("div");
+                                          popup.className =
+                                            "w-16 flex justify-center absolute top-6 left-0 text-xs text-primary-100 bg-mineshaft-800 px-1 py-0.5 rounded-md border border-primary-500/50";
+                                          popup.textContent = "Copied!";
+                                          target.parentElement?.appendChild(popup);
+
+                                          // Remove popup and border after delay
+                                          setTimeout(() => {
+                                            popup.remove();
+                                            target.style.borderBottom = "none";
+                                          }, 3000);
+                                        }
+                                      }}
+                                    >
+                                      <span
+                                        className={twMerge(
+                                          secretValueHidden && "text-xs text-bunker-300 opacity-40"
+                                        )}
+                                      >
+                                        {secretValueHidden ? "Hidden" : secretValue}
+                                      </span>
+                                    </button>
+                                    <button
+                                      type="button"
+                                      className="ml-1 cursor-pointer"
+                                      onClick={(e) => {
                                         e.stopPropagation();
                                         e.currentTarget
                                           .closest(".group")
                                           ?.classList.remove("show-value");
-                                      }
-                                    }}
-                                  >
-                                    <FontAwesomeIcon icon={faEyeSlash} />
-                                  </button>
-                                </div>
-                                <span className="group-[.show-value]:hidden">
-                                  {secretValue?.replace(/./g, "*")}
-                                  <button
-                                    type="button"
-                                    className="ml-1 cursor-pointer"
-                                    onClick={(e) => {
-                                      e.currentTarget
-                                        .closest(".group")
-                                        ?.classList.add("show-value");
-                                    }}
-                                    onKeyDown={(e) => {
-                                      if (e.key === "Enter" || e.key === " ") {
+                                      }}
+                                      onKeyDown={(e) => {
+                                        if (e.key === "Enter" || e.key === " ") {
+                                          e.stopPropagation();
+                                          e.currentTarget
+                                            .closest(".group")
+                                            ?.classList.remove("show-value");
+                                        }
+                                      }}
+                                    >
+                                      <FontAwesomeIcon icon={faEyeSlash} />
+                                    </button>
+                                  </div>
+                                  <span className="group-[.show-value]:hidden">
+                                    {secretValueHidden ? "******" : secretValue?.replace(/./g, "*")}
+                                    <button
+                                      type="button"
+                                      className="ml-1 cursor-pointer"
+                                      onClick={(e) => {
                                         e.currentTarget
                                           .closest(".group")
                                           ?.classList.add("show-value");
-                                      }
-                                    }}
-                                  >
-                                    <FontAwesomeIcon icon={faEye} />
-                                  </button>
-                                </span>
+                                      }}
+                                      onKeyDown={(e) => {
+                                        if (e.key === "Enter" || e.key === " ") {
+                                          e.currentTarget
+                                            .closest(".group")
+                                            ?.classList.add("show-value");
+                                        }
+                                      }}
+                                    >
+                                      <FontAwesomeIcon icon={faEye} />
+                                    </button>
+                                  </span>
+                                </div>
                               </div>
                             </div>
                           </div>
                         </div>
+                        <div
+                          className={`flex items-center justify-center ${version === secretVersion.length ? "hidden" : ""}`}
+                        >
+                          <Tooltip content="Restore Secret Value">
+                            <IconButton
+                              ariaLabel="Restore"
+                              variant="outline_bg"
+                              size="sm"
+                              className="h-8 w-8 rounded-md"
+                              onClick={() => setValue("value", secretValue)}
+                            >
+                              <FontAwesomeIcon icon={faArrowRotateRight} />
+                            </IconButton>
+                          </Tooltip>
+                        </div>
                       </div>
-                      <div
-                        className={`flex items-center justify-center ${version === secretVersion.length ? "hidden" : ""}`}
-                      >
-                        <Tooltip content="Restore Secret Value">
-                          <IconButton
-                            ariaLabel="Restore"
-                            variant="outline_bg"
-                            size="sm"
-                            className="h-8 w-8 rounded-md"
-                            onClick={() => setValue("value", secretValue)}
-                          >
-                            <FontAwesomeIcon icon={faArrowRotateRight} />
-                          </IconButton>
-                        </Tooltip>
-                      </div>
-                    </div>
-                  ))}
+                    )
+                  )}
                 </div>
               </div>
               <div className="dark mb-4 flex-grow text-sm text-bunker-300">
@@ -878,12 +937,9 @@ export const SecretDetailSidebar = ({
                             <div className="rounded-md bg-bunker-500">
                               <Tooltip
                                 content={user.allowedActions
-                                  .map(
-                                    (action) =>
-                                      action.charAt(0).toUpperCase() + action.slice(1).toLowerCase()
-                                  )
+                                  .map((action) => camelCaseToSpaces(action))
                                   .join(", ")}
-                                className="z-[100]"
+                                className="z-[100] capitalize"
                               >
                                 <Link
                                   to={

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable simple-import-sort/imports */
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
@@ -44,6 +45,9 @@ import {
   SecretReferenceTree
 } from "@app/components/secrets/SecretReferenceDetails";
 
+import { ProjectPermissionSecretActions } from "@app/context/ProjectPermissionContext/types";
+import { Blur } from "@app/components/v2/Blur";
+import { hasSecretReadValueOrDescribePermission } from "@app/lib/fn/permission";
 import {
   FontAwesomeSpriteName,
   formSchema,
@@ -99,8 +103,14 @@ export const SecretItem = memo(
       trigger,
       formState: { isDirty, isSubmitting, errors }
     } = useForm<TFormSchema>({
-      defaultValues: secret,
-      values: secret,
+      defaultValues: {
+        ...secret,
+        value: secret.secretValueHidden ? "" : secret.value
+      },
+      values: {
+        ...secret,
+        value: secret.secretValueHidden ? "" : secret.value
+      },
       resolver: zodResolver(formSchema)
     });
 
@@ -122,17 +132,18 @@ export const SecretItem = memo(
     });
 
     const isReadOnly =
-      permission.can(
-        ProjectPermissionActions.Read,
-        subject(ProjectPermissionSub.Secrets, {
+      hasSecretReadValueOrDescribePermission(
+        permission,
+        ProjectPermissionSecretActions.DescribeSecret,
+        {
           environment,
           secretPath,
           secretName,
           secretTags: selectedTagSlugs
-        })
+        }
       ) &&
       permission.cannot(
-        ProjectPermissionActions.Edit,
+        ProjectPermissionSecretActions.Edit,
         subject(ProjectPermissionSub.Secrets, {
           environment,
           secretPath,
@@ -141,6 +152,8 @@ export const SecretItem = memo(
         })
       );
 
+    const { secretValueHidden } = secret;
+
     const [isSecValueCopied, setIsSecValueCopied] = useToggle(false);
     useEffect(() => {
       let timer: NodeJS.Timeout;
@@ -272,6 +285,8 @@ export const SecretItem = memo(
                     />
                   )}
                 />
+              ) : secretValueHidden ? (
+                <Blur tooltipText="You do not have permission to read the value of this secret." />
               ) : (
                 <Controller
                   name="value"
@@ -285,6 +300,7 @@ export const SecretItem = memo(
                       environment={environment}
                       secretPath={secretPath}
                       {...field}
+                      defaultValue={secretValueHidden ? "" : undefined}
                       containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2"
                     />
                   )}
@@ -293,6 +309,7 @@ export const SecretItem = memo(
               <div key="actions" className="flex h-8 flex-shrink-0 self-start transition-all">
                 <Tooltip content="Copy secret">
                   <IconButton
+                    isDisabled={secret.secretValueHidden}
                     ariaLabel="copy-value"
                     variant="plain"
                     size="sm"
@@ -500,6 +517,7 @@ export const SecretItem = memo(
                     )}
                   </ProjectPermissionCan>
                   <IconButton
+                    isDisabled={secret.secretValueHidden}
                     className="w-0 overflow-hidden p-0 group-hover:mr-2 group-hover:w-5 data-[state=open]:w-6"
                     variant="plain"
                     size="md"

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretNoAccessListView.tsx

@@ -1,4 +1,5 @@
 import { FontAwesomeSymbol, Input, Tooltip } from "@app/components/v2";
+import { Blur } from "@app/components/v2/Blur";
 
 import { FontAwesomeSpriteName } from "./SecretListView.utils";
 
@@ -34,13 +35,7 @@ export const SecretNoAccessListView = ({ count }: Props) => {
                 className="w-full px-0 blur-sm placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
               />
             </div>
-            <div
-              className="flex w-80 flex-grow items-center border-x border-mineshaft-600 py-1 pl-4 pr-2"
-              tabIndex={0}
-              role="button"
-            >
-              <span className="blur">********</span>
-            </div>
+            <Blur />
           </div>
         </Tooltip>
       ))}

frontend/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SecretItem.tsx

@@ -20,6 +20,7 @@ import {
   Tooltip,
   Tr
 } from "@app/components/v2";
+import { Blur } from "@app/components/v2/Blur";
 import { useToggle } from "@app/hooks";
 import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
 
@@ -120,11 +121,25 @@ export const SecretItem = ({ mode, preSecret, postSecret }: Props) => {
                   <Td className="border-r border-mineshaft-600">Value</Td>
                   {isModified && (
                     <Td className="border-r border-mineshaft-600">
-                      <SecretInput value={preSecret?.value} />
+                      {preSecret?.secretValueHidden ? (
+                        <Blur
+                          className="w-min"
+                          tooltipText="You do not have permission to read the value of this secret."
+                        />
+                      ) : (
+                        <SecretInput value={preSecret?.value} />
+                      )}
                     </Td>
                   )}
                   <Td>
-                    <SecretInput value={postSecret?.value} />
+                    {postSecret?.secretValueHidden ? (
+                      <Blur
+                        className="w-min"
+                        tooltipText="You do not have permission to read the value of this secret."
+                      />
+                    ) : (
+                      <SecretInput value={postSecret?.value} />
+                    )}
                   </Td>
                 </Tr>
                 {Boolean(preSecret?.idOverride || postSecret?.idOverride) && (

frontend/src/pages/secret-manager/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -1,3 +1,4 @@
+import { ProjectOverviewChangeSection } from "@app/components/project/ProjectOverviewChangeSection";
 import { useWorkspace } from "@app/context";
 import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
 
@@ -7,7 +8,6 @@ import { BackfillSecretReferenceSecretion } from "../BackfillSecretReferenceSect
 import { DeleteProjectSection } from "../DeleteProjectSection";
 import { EnvironmentSection } from "../EnvironmentSection";
 import { PointInTimeVersionLimitSection } from "../PointInTimeVersionLimitSection";
-import { ProjectOverviewChangeSection } from "../ProjectOverviewChangeSection";
 import { RebuildSecretIndicesSection } from "../RebuildSecretIndicesSection/RebuildSecretIndicesSection";
 import { SecretTagsSection } from "../SecretTagsSection";
 
@@ -17,7 +17,7 @@ export const ProjectGeneralTab = () => {
 
   return (
     <div>
-      <ProjectOverviewChangeSection />
+      <ProjectOverviewChangeSection showSlugField />
       {isSecretManager && <EnvironmentSection />}
       {isSecretManager && <SecretTagsSection />}
       {isSecretManager && <AutoCapitalizationSection />}

frontend/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/CopyButton.tsx

@@ -1,51 +0,0 @@
-import { useCallback } from "react";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { createNotification } from "@app/components/notifications";
-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 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 px-3 py-2 text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-        {hoverText}
-      </span>
-    </Button>
-  );
-};

frontend/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/ProjectOverviewChangeSection.tsx

@@ -1,168 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, FormControl, Input, TextArea } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useUpdateProject } from "@app/hooks/api";
-
-import { CopyButton } from "./CopyButton";
-
-const formSchema = z.object({
-  name: z.string().min(1, "Required").max(64, "Too long, maximum length is 64 characters"),
-  description: z
-    .string()
-    .trim()
-    .max(256, "Description too long, max length is 256 characters")
-    .optional()
-});
-
-type FormData = z.infer<typeof formSchema>;
-
-export const ProjectOverviewChangeSection = () => {
-  const { currentWorkspace } = useWorkspace();
-  const { mutateAsync, isPending } = useUpdateProject();
-
-  const { handleSubmit, control, reset } = useForm<FormData>({ resolver: zodResolver(formSchema) });
-
-  useEffect(() => {
-    if (currentWorkspace) {
-      reset({
-        name: currentWorkspace.name,
-        description: currentWorkspace.description ?? ""
-      });
-    }
-  }, [currentWorkspace]);
-
-  const onFormSubmit = async ({ name, description }: FormData) => {
-    try {
-      if (!currentWorkspace?.id) return;
-
-      await mutateAsync({
-        projectID: currentWorkspace.id,
-        newProjectName: name,
-        newProjectDescription: description
-      });
-
-      createNotification({
-        text: "Successfully updated project overview",
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to update project overview",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="justify-betweens flex">
-        <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Overview</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
-          </CopyButton>
-        </div>
-      </div>
-      <div>
-        <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full flex-col gap-0">
-          <div className="flex w-full flex-row items-end gap-4">
-            <div className="w-full max-w-md">
-              <ProjectPermissionCan
-                I={ProjectPermissionActions.Edit}
-                a={ProjectPermissionSub.Project}
-              >
-                {(isAllowed) => (
-                  <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                        label="Project name"
-                      >
-                        <Input
-                          placeholder="Project name"
-                          {...field}
-                          className="bg-mineshaft-800"
-                          isDisabled={!isAllowed}
-                        />
-                      </FormControl>
-                    )}
-                    control={control}
-                    name="name"
-                  />
-                )}
-              </ProjectPermissionCan>
-            </div>
-          </div>
-          <div className="flex w-full flex-row items-end gap-4">
-            <div className="w-full max-w-md">
-              <ProjectPermissionCan
-                I={ProjectPermissionActions.Edit}
-                a={ProjectPermissionSub.Project}
-              >
-                {(isAllowed) => (
-                  <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                        label="Project description"
-                      >
-                        <TextArea
-                          placeholder="Project description"
-                          {...field}
-                          rows={3}
-                          className="thin-scrollbar max-w-md !resize-none bg-mineshaft-800"
-                          isDisabled={!isAllowed}
-                        />
-                      </FormControl>
-                    )}
-                    control={control}
-                    name="description"
-                  />
-                )}
-              </ProjectPermissionCan>
-            </div>
-          </div>
-          <div>
-            <ProjectPermissionCan
-              I={ProjectPermissionActions.Edit}
-              a={ProjectPermissionSub.Project}
-            >
-              {(isAllowed) => (
-                <Button
-                  colorSchema="secondary"
-                  type="submit"
-                  isLoading={isPending}
-                  isDisabled={isPending || !isAllowed}
-                >
-                  Save
-                </Button>
-              )}
-            </ProjectPermissionCan>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};

frontend/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/index.tsx

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

frontend/src/pages/secret-manager/SettingsPage/components/index.tsx

@@ -2,5 +2,4 @@ export { AutoCapitalizationSection } from "./AutoCapitalizationSection";
 export { BackfillSecretReferenceSecretion } from "./BackfillSecretReferenceSection";
 export { DeleteProjectSection } from "./DeleteProjectSection";
 export { EnvironmentSection } from "./EnvironmentSection";
-export { ProjectOverviewChangeSection } from "./ProjectOverviewChangeSection";
 export { SecretTagsSection } from "./SecretTagsSection";

frontend/src/pages/ssh/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx

@@ -1,11 +1,12 @@
+import { ProjectOverviewChangeSection } from "@app/components/project/ProjectOverviewChangeSection";
+
 import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
 import { DeleteProjectSection } from "../DeleteProjectSection";
-import { ProjectOverviewChangeSection } from "../ProjectOverviewChangeSection";
 
 export const ProjectGeneralTab = () => {
   return (
     <div>
-      <ProjectOverviewChangeSection />
+      <ProjectOverviewChangeSection showSlugField />
       <AuditLogsRetentionSection />
       <DeleteProjectSection />
     </div>

frontend/src/pages/ssh/SettingsPage/components/ProjectOverviewChangeSection/CopyButton.tsx

@@ -1,51 +0,0 @@
-import { useCallback } from "react";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { createNotification } from "@app/components/notifications";
-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 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 px-3 py-2 text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
-        {hoverText}
-      </span>
-    </Button>
-  );
-};

frontend/src/pages/ssh/SettingsPage/components/ProjectOverviewChangeSection/ProjectOverviewChangeSection.tsx

@@ -1,168 +0,0 @@
-import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-
-import { createNotification } from "@app/components/notifications";
-import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, FormControl, Input, TextArea } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useUpdateProject } from "@app/hooks/api";
-
-import { CopyButton } from "./CopyButton";
-
-const formSchema = z.object({
-  name: z.string().min(1, "Required").max(64, "Too long, maximum length is 64 characters"),
-  description: z
-    .string()
-    .trim()
-    .max(256, "Description too long, max length is 256 characters")
-    .optional()
-});
-
-type FormData = z.infer<typeof formSchema>;
-
-export const ProjectOverviewChangeSection = () => {
-  const { currentWorkspace } = useWorkspace();
-  const { mutateAsync, isPending } = useUpdateProject();
-
-  const { handleSubmit, control, reset } = useForm<FormData>({ resolver: zodResolver(formSchema) });
-
-  useEffect(() => {
-    if (currentWorkspace) {
-      reset({
-        name: currentWorkspace.name,
-        description: currentWorkspace.description ?? ""
-      });
-    }
-  }, [currentWorkspace]);
-
-  const onFormSubmit = async ({ name, description }: FormData) => {
-    try {
-      if (!currentWorkspace?.id) return;
-
-      await mutateAsync({
-        projectID: currentWorkspace.id,
-        newProjectName: name,
-        newProjectDescription: description
-      });
-
-      createNotification({
-        text: "Successfully updated project overview",
-        type: "success"
-      });
-    } catch (err) {
-      console.error(err);
-      createNotification({
-        text: "Failed to update project overview",
-        type: "error"
-      });
-    }
-  };
-
-  return (
-    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <div className="justify-betweens flex">
-        <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Project Overview</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
-          </CopyButton>
-        </div>
-      </div>
-      <div>
-        <form onSubmit={handleSubmit(onFormSubmit)} className="flex w-full flex-col gap-0">
-          <div className="flex w-full flex-row items-end gap-4">
-            <div className="w-full max-w-md">
-              <ProjectPermissionCan
-                I={ProjectPermissionActions.Edit}
-                a={ProjectPermissionSub.Project}
-              >
-                {(isAllowed) => (
-                  <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                        label="Project name"
-                      >
-                        <Input
-                          placeholder="Project name"
-                          {...field}
-                          className="bg-mineshaft-800"
-                          isDisabled={!isAllowed}
-                        />
-                      </FormControl>
-                    )}
-                    control={control}
-                    name="name"
-                  />
-                )}
-              </ProjectPermissionCan>
-            </div>
-          </div>
-          <div className="flex w-full flex-row items-end gap-4">
-            <div className="w-full max-w-md">
-              <ProjectPermissionCan
-                I={ProjectPermissionActions.Edit}
-                a={ProjectPermissionSub.Project}
-              >
-                {(isAllowed) => (
-                  <Controller
-                    defaultValue=""
-                    render={({ field, fieldState: { error } }) => (
-                      <FormControl
-                        isError={Boolean(error)}
-                        errorText={error?.message}
-                        label="Project description"
-                      >
-                        <TextArea
-                          placeholder="Project description"
-                          {...field}
-                          rows={3}
-                          className="thin-scrollbar max-w-md !resize-none bg-mineshaft-800"
-                          isDisabled={!isAllowed}
-                        />
-                      </FormControl>
-                    )}
-                    control={control}
-                    name="description"
-                  />
-                )}
-              </ProjectPermissionCan>
-            </div>
-          </div>
-          <div>
-            <ProjectPermissionCan
-              I={ProjectPermissionActions.Edit}
-              a={ProjectPermissionSub.Project}
-            >
-              {(isAllowed) => (
-                <Button
-                  colorSchema="secondary"
-                  type="submit"
-                  isLoading={isPending}
-                  isDisabled={isPending || !isAllowed}
-                >
-                  Save
-                </Button>
-              )}
-            </ProjectPermissionCan>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};

frontend/src/pages/ssh/SettingsPage/components/ProjectOverviewChangeSection/index.tsx

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

frontend/src/pages/ssh/SettingsPage/components/index.tsx

@@ -1,2 +1 @@
 export { DeleteProjectSection } from "./DeleteProjectSection";
-export { ProjectOverviewChangeSection } from "./ProjectOverviewChangeSection";

frontend/src/pages/user/PersonalSettingsPage/components/ChangePasswordSection/ChangePasswordSection.tsx

@@ -11,7 +11,9 @@ import attemptChangePassword from "@app/components/utilities/attemptChangePasswo
 import checkPassword from "@app/components/utilities/checks/password/checkPassword";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { useUser } from "@app/context";
-import { useSendPasswordSetupEmail } from "@app/hooks/api/auth/queries";
+import { useResetUserPasswordV2, useSendPasswordSetupEmail } from "@app/hooks/api/auth/queries";
+import { UserEncryptionVersion } from "@app/hooks/api/auth/types";
+import { useNavigate } from "@tanstack/react-router";
 
 type Errors = {
   tooShort?: string;
@@ -35,6 +37,7 @@ export type FormData = z.infer<typeof schema>;
 
 export const ChangePasswordSection = () => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
 
   const { user } = useUser();
   const { reset, control, handleSubmit } = useForm({
@@ -47,6 +50,7 @@ export const ChangePasswordSection = () => {
   const [errors, setErrors] = useState<Errors>({});
   const [isLoading, setIsLoading] = useState(false);
   const sendSetupPasswordEmail = useSendPasswordSetupEmail();
+  const { mutateAsync: resetPasswordV2 } = useResetUserPasswordV2();
 
   const onFormSubmit = async ({ oldPassword, newPassword }: FormData) => {
     try {
@@ -56,13 +60,20 @@ export const ChangePasswordSection = () => {
       });
 
       if (errorCheck) return;
-
       setIsLoading(true);
-      await attemptChangePassword({
-        email: user.username,
-        currentPassword: oldPassword,
-        newPassword
-      });
+
+      if (user.encryptionVersion === UserEncryptionVersion.V2) {
+        await resetPasswordV2({
+          oldPassword,
+          newPassword
+        });
+      } else {
+        await attemptChangePassword({
+          email: user.username,
+          currentPassword: oldPassword,
+          newPassword
+        });
+      }
 
       setIsLoading(false);
       createNotification({
@@ -71,7 +82,7 @@ export const ChangePasswordSection = () => {
       });
 
       reset();
-      window.location.href = "/login";
+      navigate({ to: "/login" });
     } catch (err) {
       console.error(err);
       setIsLoading(false);

frontend/src/pages/user/PersonalSettingsPage/components/PersonalGeneralTab/PersonalGeneralTab.tsx

@@ -1,14 +1,20 @@
+import { useUser } from "@app/context";
+import { UserEncryptionVersion } from "@app/hooks/api/auth/types";
+
 import { DeleteAccountSection } from "../DeleteAccountSection";
 import { EmergencyKitSection } from "../EmergencyKitSection";
 import { SessionsSection } from "../SessionsSection";
 import { UserNameSection } from "../UserNameSection";
 
 export const PersonalGeneralTab = () => {
+  const { user } = useUser();
+  const encryptionVersion = user?.encryptionVersion ?? UserEncryptionVersion.V2;
+
   return (
     <div>
       <UserNameSection />
       <SessionsSection />
-      <EmergencyKitSection />
+      {encryptionVersion === UserEncryptionVersion.V1 && <EmergencyKitSection />}
       <DeleteAccountSection />
     </div>
   );