@edflex-tech/keycloakify/lib/components/LoginConfigTotp.js

Keycloak theme generator for Reacts app

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LoginConfigTotp = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var Template_1 = require("./Template");
var i18n_1 = require("../i18n");
var tss_react_1 = require("tss-react");
exports.LoginConfigTotp = (0, react_1.memo)(function (_a) {
    var _b;
    var kcContext = _a.kcContext, props = __rest(_a, ["kcContext"]);
    var url = kcContext.url, isAppInitiatedAction = kcContext.isAppInitiatedAction, totp = kcContext.totp, mode = kcContext.mode, messagesPerField = kcContext.messagesPerField;
    var cx = (0, tss_react_1.useCssAndCx)().cx;
    var _c = (0, i18n_1.getMsg)(kcContext), msg = _c.msg, msgStr = _c.msgStr;
    var algToKeyUriAlg = {
        HmacSHA1: "SHA1",
        HmacSHA256: "SHA256",
        HmacSHA512: "SHA512",
    };
    return ((0, jsx_runtime_1.jsx)(Template_1.Template, __assign({}, __assign({ kcContext: kcContext }, props), { doFetchDefaultThemeResources: true, headerNode: msg("loginTotpTitle"), formNode: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("ol", __assign({ id: "kc-totp-settings" }, { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("p", { children: msg("loginTotpStep1") }), (0, jsx_runtime_1.jsx)("ul", __assign({ id: "kc-totp-supported-apps" }, { children: totp.policy.supportedApplications.map(function (app) { return ((0, jsx_runtime_1.jsx)("li", { children: app })); }) }))] }), mode && mode == "manual" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("p", { children: msg("loginTotpManualStep2") }), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("span", __assign({ id: "kc-totp-secret-key" }, { children: totp.totpSecretEncoded })) }), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("a", __assign({ href: totp.qrUrl, id: "mode-barcode" }, { children: msg("loginTotpScanBarcode") })) })] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("p", { children: msg("loginTotpManualStep3") }), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", __assign({ id: "kc-totp-type" }, { children: [msg("loginTotpType"), ": ", msg("loginTotp.".concat(totp.policy.type))] })), (0, jsx_runtime_1.jsxs)("li", __assign({ id: "kc-totp-algorithm" }, { children: [msg("loginTotpAlgorithm"), ": ", (_b = algToKeyUriAlg === null || algToKeyUriAlg === void 0 ? void 0 : algToKeyUriAlg[totp.policy.algorithm]) !== null && _b !== void 0 ? _b : totp.policy.algorithm] })), (0, jsx_runtime_1.jsxs)("li", __assign({ id: "kc-totp-digits" }, { children: [msg("loginTotpDigits"), ": ", totp.policy.digits] })), totp.policy.type === "totp" ? ((0, jsx_runtime_1.jsxs)("li", __assign({ id: "kc-totp-period" }, { children: [msg("loginTotpInterval"), ": ", totp.policy.period] }))) : ((0, jsx_runtime_1.jsxs)("li", __assign({ id: "kc-totp-counter" }, { children: [msg("loginTotpCounter"), ": ", totp.policy.initialCounter] })))] }) })] })] })) : ((0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("p", { children: msg("loginTotpStep2") }), (0, jsx_runtime_1.jsx)("img", { id: "kc-totp-secret-qr-code", src: "data:image/png;base64, ".concat(totp.totpSecretQrCode), alt: "Figure: Barcode" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("a", __assign({ href: totp.manualUrl, id: "mode-manual" }, { children: msg("loginTotpUnableToScan") })) })] })), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("p", { children: msg("loginTotpStep3") }), (0, jsx_runtime_1.jsx)("p", { children: msg("loginTotpStep3DeviceName") })] })] })), (0, jsx_runtime_1.jsxs)("form", __assign({ action: url.loginAction, className: cx(props.kcFormClass), id: "kc-totp-settings-form", method: "post" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(props.kcFormGroupClass) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(props.kcInputWrapperClass) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "totp", className: cx(props.kcLabelClass) }, { children: msg("authenticatorCode") })), " ", (0, jsx_runtime_1.jsx)("span", __assign({ className: "required" }, { children: "*" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(props.kcInputWrapperClass) }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", id: "totp", name: "totp", autoComplete: "off", className: cx(props.kcInputClass), "aria-invalid": messagesPerField.existsError("totp") }), messagesPerField.existsError("totp") && ((0, jsx_runtime_1.jsx)("span", __assign({ id: "input-error-otp-code", className: cx(props.kcInputErrorMessageClass), "aria-live": "polite" }, { children: messagesPerField.get("totp") })))] })), (0, jsx_runtime_1.jsx)("input", { type: "hidden", id: "totpSecret", name: "totpSecret", value: totp.totpSecret }), mode && (0, jsx_runtime_1.jsx)("input", { type: "hidden", id: "mode", value: mode })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(props.kcFormGroupClass) }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(props.kcInputWrapperClass) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "userLabel", className: cx(props.kcLabelClass) }, { children: msg("loginTotpDeviceName") })), " ", totp.otpCredentials.length >= 1 && (0, jsx_runtime_1.jsx)("span", __assign({ className: "required" }, { children: "*" }))] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(props.kcInputWrapperClass) }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", id: "userLabel", name: "userLabel", autoComplete: "off", className: cx(props.kcInputClass), "aria-invalid": messagesPerField.existsError("userLabel") }), messagesPerField.existsError("userLabel") && ((0, jsx_runtime_1.jsx)("span", __assign({ id: "input-error-otp-label", className: cx(props.kcInputErrorMessageClass), "aria-live": "polite" }, { children: messagesPerField.get("userLabel") })))] }))] })), isAppInitiatedAction ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "submit", className: cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass), id: "saveTOTPBtn", value: msgStr("doSubmit") }), (0, jsx_runtime_1.jsxs)("button", __assign({ type: "submit", className: cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass, props.kcButtonLargeClass), id: "cancelTOTPBtn", name: "cancel-aia", value: "true" }, { children: ["$", msg("doCancel")] }))] })) : ((0, jsx_runtime_1.jsx)("input", { type: "submit", className: cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass), id: "saveTOTPBtn", value: msgStr("doSubmit") }))] }))] }) })));
});
//# sourceMappingURL=LoginConfigTotp.js.map