Source: component/security.js

/*! meta-client/modules/component/login */
/*jslint
    browser, long
*/
/*global
*/
import Logger from "js-logger";
import ko from "knockout";
import viewmodel from "meta-client/modules/viewmodel";
import webauthn from "meta-client/modules/webauthn";
import model from "meta-core/modules/model";
import protocol from "meta-core/modules/protocol";
import _ from "underscore";
import i18next from "util-web/modules/i18next";
import nav from "util-web/modules/nav";
import ui from "util-web/modules/ui";
import template from "./security.html";

const LOG = Logger.get("meta-client/component/security");

/**
 * security component.
 *
 * @module meta-client/modules/component/security
 */
export default Object.freeze({
    template,
    viewModel: {
        createViewModel: function ({
            client,
            navId,
            otpRequired = false,
            otpTypes = [],
            passwordRegex = null,
            totpIssuer = null,
            webAuthnEnable = false
        }) {
            const vm = {};

            if (otpRequired && _.isEmpty(otpTypes)) {
                throw new Error("otpTypes required");
            }
            if (otpTypes.includes(model.metaUserOtpType.TOTP) && _.isEmpty(totpIssuer)) {
                throw new Error("totpIssuer required");
            }

            vm.authRef = protocol.REST_PATH + "/" + protocol.getWebhookAuthPath("exampleAuthRef");
            vm.metaUserOtpType = model.metaUserOtpType;
            vm.otpTypeNone = (
                otpRequired
                    ? undefined
                    : i18next.pureComputedT("no_otp")
            );
            vm.otpTypes = otpTypes;
            vm.otpTypeOptions = Object.keys(model.metaUserOtpType).map(function (key) {
                if (otpTypes.includes(key) === false) {
                    return;
                }
                return {name: i18next.computedT("otp_type_" + key), type: key};
            }).filter(_.isObject);

            vm.user = client.user;
            vm.unmaskPasswords = ko.observable(false);
            vm.webAuthnEnable = webAuthnEnable;
            vm.togglePasswordMasking = () => vm.unmaskPasswords(!vm.unmaskPasswords());

            vm.editedUser = ko.observable();
            vm.newPassword = ko.observable();
            vm.newPasswordConfirm = ko.observable();
            vm.isNewPasswordValid = viewmodel.newPasswordValidator({
                passwordConfirm: vm.newPasswordConfirm,
                passwordNew: vm.newPassword,
                regexString: passwordRegex,
                unmask: vm.unmaskPasswords
            });
            vm.newOtpType = ko.observable();
            vm.newOtpEmail = ko.observable();
            vm.newOtpPhone = ko.observable();
            vm.hasTotp = ko.observable(false);
            vm.doGenerateTotp = ko.observable(false);
            vm.newWebhook = ko.observable();
            vm.isNewOtpValid = ko.pureComputed(function () {
                const type = vm.newOtpType();
                if (type) {
                    switch (type) {
                    case model.metaUserOtpType.EMAIL:
                        return _.isEmpty(vm.newOtpEmail()) === false;
                    case model.metaUserOtpType.PHONE:
                        return _.isEmpty(vm.newOtpPhone()) === false;
                    case model.metaUserOtpType.WEBHOOK:
                        return _.isEmpty(vm.newWebhook()) === false;
                    }
                }
                return true;
            });
            vm.webAuthnCredentials = ko.observableArray();
            vm.newWebAuthnDisplayName = ko.observable();
            vm.isSavingUser = ko.observable(false);
            vm.isRegisteringWebAuthn = ko.observable(false);
            vm.hasSavedUser = ko.observable(false);
            vm.saveUserFailed = ko.observable(false);
            vm.saveUserVerifyFailed = ko.observable(false);

            vm.cancelEditUser = function () {
                ui.resetForm(document.getElementById("securitySaveUser"));
                vm.editedUser(undefined);
                vm.newPassword(undefined);
                vm.newPasswordConfirm(undefined);
                vm.newOtpType(undefined);
                vm.newOtpEmail(undefined);
                vm.newOtpPhone(undefined);
                vm.hasTotp(false);
                vm.doGenerateTotp(false);
                vm.newWebhook(undefined);
                vm.webAuthnCredentials.removeAll();
                vm.newWebAuthnDisplayName(undefined);
            };

            vm.loadUser = function () {
                LOG.debug("loadUser");
                vm.cancelEditUser();
                return client.userSearch(protocol.userSearchRequest({
                    limit: 1,
                    query: client.user()
                })).then(function (reply) {
                    const user = _.head(reply.users);
                    if (Boolean(user) === false) {
                        return vm.cancelEditUser();
                    }
                    vm.editedUser(user);
                    if (user.otp) {
                        vm.newOtpType(user.otp.type);
                        vm.newOtpEmail(user.otp.email);
                        vm.newOtpPhone(user.otp.phone);
                        vm.hasTotp(model.metaUserOtpType.TOTP === user.otp.type && Boolean(user.otp.totp));
                        vm.newWebhook(user.otp.webhook);
                    }
                    if (user.webAuthn) {
                        vm.webAuthnCredentials(user.webAuthn.credentials.map(function (credential) {
                            return Object.assign({
                                remove: ko.observable(false),
                                sanitizedDisplayName: credential.displayName.replace(/\s/g, "")
                            }, credential);
                        }));
                    }
                });
            };

            vm.onVerify = ko.observable();
            vm.onVerifyDone = ko.observable();

            vm.getSanitizedWebAuthn = function (webAuthn = null) {
                if (_.isObject(webAuthn)) {
                    return Object.assign(
                        {},
                        webAuthn,
                        {
                            credentials: vm.webAuthnCredentials().filter((credential) => credential.remove() === false).map(function (credential) {
                                delete credential.remove;
                                delete credential.sanitizedDisplayName;
                                return credential;
                            })
                        }
                    );
                }
                return webAuthn;
            };

            vm.saveUser = function (form) {
                if (ui.validateForm(form) === false) {
                    return;
                }
                const user = vm.editedUser();
                const otpType = vm.newOtpType();
                const newPassword = vm.newPassword();
                const updateUser = model.metaUser(Object.assign({}, user, {
                    otp: (
                        otpType
                            ? model.metaUserOtp({
                                email: vm.newOtpEmail(),
                                phone: vm.newOtpPhone(),
                                totp: (
                                    vm.doGenerateTotp()
                                        ? null
                                        : _.get(user, ["otp", "totp"])
                                ),
                                type: otpType,
                                webhook: vm.newWebhook()
                            })
                            : null
                    ),
                    password: (
                        _.isEmpty(newPassword)
                            ? user.password
                            : newPassword
                    ),
                    webAuthn: vm.getSanitizedWebAuthn(user.webAuthn)
                }));
                LOG.debug("saveUser", updateUser);
                const webAuthnRequest = (
                    _.isEmpty(vm.newWebAuthnDisplayName()) === false
                        ? protocol.userWriteRequestWebAuthnRequest({displayName: vm.newWebAuthnDisplayName()})
                        : null
                );
                vm.isSavingUser(true);
                vm.saveUserFailed(false);
                return client.userWrite(protocol.userWriteRequest({
                    action: protocol.WRITE_ACTION.UPDATE,
                    locale: i18next.currentLocale(),
                    user: updateUser,
                    webAuthnRequest
                })).then(function (reply) {
                    if (reply.verifyOtp) {
                        vm.saveUserVerifyFailed(false);
                        return new Promise(function (resolve, reject) {
                            const verifySub = vm.onVerifyDone.subscribe(function (result) {
                                verifySub.dispose();
                                const otp = _.get(result, "otp");
                                LOG.debug(`saveUser onVerifyDone, otp=${otp}`);
                                if (otp) {
                                    resolve(otp);
                                } else {
                                    reject();
                                }
                            });
                            vm.onVerify({
                                totpIssuer,
                                totpKey: reply.totpKey,
                                user: reply.user.name
                            });
                        }).then(function (otp) {
                            return client.userWrite(protocol.userWriteRequest({ // OTP second request flow
                                action: protocol.WRITE_ACTION.UPDATE,
                                locale: i18next.currentLocale(),
                                otp,
                                user: updateUser
                            }));
                        });
                    }
                    if (reply.webAuthnRequest) {
                        vm.isRegisteringWebAuthn(true);
                        return webauthn.createCredential(reply.webAuthnRequest.credentialOptions).then(function (response) {
                            return client.userWrite(protocol.userWriteRequest({
                                action: protocol.WRITE_ACTION.UPDATE,
                                locale: i18next.currentLocale(),
                                user: updateUser,
                                webAuthnReply: protocol.userWriteRequestWebAuthnReply({credential: response})
                            }));
                        });
                    }
                }).then(function () {
                    vm.hasSavedUser(true);
                    ui.resetForm(form);
                    client.otpType(updateUser.otp?.type);
                    vm.cancelEditUser();
                    return vm.loadUser();
                }).catch(function (exc) {
                    LOG.warn("saveUser failed", exc);
                    if (protocol.ERROR_TYPE.AUTH === _.get(exc, "type")) {
                        vm.saveUserVerifyFailed(true);
                    } else {
                        vm.saveUserFailed(true);
                    }
                }).then(function () {
                    vm.isRegisteringWebAuthn(false);
                    vm.isSavingUser(false);
                });
            };

            nav.register({
                id: navId,
                onUpdate: vm.loadUser
            });

            return Object.freeze(vm);
        }
    }
});