diff --git a/src/clients/keys/GenerateKeyDialog.tsx b/src/clients/keys/GenerateKeyDialog.tsx index 5f5872a01d..7895c1b286 100644 --- a/src/clients/keys/GenerateKeyDialog.tsx +++ b/src/clients/keys/GenerateKeyDialog.tsx @@ -1,6 +1,11 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; -import { Control, Controller, useForm } from "react-hook-form"; +import { + Controller, + FormProvider, + useForm, + useFormContext, +} from "react-hook-form"; import { Button, ButtonVariant, @@ -21,26 +26,23 @@ import { HelpItem } from "../../components/help-enabler/HelpItem"; import { StoreSettings } from "./StoreSettings"; type GenerateKeyDialogProps = { + clientId: string; toggleDialog: () => void; save: (keyStoreConfig: KeyStoreConfig) => void; }; type KeyFormProps = { - register: () => void; - control: Control; useFile?: boolean; }; -export const KeyForm = ({ - register, - control, - useFile = false, -}: KeyFormProps) => { +export const KeyForm = ({ useFile = false }: KeyFormProps) => { const { t } = useTranslation("clients"); const [filename, setFilename] = useState(); const [openArchiveFormat, setOpenArchiveFormat] = useState(false); + const { control } = useFormContext(); + return (
)} - + ); }; export const GenerateKeyDialog = ({ + clientId, save, toggleDialog, }: GenerateKeyDialogProps) => { const { t } = useTranslation("clients"); - const { register, control, handleSubmit } = useForm(); + const form = useForm({ + defaultValues: { keyAlias: clientId }, + mode: "onChange", + }); + + const { + handleSubmit, + formState: { isValid }, + } = form; return ( { handleSubmit((config) => { save(config); @@ -159,7 +171,9 @@ export const GenerateKeyDialog = ({ {t("clients-help:generateKeysDescription")} - + + + ); }; diff --git a/src/clients/keys/ImportKeyDialog.tsx b/src/clients/keys/ImportKeyDialog.tsx index ae86c18933..bd1c7c528e 100644 --- a/src/clients/keys/ImportKeyDialog.tsx +++ b/src/clients/keys/ImportKeyDialog.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; -import { Controller, useForm, useWatch } from "react-hook-form"; +import { Controller, FormProvider, useForm, useWatch } from "react-hook-form"; import { Button, ButtonVariant, @@ -43,7 +43,8 @@ export const ImportKeyDialog = ({ toggleDialog, }: ImportKeyDialogProps) => { const { t } = useTranslation("clients"); - const { register, control, handleSubmit } = useForm(); + const form = useForm(); + const { control, handleSubmit } = form; const [openArchiveFormat, setOpenArchiveFormat] = useState(false); @@ -128,7 +129,9 @@ export const ImportKeyDialog = ({ /> {baseFormats.includes(format) && ( - + + + )} { const { control, register, + getValues, formState: { isDirty }, } = useFormContext(); const adminClient = useAdminClient(); @@ -106,6 +107,7 @@ export const Keys = ({ clientId, save }: KeysProps) => { {openGenerateKeys && ( diff --git a/src/clients/keys/SamlImportKeyDialog.tsx b/src/clients/keys/SamlImportKeyDialog.tsx index bd7abdd792..1eaded169b 100644 --- a/src/clients/keys/SamlImportKeyDialog.tsx +++ b/src/clients/keys/SamlImportKeyDialog.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useTranslation } from "react-i18next"; -import { useFormContext } from "react-hook-form"; +import { FormProvider, useFormContext } from "react-hook-form"; import { AlertVariant } from "@patternfly/react-core"; import type { KeyTypes } from "./SamlKeys"; @@ -22,7 +22,8 @@ export const SamlImportKeyDialog = ({ onClose, }: SamlImportKeyDialogProps) => { const { t } = useTranslation("clients"); - const { register, control, handleSubmit } = useFormContext(); + const form = useFormContext(); + const { handleSubmit } = form; const adminClient = useAdminClient(); const { addAlert, addError } = useAlerts(); @@ -48,7 +49,9 @@ export const SamlImportKeyDialog = ({ onClose(); }} > - + + + ); }; diff --git a/src/clients/keys/SamlKeysDialog.tsx b/src/clients/keys/SamlKeysDialog.tsx index 9f50097cf8..2a5f7d9d9e 100644 --- a/src/clients/keys/SamlKeysDialog.tsx +++ b/src/clients/keys/SamlKeysDialog.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import FileSaver from "file-saver"; import { useTranslation } from "react-i18next"; -import { useForm } from "react-hook-form"; +import { FormProvider, useForm } from "react-hook-form"; import { AlertVariant, Button, @@ -75,12 +75,11 @@ export const SamlKeysDialog = ({ const { t } = useTranslation("clients"); const [type, setType] = useState(false); const [keys, setKeys] = useState(); + const form = useForm(); const { - register, - control, handleSubmit, formState: { isDirty }, - } = useForm(); + } = form; const adminClient = useAdminClient(); const { addAlert, addError } = useAlerts(); @@ -211,7 +210,11 @@ export const SamlKeysDialog = ({ )} - {type && } + {type && ( + + + + )} ); }; diff --git a/src/clients/keys/StoreSettings.tsx b/src/clients/keys/StoreSettings.tsx index 82bde33a82..a41d3b6908 100644 --- a/src/clients/keys/StoreSettings.tsx +++ b/src/clients/keys/StoreSettings.tsx @@ -1,24 +1,26 @@ import React from "react"; import { useTranslation } from "react-i18next"; +import { useFormContext } from "react-hook-form"; import { FormGroup, TextInput } from "@patternfly/react-core"; +import type KeyStoreConfig from "@keycloak/keycloak-admin-client/lib/defs/keystoreConfig"; import { HelpItem } from "../../components/help-enabler/HelpItem"; import { PasswordInput } from "../../components/password-input/PasswordInput"; export const StoreSettings = ({ - register, hidePassword = false, }: { - register: () => void; hidePassword?: boolean; }) => { const { t } = useTranslation("clients"); + const { register } = useFormContext(); return ( <> {!hidePassword && ( )}