@keycloakify/keycloak-account-ui/oid4vci/Oid4Vci.js

Repackaged Keycloak Account UI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEnvironment } from "../ui-shared";
import { ActionList, ActionListItem, List, ListItem, MenuToggle, PageSection, PageSectionVariants, Select, SelectList, SelectOption, } from "@patternfly/react-core";
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { getIssuer, requestVCOffer } from "../api";
import { Page } from "../components/page/Page";
import { usePromise } from "../utils/usePromise";
export const Oid4Vci = () => {
    const context = useEnvironment();
    const { t } = useTranslation();
    const initialSelected = t("verifiableCredentialsSelectionDefault");
    const [selected, setSelected] = useState(initialSelected);
    const [qrCode, setQrCode] = useState("");
    const [isOpen, setIsOpen] = useState(false);
    const [offerQRVisible, setOfferQRVisible] = useState(false);
    const [credentialsIssuer, setCredentialsIssuer] = useState();
    usePromise(() => getIssuer(context), setCredentialsIssuer);
    const selectOptions = useMemo(() => {
        if (typeof credentialsIssuer !== "undefined") {
            return credentialsIssuer.credential_configurations_supported;
        }
        return {};
    }, [credentialsIssuer]);
    const dropdownItems = useMemo(() => {
        if (typeof selectOptions !== "undefined") {
            return Array.from(Object.keys(selectOptions));
        }
        return [];
    }, [selectOptions]);
    useEffect(() => {
        if (initialSelected !== selected && credentialsIssuer !== undefined) {
            requestVCOffer(context, selectOptions[selected], credentialsIssuer).then((blob) => {
                const reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onloadend = function () {
                    const result = reader.result;
                    if (typeof result === "string") {
                        setQrCode(result);
                        setOfferQRVisible(true);
                        setIsOpen(false);
                    }
                };
            });
        }
    }, [selected]);
    const onToggleClick = () => {
        setIsOpen(!isOpen);
    };
    const toggle = (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: onToggleClick, isExpanded: isOpen, "data-testid": "menu-toggle", children: selected }));
    return (_jsx(Page, { title: t("verifiableCredentialsTitle"), description: t("verifiableCredentialsDescription"), children: _jsx(PageSection, { isFilled: true, variant: PageSectionVariants.light, children: _jsxs(List, { isPlain: true, children: [_jsx(ListItem, { children: _jsx(Select, { "data-testid": "credential-select", onOpenChange: (isOpen) => setIsOpen(isOpen), onSelect: (_event, val) => setSelected(val), isOpen: isOpen, selected: selected, toggle: toggle, shouldFocusToggleOnSelect: true, children: _jsx(SelectList, { children: dropdownItems.map((option) => (_jsx(SelectOption, { value: option, "data-testid": option, children: option }, option))) }) }) }), _jsx(ListItem, { children: _jsx(ActionList, { children: offerQRVisible && (_jsx(ActionListItem, { children: _jsx("img", { width: "500", height: "500", src: qrCode, "data-testid": "qr-code" }) })) }) })] }) }) }));
};
export default Oid4Vci;
//# sourceMappingURL=Oid4Vci.js.map