merge conflicts

frontend/src/components/auth/Mfa.tsx

@@ -31,6 +31,25 @@ const codeInputProps = {
   }
 } as const;
 
+const codeInputPropsPhone = {
+  inputStyle: {
+    fontFamily: "monospace",
+    margin: "4px",
+    MozAppearance: "textfield",
+    width: "40px",
+    borderRadius: "5px",
+    fontSize: "24px",
+    height: "40px",
+    paddingLeft: "7",
+    backgroundColor: "#0d1117",
+    color: "white",
+    border: "1px solid #2d2f33",
+    textAlign: "center",
+    outlineColor: "#8ca542",
+    borderColor: "#2d2f33"
+  }
+} as const;
+
 type Props = {
   successCallback: () => void | Promise<void>;
   closeMfa?: () => void;
@@ -172,6 +191,24 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
             </div>
           )}
         </div>
+        <div className="mx-auto mt-4 block w-max min-w-[18rem] md:hidden">
+          {method === MfaMethod.EMAIL && (
+            <ReactCodeInput
+              name=""
+              inputMode="tel"
+              type="text"
+              fields={6}
+              onChange={setMfaCode}
+              className="mb-2 mt-2"
+              {...codeInputPropsPhone}
+            />
+          )}
+          {method === MfaMethod.TOTP && (
+            <div className="mb-4 mt-2">
+              <Input value={mfaCode} onChange={(e) => setMfaCode(e.target.value)} />
+            </div>
+          )}
+        </div>
         {typeof triesLeft === "number" && (
           <Error text={`Invalid code. You have ${triesLeft} attempt(s) remaining.`} />
         )}

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewAzureClientSecretRotationGeneratedCredentials.tsx

@@ -0,0 +1,38 @@
+import { CredentialDisplay } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/shared/CredentialDisplay";
+import { TAzureClientSecretRotationGeneratedCredentialsResponse } from "@app/hooks/api/secretRotationsV2/types/azure-client-secret-rotation";
+
+import { ViewRotationGeneratedCredentialsDisplay } from "./shared";
+
+type Props = {
+  generatedCredentialsResponse: TAzureClientSecretRotationGeneratedCredentialsResponse;
+};
+
+export const ViewAzureClientSecretRotationGeneratedCredentials = ({
+  generatedCredentialsResponse: { generatedCredentials, activeIndex }
+}: Props) => {
+  const inactiveIndex = activeIndex === 0 ? 1 : 0;
+
+  const activeCredentials = generatedCredentials[activeIndex];
+  const inactiveCredentials = generatedCredentials[inactiveIndex];
+
+  return (
+    <ViewRotationGeneratedCredentialsDisplay
+      activeCredentials={
+        <>
+          <CredentialDisplay label="Client ID">{activeCredentials?.clientId}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Client Secret">
+            {activeCredentials?.clientSecret}
+          </CredentialDisplay>
+        </>
+      }
+      inactiveCredentials={
+        <>
+          <CredentialDisplay label="Client ID">{inactiveCredentials?.clientId}</CredentialDisplay>
+          <CredentialDisplay isSensitive label="Client Secret">
+            {inactiveCredentials?.clientSecret}
+          </CredentialDisplay>
+        </>
+      }
+    />
+  );
+};

frontend/src/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewSecretRotationV2GeneratedCredentials.tsx

@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 
 import { ViewAuth0ClientSecretRotationGeneratedCredentials } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewAuth0ClientSecretRotationGeneratedCredentials";
+import { ViewAzureClientSecretRotationGeneratedCredentials } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewAzureClientSecretRotationGeneratedCredentials";
 import { ViewLdapPasswordRotationGeneratedCredentials } from "@app/components/secret-rotations-v2/ViewSecretRotationV2GeneratedCredentials/ViewLdapPasswordRotationGeneratedCredentials";
 import { Modal, ModalContent, Spinner } from "@app/components/v2";
 import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2";
@@ -75,6 +76,13 @@ const Content = ({ secretRotation }: ContentProps) => {
         />
       );
       break;
+    case SecretRotation.AzureClientSecret:
+      Component = (
+        <ViewAzureClientSecretRotationGeneratedCredentials
+          generatedCredentialsResponse={generatedCredentialsResponse}
+        />
+      );
+      break;
     case SecretRotation.LdapPassword:
       Component = (
         <ViewLdapPasswordRotationGeneratedCredentials

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/AzureClientSecretRotationParametersFields.tsx

@@ -0,0 +1,75 @@
+import { Controller, useFormContext } from "react-hook-form";
+import { SingleValue } from "react-select";
+import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { FilterableSelect, FormControl, Tooltip } from "@app/components/v2";
+import { useAzureConnectionListClients } from "@app/hooks/api/appConnections/azure";
+import { TAzureClient } from "@app/hooks/api/appConnections/azure/types";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const AzureClientSecretRotationParametersFields = () => {
+  const { control, watch, setValue } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.AzureClientSecret;
+    }
+  >();
+
+  const connectionId = watch("connection.id");
+
+  const { data: clients, isPending: isClientsPending } = useAzureConnectionListClients(
+    connectionId,
+    { enabled: Boolean(connectionId) }
+  );
+
+  return (
+    <Controller
+      name="parameters.objectId"
+      control={control}
+      render={({ field: { value, onChange }, fieldState: { error } }) => (
+        <FormControl
+          isError={Boolean(error)}
+          errorText={error?.message}
+          label="Application"
+          helperText={
+            <Tooltip
+              className="max-w-md"
+              content={
+                <>
+                  Ensure that your connection has the{" "}
+                  <span className="font-semibold">
+                    Application.ReadWrite.All, Directory.ReadWrite.All,
+                    Application.ReadWrite.OwnedBy, user_impersonation and User.Read
+                  </span>{" "}
+                  permissions and the application exists in Azure.
+                </>
+              }
+            >
+              <div>
+                <span>Don&#39;t see the application you&#39;re looking for?</span>{" "}
+                <FontAwesomeIcon icon={faCircleInfo} className="text-mineshaft-400" />
+              </div>
+            </Tooltip>
+          }
+        >
+          <FilterableSelect
+            menuPlacement="top"
+            isLoading={isClientsPending && Boolean(connectionId)}
+            isDisabled={!connectionId}
+            value={clients?.find((client) => client.id === value) ?? null}
+            onChange={(option) => {
+              onChange((option as SingleValue<TAzureClient>)?.id ?? null);
+              setValue("parameters.appName", (option as SingleValue<TAzureClient>)?.name ?? "");
+              setValue("parameters.clientId", (option as SingleValue<TAzureClient>)?.appId ?? "");
+            }}
+            options={clients}
+            placeholder="Select an application..."
+            getOptionLabel={(option) => option.name}
+            getOptionValue={(option) => option.id}
+          />
+        </FormControl>
+      )}
+    />
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ParametersFields/SecretRotationV2ParametersFields.tsx

@@ -5,6 +5,7 @@ import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 import { TSecretRotationV2Form } from "../schemas";
 import { Auth0ClientSecretRotationParametersFields } from "./Auth0ClientSecretRotationParametersFields";
 import { AwsIamUserSecretRotationParametersFields } from "./AwsIamUserSecretRotationParametersFields";
+import { AzureClientSecretRotationParametersFields } from "./AzureClientSecretRotationParametersFields";
 import { LdapPasswordRotationParametersFields } from "./LdapPasswordRotationParametersFields";
 import { SqlCredentialsRotationParametersFields } from "./shared";
 
@@ -12,6 +13,7 @@ const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
   [SecretRotation.PostgresCredentials]: SqlCredentialsRotationParametersFields,
   [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationParametersFields,
   [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationParametersFields,
+  [SecretRotation.AzureClientSecret]: AzureClientSecretRotationParametersFields,
   [SecretRotation.LdapPassword]: LdapPasswordRotationParametersFields,
   [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationParametersFields
 };

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/AzureClientSecretRotationReviewFields.tsx

@@ -0,0 +1,30 @@
+import { useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { GenericFieldLabel } from "@app/components/v2";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretRotationReviewSection } from "./shared";
+
+export const AzureClientSecretRotationReviewFields = () => {
+  const { watch } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.AzureClientSecret;
+    }
+  >();
+
+  const [parameters, { clientId, clientSecret }] = watch(["parameters", "secretsMapping"]);
+
+  return (
+    <>
+      <SecretRotationReviewSection label="Parameters">
+        <GenericFieldLabel label="App Name">{parameters.appName}</GenericFieldLabel>
+        <GenericFieldLabel label="App ID">{parameters.objectId}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+      <SecretRotationReviewSection label="Secrets Mapping">
+        <GenericFieldLabel label="Client ID">{clientId}</GenericFieldLabel>
+        <GenericFieldLabel label="Client Secret">{clientSecret}</GenericFieldLabel>
+      </SecretRotationReviewSection>
+    </>
+  );
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2ReviewFields/SecretRotationReviewFields.tsx

@@ -8,6 +8,7 @@ import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 
 import { Auth0ClientSecretRotationReviewFields } from "./Auth0ClientSecretRotationReviewFields";
 import { AwsIamUserSecretRotationReviewFields } from "./AwsIamUserSecretRotationReviewFields";
+import { AzureClientSecretRotationReviewFields } from "./AzureClientSecretRotationReviewFields";
 import { LdapPasswordRotationReviewFields } from "./LdapPasswordRotationReviewFields";
 import { SqlCredentialsRotationReviewFields } from "./shared";
 
@@ -15,6 +16,7 @@ const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
   [SecretRotation.PostgresCredentials]: SqlCredentialsRotationReviewFields,
   [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationReviewFields,
   [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationReviewFields,
+  [SecretRotation.AzureClientSecret]: AzureClientSecretRotationReviewFields,
   [SecretRotation.LdapPassword]: LdapPasswordRotationReviewFields,
   [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationReviewFields
 };

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/AzureClientSecretRotationSecretsMappingFields.tsx

@@ -0,0 +1,58 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import { TSecretRotationV2Form } from "@app/components/secret-rotations-v2/forms/schemas";
+import { FormControl, Input } from "@app/components/v2";
+import { SecretRotation, useSecretRotationV2Option } from "@app/hooks/api/secretRotationsV2";
+
+import { SecretsMappingTable } from "./shared";
+
+export const AzureClientSecretRotationSecretsMappingFields = () => {
+  const { control } = useFormContext<
+    TSecretRotationV2Form & {
+      type: SecretRotation.AzureClientSecret;
+    }
+  >();
+
+  const { rotationOption } = useSecretRotationV2Option(SecretRotation.AzureClientSecret);
+
+  const items = [
+    {
+      name: "Client ID",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.clientId}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.clientId"
+        />
+      )
+    },
+    {
+      name: "Client Secret",
+      input: (
+        <Controller
+          render={({ field: { value, onChange }, fieldState: { error } }) => (
+            <FormControl isError={Boolean(error)} errorText={error?.message}>
+              <Input
+                value={value}
+                onChange={onChange}
+                placeholder={rotationOption?.template.secretsMapping.clientSecret}
+              />
+            </FormControl>
+          )}
+          control={control}
+          name="secretsMapping.clientSecret"
+        />
+      )
+    }
+  ];
+
+  return <SecretsMappingTable items={items} />;
+};

frontend/src/components/secret-rotations-v2/forms/SecretRotationV2SecretsMappingFields/SecretRotationV2SecretsMappingFields.tsx

@@ -5,6 +5,7 @@ import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
 import { TSecretRotationV2Form } from "../schemas";
 import { Auth0ClientSecretRotationSecretsMappingFields } from "./Auth0ClientSecretRotationSecretsMappingFields";
 import { AwsIamUserSecretRotationSecretsMappingFields } from "./AwsIamUserSecretRotationSecretsMappingFields";
+import { AzureClientSecretRotationSecretsMappingFields } from "./AzureClientSecretRotationSecretsMappingFields";
 import { LdapPasswordRotationSecretsMappingFields } from "./LdapPasswordRotationSecretsMappingFields";
 import { SqlCredentialsRotationSecretsMappingFields } from "./shared";
 
@@ -12,6 +13,7 @@ const COMPONENT_MAP: Record<SecretRotation, React.FC> = {
   [SecretRotation.PostgresCredentials]: SqlCredentialsRotationSecretsMappingFields,
   [SecretRotation.MsSqlCredentials]: SqlCredentialsRotationSecretsMappingFields,
   [SecretRotation.Auth0ClientSecret]: Auth0ClientSecretRotationSecretsMappingFields,
+  [SecretRotation.AzureClientSecret]: AzureClientSecretRotationSecretsMappingFields,
   [SecretRotation.LdapPassword]: LdapPasswordRotationSecretsMappingFields,
   [SecretRotation.AwsIamUserSecret]: AwsIamUserSecretRotationSecretsMappingFields
 };

frontend/src/components/secret-rotations-v2/forms/schemas/azure-client-secret-rotation-schema.ts

@@ -0,0 +1,19 @@
+import { z } from "zod";
+
+import { BaseSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/base-secret-rotation-v2-schema";
+import { SecretRotation } from "@app/hooks/api/secretRotationsV2";
+
+export const AzureClientSecretRotationSchema = z
+  .object({
+    type: z.literal(SecretRotation.AzureClientSecret),
+    parameters: z.object({
+      objectId: z.string().trim().min(1, "Object ID required"),
+      appName: z.string().trim().min(1, "App Name required"),
+      clientId: z.string().trim().min(1, "Client ID required")
+    }),
+    secretsMapping: z.object({
+      clientId: z.string().trim().min(1, "Client ID required"),
+      clientSecret: z.string().trim().min(1, "Client Secret required")
+    })
+  })
+  .merge(BaseSecretRotationSchema);

frontend/src/components/secret-rotations-v2/forms/schemas/index.ts

@@ -2,14 +2,16 @@ import { z } from "zod";
 
 import { Auth0ClientSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/auth0-client-secret-rotation-schema";
 import { AwsIamUserSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/aws-iam-user-secret-rotation-schema";
+import { AzureClientSecretRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/azure-client-secret-rotation-schema";
 import { LdapPasswordRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/ldap-password-rotation-schema";
 import { MsSqlCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/mssql-credentials-rotation-schema";
 import { PostgresCredentialsRotationSchema } from "@app/components/secret-rotations-v2/forms/schemas/postgres-credentials-rotation-schema";
 
 const SecretRotationUnionSchema = z.discriminatedUnion("type", [
+  Auth0ClientSecretRotationSchema,
+  AzureClientSecretRotationSchema,
   PostgresCredentialsRotationSchema,
   MsSqlCredentialsRotationSchema,
-  Auth0ClientSecretRotationSchema,
   LdapPasswordRotationSchema,
   AwsIamUserSecretRotationSchema
 ]);

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -19,6 +19,7 @@ type Props = {
   formContent?: ReactNode;
   children?: ReactNode;
   deletionMessage?: ReactNode;
+  buttonColorSchema?: "danger" | "primary" | "secondary" | "gray" | null;
 };
 
 export const DeleteActionModal = ({
@@ -32,6 +33,7 @@ export const DeleteActionModal = ({
   buttonText = "Delete",
   formContent,
   deletionMessage,
+  buttonColorSchema = "danger",
   children
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
@@ -67,7 +69,7 @@ export const DeleteActionModal = ({
           <div className="mx-2 flex items-center">
             <Button
               className="mr-4"
-              colorSchema="danger"
+              colorSchema={buttonColorSchema}
               isDisabled={!(deleteKey === inputData) || isLoading}
               onClick={onDelete}
               isLoading={isLoading}