68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
|
import type ClientProfilesRepresentation from "@keycloak/keycloak-admin-client/lib/defs/clientProfilesRepresentation";
|
||
|
|
import type UserProfileConfig from "@keycloak/keycloak-admin-client/lib/defs/userProfileConfig";
|
||
|
|
import { AlertVariant, Tab, Tabs, TabTitleText } from "@patternfly/react-core";
|
||
|
|
import React, { useState } from "react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { useAlerts } from "../../components/alert/Alerts";
|
||
|
|
import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
|
||
|
|
import { useRealm } from "../../context/realm-context/RealmContext";
|
||
|
|
import { JsonEditorTab } from "./JsonEditorTab";
|
||
|
|
|
||
|
|
export const UserProfileTab = () => {
|
||
|
|
const adminClient = useAdminClient();
|
||
|
|
const { realm } = useRealm();
|
||
|
|
const { t } = useTranslation("realm-settings");
|
||
|
|
const { addAlert, addError } = useAlerts();
|
||
|
|
const [activeTab, setActiveTab] = useState("attributes");
|
||
|
|
const [config, setConfig] = useState<UserProfileConfig>();
|
||
|
|
const [isSaving, setIsSaving] = useState(false);
|
||
|
|
const [refreshCount, setRefreshCount] = useState(0);
|
||
|
|
|
||
|
|
useFetch(
|
||
|
|
() => adminClient.users.getProfile({ realm }),
|
||
|
|
(config) => setConfig(config),
|
||
|
|
[refreshCount]
|
||
|
|
);
|
||
|
|
|
||
|
|
async function onSave(updatedProfiles: ClientProfilesRepresentation) {
|
||
|
|
setIsSaving(true);
|
||
|
|
|
||
|
|
try {
|
||
|
|
await adminClient.clientPolicies.createProfiles({
|
||
|
|
...updatedProfiles,
|
||
|
|
realm,
|
||
|
|
});
|
||
|
|
|
||
|
|
setRefreshCount(refreshCount + 1);
|
||
|
|
addAlert(t("userProfileSuccess"), AlertVariant.success);
|
||
|
|
} catch (error) {
|
||
|
|
addError("realm-settings:userProfileError", error);
|
||
|
|
}
|
||
|
|
|
||
|
|
setIsSaving(false);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Tabs
|
||
|
|
activeKey={activeTab}
|
||
|
|
onSelect={(_, key) => setActiveTab(key.toString())}
|
||
|
|
mountOnEnter
|
||
|
|
>
|
||
|
|
<Tab
|
||
|
|
eventKey="attributes"
|
||
|
|
title={<TabTitleText>{t("attributes")}</TabTitleText>}
|
||
|
|
></Tab>
|
||
|
|
<Tab
|
||
|
|
eventKey="attributesGroup"
|
||
|
|
title={<TabTitleText>{t("attributesGroup")}</TabTitleText>}
|
||
|
|
></Tab>
|
||
|
|
<Tab
|
||
|
|
eventKey="jsonEditor"
|
||
|
|
title={<TabTitleText>{t("jsonEditor")}</TabTitleText>}
|
||
|
|
>
|
||
|
|
<JsonEditorTab config={config} onSave={onSave} isSaving={isSaving} />
|
||
|
|
</Tab>
|
||
|
|
</Tabs>
|
||
|
|
);
|
||
|
|
};
|