keycloakify/login/pages/LoginConfigTotp.js

Framework to create custom Keycloak UIs

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { getKcClsx } from "../../login/lib/kcClsx";
import { kcSanitize } from "../../lib/kcSanitize";
export default function LoginConfigTotp(props) {
    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
    const { kcClsx } = getKcClsx({
        doUseDefaultCss,
        classes
    });
    const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
    const { msg, msgStr, advancedMsg } = i18n;
    return (_jsx(Template, Object.assign({ kcContext: kcContext, i18n: i18n, doUseDefaultCss: doUseDefaultCss, classes: classes, headerNode: msg("loginTotpTitle"), displayMessage: !messagesPerField.existsError("totp", "userLabel") }, { children: _jsxs(_Fragment, { children: [_jsxs("ol", Object.assign({ id: "kc-totp-settings" }, { children: [_jsxs("li", { children: [_jsx("p", { children: msg("loginTotpStep1") }), _jsx("ul", Object.assign({ id: "kc-totp-supported-apps" }, { children: totp.supportedApplications.map(app => (_jsx("li", { children: advancedMsg(app) }, app))) }))] }), mode == "manual" ? (_jsxs(_Fragment, { children: [_jsxs("li", { children: [_jsx("p", { children: msg("loginTotpManualStep2") }), _jsx("p", { children: _jsx("span", Object.assign({ id: "kc-totp-secret-key" }, { children: totp.totpSecretEncoded })) }), _jsx("p", { children: _jsx("a", Object.assign({ href: totp.qrUrl, id: "mode-barcode" }, { children: msg("loginTotpScanBarcode") })) })] }), _jsxs("li", { children: [_jsx("p", { children: msg("loginTotpManualStep3") }), _jsxs("ul", { children: [_jsxs("li", Object.assign({ id: "kc-totp-type" }, { children: [msg("loginTotpType"), ": ", msg(`loginTotp.${totp.policy.type}`)] })), _jsxs("li", Object.assign({ id: "kc-totp-algorithm" }, { children: [msg("loginTotpAlgorithm"), ": ", totp.policy.getAlgorithmKey()] })), _jsxs("li", Object.assign({ id: "kc-totp-digits" }, { children: [msg("loginTotpDigits"), ": ", totp.policy.digits] })), totp.policy.type === "totp" ? (_jsxs("li", Object.assign({ id: "kc-totp-period" }, { children: [msg("loginTotpInterval"), ": ", totp.policy.period] }))) : (_jsxs("li", Object.assign({ id: "kc-totp-counter" }, { children: [msg("loginTotpCounter"), ": ", totp.policy.initialCounter] })))] })] })] })) : (_jsxs("li", { children: [_jsx("p", { children: msg("loginTotpStep2") }), _jsx("img", { id: "kc-totp-secret-qr-code", src: `data:image/png;base64, ${totp.totpSecretQrCode}`, alt: "Figure: Barcode" }), _jsx("br", {}), _jsx("p", { children: _jsx("a", Object.assign({ href: totp.manualUrl, id: "mode-manual" }, { children: msg("loginTotpUnableToScan") })) })] })), _jsxs("li", { children: [_jsx("p", { children: msg("loginTotpStep3") }), _jsx("p", { children: msg("loginTotpStep3DeviceName") })] })] })), _jsxs("form", Object.assign({ action: url.loginAction, className: kcClsx("kcFormClass"), id: "kc-totp-settings-form", method: "post" }, { children: [_jsxs("div", Object.assign({ className: kcClsx("kcFormGroupClass") }, { children: [_jsxs("div", Object.assign({ className: kcClsx("kcInputWrapperClass") }, { children: [_jsx("label", Object.assign({ htmlFor: "totp", className: kcClsx("kcLabelClass") }, { children: msg("authenticatorCode") })), " ", _jsx("span", Object.assign({ className: "required" }, { children: "*" }))] })), _jsxs("div", Object.assign({ className: kcClsx("kcInputWrapperClass") }, { children: [_jsx("input", { type: "text", id: "totp", name: "totp", autoComplete: "off", className: kcClsx("kcInputClass"), "aria-invalid": messagesPerField.existsError("totp") }), messagesPerField.existsError("totp") && (_jsx("span", { id: "input-error-otp-code", className: kcClsx("kcInputErrorMessageClass"), "aria-live": "polite", dangerouslySetInnerHTML: {
                                                __html: kcSanitize(messagesPerField.get("totp"))
                                            } }))] })), _jsx("input", { type: "hidden", id: "totpSecret", name: "totpSecret", value: totp.totpSecret }), mode && _jsx("input", { type: "hidden", id: "mode", value: mode })] })), _jsxs("div", Object.assign({ className: kcClsx("kcFormGroupClass") }, { children: [_jsxs("div", Object.assign({ className: kcClsx("kcInputWrapperClass") }, { children: [_jsx("label", Object.assign({ htmlFor: "userLabel", className: kcClsx("kcLabelClass") }, { children: msg("loginTotpDeviceName") })), " ", totp.otpCredentials.length >= 1 && _jsx("span", Object.assign({ className: "required" }, { children: "*" }))] })), _jsxs("div", Object.assign({ className: kcClsx("kcInputWrapperClass") }, { children: [_jsx("input", { type: "text", id: "userLabel", name: "userLabel", autoComplete: "off", className: kcClsx("kcInputClass"), "aria-invalid": messagesPerField.existsError("userLabel") }), messagesPerField.existsError("userLabel") && (_jsx("span", { id: "input-error-otp-label", className: kcClsx("kcInputErrorMessageClass"), "aria-live": "polite", dangerouslySetInnerHTML: {
                                                __html: kcSanitize(messagesPerField.get("userLabel"))
                                            } }))] }))] })), _jsx("div", Object.assign({ className: kcClsx("kcFormGroupClass") }, { children: _jsx(LogoutOtherSessions, { kcClsx: kcClsx, i18n: i18n }) })), isAppInitiatedAction ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "submit", className: kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass"), id: "saveTOTPBtn", value: msgStr("doSubmit") }), _jsx("button", Object.assign({ type: "submit", className: kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass", "kcButtonLargeClass"), id: "cancelTOTPBtn", name: "cancel-aia", value: "true" }, { children: msg("doCancel") }))] })) : (_jsx("input", { type: "submit", className: kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass"), id: "saveTOTPBtn", value: msgStr("doSubmit") }))] }))] }) })));
}
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=LoginConfigTotp.js.map