Merge branch 'appconfig_ui' of github.com:cryptpad/cryptpad into appconfig_ui

This commit is contained in:
David Benque 2024-06-20 14:31:09 +01:00
commit 474d104df3
6 changed files with 122 additions and 113 deletions

View file

@ -50,10 +50,10 @@ define([
) {
//XXX
Messages.admin_appSelection = 'App configuration'
Messages.admin_appsTitle = "Choose your applications"
Messages.admin_appsHint = "Choose which apps to disable on your instance."
Messages.admin_cat_apps = "Apps"
Messages.admin_appSelection = 'App configuration';
Messages.admin_appsTitle = "Choose your applications";
Messages.admin_appsHint = "Choose which apps to disable on your instance.";
Messages.admin_cat_apps = "Apps";
var APP = window.APP = {};
@ -647,23 +647,23 @@ define([
var checkMark = h('div.cp-onboardscreen-checkmark');
$(checkMark).addClass('fa.fa-check');
appBlock.append(checkMark);
$(`#${app}-block`).addClass('cp-active-app')
$(`#${app}-block`).removeClass('cp-inactive-app')
$(`#${app}-block`).addClass('cp-active-app');
$(`#${app}-block`).removeClass('cp-inactive-app');
} else {
appsToDisable.splice(appsToDisable.indexOf(app), 1);
$(`#${app}-block`).addClass('cp-inactive-app')
$(`#${app}-block`).removeClass('cp-active-app')
$(`#${app}-block`).addClass('cp-inactive-app');
$(`#${app}-block`).removeClass('cp-active-app');
appBlock.find('.cp-onboardscreen-checkmark').remove();
}
}
allApps.forEach(app => {
let appBlock = h('div.cp-appblock', {id: `${app.toString()}-block`}, app.charAt(0).toUpperCase() + app.slice(1))
let appBlock = h('div.cp-appblock', {id: `${app.toString()}-block`}, app.charAt(0).toUpperCase() + app.slice(1));
if (appsToDisable.indexOf(app) === -1) {
$(appBlock).addClass('cp-inactive-app')
$(appBlock).addClass('cp-inactive-app');
} else {
$(appBlock).addClass('cp-active-app')
$(appBlock).addClass('cp-active-app');
}
$(grid).append(appBlock);
$(appBlock).on('click', () => select(app, $(appBlock)));

View file

@ -28,7 +28,7 @@ define([
Sidebar.blocks = function (app) {
let blocks = {}
let blocks = {};
blocks.labelledInput = (label, input, inputBlock) => {
let uid = Util.uid();
@ -241,9 +241,9 @@ define([
return box;
};
return blocks
return blocks;
}
};
Sidebar.create = function (common, app, $container) {
const $leftside = $(h('div#cp-sidebarlayout-leftside')).appendTo($container);
@ -253,7 +253,7 @@ define([
$rightside
};
const items = {};
sidebar.blocks = Sidebar.blocks(app)
sidebar.blocks = Sidebar.blocks(app);
sidebar.addItem = (key, get, options) => {
const safeKey = keyToCamlCase(key);
@ -283,7 +283,7 @@ define([
sidebar.addCheckboxItem = (data) => {
const key = data.key;
let blocks = sidebar.blocks
let blocks = sidebar.blocks;
let box = blocks.activeCheckbox(data);
sidebar.addItem(key, function (cb) {
cb(box);

View file

@ -18,12 +18,12 @@ define([
let availableTypes;
if (ApiConfig.appsToDisable) {
availableTypes = availablePadTypes.filter(value => !ApiConfig.appsToDisable.includes(value))
availableTypes = availablePadTypes.filter(value => !ApiConfig.appsToDisable.includes(value));
} else {
availableTypes = availablePadTypes
availableTypes = availablePadTypes;
}
var appsToSelect = availablePadTypes.filter(value => !['drive', 'teams', 'file', 'contacts', 'convert'].includes(value))
var appsToSelect = availablePadTypes.filter(value => !['drive', 'teams', 'file', 'contacts', 'convert'].includes(value));
return {
availableTypes,

View file

@ -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]];
rpc.send('ADMIN', params, 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)
var params = [command, data];
rpc.send('ADMIN', params, callback);
};
showTitleScreen(sendAdminDecree, sendAdminRpc)
showTitleScreen(sendAdminDecree, sendAdminRpc);
});
};
setTimeout(function () {

View file

@ -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;
}
}
}
.configscreen {

View file

@ -32,34 +32,23 @@ define([
Messages.admin_onboardingRegistrationHint = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id tristique justo";
Messages.admin_onboardingRegistration = "Visitors to the instance are not able to create accounts. Invitations can be created by administrators";
Messages.admin_onboardingMfa = "All accounts on the instance have to use 2-factor authentication";
Messages.admin_onboardingNamePlaceholder = 'Instance title'
Messages.admin_onboardingDescPlaceholder = 'Placeholder description text'
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
var flushCache = () => {
console.log('flushcashe')
console.log('flushcashe');
// sendAdminDecree('FLUSH_CACHE', function (e, response) {
// if (e || response.error) {
// UI.warn(Messages.error);
@ -70,9 +59,10 @@ define([
// })
};
var selections = {title: '', description: '', logoURL: '', color: '', appsToDisable: [], mfa: false, closeRegistration: false}
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');
@ -96,7 +86,7 @@ define([
return [input, desc];
};
let dataURL = ''
let dataURL = '';
var logoBlock = function() {
let inputLogo = blocks.input({
@ -147,7 +137,7 @@ define([
}, function () {
spinner.spin();
$remove.attr('disabled', 'disabled');
selections.logoURL = ''
selections.logoURL = '';
});
return formLogo;
@ -162,7 +152,7 @@ define([
let hex = Util.rgbToHex(rgb);
selectorColor = hex;
if (hex) {
selections.color = hex
selections.color = hex;
}
});
var $colors = $(colors).attr('id', 'cp-install-color');
@ -176,16 +166,16 @@ define([
var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
if ($($(titleInput).children()[0]).val() !== '') {
selections.title = $($(titleInput).children()[0]).val()
selections.title = $($(titleInput).children()[0]).val();
}
if ($($(desc).children()[0]).val() !== '') {
selections.description = $($(desc).children()[0]).val()
}
selections.description = $($(desc).children()[0]).val();
}
if (dataURL) {
selections.logoURL = dataURL
}
selections.logoURL = dataURL;
}
displayForm(sendAdminDecree, sendAdminRpc, 0);
gotoPage(Env, 1);
});
var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0]);
@ -198,7 +188,7 @@ define([
var nav = blocks.nav([button]);
$(button).addClass('cp-onboardscreen-save');
$(nav).addClass('cp-onboardscreen-nav')
$(nav).addClass('cp-onboardscreen-nav');
var textForm= h('div.cp-instance-text-form',[
titleInput,
@ -219,60 +209,63 @@ 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 => {
let appBlock = h('div.cp-appblock.cp-inactive-app', {id: `${app.toString()}-block`}, app.charAt(0).toUpperCase() + app.slice(1))
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
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');
$(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.admin_onboardingAppsTitle), h('span', Messages.admin_onboardingAppsHint)))
$(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.admin_onboardingAppsTitle), h('span', Messages.admin_onboardingAppsHint)));
$(save).addClass('cp-onboardscreen-save');
$(prev).addClass('cp-onboardscreen-prev');
var nav = blocks.nav([prev, save])
var nav = blocks.nav([prev, save]);
$(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({
@ -282,7 +275,7 @@ define([
},
label: 'registration',
query: function (val) {
selections.closeRegistration = val
selections.closeRegistration = val;
},
});
@ -293,7 +286,7 @@ define([
},
label: 'forcemfa',
query: function (val) {
selections.mfa = val
selections.mfa = val;
},
});
@ -307,7 +300,7 @@ define([
var save = blocks.activeButton('primary', '', Messages.settings_save, function () {
var name = selections.title
var name = selections.title;
sendAdminDecree('SET_INSTANCE_NAME', [name], function (e, response) {
if (e || response.error) {
UI.warn(Messages.error);
@ -316,9 +309,9 @@ define([
}
UI.log(Messages.saved);
})
});
var description = selections.title
var description = selections.title;
sendAdminDecree('SET_INSTANCE_DESCRIPTION', [description], function (e, response) {
if (e || response.error) {
UI.warn(Messages.error);
@ -327,9 +320,9 @@ define([
}
UI.log(Messages.saved);
})
var logoURL = selections.logoURL
});
var logoURL = selections.logoURL;
sendAdminRpc('UPLOAD_LOGO', {logoURL}, function (e, response) {
if (e || response.error) {
UI.warn(Messages.error);
@ -338,7 +331,7 @@ define([
}
});
var color = selections.color
var color = selections.color;
sendAdminRpc('CHANGE_COLOR', {color}, function (e, response) {
if (e || response.error) {
UI.warn(Messages.error);
@ -347,14 +340,14 @@ define([
}
});
var apps = selections.appsToDisable
var apps = selections.appsToDisable;
sendAdminDecree('DISABLE_APPS', apps, function (e, response) {
if (e || response.error) {
UI.warn(Messages.error);
console.error(e, response);
return;
}
})
});
sendAdminDecree('ENFORCE_MFA', [selections.mfa], function (e, response) {
if (e || response.error) {
@ -364,7 +357,7 @@ define([
}
UI.log(Messages.saved);
})
});
sendAdminDecree('RESTRICT_REGISTRATION', [selections.closeRegistration], function (e, response) {
if (e || response.error) {
@ -383,14 +376,14 @@ define([
});
var prev = blocks.activeButton('primary', '', Messages.form_backButton, function () {
displayForm(sendAdminDecree, sendAdminRpc, 0);
gotoPage(Env, 1);
});
var screenTitle = h('div.cp-onboardscreen-screentitle');
$(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.admin_onboardingRegistrationTitle), h('span', Messages.admin_onboardingRegistrationHint)));
$(save).addClass('cp-onboardscreen-save');
$(prev).addClass('cp-onboardscreen-prev');
var nav = blocks.nav([prev, save])
var nav = blocks.nav([prev, save]);
$(nav).addClass('cp-onboardscreen-nav');
var form = blocks.form([
@ -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 };
});