{localLL.general.createAccount.helper()}
diff --git a/web/src/pages/settings/components/OpenIdSettings/components/OpenIdProviderSettings.tsx b/web/src/pages/settings/components/OpenIdSettings/components/OpenIdProviderSettings.tsx
index a3166e68c..99226152c 100644
--- a/web/src/pages/settings/components/OpenIdSettings/components/OpenIdProviderSettings.tsx
+++ b/web/src/pages/settings/components/OpenIdSettings/components/OpenIdProviderSettings.tsx
@@ -13,25 +13,25 @@ import {
SelectSelectedValue,
SelectSizeVariant,
} from '../../../../../shared/defguard-ui/components/Layout/Select/types';
-import { useAppStore } from '../../../../../shared/hooks/store/useAppStore';
import { OpenIdProvider } from '../../../../../shared/types';
+type FormFields = OpenIdProvider & {
+ create_account: boolean;
+};
+
export const OpenIdSettingsForm = ({
setCurrentProvider,
currentProvider,
formControl,
+ isLoading,
}: {
- setCurrentProvider: (provider: OpenIdProvider | null) => void;
- currentProvider: OpenIdProvider | null;
- formControl: UseFormReturn<
- OpenIdProvider & {
- create_account: boolean;
- }
- >;
+ setCurrentProvider: (provider?: OpenIdProvider) => void;
+ currentProvider?: OpenIdProvider;
+ formControl: UseFormReturn
;
+ isLoading: boolean;
}) => {
const { LL } = useI18nContext();
const localLL = LL.settingsPage.openIdSettings;
- const enterpriseEnabled = useAppStore((s) => s.appInfo?.license_info.enterprise);
const { control } = formControl;
const options: SelectOption[] = useMemo(
@@ -94,28 +94,20 @@ export const OpenIdSettingsForm = ({
[],
);
- const handleChange = useCallback(
+ const handleProviderChange = useCallback(
(val: string) => {
- setCurrentProvider({
- ...currentProvider,
- id: currentProvider?.id ?? 0,
- name: val,
- base_url: getProviderUrl({ name: val }) ?? '',
- client_id: currentProvider?.client_id ?? '',
- client_secret: currentProvider?.client_secret ?? '',
- display_name:
- getProviderDisplayName({ name: val }) ?? currentProvider?.display_name ?? '',
- google_service_account_email: currentProvider?.google_service_account_email ?? '',
- google_service_account_key: currentProvider?.google_service_account_key ?? '',
- admin_email: currentProvider?.admin_email ?? '',
- directory_sync_enabled: currentProvider?.directory_sync_enabled ?? false,
- directory_sync_interval: currentProvider?.directory_sync_interval ?? 600,
- directory_sync_user_behavior:
- currentProvider?.directory_sync_user_behavior ?? 'keep',
- directory_sync_admin_behavior:
- currentProvider?.directory_sync_admin_behavior ?? 'keep',
- directory_sync_target: currentProvider?.directory_sync_target ?? 'all',
- });
+ if (currentProvider) {
+ setCurrentProvider({
+ ...currentProvider,
+ id: currentProvider?.id ?? 0,
+ name: val,
+ base_url: getProviderUrl({ name: val }) ?? '',
+ client_id: currentProvider?.client_id ?? '',
+ client_secret: currentProvider?.client_secret ?? '',
+ display_name:
+ getProviderDisplayName({ name: val }) ?? currentProvider?.display_name ?? '',
+ });
+ }
},
[currentProvider, getProviderUrl, getProviderDisplayName, setCurrentProvider],
);
@@ -131,23 +123,23 @@ export const OpenIdSettingsForm = ({
selected={currentProvider?.name ?? undefined}
options={options}
renderSelected={renderSelected}
- onChangeSingle={(res) => handleChange(res)}
+ onChangeSingle={(res) => handleProviderChange(res)}
label={localLL.form.labels.provider.label()}
labelExtras={{parse(localLL.form.labels.provider.helper())}}
- disabled={!enterpriseEnabled}
+ disabled={isLoading}
/>
{parse(localLL.form.labels.base_url.helper())}}
- disabled={currentProvider?.name === 'Google' || !enterpriseEnabled}
+ disabled={currentProvider?.name === 'Google' || isLoading}
required
/>
{parse(localLL.form.labels.client_id.helper())}}
- disabled={!enterpriseEnabled}
+ disabled={isLoading}
required
/>
{parse(localLL.form.labels.client_secret.helper())}}
required
type="password"
- disabled={!enterpriseEnabled}
+ disabled={isLoading}
/>
{parse(localLL.form.labels.display_name.helper())}}
- disabled={!enterpriseEnabled || currentProvider?.name !== 'Custom'}
+ disabled={isLoading || currentProvider?.name !== 'Custom'}
/>
{
const { LL } = useI18nContext();
const localLL = LL.settingsPage.openIdSettings;
- const [currentProvider, setCurrentProvider] = useState(null);
- const [openIDSettings, setOpenIDSettings] = useState<{
- create_account: boolean;
- } | null>(null);
+ const [openidInfo, setOpenidInfo] = useState(null);
const queryClient = useQueryClient();
const enterpriseEnabled = useAppStore((s) => s.appInfo?.license_info.enterprise);
@@ -51,16 +47,25 @@ export const OpenIdSettingsRootForm = () => {
});
useEffect(() => {
- if (openidData?.provider) {
- setCurrentProvider(openidData?.provider);
- }
- if (openidData?.settings) {
- setOpenIDSettings(openidData?.settings);
+ if (openidData) {
+ setOpenidInfo(openidData);
}
}, [openidData]);
const toaster = useToaster();
+ const setProvider = useCallback(
+ (provider?: OpenIdProvider) => {
+ if (openidInfo) {
+ setOpenidInfo({
+ ...openidInfo,
+ provider,
+ });
+ }
+ },
+ [openidInfo],
+ );
+
const { mutate } = useMutation({
mutationFn: addOpenIdProvider,
onSuccess: () => {
@@ -113,28 +118,41 @@ export const OpenIdSettingsRootForm = () => {
[LL.form.error],
);
- const defaultValues = useMemo(
- (): FormFields => ({
- id: currentProvider?.id ?? 0,
- name: currentProvider?.name ?? '',
- base_url: currentProvider?.base_url ?? '',
- client_id: currentProvider?.client_id ?? '',
- client_secret: currentProvider?.client_secret ?? '',
- display_name: currentProvider?.display_name ?? '',
- admin_email: currentProvider?.admin_email ?? '',
- google_service_account_email: currentProvider?.google_service_account_email ?? '',
- google_service_account_key: currentProvider?.google_service_account_key ?? '',
- directory_sync_enabled: currentProvider?.directory_sync_enabled ?? false,
- directory_sync_interval: currentProvider?.directory_sync_interval ?? 600,
- directory_sync_user_behavior:
- currentProvider?.directory_sync_user_behavior ?? 'keep',
- directory_sync_admin_behavior:
- currentProvider?.directory_sync_admin_behavior ?? 'keep',
- directory_sync_target: currentProvider?.directory_sync_target ?? 'all',
- create_account: openIDSettings?.create_account ?? false,
- }),
- [currentProvider, openIDSettings],
- );
+ const defaultValues = useMemo((): FormFields => {
+ let defaults: FormFields = {
+ id: 0,
+ name: '',
+ base_url: '',
+ client_id: '',
+ client_secret: '',
+ display_name: '',
+ admin_email: '',
+ google_service_account_email: '',
+ google_service_account_key: '',
+ directory_sync_enabled: false,
+ directory_sync_interval: 600,
+ directory_sync_user_behavior: 'keep',
+ directory_sync_admin_behavior: 'keep',
+ directory_sync_target: 'all',
+ create_account: false,
+ };
+
+ if (openidInfo) {
+ if (openidInfo.provider) {
+ defaults = {
+ ...defaults,
+ ...openidInfo.provider,
+ };
+ }
+
+ defaults = {
+ ...defaults,
+ ...openidInfo.settings,
+ };
+ }
+
+ return defaults;
+ }, [openidInfo]);
const formControl = useForm({
resolver: zodResolver(schema),
@@ -178,11 +196,11 @@ export const OpenIdSettingsRootForm = () => {
};
const handleDeleteProvider = useCallback(() => {
- if (currentProvider) {
- deleteProvider(currentProvider.name);
- setCurrentProvider(null);
+ if (openidInfo?.provider) {
+ deleteProvider(openidInfo.provider.name);
+ setProvider();
}
- }, [currentProvider, deleteProvider]);
+ }, [openidInfo, deleteProvider, setProvider]);
return (
- {isLoading ? (
-