Merge remote-tracking branch 'origin' into cert-mgmt

frontend/src/const.ts

@@ -23,7 +23,8 @@ export const publicPaths = [
   "/login/provider/success", // TODO: change
   "/login/provider/error", // TODO: change
   "/login/sso",
-  "/admin/signup"
+  "/admin/signup",
+  "/shared/secret/[id]"
 ];
 
 export const languageMap = {

frontend/src/helpers/secret.ts

@@ -0,0 +1,175 @@
+import path from "path";
+
+import { decryptSymmetric } from "@app/components/utilities/cryptography/crypto";
+import { fetchProjectEncryptedSecrets } from "@app/hooks/api/secrets/queries";
+
+const INTERPOLATION_SYNTAX_REG = /\${([^}]+)}/g;
+export const interpolateSecrets = ({
+  projectId,
+  secretEncKey
+}: {
+  projectId: string;
+  secretEncKey: string;
+}) => {
+  const fetchSecretsCrossEnv = () => {
+    const fetchCache: Record<string, Record<string, string>> = {};
+
+    return async (secRefEnv: string, secRefPath: string[], secRefKey: string) => {
+      const secRefPathUrl = path.join("/", ...secRefPath);
+      const uniqKey = `${secRefEnv}-${secRefPathUrl}`;
+
+      if (fetchCache?.[uniqKey]) {
+        return fetchCache[uniqKey][secRefKey];
+      }
+
+      // get secrets by projectId, env, path
+      const encryptedSecrets = await fetchProjectEncryptedSecrets({
+        workspaceId: projectId,
+        environment: secRefEnv,
+        secretPath: secRefPathUrl
+      });
+
+      const decryptedSec = encryptedSecrets.reduce<Record<string, string>>((prev, secret) => {
+        const secretKey = decryptSymmetric({
+          ciphertext: secret.secretKeyCiphertext,
+          iv: secret.secretKeyIV,
+          tag: secret.secretKeyTag,
+          key: secretEncKey
+        });
+        const secretValue = decryptSymmetric({
+          ciphertext: secret.secretValueCiphertext,
+          iv: secret.secretValueIV,
+          tag: secret.secretValueTag,
+          key: secretEncKey
+        });
+
+        // eslint-disable-next-line
+        prev[secretKey] = secretValue;
+        return prev;
+      }, {});
+
+      fetchCache[uniqKey] = decryptedSec;
+
+      return fetchCache[uniqKey][secRefKey];
+    };
+  };
+
+  const recursivelyExpandSecret = async (
+    expandedSec: Record<string, string>,
+    interpolatedSec: Record<string, string>,
+    fetchCrossEnv: (env: string, secPath: string[], secKey: string) => Promise<string>,
+    recursionChainBreaker: Record<string, boolean>,
+    key: string
+  ) => {
+    if (expandedSec?.[key] !== undefined) {
+      return expandedSec[key];
+    }
+    if (recursionChainBreaker?.[key]) {
+      return "";
+    }
+    // eslint-disable-next-line
+    recursionChainBreaker[key] = true;
+
+    let interpolatedValue = interpolatedSec[key];
+    if (!interpolatedValue) {
+      // eslint-disable-next-line no-console
+      console.error(`Couldn't find referenced value - ${key}`);
+      return "";
+    }
+
+    const refs = interpolatedValue.match(INTERPOLATION_SYNTAX_REG);
+    if (refs) {
+      await Promise.all(
+        refs.map(async (interpolationSyntax) => {
+          const interpolationKey = interpolationSyntax.slice(2, interpolationSyntax.length - 1);
+          const entities = interpolationKey.trim().split(".");
+
+          if (entities.length === 1) {
+            const val = await recursivelyExpandSecret(
+              expandedSec,
+              interpolatedSec,
+              fetchCrossEnv,
+              recursionChainBreaker,
+              interpolationKey
+            );
+            if (val) {
+              interpolatedValue = interpolatedValue.replaceAll(interpolationSyntax, val);
+            }
+            return;
+          }
+
+          if (entities.length > 1) {
+            const secRefEnv = entities[0];
+            const secRefPath = entities.slice(1, entities.length - 1);
+            const secRefKey = entities[entities.length - 1];
+
+            const val = await fetchCrossEnv(secRefEnv, secRefPath, secRefKey);
+            if (val) {
+              interpolatedValue = interpolatedValue.replaceAll(interpolationSyntax, val);
+            }
+          }
+        })
+      );
+    }
+
+    // eslint-disable-next-line
+    expandedSec[key] = interpolatedValue;
+    return interpolatedValue;
+  };
+
+  // used to convert multi line ones to quotes ones with \n
+  const formatMultiValueEnv = (val?: string) => {
+    if (!val) return "";
+    if (!val.match("\n")) return val;
+    return `"${val.replace(/\n/g, "\\n")}"`;
+  };
+
+  const expandSecrets = async (
+    secrets: Record<string, { value: string; comment?: string; skipMultilineEncoding?: boolean }>
+  ) => {
+    const expandedSec: Record<string, string> = {};
+    const interpolatedSec: Record<string, string> = {};
+
+    const crossSecEnvFetch = fetchSecretsCrossEnv();
+
+    Object.keys(secrets).forEach((key) => {
+      if (secrets[key].value.match(INTERPOLATION_SYNTAX_REG)) {
+        interpolatedSec[key] = secrets[key].value;
+      } else {
+        expandedSec[key] = secrets[key].value;
+      }
+    });
+
+    await Promise.all(
+      Object.keys(secrets).map(async (key) => {
+        if (expandedSec?.[key]) {
+          // should not do multi line encoding if user has set it to skip
+          // eslint-disable-next-line
+          secrets[key].value = secrets[key].skipMultilineEncoding
+            ? expandedSec[key]
+            : formatMultiValueEnv(expandedSec[key]);
+          return;
+        }
+
+        // this is to avoid recursion loop. So the graph should be direct graph rather than cyclic
+        // so for any recursion building if there is an entity two times same key meaning it will be looped
+        const recursionChainBreaker: Record<string, boolean> = {};
+        const expandedVal = await recursivelyExpandSecret(
+          expandedSec,
+          interpolatedSec,
+          crossSecEnvFetch,
+          recursionChainBreaker,
+          key
+        );
+
+        // eslint-disable-next-line
+        secrets[key].value = secrets[key].skipMultilineEncoding
+          ? expandedVal
+          : formatMultiValueEnv(expandedVal);
+      })
+    );
+
+    return secrets;
+  };
+  return expandSecrets;
+};

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

@@ -5,6 +5,7 @@ import { apiRequest } from "@app/config/request";
 import { setAuthToken } from "@app/reactQuery";
 
 import { organizationKeys } from "../organization/queries";
+import { workspaceKeys } from "../workspace/queries";
 import {
   ChangePasswordDTO,
   CompleteAccountDTO,
@@ -78,7 +79,10 @@ export const useSelectOrganization = () => {
       return data;
     },
     onSuccess: () => {
-      queryClient.invalidateQueries(organizationKeys.getUserOrganizations);
+      queryClient.invalidateQueries([
+        organizationKeys.getUserOrganizations,
+        workspaceKeys.getAllUserWorkspace
+      ]);
     }
   });
 };

frontend/src/hooks/api/identities/constants.tsx

@@ -4,5 +4,6 @@ export const identityAuthToNameMap: { [I in IdentityAuthMethod]: string } = {
   [IdentityAuthMethod.UNIVERSAL_AUTH]: "Universal Auth",
   [IdentityAuthMethod.KUBERNETES_AUTH]: "Kubernetes Auth",
   [IdentityAuthMethod.GCP_AUTH]: "GCP Auth",
-  [IdentityAuthMethod.AWS_AUTH]: "AWS Auth"
+  [IdentityAuthMethod.AWS_AUTH]: "AWS Auth",
+  [IdentityAuthMethod.AZURE_AUTH]: "Azure Auth"
 };

frontend/src/hooks/api/identities/enums.tsx

@@ -2,5 +2,6 @@ export enum IdentityAuthMethod {
   UNIVERSAL_AUTH = "universal-auth",
   KUBERNETES_AUTH = "kubernetes-auth",
   GCP_AUTH = "gcp-auth",
-  AWS_AUTH = "aws-auth"
+  AWS_AUTH = "aws-auth",
+  AZURE_AUTH = "azure-auth"
 }

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

@@ -2,6 +2,7 @@ export { identityAuthToNameMap } from "./constants";
 export { IdentityAuthMethod } from "./enums";
 export {
   useAddIdentityAwsAuth,
+  useAddIdentityAzureAuth,
   useAddIdentityGcpAuth,
   useAddIdentityKubernetesAuth,
   useAddIdentityUniversalAuth,
@@ -11,11 +12,14 @@ export {
   useRevokeIdentityUniversalAuthClientSecret,
   useUpdateIdentity,
   useUpdateIdentityAwsAuth,
+  useUpdateIdentityAzureAuth,
   useUpdateIdentityGcpAuth,
   useUpdateIdentityKubernetesAuth,
-  useUpdateIdentityUniversalAuth} from "./mutations";
+  useUpdateIdentityUniversalAuth
+} from "./mutations";
 export {
   useGetIdentityAwsAuth,
+  useGetIdentityAzureAuth,
   useGetIdentityGcpAuth,
   useGetIdentityKubernetesAuth,
   useGetIdentityUniversalAuth,

frontend/src/hooks/api/identities/mutations.tsx

@@ -6,6 +6,7 @@ import { organizationKeys } from "../organization/queries";
 import { identitiesKeys } from "./queries";
 import {
   AddIdentityAwsAuthDTO,
+  AddIdentityAzureAuthDTO,
   AddIdentityGcpAuthDTO,
   AddIdentityKubernetesAuthDTO,
   AddIdentityUniversalAuthDTO,
@@ -17,14 +18,17 @@ import {
   DeleteIdentityUniversalAuthClientSecretDTO,
   Identity,
   IdentityAwsAuth,
+  IdentityAzureAuth,
   IdentityGcpAuth,
   IdentityKubernetesAuth,
   IdentityUniversalAuth,
   UpdateIdentityAwsAuthDTO,
+  UpdateIdentityAzureAuthDTO,
   UpdateIdentityDTO,
   UpdateIdentityGcpAuthDTO,
   UpdateIdentityKubernetesAuthDTO,
-  UpdateIdentityUniversalAuthDTO} from "./types";
+  UpdateIdentityUniversalAuthDTO
+} from "./types";
 
 export const useCreateIdentity = () => {
   const queryClient = useQueryClient();
@@ -326,7 +330,41 @@ export const useUpdateIdentityAwsAuth = () => {
   });
 };
 
-// --- K8s auth (TODO: add cert and token reviewer JWT fields)
+export const useAddIdentityAzureAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityAzureAuth, {}, AddIdentityAzureAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      tenantId,
+      resource,
+      allowedServicePrincipalIds,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps
+    }) => {
+      const {
+        data: { identityAzureAuth }
+      } = await apiRequest.post<{ identityAzureAuth: IdentityAzureAuth }>(
+        `/api/v1/auth/azure-auth/identities/${identityId}`,
+        {
+          tenantId,
+          resource,
+          allowedServicePrincipalIds,
+          accessTokenTTL,
+          accessTokenMaxTTL,
+          accessTokenNumUsesLimit,
+          accessTokenTrustedIps
+        }
+      );
+
+      return identityAzureAuth;
+    },
+    onSuccess: (_, { organizationId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+    }
+  });
+};
 
 export const useAddIdentityKubernetesAuth = () => {
   const queryClient = useQueryClient();
@@ -370,6 +408,42 @@ export const useAddIdentityKubernetesAuth = () => {
   });
 };
 
+export const useUpdateIdentityAzureAuth = () => {
+  const queryClient = useQueryClient();
+  return useMutation<IdentityAzureAuth, {}, UpdateIdentityAzureAuthDTO>({
+    mutationFn: async ({
+      identityId,
+      tenantId,
+      resource,
+      allowedServicePrincipalIds,
+      accessTokenTTL,
+      accessTokenMaxTTL,
+      accessTokenNumUsesLimit,
+      accessTokenTrustedIps
+    }) => {
+      const {
+        data: { identityAzureAuth }
+      } = await apiRequest.patch<{ identityAzureAuth: IdentityAzureAuth }>(
+        `/api/v1/auth/azure-auth/identities/${identityId}`,
+        {
+          tenantId,
+          resource,
+          allowedServicePrincipalIds,
+          accessTokenTTL,
+          accessTokenMaxTTL,
+          accessTokenNumUsesLimit,
+          accessTokenTrustedIps
+        }
+      );
+
+      return identityAzureAuth;
+    },
+    onSuccess: (_, { organizationId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgIdentityMemberships(organizationId));
+    }
+  });
+};
+
 export const useUpdateIdentityKubernetesAuth = () => {
   const queryClient = useQueryClient();
   return useMutation<IdentityKubernetesAuth, {}, UpdateIdentityKubernetesAuthDTO>({
@@ -403,6 +477,7 @@ export const useUpdateIdentityKubernetesAuth = () => {
           accessTokenTrustedIps
         }
       );
+
       return identityKubernetesAuth;
     },
     onSuccess: (_, { organizationId }) => {

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

@@ -5,10 +5,10 @@ import { apiRequest } from "@app/config/request";
 import {
   ClientSecretData,
   IdentityAwsAuth,
+  IdentityAzureAuth,
   IdentityGcpAuth,
   IdentityKubernetesAuth,
-  IdentityUniversalAuth
-} from "./types";
+  IdentityUniversalAuth} from "./types";
 
 export const identitiesKeys = {
   getIdentityUniversalAuth: (identityId: string) =>
@@ -18,7 +18,8 @@ export const identitiesKeys = {
   getIdentityKubernetesAuth: (identityId: string) =>
     [{ identityId }, "identity-kubernetes-auth"] as const,
   getIdentityGcpAuth: (identityId: string) => [{ identityId }, "identity-gcp-auth"] as const,
-  getIdentityAwsAuth: (identityId: string) => [{ identityId }, "identity-aws-auth"] as const
+  getIdentityAwsAuth: (identityId: string) => [{ identityId }, "identity-aws-auth"] as const,
+  getIdentityAzureAuth: (identityId: string) => [{ identityId }, "identity-azure-auth"] as const
 };
 
 export const useGetIdentityUniversalAuth = (identityId: string) => {
@@ -81,6 +82,21 @@ export const useGetIdentityAwsAuth = (identityId: string) => {
   });
 };
 
+export const useGetIdentityAzureAuth = (identityId: string) => {
+  return useQuery({
+    enabled: Boolean(identityId),
+    queryKey: identitiesKeys.getIdentityAzureAuth(identityId),
+    queryFn: async () => {
+      const {
+        data: { identityAzureAuth }
+      } = await apiRequest.get<{ identityAzureAuth: IdentityAzureAuth }>(
+        `/api/v1/auth/azure-auth/identities/${identityId}`
+      );
+      return identityAzureAuth;
+    }
+  });
+};
+
 export const useGetIdentityKubernetesAuth = (identityId: string) => {
   return useQuery({
     enabled: Boolean(identityId),

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

@@ -195,6 +195,45 @@ export type UpdateIdentityAwsAuthDTO = {
   }[];
 };
 
+export type IdentityAzureAuth = {
+  identityId: string;
+  tenantId: string;
+  resource: string;
+  allowedServicePrincipalIds: string;
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenTrustedIps: IdentityTrustedIp[];
+};
+
+export type AddIdentityAzureAuthDTO = {
+  organizationId: string;
+  identityId: string;
+  tenantId: string;
+  resource: string;
+  allowedServicePrincipalIds: string;
+  accessTokenTTL: number;
+  accessTokenMaxTTL: number;
+  accessTokenNumUsesLimit: number;
+  accessTokenTrustedIps: {
+    ipAddress: string;
+  }[];
+};
+
+export type UpdateIdentityAzureAuthDTO = {
+  organizationId: string;
+  identityId: string;
+  tenantId?: string;
+  resource?: string;
+  allowedServicePrincipalIds?: string;
+  accessTokenTTL?: number;
+  accessTokenMaxTTL?: number;
+  accessTokenNumUsesLimit?: number;
+  accessTokenTrustedIps?: {
+    ipAddress: string;
+  }[];
+};
+
 export type IdentityKubernetesAuth = {
   identityId: string;
   kubernetesHost: string;

frontend/src/hooks/api/identityProjectAdditionalPrivilege/types.tsx

@@ -12,21 +12,30 @@ export type TIdentityProjectPrivilege = {
   updatedAt: Date;
   permissions?: TProjectPermission[];
 } & (
-    | {
+  | {
       isTemporary: true;
       temporaryMode: string;
       temporaryRange: string;
       temporaryAccessStartTime: string;
       temporaryAccessEndTime?: string;
     }
-    | {
+  | {
       isTemporary: false;
       temporaryMode?: null;
       temporaryRange?: null;
       temporaryAccessStartTime?: null;
       temporaryAccessEndTime?: null;
     }
-  );
+);
+
+export type TProjectSpecificPrivilegePermission = {
+  conditions: {
+    environment: string;
+    secretPath?: { $glob: string };
+  };
+  actions: string[];
+  subject: string;
+};
 
 export type TCreateIdentityProjectPrivilegeDTO = {
   identityId: string;
@@ -36,14 +45,16 @@ export type TCreateIdentityProjectPrivilegeDTO = {
   temporaryMode?: IdentityProjectAdditionalPrivilegeTemporaryMode;
   temporaryRange?: string;
   temporaryAccessStartTime?: string;
-  permissions: TProjectPermission[];
+  privilegePermission: TProjectSpecificPrivilegePermission;
 };
 
 export type TUpdateIdentityProjectPrivlegeDTO = {
   projectSlug: string;
   identityId: string;
   privilegeSlug: string;
-  privilegeDetails: Partial<Omit<TCreateIdentityProjectPrivilegeDTO, "projectMembershipId" | "projectId">>;
+  privilegeDetails: Partial<
+    Omit<TCreateIdentityProjectPrivilegeDTO, "projectMembershipId" | "projectId">
+  >;
 };
 
 export type TDeleteIdentityProjectPrivilegeDTO = {

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

@@ -30,7 +30,7 @@ export type HerokuPipelineCoupling = {
 
 export type Team = {
   name: string;
-  teamId: string;
+  id: string;
 };
 
 export type Environment = {

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

@@ -64,6 +64,7 @@ export const useCreateIntegration = () => {
         secretSuffix?: string;
         initialSyncBehavior?: string;
         shouldAutoRedeploy?: boolean;
+        mappingBehavior?: string;
         secretAWSTag?: {
           key: string;
           value: string;

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

@@ -36,6 +36,7 @@ export type TIntegration = {
   metadata?: {
     secretSuffix?: string;
     syncBehavior?: IntegrationSyncBehavior;
+    mappingBehavior?: IntegrationMappingBehavior;
     scope: string;
     org: string;
     project: string;
@@ -48,3 +49,8 @@ export enum IntegrationSyncBehavior {
   PREFER_TARGET = "prefer-target",
   PREFER_SOURCE = "prefer-source"
 }
+
+export enum IntegrationMappingBehavior {
+  ONE_TO_ONE = "one-to-one",
+  MANY_TO_ONE = "many-to-one"
+}

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

@@ -8,6 +8,7 @@ export {
 } from "./mutation";
 export {
   useGetOrgRoles,
+  useGetProjectRoleBySlug,
   useGetProjectRoles,
   useGetUserOrgPermissions,
   useGetUserProjectPermissions

frontend/src/hooks/api/roles/mutation.tsx

@@ -17,13 +17,10 @@ export const useCreateProjectRole = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ projectId, permissions, ...dto }: TCreateProjectRoleDTO) =>
-      apiRequest.post(`/api/v1/workspace/${projectId}/roles`, {
-        ...dto,
-        permissions: permissions.length ? packRules(permissions) : []
-      }),
-    onSuccess: (_, { projectId }) => {
-      queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectId));
+    mutationFn: ({ projectSlug, ...dto }: TCreateProjectRoleDTO) =>
+      apiRequest.post(`/api/v1/workspace/${projectSlug}/roles`, dto),
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectSlug));
     }
   });
 };
@@ -32,13 +29,10 @@ export const useUpdateProjectRole = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ id, projectId, permissions, ...dto }: TUpdateProjectRoleDTO) =>
-      apiRequest.patch(`/api/v1/workspace/${projectId}/roles/${id}`, {
-        ...dto,
-        permissions: permissions?.length ? packRules(permissions) : []
-      }),
-    onSuccess: (_, { projectId }) => {
-      queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectId));
+    mutationFn: ({ id, projectSlug, ...dto }: TUpdateProjectRoleDTO) =>
+      apiRequest.patch(`/api/v1/workspace/${projectSlug}/roles/${id}`, dto),
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectSlug));
     }
   });
 };
@@ -47,12 +41,10 @@ export const useDeleteProjectRole = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: ({ projectId, id }: TDeleteProjectRoleDTO) =>
-      apiRequest.delete(`/api/v1/workspace/${projectId}/roles/${id}`, {
-        data: { projectId }
-      }),
-    onSuccess: (_, { projectId }) => {
-      queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectId));
+    mutationFn: ({ projectSlug, id }: TDeleteProjectRoleDTO) =>
+      apiRequest.delete(`/api/v1/workspace/${projectSlug}/roles/${id}`),
+    onSuccess: (_, { projectSlug }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getProjectRoles(projectSlug));
     }
   });
 };

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

@@ -14,7 +14,6 @@ import {
   TGetUserProjectPermissionDTO,
   TOrgRole,
   TPermission,
-  TProjectPermission,
   TProjectRole
 } from "./types";
 
@@ -37,7 +36,9 @@ const glob: JsInterpreter<FieldCondition<string>> = (node, object, context) => {
 const conditionsMatcher = buildMongoQueryMatcher({ $glob }, { glob });
 
 export const roleQueryKeys = {
-  getProjectRoles: (projectId: string) => ["roles", { projectId }] as const,
+  getProjectRoles: (projectSlug: string) => ["roles", { projectSlug }] as const,
+  getProjectRoleBySlug: (projectSlug: string, roleSlug: string) =>
+    ["roles", { projectSlug, roleSlug }] as const,
   getOrgRoles: (orgId: string) => ["org-roles", { orgId }] as const,
   getUserOrgPermissions: ({ orgId }: TGetUserOrgPermissionsDTO) =>
     ["user-permissions", { orgId }] as const,
@@ -46,20 +47,29 @@ export const roleQueryKeys = {
 };
 
 const getProjectRoles = async (projectId: string) => {
-  const { data } = await apiRequest.get<{
-    data: { roles: Array<Omit<TProjectRole, "permissions"> & { permissions: unknown }> };
-  }>(`/api/v1/workspace/${projectId}/roles`);
-  return data.data.roles.map(({ permissions, ...el }) => ({
-    ...el,
-    permissions: unpackRules(permissions as PackRule<TProjectPermission>[])
-  }));
+  const { data } = await apiRequest.get<{ roles: Array<Omit<TProjectRole, "permissions">> }>(
+    `/api/v1/workspace/${projectId}/roles`
+  );
+  return data.roles;
 };
 
-export const useGetProjectRoles = (projectId: string) =>
+export const useGetProjectRoles = (projectSlug: string) =>
   useQuery({
-    queryKey: roleQueryKeys.getProjectRoles(projectId),
-    queryFn: () => getProjectRoles(projectId),
-    enabled: Boolean(projectId)
+    queryKey: roleQueryKeys.getProjectRoles(projectSlug),
+    queryFn: () => getProjectRoles(projectSlug),
+    enabled: Boolean(projectSlug)
+  });
+
+export const useGetProjectRoleBySlug = (projectSlug: string, roleSlug: string) =>
+  useQuery({
+    queryKey: roleQueryKeys.getProjectRoleBySlug(projectSlug, roleSlug),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{ role: TProjectRole }>(
+        `/api/v1/workspace/${projectSlug}/roles/slug/${roleSlug}`
+      );
+      return data.role;
+    },
+    enabled: Boolean(projectSlug && roleSlug)
   });
 
 const getOrgRoles = async (orgId: string) => {

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

@@ -71,7 +71,7 @@ export type TDeleteOrgRoleDTO = {
 };
 
 export type TCreateProjectRoleDTO = {
-  projectId: string;
+  projectSlug: string;
   name: string;
   description?: string;
   slug: string;
@@ -79,11 +79,11 @@ export type TCreateProjectRoleDTO = {
 };
 
 export type TUpdateProjectRoleDTO = {
-  projectId: string;
+  projectSlug: string;
   id: string;
 } & Partial<Omit<TCreateProjectRoleDTO, "orgId">>;
 
 export type TDeleteProjectRoleDTO = {
-  projectId: string;
+  projectSlug: string;
   id: string;
 };

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

@@ -0,0 +1,3 @@
+export * from "./mutations";
+export * from "./queries";
+export * from "./types";

frontend/src/hooks/api/secretSharing/mutations.ts

@@ -0,0 +1,35 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TCreateSharedSecretRequest, TDeleteSharedSecretRequest, TSharedSecret } from "./types";
+
+export const useCreateSharedSecret = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (inputData: TCreateSharedSecretRequest) => {
+      const { data } = await apiRequest.post<TSharedSecret>("/api/v1/secret-sharing", inputData);
+      return data;
+    },
+    onSuccess: () => queryClient.invalidateQueries(["sharedSecrets"])
+  });
+};
+
+export const useDeleteSharedSecret = () => {
+  const queryClient = useQueryClient();
+  return useMutation<
+    TSharedSecret,
+    { message: string },
+    { sharedSecretId: string }
+  >({
+    mutationFn: async ({ sharedSecretId }: TDeleteSharedSecretRequest) => {
+      const { data } = await apiRequest.delete<TSharedSecret>(
+        `/api/v1/secret-sharing/${sharedSecretId}`
+      );
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries(["sharedSecrets"]);
+    }
+  });
+};

frontend/src/hooks/api/secretSharing/queries.ts

@@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TSharedSecret, TViewSharedSecretResponse } from "./types";
+
+export const useGetSharedSecrets = () => {
+  return useQuery({
+    queryKey: ["sharedSecrets"],
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TSharedSecret[]>(
+        "/api/v1/secret-sharing/"
+      );
+      return data;
+    }
+  });
+};
+
+export const useGetActiveSharedSecretByIdAndHashedHex = (id: string, hashedHex: string) => {
+  return useQuery<TViewSharedSecretResponse, [string]>({
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TViewSharedSecretResponse>(
+        `/api/v1/secret-sharing/public/${id}?hashedHex=${hashedHex}`
+      );
+      return {
+        name: data.name,
+        encryptedValue: data.encryptedValue,
+        iv: data.iv,
+        tag: data.tag,
+        expiresAt: data.expiresAt
+      };
+    }
+  });
+};

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

@@ -0,0 +1,33 @@
+export type TSharedSecret = {
+  id: string;
+  name: string;
+  encryptedValue: string;
+  iv: string;
+  tag: string;
+  hashedHex: string;
+  userId: string;
+  expiresAt: Date;
+  createdAt: Date;
+  updatedAt: Date;
+};
+
+export type TCreateSharedSecretRequest = {
+  name: string;
+  encryptedValue: string;
+  iv: string;
+  tag: string;
+  hashedHex: string;
+  expiresAt: Date;
+};
+
+export type TViewSharedSecretResponse = {
+  name: string;
+  encryptedValue: string;
+  iv: string;
+  tag: string;
+  expiresAt: Date;
+};
+
+export type TDeleteSharedSecretRequest = {
+  sharedSecretId: string;
+};

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

@@ -98,7 +98,7 @@ export const decryptSecrets = (
   return secrets;
 };
 
-const fetchProjectEncryptedSecrets = async ({
+export const fetchProjectEncryptedSecrets = async ({
   workspaceId,
   environment,
   secretPath

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -642,6 +642,18 @@ export const AppLayout = ({ children }: LayoutProps) => {
                           </MenuItem>
                         </a>
                       </Link>
+                      <Link href={`/org/${currentOrg?.id}/secret-sharing`} passHref>
+                        <a>
+                          <MenuItem
+                            isSelected={
+                              router.asPath === `/org/${currentOrg?.id}/secret-sharing`
+                            }
+                            icon="system-outline-90-lock-closed"
+                          >
+                            Secret Sharing
+                          </MenuItem>
+                        </a>
+                      </Link>
                       {(window.location.origin.includes("https://app.infisical.com") ||
                         window.location.origin.includes("https://gamma.infisical.com")) && (
                         <Link href={`/org/${currentOrg?.id}/billing`} passHref>

frontend/src/pages/integrations/aws-secret-manager/create.tsx

@@ -15,6 +15,7 @@ import queryString from "query-string";
 
 import { useCreateIntegration } from "@app/hooks/api";
 import { useGetIntegrationAuthAwsKmsKeys } from "@app/hooks/api/integrationAuth/queries";
+import { IntegrationMappingBehavior } from "@app/hooks/api/integrations/types";
 
 import {
   Button,
@@ -70,6 +71,17 @@ const awsRegions = [
   { name: "AWS GovCloud (US-West)", slug: "us-gov-west-1" }
 ];
 
+const mappingBehaviors = [
+  {
+    label: "Many to One (All Infisical secrets will be mapped to a single AWS secret)",
+    value: IntegrationMappingBehavior.MANY_TO_ONE
+  },
+  {
+    label: "One to One - (Each Infisical secret will be mapped to its own AWS secret)",
+    value: IntegrationMappingBehavior.ONE_TO_ONE
+  }
+];
+
 export default function AWSSecretManagerCreateIntegrationPage() {
   const router = useRouter();
   const { mutateAsync } = useCreateIntegration();
@@ -84,6 +96,9 @@ export default function AWSSecretManagerCreateIntegrationPage() {
   const [selectedSourceEnvironment, setSelectedSourceEnvironment] = useState("");
   const [secretPath, setSecretPath] = useState("/");
   const [selectedAWSRegion, setSelectedAWSRegion] = useState("");
+  const [selectedMappingBehavior, setSelectedMappingBehavior] = useState(
+    IntegrationMappingBehavior.MANY_TO_ONE
+  );
   const [targetSecretName, setTargetSecretName] = useState("");
   const [targetSecretNameErrorText, setTargetSecretNameErrorText] = useState("");
   const [tagKey, setTagKey] = useState("");
@@ -116,7 +131,14 @@ export default function AWSSecretManagerCreateIntegrationPage() {
 
   const handleButtonClick = async () => {
     try {
-      if (targetSecretName.trim() === "") {
+      if (!selectedMappingBehavior) {
+        return;
+      }
+
+      if (
+        selectedMappingBehavior === IntegrationMappingBehavior.MANY_TO_ONE &&
+        targetSecretName.trim() === ""
+      ) {
         setTargetSecretName("Secret name cannot be blank");
         return;
       }
@@ -143,15 +165,16 @@ export default function AWSSecretManagerCreateIntegrationPage() {
                 ]
               }
             : {}),
-          ...(kmsKeyId && { kmsKeyId })
+          ...(kmsKeyId && { kmsKeyId }),
+          mappingBehavior: selectedMappingBehavior
         }
       });
-
       setIsLoading(false);
       setTargetSecretNameErrorText("");
 
       router.push(`/integrations/${localStorage.getItem("projectData.id")}`);
     } catch (err) {
+      setIsLoading(false);
       console.error(err);
     }
   };
@@ -248,19 +271,40 @@ export default function AWSSecretManagerCreateIntegrationPage() {
                   ))}
                 </Select>
               </FormControl>
-              <FormControl
-                label="AWS SM Secret Name"
-                errorText={targetSecretNameErrorText}
-                isError={targetSecretNameErrorText !== "" ?? false}
-              >
-                <Input
-                  placeholder={`${workspace.name
-                    .toLowerCase()
-                    .replace(/ /g, "-")}/${selectedSourceEnvironment}`}
-                  value={targetSecretName}
-                  onChange={(e) => setTargetSecretName(e.target.value)}
-                />
+              <FormControl label="Mapping Behavior">
+                <Select
+                  value={selectedMappingBehavior}
+                  onValueChange={(val) => {
+                    setSelectedMappingBehavior(val as IntegrationMappingBehavior);
+                  }}
+                  className="w-full border border-mineshaft-500 text-left"
+                >
+                  {mappingBehaviors.map((option) => (
+                    <SelectItem
+                      value={option.value}
+                      className="text-left"
+                      key={`aws-environment-${option.value}`}
+                    >
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </Select>
               </FormControl>
+              {selectedMappingBehavior === IntegrationMappingBehavior.MANY_TO_ONE && (
+                <FormControl
+                  label="AWS SM Secret Name"
+                  errorText={targetSecretNameErrorText}
+                  isError={targetSecretNameErrorText !== "" ?? false}
+                >
+                  <Input
+                    placeholder={`${workspace.name
+                      .toLowerCase()
+                      .replace(/ /g, "-")}/${selectedSourceEnvironment}`}
+                    value={targetSecretName}
+                    onChange={(e) => setTargetSecretName(e.target.value)}
+                  />
+                </FormControl>
+              )}
             </motion.div>
           </TabPanel>
           <TabPanel value={TabSections.Options}>

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

@@ -121,7 +121,7 @@ export default function GitLabCreateIntegrationPage() {
       if (integrationAuthTeams) {
         if (integrationAuthTeams.length > 0) {
           // case: user is part of at least 1 group in GitLab
-          setValue("targetTeamId", String(integrationAuthTeams[0].teamId));
+          setValue("targetTeamId", String(integrationAuthTeams[0].id));
         } else {
           // case: user is not part of any groups in GitLab
           setValue("targetTeamId", "none");
@@ -312,8 +312,8 @@ export default function GitLabCreateIntegrationPage() {
                         {integrationAuthTeams.length > 0 ? (
                           integrationAuthTeams.map((integrationAuthTeam) => (
                             <SelectItem
-                              value={String(integrationAuthTeam.teamId as string)}
-                              key={`target-team-${String(integrationAuthTeam.teamId)}`}
+                              value={String(integrationAuthTeam.id as string)}
+                              key={`target-team-${String(integrationAuthTeam.id)}`}
                             >
                               {integrationAuthTeam.name}
                             </SelectItem>

frontend/src/pages/login/select-organization.tsx

@@ -121,6 +121,14 @@ export default function LoginPage() {
     }
   }, [router]);
 
+  // Case: User has no organizations.
+  // This can happen if the user was previously a member, but the organization was deleted or the user was removed.
+  useEffect(() => {
+    if (!organizations.isLoading && organizations.data?.length === 0) {
+      router.push("/org/none");
+    }
+  }, [organizations.isLoading, organizations.data]);
+
   if (userLoading || !user) {
     return <LoadingScreen />;
   }

frontend/src/pages/org/[id]/secret-sharing/index.tsx

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { ShareSecretPage } from "@app/views/ShareSecretPage";
+
+const SecretApproval = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("approval.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content={String(t("approval.og-title"))} />
+        <meta name="og:description" content={String(t("approval.og-description"))} />
+      </Head>
+      <div className="h-full">
+        <ShareSecretPage />
+      </div>
+    </>
+  );
+};
+
+export default SecretApproval;
+
+SecretApproval.requireAuth = true;

frontend/src/pages/shared/secret/[id]/index.tsx

@@ -0,0 +1,24 @@
+import Head from "next/head";
+
+import { ShareSecretPublicPage } from "@app/views/ShareSecretPublicPage";
+
+const SecretApproval = () => {
+  return (
+    <>
+      <Head>
+        <title>Securely Share Secrets | Infisical</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content="" />
+        <meta name="og:description" content="" />
+      </Head>
+      <div className="h-full">
+        <ShareSecretPublicPage />
+      </div>
+    </>
+  );
+};
+
+export default SecretApproval;
+
+SecretApproval.requireAuth = false;

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

@@ -21,6 +21,7 @@ import {
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import { useSyncIntegration } from "@app/hooks/api/integrations/queries";
+import { IntegrationMappingBehavior } from "@app/hooks/api/integrations/types";
 import { TIntegration } from "@app/hooks/api/types";
 
 type Props = {
@@ -131,30 +132,35 @@ export const IntegrationsSection = ({
                     </div>
                   </div>
                 )}
-                <div className="ml-2 flex flex-col">
-                  <FormLabel
-                    label={
-                      (integration.integration === "qovery" && integration?.scope) ||
-                      (integration.integration === "aws-secret-manager" && "Secret") ||
-                      (integration.integration === "aws-parameter-store" && "Path") ||
-                      (integration?.integration === "terraform-cloud" && "Project") ||
-                      (integration?.scope === "github-org" && "Organization") ||
-                      (["github-repo", "github-env"].includes(integration?.scope as string) &&
-                        "Repository") ||
-                      "App"
-                    }
-                  />
-                  <div className="no-scrollbar::-webkit-scrollbar min-w-[8rem] max-w-[12rem] overflow-scroll whitespace-nowrap rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 no-scrollbar">
-                    {(integration.integration === "hashicorp-vault" &&
-                      `${integration.app} - path: ${integration.path}`) ||
-                      (integration.scope === "github-org" && `${integration.owner}`) ||
-                      (integration.integration === "aws-parameter-store" &&
-                        `${integration.path}`) ||
-                      (integration.scope?.startsWith("github-") &&
-                        `${integration.owner}/${integration.app}`) ||
-                      integration.app}
+                {!(
+                  integration.integration === "aws-secret-manager" &&
+                  integration.metadata?.mappingBehavior === IntegrationMappingBehavior.ONE_TO_ONE
+                ) && (
+                  <div className="ml-2 flex flex-col">
+                    <FormLabel
+                      label={
+                        (integration.integration === "qovery" && integration?.scope) ||
+                        (integration.integration === "aws-secret-manager" && "Secret") ||
+                        (integration.integration === "aws-parameter-store" && "Path") ||
+                        (integration?.integration === "terraform-cloud" && "Project") ||
+                        (integration?.scope === "github-org" && "Organization") ||
+                        (["github-repo", "github-env"].includes(integration?.scope as string) &&
+                          "Repository") ||
+                        "App"
+                      }
+                    />
+                    <div className="no-scrollbar::-webkit-scrollbar min-w-[8rem] max-w-[12rem] overflow-scroll whitespace-nowrap rounded-md border border-mineshaft-700 bg-mineshaft-900 px-3 py-2 font-inter text-sm text-bunker-200 no-scrollbar">
+                      {(integration.integration === "hashicorp-vault" &&
+                        `${integration.app} - path: ${integration.path}`) ||
+                        (integration.scope === "github-org" && `${integration.owner}`) ||
+                        (integration.integration === "aws-parameter-store" &&
+                          `${integration.path}`) ||
+                        (integration.scope?.startsWith("github-") &&
+                          `${integration.owner}/${integration.app}`) ||
+                        integration.app}
+                    </div>
                   </div>
-                </div>
+                )}
                 {(integration.integration === "vercel" ||
                   integration.integration === "netlify" ||
                   integration.integration === "railway" ||

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

@@ -105,8 +105,18 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
           });
         }
       }
-    } catch (err) {
+    } catch (err: any) {
       console.error(err);
+      if (err.response.data.error === "User Locked") {
+        createNotification({
+          title: err.response.data.error,
+          text: err.response.data.message,
+          type: "error"
+        });
+        setIsLoading(false);
+        return;
+      }
+
       setLoginError(true);
       createNotification({
         text: "Login unsuccessful. Double-check your credentials and try again.",

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

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import axios from "axios";
 import jwt_decode from "jwt-decode";
 
-import Error from "@app/components/basic/Error"; // which to notification
+import Error from "@app/components/basic/Error";
 import { createNotification } from "@app/components/notifications";
 import attemptCliLoginMfa from "@app/components/utilities/attemptCliLoginMfa";
 import attemptLoginMfa from "@app/components/utilities/attemptLoginMfa";
@@ -46,20 +46,7 @@ type Props = {
   callbackPort?: string | null;
 };
 
-interface VerifyMfaTokenError {
-  response: {
-    data: {
-      context: {
-        code: string;
-        triesLeft: number;
-      };
-    };
-    status: number;
-  };
-}
-
 export const MFAStep = ({ email, password, providerAuthToken }: Props) => {
-  
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingResend, setIsLoadingResend] = useState(false);
@@ -178,20 +165,31 @@ export const MFAStep = ({ email, password, providerAuthToken }: Props) => {
           });
         }
       }
-    } catch (err) {
-      const error = err as VerifyMfaTokenError;
+    } catch (err: any) {
+      if (err.response.data.error === "User Locked") {
+        createNotification({
+          title: err.response.data.error,
+          text: err.response.data.message,
+          type: "error"
+        });
+        setIsLoading(false);
+        return;
+      }
+
       createNotification({
         text: "Failed to log in",
         type: "error"
       });
 
-      if (error?.response?.status === 500) {
-        window.location.reload();
-      } else if (error?.response?.data?.context?.triesLeft) {
-        setTriesLeft(error?.response?.data?.context?.triesLeft);
-        if (error.response.data.context.triesLeft === 0) {
-          window.location.reload();
-        }
+      if (triesLeft) {
+        setTriesLeft((left) => {
+          if (triesLeft === 1) {
+            router.push("/");
+          }
+          return (left as number) - 1;
+        });
+      } else {
+        setTriesLeft(2);
       }
 
       setIsLoading(false);
@@ -236,7 +234,7 @@ export const MFAStep = ({ email, password, providerAuthToken }: Props) => {
         />
       </div>
       {typeof triesLeft === "number" && (
-        <Error text={`${t("mfa.step2-code-error")} ${triesLeft}`} />
+        <Error text={`Invalid code. You have ${triesLeft} attempt(s) remaining.`} />
       )}
       <div className="mx-auto mt-2 flex w-1/4 min-w-[20rem] max-w-xs flex-col items-center justify-center text-center text-sm md:max-w-md md:text-left lg:w-[19%]">
         <div className="text-l w-full py-1 text-lg">

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

@@ -31,7 +31,6 @@ export const PasswordStep = ({
   setPassword,
   setStep
 }: Props) => {
-  
   const [isLoading, setIsLoading] = useState(false);
   const { t } = useTranslation();
   const router = useRouter();
@@ -146,13 +145,23 @@ export const PasswordStep = ({
           }
         }
       }
-    } catch (err) {
+    } catch (err: any) {
       setIsLoading(false);
+      console.error(err);
+
+      if (err.response.data.error === "User Locked") {
+        createNotification({
+          title: err.response.data.error,
+          text: err.response.data.message,
+          type: "error"
+        });
+        return;
+      }
+
       createNotification({
         text: "Login unsuccessful. Double-check your master password and try again.",
         type: "error"
       });
-      console.error(err);
     }
   };
 

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAuthMethodModal.tsx

@@ -15,6 +15,7 @@ import { IdentityAuthMethod } from "@app/hooks/api/identities";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 import { IdentityAwsAuthForm } from "./IdentityAwsAuthForm";
+import { IdentityAzureAuthForm } from "./IdentityAzureAuthForm";
 import { IdentityGcpAuthForm } from "./IdentityGcpAuthForm";
 import { IdentityKubernetesAuthForm } from "./IdentityKubernetesAuthForm";
 import { IdentityUniversalAuthForm } from "./IdentityUniversalAuthForm";
@@ -32,7 +33,8 @@ const identityAuthMethods = [
   { label: "Universal Auth", value: IdentityAuthMethod.UNIVERSAL_AUTH },
   { label: "Kubernetes Auth", value: IdentityAuthMethod.KUBERNETES_AUTH },
   { label: "GCP Auth", value: IdentityAuthMethod.GCP_AUTH },
-  { label: "AWS Auth", value: IdentityAuthMethod.AWS_AUTH }
+  { label: "AWS Auth", value: IdentityAuthMethod.AWS_AUTH },
+  { label: "Azure Auth", value: IdentityAuthMethod.AZURE_AUTH }
 ];
 
 const schema = yup
@@ -97,6 +99,15 @@ export const IdentityAuthMethodModal = ({ popUp, handlePopUpOpen, handlePopUpTog
           />
         );
       }
+      case IdentityAuthMethod.AZURE_AUTH: {
+        return (
+          <IdentityAzureAuthForm
+            handlePopUpOpen={handlePopUpOpen}
+            handlePopUpToggle={handlePopUpToggle}
+            identityAuthMethodData={identityAuthMethodData}
+          />
+        );
+      }
       case IdentityAuthMethod.UNIVERSAL_AUTH: {
         return (
           <IdentityUniversalAuthForm

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityAzureAuthForm.tsx

@@ -0,0 +1,350 @@
+import { useEffect } from "react";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, IconButton, Input } from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import {
+  useAddIdentityAzureAuth,
+  useGetIdentityAzureAuth,
+  useUpdateIdentityAzureAuth
+} from "@app/hooks/api";
+import { IdentityAuthMethod } from "@app/hooks/api/identities";
+import { IdentityTrustedIp } from "@app/hooks/api/identities/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z
+  .object({
+    tenantId: z.string(),
+    resource: z.string(),
+    allowedServicePrincipalIds: z.string(),
+    accessTokenTTL: z.string(),
+    accessTokenMaxTTL: z.string(),
+    accessTokenNumUsesLimit: z.string(),
+    accessTokenTrustedIps: z
+      .array(
+        z.object({
+          ipAddress: z.string().max(50)
+        })
+      )
+      .min(1)
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["identityAuthMethod"]>,
+    state?: boolean
+  ) => void;
+  identityAuthMethodData: {
+    identityId: string;
+    name: string;
+    authMethod?: IdentityAuthMethod;
+  };
+};
+
+export const IdentityAzureAuthForm = ({
+  handlePopUpOpen,
+  handlePopUpToggle,
+  identityAuthMethodData
+}: Props) => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg?.id || "";
+  const { subscription } = useSubscription();
+
+  const { mutateAsync: addMutateAsync } = useAddIdentityAzureAuth();
+  const { mutateAsync: updateMutateAsync } = useUpdateIdentityAzureAuth();
+
+  const { data } = useGetIdentityAzureAuth(identityAuthMethodData?.identityId ?? "");
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      tenantId: "",
+      resource: "https://management.azure.com/",
+      allowedServicePrincipalIds: "",
+      accessTokenTTL: "2592000",
+      accessTokenMaxTTL: "2592000",
+      accessTokenNumUsesLimit: "0",
+      accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+    }
+  });
+
+  const {
+    fields: accessTokenTrustedIpsFields,
+    append: appendAccessTokenTrustedIp,
+    remove: removeAccessTokenTrustedIp
+  } = useFieldArray({ control, name: "accessTokenTrustedIps" });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        tenantId: data.tenantId,
+        resource: data.resource,
+        allowedServicePrincipalIds: data.allowedServicePrincipalIds,
+        accessTokenTTL: String(data.accessTokenTTL),
+        accessTokenMaxTTL: String(data.accessTokenMaxTTL),
+        accessTokenNumUsesLimit: String(data.accessTokenNumUsesLimit),
+        accessTokenTrustedIps: data.accessTokenTrustedIps.map(
+          ({ ipAddress, prefix }: IdentityTrustedIp) => {
+            return {
+              ipAddress: `${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`
+            };
+          }
+        )
+      });
+    } else {
+      reset({
+        tenantId: "",
+        resource: "https://management.azure.com/",
+        allowedServicePrincipalIds: "",
+        accessTokenTTL: "2592000",
+        accessTokenMaxTTL: "2592000",
+        accessTokenNumUsesLimit: "0",
+        accessTokenTrustedIps: [{ ipAddress: "0.0.0.0/0" }, { ipAddress: "::/0" }]
+      });
+    }
+  }, [data]);
+
+  const onFormSubmit = async ({
+    tenantId,
+    resource,
+    allowedServicePrincipalIds,
+    accessTokenTTL,
+    accessTokenMaxTTL,
+    accessTokenNumUsesLimit,
+    accessTokenTrustedIps
+  }: FormData) => {
+    try {
+      if (!identityAuthMethodData) return;
+
+      if (data) {
+        await updateMutateAsync({
+          organizationId: orgId,
+          identityId: identityAuthMethodData.identityId,
+          tenantId,
+          resource,
+          allowedServicePrincipalIds,
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      } else {
+        await addMutateAsync({
+          organizationId: orgId,
+          identityId: identityAuthMethodData.identityId,
+          tenantId: tenantId || "",
+          resource: resource || "",
+          allowedServicePrincipalIds: allowedServicePrincipalIds || "",
+          accessTokenTTL: Number(accessTokenTTL),
+          accessTokenMaxTTL: Number(accessTokenMaxTTL),
+          accessTokenNumUsesLimit: Number(accessTokenNumUsesLimit),
+          accessTokenTrustedIps
+        });
+      }
+
+      handlePopUpToggle("identityAuthMethod", false);
+
+      createNotification({
+        text: `Successfully ${
+          identityAuthMethodData?.authMethod ? "updated" : "configured"
+        } auth method`,
+        type: "success"
+      });
+
+      reset();
+    } catch (err) {
+      createNotification({
+        text: `Failed to ${identityAuthMethodData?.authMethod ? "update" : "configure"} identity`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onFormSubmit)}>
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="tenantId"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Tenant ID"
+            isError={Boolean(error)}
+            errorText={error?.message}
+            isRequired
+          >
+            <Input {...field} placeholder="00000000-0000-0000-0000-000000000000" type="text" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="resource"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Resource / Audience"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="https://management.azure.com/" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        name="allowedServicePrincipalIds"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Allowed Service Principal IDs"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="00000000-0000-0000-0000-000000000000, ..." />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="2592000"
+        name="accessTokenMaxTTL"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max TTL (seconds)"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="2592000" type="number" min="1" step="1" />
+          </FormControl>
+        )}
+      />
+      <Controller
+        control={control}
+        defaultValue="0"
+        name="accessTokenNumUsesLimit"
+        render={({ field, fieldState: { error } }) => (
+          <FormControl
+            label="Access Token Max Number of Uses"
+            isError={Boolean(error)}
+            errorText={error?.message}
+          >
+            <Input {...field} placeholder="0" type="number" min="0" step="1" />
+          </FormControl>
+        )}
+      />
+      {accessTokenTrustedIpsFields.map(({ id }, index) => (
+        <div className="mb-3 flex items-end space-x-2" key={id}>
+          <Controller
+            control={control}
+            name={`accessTokenTrustedIps.${index}.ipAddress`}
+            defaultValue="0.0.0.0/0"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl
+                  className="mb-0 flex-grow"
+                  label={index === 0 ? "Access Token Trusted IPs" : undefined}
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    value={field.value}
+                    onChange={(e) => {
+                      if (subscription?.ipAllowlisting) {
+                        field.onChange(e);
+                        return;
+                      }
+
+                      handlePopUpOpen("upgradePlan");
+                    }}
+                    placeholder="123.456.789.0"
+                  />
+                </FormControl>
+              );
+            }}
+          />
+          <IconButton
+            onClick={() => {
+              if (subscription?.ipAllowlisting) {
+                removeAccessTokenTrustedIp(index);
+                return;
+              }
+
+              handlePopUpOpen("upgradePlan");
+            }}
+            size="lg"
+            colorSchema="danger"
+            variant="plain"
+            ariaLabel="update"
+            className="p-3"
+          >
+            <FontAwesomeIcon icon={faXmark} />
+          </IconButton>
+        </div>
+      ))}
+      <div className="my-4 ml-1">
+        <Button
+          variant="outline_bg"
+          onClick={() => {
+            if (subscription?.ipAllowlisting) {
+              appendAccessTokenTrustedIp({
+                ipAddress: "0.0.0.0/0"
+              });
+              return;
+            }
+
+            handlePopUpOpen("upgradePlan");
+          }}
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          size="xs"
+        >
+          Add IP Address
+        </Button>
+      </div>
+      <div className="flex items-center">
+        <Button
+          className="mr-4"
+          size="sm"
+          type="submit"
+          isLoading={isSubmitting}
+          isDisabled={isSubmitting}
+        >
+          {identityAuthMethodData?.authMethod ? "Update" : "Configure"}
+        </Button>
+        <Button
+          colorSchema="secondary"
+          variant="plain"
+          onClick={() => handlePopUpToggle("identityAuthMethod", false)}
+        >
+          {identityAuthMethodData?.authMethod ? "Cancel" : "Skip"}
+        </Button>
+      </div>
+    </form>
+  );
+};

frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx

@@ -1,9 +1,22 @@
-import { faKey, faLock, faPencil, faServer, faXmark } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCopy,
+  faEllipsis,
+  faKey,
+  faLock,
+  faPencil,
+  faServer,
+  faXmark
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   EmptyState,
   IconButton,
   Select,
@@ -80,7 +93,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
         <THead>
           <Tr>
             <Th>Name</Th>
-            <Th>ID</Th>
             <Th>Role</Th>
             <Th>Auth Method</Th>
             <Th className="w-5" />
@@ -95,7 +107,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
               return (
                 <Tr className="h-10" key={`identity-${id}`}>
                   <Td>{name}</Td>
-                  <Td>{id}</Td>
                   <Td>
                     <OrgPermissionCan
                       I={OrgPermissionActions.Edit}
@@ -127,7 +138,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                   </Td>
                   <Td>{authMethod ? identityAuthToNameMap[authMethod] : "Not configured"}</Td>
                   <Td>
-                    <div className="flex items-center justify-end">
+                    <div className="flex items-center justify-end space-x-4">
                       {authMethod === IdentityAuthMethod.UNIVERSAL_AUTH && (
                         <Tooltip content="Manage client ID/secrets">
                           <IconButton
@@ -141,7 +152,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                             colorSchema="primary"
                             variant="plain"
                             ariaLabel="update"
-                            // isDisabled={!isAllowed}
                           >
                             <FontAwesomeIcon icon={faKey} />
                           </IconButton>
@@ -165,7 +175,6 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                               colorSchema="primary"
                               variant="plain"
                               ariaLabel="update"
-                              className="ml-4"
                               isDisabled={!isAllowed}
                             >
                               <FontAwesomeIcon icon={faLock} />
@@ -173,54 +182,78 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
                           </Tooltip>
                         )}
                       </OrgPermissionCan>
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Edit}
-                        a={OrgPermissionSubjects.Identity}
-                      >
-                        {(isAllowed) => (
-                          <IconButton
-                            onClick={async () => {
-                              handlePopUpOpen("identity", {
-                                identityId: id,
-                                name,
-                                role,
-                                customRole
-                              });
-                            }}
-                            size="lg"
-                            colorSchema="primary"
-                            variant="plain"
-                            ariaLabel="update"
-                            className="ml-4"
-                            isDisabled={!isAllowed}
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <Tooltip content="More options">
+                              <FontAwesomeIcon size="lg" icon={faEllipsis} />
+                            </Tooltip>
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Edit}
+                            a={OrgPermissionSubjects.Identity}
                           >
-                            <FontAwesomeIcon icon={faPencil} />
-                          </IconButton>
-                        )}
-                      </OrgPermissionCan>
-                      <OrgPermissionCan
-                        I={OrgPermissionActions.Delete}
-                        a={OrgPermissionSubjects.Identity}
-                      >
-                        {(isAllowed) => (
-                          <IconButton
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={async () => {
+                                  if (!isAllowed) return;
+                                  handlePopUpOpen("identity", {
+                                    identityId: id,
+                                    name,
+                                    role,
+                                    customRole
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faPencil} />}
+                              >
+                                Update identity
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Delete}
+                            a={OrgPermissionSubjects.Identity}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  isAllowed
+                                    ? "hover:!bg-red-500 hover:!text-white"
+                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={() => {
+                                  if (!isAllowed) return;
+                                  handlePopUpOpen("deleteIdentity", {
+                                    identityId: id,
+                                    name
+                                  });
+                                }}
+                                icon={<FontAwesomeIcon icon={faXmark} />}
+                              >
+                                Delete identity
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                          <DropdownMenuItem
                             onClick={() => {
-                              handlePopUpOpen("deleteIdentity", {
-                                identityId: id,
-                                name
+                              navigator.clipboard.writeText(id);
+                              createNotification({
+                                text: "Copied identity internal ID to clipboard",
+                                type: "success"
                               });
                             }}
-                            size="lg"
-                            colorSchema="danger"
-                            variant="plain"
-                            ariaLabel="update"
-                            className="ml-4"
-                            isDisabled={!isAllowed}
+                            icon={<FontAwesomeIcon icon={faCopy} />}
                           >
-                            <FontAwesomeIcon icon={faXmark} />
-                          </IconButton>
-                        )}
-                      </OrgPermissionCan>
+                            Copy Identity ID
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
                     </div>
                   </Td>
                 </Tr>

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx

@@ -5,25 +5,19 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import {
-    Button,
-    FormControl,
-    Modal,
-    ModalContent,
-    Select,
-    SelectItem} from "@app/components/v2";
+import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
 import { useOrganization, useWorkspace } from "@app/context";
-import { 
-    useAddGroupToWorkspace,
-    useGetOrganizationGroups,
-    useGetProjectRoles,
-    useListWorkspaceGroups,
+import {
+  useAddGroupToWorkspace,
+  useGetOrganizationGroups,
+  useGetProjectRoles,
+  useListWorkspaceGroups
 } from "@app/hooks/api";
 import { UsePopUpState } from "@app/hooks/usePopUp";
 
 const schema = z.object({
-    slug: z.string(),
-    role: z.string()
+  slug: z.string(),
+  role: z.string()
 });
 
 export type FormData = z.infer<typeof schema>;
@@ -33,150 +27,146 @@ type Props = {
   handlePopUpToggle: (popUpName: keyof UsePopUpState<["group"]>, state?: boolean) => void;
 };
 
-export const GroupModal = ({
-    popUp,
-    handlePopUpToggle
-}: Props) => {
-    const { currentOrg } = useOrganization();
-    const { currentWorkspace } = useWorkspace();
+export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { currentOrg } = useOrganization();
+  const { currentWorkspace } = useWorkspace();
 
-    const orgId = currentOrg?.id || "";
-    const workspaceId = currentWorkspace?.id || "";
-    
-    const { data: groups } = useGetOrganizationGroups(orgId);
-    const { data: groupMemberships } = useListWorkspaceGroups(currentWorkspace?.slug || "");
-    
-    const { data: roles } = useGetProjectRoles(workspaceId);
-    
-    const { mutateAsync: addGroupToWorkspaceMutateAsync } = useAddGroupToWorkspace();
-    
-    const filteredGroupMembershipOrgs = useMemo(() => {
-        const wsGroupIds = new Map();
+  const orgId = currentOrg?.id || "";
+  const projectSlug = currentWorkspace?.slug || "";
 
-        groupMemberships?.forEach((groupMembership) => {
-            wsGroupIds.set(groupMembership.group.id, true);
-        });
+  const { data: groups } = useGetOrganizationGroups(orgId);
+  const { data: groupMemberships } = useListWorkspaceGroups(currentWorkspace?.slug || "");
 
-        return (groups || []).filter(({ id }) => !wsGroupIds.has(id));
-    }, [groups, groupMemberships]);
-    
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-      } = useForm<FormData>({
-        resolver: zodResolver(schema)
+  const { data: roles } = useGetProjectRoles(projectSlug);
+
+  const { mutateAsync: addGroupToWorkspaceMutateAsync } = useAddGroupToWorkspace();
+
+  const filteredGroupMembershipOrgs = useMemo(() => {
+    const wsGroupIds = new Map();
+
+    groupMemberships?.forEach((groupMembership) => {
+      wsGroupIds.set(groupMembership.group.id, true);
+    });
+
+    return (groups || []).filter(({ id }) => !wsGroupIds.has(id));
+  }, [groups, groupMemberships]);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema)
+  });
+
+  const onFormSubmit = async ({ slug, role }: FormData) => {
+    try {
+      await addGroupToWorkspaceMutateAsync({
+        projectSlug: currentWorkspace?.slug || "",
+        groupSlug: slug,
+        role: role || undefined
       });
 
-    const onFormSubmit = async ({ slug, role }: FormData) => {
-        try {
-            await addGroupToWorkspaceMutateAsync({
-                projectSlug: currentWorkspace?.slug || "",
-                groupSlug: slug,
-                role: role || undefined
-            });
-            
-            reset();
-            handlePopUpToggle("group", false);
-            
-            createNotification({
-                text: "Successfully added group to project",
-                type: "success"
-            });
-        
-        } catch (err) {
-            createNotification({
-                text: "Failed to add group to project",
-                type: "error"
-            });
-        }
+      reset();
+      handlePopUpToggle("group", false);
+
+      createNotification({
+        text: "Successfully added group to project",
+        type: "success"
+      });
+    } catch (err) {
+      createNotification({
+        text: "Failed to add group to project",
+        type: "error"
+      });
     }
-    
-    return (
-        <Modal
-            isOpen={popUp?.group?.isOpen}
-            onOpenChange={(isOpen) => {
-                handlePopUpToggle("group", isOpen);
-                reset();
-            }}
-        >
-            <ModalContent title="Add Group to Project">
-            {filteredGroupMembershipOrgs.length ? (
-                <form onSubmit={handleSubmit(onFormSubmit)}>
-                    <Controller
-                        control={control}
-                        name="slug"
-                        defaultValue={filteredGroupMembershipOrgs?.[0]?.id}
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                            <FormControl label="Group" errorText={error?.message} isError={Boolean(error)}>
-                            <Select
-                                defaultValue={field.value}
-                                {...field}
-                                onValueChange={(e) => onChange(e)}
-                                className="w-full"
-                            >
-                                {filteredGroupMembershipOrgs.map(({ name, slug, id }) => (
-                                    <SelectItem value={slug} key={`org-group-${id}`}>
-                                        {name}
-                                    </SelectItem>
-                                ))}
-                            </Select>
-                            </FormControl>
-                        )}
-                    />
-                    <Controller
-                        control={control}
-                        name="role"
-                        defaultValue=""
-                        render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                            <FormControl
-                                label="Role"
-                                errorText={error?.message}
-                                isError={Boolean(error)}
-                                className="mt-4"
-                            >
-                            <Select
-                                defaultValue={field.value}
-                                {...field}
-                                onValueChange={(e) => onChange(e)}
-                                className="w-full"
-                            >
-                                {(roles || []).map(({ name, slug }) => (
-                                    <SelectItem value={slug} key={`st-role-${slug}`}>
-                                        {name}
-                                    </SelectItem>
-                                ))}
-                            </Select>
-                            </FormControl>
-                        )}
-                    />
-                    <div className="flex items-center">
-                        <Button
-                            className="mr-4"
-                            size="sm"
-                            type="submit"
-                            isLoading={isSubmitting}
-                            isDisabled={isSubmitting}
-                        >
-                            {popUp?.group?.data ? "Update" : "Create"}
-                        </Button>
-                        <Button colorSchema="secondary" variant="plain">
-                            Cancel
-                        </Button>
-                    </div>
-                </form>
-            ) : (
-                <div className="flex flex-col space-y-4">
-                    <div className="text-sm">
-                    All groups in your organization have already been added to this project.
-                    </div>
-                    <Link href={`/org/${currentWorkspace?.orgId}/members`}>
-                    <Button variant="outline_bg">Create a new group</Button>
-                    </Link>
-                </div>
-            )}
-            </ModalContent>
-      </Modal>
-    );
-}
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.group?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("group", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Add Group to Project">
+        {filteredGroupMembershipOrgs.length ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              name="slug"
+              defaultValue={filteredGroupMembershipOrgs?.[0]?.id}
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl label="Group" errorText={error?.message} isError={Boolean(error)}>
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    {filteredGroupMembershipOrgs.map(({ name, slug, id }) => (
+                      <SelectItem value={slug} key={`org-group-${id}`}>
+                        {name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="role"
+              defaultValue=""
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label="Role"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  className="mt-4"
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    {(roles || []).map(({ name, slug }) => (
+                      <SelectItem value={slug} key={`st-role-${slug}`}>
+                        {name}
+                      </SelectItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              )}
+            />
+            <div className="flex items-center">
+              <Button
+                className="mr-4"
+                size="sm"
+                type="submit"
+                isLoading={isSubmitting}
+                isDisabled={isSubmitting}
+              >
+                {popUp?.group?.data ? "Update" : "Create"}
+              </Button>
+              <Button colorSchema="secondary" variant="plain">
+                Cancel
+              </Button>
+            </div>
+          </form>
+        ) : (
+          <div className="flex flex-col space-y-4">
+            <div className="text-sm">
+              All groups in your organization have already been added to this project.
+            </div>
+            <Link href={`/org/${currentWorkspace?.orgId}/members`}>
+              <Button variant="outline_bg">Create a new group</Button>
+            </Link>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupRoles.tsx

@@ -201,11 +201,7 @@ export type TMemberRolesProp = {
 
 const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
 
-export const GroupRoles = ({
-  roles = [],
-  disableEdit = false,
-  groupSlug
-}: TMemberRolesProp) => {
+export const GroupRoles = ({ roles = [], disableEdit = false, groupSlug }: TMemberRolesProp) => {
   const { currentWorkspace } = useWorkspace();
   const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
   const [searchRoles, setSearchRoles] = useState("");
@@ -220,9 +216,9 @@ export const GroupRoles = ({
     resolver: zodResolver(formSchema)
   });
 
-  const workspaceId = currentWorkspace?.id || "";
+  const projectSlug = currentWorkspace?.slug || "";
 
-  const { data: projectRoles, isLoading: isRolesLoading } = useGetProjectRoles(workspaceId);
+  const { data: projectRoles, isLoading: isRolesLoading } = useGetProjectRoles(projectSlug);
   const userRolesGroupBySlug = groupBy(roles, ({ customRoleSlug, role }) => customRoleSlug || role);
 
   const updateGroupWorkspaceRole = useUpdateGroupWorkspaceRole();
@@ -317,7 +313,7 @@ export const GroupRoles = ({
                               icon={faClock}
                               className={twMerge(
                                 new Date() > new Date(temporaryAccessEndTime as string) &&
-                                "text-red-600"
+                                  "text-red-600"
                               )}
                             />
                           </Tooltip>
@@ -390,14 +386,14 @@ export const GroupRoles = ({
                               defaultValue={
                                 userProjectRoleDetails?.isTemporary
                                   ? {
-                                    isTemporary: true,
-                                    temporaryAccessStartTime:
-                                      userProjectRoleDetails.temporaryAccessStartTime as string,
-                                    temporaryRange:
-                                      userProjectRoleDetails.temporaryRange as string,
-                                    temporaryAccessEndTime:
-                                      userProjectRoleDetails.temporaryAccessEndTime
-                                  }
+                                      isTemporary: true,
+                                      temporaryAccessStartTime:
+                                        userProjectRoleDetails.temporaryAccessStartTime as string,
+                                      temporaryRange:
+                                        userProjectRoleDetails.temporaryRange as string,
+                                      temporaryAccessEndTime:
+                                        userProjectRoleDetails.temporaryAccessEndTime
+                                    }
                                   : false
                               }
                               render={({ field }) => (

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityModal.tsx

@@ -30,17 +30,17 @@ type Props = {
 };
 
 export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
-  
   const { currentOrg } = useOrganization();
   const { currentWorkspace } = useWorkspace();
 
   const orgId = currentOrg?.id || "";
   const workspaceId = currentWorkspace?.id || "";
+  const projectSlug = currentWorkspace?.slug || "";
 
   const { data: identityMembershipOrgs } = useGetIdentityMembershipOrgs(orgId);
   const { data: identityMemberships } = useGetWorkspaceIdentityMemberships(workspaceId);
 
-  const { data: roles } = useGetProjectRoles(workspaceId);
+  const { data: roles } = useGetProjectRoles(projectSlug);
 
   const { mutateAsync: addIdentityToWorkspaceMutateAsync } = useAddIdentityToWorkspace();
 

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/IdentityRbacSection.tsx

@@ -65,7 +65,8 @@ export const IdentityRbacSection = ({ identityProjectMember, onOpenUpgradeModal
   const { subscription } = useSubscription();
   const { currentWorkspace } = useWorkspace();
   const workspaceId = currentWorkspace?.id || "";
-  const { data: projectRoles, isLoading: isRolesLoading } = useGetProjectRoles(workspaceId);
+  const projectSlug = currentWorkspace?.slug || "";
+  const { data: projectRoles, isLoading: isRolesLoading } = useGetProjectRoles(projectSlug);
   const { permission } = useProjectPermission();
   const isMemberEditDisabled = permission.cannot(
     ProjectPermissionActions.Edit,
@@ -79,14 +80,14 @@ export const IdentityRbacSection = ({ identityProjectMember, onOpenUpgradeModal
         slug: customRoleSlug || role,
         temporaryAccess: dto.isTemporary
           ? {
-            isTemporary: true,
-            temporaryRange: dto.temporaryRange,
-            temporaryAccessEndTime: dto.temporaryAccessEndTime,
-            temporaryAccessStartTime: dto.temporaryAccessStartTime
-          }
+              isTemporary: true,
+              temporaryRange: dto.temporaryRange,
+              temporaryAccessEndTime: dto.temporaryAccessEndTime,
+              temporaryAccessStartTime: dto.temporaryAccessStartTime
+            }
           : {
-            isTemporary: dto.isTemporary
-          }
+              isTemporary: dto.isTemporary
+            }
       }))
     }
   });
@@ -191,9 +192,9 @@ export const IdentityRbacSection = ({ identityProjectMember, onOpenUpgradeModal
                               ? isExpired
                                 ? "Timed Access Expired"
                                 : `Until ${format(
-                                  new Date(temporaryAccess.temporaryAccessEndTime || ""),
-                                  "yyyy-MM-dd HH:mm:ss"
-                                )}`
+                                    new Date(temporaryAccess.temporaryAccessEndTime || ""),
+                                    "yyyy-MM-dd HH:mm:ss"
+                                  )}`
                               : "Non expiry access"
                           }
                         >
@@ -212,9 +213,9 @@ export const IdentityRbacSection = ({ identityProjectMember, onOpenUpgradeModal
                               ? isExpired
                                 ? "Access Expired"
                                 : formatDistance(
-                                  new Date(temporaryAccess.temporaryAccessEndTime || ""),
-                                  new Date()
-                                )
+                                    new Date(temporaryAccess.temporaryAccessEndTime || ""),
+                                    new Date()
+                                  )
                               : "Permanent"}
                           </Button>
                         </Tooltip>
@@ -338,7 +339,7 @@ export const IdentityRbacSection = ({ identityProjectMember, onOpenUpgradeModal
               type="submit"
               className={twMerge(
                 "transition-all",
-                "opacity-0 cursor-default",
+                "cursor-default opacity-0",
                 roleForm.formState.isDirty && "cursor-pointer opacity-100"
               )}
               isDisabled={!roleForm.formState.isDirty}

frontend/src/views/Project/MembersPage/components/IdentityTab/components/IdentityRoleForm/SpecificPrivilegeSection.tsx

@@ -131,20 +131,17 @@ const SpecificPrivilegeSecretForm = ({
         { action: ProjectPermissionActions.Delete, allowed: data.delete },
         { action: ProjectPermissionActions.Edit, allowed: data.edit }
       ];
-      const conditions: Record<string, any> = { environment: data.environmentSlug };
-      if (data.secretPath) {
-        conditions.secretPath = { $glob: data.secretPath };
-      }
       await updateIdentityPrivilege.mutateAsync({
         privilegeDetails: {
           ...data.temporaryAccess,
-          permissions: actions
-            .filter(({ allowed }) => allowed)
-            .map(({ action }) => ({
-              action,
-              subject: ProjectPermissionSub.Secrets,
-              conditions
-            }))
+          privilegePermission: {
+            actions: actions.filter(({ allowed }) => allowed).map(({ action }) => action),
+            subject: ProjectPermissionSub.Secrets,
+            conditions: {
+              environment: data.environmentSlug,
+              ...(data.secretPath ? { secretPath: { $glob: data.secretPath } } : {})
+            }
+          }
         },
         privilegeSlug: privilege.slug,
         identityId,
@@ -474,15 +471,13 @@ export const SpecificPrivilegeSection = ({ identityId }: Props) => {
     if (createIdentityPrivilege.isLoading) return;
     try {
       await createIdentityPrivilege.mutateAsync({
-        permissions: [
-          {
-            action: ProjectPermissionActions.Read,
-            subject: ProjectPermissionSub.Secrets,
-            conditions: {
-              environment: currentWorkspace?.environments?.[0].slug
-            }
+        privilegePermission: {
+          actions: [ProjectPermissionActions.Read],
+          subject: ProjectPermissionSub.Secrets,
+          conditions: {
+            environment: currentWorkspace?.environments?.[0].slug as string
           }
-        ],
+        },
         identityId,
         projectSlug
       });

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

@@ -65,7 +65,8 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
   const { subscription } = useSubscription();
   const { currentWorkspace } = useWorkspace();
   const workspaceId = currentWorkspace?.id || "";
-  const { data: projectRoles, isLoading: isRolesLoading } = useGetProjectRoles(workspaceId);
+  const projectSlug = currentWorkspace?.slug || "";
+  const { data: projectRoles, isLoading: isRolesLoading } = useGetProjectRoles(projectSlug);
   const { permission } = useProjectPermission();
   const isMemberEditDisabled = permission.cannot(
     ProjectPermissionActions.Edit,
@@ -79,14 +80,14 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
         slug: customRoleSlug || role,
         temporaryAccess: dto.isTemporary
           ? {
-            isTemporary: true,
-            temporaryRange: dto.temporaryRange,
-            temporaryAccessEndTime: dto.temporaryAccessEndTime,
-            temporaryAccessStartTime: dto.temporaryAccessStartTime
-          }
+              isTemporary: true,
+              temporaryRange: dto.temporaryRange,
+              temporaryAccessEndTime: dto.temporaryAccessEndTime,
+              temporaryAccessStartTime: dto.temporaryAccessStartTime
+            }
           : {
-            isTemporary: dto.isTemporary
-          }
+              isTemporary: dto.isTemporary
+            }
       }))
     }
   });
@@ -191,9 +192,9 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
                               ? isExpired
                                 ? "Timed Access Expired"
                                 : `Until ${format(
-                                  new Date(temporaryAccess.temporaryAccessEndTime || ""),
-                                  "yyyy-MM-dd HH:mm:ss"
-                                )}`
+                                    new Date(temporaryAccess.temporaryAccessEndTime || ""),
+                                    "yyyy-MM-dd HH:mm:ss"
+                                  )}`
                               : "Non expiry access"
                           }
                         >
@@ -212,9 +213,9 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
                               ? isExpired
                                 ? "Access Expired"
                                 : formatDistance(
-                                  new Date(temporaryAccess.temporaryAccessEndTime || ""),
-                                  new Date()
-                                )
+                                    new Date(temporaryAccess.temporaryAccessEndTime || ""),
+                                    new Date()
+                                  )
                               : "Permanent"}
                           </Button>
                         </Tooltip>
@@ -335,7 +336,7 @@ export const MemberRbacSection = ({ projectMember, onOpenUpgradeModal }: Props)
               type="submit"
               className={twMerge(
                 "transition-all",
-                "opacity-0 cursor-default",
+                "cursor-default opacity-0",
                 roleForm.formState.isDirty && "cursor-pointer opacity-100"
               )}
               isDisabled={!roleForm.formState.isDirty}

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

@@ -3,7 +3,6 @@ import { motion } from "framer-motion";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
 import { withProjectPermission } from "@app/hoc";
 import { usePopUp } from "@app/hooks";
-import { TProjectRole } from "@app/hooks/api/roles/types";
 
 import { ProjectRoleList } from "./components/ProjectRoleList";
 import { ProjectRoleModifySection } from "./components/ProjectRoleModifySection";
@@ -21,7 +20,7 @@ export const ProjectRoleListTab = withProjectPermission(
         exit={{ opacity: 0, translateX: 30 }}
       >
         <ProjectRoleModifySection
-          role={popUp.editRole.data as TProjectRole}
+          roleSlug={popUp.editRole.data as string}
           onGoBack={() => handlePopUpClose("editRole")}
         />
       </motion.div>
@@ -33,7 +32,7 @@ export const ProjectRoleListTab = withProjectPermission(
         animate={{ opacity: 1, translateX: 0 }}
         exit={{ opacity: 0, translateX: -30 }}
       >
-        <ProjectRoleList onSelectRole={(role) => handlePopUpOpen("editRole", role)} />
+        <ProjectRoleList onSelectRole={(slug) => handlePopUpOpen("editRole", slug)} />
       </motion.div>
     );
   },

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx

@@ -24,7 +24,7 @@ import { useDeleteProjectRole, useGetProjectRoles } from "@app/hooks/api";
 import { TProjectRole } from "@app/hooks/api/roles/types";
 
 type Props = {
-  onSelectRole: (role?: TProjectRole) => void;
+  onSelectRole: (slug?: string) => void;
 };
 
 export const ProjectRoleList = ({ onSelectRole }: Props) => {
@@ -32,10 +32,9 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
 
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
   const { currentWorkspace } = useWorkspace();
-  const workspaceId = currentWorkspace?.id || "";
+  const projectSlug = currentWorkspace?.slug || "";
 
-  const { data: roles, isLoading: isRolesLoading } = useGetProjectRoles(workspaceId);
-  console.log(roles);
+  const { data: roles, isLoading: isRolesLoading } = useGetProjectRoles(projectSlug);
 
   const { mutateAsync: deleteRole } = useDeleteProjectRole();
 
@@ -43,7 +42,7 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
     const { id } = popUp?.deleteRole?.data as TProjectRole;
     try {
       await deleteRole({
-        projectId: workspaceId,
+        projectSlug,
         id
       });
       createNotification({ type: "success", text: "Successfully removed the role" });
@@ -109,7 +108,7 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
                             <IconButton
                               isDisabled={!isAllowed}
                               ariaLabel="edit"
-                              onClick={() => onSelectRole(role)}
+                              onClick={() => onSelectRole(role.slug)}
                               variant="plain"
                             >
                               <FontAwesomeIcon icon={faEdit} />
@@ -146,9 +145,8 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
       </div>
       <DeleteActionModal
         isOpen={popUp.deleteRole.isOpen}
-        title={`Are you sure want to delete ${
-          (popUp?.deleteRole?.data as TProjectRole)?.name || " "
-        } role?`}
+        title={`Are you sure want to delete ${(popUp?.deleteRole?.data as TProjectRole)?.name || " "
+          } role?`}
         deleteKey={(popUp?.deleteRole?.data as TProjectRole)?.slug || ""}
         onClose={() => handlePopUpClose("deleteRole")}
         onDeleteApproved={handleRoleDelete}

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx

@@ -19,9 +19,13 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FormControl, Input } from "@app/components/v2";
+import { Button, FormControl, Input, Spinner } from "@app/components/v2";
 import { ProjectPermissionSub, useWorkspace } from "@app/context";
-import { useCreateProjectRole, useUpdateProjectRole } from "@app/hooks/api";
+import {
+  useCreateProjectRole,
+  useGetProjectRoleBySlug,
+  useUpdateProjectRole
+} from "@app/hooks/api";
 import { TProjectRole } from "@app/hooks/api/roles/types";
 
 import { MultiEnvProjectPermission } from "./MultiEnvProjectPermission";
@@ -117,17 +121,20 @@ const SINGLE_PERMISSION_LIST = [
 ] as const;
 
 type Props = {
-  role?: TProjectRole;
+  roleSlug?: string;
   onGoBack: VoidFunction;
 };
 
-export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
-  const isNonEditable = ["admin", "member", "viewer", "no-access"].includes(role?.slug || "");
-  const isNewRole = !role?.slug;
+export const ProjectRoleModifySection = ({ roleSlug, onGoBack }: Props) => {
+  const isNonEditable = ["admin", "member", "viewer", "no-access"].includes(roleSlug || "");
+  const isNewRole = !roleSlug;
 
-  
   const { currentWorkspace } = useWorkspace();
-  const workspaceId = currentWorkspace?.id || "";
+  const projectSlug = currentWorkspace?.slug || "";
+  const { data: roleDetails, isLoading: isRoleDetailsLoading } = useGetProjectRoleBySlug(
+    currentWorkspace?.slug || "",
+    roleSlug as string
+  );
 
   const {
     handleSubmit,
@@ -137,19 +144,21 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
     getValues,
     control
   } = useForm<TFormSchema>({
-    defaultValues: role ? { ...role, permissions: rolePermission2Form(role.permissions) } : {},
+    values: roleDetails
+      ? { ...roleDetails, permissions: rolePermission2Form(roleDetails.permissions) }
+      : ({} as TProjectRole),
     resolver: zodResolver(formSchema)
   });
   const { mutateAsync: createRole } = useCreateProjectRole();
   const { mutateAsync: updateRole } = useUpdateProjectRole();
 
   const handleRoleUpdate = async (el: TFormSchema) => {
-    if (!role?.id) return;
+    if (!roleDetails?.id) return;
 
     try {
       await updateRole({
-        id: role?.id,
-        projectId: workspaceId,
+        id: roleDetails?.id as string,
+        projectSlug,
         ...el,
         permissions: formRolePermission2API(el.permissions)
       });
@@ -169,7 +178,7 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
 
     try {
       await createRole({
-        projectId: workspaceId,
+        projectSlug,
         ...el,
         permissions: formRolePermission2API(el.permissions)
       });
@@ -181,6 +190,14 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
     }
   };
 
+  if (!isNewRole && isRoleDetailsLoading) {
+    return (
+      <div className="flex w-full items-center justify-center p-8">
+        <Spinner />
+      </div>
+    );
+  }
+
   return (
     <div>
       <form onSubmit={handleSubmit(handleFormSubmit)}>

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.utils.ts

@@ -95,10 +95,8 @@ export const rolePermission2Form = (permissions: TProjectPermission[] = []) => {
   const formVal: Record<string, any> = {};
 
   permissions.forEach((permission) => {
-    const {
-      subject: [subject],
-      action
-    } = permission;
+    const { subject: caslSub, action } = permission;
+    const subject = typeof caslSub === "string" ? caslSub : caslSub[0];
     if (!formVal?.[subject]) formVal[subject] = {};
 
     if (subject === "secrets") {
@@ -123,7 +121,7 @@ const multiEnvForm2Api = (
   const isFullAccess = PERMISSION_ACTIONS.every((action) => formVal?.all?.[action]);
   // if any of them is set in all push it without any  condition
   PERMISSION_ACTIONS.forEach((action) => {
-    if (formVal?.all?.[action]) permissions.push({ action, subject: [subject] });
+    if (formVal?.all?.[action]) permissions.push({ action, subject });
   });
 
   if (!isFullAccess) {
@@ -144,7 +142,7 @@ const multiEnvForm2Api = (
             if (formVal[slug]?.secretPath)
               conditions.secretPath = { $glob: formVal?.[slug]?.secretPath };
 
-            permissions.push({ action, subject: [subject], conditions });
+            permissions.push({ action, subject, conditions });
           }
         });
       });
@@ -161,7 +159,7 @@ export const formRolePermission2API = (formVal: TFormSchema["permissions"]) => {
     } else {
       Object.entries(actions).forEach(([action, isAllowed]) => {
         if (isAllowed) {
-          permissions.push({ subject: [rule], action });
+          permissions.push({ subject: rule, action });
         }
       });
     }

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

@@ -23,6 +23,7 @@ import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
+import { decryptAssymmetric } from "@app/components/utilities/cryptography/crypto";
 import {
   Button,
   DeleteActionModal,
@@ -43,8 +44,9 @@ import {
   UpgradePlanModal
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useSubscription } from "@app/context";
+import { interpolateSecrets } from "@app/helpers/secret";
 import { usePopUp } from "@app/hooks";
-import { useCreateFolder, useDeleteSecretBatch } from "@app/hooks/api";
+import { useCreateFolder, useDeleteSecretBatch, useGetUserWsKey } from "@app/hooks/api";
 import { DecryptedSecret, TImportedSecrets, WsTag } from "@app/hooks/api/types";
 import { debounce } from "@app/lib/fn/debounce";
 
@@ -112,6 +114,7 @@ export const ActionBar = ({
 
   const { mutateAsync: createFolder } = useCreateFolder();
   const { mutateAsync: deleteBatchSecretV3 } = useDeleteSecretBatch();
+  const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
 
   const selectedSecrets = useSelectedSecrets();
   const { reset: resetSelectedSecret } = useSelectedSecretActions();
@@ -144,30 +147,59 @@ export const ActionBar = ({
   const handleSecretDownload = async () => {
     const secPriority: Record<string, boolean> = {};
     const downloadedSecrets: Array<{ key: string; value: string; comment?: string }> = [];
+
+    const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+    const workspaceKey = decryptAssymmetric({
+      ciphertext: decryptFileKey!.encryptedKey,
+      nonce: decryptFileKey!.nonce,
+      publicKey: decryptFileKey!.sender.publicKey,
+      privateKey: PRIVATE_KEY
+    });
+
+    const expandSecrets = interpolateSecrets({
+      projectId: workspaceId,
+      secretEncKey: workspaceKey
+    });
+
+    const secretRecord: Record<
+      string,
+      { value: string; comment?: string; skipMultilineEncoding?: boolean }
+    > = {};
+
     // load up secrets in dashboard
-    secrets?.forEach(({ key, value, comment }) => {
+    secrets?.forEach(({ key, value, valueOverride, comment }) => {
       secPriority[key] = true;
-      downloadedSecrets.push({ key, value, comment });
+      downloadedSecrets.push({ key, value: valueOverride || value, comment });
     });
     // now load imported secrets with secPriority
     for (let i = importedSecrets.length - 1; i >= 0; i -= 1) {
-      importedSecrets[i].secrets.forEach(({ key, value, comment }) => {
+      importedSecrets[i].secrets.forEach(({ key, value, valueOverride, comment }) => {
         if (secPriority?.[key]) return;
-        downloadedSecrets.unshift({ key, value, comment });
+        downloadedSecrets.unshift({ key, value: valueOverride || value, comment });
         secPriority[key] = true;
       });
     }
 
+    downloadedSecrets.forEach((secret) => {
+      secretRecord[secret.key] = {
+        value: secret.value,
+        comment: secret.comment
+      };
+    });
+
+    await expandSecrets(secretRecord);
+
     const file = downloadedSecrets
       .sort((a, b) => a.key.toLowerCase().localeCompare(b.key.toLowerCase()))
       .reduce(
-        (prev, { key, value, comment }, index) =>
+        (prev, { key, comment }, index) =>
           prev +
           (comment
-            ? `${index === 0 ? "#" : "\n#"} ${comment}\n${key}=${value}\n`
-            : `${key}=${value}\n`),
+            ? `${index === 0 ? "#" : "\n#"} ${comment}\n${key}=${secretRecord[key].value}\n`
+            : `${key}=${secretRecord[key].value}\n`),
         ""
       );
+
     const blob = new Blob([file], { type: "text/plain;charset=utf-8" });
     FileSaver.saveAs(blob, `${environment}.env`);
   };

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

@@ -152,7 +152,7 @@ export const SecretDropzone = ({
 
     e.dataTransfer.dropEffect = "copy";
     setDragActive.off();
-    parseFile(e.dataTransfer.files[0]);
+    parseFile(e.dataTransfer.files[0], e.dataTransfer.files[0].type === "application/json");
   };
 
   const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => {

frontend/src/views/ShareSecretPage/ShareSecretPage.tsx

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ShareSecretSection } from "./components";
+
+export const ShareSecretPage = () => {
+  return (
+    <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 px-6 text-white">
+      <div className="flex items-center justify-between py-6">
+        <div className="flex w-full flex-col">
+          <h2 className="text-3xl font-semibold text-gray-200">Secret Sharing</h2>
+          <p className="text-bunker-300">Share secrets securely using a shareable link</p>
+        </div>
+        <div className="flex w-max justify-center">
+          <Link href="https://infisical.com/docs/documentation/platform/secret-sharing">
+            <span className="w-max cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+              Documentation{" "}
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="mb-[0.06rem] ml-1 text-xs"
+              />
+            </span>
+          </Link>
+        </div>
+      </div>
+      <ShareSecretSection />
+    </div>
+  );
+};

frontend/src/views/ShareSecretPage/components/AddShareSecretModal.tsx

@@ -0,0 +1,289 @@
+import crypto from "crypto";
+
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { AxiosError } from "axios";
+import * as yup from "yup";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  encryptSymmetric,
+} from "@app/components/utilities/cryptography/crypto";
+import {
+  Button,
+  FormControl,
+  IconButton,
+  Input,
+  Modal,
+  ModalClose,
+  ModalContent,
+  SecretInput,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useCreateSharedSecret } from "@app/hooks/api/secretSharing";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const expirationUnitsAndActions = [
+  {
+    unit: "Minutes",
+    action: (expiresAt: Date, expiresInValue: number) =>
+      expiresAt.setMinutes(expiresAt.getMinutes() + expiresInValue)
+  },
+  {
+    unit: "Hours",
+    action: (expiresAt: Date, expiresInValue: number) =>
+      expiresAt.setHours(expiresAt.getHours() + expiresInValue)
+  },
+  {
+    unit: "Days",
+    action: (expiresAt: Date, expiresInValue: number) =>
+      expiresAt.setDate(expiresAt.getDate() + expiresInValue)
+  },
+  {
+    unit: "Weeks",
+    action: (expiresAt: Date, expiresInValue: number) =>
+      expiresAt.setDate(expiresAt.getDate() + expiresInValue * 7)
+  },
+  {
+    unit: "Months",
+    action: (expiresAt: Date, expiresInValue: number) =>
+      expiresAt.setMonth(expiresAt.getMonth() + expiresInValue)
+  },
+  {
+    unit: "Years",
+    action: (expiresAt: Date, expiresInValue: number) =>
+      expiresAt.setFullYear(expiresAt.getFullYear() + expiresInValue)
+  }
+];
+
+const schema = yup.object({
+  name: yup.string().max(100).required().label("Shared Secret Name"),
+  value: yup.string().max(1000).required().label("Shared Secret Value"),
+  expiresInValue: yup.number().min(1).required().label("Expiration Value"),
+  expiresInUnit: yup.string().required().label("Expiration Unit")
+});
+
+export type FormData = yup.InferType<typeof schema>;
+
+type Props = {
+  popUp: UsePopUpState<["createSharedSecret"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["createSharedSecret"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const {
+    control,
+    reset,
+    handleSubmit,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: yupResolver(schema)
+  });
+  const createSharedSecret = useCreateSharedSecret();
+  const { currentOrg } = useOrganization();
+  const [newSharedSecret, setnewSharedSecret] = useState("");
+  const hasSharedSecret = Boolean(newSharedSecret);
+  const [isUrlCopied, , setIsUrlCopied] = useTimedReset<boolean>({
+    initialState: false,
+  });
+
+  const copyUrlToClipboard = () => {
+    navigator.clipboard.writeText(newSharedSecret);
+    setIsUrlCopied(true);
+  };
+  useEffect(() => {
+    if (isUrlCopied) {
+      setTimeout(() => setIsUrlCopied(false), 2000);
+    }
+  }, [isUrlCopied]);
+
+  const onFormSubmit = async ({ name, value, expiresInValue, expiresInUnit }: FormData) => {
+    try {
+      if (!currentOrg?.id) return;
+
+      const key = crypto.randomBytes(16).toString("hex");
+      const hashedHex = crypto.createHash("sha256").update(key).digest("hex");
+      const { ciphertext, iv, tag } = encryptSymmetric({
+        plaintext: value,
+        key
+      });
+
+
+      const expiresAt = new Date();
+      const updateExpiresAt = expirationUnitsAndActions.find(
+        (item) => item.unit === expiresInUnit
+      )?.action;
+      if (updateExpiresAt) {
+        updateExpiresAt(expiresAt, expiresInValue);
+      }
+
+      const { id } = await createSharedSecret.mutateAsync({
+        name,
+        encryptedValue: ciphertext,
+        iv,
+        tag,
+        hashedHex,
+        expiresAt,
+      });
+      setnewSharedSecret(
+        `${window.location.origin}/shared/secret/${id}?key=${encodeURIComponent(hashedHex)}-${encodeURIComponent(key)}`
+      );
+
+      createNotification({
+        text: "Successfully created a shared secret",
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      const axiosError = err as AxiosError;
+      if (axiosError?.response?.status === 401) {
+        createNotification({
+          text: "You do not have access to create shared secrets",
+          type: "error"
+        });
+      } else {
+        createNotification({
+          text: "Failed to create a shared secret",
+          type: "error"
+        });
+      }
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.createSharedSecret?.isOpen}
+      onOpenChange={(open) => {
+        handlePopUpToggle("createSharedSecret", open);
+        reset();
+        setnewSharedSecret("");
+      }}
+    >
+        <ModalContent
+          title="Share a Secret"
+          subTitle="This link is only accessible once. Please share this link with intended recipients. "
+        >
+        {!hasSharedSecret ? (
+          <form onSubmit={handleSubmit(onFormSubmit)}>
+            <Controller
+              control={control}
+              name="name"
+              defaultValue=""
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Shared Secret Name"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input {...field} placeholder="Type your secret identifier" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="value"
+              defaultValue=""
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Shared Secret Value"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <SecretInput
+                    isVisible
+                    {...field}
+                    containerClassName="py-1.5 rounded-md transition-all group-hover:mr-2 text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2"
+                  />
+                </FormControl>
+              )}
+            />
+            <div className="flex w-full flex-row justify-end">
+              <div className="w-3/5">
+                <Controller
+                  control={control}
+                  name="expiresInValue"
+                  defaultValue={1}
+                  render={({ field, fieldState: { error } }) => (
+                    <FormControl
+                      label="Expiration Value"
+                      isError={Boolean(error)}
+                      errorText={error?.message}
+                    >
+                      <Input {...field} type="number" min={0} />
+                    </FormControl>
+                  )}
+                />
+              </div>
+              <div className="w-2/5 pl-4">
+                <Controller
+                  control={control}
+                  name="expiresInUnit"
+                  defaultValue={expirationUnitsAndActions[0].unit}
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                    <FormControl
+                      label="Expiration Unit"
+                      errorText={error?.message}
+                      isError={Boolean(error)}
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e) => onChange(e)}
+                        className="w-full"
+                      >
+                        {expirationUnitsAndActions.map(({ unit }) => (
+                          <SelectItem value={unit} key={unit}>
+                            {unit}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
+                />
+              </div>
+            </div>
+            <div className="mt-8 flex items-center">
+              <Button
+                className="mr-4"
+                type="submit"
+                isDisabled={isSubmitting}
+                isLoading={isSubmitting}
+              >
+                Create
+              </Button>
+              <ModalClose asChild>
+                <Button variant="plain" colorSchema="secondary">
+                  Cancel
+                </Button>
+              </ModalClose>
+            </div>
+          </form>
+        ) : (
+          <div className="mt-2 mb-3 mr-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
+            <p className="mr-4 break-all">{newSharedSecret}</p>
+            <IconButton
+              ariaLabel="copy icon"
+              colorSchema="secondary"
+              className="group relative"
+              onClick={copyUrlToClipboard}
+            >
+              <FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} />
+              <span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
+                Click to Copy
+              </span>
+            </IconButton>
+          </div>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/ShareSecretPage/components/ShareSecretSection.tsx

@@ -0,0 +1,78 @@
+import Head from "next/head";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { usePopUp } from "@app/hooks";
+import { useDeleteSharedSecret } from "@app/hooks/api/secretSharing";
+
+import { AddShareSecretModal } from "./AddShareSecretModal";
+import { ShareSecretsTable } from "./ShareSecretsTable";
+
+type DeleteModalData = { name: string; id: string };
+
+export const ShareSecretSection = () => {
+  const deleteSharedSecret = useDeleteSharedSecret();
+  const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([
+    "createSharedSecret",
+    "deleteSharedSecretConfirmation"
+  ] as const);
+
+  const onDeleteApproved = async () => {
+    try {
+      deleteSharedSecret.mutateAsync({
+        sharedSecretId: (popUp?.deleteSharedSecretConfirmation?.data as DeleteModalData)?.id,
+      });
+      createNotification({
+        text: "Successfully deleted shared secret",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteSharedSecretConfirmation");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete shared secret",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <Head>
+        <title>Secret Sharing</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+      </Head>
+      <div className="mb-2 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Shared Secrets</p>
+
+        <Button
+          colorSchema="primary"
+          leftIcon={<FontAwesomeIcon icon={faPlus} />}
+          onClick={() => {
+            handlePopUpOpen("createSharedSecret");
+          }}
+        >
+          Share Secret
+        </Button>
+      </div>
+      <ShareSecretsTable
+        handlePopUpOpen={handlePopUpOpen}
+      />
+      <AddShareSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deleteSharedSecretConfirmation.isOpen}
+        title={`Delete ${(popUp?.deleteSharedSecretConfirmation?.data as DeleteModalData)?.name || " "
+          } shared secret?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteSharedSecretConfirmation", isOpen)}
+        deleteKey={(popUp?.deleteSharedSecretConfirmation?.data as DeleteModalData)?.name}
+        onClose={() => handlePopUpClose("deleteSharedSecretConfirmation")}
+        onDeleteApproved={onDeleteApproved}
+      />
+    </div>
+  );
+};

frontend/src/views/ShareSecretPage/components/ShareSecretsRow.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton, Td, Tr } from "@app/components/v2";
+import { TSharedSecret } from "@app/hooks/api/secretSharing";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const formatDate = (date: Date): string => (date ? new Date(date).toUTCString() : "");
+
+const isExpired = (expiresAt: Date): boolean => new Date(expiresAt) < new Date();
+
+const getValidityStatusText = (expiresAt: Date): string =>
+  isExpired(expiresAt) ? "Expired " : "Valid for ";
+
+const timeAgo = (inputDate: Date, currentDate: Date): string => {
+  const now = new Date(currentDate).getTime();
+  const date = new Date(inputDate).getTime();
+  const elapsedMilliseconds = now - date;
+  const elapsedSeconds = Math.abs(Math.floor(elapsedMilliseconds / 1000));
+  const elapsedMinutes = Math.abs(Math.floor(elapsedSeconds / 60));
+  const elapsedHours = Math.abs(Math.floor(elapsedMinutes / 60));
+  const elapsedDays = Math.abs(Math.floor(elapsedHours / 24));
+  const elapsedWeeks = Math.abs(Math.floor(elapsedDays / 7));
+  const elapsedMonths = Math.abs(Math.floor(elapsedDays / 30));
+  const elapsedYears = Math.abs(Math.floor(elapsedDays / 365));
+
+  if (elapsedYears > 0) {
+    return `${elapsedYears} year${elapsedYears === 1 ? "" : "s"} ${elapsedMilliseconds >= 0 ? "ago" : "from now"
+      }`;
+  }
+  if (elapsedMonths > 0) {
+    return `${elapsedMonths} month${elapsedMonths === 1 ? "" : "s"} ${elapsedMilliseconds >= 0 ? "ago" : "from now"
+      }`;
+  }
+  if (elapsedWeeks > 0) {
+    return `${elapsedWeeks} week${elapsedWeeks === 1 ? "" : "s"} ${elapsedMilliseconds >= 0 ? "ago" : "from now"
+      }`;
+  }
+  if (elapsedDays > 0) {
+    return `${elapsedDays} day${elapsedDays === 1 ? "" : "s"} ${elapsedMilliseconds >= 0 ? "ago" : "from now"
+      }`;
+  }
+  if (elapsedHours > 0) {
+    return `${elapsedHours} hour${elapsedHours === 1 ? "" : "s"} ${elapsedMilliseconds >= 0 ? "ago" : "from now"
+      }`;
+  }
+  if (elapsedMinutes > 0) {
+    return `${elapsedMinutes} minute${elapsedMinutes === 1 ? "" : "s"} ${elapsedMilliseconds >= 0 ? "ago" : "from now"
+      }`;
+  }
+  return `${elapsedSeconds} second${elapsedSeconds === 1 ? "" : "s"} ${elapsedMilliseconds >= 0 ? "ago" : "from now"
+    }`;
+};
+
+export const ShareSecretsRow = ({
+  row,
+  handlePopUpOpen,
+  onSecretExpiration
+}: {
+  row: TSharedSecret;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteSharedSecretConfirmation"]>,
+    {
+      name,
+      id
+    }: {
+      name: string;
+      id: string;
+    }
+  ) => void;
+  onSecretExpiration: (expiredSecretId: string) => void;
+}) => {
+  const [currentTime, setCurrentTime] = useState(new Date());
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  useEffect(() => {
+    if (isExpired(row.expiresAt)) {
+      onSecretExpiration(row.id);
+    }
+  }, [isExpired(row.expiresAt)]);
+
+  return (
+    <Tr key={row.id}>
+      <Td>{row.name}</Td>
+      <Td>
+        <p className="text-sm text-yellow-400">{timeAgo(row.createdAt, currentTime)}</p>
+        <p className="text-xs text-gray-500">{formatDate(row.createdAt)}</p>
+      </Td>
+      <Td>
+        <p className={`text-sm ${isExpired(row.expiresAt) ? "text-red-500" : "text-green-500"}`}>
+          {getValidityStatusText(row.expiresAt) + timeAgo(row.expiresAt, currentTime)}
+        </p>
+        <p className="text-xs text-gray-500">{formatDate(row.expiresAt)}</p>
+      </Td>
+      <Td>
+        <IconButton
+          onClick={() =>
+            handlePopUpOpen("deleteSharedSecretConfirmation", {
+              name: row.name,
+              id: row.id
+            })
+          }
+          colorSchema="danger"
+          ariaLabel="delete"
+        >
+          <FontAwesomeIcon icon={faTrashCan} />
+        </IconButton>
+      </Td>
+    </Tr>
+  );
+};

frontend/src/views/ShareSecretPage/components/ShareSecretsTable.tsx

@@ -0,0 +1,72 @@
+import { faKey } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useGetSharedSecrets } from "@app/hooks/api/secretSharing";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { ShareSecretsRow } from "./ShareSecretsRow";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteSharedSecretConfirmation"]>,
+    {
+      name,
+      id
+    }: {
+      name: string;
+      id: string;
+    }
+  ) => void;
+};
+
+export const ShareSecretsTable = ({ handlePopUpOpen }: Props) => {
+  const { isLoading, data = [] } = useGetSharedSecrets();
+
+  let tableData = data.filter((secret) => !secret.expiresAt || new Date(secret.expiresAt) > new Date())
+  const handleSecretExpiration = () => {
+    tableData = data.filter((secret) => !secret.expiresAt || new Date(secret.expiresAt) > new Date());
+  };
+
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Secret Name</Th> <Th>Created</Th> <Th>Valid Until</Th>
+            <Th aria-label="button" />
+          </Tr>
+        </THead>
+        <TBody>
+          {isLoading && <TableSkeleton columns={4} innerKey="shared-secrets" />}
+          {!isLoading &&
+            tableData &&
+            tableData.map((row) => (
+              <ShareSecretsRow
+                key={row.id}
+                row={row}
+                handlePopUpOpen={handlePopUpOpen}
+                onSecretExpiration={handleSecretExpiration}
+              />
+            ))}
+          {!isLoading && tableData && tableData?.length === 0 && (
+            <Tr>
+              <Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-400">
+                <EmptyState title="No secrets shared yet" icon={faKey} />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
+  );
+};

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

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

frontend/src/views/ShareSecretPage/index.tsx

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

frontend/src/views/ShareSecretPublicPage/ShareSecretPublicPage.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useMemo, useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+import { decryptSymmetric } from "@app/components/utilities/cryptography/crypto";
+import { useTimedReset } from "@app/hooks";
+import { useGetActiveSharedSecretByIdAndHashedHex } from "@app/hooks/api/secretSharing";
+
+import { DragonMainImage, SecretTable } from "./components";
+
+export const ShareSecretPublicPage = () => {
+  const router = useRouter();
+  const { id, key: urlEncodedPublicKey } = router.query;
+  const [hashedHex, key] = urlEncodedPublicKey!.toString().split("-");
+
+  const publicKey = decodeURIComponent(urlEncodedPublicKey as string);
+  useEffect(() => {
+    if (!id || !publicKey) {
+      router.push("/404");
+    }
+  }, [id, publicKey]);
+
+  const { isLoading, data } = useGetActiveSharedSecretByIdAndHashedHex(id as string, hashedHex as string );  
+  const decryptedSecret = useMemo(() => {
+    if (data && data.encryptedValue && publicKey) {
+      const res = decryptSymmetric({
+        ciphertext: data.encryptedValue,
+        iv: data.iv,
+        tag: data.tag,
+        key,
+      });
+      return res;
+    }
+    return "";
+  }, [data, publicKey]);
+
+  const [timeLeft, setTimeLeft] = useState("");
+  const [isUrlCopied, , setIsUrlCopied] = useTimedReset<boolean>({
+    initialState: false,
+  });
+
+  const millisecondsPerDay = 1000 * 60 * 60 * 24;
+  const millisecondsPerHour = 1000 * 60 * 60;
+  const millisecondsPerMinute = 1000 * 60;
+
+  useEffect(() => {
+    const updateTimer = () => {
+      if (data && data.expiresAt) {
+        const expirationTime = new Date(data.expiresAt).getTime();
+        const currentTime = new Date().getTime();
+        const timeDifference = expirationTime - currentTime;
+
+        if (timeDifference < 0) {
+          setTimeLeft("Expired");
+        } else {
+          const hoursRemaining = Math.floor((timeDifference % millisecondsPerDay) / millisecondsPerHour);
+          const minutesRemaining = Math.floor((timeDifference % millisecondsPerHour) / millisecondsPerMinute);
+          const secondsRemaining = Math.floor((timeDifference % millisecondsPerMinute) / 1000);
+          setTimeLeft(`${hoursRemaining}h ${minutesRemaining}m ${secondsRemaining}s`);
+        }
+      }
+    };
+
+    const timer = setInterval(updateTimer, 1000);
+    return () => clearInterval(timer);
+  }, [data?.expiresAt]);
+
+  useEffect(() => {
+    if (isUrlCopied) {
+      setTimeout(() => setIsUrlCopied(false), 2000);
+    }
+  }, [isUrlCopied]);
+
+
+  const copyUrlToClipboard = () => {
+    navigator.clipboard.writeText(decryptedSecret);
+    setIsUrlCopied(true);
+  };
+
+  return (
+    <div className="flex flex-col justify-between bg-bunker-800 text-gray-200 md:h-screen">
+      <Head>
+        <title>Secret Shared | Infisical</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+
+      <div className="my-4 flex justify-center md:my-8">
+        <Image src="/images/biglogo.png" height={180} width={240} alt="Infisical logo" />
+      </div>
+      <p className="mb-6 px-8 text-center text-xl md:px-0 md:text-3xl">
+        A secret has been shared with you securely via Infisical
+      </p>
+      <div className="flex min-h-screen w-full flex-col md:flex-row">
+        <DragonMainImage />
+        <div className="m-4 flex flex-1 flex-col items-center justify-start md:m-0">
+          <p className="mt-8 mb-2 text-xl font-semibold text-mineshaft-100 md:mt-20">
+            Secret Details
+          </p>
+          <div className="mb-16 rounded-lg border border-mineshaft-600 bg-mineshaft-900 md:p-8">
+            <SecretTable
+              isLoading={isLoading}
+              sharedSecret={data}
+              decryptedSecret={decryptedSecret}
+              timeLeft={timeLeft}
+              isUrlCopied={isUrlCopied}
+              copyUrlToClipboard={copyUrlToClipboard}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/src/views/ShareSecretPublicPage/components/MainImage.tsx

@@ -0,0 +1,14 @@
+import Image from "next/image";
+
+export const DragonMainImage = () => {
+  return (
+    <div className="hidden  flex-1 flex-col items-center justify-center md:block md:items-start md:p-4">
+      <Image
+        src="/images/dragon-book.svg"
+        height={1000}
+        width={1413}
+        alt="Infisical Dragon - Came to send you a secret!"
+      />
+    </div>
+  );
+};

frontend/src/views/ShareSecretPublicPage/components/SecretTable.tsx

@@ -0,0 +1,96 @@
+import { faCheck, faCopy, faKey } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+  EmptyState,
+  IconButton,
+  SecretInput,
+  Table,
+  TableContainer,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { TViewSharedSecretResponse } from "@app/hooks/api/secretSharing";
+
+type Props = {
+  isLoading: boolean;
+  sharedSecret?: TViewSharedSecretResponse;
+  decryptedSecret: string;
+  timeLeft: string;
+  isUrlCopied: boolean;
+  copyUrlToClipboard: () => void;
+};
+
+export const SecretTable = ({
+  isLoading,
+  sharedSecret,
+  decryptedSecret,
+  timeLeft,
+  isUrlCopied,
+  copyUrlToClipboard
+}: Props) => {
+  return (
+    <TableContainer>
+      <Table>
+        <THead>
+          <Tr>
+            <Th>Name</Th>
+            <Th>Value</Th>
+            <Th>Valid Until</Th>
+          </Tr>
+        </THead>
+        <TBody>
+          {!isLoading && sharedSecret && decryptedSecret && (
+            <Tr key={sharedSecret.name}>
+              <Td>{sharedSecret.name}</Td>
+              <Td>
+                <div className="flex items-center md:space-x-2">
+                  <div className="max-w-[20rem] flex-1 break-words">
+                  <SecretInput
+                        isVisible
+                        value={decryptedSecret}
+                        readOnly
+                      />
+                  </div>
+                  <IconButton
+                    ariaLabel="copy to clipboard"
+                    onClick={copyUrlToClipboard}
+                    className="rounded p-2 hover:bg-gray-700"
+                    size="xs"
+                  >
+                    <FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} />
+                  </IconButton>
+                </div>
+              </Td>
+              <Td>{timeLeft}</Td>
+            </Tr>
+          )}
+          {isLoading && (
+            <Tr>
+              <Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-400">
+                Loading...
+              </Td>
+            </Tr>
+          )}
+          {!isLoading && !sharedSecret && (
+            <Tr>
+              <Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-400">
+                <EmptyState title="No such secret is shared yet!" icon={faKey} />
+              </Td>
+            </Tr>
+          )}
+          {!isLoading && sharedSecret && !decryptedSecret && (
+            <Tr>
+              <Td colSpan={4} className="bg-mineshaft-800 text-center text-bunker-400">
+                <EmptyState title="Invalid URL to fetch the Secret!" icon={faKey} />
+              </Td>
+            </Tr>
+          )}
+        </TBody>
+      </Table>
+    </TableContainer>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { DragonMainImage } from "./MainImage";
+export { SecretTable } from "./SecretTable";

frontend/src/views/ShareSecretPublicPage/index.tsx

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