feat: updated frontend to have the tls cert auth login

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityAuthModal.tsx

@@ -15,6 +15,7 @@ import {
   useDeleteIdentityLdapAuth,
   useDeleteIdentityOciAuth,
   useDeleteIdentityOidcAuth,
+  useDeleteIdentityTlsCertAuth,
   useDeleteIdentityTokenAuth,
   useDeleteIdentityUniversalAuth
 } from "@app/hooks/api";
@@ -29,6 +30,7 @@ import { ViewIdentityKubernetesAuthContent } from "./ViewIdentityKubernetesAuthC
 import { ViewIdentityLdapAuthContent } from "./ViewIdentityLdapAuthContent";
 import { ViewIdentityOciAuthContent } from "./ViewIdentityOciAuthContent";
 import { ViewIdentityOidcAuthContent } from "./ViewIdentityOidcAuthContent";
+import { ViewIdentityTlsCertAuthContent } from "./ViewIdentityTlsCertAuthContent";
 import { ViewIdentityTokenAuthContent } from "./ViewIdentityTokenAuthContent";
 import { ViewIdentityUniversalAuthContent } from "./ViewIdentityUniversalAuthContent";
 
@@ -63,6 +65,7 @@ export const Content = ({
   const { mutateAsync: revokeTokenAuth } = useDeleteIdentityTokenAuth();
   const { mutateAsync: revokeKubernetesAuth } = useDeleteIdentityKubernetesAuth();
   const { mutateAsync: revokeGcpAuth } = useDeleteIdentityGcpAuth();
+  const { mutateAsync: revokeTlsCertAuth } = useDeleteIdentityTlsCertAuth();
   const { mutateAsync: revokeAwsAuth } = useDeleteIdentityAwsAuth();
   const { mutateAsync: revokeAzureAuth } = useDeleteIdentityAzureAuth();
   const { mutateAsync: revokeAliCloudAuth } = useDeleteIdentityAliCloudAuth();
@@ -93,6 +96,10 @@ export const Content = ({
       revokeMethod = revokeGcpAuth;
       Component = ViewIdentityGcpAuthContent;
       break;
+    case IdentityAuthMethod.TLS_CERT_AUTH:
+      revokeMethod = revokeTlsCertAuth;
+      Component = ViewIdentityTlsCertAuthContent;
+      break;
     case IdentityAuthMethod.AWS_AUTH:
       revokeMethod = revokeAwsAuth;
       Component = ViewIdentityAwsAuthContent;

frontend/src/pages/organization/IdentityDetailsByIDPage/components/ViewIdentityAuthModal/ViewIdentityTlsCertAuthContent.tsx

@@ -0,0 +1,88 @@
+import { faBan, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Badge, EmptyState, Spinner, Tooltip } from "@app/components/v2";
+import { useGetIdentityTlsCertAuth } from "@app/hooks/api";
+import { IdentityTlsCertAuthForm } from "@app/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTlsCertAuthForm";
+
+import { IdentityAuthFieldDisplay } from "./IdentityAuthFieldDisplay";
+import { ViewAuthMethodProps } from "./types";
+import { ViewIdentityContentWrapper } from "./ViewIdentityContentWrapper";
+
+export const ViewIdentityTlsCertAuthContent = ({
+  identityId,
+  handlePopUpToggle,
+  handlePopUpOpen,
+  onDelete,
+  popUp
+}: ViewAuthMethodProps) => {
+  const { data, isPending } = useGetIdentityTlsCertAuth(identityId);
+
+  if (isPending) {
+    return (
+      <div className="flex w-full items-center justify-center">
+        <Spinner className="text-mineshaft-400" />
+      </div>
+    );
+  }
+
+  if (!data) {
+    return (
+      <EmptyState
+        icon={faBan}
+        title="Could not find TLS Certificate Auth associated with this Identity."
+      />
+    );
+  }
+
+  if (popUp.identityAuthMethod.isOpen) {
+    return (
+      <IdentityTlsCertAuthForm
+        identityId={identityId}
+        isUpdate
+        handlePopUpOpen={handlePopUpOpen}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    );
+  }
+
+  return (
+    <ViewIdentityContentWrapper
+      onEdit={() => handlePopUpOpen("identityAuthMethod")}
+      onDelete={onDelete}
+    >
+      <IdentityAuthFieldDisplay label="Access Token TTL (seconds)">
+        {data.accessTokenTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max TTL (seconds)">
+        {data.accessTokenMaxTTL}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Max Number of Uses">
+        {data.accessTokenNumUsesLimit}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay label="Access Token Trusted IPs">
+        {data.accessTokenTrustedIps.map((ip) => ip.ipAddress).join(", ")}
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay className="col-span-2" label="CA Certificate">
+        <Tooltip
+          side="right"
+          className="max-w-xl p-2"
+          content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCertificate}</p>}
+        >
+          <div className="w-min">
+            <Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+              <FontAwesomeIcon icon={faEye} />
+              <span>Reveal</span>
+            </Badge>
+          </div>
+        </Tooltip>
+      </IdentityAuthFieldDisplay>
+      <IdentityAuthFieldDisplay className="col-span-2" label="Allowed Common Names">
+        {data.allowedCommonNames
+          ?.split(",")
+          .map((cn) => cn.trim())
+          .join(", ")}
+      </IdentityAuthFieldDisplay>
+    </ViewIdentityContentWrapper>
+  );
+};