diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties index fcdf71519..5ce496eca 100644 --- a/backend/src/main/resources/i18n/messages.properties +++ b/backend/src/main/resources/i18n/messages.properties @@ -773,6 +773,7 @@ label.configuration-value=Value label.configuration-action=Action message.delete-property-title=Delete Configuration? message.delete-property-body=You are requesting to delete a configuration set. If you complete this process the set will be removed. This cannot be undone. Do you wish to continue? +message.name-required=Name is required. label.external-description=Description diff --git a/ui/src/app/admin/IdpConfiguration.js b/ui/src/app/admin/IdpConfiguration.js index 6f774d9ea..50bacf1e6 100644 --- a/ui/src/app/admin/IdpConfiguration.js +++ b/ui/src/app/admin/IdpConfiguration.js @@ -20,10 +20,19 @@ export function IdpConfiguration() { } /> - + + {(configurations) => + + } + + } /> - + + {(configurations) => + + } + } /> diff --git a/ui/src/app/admin/component/ConfigurationForm.js b/ui/src/app/admin/component/ConfigurationForm.js index a97b1051e..3744a61df 100644 --- a/ui/src/app/admin/component/ConfigurationForm.js +++ b/ui/src/app/admin/component/ConfigurationForm.js @@ -14,12 +14,16 @@ import FloatingLabel from 'react-bootstrap/FloatingLabel'; import { useTranslator } from '../../i18n/hooks'; import { includes } from 'lodash'; -export function ConfigurationForm({ configuration = {}, loading, onSave, onCancel }) { +export function ConfigurationForm({ configurations, configuration = {}, loading, onSave, onCancel }) { - const { control, register, getValues, watch, formState: { errors } } = useForm({ + const [names, setNames] = React.useState([]); + + const { control, register, getValues, watch, formState: { errors, isValid }, handleSubmit } = useForm({ defaultValues: { ...configuration - } + }, + reValidateMode: 'onChange', + mode: 'onChange', }); const { fields, append, remove } = useFieldArray({ @@ -63,6 +67,16 @@ export function ConfigurationForm({ configuration = {}, loading, onSave, onCance const translator = useTranslator(); + React.useEffect(() => { + setNames(configurations.map(p => p.name)); + }, [configurations]); + + React.useEffect(() => console.log(errors, names), [errors, names]); + + const onNext = (data) => { + console.log(data); + }; + return (<>
@@ -70,7 +84,7 @@ export function ConfigurationForm({ configuration = {}, loading, onSave, onCance

-
+
Name - + !includes(names, v) + } + })} /> + + {errors?.name?.type === 'unique' && } + {errors?.name?.type === 'required' && } +
diff --git a/ui/src/app/admin/container/EditConfiguration.js b/ui/src/app/admin/container/EditConfiguration.js index d164c20e0..f3749f2a0 100644 --- a/ui/src/app/admin/container/EditConfiguration.js +++ b/ui/src/app/admin/container/EditConfiguration.js @@ -11,7 +11,7 @@ import { PropertiesProvider } from '../hoc/PropertiesProvider'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faSpinner } from '@fortawesome/free-solid-svg-icons'; -export function EditConfiguration() { +export function EditConfiguration({ configurations }) { const history = useHistory(); const notifier = useNotificationDispatcher(); const translator = useTranslator(); @@ -81,6 +81,7 @@ export function EditConfiguration() { {configuration && save(data)} onCancel={() => cancel()} /> } diff --git a/ui/src/app/admin/container/NewConfiguration.js b/ui/src/app/admin/container/NewConfiguration.js index 84477fe40..34a587b45 100644 --- a/ui/src/app/admin/container/NewConfiguration.js +++ b/ui/src/app/admin/container/NewConfiguration.js @@ -11,7 +11,7 @@ import { useTranslator } from '../../i18n/hooks'; import { BASE_PATH } from '../../App.constant'; import { PropertiesProvider } from '../hoc/PropertiesProvider'; -export function NewConfiguration() { +export function NewConfiguration({ configurations }) { const history = useHistory(); const notifier = useNotificationDispatcher(); const translator = useTranslator(); @@ -67,6 +67,7 @@ export function NewConfiguration() { {(schema) => save(data)} diff --git a/ui/src/app/admin/hoc/ConfigurationsProvider.js b/ui/src/app/admin/hoc/ConfigurationsProvider.js index 2cd146260..99220c94c 100644 --- a/ui/src/app/admin/hoc/ConfigurationsProvider.js +++ b/ui/src/app/admin/hoc/ConfigurationsProvider.js @@ -39,4 +39,4 @@ export function ConfigurationsProvider({ children, cache = 'no-cache' }) { React.useEffect(() => { loadConfigurations() }, []); return (<>{children(configurations, removeConfiguration, loading)}); -} \ No newline at end of file +}