From 60e4676ac8844cd0342492407ca9a8cd97142250 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Tue, 12 Oct 2021 11:28:55 +0200
Subject: [PATCH] added saml keys tab (#1308)

Co-authored-by: Jon Koops <jonkoops@gmail.com>
---
 cypress/integration/clients_test.spec.ts |  57 ++++-
 src/clients/ClientDetails.tsx            |   8 +-
 src/clients/add/CapabilityConfig.tsx     |   4 +-
 src/clients/keys/Certificate.tsx         |  52 +++++
 src/clients/keys/GenerateKeyDialog.tsx   | 141 ++++++++----
 src/clients/keys/Keys.tsx                |  21 +-
 src/clients/keys/SamlImportKeyDialog.tsx |  54 +++++
 src/clients/keys/SamlKeys.tsx            | 260 +++++++++++++++++++++++
 src/clients/keys/SamlKeysDialog.tsx      | 206 ++++++++++++++++++
 src/clients/messages.ts                  |  23 ++
 10 files changed, 758 insertions(+), 68 deletions(-)
 create mode 100644 src/clients/keys/Certificate.tsx
 create mode 100644 src/clients/keys/SamlImportKeyDialog.tsx
 create mode 100644 src/clients/keys/SamlKeys.tsx
 create mode 100644 src/clients/keys/SamlKeysDialog.tsx

diff --git a/cypress/integration/clients_test.spec.ts b/cypress/integration/clients_test.spec.ts
index 63ca0d6b16..2b0de307e2 100644
--- a/cypress/integration/clients_test.spec.ts
+++ b/cypress/integration/clients_test.spec.ts
@@ -294,7 +294,6 @@ describe("Clients test", () => {
       cy.findByTestId("jump-link-capability-config").should("not.exist");
     });
   });
-
   describe("SAML test", () => {
     const samlClientName = "saml";
 
@@ -339,4 +338,60 @@ describe("Clients test", () => {
       masthead.checkNotificationMessage("Client successfully updated");
     });
   });
+
+  describe("SAML keys tab", () => {
+    const clientId = "saml-keys";
+
+    before(() => {
+      new AdminClient().createClient({
+        clientId,
+        protocol: "saml",
+      });
+    });
+
+    after(() => {
+      new AdminClient().deleteClient(clientId);
+    });
+
+    beforeEach(() => {
+      keycloakBefore();
+      loginPage.logIn();
+      sidebarPage.goToClients();
+      listingPage.searchItem(clientId).goToItemDetails(clientId);
+      cy.get("#pf-tab-keys-keys").click();
+    });
+
+    it("doesn't disable when no", () => {
+      cy.findByTestId("clientSignature").click({ force: true });
+
+      modalUtils
+        .checkModalTitle('Disable "Client signature required"')
+        .cancelModal();
+
+      cy.findAllByTestId("certificate").should("have.length", 1);
+    });
+
+    it("disable client signature", () => {
+      cy.findByTestId("clientSignature").click({ force: true });
+
+      modalUtils
+        .checkModalTitle('Disable "Client signature required"')
+        .confirmModal();
+
+      masthead.checkNotificationMessage("Client successfully updated");
+      cy.findAllByTestId("certificate").should("have.length", 0);
+    });
+
+    it("should enable Encryption keys config", () => {
+      cy.findByTestId("encryptAssertions").click({ force: true });
+
+      cy.findByTestId("generate").click();
+      masthead.checkNotificationMessage(
+        "New key pair and certificate generated successfully"
+      );
+
+      modalUtils.confirmModal();
+      cy.findAllByTestId("certificate").should("have.length", 1);
+    });
+  });
 });
diff --git a/src/clients/ClientDetails.tsx b/src/clients/ClientDetails.tsx
index 3b6cae799e..c1ca5699b6 100644
--- a/src/clients/ClientDetails.tsx
+++ b/src/clients/ClientDetails.tsx
@@ -53,6 +53,7 @@ import { ClientScopes } from "./scopes/ClientScopes";
 import { EvaluateScopes } from "./scopes/EvaluateScopes";
 import { ServiceAccount } from "./service-account/ServiceAccount";
 import { isRealmClient, getProtocolName } from "./utils";
+import { SamlKeys } from "./keys/SamlKeys";
 
 type ClientDetailHeaderProps = {
   onChange: (value: boolean) => void;
@@ -349,7 +350,12 @@ export const ClientDetails = () => {
                 eventKey="keys"
                 title={<TabTitleText>{t("keys")}</TabTitleText>}
               >
-                <Keys clientId={clientId} save={() => save()} />
+                {client.protocol === "openid-connect" && (
+                  <Keys clientId={clientId} save={save} />
+                )}
+                {client.protocol === "saml" && (
+                  <SamlKeys clientId={clientId} save={save} />
+                )}
               </Tab>
             )}
             {!client.publicClient && !isRealmClient(client) && (
diff --git a/src/clients/add/CapabilityConfig.tsx b/src/clients/add/CapabilityConfig.tsx
index ae92d57169..db36ec06ba 100644
--- a/src/clients/add/CapabilityConfig.tsx
+++ b/src/clients/add/CapabilityConfig.tsx
@@ -248,7 +248,7 @@ export const CapabilityConfig = ({
             hasNoPaddingTop
           >
             <Controller
-              name="attributes.saml_encrypt"
+              name="attributes.saml-encrypt"
               control={control}
               defaultValue="false"
               render={({ onChange, value }) => (
@@ -276,7 +276,7 @@ export const CapabilityConfig = ({
             hasNoPaddingTop
           >
             <Controller
-              name="attributes.saml_client_signature"
+              name="attributes.saml-client-signature"
               control={control}
               defaultValue="false"
               render={({ onChange, value }) => (
diff --git a/src/clients/keys/Certificate.tsx b/src/clients/keys/Certificate.tsx
new file mode 100644
index 0000000000..37c59f9500
--- /dev/null
+++ b/src/clients/keys/Certificate.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { FormGroup, GenerateId, TextArea } from "@patternfly/react-core";
+
+import type CertificateRepresentation from "@keycloak/keycloak-admin-client/lib/defs/certificateRepresentation";
+import { HelpItem } from "../../components/help-enabler/HelpItem";
+
+type CertificateProps = Omit<CertificateDisplayProps, "id"> & {
+  plain?: boolean;
+};
+
+type CertificateDisplayProps = {
+  id: string;
+  keyInfo?: CertificateRepresentation;
+};
+
+const CertificateDisplay = ({ id, keyInfo }: CertificateDisplayProps) => (
+  <TextArea
+    readOnly
+    rows={5}
+    id={id}
+    data-testid="certificate"
+    value={keyInfo?.certificate}
+  />
+);
+
+export const Certificate = ({ keyInfo, plain = false }: CertificateProps) => {
+  const { t } = useTranslation("clients");
+  return (
+    <GenerateId prefix="certificate">
+      {(id) =>
+        plain ? (
+          <CertificateDisplay id={id} keyInfo={keyInfo} />
+        ) : (
+          <FormGroup
+            label={t("certificate")}
+            fieldId={id}
+            labelIcon={
+              <HelpItem
+                helpText="clients-help:certificate"
+                forLabel={t("certificate")}
+                forID={id}
+              />
+            }
+          >
+            <CertificateDisplay id={id} keyInfo={keyInfo} />
+          </FormGroup>
+        )
+      }
+    </GenerateId>
+  );
+};
diff --git a/src/clients/keys/GenerateKeyDialog.tsx b/src/clients/keys/GenerateKeyDialog.tsx
index dcdc01fd7c..d0349afdc9 100644
--- a/src/clients/keys/GenerateKeyDialog.tsx
+++ b/src/clients/keys/GenerateKeyDialog.tsx
@@ -1,9 +1,10 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Controller, useForm } from "react-hook-form";
+import { Control, Controller, useForm } from "react-hook-form";
 import {
   Button,
   ButtonVariant,
+  FileUpload,
   Form,
   FormGroup,
   Modal,
@@ -24,6 +25,99 @@ type GenerateKeyDialogProps = {
   save: (keyStoreConfig: KeyStoreConfig) => void;
 };
 
+type KeyFormProps = {
+  register: () => void;
+  control: Control<KeyStoreConfig>;
+  useFile?: boolean;
+};
+
+export const KeyForm = ({
+  register,
+  control,
+  useFile = false,
+}: KeyFormProps) => {
+  const { t } = useTranslation("clients");
+
+  const [filename, setFilename] = useState<string>();
+  const [openArchiveFormat, setOpenArchiveFormat] = useState(false);
+
+  return (
+    <Form className="pf-u-pt-lg">
+      <FormGroup
+        label={t("archiveFormat")}
+        labelIcon={
+          <HelpItem
+            helpText="clients-help:archiveFormat"
+            forLabel={t("archiveFormat")}
+            forID="archiveFormat"
+          />
+        }
+        fieldId="archiveFormat"
+      >
+        <Controller
+          name="format"
+          defaultValue="JKS"
+          control={control}
+          render={({ onChange, value }) => (
+            <Select
+              toggleId="archiveFormat"
+              onToggle={(isExpanded) => setOpenArchiveFormat(isExpanded)}
+              onSelect={(_, value) => {
+                onChange(value.toString());
+                setOpenArchiveFormat(false);
+              }}
+              selections={value}
+              variant={SelectVariant.single}
+              aria-label={t("archiveFormat")}
+              isOpen={openArchiveFormat}
+            >
+              {["JKS", "PKCS12"].map((option) => (
+                <SelectOption
+                  selected={option === value}
+                  key={option}
+                  value={option}
+                />
+              ))}
+            </Select>
+          )}
+        />
+      </FormGroup>
+      {useFile && (
+        <FormGroup
+          label={t("importFile")}
+          labelIcon={
+            <HelpItem
+              helpText="clients-help:importFile"
+              forLabel={t("importFile")}
+              forID="importFile"
+            />
+          }
+          fieldId="importFile"
+        >
+          <Controller
+            name="file"
+            defaultValue=""
+            control={control}
+            render={({ onChange, value }) => (
+              <FileUpload
+                id="importFile"
+                value={value}
+                filename={filename}
+                browseButtonText={t("browse")}
+                onChange={(value, filename) => {
+                  setFilename(filename);
+                  onChange(value);
+                }}
+              />
+            )}
+          />
+        </FormGroup>
+      )}
+      <StoreSettings register={register} hidePassword={useFile} />
+    </Form>
+  );
+};
+
 export const GenerateKeyDialog = ({
   save,
   toggleDialog,
@@ -31,8 +125,6 @@ export const GenerateKeyDialog = ({
   const { t } = useTranslation("clients");
   const { register, control, handleSubmit } = useForm<KeyStoreConfig>();
 
-  const [openArchiveFormat, setOpenArchiveFormat] = useState(false);
-
   return (
     <Modal
       variant={ModalVariant.medium}
@@ -69,48 +161,7 @@ export const GenerateKeyDialog = ({
       <TextContent>
         <Text>{t("clients-help:generateKeysDescription")}</Text>
       </TextContent>
-      <Form className="pf-u-pt-lg">
-        <FormGroup
-          label={t("archiveFormat")}
-          labelIcon={
-            <HelpItem
-              helpText="clients-help:archiveFormat"
-              forLabel={t("archiveFormat")}
-              forID="archiveFormat"
-            />
-          }
-          fieldId="archiveFormat"
-        >
-          <Controller
-            name="format"
-            defaultValue="JKS"
-            control={control}
-            render={({ onChange, value }) => (
-              <Select
-                toggleId="archiveFormat"
-                onToggle={() => setOpenArchiveFormat(!openArchiveFormat)}
-                onSelect={(_, value) => {
-                  onChange(value as string);
-                  setOpenArchiveFormat(false);
-                }}
-                selections={value}
-                variant={SelectVariant.single}
-                aria-label={t("archiveFormat")}
-                isOpen={openArchiveFormat}
-              >
-                {["JKS", "PKCS12"].map((option) => (
-                  <SelectOption
-                    selected={option === value}
-                    key={option}
-                    value={option}
-                  />
-                ))}
-              </Select>
-            )}
-          />
-        </FormGroup>
-        <StoreSettings register={register} />
-      </Form>
+      <KeyForm register={register} control={control} />
     </Modal>
   );
 };
diff --git a/src/clients/keys/Keys.tsx b/src/clients/keys/Keys.tsx
index 7f8edf593f..385aba4c50 100644
--- a/src/clients/keys/Keys.tsx
+++ b/src/clients/keys/Keys.tsx
@@ -13,7 +13,6 @@ import {
   PageSection,
   Switch,
   Text,
-  TextArea,
   TextContent,
   TextInput,
 } from "@patternfly/react-core";
@@ -28,6 +27,7 @@ import { GenerateKeyDialog } from "./GenerateKeyDialog";
 import { useFetch, useAdminClient } from "../../context/auth/AdminClient";
 import { useAlerts } from "../../components/alert/Alerts";
 import { ImportKeyDialog, ImportFile } from "./ImportKeyDialog";
+import { Certificate } from "./Certificate";
 
 type KeysProps = {
   save: () => void;
@@ -155,24 +155,7 @@ export const Keys = ({ clientId, save }: KeysProps) => {
             </FormGroup>
             {useJwksUrl !== "true" &&
               (keyInfo ? (
-                <FormGroup
-                  label={t("certificate")}
-                  fieldId="certificate"
-                  labelIcon={
-                    <HelpItem
-                      helpText="clients-help:certificate"
-                      forLabel={t("certificate")}
-                      forID="certificate"
-                    />
-                  }
-                >
-                  <TextArea
-                    readOnly
-                    rows={5}
-                    id="certificate"
-                    value={keyInfo.certificate}
-                  />
-                </FormGroup>
+                <Certificate plain keyInfo={keyInfo} />
               ) : (
                 "No client certificate configured"
               ))}
diff --git a/src/clients/keys/SamlImportKeyDialog.tsx b/src/clients/keys/SamlImportKeyDialog.tsx
new file mode 100644
index 0000000000..bd7abdd792
--- /dev/null
+++ b/src/clients/keys/SamlImportKeyDialog.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useFormContext } from "react-hook-form";
+import { AlertVariant } from "@patternfly/react-core";
+
+import type { KeyTypes } from "./SamlKeys";
+import { KeyForm } from "./GenerateKeyDialog";
+import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAlerts } from "../../components/alert/Alerts";
+import { SamlKeysDialogForm, submitForm } from "./SamlKeysDialog";
+import { ConfirmDialogModal } from "../../components/confirm-dialog/ConfirmDialog";
+
+type SamlImportKeyDialogProps = {
+  id: string;
+  attr: KeyTypes;
+  onClose: () => void;
+};
+
+export const SamlImportKeyDialog = ({
+  id,
+  attr,
+  onClose,
+}: SamlImportKeyDialogProps) => {
+  const { t } = useTranslation("clients");
+  const { register, control, handleSubmit } = useFormContext();
+
+  const adminClient = useAdminClient();
+  const { addAlert, addError } = useAlerts();
+
+  const submit = (form: SamlKeysDialogForm) => {
+    submitForm(form, id, attr, adminClient, (error) => {
+      if (error) {
+        addError("clients:importError", error);
+      } else {
+        addAlert(t("importSuccess"), AlertVariant.success);
+      }
+    });
+  };
+
+  return (
+    <ConfirmDialogModal
+      open={true}
+      toggleDialog={onClose}
+      continueButtonLabel="clients:import"
+      titleKey="clients:importKey"
+      onConfirm={() => {
+        handleSubmit(submit)();
+        onClose();
+      }}
+    >
+      <KeyForm register={register} control={control} useFile />
+    </ConfirmDialogModal>
+  );
+};
diff --git a/src/clients/keys/SamlKeys.tsx b/src/clients/keys/SamlKeys.tsx
new file mode 100644
index 0000000000..40d5a87269
--- /dev/null
+++ b/src/clients/keys/SamlKeys.tsx
@@ -0,0 +1,260 @@
+import React, { useState } from "react";
+import FileSaver from "file-saver";
+import { useTranslation } from "react-i18next";
+import { Controller, useFormContext } from "react-hook-form";
+import {
+  CardBody,
+  PageSection,
+  TextContent,
+  Text,
+  FormGroup,
+  Switch,
+  Card,
+  Form,
+  ActionGroup,
+  Button,
+  AlertVariant,
+} from "@patternfly/react-core";
+
+import type CertificateRepresentation from "@keycloak/keycloak-admin-client/lib/defs/certificateRepresentation";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
+import { FormAccess } from "../../components/form-access/FormAccess";
+import { HelpItem } from "../../components/help-enabler/HelpItem";
+import type { ClientForm } from "../ClientDetails";
+import { SamlKeysDialog } from "./SamlKeysDialog";
+import { FormPanel } from "../../components/scroll-form/FormPanel";
+import { Certificate } from "./Certificate";
+import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
+import { useAlerts } from "../../components/alert/Alerts";
+import { SamlImportKeyDialog } from "./SamlImportKeyDialog";
+
+type SamlKeysProps = {
+  clientId: string;
+  save: () => void;
+};
+
+const KEYS = ["saml.signing", "saml.encryption"] as const;
+export type KeyTypes = typeof KEYS[number];
+
+const KEYS_MAPPING: { [key in KeyTypes]: { [index: string]: string } } = {
+  "saml.signing": {
+    name: "attributes.saml-client-signature",
+    title: "signingKeysConfig",
+    key: "clientSignature",
+  },
+  "saml.encryption": {
+    name: "attributes.saml-encrypt",
+    title: "encryptionKeysConfig",
+    key: "encryptAssertions",
+  },
+};
+
+type KeySectionProps = {
+  keyInfo?: CertificateRepresentation;
+  attr: KeyTypes;
+  onChanged: (key: KeyTypes) => void;
+  onGenerate: (key: KeyTypes, regenerate: boolean) => void;
+  onImport: (key: KeyTypes) => void;
+};
+
+const KeySection = ({
+  keyInfo,
+  attr,
+  onChanged,
+  onGenerate,
+  onImport,
+}: KeySectionProps) => {
+  const { t } = useTranslation("clients");
+  const { control, watch } = useFormContext<ClientForm>();
+  const title = KEYS_MAPPING[attr].title;
+  const key = KEYS_MAPPING[attr].key;
+  const name = KEYS_MAPPING[attr].name;
+
+  const section = watch(name);
+  return (
+    <>
+      <FormPanel title={t(title)} className="kc-form-panel__panel">
+        <TextContent className="pf-u-pb-lg">
+          <Text>{t(`${title}Explain`)}</Text>
+        </TextContent>
+        <FormAccess role="manage-clients" isHorizontal>
+          <FormGroup
+            labelIcon={
+              <HelpItem
+                helpText={`clients-help:${key}`}
+                forLabel={t(key)}
+                forID={t(`common:helpLabel`, { label: t(key) })}
+              />
+            }
+            label={t(key)}
+            fieldId={key}
+            hasNoPaddingTop
+          >
+            <Controller
+              name={name}
+              control={control}
+              defaultValue="false"
+              render={({ onChange, value }) => (
+                <Switch
+                  data-testid={key}
+                  id={key}
+                  label={t("common:on")}
+                  labelOff={t("common:off")}
+                  isChecked={value === "true"}
+                  onChange={(value) => {
+                    const v = value.toString();
+                    if (v === "true") {
+                      onChanged(attr);
+                      onChange(v);
+                    } else {
+                      onGenerate(attr, false);
+                    }
+                  }}
+                />
+              )}
+            />
+          </FormGroup>
+        </FormAccess>
+      </FormPanel>
+      {keyInfo?.certificate && section === "true" && (
+        <Card isFlat>
+          <CardBody className="kc-form-panel__body">
+            <Form isHorizontal>
+              <Certificate keyInfo={keyInfo} />
+              <ActionGroup>
+                <Button
+                  variant="secondary"
+                  onClick={() => onGenerate(attr, true)}
+                >
+                  {t("regenerate")}
+                </Button>
+                <Button variant="secondary" onClick={() => onImport(attr)}>
+                  {t("importKey")}
+                </Button>
+                <Button variant="tertiary">{t("common:export")}</Button>
+              </ActionGroup>
+            </Form>
+          </CardBody>
+        </Card>
+      )}
+    </>
+  );
+};
+
+export const SamlKeys = ({ clientId, save }: SamlKeysProps) => {
+  const { t } = useTranslation("clients");
+  const [isChanged, setIsChanged] = useState<KeyTypes>();
+  const [keyInfo, setKeyInfo] = useState<CertificateRepresentation[]>();
+  const [selectedType, setSelectedType] = useState<KeyTypes>();
+  const [openImport, setImportOpen] = useState(false);
+  const [refresh, setRefresh] = useState(0);
+
+  const { setValue } = useFormContext();
+
+  const adminClient = useAdminClient();
+  const { addAlert, addError } = useAlerts();
+
+  useFetch(
+    () =>
+      Promise.all(
+        KEYS.map((attr) =>
+          adminClient.clients.getKeyInfo({ id: clientId, attr })
+        )
+      ),
+    (info) => setKeyInfo(info),
+    [refresh]
+  );
+
+  const generate = async (attr: KeyTypes) => {
+    const index = KEYS.indexOf(attr);
+    try {
+      const info = [...(keyInfo || [])];
+      info[index] = await adminClient.clients.generateKey({
+        id: clientId,
+        attr,
+      });
+
+      setKeyInfo(info);
+      FileSaver.saveAs(
+        new Blob([info[index].privateKey!], {
+          type: "application/octet-stream",
+        }),
+        "private.key"
+      );
+
+      addAlert(t("generateSuccess"), AlertVariant.success);
+    } catch (error) {
+      addError("clients:generateError", error);
+    }
+  };
+
+  const key = selectedType ? KEYS_MAPPING[selectedType].key : "";
+  const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
+    titleKey: t("disableSigning", {
+      key: t(key),
+    }),
+    messageKey: t("disableSigningExplain", {
+      key: t(key),
+    }),
+    continueButtonLabel: "common:yes",
+    cancelButtonLabel: "common:no",
+    onConfirm: () => {
+      setValue(KEYS_MAPPING[selectedType!].name, "false");
+      save();
+    },
+  });
+
+  const [toggleReGenerateDialog, ReGenerateConfirm] = useConfirmDialog({
+    titleKey: "clients:reGenerateSigning",
+    messageKey: "clients:reGenerateSigningExplain",
+    continueButtonLabel: "common:yes",
+    cancelButtonLabel: "common:no",
+    onConfirm: () => {
+      generate(selectedType!);
+    },
+  });
+
+  return (
+    <PageSection variant="light" className="keycloak__form">
+      {isChanged && (
+        <SamlKeysDialog
+          id={clientId}
+          attr={isChanged}
+          onClose={() => {
+            setIsChanged(undefined);
+            save();
+            setRefresh(refresh + 1);
+          }}
+        />
+      )}
+      <DisableConfirm />
+      <ReGenerateConfirm />
+      {KEYS.map((attr, index) => (
+        <>
+          {openImport && (
+            <SamlImportKeyDialog
+              id={clientId}
+              attr={attr}
+              onClose={() => setImportOpen(false)}
+            />
+          )}
+          <KeySection
+            key={attr}
+            keyInfo={keyInfo?.[index]}
+            attr={attr}
+            onChanged={setIsChanged}
+            onGenerate={(type, isNew) => {
+              setSelectedType(type);
+              if (!isNew) {
+                toggleDisableDialog();
+              } else {
+                toggleReGenerateDialog();
+              }
+            }}
+            onImport={() => setImportOpen(true)}
+          />
+        </>
+      ))}
+    </PageSection>
+  );
+};
diff --git a/src/clients/keys/SamlKeysDialog.tsx b/src/clients/keys/SamlKeysDialog.tsx
new file mode 100644
index 0000000000..56a79e63f0
--- /dev/null
+++ b/src/clients/keys/SamlKeysDialog.tsx
@@ -0,0 +1,206 @@
+import React, { useState } from "react";
+import FileSaver from "file-saver";
+import { useTranslation } from "react-i18next";
+import { useForm } from "react-hook-form";
+import {
+  AlertVariant,
+  Button,
+  ButtonVariant,
+  Flex,
+  FlexItem,
+  Form,
+  FormGroup,
+  Modal,
+  ModalVariant,
+  Radio,
+  Split,
+  SplitItem,
+  Text,
+  TextContent,
+  Title,
+} from "@patternfly/react-core";
+
+import type CertificateRepresentation from "@keycloak/keycloak-admin-client/lib/defs/certificateRepresentation";
+import type KeyStoreConfig from "@keycloak/keycloak-admin-client/lib/defs/keystoreConfig";
+import type { KeyTypes } from "./SamlKeys";
+import { HelpItem } from "../../components/help-enabler/HelpItem";
+import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAlerts } from "../../components/alert/Alerts";
+import { KeyForm } from "./GenerateKeyDialog";
+import { Certificate } from "./Certificate";
+import type KeycloakAdminClient from "@keycloak/keycloak-admin-client";
+
+type SamlKeysDialogProps = {
+  id: string;
+  attr: KeyTypes;
+  onClose: () => void;
+};
+
+export type SamlKeysDialogForm = KeyStoreConfig & {
+  file: File;
+};
+
+export const submitForm = async (
+  form: SamlKeysDialogForm,
+  id: string,
+  attr: KeyTypes,
+  adminClient: KeycloakAdminClient,
+  callback: (error?: unknown) => void
+) => {
+  try {
+    const formData = new FormData();
+    const { file, ...rest } = form;
+    Object.entries(rest).map(([key, value]) =>
+      formData.append(
+        key === "format" ? "keystoreFormat" : key,
+        value.toString()
+      )
+    );
+    formData.append("file", file);
+
+    await adminClient.clients.uploadKey({ id, attr }, formData);
+    callback();
+  } catch (error) {
+    callback(error);
+  }
+};
+
+export const SamlKeysDialog = ({ id, attr, onClose }: SamlKeysDialogProps) => {
+  const { t } = useTranslation("clients");
+  const [type, setType] = useState(false);
+  const [keys, setKeys] = useState<CertificateRepresentation>();
+  const { register, control, handleSubmit } = useForm<SamlKeysDialogForm>();
+
+  const adminClient = useAdminClient();
+  const { addAlert, addError } = useAlerts();
+
+  const submit = (form: SamlKeysDialogForm) => {
+    submitForm(form, id, attr, adminClient, (error) => {
+      if (error) {
+        addError("clients:importError", error);
+      } else {
+        addAlert(t("importSuccess"), AlertVariant.success);
+      }
+    });
+  };
+
+  const generate = async () => {
+    try {
+      const key = await adminClient.clients.generateKey({
+        id,
+        attr,
+      });
+      setKeys(key);
+      FileSaver.saveAs(
+        new Blob([key.privateKey!], {
+          type: "application/octet-stream",
+        }),
+        "private.key"
+      );
+
+      addAlert(t("generateSuccess"), AlertVariant.success);
+    } catch (error) {
+      addError("clients:generateError", error);
+    }
+  };
+
+  return (
+    <Modal
+      variant={ModalVariant.medium}
+      aria-labelledby={t("enableClientSignatureRequired")}
+      header={
+        <TextContent>
+          <Title headingLevel="h1">{t("enableClientSignatureRequired")}</Title>
+          <Text>{t("enableClientSignatureRequiredExplain")}</Text>
+        </TextContent>
+      }
+      isOpen={true}
+      onClose={onClose}
+      actions={[
+        <Button
+          id="modal-confirm"
+          key="confirm"
+          data-testid="confirm"
+          variant="primary"
+          onClick={() => {
+            if (type) {
+              handleSubmit(submit)();
+            }
+            onClose();
+          }}
+        >
+          {t("confirm")}
+        </Button>,
+        <Button
+          id="modal-cancel"
+          key="cancel"
+          data-testid="cancel"
+          variant={ButtonVariant.link}
+          onClick={onClose}
+        >
+          {t("common:cancel")}
+        </Button>,
+      ]}
+    >
+      <Form isHorizontal>
+        <FormGroup
+          label={t("selectMethod")}
+          fieldId="selectMethod"
+          hasNoPaddingTop
+        >
+          <Flex>
+            <FlexItem>
+              <Radio
+                isChecked={!type}
+                name="selectMethodType"
+                onChange={() => setType(false)}
+                label={t("selectMethodType.generate")}
+                id="selectMethodType-generate"
+              />
+            </FlexItem>
+            <FlexItem>
+              <Radio
+                isChecked={type}
+                name="selectMethodType"
+                onChange={() => setType(true)}
+                label={t("selectMethodType.import")}
+                id="selectMethodType-import"
+              />
+            </FlexItem>
+          </Flex>
+        </FormGroup>
+      </Form>
+      {!type && (
+        <Form>
+          <FormGroup
+            label={t("certificate")}
+            fieldId="certificate"
+            labelIcon={
+              <HelpItem
+                helpText="clients-help:certificate"
+                forLabel={t("certificate")}
+                forID="certificate"
+              />
+            }
+          >
+            <Split hasGutter>
+              <SplitItem isFilled>
+                <Certificate plain keyInfo={keys} />
+              </SplitItem>
+              <SplitItem>
+                <Button
+                  variant="secondary"
+                  data-testid="generate"
+                  onClick={generate}
+                >
+                  {t("generate")}
+                </Button>
+              </SplitItem>
+            </Split>
+          </FormGroup>
+        </Form>
+      )}
+      {type && <KeyForm register={register} control={control} useFile />}
+    </Modal>
+  );
+};
diff --git a/src/clients/messages.ts b/src/clients/messages.ts
index 56306d4199..7b43e82464 100644
--- a/src/clients/messages.ts
+++ b/src/clients/messages.ts
@@ -169,6 +169,29 @@ export default {
       "If you regenerate registration access token, the access data regarding the client registration service will be updated.",
     clientSecretSuccess: "Client secret regenerated",
     clientSecretError: "Could not regenerate client secret due to: {{error}}",
+    signingKeysConfig: "Signing keys config",
+    signingKeysConfigExplain:
+      'If you enable the "Client signature required" below, you must configure the signing keys by generating or importing keys, and the client will sign their saml requests and responses. The signature will be validated.',
+    encryptionKeysConfig: "Encryption keys config",
+    encryptionKeysConfigExplain:
+      'If you enable the "Encryption assertions" below, you must configure the encryption keys by generating or importing keys, and the SAML assertions will be encrypted with the client\'s public key using AES.',
+    enableClientSignatureRequired: 'Enable "Client signature required"?',
+    enableClientSignatureRequiredExplain:
+      'If you enable "Client signature required", the adapter of this client will be updated. You may need to download a new adapter for this client. You need to generate or import keys for this client otherwise the authentication will not work.',
+    selectMethod: "Select method",
+    selectMethodType: {
+      generate: "Generate",
+      import: "Import",
+    },
+    confirm: "Confirm",
+    browse: "Browse",
+    importKey: "Import key",
+    disableSigning: 'Disable "{{key}}"',
+    disableSigningExplain:
+      'If you disable "{{key}}", the Keycloak database will be updated and you may need to download a new adapter for this client.',
+    reGenerateSigning: "Regenerate signing key for this client",
+    reGenerateSigningExplain:
+      "If you regenerate signing key for client, the Keycloak database will be updated and you may need to download a new adapter for this client.",
     registrationAccessToken: "Registration access token",
     accessTokenSuccess: "Access token regenerated",
     accessTokenError: "Could not regenerate access token due to: {{error}}",