keycloakify/account/pages/Totp.js

Framework to create custom Keycloak UIs

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { clsx } from "../../tools/clsx";
import { getKcClsx } from "../../account/lib/kcClsx";
import { kcSanitize } from "../../lib/kcSanitize";
export default function Totp(props) {
    var _a;
    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
    const { kcClsx } = getKcClsx({
        doUseDefaultCss,
        classes
    });
    const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
    const { msg, msgStr, advancedMsg } = i18n;
    return (_jsx(Template, Object.assign({}, { kcContext, i18n, doUseDefaultCss, classes }, { active: "totp" }, { children: _jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: "row" }, { children: [_jsx("div", Object.assign({ className: "col-md-10" }, { children: _jsx("h2", { children: msg("authenticatorTitle") }) })), totp.otpCredentials.length === 0 && (_jsxs("div", Object.assign({ className: "subtitle col-md-2" }, { children: [_jsx("span", Object.assign({ className: "required" }, { children: "*" })), msg("requiredFields")] })))] })), totp.enabled && (_jsxs("table", Object.assign({ className: "table table-bordered table-striped" }, { children: [_jsx("thead", { children: totp.otpCredentials.length > 1 ? (_jsx("tr", { children: _jsx("th", Object.assign({ colSpan: 4 }, { children: msg("configureAuthenticators") })) })) : (_jsx("tr", { children: _jsx("th", Object.assign({ colSpan: 3 }, { children: msg("configureAuthenticators") })) })) }), _jsx("tbody", { children: totp.otpCredentials.map((credential, index) => (_jsxs("tr", { children: [_jsx("td", Object.assign({ className: "provider" }, { children: msg("mobile") })), totp.otpCredentials.length > 1 && _jsx("td", Object.assign({ className: "provider" }, { children: credential.id })), _jsx("td", Object.assign({ className: "provider" }, { children: credential.userLabel || "" })), _jsx("td", Object.assign({ className: "action" }, { children: _jsxs("form", Object.assign({ action: url.totpUrl, method: "post", className: "form-inline" }, { children: [_jsx("input", { type: "hidden", id: "stateChecker", name: "stateChecker", value: stateChecker }), _jsx("input", { type: "hidden", id: "submitAction", name: "submitAction", value: "Delete" }), _jsx("input", { type: "hidden", id: "credentialId", name: "credentialId", value: credential.id }), _jsx("button", Object.assign({ id: `remove-mobile-${index}`, className: "btn btn-default" }, { children: _jsx("i", { className: "pficon pficon-delete" }) }))] })) }))] }, index))) })] }))), !totp.enabled && (_jsxs("div", { children: [_jsx("hr", {}), _jsxs("ol", Object.assign({ id: "kc-totp-settings" }, { children: [_jsxs("li", { children: [_jsx("p", { children: msg("totpStep1") }), _jsx("ul", Object.assign({ id: "kc-totp-supported-apps" }, { children: (_a = totp.supportedApplications) === null || _a === void 0 ? void 0 : _a.map(app => _jsx("li", { children: advancedMsg(app) }, app)) }))] }), mode && mode == "manual" ? (_jsxs(_Fragment, { children: [_jsxs("li", { children: [_jsx("p", { children: msg("totpManualStep2") }), _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("totpScanBarcode") })) })] }), _jsxs("li", { children: [_jsx("p", { children: msg("totpManualStep3") }), _jsxs("ul", { children: [_jsxs("li", Object.assign({ id: "kc-totp-type" }, { children: [msg("totpType"), ": ", msg(`totp.${totp.policy.type}`)] })), _jsxs("li", Object.assign({ id: "kc-totp-algorithm" }, { children: [msg("totpAlgorithm"), ": ", totp.policy.getAlgorithmKey()] })), _jsxs("li", Object.assign({ id: "kc-totp-digits" }, { children: [msg("totpDigits"), ": ", totp.policy.digits] })), totp.policy.type === "totp" ? (_jsxs("li", Object.assign({ id: "kc-totp-period" }, { children: [msg("totpInterval"), ": ", totp.policy.period] }))) : (_jsxs("li", Object.assign({ id: "kc-totp-counter" }, { children: [msg("totpCounter"), ": ", totp.policy.initialCounter] })))] })] })] })) : (_jsxs("li", { children: [_jsx("p", { children: msg("totpStep2") }), _jsx("p", { children: _jsx("img", { id: "kc-totp-secret-qr-code", src: `data:image/png;base64, ${totp.totpSecretQrCode}`, alt: "Figure: Barcode" }) }), _jsx("p", { children: _jsx("a", Object.assign({ href: totp.manualUrl, id: "mode-manual" }, { children: msg("totpUnableToScan") })) })] })), _jsxs("li", { children: [_jsx("p", { children: msg("totpStep3") }), _jsx("p", { children: msg("totpStep3DeviceName") })] })] })), _jsx("hr", {}), _jsxs("form", Object.assign({ action: url.totpUrl, className: kcClsx("kcFormClass"), id: "kc-totp-settings-form", method: "post" }, { children: [_jsx("input", { type: "hidden", id: "stateChecker", name: "stateChecker", value: stateChecker }), _jsxs("div", Object.assign({ className: kcClsx("kcFormGroupClass") }, { children: [_jsxs("div", Object.assign({ className: "col-sm-2 col-md-2" }, { children: [_jsx("label", Object.assign({ htmlFor: "totp", className: "control-label" }, { children: msg("authenticatorCode") })), _jsx("span", Object.assign({ className: "required" }, { children: "*" }))] })), _jsxs("div", Object.assign({ className: "col-sm-10 col-md-10" }, { 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: "col-sm-2 col-md-2" }, { children: [_jsx("label", Object.assign({ htmlFor: "userLabel", className: kcClsx("kcLabelClass") }, { children: msg("totpDeviceName") })), totp.otpCredentials.length >= 1 && _jsx("span", Object.assign({ className: "required" }, { children: "*" }))] })), _jsxs("div", Object.assign({ className: "col-sm-10 col-md-10" }, { 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({ id: "kc-form-buttons", className: clsx(kcClsx("kcFormGroupClass"), "text-right") }, { children: _jsxs("div", Object.assign({ className: kcClsx("kcInputWrapperClass") }, { children: [_jsx("input", { type: "submit", className: kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass"), id: "saveTOTPBtn", value: msgStr("doSave") }), _jsx("button", Object.assign({ type: "submit", className: kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass", "kcButtonLargeClass"), id: "cancelTOTPBtn", name: "submitAction", value: "Cancel" }, { children: msg("doCancel") }))] })) }))] }))] }))] }) })));
}
//# sourceMappingURL=Totp.js.map