@keycloakify/keycloak-account-ui/personal-info/PersonalInfo.js

Repackaged Keycloak Account UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getI18n } from "react-i18next";
import { UserProfileFields, beerify, debeerify, setUserProfileServerError, useEnvironment, } from "../ui-shared";
import { ActionGroup, Alert, AlertVariant, Button, ExpandableSection, Form, Spinner, } from "@patternfly/react-core";
import { ExternalLinkSquareAltIcon } from "@patternfly/react-icons";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { getPersonalInfo, getSupportedLocales, savePersonalInfo, } from "../api/methods";
import { Page } from "../components/page/Page";
import { useAccountAlerts } from "../utils/useAccountAlerts";
import { usePromise } from "../utils/usePromise";
export const PersonalInfo = () => {
    const { t } = useTranslation();
    const context = useEnvironment();
    const [userProfileMetadata, setUserProfileMetadata] = useState();
    const [supportedLocales, setSupportedLocales] = useState([]);
    const form = useForm({ mode: "onChange" });
    const { handleSubmit, reset, setValue, setError } = form;
    const { addAlert } = useAccountAlerts();
    usePromise((signal) => Promise.all([
        getPersonalInfo({ signal, context }),
        getSupportedLocales({ signal, context }),
    ]), ([personalInfo, supportedLocales]) => {
        setUserProfileMetadata(personalInfo.userProfileMetadata);
        setSupportedLocales(supportedLocales);
        reset(personalInfo);
        Object.entries(personalInfo.attributes || {}).forEach(([k, v]) => setValue(`attributes[${beerify(k)}]`, v));
    });
    const onSubmit = async (user) => {
        var _a;
        try {
            const attributes = Object.fromEntries(Object.entries(user.attributes || {}).map(([k, v]) => [
                debeerify(k),
                v,
            ]));
            await savePersonalInfo(context, Object.assign(Object.assign({}, user), { attributes }));
            const locale = (_a = attributes["locale"]) === null || _a === void 0 ? void 0 : _a.toString();
            if (locale)
                getI18n().changeLanguage(locale, (error) => {
                    if (error) {
                        console.warn("Error(s) loading locale", locale, error);
                    }
                });
            context.keycloak.updateToken();
            addAlert(t("accountUpdatedMessage"));
        }
        catch (error) {
            addAlert(t("accountUpdatedError"), AlertVariant.danger);
            setUserProfileServerError({ responseData: { errors: error } }, (name, error) => setError(name, error), ((key, param) => t(key, param)));
        }
    };
    if (!userProfileMetadata) {
        return _jsx(Spinner, {});
    }
    const allFieldsReadOnly = () => {
        var _a;
        return (_a = userProfileMetadata === null || userProfileMetadata === void 0 ? void 0 : userProfileMetadata.attributes) === null || _a === void 0 ? void 0 : _a.map((a) => a.readOnly).reduce((p, c) => p && c, true);
    };
    const { updateEmailFeatureEnabled, updateEmailActionEnabled, isRegistrationEmailAsUsername, isEditUserNameAllowed, } = context.environment.features;
    return (_jsx(Page, { title: t("personalInfo"), description: t("personalInfoDescription"), children: _jsxs(Form, { isHorizontal: true, onSubmit: handleSubmit(onSubmit), children: [_jsx(UserProfileFields, { form: form, userProfileMetadata: userProfileMetadata, supportedLocales: supportedLocales, currentLocale: context.environment.locale, t: ((key, params) => t(key, params)), renderer: (attribute) => attribute.name === "email" &&
                        updateEmailFeatureEnabled &&
                        updateEmailActionEnabled &&
                        (!isRegistrationEmailAsUsername || isEditUserNameAllowed) ? (_jsx(Button, { id: "update-email-btn", variant: "link", onClick: () => context.keycloak.login({ action: "UPDATE_EMAIL" }), icon: _jsx(ExternalLinkSquareAltIcon, {}), iconPosition: "right", children: t("updateEmail") })) : undefined }), !allFieldsReadOnly() && (_jsxs(ActionGroup, { children: [_jsx(Button, { "data-testid": "save", type: "submit", id: "save-btn", variant: "primary", children: t("save") }), _jsx(Button, { "data-testid": "cancel", id: "cancel-btn", variant: "link", onClick: () => reset(), children: t("cancel") })] })), context.environment.features.deleteAccountAllowed && (_jsx(ExpandableSection, { "data-testid": "delete-account", toggleText: t("deleteAccount"), children: _jsx(Alert, { isInline: true, title: t("deleteAccount"), variant: "danger", actionLinks: _jsx(Button, { id: "delete-account-btn", variant: "danger", onClick: () => context.keycloak.login({
                                action: "delete_account",
                            }), className: "delete-button", children: t("delete") }), children: t("deleteAccountWarning") }) }))] }) }));
};
export default PersonalInfo;
//# sourceMappingURL=PersonalInfo.js.map