fixed issue described by 428 (#441)

fixing: #428

src/clients/ClientDetails.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import {
+  Alert,
   AlertVariant,
   ButtonVariant,
   DropdownItem,
@@ -18,7 +19,10 @@ import _ from "lodash";
 
 import { ClientSettings } from "./ClientSettings";
 import { useAlerts } from "../components/alert/Alerts";
-import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
+import {
+  ConfirmDialogModal,
+  useConfirmDialog,
+} from "../components/confirm-dialog/ConfirmDialog";
 import { DownloadDialog } from "../components/download-dialog/DownloadDialog";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 import { useAdminClient, asyncStateFetch } from "../context/auth/AdminClient";
@@ -114,6 +118,9 @@ export const ClientDetails = () => {
   const { addAlert } = useAlerts();
   const [downloadDialogOpen, setDownloadDialogOpen] = useState(false);
   const toggleDownloadDialog = () => setDownloadDialogOpen(!downloadDialogOpen);
+  const [changeAuthenticatorOpen, setChangeAuthenticatorOpen] = useState(false);
+  const toggleChangeAuthenticator = () =>
+    setChangeAuthenticatorOpen(!changeAuthenticatorOpen);
   const [activeTab2, setActiveTab2] = useState(30);
 
   const form = useForm<ClientForm>();
@@ -173,8 +180,17 @@ export const ClientDetails = () => {
     );
   }, [clientId]);
 
-  const save = async () => {
+  const save = async (confirmed: boolean | undefined = false) => {
     if (await form.trigger()) {
+      if (
+        client?.publicClient &&
+        client?.clientAuthenticatorType !==
+          form.getValues("clientAuthenticatorType") &&
+        !confirmed
+      ) {
+        toggleChangeAuthenticator();
+        return;
+      }
       const redirectUris = toValue(form.getValues()["redirectUris"]);
       const webOrigins = toValue(form.getValues()["webOrigins"]);
       const attributes = convertFormValuesToObject(
@@ -208,6 +224,24 @@ export const ClientDetails = () => {
   }
   return (
     <>
+      <ConfirmDialogModal
+        continueButtonLabel="common:yes"
+        titleKey={t("changeAuthenticatorConfirmTitle", {
+          clientAuthenticatorType: form.getValues("clientAuthenticatorType"),
+        })}
+        open={changeAuthenticatorOpen}
+        toggleDialog={toggleChangeAuthenticator}
+        onConfirm={() => save(true)}
+      >
+        <>
+          {t("changeAuthenticatorConfirm", {
+            clientAuthenticatorType: form.getValues("clientAuthenticatorType"),
+          })}
+          {form.getValues("clientAuthenticatorType") === "client-jwt" && (
+            <Alert variant="info" isInline title={t("signedJWTConfirm")} />
+          )}
+        </>
+      </ConfirmDialogModal>
       <DeleteConfirm />
       <DownloadDialog
         id={client.id!}

src/clients/credentials/ClientSecret.tsx

@@ -7,6 +7,8 @@ import {
   Split,
   SplitItem,
 } from "@patternfly/react-core";
+import { useFormContext } from "react-hook-form";
+import { ClientForm } from "../ClientDetails";
 
 export type ClientSecretProps = {
   secret: string;
@@ -15,6 +17,7 @@ export type ClientSecretProps = {
 
 export const ClientSecret = ({ secret, toggle }: ClientSecretProps) => {
   const { t } = useTranslation("clients");
+  const { formState } = useFormContext<ClientForm>();
   return (
     <FormGroup label={t("clientSecret")} fieldId="kc-client-secret">
       <Split hasGutter>
@@ -24,7 +27,11 @@ export const ClientSecret = ({ secret, toggle }: ClientSecretProps) => {
           </ClipboardCopy>
         </SplitItem>
         <SplitItem>
-          <Button variant="secondary" onClick={toggle}>
+          <Button
+            variant="secondary"
+            onClick={toggle}
+            isDisabled={formState.isDirty}
+          >
             {t("regenerate")}
           </Button>
         </SplitItem>

src/clients/credentials/Credentials.tsx

@@ -234,7 +234,11 @@ export const Credentials = ({ clientId, save }: CredentialsProps) => {
                 </ClipboardCopy>
               </SplitItem>
               <SplitItem>
-                <Button variant="secondary" onClick={toggleAccessTokenConfirm}>
+                <Button
+                  variant="secondary"
+                  onClick={toggleAccessTokenConfirm}
+                  isDisabled={isDirty}
+                >
                   {t("regenerate")}
                 </Button>
               </SplitItem>

src/clients/credentials/SignedJWT.tsx

@@ -39,6 +39,7 @@ export const SignedJWT = () => {
           control={control}
           render={({ onChange, value }) => (
             <Select
+              maxHeight={200}
               toggleId="kc-signature-algorithm"
               onToggle={() => isOpen(!open)}
               onSelect={(_, value) => {

src/clients/messages.json

@@ -111,6 +111,9 @@
     "loginTheme": "Login theme",
     "consentRequired": "Consent required",
     "clientAuthenticator": "Client Authenticator",
+    "changeAuthenticatorConfirmTitle": "Change to {{clientAuthenticatorType}}",
+    "changeAuthenticatorConfirm": "If you change authenticator to {{clientAuthenticatorType}}, the keycloak database will be updated and you may need to download a new adapter configuration for this client",
+    "signedJWTConfirm": "You should configure JWKS URL or keys in the \"Keys\" tab to change the parameters of Signed JWT authenticator.",
     "clientSecret": "Client secret",
     "regenerate": "Regenerate",
     "confirmClientSecretTitle": "Regenerate secret for this client?",