|
@@ -11,7 +11,8 @@ import type { KeycloakGroupSyncSettings } from '~/features/external-user-group/i
|
|
|
export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
const { t } = useTranslation('admin');
|
|
const { t } = useTranslation('admin');
|
|
|
|
|
|
|
|
- const { data: keycloakGroupSyncSettings } = useSWRxKeycloakGroupSyncSettings();
|
|
|
|
|
|
|
+ const { data: keycloakGroupSyncSettings } =
|
|
|
|
|
+ useSWRxKeycloakGroupSyncSettings();
|
|
|
|
|
|
|
|
const [formValues, setFormValues] = useState<KeycloakGroupSyncSettings>({
|
|
const [formValues, setFormValues] = useState<KeycloakGroupSyncSettings>({
|
|
|
keycloakHost: '',
|
|
keycloakHost: '',
|
|
@@ -28,22 +29,31 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
if (keycloakGroupSyncSettings != null) {
|
|
if (keycloakGroupSyncSettings != null) {
|
|
|
setFormValues(keycloakGroupSyncSettings);
|
|
setFormValues(keycloakGroupSyncSettings);
|
|
|
}
|
|
}
|
|
|
- }, [keycloakGroupSyncSettings, setFormValues]);
|
|
|
|
|
|
|
+ }, [keycloakGroupSyncSettings]);
|
|
|
|
|
|
|
|
- const submitHandler = useCallback(async(e) => {
|
|
|
|
|
- e.preventDefault();
|
|
|
|
|
- try {
|
|
|
|
|
- await apiv3Put('/external-user-groups/keycloak/sync-settings', formValues);
|
|
|
|
|
- toastSuccess(t('external_user_group.keycloak.updated_group_sync_settings'));
|
|
|
|
|
- }
|
|
|
|
|
- catch (errs) {
|
|
|
|
|
- toastError(t(errs[0]?.message));
|
|
|
|
|
- }
|
|
|
|
|
- }, [formValues, t]);
|
|
|
|
|
|
|
+ const submitHandler = useCallback(
|
|
|
|
|
+ async (e) => {
|
|
|
|
|
+ e.preventDefault();
|
|
|
|
|
+ try {
|
|
|
|
|
+ await apiv3Put(
|
|
|
|
|
+ '/external-user-groups/keycloak/sync-settings',
|
|
|
|
|
+ formValues,
|
|
|
|
|
+ );
|
|
|
|
|
+ toastSuccess(
|
|
|
|
|
+ t('external_user_group.keycloak.updated_group_sync_settings'),
|
|
|
|
|
+ );
|
|
|
|
|
+ } catch (errs) {
|
|
|
|
|
+ toastError(t(errs[0]?.message));
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ [formValues, t],
|
|
|
|
|
+ );
|
|
|
|
|
|
|
|
return (
|
|
return (
|
|
|
<>
|
|
<>
|
|
|
- <h3 className="border-bottom mb-3">{t('external_user_group.keycloak.group_sync_settings')}</h3>
|
|
|
|
|
|
|
+ <h3 className="border-bottom mb-3">
|
|
|
|
|
+ {t('external_user_group.keycloak.group_sync_settings')}
|
|
|
|
|
+ </h3>
|
|
|
<form onSubmit={submitHandler}>
|
|
<form onSubmit={submitHandler}>
|
|
|
<div className="row form-group">
|
|
<div className="row form-group">
|
|
|
<label
|
|
<label
|
|
@@ -59,7 +69,9 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
name="keycloakHost"
|
|
name="keycloakHost"
|
|
|
id="keycloakHost"
|
|
id="keycloakHost"
|
|
|
value={formValues.keycloakHost}
|
|
value={formValues.keycloakHost}
|
|
|
- onChange={e => setFormValues({ ...formValues, keycloakHost: e.target.value })}
|
|
|
|
|
|
|
+ onChange={(e) =>
|
|
|
|
|
+ setFormValues({ ...formValues, keycloakHost: e.target.value })
|
|
|
|
|
+ }
|
|
|
/>
|
|
/>
|
|
|
<p className="form-text text-muted">
|
|
<p className="form-text text-muted">
|
|
|
<small>{t('external_user_group.keycloak.host_detail')}</small>
|
|
<small>{t('external_user_group.keycloak.host_detail')}</small>
|
|
@@ -67,7 +79,10 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div className="row form-group">
|
|
<div className="row form-group">
|
|
|
- <label htmlFor="keycloakGroupRealm" className="text-left text-md-end col-md-3 col-form-label">
|
|
|
|
|
|
|
+ <label
|
|
|
|
|
+ htmlFor="keycloakGroupRealm"
|
|
|
|
|
+ className="text-left text-md-end col-md-3 col-form-label"
|
|
|
|
|
+ >
|
|
|
{t('external_user_group.keycloak.group_realm')}
|
|
{t('external_user_group.keycloak.group_realm')}
|
|
|
</label>
|
|
</label>
|
|
|
<div className="col-md-9">
|
|
<div className="col-md-9">
|
|
@@ -78,7 +93,12 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
name="keycloakGroupRealm"
|
|
name="keycloakGroupRealm"
|
|
|
id="keycloakGroupRealm"
|
|
id="keycloakGroupRealm"
|
|
|
value={formValues.keycloakGroupRealm}
|
|
value={formValues.keycloakGroupRealm}
|
|
|
- onChange={e => setFormValues({ ...formValues, keycloakGroupRealm: e.target.value })}
|
|
|
|
|
|
|
+ onChange={(e) =>
|
|
|
|
|
+ setFormValues({
|
|
|
|
|
+ ...formValues,
|
|
|
|
|
+ keycloakGroupRealm: e.target.value,
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
/>
|
|
/>
|
|
|
<p className="form-text text-muted">
|
|
<p className="form-text text-muted">
|
|
|
<small>
|
|
<small>
|
|
@@ -88,7 +108,10 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div className="row form-group">
|
|
<div className="row form-group">
|
|
|
- <label htmlFor="keycloakGroupSyncClientRealm" className="text-left text-md-end col-md-3 col-form-label">
|
|
|
|
|
|
|
+ <label
|
|
|
|
|
+ htmlFor="keycloakGroupSyncClientRealm"
|
|
|
|
|
+ className="text-left text-md-end col-md-3 col-form-label"
|
|
|
|
|
+ >
|
|
|
{t('external_user_group.keycloak.group_sync_client_realm')}
|
|
{t('external_user_group.keycloak.group_sync_client_realm')}
|
|
|
</label>
|
|
</label>
|
|
|
<div className="col-md-9">
|
|
<div className="col-md-9">
|
|
@@ -99,17 +122,28 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
name="keycloakGroupSyncClientRealm"
|
|
name="keycloakGroupSyncClientRealm"
|
|
|
id="keycloakGroupSyncClientRealm"
|
|
id="keycloakGroupSyncClientRealm"
|
|
|
value={formValues.keycloakGroupSyncClientRealm}
|
|
value={formValues.keycloakGroupSyncClientRealm}
|
|
|
- onChange={e => setFormValues({ ...formValues, keycloakGroupSyncClientRealm: e.target.value })}
|
|
|
|
|
|
|
+ onChange={(e) =>
|
|
|
|
|
+ setFormValues({
|
|
|
|
|
+ ...formValues,
|
|
|
|
|
+ keycloakGroupSyncClientRealm: e.target.value,
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
/>
|
|
/>
|
|
|
<p className="form-text text-muted">
|
|
<p className="form-text text-muted">
|
|
|
<small>
|
|
<small>
|
|
|
- {t('external_user_group.keycloak.group_sync_client_realm_detail')} <br />
|
|
|
|
|
|
|
+ {t(
|
|
|
|
|
+ 'external_user_group.keycloak.group_sync_client_realm_detail',
|
|
|
|
|
+ )}{' '}
|
|
|
|
|
+ <br />
|
|
|
</small>
|
|
</small>
|
|
|
</p>
|
|
</p>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div className="row form-group">
|
|
<div className="row form-group">
|
|
|
- <label htmlFor="keycloakGroupSyncClientID" className="text-left text-md-end col-md-3 col-form-label">
|
|
|
|
|
|
|
+ <label
|
|
|
|
|
+ htmlFor="keycloakGroupSyncClientID"
|
|
|
|
|
+ className="text-left text-md-end col-md-3 col-form-label"
|
|
|
|
|
+ >
|
|
|
{t('external_user_group.keycloak.group_sync_client_id')}
|
|
{t('external_user_group.keycloak.group_sync_client_id')}
|
|
|
</label>
|
|
</label>
|
|
|
<div className="col-md-9">
|
|
<div className="col-md-9">
|
|
@@ -120,17 +154,26 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
name="keycloakGroupSyncClientID"
|
|
name="keycloakGroupSyncClientID"
|
|
|
id="keycloakGroupSyncClientID"
|
|
id="keycloakGroupSyncClientID"
|
|
|
value={formValues.keycloakGroupSyncClientID}
|
|
value={formValues.keycloakGroupSyncClientID}
|
|
|
- onChange={e => setFormValues({ ...formValues, keycloakGroupSyncClientID: e.target.value })}
|
|
|
|
|
|
|
+ onChange={(e) =>
|
|
|
|
|
+ setFormValues({
|
|
|
|
|
+ ...formValues,
|
|
|
|
|
+ keycloakGroupSyncClientID: e.target.value,
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
/>
|
|
/>
|
|
|
<p className="form-text text-muted">
|
|
<p className="form-text text-muted">
|
|
|
<small>
|
|
<small>
|
|
|
- {t('external_user_group.keycloak.group_sync_client_id_detail')} <br />
|
|
|
|
|
|
|
+ {t('external_user_group.keycloak.group_sync_client_id_detail')}{' '}
|
|
|
|
|
+ <br />
|
|
|
</small>
|
|
</small>
|
|
|
</p>
|
|
</p>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div className="row form-group">
|
|
<div className="row form-group">
|
|
|
- <label htmlFor="keycloakGroupSyncClientSecret" className="text-left text-md-end col-md-3 col-form-label">
|
|
|
|
|
|
|
+ <label
|
|
|
|
|
+ htmlFor="keycloakGroupSyncClientSecret"
|
|
|
|
|
+ className="text-left text-md-end col-md-3 col-form-label"
|
|
|
|
|
+ >
|
|
|
{t('external_user_group.keycloak.group_sync_client_secret')}
|
|
{t('external_user_group.keycloak.group_sync_client_secret')}
|
|
|
</label>
|
|
</label>
|
|
|
<div className="col-md-9">
|
|
<div className="col-md-9">
|
|
@@ -141,21 +184,25 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
name="keycloakGroupSyncClientSecret"
|
|
name="keycloakGroupSyncClientSecret"
|
|
|
id="keycloakGroupSyncClientSecret"
|
|
id="keycloakGroupSyncClientSecret"
|
|
|
value={formValues.keycloakGroupSyncClientSecret}
|
|
value={formValues.keycloakGroupSyncClientSecret}
|
|
|
- onChange={e => setFormValues({ ...formValues, keycloakGroupSyncClientSecret: e.target.value })}
|
|
|
|
|
|
|
+ onChange={(e) =>
|
|
|
|
|
+ setFormValues({
|
|
|
|
|
+ ...formValues,
|
|
|
|
|
+ keycloakGroupSyncClientSecret: e.target.value,
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
/>
|
|
/>
|
|
|
<p className="form-text text-muted">
|
|
<p className="form-text text-muted">
|
|
|
<small>
|
|
<small>
|
|
|
- {t('external_user_group.keycloak.group_sync_client_secret_detail')} <br />
|
|
|
|
|
|
|
+ {t(
|
|
|
|
|
+ 'external_user_group.keycloak.group_sync_client_secret_detail',
|
|
|
|
|
+ )}{' '}
|
|
|
|
|
+ <br />
|
|
|
</small>
|
|
</small>
|
|
|
</p>
|
|
</p>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div className="row form-group">
|
|
<div className="row form-group">
|
|
|
- <label
|
|
|
|
|
- className="text-left text-md-end col-md-3 col-form-label"
|
|
|
|
|
- >
|
|
|
|
|
- {/* {t('external_user_group.auto_generate_user_on_sync')} */}
|
|
|
|
|
- </label>
|
|
|
|
|
|
|
+ <div className="col-md-3"></div>
|
|
|
<div className="col-md-9">
|
|
<div className="col-md-9">
|
|
|
<div className="custom-control custom-checkbox custom-checkbox-info">
|
|
<div className="custom-control custom-checkbox custom-checkbox-info">
|
|
|
<input
|
|
<input
|
|
@@ -164,7 +211,13 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
name="autoGenerateUserOnKeycloakGroupSync"
|
|
name="autoGenerateUserOnKeycloakGroupSync"
|
|
|
id="autoGenerateUserOnKeycloakGroupSync"
|
|
id="autoGenerateUserOnKeycloakGroupSync"
|
|
|
checked={formValues.autoGenerateUserOnKeycloakGroupSync}
|
|
checked={formValues.autoGenerateUserOnKeycloakGroupSync}
|
|
|
- onChange={() => setFormValues({ ...formValues, autoGenerateUserOnKeycloakGroupSync: !formValues.autoGenerateUserOnKeycloakGroupSync })}
|
|
|
|
|
|
|
+ onChange={() =>
|
|
|
|
|
+ setFormValues({
|
|
|
|
|
+ ...formValues,
|
|
|
|
|
+ autoGenerateUserOnKeycloakGroupSync:
|
|
|
|
|
+ !formValues.autoGenerateUserOnKeycloakGroupSync,
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
/>
|
|
/>
|
|
|
<label
|
|
<label
|
|
|
className="custom-control-label"
|
|
className="custom-control-label"
|
|
@@ -176,11 +229,7 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div className="row form-group">
|
|
<div className="row form-group">
|
|
|
- <label
|
|
|
|
|
- className="text-left text-md-end col-md-3 col-form-label"
|
|
|
|
|
- >
|
|
|
|
|
- {/* {t('external_user_group.keycloak.preserve_deleted_keycloak_groups')} */}
|
|
|
|
|
- </label>
|
|
|
|
|
|
|
+ <div className="col-md-3"></div>
|
|
|
<div className="col-md-9">
|
|
<div className="col-md-9">
|
|
|
<div className="custom-control custom-checkbox custom-checkbox-info">
|
|
<div className="custom-control custom-checkbox custom-checkbox-info">
|
|
|
<input
|
|
<input
|
|
@@ -189,22 +238,35 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
name="preserveDeletedKeycloakGroups"
|
|
name="preserveDeletedKeycloakGroups"
|
|
|
id="preserveDeletedKeycloakGroups"
|
|
id="preserveDeletedKeycloakGroups"
|
|
|
checked={formValues.preserveDeletedKeycloakGroups}
|
|
checked={formValues.preserveDeletedKeycloakGroups}
|
|
|
- onChange={() => setFormValues({ ...formValues, preserveDeletedKeycloakGroups: !formValues.preserveDeletedKeycloakGroups })}
|
|
|
|
|
|
|
+ onChange={() =>
|
|
|
|
|
+ setFormValues({
|
|
|
|
|
+ ...formValues,
|
|
|
|
|
+ preserveDeletedKeycloakGroups:
|
|
|
|
|
+ !formValues.preserveDeletedKeycloakGroups,
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
/>
|
|
/>
|
|
|
<label
|
|
<label
|
|
|
className="custom-control-label"
|
|
className="custom-control-label"
|
|
|
htmlFor="preserveDeletedKeycloakGroups"
|
|
htmlFor="preserveDeletedKeycloakGroups"
|
|
|
>
|
|
>
|
|
|
- {t('external_user_group.keycloak.preserve_deleted_keycloak_groups')}
|
|
|
|
|
|
|
+ {t(
|
|
|
|
|
+ 'external_user_group.keycloak.preserve_deleted_keycloak_groups',
|
|
|
|
|
+ )}
|
|
|
</label>
|
|
</label>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div className="mt-5 mb-4">
|
|
<div className="mt-5 mb-4">
|
|
|
- <h4 className="border-bottom mb-3">Attribute Mapping ({t('optional')})</h4>
|
|
|
|
|
|
|
+ <h4 className="border-bottom mb-3">
|
|
|
|
|
+ Attribute Mapping ({t('optional')})
|
|
|
|
|
+ </h4>
|
|
|
</div>
|
|
</div>
|
|
|
<div className="row form-group">
|
|
<div className="row form-group">
|
|
|
- <label htmlFor="keycloakGroupDescriptionAttribute" className="text-left text-md-end col-md-3 col-form-label">
|
|
|
|
|
|
|
+ <label
|
|
|
|
|
+ htmlFor="keycloakGroupDescriptionAttribute"
|
|
|
|
|
+ className="text-left text-md-end col-md-3 col-form-label"
|
|
|
|
|
+ >
|
|
|
{t('Description')}
|
|
{t('Description')}
|
|
|
</label>
|
|
</label>
|
|
|
<div className="col-md-9">
|
|
<div className="col-md-9">
|
|
@@ -214,7 +276,12 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
name="keycloakGroupDescriptionAttribute"
|
|
name="keycloakGroupDescriptionAttribute"
|
|
|
id="keycloakGroupDescriptionAttribute"
|
|
id="keycloakGroupDescriptionAttribute"
|
|
|
value={formValues.keycloakGroupDescriptionAttribute || ''}
|
|
value={formValues.keycloakGroupDescriptionAttribute || ''}
|
|
|
- onChange={e => setFormValues({ ...formValues, keycloakGroupDescriptionAttribute: e.target.value })}
|
|
|
|
|
|
|
+ onChange={(e) =>
|
|
|
|
|
+ setFormValues({
|
|
|
|
|
+ ...formValues,
|
|
|
|
|
+ keycloakGroupDescriptionAttribute: e.target.value,
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
/>
|
|
/>
|
|
|
<p className="form-text text-muted">
|
|
<p className="form-text text-muted">
|
|
|
<small>
|
|
<small>
|
|
@@ -226,10 +293,7 @@ export const KeycloakGroupSyncSettingsForm: FC = () => {
|
|
|
|
|
|
|
|
<div className="row my-3">
|
|
<div className="row my-3">
|
|
|
<div className="offset-3 col-5">
|
|
<div className="offset-3 col-5">
|
|
|
- <button
|
|
|
|
|
- type="submit"
|
|
|
|
|
- className="btn btn-primary"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <button type="submit" className="btn btn-primary">
|
|
|
{t('Update')}
|
|
{t('Update')}
|
|
|
</button>
|
|
</button>
|
|
|
</div>
|
|
</div>
|