keycloakify
Version:
Framework to create custom Keycloak UIs
25 lines • 5.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { clsx } from "../../tools/clsx";
import { getKcClsx } from "../../login/lib/kcClsx";
import { useScript } from "../../login/pages/LoginRecoveryAuthnCodeConfig.useScript";
export default function LoginRecoveryAuthnCodeConfig(props) {
const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
const { kcClsx } = getKcClsx({
doUseDefaultCss,
classes
});
const { recoveryAuthnCodesConfigBean, isAppInitiatedAction } = kcContext;
const { msg, msgStr } = i18n;
const olRecoveryCodesListId = "kc-recovery-codes-list";
useScript({ olRecoveryCodesListId, i18n });
return (_jsxs(Template, Object.assign({ kcContext: kcContext, i18n: i18n, doUseDefaultCss: doUseDefaultCss, classes: classes, headerNode: msg("recovery-code-config-header") }, { children: [_jsxs("div", Object.assign({ className: clsx("pf-c-alert", "pf-m-warning", "pf-m-inline", kcClsx("kcRecoveryCodesWarning")), "aria-label": "Warning alert" }, { children: [_jsx("div", Object.assign({ className: "pf-c-alert__icon" }, { children: _jsx("i", { className: "pficon-warning-triangle-o", "aria-hidden": "true" }) })), _jsxs("h4", Object.assign({ className: "pf-c-alert__title" }, { children: [_jsx("span", Object.assign({ className: "pf-screen-reader" }, { children: "Warning alert:" })), msg("recovery-code-config-warning-title")] })), _jsx("div", Object.assign({ className: "pf-c-alert__description" }, { children: _jsx("p", { children: msg("recovery-code-config-warning-message") }) }))] })), _jsx("ol", Object.assign({ id: olRecoveryCodesListId, className: kcClsx("kcRecoveryCodesList") }, { children: recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList.map((code, index) => (_jsxs("li", { children: [_jsxs("span", { children: [index + 1, ":"] }), " ", code.slice(0, 4), "-", code.slice(4, 8), "-", code.slice(8)] }, index))) })), _jsxs("div", Object.assign({ className: kcClsx("kcRecoveryCodesActions") }, { children: [_jsxs("button", Object.assign({ id: "printRecoveryCodes", className: clsx("pf-c-button", "pf-m-link"), type: "button" }, { children: [_jsx("i", { className: "pficon-print", "aria-hidden": "true" }), " ", msg("recovery-codes-print")] })), _jsxs("button", Object.assign({ id: "downloadRecoveryCodes", className: clsx("pf-c-button", "pf-m-link"), type: "button" }, { children: [_jsx("i", { className: "pficon-save", "aria-hidden": "true" }), " ", msg("recovery-codes-download")] })), _jsxs("button", Object.assign({ id: "copyRecoveryCodes", className: clsx("pf-c-button", "pf-m-link"), type: "button" }, { children: [_jsx("i", { className: "pficon-blueprint", "aria-hidden": "true" }), " ", msg("recovery-codes-copy")] }))] })), _jsxs("div", Object.assign({ className: kcClsx("kcFormOptionsClass") }, { children: [_jsx("input", { className: kcClsx("kcCheckInputClass"), type: "checkbox", id: "kcRecoveryCodesConfirmationCheck", name: "kcRecoveryCodesConfirmationCheck", onChange: event => {
//@ts-expect-error: This is inherited from the original code
document.getElementById("saveRecoveryAuthnCodesBtn").disabled = !event.target.checked;
} }), _jsx("label", Object.assign({ htmlFor: "kcRecoveryCodesConfirmationCheck" }, { children: msg("recovery-codes-confirmation-message") }))] })), _jsxs("form", Object.assign({ action: kcContext.url.loginAction, className: kcClsx("kcFormGroupClass"), id: "kc-recovery-codes-settings-form", method: "post" }, { children: [_jsx("input", { type: "hidden", name: "generatedRecoveryAuthnCodes", value: recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString }), _jsx("input", { type: "hidden", name: "generatedAt", value: recoveryAuthnCodesConfigBean.generatedAt }), _jsx("input", { type: "hidden", id: "userLabel", name: "userLabel", value: msgStr("recovery-codes-label-default") }), _jsx(LogoutOtherSessions, { kcClsx: kcClsx, i18n: i18n }), isAppInitiatedAction ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "submit", className: kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass"), id: "saveRecoveryAuthnCodesBtn", value: msgStr("recovery-codes-action-complete"), disabled: true }), _jsx("button", Object.assign({ type: "submit", className: kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass"), id: "cancelRecoveryAuthnCodesBtn", name: "cancel-aia", value: "true" }, { children: msg("recovery-codes-action-cancel") }))] })) : (_jsx("input", { type: "submit", className: kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass"), id: "saveRecoveryAuthnCodesBtn", value: msgStr("recovery-codes-action-complete"), disabled: true }))] }))] })));
}
function LogoutOtherSessions(props) {
const { kcClsx, i18n } = props;
const { msg } = i18n;
return (_jsx("div", Object.assign({ id: "kc-form-options", className: kcClsx("kcFormOptionsClass") }, { children: _jsx("div", Object.assign({ className: kcClsx("kcFormOptionsWrapperClass") }, { children: _jsx("div", Object.assign({ className: "checkbox" }, { children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", id: "logout-sessions", name: "logout-sessions", value: "on", defaultChecked: true }), msg("logoutOtherSessions")] }) })) })) })));
}
//# sourceMappingURL=LoginRecoveryAuthnCodeConfig.js.map