cryptpad/www/install/onboardscreen.js

// SPDX-FileCopyrightText: 2024 XWiki CryptPad Team <contact@cryptpad.org> and contributors
//
// SPDX-License-Identifier: AGPL-3.0-or-later

define([
    'jquery',
    '/common/inner/sidebar-layout.js',
    '/customize/messages.js',
    '/customize/application_config.js',
    '/common/hyperscript.js',
    '/common/common-interface.js',
    '/common/common-util.js',
    '/common/common-ui-elements.js',
    '/common/pad-types.js',
    '/components/nthen/index.js',

    'css!/components/bootstrap/dist/css/bootstrap.min.css',
    'css!/components/components-font-awesome/css/font-awesome.min.css',

], function(
    $,
    Sidebar,
    Messages,
    AppConfig,
    h,
    UI,
    Util,
    UIElements,
    PadTypes,
    nThen
) {

    let pages = [];
    const gotoPage = function (Env, page) {
        if (typeof(page) !== "number" || !page) { page = 0; }
        if (page > (pages.length - 1)) { page = pages.length - 1; }

        var nextPageFunction = pages[page];
        var nextPageForm = nextPageFunction(Env);
        let frame = h('div.cp-onboarding-box', nextPageForm);
        Env.overlay.empty().append(frame);
    };
    const blocks = Sidebar.blocks('admin');

    var flushCache = (Env, cb) => {
        const { sendAdminRpc } = Env;
        sendAdminRpc('FLUSH_CACHE', {}, function (e, response) {
            if (e || response.error) {
                console.error(e || response.error);
            }
            cb();
        });
    };

    var selections = {
        title: '',
        description: '',
        logoURL: '',
        color: '',
        appsToDisable: [],
        mfa: false,
        closeRegistration: false
    };

    const saveAndRedirect = (Env) => {
        const { sendAdminDecree, sendAdminRpc } = Env;

        let hasError = false;
        let error = () => {
            hasError = true;
        };
        nThen(waitFor => {
            var name = selections.title;
            if (!name) { return; }
            sendAdminDecree('SET_INSTANCE_NAME', [name], waitFor((e, response) => {
                if (e || response.error) {
                    console.error(e || response.error);
                    return void error();
                }
            }));
        }).nThen(waitFor => {
            var description = selections.description;
            if (!description) { return; }
            sendAdminDecree('SET_INSTANCE_DESCRIPTION', [
                description
            ], waitFor((e, response) => {
                if (e || response.error) {
                    console.error(e || response.error);
                    return void error();
                }

            }));
        }).nThen(waitFor => {
            var dataURL = selections.logoURL;
            if (!dataURL) { return; }
            sendAdminRpc('UPLOAD_LOGO', {dataURL}, waitFor(function (e, response) {
                if (e || response.error) {
                    console.error(e || response.error);
                    return void error();
                }
            }));
        }).nThen(waitFor => {
            var color = selections.color;
            if (!color) { return; }
            sendAdminRpc('CHANGE_COLOR', {color}, waitFor(function (e, response) {
                if (e || response.error) {
                    console.error(e || response.error);
                    return void error();
                }
            }));
        }).nThen(waitFor => {
            var apps = selections.appsToDisable;
            if (!apps.length) { return; }
            sendAdminDecree('DISABLE_APPS', apps, waitFor(function (e, response) {
                if (e || response.error) {
                    UI.warn(Messages.error);
                    return;
                }
            }));
        }).nThen(waitFor => {
            if (!selections.mfa) { return; }
            sendAdminDecree('ENFORCE_MFA', [selections.mfa], waitFor((e, response) => {
                if (e || response.error) {
                    UI.warn(Messages.error);
                    return;
                }
            }));
        }).nThen(waitFor => {
            if (!selections.closeRegistration) { return; }
            sendAdminDecree('RESTRICT_REGISTRATION', [
                selections.closeRegistration
            ], waitFor(function (e, response) {
                if (e || response.error) {
                    UI.warn(Messages.error);
                    return;
                }
            }));
        }).nThen(() => {
            flushCache(Env, function () {
                if (hasError) {
                    UI.alert(Messages.onboarding_save_error, function () {
                        document.location.href = '/drive/';
                    });
                    return;
                }
                document.location.href = '/drive/';
            });
        });
    };

    const titleConfig = function (Env) {
        let titleInput = blocks.input({
            type: 'text',
            value:  selections.title,
            placeholder: Messages.admin_onboardingNamePlaceholder,
            'aria-labelledby': 'cp-admin-name'
        });
        let description = blocks.textarea({
            placeholder: Messages.admin_onboardingDescPlaceholder,
            'aria-labelledby': 'cp-admin-description'
        }, selections.description);
        $(description).addClass('cp-onboardscreen-desc');

        let dataURL = selections.logoURL;
        var getLogoBlock = function() {
            let inputLogo = blocks.input({
                type: 'file',
                accept: 'image/*',
                'aria-labelledby': 'cp-admin-logo'
            });

            var currentContainer = blocks.block([], 'cp-admin-customize-logo');

            var upload = blocks.button('secondary', '', Messages.onboarding_upload);

            let formLogo = blocks.form([
                currentContainer,
                blocks.block(inputLogo, 'cp-onboarding-logo-input'),
                blocks.nav([upload])
            ]);

            let $button = $(upload);

            let state = false;
            let redraw = () => {
                var current = h('img', {src: dataURL || '/api/logo?'+(+new Date())});
                $(currentContainer).empty().append(current);
                $button.removeAttr('disabled');
                state = !!dataURL;
                if (dataURL) {
                    $button.text(Messages.admin_logoRemoveButton);
                    $button.removeClass('btn-secondary').addClass('btn-danger-alt');
                } else {
                    $button.text(Messages.onboarding_upload);
                    $button.removeClass('btn-danger-alt').addClass('btn-secondary');
                }
            };
            redraw();

            let $input = $(inputLogo);
            $input.on('change', function () {
                let files = inputLogo.files;
                if (files.length !== 1) {
                    UI.warn(Messages.error);
                    return;
                }
                let reader = new FileReader();
                reader.onloadend = function () {
                    dataURL = this.result;
                    redraw(dataURL);
                };
                reader.readAsDataURL(files[0]);
            });
            Util.onClickEnter($button, function () {
                $button.attr('disabled', 'disabled');
                if (!state) {
                    return void $input.click();
                }
                dataURL = '';
                redraw();
            });

            return formLogo;
        };

        var getColorBlock = function () {

            // Number of accent color presets
            var colors = UIElements.makePalette(4, (color, $color) => {
                let rgb = $color.css('background-color');
                let hex = Util.rgbToHex(rgb);
                if (hex) {
                    selections.color = color ? hex : '';
                    selections.colorId = color;
                }
            });
            if (selections.colorId) {
                colors.setValue(selections.colorId);
            }
            var content = h('div.cp-onboardscreen-colorpick', [
                h('label', {for:'cp-install-color'}, Messages.kanban_color),
                colors
            ]);

            return content;
        };

        var button = blocks.activeButton('primary', '', Messages.continue, function () {
            selections.title = $(titleInput).val() || '';
            selections.description = $(description).val() || '';
            if (dataURL) {
                selections.logoURL = dataURL;
            }

            gotoPage(Env, 1);
        });

        var titleBlock = h('div.cp-onboardscreen-name', titleInput);
        var descriptionBlock = h('div', description);
        var logoBlock = h('div.cp-onboardscreen-logo', getLogoBlock());
        var colorBlock =  h('div.cp-onboardscreen-color', getColorBlock());

        var screenTitle = h('div.cp-onboardscreen-screentitle');
        $(screenTitle).append(('div.cp-onboardscreen-maintitle', [
            h('h1.cp-onboardscreen-title', Messages.admin_onboardingNameTitle),
            h('span', Messages.admin_onboardingNameHint)
        ]));
        var nav = blocks.nav([h('span'), button]);

        $(button).addClass('cp-onboardscreen-save');
        $(nav).addClass('cp-onboardscreen-nav');

        var textForm = h('div.cp-instance-text-form', [
            titleBlock,
            descriptionBlock,
            colorBlock,
        ]);

        var instanceForm = h('div.cp-instance-form', [logoBlock, textForm]);

        var form = blocks.form([
            screenTitle,
            instanceForm
        ], nav);

        $(form).addClass('cp-onboardscreen-form');

        return form;

    };

    const createAppsGrid = appsToDisable => {
        const grid = blocks.block([], 'cp-admin-customize-apps-grid');
        const $grid = $(grid);
        const allApps = PadTypes.appsToSelect;

        let select = function (app, $app) {
            if (appsToDisable.indexOf(app) === -1) {
                appsToDisable.push(app);
                $app.toggleClass('cp-inactive-app', true);
                $app.toggleClass('cp-active-app', false);
            } else {
                appsToDisable.splice(appsToDisable.indexOf(app), 1);
                $app.toggleClass('cp-inactive-app', false);
                $app.toggleClass('cp-active-app', true);
            }
        };

        allApps.forEach(app => {
            let name = Messages.type[app] || app;
            let icon = UI.getNewIcon(app);
            let appBlock = h('div.cp-appblock',
                {tabindex:0, role:"button"},
            [
                icon,
                h('span.cp-app-name', name),
                h('i.fa.fa-check.cp-on-enabled')
            ]);
            let $app = $(appBlock).appendTo($grid);
            if (appsToDisable.includes(app)) {
                $app.addClass('cp-inactive-app');
            } else {
                $app.addClass('cp-active-app');
            }
            $app.on('click', () => select(app, $app));
        });

        return grid;
    };

    const appConfig = function (Env) {
        const appsToDisable = selections.appsToDisable;
        const grid = createAppsGrid(appsToDisable);


        var save = blocks.activeButton('primary', '', Messages.continue, function () {
            gotoPage(Env, 2);
        });

        var prev = blocks.activeButton('secondary', '', Messages.form_backButton, function () {
            gotoPage(Env, 0);
        });

        var screenTitle = h('div.cp-onboardscreen-screentitle');
        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.admin_appsTitle), h('span', Messages.admin_appsHint)));
        $(save).addClass('cp-onboardscreen-save');
        $(prev).addClass('cp-onboardscreen-prev');
        var nav = blocks.nav([prev, save]);
        $(nav).addClass('cp-onboardscreen-nav');
        let form = blocks.form([
            screenTitle,
            grid
        ], nav);

        $(form).addClass('cp-onboardscreen-form');

        return form;
    };

    const mfaRegistrationScreen = function (Env) {
        var restrict = blocks.activeCheckbox({
            key: 'registration',
            getState: function () {
                return selections.closeRegistration;
            },
            label: 'registration',
            query: function (val, setState) {
                selections.closeRegistration = val;
                setState(val);
            },
        });

        var forceMFA = blocks.activeCheckbox({
            key: 'forcemfa',
            getState: function () {
                return selections.mfa;
            },
            label: 'forcemfa',
            query: function (val, setState) {
                selections.mfa = val;
                setState(val);
            },
        });


        let mfaOption = h('div.cp-optionblock', [
            forceMFA,
            h('span.cp-option-hint', Messages.admin_forcemfaHint)
        ]);
        let registrationOption = h('div.cp-optionblock', [
            restrict,
            h('span.cp-option-hint', Messages.admin_registrationHint)
        ]);
        const grid = blocks.block([
            mfaOption,
            registrationOption
        ], 'cp-admin-customize-options-grid');

        var save = blocks.activeButton('primary', '', Messages.settings_save, function () {
            saveAndRedirect(Env);
        });

        var prev = blocks.activeButton('secondary', '', Messages.form_backButton, function () {
            gotoPage(Env, 1);
        });

        var screenTitle = h('div.cp-onboardscreen-screentitle');
        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.admin_onboardingOptionsTitle), UI.setHTML(h('span'), Messages.admin_onboardingOptionsHint)));
        $(save).addClass('cp-onboardscreen-save');
        $(prev).addClass('cp-onboardscreen-prev');
        var nav = blocks.nav([prev, save]);
        $(nav).addClass('cp-onboardscreen-nav');

        var form = blocks.form([
            screenTitle,
            grid], nav
        );

        $(form).addClass('cp-onboardscreen-form');

        return form;
    };

    pages = [
        titleConfig,
        appConfig,
        mfaRegistrationScreen
    ];
    const create = (sendAdminDecree, sendAdminRpc) => {
        let Env = {
            sendAdminDecree,
            sendAdminRpc
        };
        Env.overlay = $(h('div#cp-onboarding'));
        gotoPage(Env, 0);
        $('body').append(Env.overlay);
    };

    // XXX test functions to remove
    window.CP_onboarding_test = () => {
        create(() => {}, () => {});
    };
    window.CP_onboarding_test_full = () => {
        require([
            '/common/cryptpad-common.js',
            '/common/outer/local-store.js',
            '/common/outer/login-block.js',
            '/common/rpc.js',
            '/common/common-constants.js',
            '/common/cryptget.js',
        ], function (CryptPad, LocalStore, Block, Rpc, Constants, CryptGet) {
            var blockHash = LocalStore.getBlockHash();
            if (!blockHash) { return void console.error('NOT LOGGED IN'); }
            var parsed = Block.parseBlockHash(blockHash);
            var sessionToken = LocalStore.getSessionToken() || undefined;
            let userHash;
            nThen(w => {
                // Get user keys
                Util.getBlock(parsed.href, {
                    bearer: sessionToken
                }, w((err, response) => {
                    if (err) {
                        w.abort();
                        return void console.error('Please login in and try again');
                    }
                    response.arrayBuffer().then(w(arraybuffer => {
                        arraybuffer = new Uint8Array(arraybuffer);
                        var block_info = Block.decrypt(arraybuffer, parsed.keys);
                        userHash = block_info[Constants.userHashKey];
                    }));
                }));
            }).nThen(() => {
                // Make RPC
                if (!userHash) { return void console.error('AUTH FAILED'); }
                CryptPad.makeNetwork((err, network) => {
                    if (err) { return void console.error(err); }
                    CryptGet.get(userHash, (err, val) => {
                        let p = Util.tryParse(val);
                        Rpc.create(network, p.edPrivate, p.edPublic, function (e, rpc) {
                            let sendAdminDecree = function (command, data, callback) {
                                var params = ['ADMIN_DECREE', [command, data]];
                                rpc.send('ADMIN', params, callback);
                            };

                            let sendAdminRpc = function (command, data, callback) {
                                var params = [command, data];
                                rpc.send('ADMIN', params, callback);
                            };

                            create(sendAdminDecree, sendAdminRpc);
                        });
                    }, {network: network});
                });
            });
        });
    };
    return { create, createAppsGrid };

});