From 51aeb8bc7edad5d7ac2f012509865741a187067f Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 20 Jun 2024 15:26:36 +0200 Subject: [PATCH] Onboarding: don't stack overlays when switching page --- www/install/main.js | 27 ++--------- www/install/onboarding.less | 29 ++++++++---- www/install/onboardscreen.js | 90 ++++++++++++++++++++---------------- 3 files changed, 73 insertions(+), 73 deletions(-) diff --git a/www/install/main.js b/www/install/main.js index 62051d5ae..a63332a1b 100644 --- a/www/install/main.js +++ b/www/install/main.js @@ -60,29 +60,10 @@ define([ } var showTitleScreen = function (sendAdminDecree, sendAdminRpc) { - - var titleScreen = OnboardScreen.titleConfig; - var form = titleScreen(sendAdminDecree, sendAdminRpc); - - var elem = document.createElement('div'); - elem.setAttribute('id', 'cp-loading'); - let frame = h('div.configscreen', form); - elem.append(frame); - var intr; - var append = function () { - if (!document.body) { return; } - clearInterval(intr); - document.body.appendChild(elem); - }; - intr = setInterval(append, 100); - append(); - + OnboardScreen.create(sendAdminDecree, sendAdminRpc); }; var registerClick = function () { - - // showTitleScreen() - var uname = $uname.val().trim(); // trim whitespace surrounding the username since it is otherwise included in key derivation // most people won't realize that its presence is significant @@ -147,19 +128,17 @@ define([ } let sendAdminDecree = function (command, data, callback) { - var params = ['ADMIN_DECREE', [command, data]]; + var params = ['ADMIN_DECREE', [command, data]]; rpc.send('ADMIN', params, callback); }; let sendAdminRpc = function (command, data, callback) { - var params = [command, data]; + var params = [command, data]; rpc.send('ADMIN', params, callback); }; showTitleScreen(sendAdminDecree, sendAdminRpc); - }); - }; setTimeout(function () { diff --git a/www/install/onboarding.less b/www/install/onboarding.less index 0ac025055..6d635d9f3 100644 --- a/www/install/onboarding.less +++ b/www/install/onboarding.less @@ -10,6 +10,26 @@ div.cp-palette-container { max-width: 400px; } + #cp-onboarding { + position: fixed; + z-index: 1000; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + background-color: @cp_loading-bg; + color: @cp_loading-fg; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + .cp-onboarding-box { + background-color: @cp_loading-progress-bg; + border-radius: @variables_radius_L; + box-shadow: 0px 0px 10px 0px @cp_shadow-color; + padding: 30px 110px 20px 110px; + } + } } @cp_palette: @@ -22,15 +42,6 @@ #C8D6FF, #E4CAFF; -.configscreen { - //width: 70%; - //height: 75%; - background-color: @cp_loading-progress-bg; - border-radius: @variables_radius_L; - box-shadow: 0px 0px 10px 0px @cp_shadow-color; - padding: 30px 110px 20px 110px; -} - // .cp-onboardscreen-form { // // padding:10px; // // position:relative; diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js index 4fd3b23f3..4f4eb99e0 100644 --- a/www/install/onboardscreen.js +++ b/www/install/onboardscreen.js @@ -35,26 +35,15 @@ define([ Messages.admin_onboardingNamePlaceholder = 'Instance title'; Messages.admin_onboardingDescPlaceholder = 'Placeholder description text'; - var OnboardScreen = {}; + let pages = []; + const gotoPage = function (Env, page) { + if (typeof(page) !== "number" || !page) { page = 0; } + if (page > (pages.length - 1)) { page = pages.length - 1; } - var displayForm = function(sendAdminDecree, sendAdminRpc, page) { - - var pages = [OnboardScreen.appConfig, OnboardScreen.mfaRegistrationScreen, OnboardScreen.titleConfig]; var nextPageFunction = pages[page]; - var nextPageForm = nextPageFunction(sendAdminDecree, sendAdminRpc); - var elem = document.createElement('div'); - elem.setAttribute('id', 'cp-loading'); - let frame = h('div.configscreen', nextPageForm); - elem.append(frame); - var intr; - var append = function () { - if (!document.body) { return; } - clearInterval(intr); - document.body.appendChild(elem); - }; - intr = setInterval(append, 100); - append(); - + var nextPageForm = nextPageFunction(Env); + let frame = h('div.cp-onboarding-box', nextPageForm); + Env.overlay.empty().append(frame); }; //TODO: fix EXPECTED_FUNCTION error @@ -72,7 +61,8 @@ define([ var selections = {title: '', description: '', logoURL: '', color: '', appsToDisable: [], mfa: false, closeRegistration: false}; - OnboardScreen.titleConfig = function (sendAdminDecree, sendAdminRpc) { + const titleConfig = function (Env) { + const { sendAdminDecree, sendAdminRpc } = Env; const blocks = Sidebar.blocks('admin'); @@ -180,12 +170,12 @@ define([ } if ($($(desc).children()[0]).val() !== '') { selections.description = $($(desc).children()[0]).val(); - } + } if (dataURL) { selections.logoURL = dataURL; - } + } - displayForm(sendAdminDecree, sendAdminRpc, 0); + gotoPage(Env, 1); }); var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0]); @@ -219,41 +209,42 @@ define([ }; - OnboardScreen.appConfig = function (sendAdminDecree, sendAdminRpc) { + const appConfig = function (Env) { + const { sendAdminDecree, sendAdminRpc } = Env; const blocks = Sidebar.blocks('admin'); const grid = blocks.block([], 'cp-admin-customize-apps-grid'); const allApps = PadTypes.appsToSelect; const appsToDisable = []; - + function select(app, appBlock) { if (appsToDisable.indexOf(app) === -1) { appsToDisable.push(app); var checkMark = h('div.cp-onboardscreen-checkmark'); $(checkMark).addClass('fa-check'); appBlock.append(checkMark); - $(`#${app}-block`).addClass('cp-active-app'); + $(`#${app}-block`).addClass('cp-active-app'); } else { appsToDisable.splice(appsToDisable.indexOf(app), 1); - $(`#${app}-block`).addClass('cp-inactive-app'); + $(`#${app}-block`).addClass('cp-inactive-app'); appBlock.find('.cp-onboardscreen-checkmark').remove(); - } + } } - allApps.forEach(app => { + allApps.forEach(app => { let appBlock = h('div.cp-appblock.cp-inactive-app', {id: `${app.toString()}-block`}, app.charAt(0).toUpperCase() + app.slice(1)); $(grid).append(appBlock); $(appBlock).on('click', () => select(app, $(appBlock))); - }); + }); var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) { selections.appsToDisable = appsToDisable; UI.log(Messages.saved); - displayForm(sendAdminDecree, sendAdminRpc, 1); + gotoPage(Env, 2); }); var prev = blocks.activeButton('primary', '', Messages.form_backButton, function () { - displayForm(sendAdminDecree, sendAdminRpc, 2); + gotoPage(Env, 0); }); var screenTitle = h('div.cp-onboardscreen-screentitle'); @@ -264,15 +255,17 @@ define([ $(nav).addClass('cp-onboardscreen-nav'); let form = blocks.form([ screenTitle, - grid + grid ], nav); $(form).addClass('cp-onboardscreen-form'); - - return form; - }; - OnboardScreen.mfaRegistrationScreen = function(sendAdminDecree, sendAdminRpc) { + return form; + }; + + const mfaRegistrationScreen = function (Env) { + const { sendAdminDecree, sendAdminRpc } = Env; + const blocks = Sidebar.blocks('admin'); var restrict = blocks.activeCheckbox({ @@ -328,7 +321,7 @@ define([ UI.log(Messages.saved); }); - + var logoURL = selections.logoURL; sendAdminRpc('UPLOAD_LOGO', {logoURL}, function (e, response) { if (e || response.error) { @@ -383,7 +376,7 @@ define([ }); var prev = blocks.activeButton('primary', '', Messages.form_backButton, function () { - displayForm(sendAdminDecree, sendAdminRpc, 0); + gotoPage(Env, 1); }); var screenTitle = h('div.cp-onboardscreen-screentitle'); @@ -401,10 +394,27 @@ define([ $(form).addClass('cp-onboardscreen-form'); return form; - }; - return OnboardScreen; + 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); + }; + + window.CP_onboarding_test = () => { + create(() => {}, () => {}); + }; + return { create }; });