diff --git a/src/clients/ClientDetails.tsx b/src/clients/ClientDetails.tsx index 5cc67be6ab..85ebeecba5 100644 --- a/src/clients/ClientDetails.tsx +++ b/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(); @@ -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 ( <> + save(true)} + > + <> + {t("changeAuthenticatorConfirm", { + clientAuthenticatorType: form.getValues("clientAuthenticatorType"), + })} + {form.getValues("clientAuthenticatorType") === "client-jwt" && ( + + )} + + { const { t } = useTranslation("clients"); + const { formState } = useFormContext(); return ( @@ -24,7 +27,11 @@ export const ClientSecret = ({ secret, toggle }: ClientSecretProps) => { - diff --git a/src/clients/credentials/Credentials.tsx b/src/clients/credentials/Credentials.tsx index 10e6fdd147..d0dccc78ee 100644 --- a/src/clients/credentials/Credentials.tsx +++ b/src/clients/credentials/Credentials.tsx @@ -234,7 +234,11 @@ export const Credentials = ({ clientId, save }: CredentialsProps) => { - diff --git a/src/clients/credentials/SignedJWT.tsx b/src/clients/credentials/SignedJWT.tsx index 962fd25c25..80dba06a1f 100644 --- a/src/clients/credentials/SignedJWT.tsx +++ b/src/clients/credentials/SignedJWT.tsx @@ -39,6 +39,7 @@ export const SignedJWT = () => { control={control} render={({ onChange, value }) => (