keycloakify/login/pages/SelectOrganization.js

Framework to create custom Keycloak UIs

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from "react";
import { getKcClsx } from "../../login/lib/kcClsx";
export default function SelectOrganization(props) {
    var _a;
    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
    const { kcClsx } = getKcClsx({
        doUseDefaultCss,
        classes
    });
    const { url, user } = kcContext;
    const { msg } = i18n;
    const [isSubmitting, setIsSubmitting] = useState(false);
    const formRef = useRef(null);
    const organizationInputRef = useRef(null);
    const onOrganizationClick = (organizationAlias) => (event) => {
        event.preventDefault();
        if (!organizationInputRef.current || !formRef.current) {
            return;
        }
        organizationInputRef.current.value = organizationAlias;
        setIsSubmitting(true);
        if (typeof formRef.current.requestSubmit === "function") {
            formRef.current.requestSubmit();
            return;
        }
        formRef.current.submit();
    };
    const organizations = (_a = user.organizations) !== null && _a !== void 0 ? _a : [];
    const shouldDisplayGrid = organizations.length > 3;
    return (_jsx(Template, Object.assign({ kcContext: kcContext, i18n: i18n, doUseDefaultCss: doUseDefaultCss, classes: classes, headerNode: null }, { children: _jsxs("form", Object.assign({ ref: formRef, action: url.loginAction, className: "form-vertical", method: "post" }, { children: [_jsxs("div", Object.assign({ id: "kc-user-organizations", className: kcClsx("kcFormGroupClass") }, { children: [_jsx("h2", { children: msg("organization.select") }), _jsx("ul", Object.assign({ className: kcClsx("kcFormSocialAccountListClass", shouldDisplayGrid && "kcFormSocialAccountListGridClass") }, { children: organizations.map(({ alias, name }) => (_jsx("li", { children: _jsx("button", Object.assign({ id: `organization-${alias}`, className: kcClsx("kcFormSocialAccountListButtonClass", shouldDisplayGrid && "kcFormSocialAccountGridItem"), type: "button", onClick: onOrganizationClick(alias), disabled: isSubmitting }, { children: _jsx("span", Object.assign({ className: kcClsx("kcFormSocialAccountNameClass") }, { children: name !== null && name !== void 0 ? name : alias })) })) }, alias))) }))] })), _jsx("input", { ref: organizationInputRef, type: "hidden", name: "kc.org" })] })) })));
}
//# sourceMappingURL=SelectOrganization.js.map