From 4f9a7031d668205dd8fe7738dd88e79f47324353 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 7 May 2024 14:14:06 +0100
Subject: [PATCH 01/50] initial changes to admin panel

---
 lib/commands/admin-rpc.js             |  2 +
 lib/decrees.js                        | 15 ++++++-
 lib/http-worker.js                    |  1 +
 lib/stats.js                          |  3 ++
 www/admin/app-admin.less              | 30 +++++++++++++
 www/admin/inner.js                    | 63 ++++++++++++++++++++++++++-
 www/common/pad-types.js               |  3 +-
 www/common/translations/messages.json |  3 ++
 www/support/ui.js                     |  2 +-
 9 files changed, 118 insertions(+), 4 deletions(-)

diff --git a/lib/commands/admin-rpc.js b/lib/commands/admin-rpc.js
index 954c1c4c1..70e698537 100644
--- a/lib/commands/admin-rpc.js
+++ b/lib/commands/admin-rpc.js
@@ -467,6 +467,8 @@ var setLastEviction = function (Env, Server, cb, data, unsafeKey) {
 // CryptPad_AsyncStore.rpc.send('ADMIN', ['INSTANCE_STATUS], console.log)
 var instanceStatus = function (Env, Server, cb) {
     cb(void 0, {
+
+        disabledApps: Env.disabledApps,
         restrictRegistration: Env.restrictRegistration,
         restrictSsoRegistration: Env.restrictSsoRegistration,
         dontStoreSSOUsers: Env.dontStoreSSOUsers,
diff --git a/lib/decrees.js b/lib/decrees.js
index 79a978398..f1e3b9181 100644
--- a/lib/decrees.js
+++ b/lib/decrees.js
@@ -223,6 +223,19 @@ commands.SET_SUPPORT_MAILBOX = makeGenericSetter('supportMailbox', function (arg
     return args_isString(args) && Core.isValidPublicKey(args[0]);
 });
 // CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_SUPPORT_KEYS', ["Tdz6+fE9N9XXBY93rW5qeNa/k27yd40c0vq7EJyt7jA=", "Tdz6+fE9N9XXBY93rW5qeNa/k27yd40c0vq7EJyt7jA="]]], console.log)
+
+
+commands.DISABLE_APPS = function (Env, args) {
+    const appsToDisable = args;
+    // let validated = typeof(curvePublic) === "string" &&
+    //                 (Core.isValidPublicKey(curvePublic) || !curvePublic) &&
+    //                 typeof(edPublic) === "string" &&
+    //                 (Core.isValidPublicKey(edPublic) || !edPublic);
+    // if (!validated) { throw new Error('INVALID_ARGS'); }
+    Env.disabledApps = appsToDisable;
+    return true;
+};
+
 commands.SET_SUPPORT_KEYS = function (Env, args) {
     const curvePublic = args[0]; // Support mailbox key
     const edPublic = args[1]; // Support pin log
@@ -403,8 +416,8 @@ commands.SET_BEARER_SECRET = function (Env, args) {
 // [<command>, <args>, <author>, <time>]
 var handleCommand = Decrees.handleCommand = function (Env, line) {
     var command = line[0];
+    
     var args = line[1];
-
     if (typeof(commands[command]) !== 'function') {
         throw new Error("DECREE_UNSUPPORTED_COMMAND");
     }
diff --git a/lib/http-worker.js b/lib/http-worker.js
index c46d1b3f7..6a5128a53 100644
--- a/lib/http-worker.js
+++ b/lib/http-worker.js
@@ -583,6 +583,7 @@ var serveConfig = makeRouteCache(function () {
             maxUploadSize: Env.maxUploadSize,
             premiumUploadSize: Env.premiumUploadSize,
             restrictRegistration: Env.restrictRegistration,
+            disabledApps: Env.disabledApps,
             restrictSsoRegistration: Env.restrictSsoRegistration,
             httpSafeOrigin: Env.httpSafeOrigin,
             enableEmbedding: Env.enableEmbedding,
diff --git a/lib/stats.js b/lib/stats.js
index d67a2ee71..3cfa63aaf 100644
--- a/lib/stats.js
+++ b/lib/stats.js
@@ -49,6 +49,9 @@ Stats.instanceData = function (Env) {
         // do you allow registration?
         data.restrictRegistration = Boolean(Env.restrictRegistration);
 
+        //which apps have you disabled?
+        data.disabledApps = Env.disabledApps
+
         // have you removed the donate button?
         data.removeDonateButton = Boolean(Env.removeDonateButton);
 
diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less
index 2e49e3dec..99fa4a51f 100644
--- a/www/admin/app-admin.less
+++ b/www/admin/app-admin.less
@@ -10,6 +10,36 @@
 @import (reference) '../../customize/src/less2/include/framework.less';
 @import (reference) '../../customize/src/less2/include/export.less';
 
+.cp-app-drive-element-grid {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .leftside-menu-category_main();
+    margin: 0;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin-left: -5px;
+    padding-left: 5px;
+    .fa, .cptools {
+        display: inline-block;
+        min-width: 0;
+        width: 20px;
+        margin-right: 0px;
+        z-index: 99;
+    }
+    .cp-app-drive-element {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.active-app {
+    color: red;
+
+} 
+
 &.cp-app-admin {
     .framework_min_main();
     .sidebar-layout_main();
diff --git a/www/admin/inner.js b/www/admin/inner.js
index cd1360d9c..d3c09c172 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -90,6 +90,12 @@ define([
                     'forcemfa',
                 ]
             },
+            'apps': { // Msg.admin_cat_apps
+                icon: 'fa fa-cog',
+                content: [
+                    'apps',
+                ]
+            },
             'users' : { // Msg.admin_cat_users
                 icon : 'fa fa-address-card-o',
                 content : [
@@ -609,7 +615,7 @@ define([
                     UI.log(Messages._getKey('ui_saved', [Messages.admin_emailTitle]));
                 });
             });
-
+        
             var nav = blocks.nav([button]);
 
             var form = blocks.form([
@@ -621,6 +627,61 @@ define([
             cb(form);
         });
 
+        sidebar.addItem('apps', function (cb) {
+
+            const grid = blocks.block([], 'cp-admin-customize-apps-grid');
+
+            const availableApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
+			const activeApps = []
+            
+            function select(app) {
+
+				if (activeApps.indexOf(app) === -1) {
+					activeApps.push(app);
+					$(`#${app}-block`).attr('class', 'active-app') 
+				} else {
+					activeApps.splice(activeApps.indexOf(app), 1)
+					$(`#${app}-block`).attr('class', 'inactive-app')
+				}
+                    
+            }
+
+            availableApps.forEach(app => { 
+                let appBlock = h('div', {class: 'inactive-app', id: `${app}-block`}, app)
+                $(appBlock).addClass('cp-app-drive-element-grid')
+                $(grid).append(appBlock);
+                $(appBlock).on('click', () => select(app))
+            }); 
+
+			
+            Messages.admin_appSelection = 'App configuration saved'
+            var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+                const appsToDisable = availableApps.filter(x => !activeApps.includes(x)).concat(activeApps.filter(x => !availableApps.includes(x)));
+                sFrameChan.query('Q_ADMIN_RPC', {
+                    cmd: 'ADMIN_DECREE',
+                    data: ['DISABLE_APPS', appsToDisable]
+                }, function (e, response) {
+                    if (e || response.error) {
+                        UI.warn(Messages.error);
+                        $input.val('');
+                        console.error(e, response);
+                        done(false);
+                        return;
+                    }
+                    flushCache();
+                    done(true);
+                    UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+                });
+            });
+            
+            let form = blocks.form([
+                grid 
+            ], blocks.nav([save]));
+
+            cb(form);
+        }); 
+
+
         sidebar.addItem('instance-info-notice', function(cb){
             var key = 'instance-info-notice';
             var notice = blocks.alert('info', key, [Messages.admin_infoNotice1, ' ', Messages.admin_infoNotice2]);
diff --git a/www/common/pad-types.js b/www/common/pad-types.js
index 86390e885..0817479fd 100644
--- a/www/common/pad-types.js
+++ b/www/common/pad-types.js
@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
+
 define([
     "/customize/application_config.js",
     "/api/config",
@@ -13,7 +14,7 @@ define([
     );
 
     let availableTypes = AppConfig.availablePadTypes.filter(
-        (t) => ooEnabled || !OO_APPS.includes(t),
+        (t) => ooEnabled || !OO_APPS.includes(t) && Env.disabledApps.indexOf(t) === -1,
     );
 
     return {
diff --git a/www/common/translations/messages.json b/www/common/translations/messages.json
index 900de6aed..a32caacd3 100644
--- a/www/common/translations/messages.json
+++ b/www/common/translations/messages.json
@@ -1385,6 +1385,7 @@
     "bounce_danger": "The link you clicked does not lead to a web-page but to some code or data that could be malicious.\n\n(\"{0}\")\n\nCryptPad blocks these for security reasons. Clicking OK will close this tab.",
     "admin_archiveNote": "Note",
     "admin_nameTitle": "Instance name",
+    "admin_appsTitle": "Choose your applications",
     "admin_nameHint": "The name displayed for this instance in the list of public instances on cryptpad.org",
     "ui_saved": "{0} saved",
     "admin_descriptionTitle": "Instance description",
@@ -1428,6 +1429,7 @@
     "ui_experimental": "This feature is considered experimental.",
     "admin_noticeTitle": "Home page notice",
     "admin_noticeHint": "An optional message to display on the home page",
+    "admin_appsHint": "Choose which apps are available to users on your instance.",
     "footer_website": "Project Website",
     "home_location": "Encrypted data is hosted in {0}",
     "home_morestorage": "For more storage space:",
@@ -1437,6 +1439,7 @@
     "admin_uptimeHint": "Date and time at which the server was launched",
     "admin_cat_database": "Database",
     "admin_generatedAt": "Report timestamp",
+    "admin_cat_apps": "Apps",
     "ui_true": "true",
     "ui_false": "false",
     "ui_undefined": "unknown",
diff --git a/www/support/ui.js b/www/support/ui.js
index 45dc74a44..1589ea888 100644
--- a/www/support/ui.js
+++ b/www/support/ui.js
@@ -192,7 +192,7 @@ define([
         makeCategoryDropdown(ctx, catContainer, function (text, key) {
             $(category).val(key);
             if (!notice) { return; }
-            //console.log(key);
+            // console.log(key);
             // Msg.support_warning_abuse.support_warning_account.support_warning_bug.support_warning_document.support_warning_drives.support_warning_other
             var warning = Messages['support_warning_' + key] || '';
             var warningLink = warningLinks[key];

From 9231bb7ab87443050c94c52c156b79cf198ffeba Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 7 May 2024 18:29:13 +0100
Subject: [PATCH 02/50] appconfig

---
 customize.dist/application_config.js | 11 +++++++++--
 lib/commands/admin-rpc.js            |  2 +-
 lib/decrees.js                       |  4 ++--
 lib/http-worker.js                   |  2 +-
 lib/stats.js                         |  3 +--
 www/admin/inner.js                   | 15 +++++++--------
 www/common/pad-types.js              |  2 +-
 www/oldadmin/inner.js                |  2 +-
 8 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/customize.dist/application_config.js b/customize.dist/application_config.js
index 9e2c574aa..68195a054 100644
--- a/customize.dist/application_config.js
+++ b/customize.dist/application_config.js
@@ -9,12 +9,19 @@
  * If you want to check all the configurable values, you can open the internal configuration file
    but you should not change it directly (/common/application_config_internal.js)
 */
-define(['/common/application_config_internal.js'], function (AppConfig) {
+
+define([
+  '/common/application_config_internal.js',
+  '/api/config'
+  ], function (AppConfig, ApiConfig ) {
+//  const Path = require("path");
+
     // Example: If you want to remove the survey link in the menu:
     // AppConfig.surveyURL = "";
 
     // To inform users of the support ticket panel which languages your admins speak:
     //AppConfig.supportLanguages = [ 'en', 'fr' ];
-
+    AppConfig.availablePadTypes = ['drive', 'teams', 'file', 'contacts', 'convert'].concat(ApiConfig.availableApps)
+    
     return AppConfig;
 });
diff --git a/lib/commands/admin-rpc.js b/lib/commands/admin-rpc.js
index 70e698537..30415dd17 100644
--- a/lib/commands/admin-rpc.js
+++ b/lib/commands/admin-rpc.js
@@ -468,7 +468,7 @@ var setLastEviction = function (Env, Server, cb, data, unsafeKey) {
 var instanceStatus = function (Env, Server, cb) {
     cb(void 0, {
 
-        disabledApps: Env.disabledApps,
+        availableApps: Env.availableApps,
         restrictRegistration: Env.restrictRegistration,
         restrictSsoRegistration: Env.restrictSsoRegistration,
         dontStoreSSOUsers: Env.dontStoreSSOUsers,
diff --git a/lib/decrees.js b/lib/decrees.js
index f1e3b9181..86e63701c 100644
--- a/lib/decrees.js
+++ b/lib/decrees.js
@@ -226,13 +226,13 @@ commands.SET_SUPPORT_MAILBOX = makeGenericSetter('supportMailbox', function (arg
 
 
 commands.DISABLE_APPS = function (Env, args) {
-    const appsToDisable = args;
+    const availableApps = args;
     // let validated = typeof(curvePublic) === "string" &&
     //                 (Core.isValidPublicKey(curvePublic) || !curvePublic) &&
     //                 typeof(edPublic) === "string" &&
     //                 (Core.isValidPublicKey(edPublic) || !edPublic);
     // if (!validated) { throw new Error('INVALID_ARGS'); }
-    Env.disabledApps = appsToDisable;
+    Env.availableApps = availableApps;
     return true;
 };
 
diff --git a/lib/http-worker.js b/lib/http-worker.js
index 6a5128a53..cfdb677a0 100644
--- a/lib/http-worker.js
+++ b/lib/http-worker.js
@@ -583,7 +583,7 @@ var serveConfig = makeRouteCache(function () {
             maxUploadSize: Env.maxUploadSize,
             premiumUploadSize: Env.premiumUploadSize,
             restrictRegistration: Env.restrictRegistration,
-            disabledApps: Env.disabledApps,
+            availableApps: Env.availableApps,
             restrictSsoRegistration: Env.restrictSsoRegistration,
             httpSafeOrigin: Env.httpSafeOrigin,
             enableEmbedding: Env.enableEmbedding,
diff --git a/lib/stats.js b/lib/stats.js
index 3cfa63aaf..449803004 100644
--- a/lib/stats.js
+++ b/lib/stats.js
@@ -50,7 +50,7 @@ Stats.instanceData = function (Env) {
         data.restrictRegistration = Boolean(Env.restrictRegistration);
 
         //which apps have you disabled?
-        data.disabledApps = Env.disabledApps
+        data.availableApps = Env.availableApps
 
         // have you removed the donate button?
         data.removeDonateButton = Boolean(Env.removeDonateButton);
@@ -85,7 +85,6 @@ Stats.instanceData = function (Env) {
         // check how many instances provide stats before we put more work into it
         data.providesAggregateStatistics = true;
     }
-
     return data;
 };
 
diff --git a/www/admin/inner.js b/www/admin/inner.js
index d3c09c172..6687df31d 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -631,22 +631,22 @@ define([
 
             const grid = blocks.block([], 'cp-admin-customize-apps-grid');
 
-            const availableApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
-			const activeApps = []
+            const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
+			const availableApps = []
             
             function select(app) {
 
-				if (activeApps.indexOf(app) === -1) {
-					activeApps.push(app);
+				if (availableApps.indexOf(app) === -1) {
+					availableApps.push(app);
 					$(`#${app}-block`).attr('class', 'active-app') 
 				} else {
-					activeApps.splice(activeApps.indexOf(app), 1)
+					availableApps.splice(availableApps.indexOf(app), 1)
 					$(`#${app}-block`).attr('class', 'inactive-app')
 				}
                     
             }
 
-            availableApps.forEach(app => { 
+            allApps.forEach(app => { 
                 let appBlock = h('div', {class: 'inactive-app', id: `${app}-block`}, app)
                 $(appBlock).addClass('cp-app-drive-element-grid')
                 $(grid).append(appBlock);
@@ -656,10 +656,9 @@ define([
 			
             Messages.admin_appSelection = 'App configuration saved'
             var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-                const appsToDisable = availableApps.filter(x => !activeApps.includes(x)).concat(activeApps.filter(x => !availableApps.includes(x)));
                 sFrameChan.query('Q_ADMIN_RPC', {
                     cmd: 'ADMIN_DECREE',
-                    data: ['DISABLE_APPS', appsToDisable]
+                    data: ['DISABLE_APPS', availableApps]
                 }, function (e, response) {
                     if (e || response.error) {
                         UI.warn(Messages.error);
diff --git a/www/common/pad-types.js b/www/common/pad-types.js
index 0817479fd..2271c0dc3 100644
--- a/www/common/pad-types.js
+++ b/www/common/pad-types.js
@@ -14,7 +14,7 @@ define([
     );
 
     let availableTypes = AppConfig.availablePadTypes.filter(
-        (t) => ooEnabled || !OO_APPS.includes(t) && Env.disabledApps.indexOf(t) === -1,
+        (t) => ooEnabled || !OO_APPS.includes(t)
     );
 
     return {
diff --git a/www/oldadmin/inner.js b/www/oldadmin/inner.js
index f96dc55dc..99d9e2e56 100644
--- a/www/oldadmin/inner.js
+++ b/www/oldadmin/inner.js
@@ -2323,7 +2323,7 @@ Example
                     }, Messages.admin_diskUsageButton);
 
                     $(infoButton).click(() => {
-                         console.log(key);
+                         //console.log(key);
                          getAccountData(key, (err, data) => {
                              if (err) { return void console.error(err); }
                              console.log(data);

From 66d56581fcce73bab5931694d7203b7172b5e0a3 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 7 May 2024 18:39:42 +0100
Subject: [PATCH 03/50] translation keys

---
 customize.dist/application_config.js  | 1 -
 www/admin/inner.js                    | 9 +++++++--
 www/common/translations/messages.json | 2 --
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/customize.dist/application_config.js b/customize.dist/application_config.js
index 68195a054..d609c487b 100644
--- a/customize.dist/application_config.js
+++ b/customize.dist/application_config.js
@@ -14,7 +14,6 @@ define([
   '/common/application_config_internal.js',
   '/api/config'
   ], function (AppConfig, ApiConfig ) {
-//  const Path = require("path");
 
     // Example: If you want to remove the survey link in the menu:
     // AppConfig.surveyURL = "";
diff --git a/www/admin/inner.js b/www/admin/inner.js
index 6687df31d..832688969 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -46,6 +46,13 @@ define([
     Instance,
     Flatpickr
 ) {
+
+    //XXX 
+    Messages.admin_appSelection = 'App configuration saved'
+    Messages.admin_appsTitle = "Choose your applications"
+    Messages.admin_appsHint = "Choose which apps are available to users on your instance."
+    Messages.admin_cat_apps = "Apps"
+
     var APP = window.APP = {};
 
     var Nacl = window.nacl;
@@ -653,8 +660,6 @@ define([
                 $(appBlock).on('click', () => select(app))
             }); 
 
-			
-            Messages.admin_appSelection = 'App configuration saved'
             var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
                 sFrameChan.query('Q_ADMIN_RPC', {
                     cmd: 'ADMIN_DECREE',
diff --git a/www/common/translations/messages.json b/www/common/translations/messages.json
index a32caacd3..74f29156d 100644
--- a/www/common/translations/messages.json
+++ b/www/common/translations/messages.json
@@ -1385,7 +1385,6 @@
     "bounce_danger": "The link you clicked does not lead to a web-page but to some code or data that could be malicious.\n\n(\"{0}\")\n\nCryptPad blocks these for security reasons. Clicking OK will close this tab.",
     "admin_archiveNote": "Note",
     "admin_nameTitle": "Instance name",
-    "admin_appsTitle": "Choose your applications",
     "admin_nameHint": "The name displayed for this instance in the list of public instances on cryptpad.org",
     "ui_saved": "{0} saved",
     "admin_descriptionTitle": "Instance description",
@@ -1429,7 +1428,6 @@
     "ui_experimental": "This feature is considered experimental.",
     "admin_noticeTitle": "Home page notice",
     "admin_noticeHint": "An optional message to display on the home page",
-    "admin_appsHint": "Choose which apps are available to users on your instance.",
     "footer_website": "Project Website",
     "home_location": "Encrypted data is hosted in {0}",
     "home_morestorage": "For more storage space:",

From 2d4f0daa42814c1e2245dd8e32cebc20ea8d61fc Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 7 May 2024 18:41:00 +0100
Subject: [PATCH 04/50] clean

---
 www/oldadmin/inner.js | 2 +-
 www/support/ui.js     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/oldadmin/inner.js b/www/oldadmin/inner.js
index 99d9e2e56..f96dc55dc 100644
--- a/www/oldadmin/inner.js
+++ b/www/oldadmin/inner.js
@@ -2323,7 +2323,7 @@ Example
                     }, Messages.admin_diskUsageButton);
 
                     $(infoButton).click(() => {
-                         //console.log(key);
+                         console.log(key);
                          getAccountData(key, (err, data) => {
                              if (err) { return void console.error(err); }
                              console.log(data);
diff --git a/www/support/ui.js b/www/support/ui.js
index 1589ea888..45dc74a44 100644
--- a/www/support/ui.js
+++ b/www/support/ui.js
@@ -192,7 +192,7 @@ define([
         makeCategoryDropdown(ctx, catContainer, function (text, key) {
             $(category).val(key);
             if (!notice) { return; }
-            // console.log(key);
+            //console.log(key);
             // Msg.support_warning_abuse.support_warning_account.support_warning_bug.support_warning_document.support_warning_drives.support_warning_other
             var warning = Messages['support_warning_' + key] || '';
             var warningLink = warningLinks[key];

From 987492ef3c4f910c2c51a75087d40f794df4fa35 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 21 May 2024 00:13:55 +0100
Subject: [PATCH 05/50] app config screen

---
 www/install/appconfigscreen.js |  80 ++++++++++++
 www/install/configscreen.js    | 228 +++++++++++++++++++++++++++++++++
 www/install/main.js            | 195 ++++++++++++++--------------
 3 files changed, 407 insertions(+), 96 deletions(-)
 create mode 100644 www/install/appconfigscreen.js
 create mode 100644 www/install/configscreen.js

diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
new file mode 100644
index 000000000..ad03717d4
--- /dev/null
+++ b/www/install/appconfigscreen.js
@@ -0,0 +1,80 @@
+define([
+    'jquery',
+    '/common/toolbar.js',
+    '/components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/common/common-interface.js',
+    '/common/common-ui-elements.js',
+    '/common/common-util.js',
+    '/common/common-hash.js',
+    '/common/inner/sidebar-layout.js',
+    '/customize/messages.js',
+    '/common/common-signing-keys.js',
+    '/common/hyperscript.js',
+    '/common/clipboard.js',
+    'json.sortify',
+    '/customize/application_config.js',
+    '/api/config',
+    '/api/instance',
+    '/lib/datepicker/flatpickr.js',
+        'configscreen.js',
+
+
+
+    '/common/hyperscript.js',
+    'css!/lib/datepicker/flatpickr.min.css',
+    'css!/components/bootstrap/dist/css/bootstrap.min.css',
+    'css!/components/components-font-awesome/css/font-awesome.min.css',
+    'less!/admin/app-admin.less',
+], function(
+    $,
+    Toolbar,
+    nThen,
+    SFCommon,
+    UI,
+    UIElements,
+    Util,
+    Hash,
+    Sidebar,
+    Messages,
+    Keys,
+    h,
+    Clipboard,
+    Sortify,
+    AppConfig,
+    ApiConfig,
+    Instance,
+    Flatpickr,
+    ConfigScreen
+) {
+
+var AppConfigScreen = {}
+
+
+AppConfigScreen.addConfigScreen = function (config) {
+        var LOADING = 'cp-loading';
+        config = config || {};
+        var loadingText = config.loadingText;
+        var todo = function () {
+            var $loading = $('#' + LOADING);
+            // Show the loading screen
+            $loading.css('display', '');
+            $loading.removeClass('cp-loading-hidden');
+            $loading.removeClass('cp-loading-transparent');
+
+        };
+        if ($('#' + LOADING).length) {
+            todo();
+        } else {
+            ConfigScreen();
+            todo();
+        }
+
+        $('html').toggleClass('cp-loading-noscroll', true);
+        // Remove the inner placeholder (iframe)
+        $('#placeholder').remove();
+    };
+
+return AppConfigScreen
+});
+
diff --git a/www/install/configscreen.js b/www/install/configscreen.js
new file mode 100644
index 000000000..9c3e64d51
--- /dev/null
+++ b/www/install/configscreen.js
@@ -0,0 +1,228 @@
+// SPDX-FileCopyrightText: 2023 XWiki CryptPad Team <contact@cryptpad.org> and contributors
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// bg #e7e7e7
+// blue #0087FF
+// text #3F4141
+define([
+    'jquery',
+    '/common/toolbar.js',
+    '/components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/common/common-interface.js',
+    '/common/common-ui-elements.js',
+    '/common/common-util.js',
+    '/common/common-hash.js',
+    '/common/inner/sidebar-layout.js',
+    '/customize/messages.js',
+    '/common/common-signing-keys.js',
+    '/common/hyperscript.js',
+    '/common/clipboard.js',
+    'json.sortify',
+    '/customize/application_config.js',
+    '/api/config',
+    '/api/instance',
+    '/lib/datepicker/flatpickr.js',
+    '/common/hyperscript.js',
+    'css!/lib/datepicker/flatpickr.min.css',
+    '/customize/messages.js',
+
+
+    '/customize/messages.js',
+    'less!/customize/src/less2/include/loading.less'
+], function ($,
+    Toolbar,
+    nThen,
+    SFCommon,
+    UI,
+    UIElements,
+    Util,
+    Hash,
+    Sidebar,
+    Messages,
+    Keys,
+    h,
+    Clipboard,
+    Sortify,
+    AppConfig,
+    ApiConfig,
+    Instance,
+    Flatpickr,
+    Messages) {
+
+
+    //XXX 
+    Messages.admin_appSelection = 'App configuration saved'
+    Messages.admin_appsTitle = "Choose your applications"
+    Messages.admin_appsHint = "Choose which apps are available to users on your instance."
+    Messages.admin_cat_apps = "Apps"
+
+    var APP = window.APP = {};
+
+    var Nacl = window.nacl;
+    var common;
+    var sFrameChan;
+
+    var andThen = function (common, $container) {
+        const sidebar = Sidebar.create(common, 'admin', $container);
+
+        var categories = {
+            'apps': { // Msg.admin_cat_apps
+                icon: 'fa fa-cog',
+                content: [
+                    'apps',
+                ]
+            },
+            
+        };
+
+        const blocks = sidebar.blocks;
+
+        const flushCache = (cb) => {
+            cb = cb || function () {};
+            sFrameChan.query('Q_ADMIN_RPC', {
+                cmd: 'FLUSH_CACHE',
+            }, cb);
+        };
+
+        sidebar.addItem('apps', function (cb) {
+
+        const grid = blocks.block([], 'cp-admin-customize-apps-grid');
+
+        const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
+        const availableApps = []
+        
+        function select(app) {
+            if (availableApps.indexOf(app) === -1) {
+                availableApps.push(app);
+                $(`#${app}-block`).attr('class', 'active-app') 
+            } else {
+                availableApps.splice(availableApps.indexOf(app), 1)
+                $(`#${app}-block`).attr('class', 'inactive-app')
+            } 
+        }
+
+        allApps.forEach(app => { 
+            let appBlock = h('div', {class: 'inactive-app', id: `${app}-block`}, app)
+            $(appBlock).addClass('cp-app-drive-element-grid')
+            $(grid).append(appBlock);
+            $(appBlock).on('click', () => select(app))
+        }); 
+
+        var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+            sFrameChan.query('Q_ADMIN_RPC', {
+                cmd: 'ADMIN_DECREE',
+                data: ['DISABLE_APPS', availableApps]
+            }, function (e, response) {
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    $input.val('');
+                    console.error(e, response);
+                    done(false);
+                    return;
+                }
+                flushCache();
+                done(true);
+                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+            });
+        });
+        
+        let form = blocks.form([
+            grid 
+        ], blocks.nav([save]));
+
+        cb(form);
+        }); 
+
+        sidebar.makeLeftside(categories);
+    };
+
+
+    var updateStatus = APP.updateStatus = function (cb) {
+        sFrameChan.query('Q_ADMIN_RPC', {
+            cmd: 'INSTANCE_STATUS',
+        }, function (e, data) {
+            if (e) { console.error(e); return void cb(e); }
+            if (!Array.isArray(data)) { return void cb('EINVAL'); }
+            APP.instanceStatus = data[0];
+            console.log("Status", APP.instanceStatus);
+            cb();
+        });
+    };
+
+    var createToolbar = function () {
+        var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle', 'notifications'];
+        var configTb = {
+            displayed: displayed,
+            sfCommon: common,
+            $container: APP.$toolbar,
+            pageTitle: Messages.adminPage || 'Admin',
+            metadataMgr: common.getMetadataMgr(),
+        };
+        APP.toolbar = Toolbar.create(configTb);
+        APP.toolbar.$rightside.hide();
+    };
+
+    nThen(function(waitFor) {
+    //     $(waitFor(UI.addLoadingScreen));
+        SFCommon.create(waitFor(function(c) { APP.common = common = c; }));
+    }).nThen(function(waitFor) {
+        APP.$container = $('#cp-sidebarlayout-container');
+        APP.$toolbar = $('#cp-toolbar');
+        sFrameChan = common.getSframeChannel();
+        sFrameChan.onReady(waitFor());
+    })
+    .nThen(function (waitFor) {
+        if (!common.isAdmin()) { return; }
+        updateStatus(waitFor());
+    })
+    .nThen(function( /*waitFor*/ ) {
+        common.setTabTitle(Messages.adminPage || 'Administration');
+
+        createToolbar();
+
+        APP.supportModule = common.makeUniversal('support');
+
+    //     // Content
+        andThen(common, APP.$container);
+
+    //     UI.removeLoadingScreen();
+    });
+
+    var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; });
+    var elem = document.createElement('div');
+    elem.setAttribute('id', 'cp-loading');
+
+    elem.innerHTML = [
+        '<div class="cp-loading-logo">',
+            '<img class="cp-loading-cryptofist" src="/api/logo?' + urlArgs + '" alt="' + Messages.label_logo + '">',
+        '</div>',
+        '<div class="cp-loading-container">',
+            '<div class="cp-loading-spinner-container">',
+                '<span class="cp-spinner"></span>',
+            '</div>',
+            '<div class="cp-loading-progress">',
+                '<div class="cp-loading-progress-list"></div>',
+                '<div class="cp-loading-progress-container"></div>',
+            '</div>',
+            '<p id="cp-loading-message"></p>',
+        '</div>'
+    ].join('');
+    var built = false;
+
+
+
+    return function () {
+        built = true;
+        var intr;
+        var append = function () {
+            if (!document.body) { return; }
+            clearInterval(intr);
+            document.body.appendChild(elem);
+        };
+        intr = setInterval(append, 100);
+        append();
+    };
+});
+
diff --git a/www/install/main.js b/www/install/main.js
index fffb7343d..b945906b1 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -16,9 +16,10 @@ define([
     '/common/hyperscript.js',
     '/customize/pages.js',
     '/common/rpc.js',
+    'appconfigscreen.js',
 
     'css!/components/components-font-awesome/css/font-awesome.min.css',
-], function ($, Login, Cryptpad, /*Test,*/ Cred, UI, Util, Realtime, Constants, Feedback, LocalStore, h, Pages, Rpc) {
+], function ($, Login, Cryptpad, /*Test,*/ Cred, UI, Util, Realtime, Constants, Feedback, LocalStore, h, Pages, Rpc, AppConfigScreen) {
     if (window.top !== window) { return; }
     var Messages = Cryptpad.Messages;
     $(function () {
@@ -56,116 +57,118 @@ define([
         }
 
         var registerClick = function () {
-            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
-            $uname.val(uname);
 
-            var passwd = $passwd.val();
-            var confirmPassword = $confirm.val();
+            AppConfigScreen.addConfigScreen()
+//             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
+//             $uname.val(uname);
 
-            if (!token) { token = $token.val().trim(); }
+//             var passwd = $passwd.val();
+//             var confirmPassword = $confirm.val();
 
-            var shouldImport = false;
-            var doesAccept;
-            try {
-                // if this throws there's either a horrible bug (which someone will report)
-                // or the instance admins did not configure a terms page.
-                doesAccept = true;
-            } catch (err) {
-                console.error(err);
-            }
+//             if (!token) { token = $token.val().trim(); }
 
-            if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
-                var emailWarning = [
-                    Messages.register_emailWarning0,
-                    br(), br(),
-                    Messages.register_emailWarning1,
-                    br(), br(),
-                    Messages.register_emailWarning2,
-                    br(), br(),
-                    Messages.register_emailWarning3,
-                ];
+//             var shouldImport = false;
+//             var doesAccept;
+//             try {
+//                 // if this throws there's either a horrible bug (which someone will report)
+//                 // or the instance admins did not configure a terms page.
+//                 doesAccept = true;
+//             } catch (err) {
+//                 console.error(err);
+//             }
 
-                Feedback.send("EMAIL_USERNAME_WARNING", true);
+//             if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
+//                 var emailWarning = [
+//                     Messages.register_emailWarning0,
+//                     br(), br(),
+//                     Messages.register_emailWarning1,
+//                     br(), br(),
+//                     Messages.register_emailWarning2,
+//                     br(), br(),
+//                     Messages.register_emailWarning3,
+//                 ];
 
-                return void UI.confirm(emailWarning, function (yes) {
-                    if (!yes) { return; }
-                    I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
-                    registerClick();
-                });
-            }
+//                 Feedback.send("EMAIL_USERNAME_WARNING", true);
 
-            /* basic validation */
-            if (!Cred.isLongEnoughPassword(passwd)) {
-                var warning = Messages._getKey('register_passwordTooShort', [
-                    Cred.MINIMUM_PASSWORD_LENGTH
-                ]);
-                return void UI.alert(warning);
-            }
+//                 return void UI.confirm(emailWarning, function (yes) {
+//                     if (!yes) { return; }
+//                     I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
+//                     registerClick();
+//                 });
+//             }
 
-            if (passwd !== confirmPassword) { // do their passwords match?
-                return void UI.alert(Messages.register_passwordsDontMatch);
-            }
+//             /* basic validation */
+//             if (!Cred.isLongEnoughPassword(passwd)) {
+//                 var warning = Messages._getKey('register_passwordTooShort', [
+//                     Cred.MINIMUM_PASSWORD_LENGTH
+//                 ]);
+//                 return void UI.alert(warning);
+//             }
 
-            if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
-                return void UI.alert(Messages.register_mustAcceptTerms);
-            }
+//             if (passwd !== confirmPassword) { // do their passwords match?
+//                 return void UI.alert(Messages.register_passwordsDontMatch);
+//             }
 
-            setTimeout(function () {
-                var span = h('span', [
-                    h('h2', [
-                        h('i.fa.fa-warning'),
-                        ' ',
-                        Messages.register_warning,
-                    ]),
-                    Messages.register_warning_note
-                ]);
+//             if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
+//                 return void UI.alert(Messages.register_mustAcceptTerms);
+//             }
 
-            UI.confirm(span,
-            function (yes) {
-                if (!yes) { return; }
+//             setTimeout(function () {
+//                 var span = h('span', [
+//                     h('h2', [
+//                         h('i.fa.fa-warning'),
+//                         ' ',
+//                         Messages.register_warning,
+//                     ]),
+//                     Messages.register_warning_note
+//                 ]);
 
-                Login.loginOrRegisterUI({
-                    uname,
-                    passwd,
-                    isRegister: true,
-                    onOTP: UI.getOTPScreen,
-                    shouldImport,
-                    cb: function (data) {
-                        var proxy = data.proxy;
-                        if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
+//             UI.confirm(span,
+//             function (yes) {
+//                 if (!yes) { return; }
 
-                        Rpc.createAnonymous(data.network, function (e, call) {
-                            if (e) { UI.alert(Messages.error); return console.error(e); }
-                            var anon_rpc = call;
+//                 Login.loginOrRegisterUI({
+//                     uname,
+//                     passwd,
+//                     isRegister: true,
+//                     onOTP: UI.getOTPScreen,
+//                     shouldImport,
+//                     cb: function (data) {
+//                         var proxy = data.proxy;
+//                         if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
 
-                            anon_rpc.send('ADD_FIRST_ADMIN', {
-                                token: token,
-                                edPublic: proxy.edPublic
-                            }, function (e) {
-                                if (e) { UI.alert(Messages.error); return console.error(e); }
-                                window.location.href = '/drive/';
-                            });
-                        });
+//                         Rpc.createAnonymous(data.network, function (e, call) {
+//                             if (e) { UI.alert(Messages.error); return console.error(e); }
+//                             var anon_rpc = call;
 
-                        return true;
-                    }
-                });
-            }, {
-                ok: Messages.register_writtenPassword,
-                cancel: Messages.register_cancel,
-/*  If we're certain that we aren't using these "*Class" APIs
-    anywhere else then we can deprecate them and make this a
-    custom modal in common-interface (or here).  */
-                cancelClass: 'btn.btn-cancel.btn-register',
-                okClass: 'btn.btn-danger.btn-register',
-                reverseOrder: true,
-                done: function ($dialog) {
-                    $dialog.find('> div').addClass('half');
-                },
-            });
-            }, 150);
+//                             anon_rpc.send('ADD_FIRST_ADMIN', {
+//                                 token: token,
+//                                 edPublic: proxy.edPublic
+//                             }, function (e) {
+//                                 if (e) { UI.alert(Messages.error); return console.error(e); }
+//                                 window.location.href = '/drive/';
+//                             });
+//                         });
+
+//                         return true;
+//                     }
+//                 });
+//             }, {
+//                 ok: Messages.register_writtenPassword,
+//                 cancel: Messages.register_cancel,
+// /*  If we're certain that we aren't using these "*Class" APIs
+//     anywhere else then we can deprecate them and make this a
+//     custom modal in common-interface (or here).  */
+//                 cancelClass: 'btn.btn-cancel.btn-register',
+//                 okClass: 'btn.btn-danger.btn-register',
+//                 reverseOrder: true,
+//                 done: function ($dialog) {
+//                     $dialog.find('> div').addClass('half');
+//                 },
+//             });
+//             }, 150);
         };
 
         $register.click(registerClick);

From d0631088261b3d5c504c38686daa4123b63af12a Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 21 May 2024 16:46:51 +0100
Subject: [PATCH 06/50] config screen

---
 config/config.example.js           |   2 +
 www/common/inner/sidebar-layout.js | 238 +++++++++++++++++++++++++++--
 www/install/appconfigscreen.js     |  13 --
 www/install/configscreen.css       |   5 +
 www/install/configscreen.js        | 184 +++++++---------------
 www/install/main.js                |  10 +-
 6 files changed, 291 insertions(+), 161 deletions(-)
 create mode 100644 www/install/configscreen.css

diff --git a/config/config.example.js b/config/config.example.js
index d6ebb4a50..ff7ff3852 100644
--- a/config/config.example.js
+++ b/config/config.example.js
@@ -172,6 +172,8 @@ module.exports = {
      */
     adminKeys: [
 
+    "[sproing@localhost:3000/ieibXenySscYFjdntu0mFglpvQLSrbBiy0V+wzizaGA=]"
+
     ],
 
     /* =====================
diff --git a/www/common/inner/sidebar-layout.js b/www/common/inner/sidebar-layout.js
index f6adcb66c..2bf3aee7e 100644
--- a/www/common/inner/sidebar-layout.js
+++ b/www/common/inner/sidebar-layout.js
@@ -23,17 +23,11 @@ define([
 ) {
     const Sidebar = {};
 
-    Sidebar.create = function (common, app, $container) {
-        const $leftside = $(h('div#cp-sidebarlayout-leftside')).appendTo($container);
-        const $rightside = $(h('div#cp-sidebarlayout-rightside')).appendTo($container);
-        const sidebar = {
-            $leftside,
-            $rightside
-        };
-        const items = {};
+    let blocks = Sidebar.blocks = {};
 
-        let blocks = sidebar.blocks = {};
-        blocks.labelledInput = (label, input, inputBlock) => {
+    var app = 'admin'
+
+    blocks.labelledInput = (label, input, inputBlock) => {
             let uid = Util.uid();
             let id = `cp-${app}-item-${uid}`;
             input.setAttribute('id', id);
@@ -246,6 +240,230 @@ define([
             return box;
         };
 
+
+    Sidebar.create = function (common, app, $container) {
+        const $leftside = $(h('div#cp-sidebarlayout-leftside')).appendTo($container);
+        const $rightside = $(h('div#cp-sidebarlayout-rightside')).appendTo($container);
+        const sidebar = {
+            $leftside,
+            $rightside
+        };
+        const items = {};
+        sidebar.blocks = Sidebar.blocks
+
+        // blocks.labelledInput = (label, input, inputBlock) => {
+        //     let uid = Util.uid();
+        //     let id = `cp-${app}-item-${uid}`;
+        //     input.setAttribute('id', id);
+        //     let labelElement = h('label', { for: id }, label);
+        //     return h('div', { class: 'cp-labelled-input' }, [
+        //         labelElement,
+        //         inputBlock || input
+        //     ]);
+        // };
+
+        // blocks.icon = (icon) => {
+        //     let s = icon.split(' ');
+        //     let cls;
+        //     if (s.length > 1) {
+        //         cls = '.' + s.join('.');
+        //     } else {
+        //         let prefix = icon.slice(0, icon.indexOf('-'));
+        //         cls = `.${prefix}.${icon}`;
+        //     }
+        //     return h(`i${cls}`);
+        // };
+        // blocks.button = (type, icon, text) => {
+        //     type = type || 'primary';
+        //     return h(`button.btn.btn-${type}`, [
+        //         icon ? blocks.icon(icon) : undefined,
+        //         h('span', text)
+        //     ]);
+        // };
+        // blocks.nav = (buttons) => {
+        //     return h('nav', buttons);
+        // };
+        // blocks.form = (content, nav) => {
+        //     return h('div.cp-sidebar-form', [content, nav]);
+        // };
+        // blocks.input = (attr) => {
+        //     return h('input', attr);
+        // };
+        // blocks.inputButton = (input, button, opts) => {
+        //     if (opts.onEnterDelegate) {
+        //         $(input).on('keypress', e => {
+        //             if (e.which === 13) {
+        //                 $(button).click();
+        //             }
+        //         });
+        //     }
+        //     return h('div.cp-sidebar-input-block', [input, button]);
+        // };
+        // blocks.code = val => {
+        //     return h('code', val);
+        // };
+        // blocks.inline = (value, className) => {
+        //     let attr = {};
+        //     if (className) { attr.class = className; }
+        //     return h('span', attr, value);
+        // };
+        // blocks.block = (content, className) => {
+        //     let attr = {};
+        //     if (className) { attr.class = className; }
+        //     return h('div', attr, content);
+        // };
+        // blocks.paragraph = (content) => {
+        //     return h('p', content);
+        // };
+
+        // blocks.alert = function (type, big, content) {
+        //     var isBigClass = big ? '.cp-sidebar-bigger-alert' : ''; // Add the class if we want a bigger font-size
+        //     return h('div.alert.alert-' + type + isBigClass, content);
+        // };
+
+        // blocks.alertHTML = function (message, element) {
+        //     return h('span', [
+        //         UIElements.setHTML(h('p'), message),
+        //         element
+        // ]);
+        // };
+        // blocks.pre = (value) => {
+        //     return h('pre', value);
+        // };
+
+        // blocks.textarea = function (attributes, value) {
+        //     return h('textarea', attributes, value || '');
+        // };
+
+        // blocks.unorderedList = function (entries) {
+        //     const ul = h('ul');
+
+        //     ul.updateContent = (entries) => {
+        //         ul.innerHTML = '';
+        //         entries.forEach(entry => {
+        //             const li = h('li', entry);
+        //             ul.appendChild(li);
+        //         });
+        //     };
+        //     ul.updateContent(entries);
+
+        //     return ul;
+        // };
+
+        // blocks.checkbox = (key, label, state, opts, onChange) => {
+        //     var box = UI.createCheckbox(`cp-${app}-${key}`, label, state, { label: { class: 'noTitle' } });
+        //     if (opts && opts.spinner) {
+        //         box.spinner = UI.makeSpinner($(box));
+        //     }
+        //     if (typeof(onChange) === "function"){
+        //         $(box).find('input').on('change', function() {
+        //             onChange(this.checked);
+        //         });
+        //     }
+        //     return box;
+        // };
+
+        // blocks.table = function (header, entries) {
+        //     const table = h('table.cp-sidebar-table');
+        //     if (header) {
+        //         const headerValues = header.map(value => {
+        //             const lastWord = value.split(' ').pop(); // Extracting the last word
+        //             return h('th', { class: lastWord.toLowerCase() }, value); // Modified to use the last word
+        //         });
+        //         const headerRow = h('thead', h('tr', headerValues));
+        //         table.appendChild(headerRow);
+        //     }
+
+        //     let getRow = line => {
+        //         return h('tr', line.map(value => {
+        //             if (typeof(value) === "object" && value.content) {
+        //                 return h('td', value.attr || {}, value.content);
+        //             }
+        //             return h('td', value);
+        //         }));
+        //     };
+        //     table.updateContent = (newEntries) => {
+        //         $(table).show().find('tbody').remove();
+        //         if (!newEntries.length) {
+        //             return void $(table).hide();
+        //         }
+        //         let bodyContent = [];
+        //         newEntries.forEach(line => {
+        //             const row = getRow(line);
+        //             bodyContent.push(row);
+        //         });
+        //         table.appendChild(h('tbody', bodyContent));
+        //     };
+        //     table.updateContent(entries);
+        //     table.addLine = (line) => {
+        //         const row = getRow(line);
+        //         $(table).find('tbody').append(row);
+        //     };
+
+        //     return table;
+        // };
+
+        // blocks.link = function (text, url, isSafe) {
+        //     var link = h('a', { href: url }, text);
+        //     $(link).click(function (ev) {
+        //         ev.preventDefault();
+        //         ev.stopPropagation();
+        //         if (isSafe) {
+        //             common.openURL(url);
+        //         } else {
+        //             common.openUnsafeURL(url);
+        //         }
+        //     });
+        //     return link;
+        // };
+
+        // blocks.activeButton = function (type, icon, text, callback, keepEnabled) {
+        //     var button = blocks.button(type, icon, text);
+        //     var $button = $(button);
+        //     button.spinner = h('span');
+        //     var spinner = UI.makeSpinner($(button.spinner));
+
+        //     Util.onClickEnter($button, function () {
+        //         spinner.spin();
+        //         if (!keepEnabled) { $button.attr('disabled', 'disabled'); }
+        //         let done = success => {
+        //             $button.removeAttr('disabled');
+        //             if (success) { return void spinner.done(); }
+        //             spinner.hide();
+        //         };
+        //         // The callback can be synchrnous or async, handle "done" in both ways
+        //         let success = callback(done); // Async
+        //         if (typeof(success) === "boolean") { done(success); } // Sync
+        //     });
+        //     return button;
+        // };
+
+        // const keyToCamlCase = (key) => {
+        //     return key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+        // };
+        // blocks.activeCheckbox = (data) => {
+        //     const state = data.getState();
+        //     const key = data.key;
+        //     const safeKey = keyToCamlCase(key);
+        //     var labelKey = `${app}_${safeKey}Label`;
+        //     var titleKey = `${app}_${safeKey}Title`;
+        //     var label = Messages[labelKey] || Messages[titleKey];
+        //     var box = blocks.checkbox(key, label, state, { spinner: true }, checked => {
+        //         var $cbox = $(box);
+        //         var $checkbox = $cbox.find('input');
+        //         let spinner = box.spinner;
+        //         spinner.spin();
+        //         $checkbox.attr('disabled', 'disabled');
+        //         var val = !!checked;
+        //         data.query(val, function (state) {
+        //             spinner.done();
+        //             $checkbox[0].checked = state;
+        //             $checkbox.removeAttr('disabled');
+        //         });
+        //     });
+        //     return box;
+        // };
+
         sidebar.addItem = (key, get, options) => {
             const safeKey = keyToCamlCase(key);
             get((content) => {
diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index ad03717d4..17fc0d023 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -54,25 +54,12 @@ var AppConfigScreen = {}
 AppConfigScreen.addConfigScreen = function (config) {
         var LOADING = 'cp-loading';
         config = config || {};
-        var loadingText = config.loadingText;
-        var todo = function () {
-            var $loading = $('#' + LOADING);
-            // Show the loading screen
-            $loading.css('display', '');
-            $loading.removeClass('cp-loading-hidden');
-            $loading.removeClass('cp-loading-transparent');
 
-        };
         if ($('#' + LOADING).length) {
-            todo();
         } else {
             ConfigScreen();
-            todo();
         }
 
-        $('html').toggleClass('cp-loading-noscroll', true);
-        // Remove the inner placeholder (iframe)
-        $('#placeholder').remove();
     };
 
 return AppConfigScreen
diff --git a/www/install/configscreen.css b/www/install/configscreen.css
new file mode 100644
index 000000000..efbc5e213
--- /dev/null
+++ b/www/install/configscreen.css
@@ -0,0 +1,5 @@
+.configscreen {
+
+background: red
+
+}
\ No newline at end of file
diff --git a/www/install/configscreen.js b/www/install/configscreen.js
index 9c3e64d51..715745e0f 100644
--- a/www/install/configscreen.js
+++ b/www/install/configscreen.js
@@ -30,6 +30,7 @@ define([
 
 
     '/customize/messages.js',
+    // '/install/configscreen.css',
     'less!/customize/src/less2/include/loading.less'
 ], function ($,
     Toolbar,
@@ -63,154 +64,71 @@ define([
     var Nacl = window.nacl;
     var common;
     var sFrameChan;
+    // SFCommon.create(waitFor(function(c) { APP.common = common = c; }));
 
-    var andThen = function (common, $container) {
-        const sidebar = Sidebar.create(common, 'admin', $container);
+    // sFrameChan = common.getSframeChannel();
+    // sFrameChan.onReady(waitFor());
 
-        var categories = {
-            'apps': { // Msg.admin_cat_apps
-                icon: 'fa fa-cog',
-                content: [
-                    'apps',
-                ]
-            },
-            
-        };
+    const blocks = Sidebar.blocks;
+    const grid = blocks.block([], 'cp-admin-customize-apps-grid');
 
-        const blocks = sidebar.blocks;
-
-        const flushCache = (cb) => {
-            cb = cb || function () {};
-            sFrameChan.query('Q_ADMIN_RPC', {
-                cmd: 'FLUSH_CACHE',
-            }, cb);
-        };
-
-        sidebar.addItem('apps', function (cb) {
-
-        const grid = blocks.block([], 'cp-admin-customize-apps-grid');
-
-        const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
-        const availableApps = []
+    const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
+    const availableApps = []
         
-        function select(app) {
-            if (availableApps.indexOf(app) === -1) {
-                availableApps.push(app);
-                $(`#${app}-block`).attr('class', 'active-app') 
-            } else {
-                availableApps.splice(availableApps.indexOf(app), 1)
-                $(`#${app}-block`).attr('class', 'inactive-app')
-            } 
-        }
+    function select(app) {
+        if (availableApps.indexOf(app) === -1) {
+            availableApps.push(app);
+            $(`#${app}-block`).attr('class', 'active-app') 
+        } else {
+            availableApps.splice(availableApps.indexOf(app), 1)
+            $(`#${app}-block`).attr('class', 'inactive-app')
+        } 
+    }
 
-        allApps.forEach(app => { 
-            let appBlock = h('div', {class: 'inactive-app', id: `${app}-block`}, app)
-            $(appBlock).addClass('cp-app-drive-element-grid')
-            $(grid).append(appBlock);
-            $(appBlock).on('click', () => select(app))
-        }); 
-
-        var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            sFrameChan.query('Q_ADMIN_RPC', {
-                cmd: 'ADMIN_DECREE',
-                data: ['DISABLE_APPS', availableApps]
-            }, function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    $input.val('');
-                    console.error(e, response);
-                    done(false);
-                    return;
-                }
-                flushCache();
-                done(true);
-                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
-            });
-        });
-        
-        let form = blocks.form([
-            grid 
-        ], blocks.nav([save]));
-
-        cb(form);
-        }); 
-
-        sidebar.makeLeftside(categories);
-    };
+    allApps.forEach(app => { 
+    // 'width: 50%; height: 80px; margin: 5px'
+    // width:200px;height:20px;float:left;border:1px solid red
+        let appBlock = h('div',  {style: 'width:50%;height:20px;float:left;border:1px solid red'}, {class: 'inactive-app', id: `${app}-block`}, app)
+        $(appBlock).addClass('cp-app-drive-element-grid')
+        $(appBlock).addClass('cp-app-drive-element-row')
+        $(appBlock).addClass('cp-app-drive-new-doc')
 
 
-    var updateStatus = APP.updateStatus = function (cb) {
+        $(grid).append(appBlock);
+        $(appBlock).on('click', () => select(app))
+    }); 
+
+    var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
         sFrameChan.query('Q_ADMIN_RPC', {
-            cmd: 'INSTANCE_STATUS',
-        }, function (e, data) {
-            if (e) { console.error(e); return void cb(e); }
-            if (!Array.isArray(data)) { return void cb('EINVAL'); }
-            APP.instanceStatus = data[0];
-            console.log("Status", APP.instanceStatus);
-            cb();
+            cmd: 'ADMIN_DECREE',
+            data: ['DISABLE_APPS', availableApps]
+        }, function (e, response) {
+            if (e || response.error) {
+                UI.warn(Messages.error);
+                $input.val('');
+                console.error(e, response);
+                done(false);
+                return;
+            }
+            flushCache();
+            done(true);
+            UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
         });
-    };
-
-    var createToolbar = function () {
-        var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle', 'notifications'];
-        var configTb = {
-            displayed: displayed,
-            sfCommon: common,
-            $container: APP.$toolbar,
-            pageTitle: Messages.adminPage || 'Admin',
-            metadataMgr: common.getMetadataMgr(),
-        };
-        APP.toolbar = Toolbar.create(configTb);
-        APP.toolbar.$rightside.hide();
-    };
-
-    nThen(function(waitFor) {
-    //     $(waitFor(UI.addLoadingScreen));
-        SFCommon.create(waitFor(function(c) { APP.common = common = c; }));
-    }).nThen(function(waitFor) {
-        APP.$container = $('#cp-sidebarlayout-container');
-        APP.$toolbar = $('#cp-toolbar');
-        sFrameChan = common.getSframeChannel();
-        sFrameChan.onReady(waitFor());
-    })
-    .nThen(function (waitFor) {
-        if (!common.isAdmin()) { return; }
-        updateStatus(waitFor());
-    })
-    .nThen(function( /*waitFor*/ ) {
-        common.setTabTitle(Messages.adminPage || 'Administration');
-
-        createToolbar();
-
-        APP.supportModule = common.makeUniversal('support');
-
-    //     // Content
-        andThen(common, APP.$container);
-
-    //     UI.removeLoadingScreen();
     });
+    
+    
+    let form = blocks.form([
+        grid 
+    ], blocks.nav([save]));
 
-    var urlArgs = window.location.href.replace(/^.*\?([^\?]*)$/, function (all, x) { return x; });
     var elem = document.createElement('div');
     elem.setAttribute('id', 'cp-loading');
 
-    elem.innerHTML = [
-        '<div class="cp-loading-logo">',
-            '<img class="cp-loading-cryptofist" src="/api/logo?' + urlArgs + '" alt="' + Messages.label_logo + '">',
-        '</div>',
-        '<div class="cp-loading-container">',
-            '<div class="cp-loading-spinner-container">',
-                '<span class="cp-spinner"></span>',
-            '</div>',
-            '<div class="cp-loading-progress">',
-                '<div class="cp-loading-progress-list"></div>',
-                '<div class="cp-loading-progress-container"></div>',
-            '</div>',
-            '<p id="cp-loading-message"></p>',
-        '</div>'
-    ].join('');
-    var built = false;
+    let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
 
+    elem.append(frame)
+
+    var built = false;
 
 
     return function () {
diff --git a/www/install/main.js b/www/install/main.js
index b945906b1..23836634b 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -23,11 +23,11 @@ define([
     if (window.top !== window) { return; }
     var Messages = Cryptpad.Messages;
     $(function () {
-        if (LocalStore.isLoggedIn()) {
-            // already logged in, redirect to drive
-            document.location.href = '/drive/';
-            return;
-        }
+        // if (LocalStore.isLoggedIn()) {
+        //     // already logged in, redirect to drive
+        //     document.location.href = '/drive/';
+        //     return;
+        // }
 
 
         // text and password input fields

From 4e6402400f194fa6a7018f9d1896631b7ac779dd Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Thu, 23 May 2024 17:11:24 +0100
Subject: [PATCH 07/50] test

---
 www/install/apps.js | 354 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 354 insertions(+)
 create mode 100644 www/install/apps.js

diff --git a/www/install/apps.js b/www/install/apps.js
new file mode 100644
index 000000000..f5493bcd8
--- /dev/null
+++ b/www/install/apps.js
@@ -0,0 +1,354 @@
+// define([
+//     'jquery',
+//     '/common/toolbar.js',
+//     '/components/nthen/index.js',
+//     '/common/sframe-common.js',
+//     '/common/common-interface.js',
+//     '/common/common-ui-elements.js',
+//     '/common/common-util.js',
+//     '/common/common-hash.js',
+//     '/common/inner/sidebar-layout.js',
+//     '/customize/messages.js',
+//     '/common/common-signing-keys.js',
+//     '/common/hyperscript.js',
+//     '/common/clipboard.js',
+//     'json.sortify',
+//     '/customize/application_config.js',
+//     '/api/config',
+//     '/api/instance',
+//     '/lib/datepicker/flatpickr.js',
+//     '/admin/customize.js',
+//     '/common/loading.js',
+
+
+
+//     '/common/hyperscript.js',
+//     'css!/lib/datepicker/flatpickr.min.css',
+//     'css!/components/bootstrap/dist/css/bootstrap.min.css',
+//     'css!/components/components-font-awesome/css/font-awesome.min.css',
+//     'less!/admin/app-admin.less',
+// ], function(
+//     $,
+//     Toolbar,
+//     nThen,
+//     SFCommon,
+//     UI,
+//     UIElements,
+//     Util,
+//     Hash,
+//     Sidebar,
+//     Messages,
+//     Keys,
+//     h,
+//     Clipboard,
+//     Sortify,
+//     AppConfig,
+//     ApiConfig,
+//     Instance,
+//     Flatpickr,
+//     Customize, 
+//     Loading
+// ) {
+
+// var AppConfigScreen = {}
+
+// var LOADING = 'cp-loading';
+
+//     // UI.addLoadingScreen = function (config) {
+//     //     config = config || {};
+//     //     var loadingText = config.loadingText;
+//     //     var todo = function () {
+//     //         var $loading = $('#' + LOADING);
+//     //         // Show the loading screen
+//     //         $loading.css('display', '');
+//     //         $loading.removeClass('cp-loading-hidden');
+//     //         $loading.removeClass('cp-loading-transparent');
+//     //         if (config.newProgress) {
+//     //             var progress = h('div.cp-loading-progress', [
+//     //                 h('p.cp-loading-progress-list'),
+//     //                 h('p.cp-loading-progress-container')
+//     //             ]);
+//     //             $loading.find('.cp-loading-spinner-container').after(progress);
+//     //         }
+//     //         if (!$loading.find('.cp-loading-progress').length) {
+//     //             // Add spinner
+//     //             $('.cp-loading-spinner-container').show();
+//     //         }
+//     //         // Add loading text
+//     //         if (loadingText) {
+//     //             $('#' + LOADING).find('#cp-loading-message').show().text(loadingText);
+//     //         } else {
+//     //             $('#' + LOADING).find('#cp-loading-message').hide().text('');
+//     //         }
+//     //     };
+//     //     if ($('#' + LOADING).length) {
+//     //         todo();
+//     //     } else {
+//     //         Loading();
+//     //         todo();
+//     //     }
+
+//     //     $('html').toggleClass('cp-loading-noscroll', true);
+//     //     // Remove the inner placeholder (iframe)
+//     //     $('#placeholder').remove();
+//     // };
+
+
+// AppConfigScreen.addConfigScreen = function () {
+//         var LOADING = 'cp-loading';
+//         config = config || {};
+//         var loadingText = config.loadingText;
+//         var todo = function () {
+//             var $loading = $('#' + LOADING);
+//             // Show the loading screen
+//             $loading.css('display', '');
+//             $loading.removeClass('cp-loading-hidden');
+//             $loading.removeClass('cp-loading-transparent');
+
+//         };
+//         if ($('#' + LOADING).length) {
+//             todo();
+//         } else {
+//             Loading();
+//             todo();
+//         }
+
+//         $('html').toggleClass('cp-loading-noscroll', true);
+//         // Remove the inner placeholder (iframe)
+//         $('#placeholder').remove();
+
+//     //     if ($('#' + LOADING).length) {
+//     //     } else {
+//     //         // var form = Customize.disableApps();
+//     //         var elem = document.createElement('div');
+//     //         elem.setAttribute('id', 'cp-loading');
+
+//     //         let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, content)
+
+//     //         elem.append(frame)
+
+//     //         return function () {
+//     //             built = true;
+//     //             var intr;
+//     //             var append = function () {
+//     //                 if (!document.body) { return; }
+//     //                 clearInterval(intr);
+//     //                 document.body.appendChild(elem);
+//     //             };
+//     //             intr = setInterval(append, 100);
+//     //             append();
+//     // };
+            
+
+//     //     }
+
+//     };
+
+// return AppConfigScreen
+// });
+
+
+// SPDX-FileCopyrightText: 2023 XWiki CryptPad Team <contact@cryptpad.org> and contributors
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+// bg #e7e7e7
+// blue #0087FF
+// text #3F4141
+define([
+    'jquery',
+    '/common/toolbar.js',
+    '/components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/common/common-interface.js',
+    '/common/common-ui-elements.js',
+    '/common/common-util.js',
+    '/common/common-hash.js',
+    '/common/inner/sidebar-layout.js',
+    '/customize/messages.js',
+    '/common/common-signing-keys.js',
+    '/common/hyperscript.js',
+    '/common/clipboard.js',
+    'json.sortify',
+    '/customize/application_config.js',
+    '/api/config',
+    '/api/instance',
+    '/lib/datepicker/flatpickr.js',
+    '/common/hyperscript.js',
+    'css!/lib/datepicker/flatpickr.min.css',
+    '/customize/messages.js',
+        '/customize/loading.js',
+
+
+
+    '/customize/messages.js',
+    // '/install/configscreen.css',
+    'less!/customize/src/less2/include/loading.less'
+], function ($,
+    Toolbar,
+    nThen,
+    SFCommon,
+    UI,
+    UIElements,
+    Util,
+    Hash,
+    Sidebar,
+    Messages,
+    Keys,
+    h,
+    Clipboard,
+    Sortify,
+    AppConfig,
+    ApiConfig,
+    Instance,
+    Flatpickr,
+    Messages,
+    Loading) {
+
+
+    //XXX 
+    Messages.admin_appSelection = 'App configuration saved'
+    Messages.admin_appsTitle = "Choose your applications"
+    Messages.admin_appsHint = "Choose which apps are available to users on your instance."
+    Messages.admin_cat_apps = "Apps"
+
+    var APP = window.APP = {};
+
+    var Nacl = window.nacl;
+    var common;
+    var sFrameChan;
+
+    var Apps = {}
+    // SFCommon.create(waitFor(function(c) { APP.common = common = c; }));
+
+    // sFrameChan = common.getSframeChannel();
+    // sFrameChan.onReady(waitFor());
+
+    // const blocks = Sidebar.blocks;
+    // const grid = blocks.block([], 'cp-admin-customize-apps-grid');
+
+    // const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
+    // const availableApps = []
+        
+    // function select(app) {
+    //     if (availableApps.indexOf(app) === -1) {
+    //         availableApps.push(app);
+    //         $(`#${app}-block`).attr('class', 'active-app') 
+    //     } else {
+    //         availableApps.splice(availableApps.indexOf(app), 1)
+    //         $(`#${app}-block`).attr('class', 'inactive-app')
+    //     } 
+    // }
+
+    // allApps.forEach(app => { 
+    // // 'width: 50%; height: 80px; margin: 5px'
+    // // width:200px;height:20px;float:left;border:1px solid red
+    //     let appBlock = h('div',  {style: 'width:50%;height:20px;float:left;border:1px solid red'}, {class: 'inactive-app', id: `${app}-block`}, app)
+    //     $(appBlock).addClass('cp-app-drive-element-grid')
+    //     $(appBlock).addClass('cp-app-drive-element-row')
+    //     $(appBlock).addClass('cp-app-drive-new-doc')
+
+
+    //     $(grid).append(appBlock);
+    //     $(appBlock).on('click', () => select(app))
+    // }); 
+
+    // var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+    //     sFrameChan.query('Q_ADMIN_RPC', {
+    //         cmd: 'ADMIN_DECREE',
+    //         data: ['DISABLE_APPS', availableApps]
+    //     }, function (e, response) {
+    //         if (e || response.error) {
+    //             UI.warn(Messages.error);
+    //             $input.val('');
+    //             console.error(e, response);
+    //             done(false);
+    //             return;
+    //         }
+    //         flushCache();
+    //         done(true);
+    //         UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+    //     });
+    // });
+    
+    
+    // let form = blocks.form([
+    //     grid 
+    // ], blocks.nav([save]));
+
+    // var elem = document.createElement('div');
+    // elem.setAttribute('id', 'cp-loading');
+
+    // let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
+
+    // elem.append(frame)
+
+    // var built = false;
+
+
+    Apps.showScreen = function (form) {
+        var LOADING = 'cp-loading';
+
+            var loadingText = "config.loadingText";
+        var todo = function () {
+            var $loading = $('#' + LOADING);
+            // Show the loading screen
+            $loading.css('display', '');
+            $loading.removeClass('cp-loading-hidden');
+            $loading.removeClass('cp-loading-transparent');
+            if (config.newProgress) {
+                var progress = h('div.cp-loading-progress', [
+                    h('p.cp-loading-progress-list'),
+                    h('p.cp-loading-progress-container')
+                ]);
+                $loading.find('.cp-loading-spinner-container').after(progress);
+            }
+            if (!$loading.find('.cp-loading-progress').length) {
+                // Add spinner
+                $('.cp-loading-spinner-container').show();
+            }
+            // Add loading text
+            if (loadingText) {
+                $('#' + LOADING).find('#cp-loading-message').show().text(loadingText);
+            } else {
+                $('#' + LOADING).find('#cp-loading-message').hide().text('');
+            }
+        };
+        if ($('#' + LOADING).length) {
+            todo();
+        } else {
+            Loading();
+            todo();
+        }
+
+        $('html').toggleClass('cp-loading-noscroll', true);
+        // Remove the inner placeholder (iframe)
+        $('#placeholder').remove();
+        // var elem = document.createElement('div');
+        // elem.setAttribute('id', 'cp-loading');
+
+        // let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
+
+        // elem.append(frame)
+
+        // return function () {
+        // built = true;
+        // var intr;
+        // var append = function () {
+        //     if (!document.body) { return; }
+        //     clearInterval(intr);
+        //     document.body.appendChild(elem);
+        // };
+        // intr = setInterval(append, 100);
+        // append();
+        
+        // }
+
+    };
+
+    return Apps
+});
+
+
+
+

From 5165d22e81756deef8e4a163730ae9805b5c7bc9 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Thu, 23 May 2024 17:17:08 +0100
Subject: [PATCH 08/50] clean

---
 www/install/apps.js | 223 --------------------------------------------
 www/install/main.js | 110 ----------------------
 2 files changed, 333 deletions(-)

diff --git a/www/install/apps.js b/www/install/apps.js
index f5493bcd8..015a1b890 100644
--- a/www/install/apps.js
+++ b/www/install/apps.js
@@ -1,160 +1,3 @@
-// define([
-//     'jquery',
-//     '/common/toolbar.js',
-//     '/components/nthen/index.js',
-//     '/common/sframe-common.js',
-//     '/common/common-interface.js',
-//     '/common/common-ui-elements.js',
-//     '/common/common-util.js',
-//     '/common/common-hash.js',
-//     '/common/inner/sidebar-layout.js',
-//     '/customize/messages.js',
-//     '/common/common-signing-keys.js',
-//     '/common/hyperscript.js',
-//     '/common/clipboard.js',
-//     'json.sortify',
-//     '/customize/application_config.js',
-//     '/api/config',
-//     '/api/instance',
-//     '/lib/datepicker/flatpickr.js',
-//     '/admin/customize.js',
-//     '/common/loading.js',
-
-
-
-//     '/common/hyperscript.js',
-//     'css!/lib/datepicker/flatpickr.min.css',
-//     'css!/components/bootstrap/dist/css/bootstrap.min.css',
-//     'css!/components/components-font-awesome/css/font-awesome.min.css',
-//     'less!/admin/app-admin.less',
-// ], function(
-//     $,
-//     Toolbar,
-//     nThen,
-//     SFCommon,
-//     UI,
-//     UIElements,
-//     Util,
-//     Hash,
-//     Sidebar,
-//     Messages,
-//     Keys,
-//     h,
-//     Clipboard,
-//     Sortify,
-//     AppConfig,
-//     ApiConfig,
-//     Instance,
-//     Flatpickr,
-//     Customize, 
-//     Loading
-// ) {
-
-// var AppConfigScreen = {}
-
-// var LOADING = 'cp-loading';
-
-//     // UI.addLoadingScreen = function (config) {
-//     //     config = config || {};
-//     //     var loadingText = config.loadingText;
-//     //     var todo = function () {
-//     //         var $loading = $('#' + LOADING);
-//     //         // Show the loading screen
-//     //         $loading.css('display', '');
-//     //         $loading.removeClass('cp-loading-hidden');
-//     //         $loading.removeClass('cp-loading-transparent');
-//     //         if (config.newProgress) {
-//     //             var progress = h('div.cp-loading-progress', [
-//     //                 h('p.cp-loading-progress-list'),
-//     //                 h('p.cp-loading-progress-container')
-//     //             ]);
-//     //             $loading.find('.cp-loading-spinner-container').after(progress);
-//     //         }
-//     //         if (!$loading.find('.cp-loading-progress').length) {
-//     //             // Add spinner
-//     //             $('.cp-loading-spinner-container').show();
-//     //         }
-//     //         // Add loading text
-//     //         if (loadingText) {
-//     //             $('#' + LOADING).find('#cp-loading-message').show().text(loadingText);
-//     //         } else {
-//     //             $('#' + LOADING).find('#cp-loading-message').hide().text('');
-//     //         }
-//     //     };
-//     //     if ($('#' + LOADING).length) {
-//     //         todo();
-//     //     } else {
-//     //         Loading();
-//     //         todo();
-//     //     }
-
-//     //     $('html').toggleClass('cp-loading-noscroll', true);
-//     //     // Remove the inner placeholder (iframe)
-//     //     $('#placeholder').remove();
-//     // };
-
-
-// AppConfigScreen.addConfigScreen = function () {
-//         var LOADING = 'cp-loading';
-//         config = config || {};
-//         var loadingText = config.loadingText;
-//         var todo = function () {
-//             var $loading = $('#' + LOADING);
-//             // Show the loading screen
-//             $loading.css('display', '');
-//             $loading.removeClass('cp-loading-hidden');
-//             $loading.removeClass('cp-loading-transparent');
-
-//         };
-//         if ($('#' + LOADING).length) {
-//             todo();
-//         } else {
-//             Loading();
-//             todo();
-//         }
-
-//         $('html').toggleClass('cp-loading-noscroll', true);
-//         // Remove the inner placeholder (iframe)
-//         $('#placeholder').remove();
-
-//     //     if ($('#' + LOADING).length) {
-//     //     } else {
-//     //         // var form = Customize.disableApps();
-//     //         var elem = document.createElement('div');
-//     //         elem.setAttribute('id', 'cp-loading');
-
-//     //         let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, content)
-
-//     //         elem.append(frame)
-
-//     //         return function () {
-//     //             built = true;
-//     //             var intr;
-//     //             var append = function () {
-//     //                 if (!document.body) { return; }
-//     //                 clearInterval(intr);
-//     //                 document.body.appendChild(elem);
-//     //             };
-//     //             intr = setInterval(append, 100);
-//     //             append();
-//     // };
-            
-
-//     //     }
-
-//     };
-
-// return AppConfigScreen
-// });
-
-
-// SPDX-FileCopyrightText: 2023 XWiki CryptPad Team <contact@cryptpad.org> and contributors
-//
-// SPDX-License-Identifier: AGPL-3.0-or-later
-
-// bg #e7e7e7
-// blue #0087FF
-// text #3F4141
 define([
     'jquery',
     '/common/toolbar.js',
@@ -219,72 +62,6 @@ define([
     var sFrameChan;
 
     var Apps = {}
-    // SFCommon.create(waitFor(function(c) { APP.common = common = c; }));
-
-    // sFrameChan = common.getSframeChannel();
-    // sFrameChan.onReady(waitFor());
-
-    // const blocks = Sidebar.blocks;
-    // const grid = blocks.block([], 'cp-admin-customize-apps-grid');
-
-    // const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
-    // const availableApps = []
-        
-    // function select(app) {
-    //     if (availableApps.indexOf(app) === -1) {
-    //         availableApps.push(app);
-    //         $(`#${app}-block`).attr('class', 'active-app') 
-    //     } else {
-    //         availableApps.splice(availableApps.indexOf(app), 1)
-    //         $(`#${app}-block`).attr('class', 'inactive-app')
-    //     } 
-    // }
-
-    // allApps.forEach(app => { 
-    // // 'width: 50%; height: 80px; margin: 5px'
-    // // width:200px;height:20px;float:left;border:1px solid red
-    //     let appBlock = h('div',  {style: 'width:50%;height:20px;float:left;border:1px solid red'}, {class: 'inactive-app', id: `${app}-block`}, app)
-    //     $(appBlock).addClass('cp-app-drive-element-grid')
-    //     $(appBlock).addClass('cp-app-drive-element-row')
-    //     $(appBlock).addClass('cp-app-drive-new-doc')
-
-
-    //     $(grid).append(appBlock);
-    //     $(appBlock).on('click', () => select(app))
-    // }); 
-
-    // var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-    //     sFrameChan.query('Q_ADMIN_RPC', {
-    //         cmd: 'ADMIN_DECREE',
-    //         data: ['DISABLE_APPS', availableApps]
-    //     }, function (e, response) {
-    //         if (e || response.error) {
-    //             UI.warn(Messages.error);
-    //             $input.val('');
-    //             console.error(e, response);
-    //             done(false);
-    //             return;
-    //         }
-    //         flushCache();
-    //         done(true);
-    //         UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
-    //     });
-    // });
-    
-    
-    // let form = blocks.form([
-    //     grid 
-    // ], blocks.nav([save]));
-
-    // var elem = document.createElement('div');
-    // elem.setAttribute('id', 'cp-loading');
-
-    // let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
-
-    // elem.append(frame)
-
-    // var built = false;
-
 
     Apps.showScreen = function (form) {
         var LOADING = 'cp-loading';
diff --git a/www/install/main.js b/www/install/main.js
index 23836634b..5a2d90ce3 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -59,116 +59,6 @@ define([
         var registerClick = function () {
 
             AppConfigScreen.addConfigScreen()
-//             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
-//             $uname.val(uname);
-
-//             var passwd = $passwd.val();
-//             var confirmPassword = $confirm.val();
-
-//             if (!token) { token = $token.val().trim(); }
-
-//             var shouldImport = false;
-//             var doesAccept;
-//             try {
-//                 // if this throws there's either a horrible bug (which someone will report)
-//                 // or the instance admins did not configure a terms page.
-//                 doesAccept = true;
-//             } catch (err) {
-//                 console.error(err);
-//             }
-
-//             if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
-//                 var emailWarning = [
-//                     Messages.register_emailWarning0,
-//                     br(), br(),
-//                     Messages.register_emailWarning1,
-//                     br(), br(),
-//                     Messages.register_emailWarning2,
-//                     br(), br(),
-//                     Messages.register_emailWarning3,
-//                 ];
-
-//                 Feedback.send("EMAIL_USERNAME_WARNING", true);
-
-//                 return void UI.confirm(emailWarning, function (yes) {
-//                     if (!yes) { return; }
-//                     I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
-//                     registerClick();
-//                 });
-//             }
-
-//             /* basic validation */
-//             if (!Cred.isLongEnoughPassword(passwd)) {
-//                 var warning = Messages._getKey('register_passwordTooShort', [
-//                     Cred.MINIMUM_PASSWORD_LENGTH
-//                 ]);
-//                 return void UI.alert(warning);
-//             }
-
-//             if (passwd !== confirmPassword) { // do their passwords match?
-//                 return void UI.alert(Messages.register_passwordsDontMatch);
-//             }
-
-//             if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
-//                 return void UI.alert(Messages.register_mustAcceptTerms);
-//             }
-
-//             setTimeout(function () {
-//                 var span = h('span', [
-//                     h('h2', [
-//                         h('i.fa.fa-warning'),
-//                         ' ',
-//                         Messages.register_warning,
-//                     ]),
-//                     Messages.register_warning_note
-//                 ]);
-
-//             UI.confirm(span,
-//             function (yes) {
-//                 if (!yes) { return; }
-
-//                 Login.loginOrRegisterUI({
-//                     uname,
-//                     passwd,
-//                     isRegister: true,
-//                     onOTP: UI.getOTPScreen,
-//                     shouldImport,
-//                     cb: function (data) {
-//                         var proxy = data.proxy;
-//                         if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
-
-//                         Rpc.createAnonymous(data.network, function (e, call) {
-//                             if (e) { UI.alert(Messages.error); return console.error(e); }
-//                             var anon_rpc = call;
-
-//                             anon_rpc.send('ADD_FIRST_ADMIN', {
-//                                 token: token,
-//                                 edPublic: proxy.edPublic
-//                             }, function (e) {
-//                                 if (e) { UI.alert(Messages.error); return console.error(e); }
-//                                 window.location.href = '/drive/';
-//                             });
-//                         });
-
-//                         return true;
-//                     }
-//                 });
-//             }, {
-//                 ok: Messages.register_writtenPassword,
-//                 cancel: Messages.register_cancel,
-// /*  If we're certain that we aren't using these "*Class" APIs
-//     anywhere else then we can deprecate them and make this a
-//     custom modal in common-interface (or here).  */
-//                 cancelClass: 'btn.btn-cancel.btn-register',
-//                 okClass: 'btn.btn-danger.btn-register',
-//                 reverseOrder: true,
-//                 done: function ($dialog) {
-//                     $dialog.find('> div').addClass('half');
-//                 },
-//             });
-//             }, 150);
         };
 
         $register.click(registerClick);

From 2bf0c342d1bc693649ea5126aa07737ce7fb3b7f Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Thu, 23 May 2024 17:18:13 +0100
Subject: [PATCH 09/50] clean

---
 www/common/inner/sidebar-layout.js | 213 -----------------------------
 1 file changed, 213 deletions(-)

diff --git a/www/common/inner/sidebar-layout.js b/www/common/inner/sidebar-layout.js
index 2bf3aee7e..8003172e4 100644
--- a/www/common/inner/sidebar-layout.js
+++ b/www/common/inner/sidebar-layout.js
@@ -251,219 +251,6 @@ define([
         const items = {};
         sidebar.blocks = Sidebar.blocks
 
-        // blocks.labelledInput = (label, input, inputBlock) => {
-        //     let uid = Util.uid();
-        //     let id = `cp-${app}-item-${uid}`;
-        //     input.setAttribute('id', id);
-        //     let labelElement = h('label', { for: id }, label);
-        //     return h('div', { class: 'cp-labelled-input' }, [
-        //         labelElement,
-        //         inputBlock || input
-        //     ]);
-        // };
-
-        // blocks.icon = (icon) => {
-        //     let s = icon.split(' ');
-        //     let cls;
-        //     if (s.length > 1) {
-        //         cls = '.' + s.join('.');
-        //     } else {
-        //         let prefix = icon.slice(0, icon.indexOf('-'));
-        //         cls = `.${prefix}.${icon}`;
-        //     }
-        //     return h(`i${cls}`);
-        // };
-        // blocks.button = (type, icon, text) => {
-        //     type = type || 'primary';
-        //     return h(`button.btn.btn-${type}`, [
-        //         icon ? blocks.icon(icon) : undefined,
-        //         h('span', text)
-        //     ]);
-        // };
-        // blocks.nav = (buttons) => {
-        //     return h('nav', buttons);
-        // };
-        // blocks.form = (content, nav) => {
-        //     return h('div.cp-sidebar-form', [content, nav]);
-        // };
-        // blocks.input = (attr) => {
-        //     return h('input', attr);
-        // };
-        // blocks.inputButton = (input, button, opts) => {
-        //     if (opts.onEnterDelegate) {
-        //         $(input).on('keypress', e => {
-        //             if (e.which === 13) {
-        //                 $(button).click();
-        //             }
-        //         });
-        //     }
-        //     return h('div.cp-sidebar-input-block', [input, button]);
-        // };
-        // blocks.code = val => {
-        //     return h('code', val);
-        // };
-        // blocks.inline = (value, className) => {
-        //     let attr = {};
-        //     if (className) { attr.class = className; }
-        //     return h('span', attr, value);
-        // };
-        // blocks.block = (content, className) => {
-        //     let attr = {};
-        //     if (className) { attr.class = className; }
-        //     return h('div', attr, content);
-        // };
-        // blocks.paragraph = (content) => {
-        //     return h('p', content);
-        // };
-
-        // blocks.alert = function (type, big, content) {
-        //     var isBigClass = big ? '.cp-sidebar-bigger-alert' : ''; // Add the class if we want a bigger font-size
-        //     return h('div.alert.alert-' + type + isBigClass, content);
-        // };
-
-        // blocks.alertHTML = function (message, element) {
-        //     return h('span', [
-        //         UIElements.setHTML(h('p'), message),
-        //         element
-        // ]);
-        // };
-        // blocks.pre = (value) => {
-        //     return h('pre', value);
-        // };
-
-        // blocks.textarea = function (attributes, value) {
-        //     return h('textarea', attributes, value || '');
-        // };
-
-        // blocks.unorderedList = function (entries) {
-        //     const ul = h('ul');
-
-        //     ul.updateContent = (entries) => {
-        //         ul.innerHTML = '';
-        //         entries.forEach(entry => {
-        //             const li = h('li', entry);
-        //             ul.appendChild(li);
-        //         });
-        //     };
-        //     ul.updateContent(entries);
-
-        //     return ul;
-        // };
-
-        // blocks.checkbox = (key, label, state, opts, onChange) => {
-        //     var box = UI.createCheckbox(`cp-${app}-${key}`, label, state, { label: { class: 'noTitle' } });
-        //     if (opts && opts.spinner) {
-        //         box.spinner = UI.makeSpinner($(box));
-        //     }
-        //     if (typeof(onChange) === "function"){
-        //         $(box).find('input').on('change', function() {
-        //             onChange(this.checked);
-        //         });
-        //     }
-        //     return box;
-        // };
-
-        // blocks.table = function (header, entries) {
-        //     const table = h('table.cp-sidebar-table');
-        //     if (header) {
-        //         const headerValues = header.map(value => {
-        //             const lastWord = value.split(' ').pop(); // Extracting the last word
-        //             return h('th', { class: lastWord.toLowerCase() }, value); // Modified to use the last word
-        //         });
-        //         const headerRow = h('thead', h('tr', headerValues));
-        //         table.appendChild(headerRow);
-        //     }
-
-        //     let getRow = line => {
-        //         return h('tr', line.map(value => {
-        //             if (typeof(value) === "object" && value.content) {
-        //                 return h('td', value.attr || {}, value.content);
-        //             }
-        //             return h('td', value);
-        //         }));
-        //     };
-        //     table.updateContent = (newEntries) => {
-        //         $(table).show().find('tbody').remove();
-        //         if (!newEntries.length) {
-        //             return void $(table).hide();
-        //         }
-        //         let bodyContent = [];
-        //         newEntries.forEach(line => {
-        //             const row = getRow(line);
-        //             bodyContent.push(row);
-        //         });
-        //         table.appendChild(h('tbody', bodyContent));
-        //     };
-        //     table.updateContent(entries);
-        //     table.addLine = (line) => {
-        //         const row = getRow(line);
-        //         $(table).find('tbody').append(row);
-        //     };
-
-        //     return table;
-        // };
-
-        // blocks.link = function (text, url, isSafe) {
-        //     var link = h('a', { href: url }, text);
-        //     $(link).click(function (ev) {
-        //         ev.preventDefault();
-        //         ev.stopPropagation();
-        //         if (isSafe) {
-        //             common.openURL(url);
-        //         } else {
-        //             common.openUnsafeURL(url);
-        //         }
-        //     });
-        //     return link;
-        // };
-
-        // blocks.activeButton = function (type, icon, text, callback, keepEnabled) {
-        //     var button = blocks.button(type, icon, text);
-        //     var $button = $(button);
-        //     button.spinner = h('span');
-        //     var spinner = UI.makeSpinner($(button.spinner));
-
-        //     Util.onClickEnter($button, function () {
-        //         spinner.spin();
-        //         if (!keepEnabled) { $button.attr('disabled', 'disabled'); }
-        //         let done = success => {
-        //             $button.removeAttr('disabled');
-        //             if (success) { return void spinner.done(); }
-        //             spinner.hide();
-        //         };
-        //         // The callback can be synchrnous or async, handle "done" in both ways
-        //         let success = callback(done); // Async
-        //         if (typeof(success) === "boolean") { done(success); } // Sync
-        //     });
-        //     return button;
-        // };
-
-        // const keyToCamlCase = (key) => {
-        //     return key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
-        // };
-        // blocks.activeCheckbox = (data) => {
-        //     const state = data.getState();
-        //     const key = data.key;
-        //     const safeKey = keyToCamlCase(key);
-        //     var labelKey = `${app}_${safeKey}Label`;
-        //     var titleKey = `${app}_${safeKey}Title`;
-        //     var label = Messages[labelKey] || Messages[titleKey];
-        //     var box = blocks.checkbox(key, label, state, { spinner: true }, checked => {
-        //         var $cbox = $(box);
-        //         var $checkbox = $cbox.find('input');
-        //         let spinner = box.spinner;
-        //         spinner.spin();
-        //         $checkbox.attr('disabled', 'disabled');
-        //         var val = !!checked;
-        //         data.query(val, function (state) {
-        //             spinner.done();
-        //             $checkbox[0].checked = state;
-        //             $checkbox.removeAttr('disabled');
-        //         });
-        //     });
-        //     return box;
-        // };
-
         sidebar.addItem = (key, get, options) => {
             const safeKey = keyToCamlCase(key);
             get((content) => {

From 4ec0e7e50e288b5a61cc923bd35311ef47cf2728 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Fri, 24 May 2024 13:36:19 +0100
Subject: [PATCH 10/50] add sendadmindecree

---
 www/install/appconfigscreen.js | 105 ++++++++++++++++++++++++++++++---
 www/install/main.js            |  70 +++++++++++++++++++++-
 2 files changed, 164 insertions(+), 11 deletions(-)

diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index 17fc0d023..79ab20612 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -1,3 +1,5 @@
+
+
 define([
     'jquery',
     '/common/toolbar.js',
@@ -48,20 +50,107 @@ define([
     ConfigScreen
 ) {
 
-var AppConfigScreen = {}
 
+    Messages.admin_appSelection = 'App configuration saved'
+    Messages.admin_appsTitle = "Choose your applications"
+    Messages.admin_appsHint = "Choose which apps are available to users on your instance."
+    Messages.admin_cat_apps = "Apps"
 
-AppConfigScreen.addConfigScreen = function (config) {
-        var LOADING = 'cp-loading';
-        config = config || {};
+    var APP = window.APP = {};
 
-        if ($('#' + LOADING).length) {
+    var Nacl = window.nacl;
+    var common;
+    var sFrameChan;
+    // SFCommon.create(waitFor(function(c) { APP.common = common = c; }));
+
+    // sFrameChan = common.getSframeChannel();
+    // sFrameChan.onReady(waitFor());
+
+    const blocks = Sidebar.blocks;
+    const grid = blocks.block([], 'cp-admin-customize-apps-grid');
+
+    const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
+    const availableApps = []
+        
+    function select(app) {
+        if (availableApps.indexOf(app) === -1) {
+            availableApps.push(app);
+            $(`#${app}-block`).attr('class', 'active-app') 
         } else {
-            ConfigScreen();
-        }
+            availableApps.splice(availableApps.indexOf(app), 1)
+            $(`#${app}-block`).attr('class', 'inactive-app')
+        } 
+    }
 
+    allApps.forEach(app => { 
+    // 'width: 50%; height: 80px; margin: 5px'
+    // width:200px;height:20px;float:left;border:1px solid red
+        let appBlock = h('div',  {style: 'width:50%;height:20px;float:left;border:1px solid red'}, {class: 'inactive-app', id: `${app}-block`}, app)
+        $(appBlock).addClass('cp-app-drive-element-grid')
+        $(appBlock).addClass('cp-app-drive-element-row')
+        $(appBlock).addClass('cp-app-drive-new-doc')
+
+
+        $(grid).append(appBlock);
+        $(appBlock).on('click', () => select(app))
+    }); 
+    
+
+    var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+        sFrameChan.query('Q_ADMIN_RPC', {
+            cmd: 'ADMIN_DECREE',
+            data: ['DISABLE_APPS', availableApps]
+        }, function (e, response) {
+            if (e || response.error) {
+                UI.warn(Messages.error);
+                $input.val('');
+                console.error(e, response);
+                done(false);
+                return;
+            }
+            flushCache();
+            done(true);
+            UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+        });
+    });
+    
+    
+    let form = blocks.form([
+        grid 
+    ], blocks.nav([save]));
+
+    return grid
+
+    var elem = document.createElement('div');
+    elem.setAttribute('id', 'cp-loading');
+
+    let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
+
+    elem.append(frame)
+
+            built = true;
+        var intr;
+        var append = function () {
+            if (!document.body) { return; }
+            clearInterval(intr);
+            document.body.appendChild(elem);
+        };
+        intr = setInterval(append, 100);
+        append();
+
+
+    return function () {
+        built = true;
+        var intr;
+        var append = function () {
+            if (!document.body) { return; }
+            clearInterval(intr);
+            document.body.appendChild(elem);
+        };
+        intr = setInterval(append, 100);
+        append();
     };
 
-return AppConfigScreen
+
 });
 
diff --git a/www/install/main.js b/www/install/main.js
index 5a2d90ce3..35e8cfbb5 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -17,12 +17,18 @@ define([
     '/customize/pages.js',
     '/common/rpc.js',
     'appconfigscreen.js',
+    '/common/inner/sidebar-layout.js',
 
     'css!/components/components-font-awesome/css/font-awesome.min.css',
-], function ($, Login, Cryptpad, /*Test,*/ Cred, UI, Util, Realtime, Constants, Feedback, LocalStore, h, Pages, Rpc, AppConfigScreen) {
+], function ($, Login, Cryptpad, /*Test,*/ Cred, UI, Util, Realtime, Constants, Feedback, LocalStore, h, Pages, Rpc, AppConfigScreen, Sidebar) {
     if (window.top !== window) { return; }
     var Messages = Cryptpad.Messages;
     $(function () {
+
+        Messages.admin_appSelection = 'App configuration saved'
+        Messages.admin_appsTitle = "Choose your applications"
+        Messages.admin_appsHint = "Choose which apps are available to users on your instance."
+        Messages.admin_cat_apps = "Apps"
         // if (LocalStore.isLoggedIn()) {
         //     // already logged in, redirect to drive
         //     document.location.href = '/drive/';
@@ -56,9 +62,67 @@ define([
             }
         }
 
-        var registerClick = function () {
+        var bloop = function (sendAdminDecree) {
+
+            const blocks = Sidebar.blocks;
+            var grid = AppConfigScreen
+            
+            var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+                console.log('hello!');
+                console.log(sendAdminDecree)
+                sendAdminDecree()
+                UI.log('Messages._getKey(, [Messages.admin_appSelection])');
+            });
+
+            
+            let form = blocks.form([
+                grid 
+            ], blocks.nav([save]));
+
+            var elem = document.createElement('div');
+            elem.setAttribute('id', 'cp-loading');
+            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
+            elem.append(frame)
+
+            built = true;
+        var intr;
+        var append = function () {
+            if (!document.body) { return; }
+            clearInterval(intr);
+            document.body.appendChild(elem);
+        };
+        intr = setInterval(append, 100);
+        append();
+
+
+            // return function () {
+            //     built = true;
+            //     var intr;
+            //     var append = function () {
+            //         if (!document.body) { return; }
+            //         clearInterval(intr);
+            //         document.body.appendChild(elem);
+            //     };
+            //     intr = setInterval(append, 100);
+            //     append();
+            // };
+        }
+
+        var registerClick = function () {
+        // AppConfigScreen
+        // console.log(AppConfigScreen)
+            // var sendAdminDecree = 'bleeop'
+                            let sendAdminDecree = function (command, data, callback) {
+                            console.log('belp')
+                    // var params = ['ADMIN_DECREE', [command, data]];  
+                    // rpc.send('ADMIN', params, callback)
+                };
+            bloop(sendAdminDecree)
+
+            // AppConfigScreen
+            // console.log(AppConfigScreen)
+            // console.log(AppConfigScreen)
 
-            AppConfigScreen.addConfigScreen()
         };
 
         $register.click(registerClick);

From aeb3a6d0c227f34106ac55da79b8ed08afe0a82e Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Fri, 24 May 2024 16:36:34 +0100
Subject: [PATCH 11/50] install app screen working

---
 config/config.example.js       |   2 +-
 www/install/appconfigscreen.js | 105 +----------------
 www/install/apps.js            | 131 ---------------------
 www/install/configscreen.js    | 146 -----------------------
 www/install/main.js            | 208 ++++++++++++++++++++++++++-------
 5 files changed, 172 insertions(+), 420 deletions(-)
 delete mode 100644 www/install/apps.js
 delete mode 100644 www/install/configscreen.js

diff --git a/config/config.example.js b/config/config.example.js
index ff7ff3852..ef5cab437 100644
--- a/config/config.example.js
+++ b/config/config.example.js
@@ -172,7 +172,7 @@ module.exports = {
      */
     adminKeys: [
 
-    "[sproing@localhost:3000/ieibXenySscYFjdntu0mFglpvQLSrbBiy0V+wzizaGA=]"
+    // "[sproing@localhost:3000/ieibXenySscYFjdntu0mFglpvQLSrbBiy0V+wzizaGA=]"
 
     ],
 
diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index 79ab20612..2e13afc0b 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -2,26 +2,10 @@
 
 define([
     'jquery',
-    '/common/toolbar.js',
-    '/components/nthen/index.js',
-    '/common/sframe-common.js',
-    '/common/common-interface.js',
-    '/common/common-ui-elements.js',
-    '/common/common-util.js',
-    '/common/common-hash.js',
+
     '/common/inner/sidebar-layout.js',
     '/customize/messages.js',
-    '/common/common-signing-keys.js',
     '/common/hyperscript.js',
-    '/common/clipboard.js',
-    'json.sortify',
-    '/customize/application_config.js',
-    '/api/config',
-    '/api/instance',
-    '/lib/datepicker/flatpickr.js',
-        'configscreen.js',
-
-
 
     '/common/hyperscript.js',
     'css!/lib/datepicker/flatpickr.min.css',
@@ -30,42 +14,18 @@ define([
     'less!/admin/app-admin.less',
 ], function(
     $,
-    Toolbar,
-    nThen,
-    SFCommon,
-    UI,
-    UIElements,
-    Util,
-    Hash,
     Sidebar,
     Messages,
-    Keys,
     h,
-    Clipboard,
-    Sortify,
-    AppConfig,
-    ApiConfig,
-    Instance,
-    Flatpickr,
-    ConfigScreen
+
 ) {
 
-
+    //XXX
     Messages.admin_appSelection = 'App configuration saved'
     Messages.admin_appsTitle = "Choose your applications"
     Messages.admin_appsHint = "Choose which apps are available to users on your instance."
     Messages.admin_cat_apps = "Apps"
 
-    var APP = window.APP = {};
-
-    var Nacl = window.nacl;
-    var common;
-    var sFrameChan;
-    // SFCommon.create(waitFor(function(c) { APP.common = common = c; }));
-
-    // sFrameChan = common.getSframeChannel();
-    // sFrameChan.onReady(waitFor());
-
     const blocks = Sidebar.blocks;
     const grid = blocks.block([], 'cp-admin-customize-apps-grid');
 
@@ -83,74 +43,17 @@ define([
     }
 
     allApps.forEach(app => { 
-    // 'width: 50%; height: 80px; margin: 5px'
-    // width:200px;height:20px;float:left;border:1px solid red
         let appBlock = h('div',  {style: 'width:50%;height:20px;float:left;border:1px solid red'}, {class: 'inactive-app', id: `${app}-block`}, app)
         $(appBlock).addClass('cp-app-drive-element-grid')
         $(appBlock).addClass('cp-app-drive-element-row')
         $(appBlock).addClass('cp-app-drive-new-doc')
 
-
         $(grid).append(appBlock);
         $(appBlock).on('click', () => select(app))
     }); 
     
 
-    var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-        sFrameChan.query('Q_ADMIN_RPC', {
-            cmd: 'ADMIN_DECREE',
-            data: ['DISABLE_APPS', availableApps]
-        }, function (e, response) {
-            if (e || response.error) {
-                UI.warn(Messages.error);
-                $input.val('');
-                console.error(e, response);
-                done(false);
-                return;
-            }
-            flushCache();
-            done(true);
-            UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
-        });
-    });
-    
-    
-    let form = blocks.form([
-        grid 
-    ], blocks.nav([save]));
-
-    return grid
-
-    var elem = document.createElement('div');
-    elem.setAttribute('id', 'cp-loading');
-
-    let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
-
-    elem.append(frame)
-
-            built = true;
-        var intr;
-        var append = function () {
-            if (!document.body) { return; }
-            clearInterval(intr);
-            document.body.appendChild(elem);
-        };
-        intr = setInterval(append, 100);
-        append();
-
-
-    return function () {
-        built = true;
-        var intr;
-        var append = function () {
-            if (!document.body) { return; }
-            clearInterval(intr);
-            document.body.appendChild(elem);
-        };
-        intr = setInterval(append, 100);
-        append();
-    };
-
+    return [availableApps, grid]
 
 });
 
diff --git a/www/install/apps.js b/www/install/apps.js
deleted file mode 100644
index 015a1b890..000000000
--- a/www/install/apps.js
+++ /dev/null
@@ -1,131 +0,0 @@
-define([
-    'jquery',
-    '/common/toolbar.js',
-    '/components/nthen/index.js',
-    '/common/sframe-common.js',
-    '/common/common-interface.js',
-    '/common/common-ui-elements.js',
-    '/common/common-util.js',
-    '/common/common-hash.js',
-    '/common/inner/sidebar-layout.js',
-    '/customize/messages.js',
-    '/common/common-signing-keys.js',
-    '/common/hyperscript.js',
-    '/common/clipboard.js',
-    'json.sortify',
-    '/customize/application_config.js',
-    '/api/config',
-    '/api/instance',
-    '/lib/datepicker/flatpickr.js',
-    '/common/hyperscript.js',
-    'css!/lib/datepicker/flatpickr.min.css',
-    '/customize/messages.js',
-        '/customize/loading.js',
-
-
-
-    '/customize/messages.js',
-    // '/install/configscreen.css',
-    'less!/customize/src/less2/include/loading.less'
-], function ($,
-    Toolbar,
-    nThen,
-    SFCommon,
-    UI,
-    UIElements,
-    Util,
-    Hash,
-    Sidebar,
-    Messages,
-    Keys,
-    h,
-    Clipboard,
-    Sortify,
-    AppConfig,
-    ApiConfig,
-    Instance,
-    Flatpickr,
-    Messages,
-    Loading) {
-
-
-    //XXX 
-    Messages.admin_appSelection = 'App configuration saved'
-    Messages.admin_appsTitle = "Choose your applications"
-    Messages.admin_appsHint = "Choose which apps are available to users on your instance."
-    Messages.admin_cat_apps = "Apps"
-
-    var APP = window.APP = {};
-
-    var Nacl = window.nacl;
-    var common;
-    var sFrameChan;
-
-    var Apps = {}
-
-    Apps.showScreen = function (form) {
-        var LOADING = 'cp-loading';
-
-            var loadingText = "config.loadingText";
-        var todo = function () {
-            var $loading = $('#' + LOADING);
-            // Show the loading screen
-            $loading.css('display', '');
-            $loading.removeClass('cp-loading-hidden');
-            $loading.removeClass('cp-loading-transparent');
-            if (config.newProgress) {
-                var progress = h('div.cp-loading-progress', [
-                    h('p.cp-loading-progress-list'),
-                    h('p.cp-loading-progress-container')
-                ]);
-                $loading.find('.cp-loading-spinner-container').after(progress);
-            }
-            if (!$loading.find('.cp-loading-progress').length) {
-                // Add spinner
-                $('.cp-loading-spinner-container').show();
-            }
-            // Add loading text
-            if (loadingText) {
-                $('#' + LOADING).find('#cp-loading-message').show().text(loadingText);
-            } else {
-                $('#' + LOADING).find('#cp-loading-message').hide().text('');
-            }
-        };
-        if ($('#' + LOADING).length) {
-            todo();
-        } else {
-            Loading();
-            todo();
-        }
-
-        $('html').toggleClass('cp-loading-noscroll', true);
-        // Remove the inner placeholder (iframe)
-        $('#placeholder').remove();
-        // var elem = document.createElement('div');
-        // elem.setAttribute('id', 'cp-loading');
-
-        // let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
-
-        // elem.append(frame)
-
-        // return function () {
-        // built = true;
-        // var intr;
-        // var append = function () {
-        //     if (!document.body) { return; }
-        //     clearInterval(intr);
-        //     document.body.appendChild(elem);
-        // };
-        // intr = setInterval(append, 100);
-        // append();
-        
-        // }
-
-    };
-
-    return Apps
-});
-
-
-
-
diff --git a/www/install/configscreen.js b/www/install/configscreen.js
deleted file mode 100644
index 715745e0f..000000000
--- a/www/install/configscreen.js
+++ /dev/null
@@ -1,146 +0,0 @@
-// SPDX-FileCopyrightText: 2023 XWiki CryptPad Team <contact@cryptpad.org> and contributors
-//
-// SPDX-License-Identifier: AGPL-3.0-or-later
-
-// bg #e7e7e7
-// blue #0087FF
-// text #3F4141
-define([
-    'jquery',
-    '/common/toolbar.js',
-    '/components/nthen/index.js',
-    '/common/sframe-common.js',
-    '/common/common-interface.js',
-    '/common/common-ui-elements.js',
-    '/common/common-util.js',
-    '/common/common-hash.js',
-    '/common/inner/sidebar-layout.js',
-    '/customize/messages.js',
-    '/common/common-signing-keys.js',
-    '/common/hyperscript.js',
-    '/common/clipboard.js',
-    'json.sortify',
-    '/customize/application_config.js',
-    '/api/config',
-    '/api/instance',
-    '/lib/datepicker/flatpickr.js',
-    '/common/hyperscript.js',
-    'css!/lib/datepicker/flatpickr.min.css',
-    '/customize/messages.js',
-
-
-    '/customize/messages.js',
-    // '/install/configscreen.css',
-    'less!/customize/src/less2/include/loading.less'
-], function ($,
-    Toolbar,
-    nThen,
-    SFCommon,
-    UI,
-    UIElements,
-    Util,
-    Hash,
-    Sidebar,
-    Messages,
-    Keys,
-    h,
-    Clipboard,
-    Sortify,
-    AppConfig,
-    ApiConfig,
-    Instance,
-    Flatpickr,
-    Messages) {
-
-
-    //XXX 
-    Messages.admin_appSelection = 'App configuration saved'
-    Messages.admin_appsTitle = "Choose your applications"
-    Messages.admin_appsHint = "Choose which apps are available to users on your instance."
-    Messages.admin_cat_apps = "Apps"
-
-    var APP = window.APP = {};
-
-    var Nacl = window.nacl;
-    var common;
-    var sFrameChan;
-    // SFCommon.create(waitFor(function(c) { APP.common = common = c; }));
-
-    // sFrameChan = common.getSframeChannel();
-    // sFrameChan.onReady(waitFor());
-
-    const blocks = Sidebar.blocks;
-    const grid = blocks.block([], 'cp-admin-customize-apps-grid');
-
-    const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
-    const availableApps = []
-        
-    function select(app) {
-        if (availableApps.indexOf(app) === -1) {
-            availableApps.push(app);
-            $(`#${app}-block`).attr('class', 'active-app') 
-        } else {
-            availableApps.splice(availableApps.indexOf(app), 1)
-            $(`#${app}-block`).attr('class', 'inactive-app')
-        } 
-    }
-
-    allApps.forEach(app => { 
-    // 'width: 50%; height: 80px; margin: 5px'
-    // width:200px;height:20px;float:left;border:1px solid red
-        let appBlock = h('div',  {style: 'width:50%;height:20px;float:left;border:1px solid red'}, {class: 'inactive-app', id: `${app}-block`}, app)
-        $(appBlock).addClass('cp-app-drive-element-grid')
-        $(appBlock).addClass('cp-app-drive-element-row')
-        $(appBlock).addClass('cp-app-drive-new-doc')
-
-
-        $(grid).append(appBlock);
-        $(appBlock).on('click', () => select(app))
-    }); 
-
-    var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-        sFrameChan.query('Q_ADMIN_RPC', {
-            cmd: 'ADMIN_DECREE',
-            data: ['DISABLE_APPS', availableApps]
-        }, function (e, response) {
-            if (e || response.error) {
-                UI.warn(Messages.error);
-                $input.val('');
-                console.error(e, response);
-                done(false);
-                return;
-            }
-            flushCache();
-            done(true);
-            UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
-        });
-    });
-    
-    
-    let form = blocks.form([
-        grid 
-    ], blocks.nav([save]));
-
-    var elem = document.createElement('div');
-    elem.setAttribute('id', 'cp-loading');
-
-    let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
-
-    elem.append(frame)
-
-    var built = false;
-
-
-    return function () {
-        built = true;
-        var intr;
-        var append = function () {
-            if (!document.body) { return; }
-            clearInterval(intr);
-            document.body.appendChild(elem);
-        };
-        intr = setInterval(append, 100);
-        append();
-    };
-});
-
diff --git a/www/install/main.js b/www/install/main.js
index 35e8cfbb5..eb6c6168b 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -29,11 +29,11 @@ define([
         Messages.admin_appsTitle = "Choose your applications"
         Messages.admin_appsHint = "Choose which apps are available to users on your instance."
         Messages.admin_cat_apps = "Apps"
-        // if (LocalStore.isLoggedIn()) {
-        //     // already logged in, redirect to drive
-        //     document.location.href = '/drive/';
-        //     return;
-        // }
+        if (LocalStore.isLoggedIn()) {
+            // already logged in, redirect to drive
+            document.location.href = '/drive/';
+            return;
+        }
 
 
         // text and password input fields
@@ -62,15 +62,28 @@ define([
             }
         }
 
-        var bloop = function (sendAdminDecree) {
+        var showScreen = function (sendAdminDecree) {
 
             const blocks = Sidebar.blocks;
-            var grid = AppConfigScreen
+            var availableApps = AppConfigScreen[0]
+            var grid = AppConfigScreen[1]
             
             var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-                console.log('hello!');
-                console.log(sendAdminDecree)
-                sendAdminDecree()
+                sendAdminDecree('DISABLE_APPS', availableApps, function (e, response) {
+                  
+                    if (e || response.error) {
+                        UI.warn(Messages.error);
+                        $input.val('');
+                        console.error(e, response);
+                        done(false);
+                        return;
+                    }
+                    // flushCache();
+                    done(true);
+                    UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+                    window.location.href = '/drive/';
+
+                })
                 UI.log('Messages._getKey(, [Messages.admin_appSelection])');
             });
 
@@ -85,43 +98,156 @@ define([
             elem.append(frame)
 
             built = true;
-        var intr;
-        var append = function () {
-            if (!document.body) { return; }
-            clearInterval(intr);
-            document.body.appendChild(elem);
-        };
-        intr = setInterval(append, 100);
-        append();
+            var intr;
+            var append = function () {
+                if (!document.body) { return; }
+                clearInterval(intr);
+                document.body.appendChild(elem);
+            };
+            intr = setInterval(append, 100);
+            append();
 
 
-            // return function () {
-            //     built = true;
-            //     var intr;
-            //     var append = function () {
-            //         if (!document.body) { return; }
-            //         clearInterval(intr);
-            //         document.body.appendChild(elem);
-            //     };
-            //     intr = setInterval(append, 100);
-            //     append();
-            // };
         }
 
         var registerClick = function () {
-        // AppConfigScreen
-        // console.log(AppConfigScreen)
-            // var sendAdminDecree = 'bleeop'
-                            let sendAdminDecree = function (command, data, callback) {
-                            console.log('belp')
-                    // var params = ['ADMIN_DECREE', [command, data]];  
-                    // rpc.send('ADMIN', params, callback)
-                };
-            bloop(sendAdminDecree)
 
-            // AppConfigScreen
-            // console.log(AppConfigScreen)
-            // console.log(AppConfigScreen)
+            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
+            $uname.val(uname);
+
+            var passwd = $passwd.val();
+            var confirmPassword = $confirm.val();
+
+            if (!token) { token = $token.val().trim(); }
+
+            var shouldImport = false;
+            var doesAccept;
+            try {
+                // if this throws there's either a horrible bug (which someone will report)
+                // or the instance admins did not configure a terms page.
+                doesAccept = true;
+            } catch (err) {
+                console.error(err);
+            }
+
+            if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
+                var emailWarning = [
+                    Messages.register_emailWarning0,
+                    br(), br(),
+                    Messages.register_emailWarning1,
+                    br(), br(),
+                    Messages.register_emailWarning2,
+                    br(), br(),
+                    Messages.register_emailWarning3,
+                ];
+
+                Feedback.send("EMAIL_USERNAME_WARNING", true);
+
+                return void UI.confirm(emailWarning, function (yes) {
+                    if (!yes) { return; }
+                    I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
+                    registerClick();
+                });
+            }
+
+            /* basic validation */
+            if (!Cred.isLongEnoughPassword(passwd)) {
+                var warning = Messages._getKey('register_passwordTooShort', [
+                    Cred.MINIMUM_PASSWORD_LENGTH
+                ]);
+                return void UI.alert(warning);
+            }
+
+            if (passwd !== confirmPassword) { // do their passwords match?
+                return void UI.alert(Messages.register_passwordsDontMatch);
+            }
+
+            if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
+                return void UI.alert(Messages.register_mustAcceptTerms);
+            }
+
+            let startOnboarding = function (network, proxy) {
+             Rpc.create(network, proxy.edPrivate, proxy.edPublic, function (e, rpc) {
+                if (e) {
+                  // TODO: handle error
+                  return;
+                }
+
+                let sendAdminDecree = function (command, data, callback) {
+                    var params = ['ADMIN_DECREE', [command, data]];  
+                    rpc.send('ADMIN', params, callback)
+                };
+
+                showScreen(sendAdminDecree)
+              
+            });
+  
+    };
+
+            setTimeout(function () {
+                var span = h('span', [
+                    h('h2', [
+                        h('i.fa.fa-warning'),
+                        ' ',
+                        Messages.register_warning,
+                    ]),
+                    Messages.register_warning_note
+                ]);
+
+            UI.confirm(span,
+            function (yes) {
+                if (!yes) { return; }
+
+                Login.loginOrRegisterUI({
+                    uname,
+                    passwd,
+                    isRegister: true,
+                    onOTP: UI.getOTPScreen,
+                    shouldImport,
+                    cb: function (data) {
+                        var proxy = data.proxy;
+                        if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
+
+                        Rpc.createAnonymous(data.network, function (e, call) {
+                            if (e) { UI.alert(Messages.error); return console.error(e); }
+                            var anon_rpc = call;
+
+                            anon_rpc.send('ADD_FIRST_ADMIN', {
+                                token: token,
+                                edPublic: proxy.edPublic
+                            }, function (e) {
+                                if (e) { UI.alert(Messages.error); return console.error(e); }
+                                            // bloop(sendAdminDecree)
+
+                                startOnboarding(data.network, proxy);
+                            });
+                        });
+
+                        return true;
+                    }
+                });
+            }, {
+                ok: Messages.register_writtenPassword,
+                cancel: Messages.register_cancel,
+/*  If we're certain that we aren't using these "*Class" APIs
+    anywhere else then we can deprecate them and make this a
+    custom modal in common-interface (or here).  */
+                cancelClass: 'btn.btn-cancel.btn-register',
+                okClass: 'btn.btn-danger.btn-register',
+                reverseOrder: true,
+                done: function ($dialog) {
+                    $dialog.find('> div').addClass('half');
+                },
+            });
+            }, 150);
+
+            //                 let sendAdminDecree = function (command, data, callback) {
+ 
+            //     };
+            // bloop(sendAdminDecree)
+
 
         };
 

From 8a3616072952c6dedb2686890cfa039dbd24bc5c Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 28 May 2024 16:45:58 +0100
Subject: [PATCH 12/50] link screens

---
 config/config.example.js       |   2 -
 www/install/appconfigscreen.js | 403 ++++++++++++++++++++++++++++++---
 www/install/main.js            | 323 ++++++++++++++------------
 3 files changed, 550 insertions(+), 178 deletions(-)

diff --git a/config/config.example.js b/config/config.example.js
index ef5cab437..d6ebb4a50 100644
--- a/config/config.example.js
+++ b/config/config.example.js
@@ -172,8 +172,6 @@ module.exports = {
      */
     adminKeys: [
 
-    // "[sproing@localhost:3000/ieibXenySscYFjdntu0mFglpvQLSrbBiy0V+wzizaGA=]"
-
     ],
 
     /* =====================
diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index 2e13afc0b..620d50e04 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -1,11 +1,11 @@
-
-
 define([
     'jquery',
-
     '/common/inner/sidebar-layout.js',
     '/customize/messages.js',
     '/common/hyperscript.js',
+    '/common/common-interface.js',
+    '/common/common-util.js',
+    '/api/instance',
 
     '/common/hyperscript.js',
     'css!/lib/datepicker/flatpickr.min.css',
@@ -17,43 +17,386 @@ define([
     Sidebar,
     Messages,
     h,
+    UI,
+    Util,
+    Instance
 
 ) {
 
-    //XXX
-    Messages.admin_appSelection = 'App configuration saved'
-    Messages.admin_appsTitle = "Choose your applications"
-    Messages.admin_appsHint = "Choose which apps are available to users on your instance."
-    Messages.admin_cat_apps = "Apps"
+    var AppConfigScreen = {}
 
     const blocks = Sidebar.blocks;
-    const grid = blocks.block([], 'cp-admin-customize-apps-grid');
 
-    const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
-    const availableApps = []
-        
-    function select(app) {
-        if (availableApps.indexOf(app) === -1) {
-            availableApps.push(app);
-            $(`#${app}-block`).attr('class', 'active-app') 
-        } else {
-            availableApps.splice(availableApps.indexOf(app), 1)
-            $(`#${app}-block`).attr('class', 'inactive-app')
-        } 
+    AppConfigScreen.mfaRegistrationScreen = function(sendAdminDecree) {
+                console.log('mreao1')
+
+
+
+        var restrict = blocks.activeCheckbox({
+            key: 'registration',
+            getState: function () {
+                return false
+            },
+            query: function (val, setState) {
+            //     sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
+                
+            //     if (e || response.error) {
+            //         UI.warn(Messages.error);
+            //         $input.val('');
+            //         console.error(e, response);
+            //         done(false);
+            //         return;
+            //     }
+            //     // flushCache();
+            //     done(true);
+            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+
+            // })
+            },
+        });
+
+        var forceMFA = blocks.activeCheckbox({
+            key: 'forcemfa',
+            getState: function () {
+                return false
+            },
+            query: function (val, setState) {
+            
+            //     sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
+                
+            //     if (e || response.error) {
+            //         UI.warn(Messages.error);
+            //         $input.val('');
+            //         console.error(e, response);
+            //         done(false);
+            //         return;
+            //     }
+            //     // flushCache();
+            //     done(true);
+            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+
+            // })
+            },
+        });
+
+        var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+            // document.location.href = '/drive/';
+            return;
+        })
+
+        var form = blocks.form([restrict, forceMFA], [button])
+        return form
+    
+    
     }
 
-    allApps.forEach(app => { 
-        let appBlock = h('div',  {style: 'width:50%;height:20px;float:left;border:1px solid red'}, {class: 'inactive-app', id: `${app}-block`}, app)
-        $(appBlock).addClass('cp-app-drive-element-grid')
-        $(appBlock).addClass('cp-app-drive-element-row')
-        $(appBlock).addClass('cp-app-drive-new-doc')
-
-        $(grid).append(appBlock);
-        $(appBlock).on('click', () => select(app))
-    }); 
+    AppConfigScreen.titleConfig = function (sendAdminDecree) {
     
+        const blocks = Sidebar.blocks;
+
+        var input = blocks.input({
+            type: 'text',
+            value:  '',
+            placeholder: 'ApiConfig.httpUnsafeOrigin,',
+            'aria-labelledby': 'cp-admin-name'
+        });
+        var $input = $(input);
+        var textarea = blocks.textarea({
+            placeholder: Messages.home_host || '',
+            'aria-labelledby': 'cp-admin-description'
+        }, 'instanceDescription');
+        var $description = $(textarea);
+
+        let inputLogo = blocks.input({
+                type: 'file',
+                accept: 'image/*',
+                'aria-labelledby': 'cp-admin-logo'
+            });
+
+            var currentContainer = blocks.block([], 'cp-admin-customize-logo');
+            let redraw = () => {
+                var current = h('img', {src: '/api/logo?'+(+new Date())});
+                $(currentContainer).empty().append(current);
+            };
+            redraw();
+
+            var upload = blocks.button('primary', '', Messages.admin_logoButton);
+            var remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
+
+            let spinnerBlock = blocks.inline();
+            let spinner = UI.makeSpinner($(spinnerBlock));
+            let formLogo = blocks.form([
+                currentContainer,
+                blocks.block(inputLogo),
+                blocks.nav([upload, remove, spinnerBlock])
+            ]);
+
+            let $button = $(upload);
+            let $remove = $(remove);
+
+            Util.onClickEnter($button, function () {
+                let files = input.files;
+                if (files.length !== 1) {
+                    UI.warn(Messages.error);
+                    return;
+                }
+                spinner.spin();
+                $button.attr('disabled', 'disabled');
+                let reader = new FileReader();
+                reader.onloadend = function () {
+
+                console.log('belp')
+                let dataURL = this.result;
+                sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) {
+                    $button.removeAttr('disabled');
+                    if (e || response.error) {
+                        UI.warn(Messages.error);
+                        $input.val('');
+                        console.error(e, response);
+                        done(false);
+                        return;
+                    }
+                    // flushCache();
+                    done(true);
+                    redraw();
+                    spinner.done();
+                    UI.log(Messages.saved);
+                })
+
+
+                };
+                reader.readAsDataURL(files[0]);
+            });
+            UI.confirmButton($remove, {
+                classes: 'btn-danger',
+                multiple: true
+            }, function () {
+                spinner.spin();
+                $remove.attr('disabled', 'disabled');
+                
+                sendAdminDecree('REMOVE_LOGO', {}, function (e, response) {
+                    $remove.removeAttr('disabled');
+                    if (err) {
+                        UI.warn(Messages.error);
+                        console.error(err, response);
+                        spinner.hide();
+                        return;
+                    }
+                    redraw();
+                    spinner.done();
+                    UI.log(Messages.saved);
+                });
+            });
+
+        let inputColor = blocks.input({
+                type: 'color',
+                value: (Instance && Instance.color) || '#0087FF'
+            });
+            let label = blocks.labelledInput(Messages.admin_colorPick, inputColor);
+            let current = blocks.block([], 'cp-admin-color-current');
+            let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
+            let preview = blocks.block([
+                blocks.block([
+                    blocks.link('CryptPad', '/admin/#customize'),
+                    blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
+                    blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
+                ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
+                blocks.block([
+                    blocks.link('CryptPad', '/admin/#customize'),
+                    blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
+                    blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
+                ], 'cp-admin-color-preview-light cp-sidebar-flex-block')
+            ], 'cp-admin-color-preview');
+            let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
+            let $preview = $(preview);
+
+            let removeColor = blocks.button('danger', '', Messages.admin_logoRemoveButton);
+            let $removeColor = $(removeColor);
+
+            let setColor = (color, done) => {
+                sendAdminDecree('CHANGE_COLOR', {color}, function (e, response) {
+                    if (err) {
+                        UI.warn(Messages.error);
+                        console.error(err, response);
+                        done(false);
+                        return;
+                    }
+                    done(true);
+                    UI.log(Messages.saved);
+                });
+            };
+
+            let btn = blocks.activeButton('primary', '',
+              Messages.admin_colorChange, (done) => {
+                let color = $input.val();
+                setColor(color, done);
+            });
+
+            let $inputColor = $(inputColor).on('change', () => {
+                require(['/lib/less.min.js'], (Less) => {
+                    let color = $inputColor.val();
+                    let lColor = Less.color(color.slice(1));
+                    let lighten = Less.functions.functionRegistry._data.lighten;
+                    let lightColor = lighten(lColor, {value:30}).toRGB();
+                    $preview.find('.btn-primary').css({
+                        'background-color': color
+                    });
+                    $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({
+                        'border-color': lightColor,
+                        'color': lightColor,
+                    });
+                    $preview.find('.cp-admin-color-preview-light .btn-secondary').css({
+                        'border-color': color,
+                        'color': color,
+                    });
+                    $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
+                    $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
+                });
+            });
+
+            UI.confirmButton($removeColor, {
+                classes: 'btn-danger',
+                multiple: true
+            }, function () {
+                $removeColor.attr('disabled', 'disabled');
+                setColor('', () => {});
+            });
+
+            // let form = blocks.form([
+            //     labelCurrent,
+            //     label
+            // ], blocks.nav([btn, remove, btn.spinner]));
+
+        var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+            console.log('mreao')
+            
+            // sendAdminDecree('SET_INSTANCE_NAME', [$input.val().trim()], function (e, response) {
+                
+            //     if (e || response.error) {
+            //         UI.warn(Messages.error);
+            //         $input.val('');
+            //         console.error(e, response);
+            //         done(false);
+            //         return;
+            //     }
+            //     // flushCache();
+            //     done(true);
+            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+
+            // })
+            // sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$description.val().trim()], function (e, response) {
+                
+            //     if (e || response.error) {
+            //         UI.warn(Messages.error);
+            //         $input.val('');
+            //         console.error(e, response);
+            //         done(false);
+            //         return;
+            //     }
+            //     // flushCache();
+            //     done(true);
+            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+
+            // })
+            var nextPageForm = AppConfigScreen.appConfig()
+            var elem = document.createElement('div');
+            elem.setAttribute('id', 'cp-loading');
+            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, nextPageForm)
+            elem.append(frame)
+
+            built = true;
+            var intr;
+            var append = function () {
+                if (!document.body) { return; }
+                clearInterval(intr);
+                document.body.appendChild(elem);
+            };
+            intr = setInterval(append, 100);
+            append();
+        });
+
+        var nav = blocks.nav([button]);
+        var form = blocks.form([
+            input,textarea, inputLogo, label, labelCurrent
+        ], nav);
+
+        return form
+    
+    }
+
+    AppConfigScreen.appConfig = function (sendAdminDecree) {
+
+        const blocks = Sidebar.blocks;
+        const grid = blocks.block([], 'cp-admin-customize-apps-grid');
+
+        const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
+        const availableApps = []
+            
+        function select(app) {
+            if (availableApps.indexOf(app) === -1) {
+                availableApps.push(app);
+                $(`#${app}-block`).attr('class', 'active-app') 
+            } else {
+                availableApps.splice(availableApps.indexOf(app), 1)
+                $(`#${app}-block`).attr('class', 'inactive-app')
+            } 
+        }
+
+        allApps.forEach(app => { 
+            let appBlock = h('div',  {style: 'width:50%;height:20px;float:left;border:1px solid red'}, {class: 'inactive-app', id: `${app}-block`}, app)
+            $(appBlock).addClass('cp-app-drive-element-grid')
+            $(appBlock).addClass('cp-app-drive-element-row')
+            $(appBlock).addClass('cp-app-drive-new-doc')
+
+            $(grid).append(appBlock);
+            $(appBlock).on('click', () => select(app))
+        }); 
+
+        var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+            // sendAdminDecree('DISABLE_APPS', availableApps, function (e, response) {
+                
+            //     if (e || response.error) {
+            //         UI.warn(Messages.error);
+            //         $input.val('');
+            //         console.error(e, response);
+            //         done(false);
+            //         return;
+            //     }
+            //     // flushCache();
+            //     done(true);
+            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+            //     window.location.href = '/drive/';
+
+            // })
+            UI.log('Messages._getKey(, [Messages.admin_appSelection])');
+            var nextPageForm = AppConfigScreen.mfaRegistrationScreen()
+            var elem = document.createElement('div');
+            elem.setAttribute('id', 'cp-loading');
+            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, nextPageForm)
+            elem.append(frame)
+
+            built = true;
+            var intr;
+            var append = function () {
+                if (!document.body) { return; }
+                clearInterval(intr);
+                document.body.appendChild(elem);
+            };
+            intr = setInterval(append, 100);
+            append();
+        });
+
+                
+        let form = blocks.form([
+            grid 
+        ], blocks.nav([save]));
+        
+
+        return form
+    }    
+
+    return AppConfigScreen
 
-    return [availableApps, grid]
 
 });
 
diff --git a/www/install/main.js b/www/install/main.js
index eb6c6168b..f6822db65 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -26,9 +26,7 @@ define([
     $(function () {
 
         Messages.admin_appSelection = 'App configuration saved'
-        Messages.admin_appsTitle = "Choose your applications"
-        Messages.admin_appsHint = "Choose which apps are available to users on your instance."
-        Messages.admin_cat_apps = "Apps"
+
         if (LocalStore.isLoggedIn()) {
             // already logged in, redirect to drive
             document.location.href = '/drive/';
@@ -62,35 +60,31 @@ define([
             }
         }
 
-        var showScreen = function (sendAdminDecree) {
+        var showAppScreen = function (sendAdminDecree) {
 
-            const blocks = Sidebar.blocks;
-            var availableApps = AppConfigScreen[0]
-            var grid = AppConfigScreen[1]
-            
-            var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-                sendAdminDecree('DISABLE_APPS', availableApps, function (e, response) {
-                  
-                    if (e || response.error) {
-                        UI.warn(Messages.error);
-                        $input.val('');
-                        console.error(e, response);
-                        done(false);
-                        return;
-                    }
-                    // flushCache();
-                    done(true);
-                    UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
-                    window.location.href = '/drive/';
+            var appScreen = AppConfigScreen.appConfig
+            var form = appScreen(sendAdminDecree)
+            var elem = document.createElement('div');
+            elem.setAttribute('id', 'cp-loading');
+            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
+            elem.append(frame)
 
-                })
-                UI.log('Messages._getKey(, [Messages.admin_appSelection])');
-            });
+            built = true;
+            var intr;
+            var append = function () {
+                if (!document.body) { return; }
+                clearInterval(intr);
+                document.body.appendChild(elem);
+            };
+            intr = setInterval(append, 100);
+            append();
 
-            
-            let form = blocks.form([
-                grid 
-            ], blocks.nav([save]));
+        }
+
+        var showTitleScreen = function (sendAdminDecree) {
+
+            var titleScreen = AppConfigScreen.titleConfig
+            var form = titleScreen(sendAdminDecree)
 
             var elem = document.createElement('div');
             elem.setAttribute('id', 'cp-loading');
@@ -107,148 +101,185 @@ define([
             intr = setInterval(append, 100);
             append();
 
+        }
+
+        var showTitleScreen = function (sendAdminDecree) {
+
+            var titleScreen = AppConfigScreen.titleConfig
+            var form = titleScreen(sendAdminDecree)
+
+            var elem = document.createElement('div');
+            elem.setAttribute('id', 'cp-loading');
+            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
+            elem.append(frame)
+
+            built = true;
+            var intr;
+            var append = function () {
+                if (!document.body) { return; }
+                clearInterval(intr);
+                document.body.appendChild(elem);
+            };
+            intr = setInterval(append, 100);
+            append();
+
+        }
+
+        var showMFARegistrationScreen = function (sendAdminDecree) {
+
+            var mfaRegistrationScreen = AppConfigScreen.mfaRegistrationScreen
+            var form = mfaRegistrationScreen(sendAdminDecree)
+
+            var elem = document.createElement('div');
+            elem.setAttribute('id', 'cp-loading');
+            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
+            elem.append(frame)
+
+            built = true;
+            var intr;
+            var append = function () {
+                if (!document.body) { return; }
+                clearInterval(intr);
+                document.body.appendChild(elem);
+            };
+            intr = setInterval(append, 100);
+            append();
 
         }
 
         var registerClick = function () {
+            showTitleScreen()
+                        document.location.href = '/drive/';
 
-            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
-            $uname.val(uname);
 
-            var passwd = $passwd.val();
-            var confirmPassword = $confirm.val();
+//             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
+//             $uname.val(uname);
 
-            if (!token) { token = $token.val().trim(); }
+//             var passwd = $passwd.val();
+//             var confirmPassword = $confirm.val();
 
-            var shouldImport = false;
-            var doesAccept;
-            try {
-                // if this throws there's either a horrible bug (which someone will report)
-                // or the instance admins did not configure a terms page.
-                doesAccept = true;
-            } catch (err) {
-                console.error(err);
-            }
+//             if (!token) { token = $token.val().trim(); }
 
-            if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
-                var emailWarning = [
-                    Messages.register_emailWarning0,
-                    br(), br(),
-                    Messages.register_emailWarning1,
-                    br(), br(),
-                    Messages.register_emailWarning2,
-                    br(), br(),
-                    Messages.register_emailWarning3,
-                ];
+//             var shouldImport = false;
+//             var doesAccept;
+//             try {
+//                 // if this throws there's either a horrible bug (which someone will report)
+//                 // or the instance admins did not configure a terms page.
+//                 doesAccept = true;
+//             } catch (err) {
+//                 console.error(err);
+//             }
 
-                Feedback.send("EMAIL_USERNAME_WARNING", true);
+//             if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
+//                 var emailWarning = [
+//                     Messages.register_emailWarning0,
+//                     br(), br(),
+//                     Messages.register_emailWarning1,
+//                     br(), br(),
+//                     Messages.register_emailWarning2,
+//                     br(), br(),
+//                     Messages.register_emailWarning3,
+//                 ];
 
-                return void UI.confirm(emailWarning, function (yes) {
-                    if (!yes) { return; }
-                    I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
-                    registerClick();
-                });
-            }
+//                 Feedback.send("EMAIL_USERNAME_WARNING", true);
 
-            /* basic validation */
-            if (!Cred.isLongEnoughPassword(passwd)) {
-                var warning = Messages._getKey('register_passwordTooShort', [
-                    Cred.MINIMUM_PASSWORD_LENGTH
-                ]);
-                return void UI.alert(warning);
-            }
+//                 return void UI.confirm(emailWarning, function (yes) {
+//                     if (!yes) { return; }
+//                     I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
+//                     registerClick();
+//                 });
+//             }
 
-            if (passwd !== confirmPassword) { // do their passwords match?
-                return void UI.alert(Messages.register_passwordsDontMatch);
-            }
+//             /* basic validation */
+//             if (!Cred.isLongEnoughPassword(passwd)) {
+//                 var warning = Messages._getKey('register_passwordTooShort', [
+//                     Cred.MINIMUM_PASSWORD_LENGTH
+//                 ]);
+//                 return void UI.alert(warning);
+//             }
 
-            if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
-                return void UI.alert(Messages.register_mustAcceptTerms);
-            }
+//             if (passwd !== confirmPassword) { // do their passwords match?
+//                 return void UI.alert(Messages.register_passwordsDontMatch);
+//             }
 
-            let startOnboarding = function (network, proxy) {
-             Rpc.create(network, proxy.edPrivate, proxy.edPublic, function (e, rpc) {
-                if (e) {
-                  // TODO: handle error
-                  return;
-                }
+//             if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
+//                 return void UI.alert(Messages.register_mustAcceptTerms);
+//             }
 
-                let sendAdminDecree = function (command, data, callback) {
-                    var params = ['ADMIN_DECREE', [command, data]];  
-                    rpc.send('ADMIN', params, callback)
-                };
+//             let startOnboarding = function (network, proxy) {
+//              Rpc.create(network, proxy.edPrivate, proxy.edPublic, function (e, rpc) {
+//                 if (e) {
+//                   // TODO: handle error
+//                   return;
+//                 }
 
-                showScreen(sendAdminDecree)
+//                 let sendAdminDecree = function (command, data, callback) {
+//                     var params = ['ADMIN_DECREE', [command, data]];  
+//                     rpc.send('ADMIN', params, callback)
+//                 };
+
+//                 showAppScreen(sendAdminDecree)
               
-            });
+//             });
   
-    };
+//     };
 
-            setTimeout(function () {
-                var span = h('span', [
-                    h('h2', [
-                        h('i.fa.fa-warning'),
-                        ' ',
-                        Messages.register_warning,
-                    ]),
-                    Messages.register_warning_note
-                ]);
+//             setTimeout(function () {
+//                 var span = h('span', [
+//                     h('h2', [
+//                         h('i.fa.fa-warning'),
+//                         ' ',
+//                         Messages.register_warning,
+//                     ]),
+//                     Messages.register_warning_note
+//                 ]);
 
-            UI.confirm(span,
-            function (yes) {
-                if (!yes) { return; }
+//             UI.confirm(span,
+//             function (yes) {
+//                 if (!yes) { return; }
 
-                Login.loginOrRegisterUI({
-                    uname,
-                    passwd,
-                    isRegister: true,
-                    onOTP: UI.getOTPScreen,
-                    shouldImport,
-                    cb: function (data) {
-                        var proxy = data.proxy;
-                        if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
+//                 Login.loginOrRegisterUI({
+//                     uname,
+//                     passwd,
+//                     isRegister: true,
+//                     onOTP: UI.getOTPScreen,
+//                     shouldImport,
+//                     cb: function (data) {
+//                         var proxy = data.proxy;
+//                         if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
 
-                        Rpc.createAnonymous(data.network, function (e, call) {
-                            if (e) { UI.alert(Messages.error); return console.error(e); }
-                            var anon_rpc = call;
-
-                            anon_rpc.send('ADD_FIRST_ADMIN', {
-                                token: token,
-                                edPublic: proxy.edPublic
-                            }, function (e) {
-                                if (e) { UI.alert(Messages.error); return console.error(e); }
-                                            // bloop(sendAdminDecree)
-
-                                startOnboarding(data.network, proxy);
-                            });
-                        });
-
-                        return true;
-                    }
-                });
-            }, {
-                ok: Messages.register_writtenPassword,
-                cancel: Messages.register_cancel,
-/*  If we're certain that we aren't using these "*Class" APIs
-    anywhere else then we can deprecate them and make this a
-    custom modal in common-interface (or here).  */
-                cancelClass: 'btn.btn-cancel.btn-register',
-                okClass: 'btn.btn-danger.btn-register',
-                reverseOrder: true,
-                done: function ($dialog) {
-                    $dialog.find('> div').addClass('half');
-                },
-            });
-            }, 150);
-
-            //                 let sendAdminDecree = function (command, data, callback) {
- 
-            //     };
-            // bloop(sendAdminDecree)
+//                         Rpc.createAnonymous(data.network, function (e, call) {
+//                             if (e) { UI.alert(Messages.error); return console.error(e); }
+//                             var anon_rpc = call;
 
+//                             anon_rpc.send('ADD_FIRST_ADMIN', {
+//                                 token: token,
+//                                 edPublic: proxy.edPublic
+//                             }, function (e) {
+//                                 if (e) { UI.alert(Messages.error); return console.error(e); }
+//                                 startOnboarding(data.network, proxy);
+//                             });
+//                         });
 
+//                         return true;
+//                     }
+//                 });
+//             }, {
+//                 ok: Messages.register_writtenPassword,
+//                 cancel: Messages.register_cancel,
+// /*  If we're certain that we aren't using these "*Class" APIs
+//     anywhere else then we can deprecate them and make this a
+//     custom modal in common-interface (or here).  */
+//                 cancelClass: 'btn.btn-cancel.btn-register',
+//                 okClass: 'btn.btn-danger.btn-register',
+//                 reverseOrder: true,
+//                 done: function ($dialog) {
+//                     $dialog.find('> div').addClass('half');
+//                 },
+//             });
+//             }, 150);
         };
 
         $register.click(registerClick);

From f03a05cac06fb85bf899fe615eb93f7f207ba590 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 28 May 2024 17:48:59 +0100
Subject: [PATCH 13/50] refactoring

---
 www/install/appconfigscreen.js | 205 +++++++++++++++---------------
 www/install/main.js            | 222 +++++++++++++++++----------------
 2 files changed, 212 insertions(+), 215 deletions(-)

diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index 620d50e04..ac801b861 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -27,70 +27,7 @@ define([
 
     const blocks = Sidebar.blocks;
 
-    AppConfigScreen.mfaRegistrationScreen = function(sendAdminDecree) {
-                console.log('mreao1')
-
-
-
-        var restrict = blocks.activeCheckbox({
-            key: 'registration',
-            getState: function () {
-                return false
-            },
-            query: function (val, setState) {
-            //     sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
-                
-            //     if (e || response.error) {
-            //         UI.warn(Messages.error);
-            //         $input.val('');
-            //         console.error(e, response);
-            //         done(false);
-            //         return;
-            //     }
-            //     // flushCache();
-            //     done(true);
-            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
-
-            // })
-            },
-        });
-
-        var forceMFA = blocks.activeCheckbox({
-            key: 'forcemfa',
-            getState: function () {
-                return false
-            },
-            query: function (val, setState) {
-            
-            //     sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
-                
-            //     if (e || response.error) {
-            //         UI.warn(Messages.error);
-            //         $input.val('');
-            //         console.error(e, response);
-            //         done(false);
-            //         return;
-            //     }
-            //     // flushCache();
-            //     done(true);
-            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
-
-            // })
-            },
-        });
-
-        var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            // document.location.href = '/drive/';
-            return;
-        })
-
-        var form = blocks.form([restrict, forceMFA], [button])
-        return form
-    
-    
-    }
-
-    AppConfigScreen.titleConfig = function (sendAdminDecree) {
+        AppConfigScreen.titleConfig = function (sendAdminDecree) {
     
         const blocks = Sidebar.blocks;
 
@@ -145,7 +82,6 @@ define([
                 let reader = new FileReader();
                 reader.onloadend = function () {
 
-                console.log('belp')
                 let dataURL = this.result;
                 sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) {
                     $button.removeAttr('disabled');
@@ -268,37 +204,36 @@ define([
             // ], blocks.nav([btn, remove, btn.spinner]));
 
         var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            console.log('mreao')
             
-            // sendAdminDecree('SET_INSTANCE_NAME', [$input.val().trim()], function (e, response) {
+            sendAdminDecree('SET_INSTANCE_NAME', [$input.val().trim()], function (e, response) {
                 
-            //     if (e || response.error) {
-            //         UI.warn(Messages.error);
-            //         $input.val('');
-            //         console.error(e, response);
-            //         done(false);
-            //         return;
-            //     }
-            //     // flushCache();
-            //     done(true);
-            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    $input.val('');
+                    console.error(e, response);
+                    done(false);
+                    return;
+                }
+                // flushCache();
+                done(true);
+                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
 
-            // })
-            // sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$description.val().trim()], function (e, response) {
+            })
+            sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$description.val().trim()], function (e, response) {
                 
-            //     if (e || response.error) {
-            //         UI.warn(Messages.error);
-            //         $input.val('');
-            //         console.error(e, response);
-            //         done(false);
-            //         return;
-            //     }
-            //     // flushCache();
-            //     done(true);
-            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    $input.val('');
+                    console.error(e, response);
+                    done(false);
+                    return;
+                }
+                // flushCache();
+                done(true);
+                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
 
-            // })
-            var nextPageForm = AppConfigScreen.appConfig()
+            })
+            var nextPageForm = AppConfigScreen.appConfig(sendAdminDecree)
             var elem = document.createElement('div');
             elem.setAttribute('id', 'cp-loading');
             let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, nextPageForm)
@@ -324,6 +259,67 @@ define([
     
     }
 
+    AppConfigScreen.mfaRegistrationScreen = function(sendAdminDecree) {
+
+        var restrict = blocks.activeCheckbox({
+            key: 'registration',
+            getState: function () {
+                return false
+            },
+            query: function (val, setState) {
+                sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
+                
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    $input.val('');
+                    console.error(e, response);
+                    done(false);
+                    return;
+                }
+                // flushCache();
+                done(true);
+                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+
+            })
+            },
+        });
+
+        var forceMFA = blocks.activeCheckbox({
+            key: 'forcemfa',
+            getState: function () {
+                return false
+            },
+            query: function (val, setState) {
+            
+                sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
+                
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    $input.val('');
+                    console.error(e, response);
+                    done(false);
+                    return;
+                }
+                // flushCache();
+                done(true);
+                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+
+            })
+            },
+        });
+
+        var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+            document.location.href = '/drive/';
+            return;
+        })
+
+        var form = blocks.form([restrict, forceMFA], [button])
+        return form
+    
+    
+    }
+
+
     AppConfigScreen.appConfig = function (sendAdminDecree) {
 
         const blocks = Sidebar.blocks;
@@ -353,23 +349,22 @@ define([
         }); 
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            // sendAdminDecree('DISABLE_APPS', availableApps, function (e, response) {
+            sendAdminDecree('DISABLE_APPS', availableApps, function (e, response) {
                 
-            //     if (e || response.error) {
-            //         UI.warn(Messages.error);
-            //         $input.val('');
-            //         console.error(e, response);
-            //         done(false);
-            //         return;
-            //     }
-            //     // flushCache();
-            //     done(true);
-            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
-            //     window.location.href = '/drive/';
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    $input.val('');
+                    console.error(e, response);
+                    done(false);
+                    return;
+                }
+                // flushCache();
+                done(true);
+                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
 
-            // })
+            })
             UI.log('Messages._getKey(, [Messages.admin_appSelection])');
-            var nextPageForm = AppConfigScreen.mfaRegistrationScreen()
+            var nextPageForm = AppConfigScreen.mfaRegistrationScreen(sendAdminDecree)
             var elem = document.createElement('div');
             elem.setAttribute('id', 'cp-loading');
             let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, nextPageForm)
diff --git a/www/install/main.js b/www/install/main.js
index f6822db65..2ea706af0 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -148,138 +148,140 @@ define([
         }
 
         var registerClick = function () {
-            showTitleScreen()
-                        document.location.href = '/drive/';
+            // showTitleScreen()
+                        // document.location.href = '/drive/';
 
 
-//             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
-//             $uname.val(uname);
+            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
+            $uname.val(uname);
 
-//             var passwd = $passwd.val();
-//             var confirmPassword = $confirm.val();
+            var passwd = $passwd.val();
+            var confirmPassword = $confirm.val();
 
-//             if (!token) { token = $token.val().trim(); }
+            if (!token) { token = $token.val().trim(); }
 
-//             var shouldImport = false;
-//             var doesAccept;
-//             try {
-//                 // if this throws there's either a horrible bug (which someone will report)
-//                 // or the instance admins did not configure a terms page.
-//                 doesAccept = true;
-//             } catch (err) {
-//                 console.error(err);
-//             }
+            var shouldImport = false;
+            var doesAccept;
+            try {
+                // if this throws there's either a horrible bug (which someone will report)
+                // or the instance admins did not configure a terms page.
+                doesAccept = true;
+            } catch (err) {
+                console.error(err);
+            }
 
-//             if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
-//                 var emailWarning = [
-//                     Messages.register_emailWarning0,
-//                     br(), br(),
-//                     Messages.register_emailWarning1,
-//                     br(), br(),
-//                     Messages.register_emailWarning2,
-//                     br(), br(),
-//                     Messages.register_emailWarning3,
-//                 ];
+            if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
+                var emailWarning = [
+                    Messages.register_emailWarning0,
+                    br(), br(),
+                    Messages.register_emailWarning1,
+                    br(), br(),
+                    Messages.register_emailWarning2,
+                    br(), br(),
+                    Messages.register_emailWarning3,
+                ];
 
-//                 Feedback.send("EMAIL_USERNAME_WARNING", true);
+                Feedback.send("EMAIL_USERNAME_WARNING", true);
 
-//                 return void UI.confirm(emailWarning, function (yes) {
-//                     if (!yes) { return; }
-//                     I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
-//                     registerClick();
-//                 });
-//             }
+                return void UI.confirm(emailWarning, function (yes) {
+                    if (!yes) { return; }
+                    I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
+                    registerClick();
+                });
+            }
 
-//             /* basic validation */
-//             if (!Cred.isLongEnoughPassword(passwd)) {
-//                 var warning = Messages._getKey('register_passwordTooShort', [
-//                     Cred.MINIMUM_PASSWORD_LENGTH
-//                 ]);
-//                 return void UI.alert(warning);
-//             }
+            /* basic validation */
+            if (!Cred.isLongEnoughPassword(passwd)) {
+                var warning = Messages._getKey('register_passwordTooShort', [
+                    Cred.MINIMUM_PASSWORD_LENGTH
+                ]);
+                return void UI.alert(warning);
+            }
 
-//             if (passwd !== confirmPassword) { // do their passwords match?
-//                 return void UI.alert(Messages.register_passwordsDontMatch);
-//             }
+            if (passwd !== confirmPassword) { // do their passwords match?
+                return void UI.alert(Messages.register_passwordsDontMatch);
+            }
 
-//             if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
-//                 return void UI.alert(Messages.register_mustAcceptTerms);
-//             }
+            if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
+                return void UI.alert(Messages.register_mustAcceptTerms);
+            }
 
-//             let startOnboarding = function (network, proxy) {
-//              Rpc.create(network, proxy.edPrivate, proxy.edPublic, function (e, rpc) {
-//                 if (e) {
-//                   // TODO: handle error
-//                   return;
-//                 }
+            let startOnboarding = function (network, proxy) {
+             Rpc.create(network, proxy.edPrivate, proxy.edPublic, function (e, rpc) {
+                if (e) {
+                  // TODO: handle error
+                  return;
+                }
 
-//                 let sendAdminDecree = function (command, data, callback) {
-//                     var params = ['ADMIN_DECREE', [command, data]];  
-//                     rpc.send('ADMIN', params, callback)
-//                 };
+                let sendAdminDecree = function (command, data, callback) {
+                    var params = ['ADMIN_DECREE', [command, data]];  
+                    rpc.send('ADMIN', params, callback)
+                };
 
-//                 showAppScreen(sendAdminDecree)
+                showTitleScreen(sendAdminDecree)
+
+                // showAppScreen(sendAdminDecree)
               
-//             });
+            });
   
-//     };
+    };
 
-//             setTimeout(function () {
-//                 var span = h('span', [
-//                     h('h2', [
-//                         h('i.fa.fa-warning'),
-//                         ' ',
-//                         Messages.register_warning,
-//                     ]),
-//                     Messages.register_warning_note
-//                 ]);
+            setTimeout(function () {
+                var span = h('span', [
+                    h('h2', [
+                        h('i.fa.fa-warning'),
+                        ' ',
+                        Messages.register_warning,
+                    ]),
+                    Messages.register_warning_note
+                ]);
 
-//             UI.confirm(span,
-//             function (yes) {
-//                 if (!yes) { return; }
+            UI.confirm(span,
+            function (yes) {
+                if (!yes) { return; }
 
-//                 Login.loginOrRegisterUI({
-//                     uname,
-//                     passwd,
-//                     isRegister: true,
-//                     onOTP: UI.getOTPScreen,
-//                     shouldImport,
-//                     cb: function (data) {
-//                         var proxy = data.proxy;
-//                         if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
+                Login.loginOrRegisterUI({
+                    uname,
+                    passwd,
+                    isRegister: true,
+                    onOTP: UI.getOTPScreen,
+                    shouldImport,
+                    cb: function (data) {
+                        var proxy = data.proxy;
+                        if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
 
-//                         Rpc.createAnonymous(data.network, function (e, call) {
-//                             if (e) { UI.alert(Messages.error); return console.error(e); }
-//                             var anon_rpc = call;
+                        Rpc.createAnonymous(data.network, function (e, call) {
+                            if (e) { UI.alert(Messages.error); return console.error(e); }
+                            var anon_rpc = call;
 
-//                             anon_rpc.send('ADD_FIRST_ADMIN', {
-//                                 token: token,
-//                                 edPublic: proxy.edPublic
-//                             }, function (e) {
-//                                 if (e) { UI.alert(Messages.error); return console.error(e); }
-//                                 startOnboarding(data.network, proxy);
-//                             });
-//                         });
+                            anon_rpc.send('ADD_FIRST_ADMIN', {
+                                token: token,
+                                edPublic: proxy.edPublic
+                            }, function (e) {
+                                if (e) { UI.alert(Messages.error); return console.error(e); }
+                                startOnboarding(data.network, proxy);
+                            });
+                        });
 
-//                         return true;
-//                     }
-//                 });
-//             }, {
-//                 ok: Messages.register_writtenPassword,
-//                 cancel: Messages.register_cancel,
-// /*  If we're certain that we aren't using these "*Class" APIs
-//     anywhere else then we can deprecate them and make this a
-//     custom modal in common-interface (or here).  */
-//                 cancelClass: 'btn.btn-cancel.btn-register',
-//                 okClass: 'btn.btn-danger.btn-register',
-//                 reverseOrder: true,
-//                 done: function ($dialog) {
-//                     $dialog.find('> div').addClass('half');
-//                 },
-//             });
-//             }, 150);
+                        return true;
+                    }
+                });
+            }, {
+                ok: Messages.register_writtenPassword,
+                cancel: Messages.register_cancel,
+/*  If we're certain that we aren't using these "*Class" APIs
+    anywhere else then we can deprecate them and make this a
+    custom modal in common-interface (or here).  */
+                cancelClass: 'btn.btn-cancel.btn-register',
+                okClass: 'btn.btn-danger.btn-register',
+                reverseOrder: true,
+                done: function ($dialog) {
+                    $dialog.find('> div').addClass('half');
+                },
+            });
+            }, 150);
         };
 
         $register.click(registerClick);

From b6dcb3fc47bdd158544994c6e55c372667ff310e Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 28 May 2024 18:43:17 +0100
Subject: [PATCH 14/50] cleaning

---
 www/install/appconfigscreen.js | 284 +++++++++++++++------------------
 www/install/main.js            |   2 -
 2 files changed, 132 insertions(+), 154 deletions(-)

diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index ac801b861..66c18b0ed 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -23,12 +23,11 @@ define([
 
 ) {
 
-    var AppConfigScreen = {}
-
+    var AppConfigScreen = {};
     const blocks = Sidebar.blocks;
 
-        AppConfigScreen.titleConfig = function (sendAdminDecree) {
-    
+    AppConfigScreen.titleConfig = function (sendAdminDecree) {
+
         const blocks = Sidebar.blocks;
 
         var input = blocks.input({
@@ -45,43 +44,42 @@ define([
         var $description = $(textarea);
 
         let inputLogo = blocks.input({
-                type: 'file',
-                accept: 'image/*',
-                'aria-labelledby': 'cp-admin-logo'
-            });
+            type: 'file',
+            accept: 'image/*',
+            'aria-labelledby': 'cp-admin-logo'
+        });
 
-            var currentContainer = blocks.block([], 'cp-admin-customize-logo');
-            let redraw = () => {
-                var current = h('img', {src: '/api/logo?'+(+new Date())});
-                $(currentContainer).empty().append(current);
-            };
-            redraw();
+        var currentContainer = blocks.block([], 'cp-admin-customize-logo');
+        let redraw = () => {
+            var current = h('img', {src: '/api/logo?'+(+new Date())});
+            $(currentContainer).empty().append(current);
+        };
+        redraw();
 
-            var upload = blocks.button('primary', '', Messages.admin_logoButton);
-            var remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
+        var upload = blocks.button('primary', '', Messages.admin_logoButton);
+        var remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
 
-            let spinnerBlock = blocks.inline();
-            let spinner = UI.makeSpinner($(spinnerBlock));
-            let formLogo = blocks.form([
-                currentContainer,
-                blocks.block(inputLogo),
-                blocks.nav([upload, remove, spinnerBlock])
-            ]);
+        let spinnerBlock = blocks.inline();
+        let spinner = UI.makeSpinner($(spinnerBlock));
+        let formLogo = blocks.form([
+            currentContainer,
+            blocks.block(inputLogo),
+            blocks.nav([upload, remove, spinnerBlock])
+        ]);
 
-            let $button = $(upload);
-            let $remove = $(remove);
-
-            Util.onClickEnter($button, function () {
-                let files = input.files;
-                if (files.length !== 1) {
-                    UI.warn(Messages.error);
-                    return;
-                }
-                spinner.spin();
-                $button.attr('disabled', 'disabled');
-                let reader = new FileReader();
-                reader.onloadend = function () {
+        let $button = $(upload);
+        let $remove = $(remove);
 
+        Util.onClickEnter($button, function () {
+            let files = input.files;
+            if (files.length !== 1) {
+                UI.warn(Messages.error);
+                return;
+            }
+            spinner.spin();
+            $button.attr('disabled', 'disabled');
+            let reader = new FileReader();
+            reader.onloadend = function () {
                 let dataURL = this.result;
                 sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) {
                     $button.removeAttr('disabled');
@@ -99,114 +97,106 @@ define([
                     UI.log(Messages.saved);
                 })
 
-
-                };
-                reader.readAsDataURL(files[0]);
-            });
-            UI.confirmButton($remove, {
-                classes: 'btn-danger',
-                multiple: true
-            }, function () {
-                spinner.spin();
-                $remove.attr('disabled', 'disabled');
-                
-                sendAdminDecree('REMOVE_LOGO', {}, function (e, response) {
-                    $remove.removeAttr('disabled');
-                    if (err) {
-                        UI.warn(Messages.error);
-                        console.error(err, response);
-                        spinner.hide();
-                        return;
-                    }
-                    redraw();
-                    spinner.done();
-                    UI.log(Messages.saved);
-                });
+            };
+            reader.readAsDataURL(files[0]);
+        });
+        UI.confirmButton($remove, {
+            classes: 'btn-danger',
+            multiple: true
+        }, function () {
+            spinner.spin();
+            $remove.attr('disabled', 'disabled');
+            
+            sendAdminDecree('REMOVE_LOGO', {}, function (e, response) {
+                $remove.removeAttr('disabled');
+                if (err) {
+                    UI.warn(Messages.error);
+                    console.error(err, response);
+                    spinner.hide();
+                    return;
+                }
+                redraw();
+                spinner.done();
+                UI.log(Messages.saved);
             });
+        });
 
         let inputColor = blocks.input({
-                type: 'color',
-                value: (Instance && Instance.color) || '#0087FF'
+            type: 'color',
+            value: (Instance && Instance.color) || '#0087FF'
+        });
+        let label = blocks.labelledInput(Messages.admin_colorPick, inputColor);
+        let current = blocks.block([], 'cp-admin-color-current');
+        let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
+        let preview = blocks.block([
+            blocks.block([
+                blocks.link('CryptPad', '/admin/#customize'),
+                blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
+                blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
+            ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
+            blocks.block([
+                blocks.link('CryptPad', '/admin/#customize'),
+                blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
+                blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
+            ], 'cp-admin-color-preview-light cp-sidebar-flex-block')
+        ], 'cp-admin-color-preview');
+        let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
+        let $preview = $(preview);
+
+        let removeColor = blocks.button('danger', '', Messages.admin_logoRemoveButton);
+        let $removeColor = $(removeColor);
+
+        let setColor = (color, done) => {
+            sendAdminDecree('CHANGE_COLOR', {color}, function (e, response) {
+                if (err) {
+                    UI.warn(Messages.error);
+                    console.error(err, response);
+                    done(false);
+                    return;
+                }
+                done(true);
+                UI.log(Messages.saved);
             });
-            let label = blocks.labelledInput(Messages.admin_colorPick, inputColor);
-            let current = blocks.block([], 'cp-admin-color-current');
-            let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
-            let preview = blocks.block([
-                blocks.block([
-                    blocks.link('CryptPad', '/admin/#customize'),
-                    blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
-                    blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
-                ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
-                blocks.block([
-                    blocks.link('CryptPad', '/admin/#customize'),
-                    blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
-                    blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
-                ], 'cp-admin-color-preview-light cp-sidebar-flex-block')
-            ], 'cp-admin-color-preview');
-            let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
-            let $preview = $(preview);
+        };
 
-            let removeColor = blocks.button('danger', '', Messages.admin_logoRemoveButton);
-            let $removeColor = $(removeColor);
+        let btn = blocks.activeButton('primary', '',
+            Messages.admin_colorChange, (done) => {
+            let color = $input.val();
+            setColor(color, done);
+        });
 
-            let setColor = (color, done) => {
-                sendAdminDecree('CHANGE_COLOR', {color}, function (e, response) {
-                    if (err) {
-                        UI.warn(Messages.error);
-                        console.error(err, response);
-                        done(false);
-                        return;
-                    }
-                    done(true);
-                    UI.log(Messages.saved);
+        let $inputColor = $(inputColor).on('change', () => {
+            require(['/lib/less.min.js'], (Less) => {
+                let color = $inputColor.val();
+                let lColor = Less.color(color.slice(1));
+                let lighten = Less.functions.functionRegistry._data.lighten;
+                let lightColor = lighten(lColor, {value:30}).toRGB();
+                $preview.find('.btn-primary').css({
+                    'background-color': color
                 });
-            };
-
-            let btn = blocks.activeButton('primary', '',
-              Messages.admin_colorChange, (done) => {
-                let color = $input.val();
-                setColor(color, done);
-            });
-
-            let $inputColor = $(inputColor).on('change', () => {
-                require(['/lib/less.min.js'], (Less) => {
-                    let color = $inputColor.val();
-                    let lColor = Less.color(color.slice(1));
-                    let lighten = Less.functions.functionRegistry._data.lighten;
-                    let lightColor = lighten(lColor, {value:30}).toRGB();
-                    $preview.find('.btn-primary').css({
-                        'background-color': color
-                    });
-                    $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({
-                        'border-color': lightColor,
-                        'color': lightColor,
-                    });
-                    $preview.find('.cp-admin-color-preview-light .btn-secondary').css({
-                        'border-color': color,
-                        'color': color,
-                    });
-                    $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
-                    $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
+                $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({
+                    'border-color': lightColor,
+                    'color': lightColor,
                 });
+                $preview.find('.cp-admin-color-preview-light .btn-secondary').css({
+                    'border-color': color,
+                    'color': color,
+                });
+                $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
+                $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
             });
+        });
 
-            UI.confirmButton($removeColor, {
-                classes: 'btn-danger',
-                multiple: true
-            }, function () {
-                $removeColor.attr('disabled', 'disabled');
-                setColor('', () => {});
-            });
-
-            // let form = blocks.form([
-            //     labelCurrent,
-            //     label
-            // ], blocks.nav([btn, remove, btn.spinner]));
+        UI.confirmButton($removeColor, {
+            classes: 'btn-danger',
+            multiple: true
+        }, function () {
+            $removeColor.attr('disabled', 'disabled');
+            setColor('', () => {});
+        });
 
         var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            
             sendAdminDecree('SET_INSTANCE_NAME', [$input.val().trim()], function (e, response) {
-                
                 if (e || response.error) {
                     UI.warn(Messages.error);
                     $input.val('');
@@ -220,7 +210,6 @@ define([
 
             })
             sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$description.val().trim()], function (e, response) {
-                
                 if (e || response.error) {
                     UI.warn(Messages.error);
                     $input.val('');
@@ -260,7 +249,6 @@ define([
     }
 
     AppConfigScreen.mfaRegistrationScreen = function(sendAdminDecree) {
-
         var restrict = blocks.activeCheckbox({
             key: 'registration',
             getState: function () {
@@ -268,19 +256,18 @@ define([
             },
             query: function (val, setState) {
                 sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
-                
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    $input.val('');
-                    console.error(e, response);
-                    done(false);
-                    return;
-                }
-                // flushCache();
-                done(true);
-                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+                    if (e || response.error) {
+                        UI.warn(Messages.error);
+                        $input.val('');
+                        console.error(e, response);
+                        done(false);
+                        return;
+                    }
+                    // flushCache();
+                    done(true);
+                    UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
 
-            })
+                })
             },
         });
 
@@ -290,9 +277,7 @@ define([
                 return false
             },
             query: function (val, setState) {
-            
                 sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
-                
                 if (e || response.error) {
                     UI.warn(Messages.error);
                     $input.val('');
@@ -316,7 +301,6 @@ define([
         var form = blocks.form([restrict, forceMFA], [button])
         return form
     
-    
     }
 
 
@@ -324,7 +308,6 @@ define([
 
         const blocks = Sidebar.blocks;
         const grid = blocks.block([], 'cp-admin-customize-apps-grid');
-
         const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
         const availableApps = []
             
@@ -350,7 +333,6 @@ define([
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
             sendAdminDecree('DISABLE_APPS', availableApps, function (e, response) {
-                
                 if (e || response.error) {
                     UI.warn(Messages.error);
                     $input.val('');
@@ -380,13 +362,11 @@ define([
             intr = setInterval(append, 100);
             append();
         });
-
                 
         let form = blocks.form([
             grid 
         ], blocks.nav([save]));
         
-
         return form
     }    
 
diff --git a/www/install/main.js b/www/install/main.js
index 2ea706af0..4b207c071 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -221,8 +221,6 @@ define([
                 };
 
                 showTitleScreen(sendAdminDecree)
-
-                // showAppScreen(sendAdminDecree)
               
             });
   

From b6801668f3215538dcfa18dbf6101a8b07516724 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Mon, 3 Jun 2024 13:26:59 +0100
Subject: [PATCH 15/50] logo upload command error

---
 lib/decrees.js                 |  70 ++++++
 www/install/appconfigscreen.js | 432 ++++++++++++++++++++++-----------
 www/install/main.js            |  64 +----
 3 files changed, 355 insertions(+), 211 deletions(-)

diff --git a/lib/decrees.js b/lib/decrees.js
index 86e63701c..063716bdf 100644
--- a/lib/decrees.js
+++ b/lib/decrees.js
@@ -236,6 +236,73 @@ commands.DISABLE_APPS = function (Env, args) {
     return true;
 };
 
+commands.CHANGE_COLOR = function (Env, args) {
+        var color = args
+        adminDecree(Env, null, function (err) {
+        if (err) { return void cb(err); }
+        Env.flushCache();
+        cb(void 0, true);
+    }, ['CHANGE_COLOR', [
+        'SET_ACCENT_COLOR',
+        [color]
+    ]]);
+    return true;
+};
+
+// commands.UPLOAD_LOGO = function(Env, data) {
+// console.log('data', data)
+//     const args = Array.isArray(data) && data[1];
+//     if (!args || typeof(args) !== 'object') { console.err("EINVAL");
+//     return  }
+//     let dataURL = args.dataURL;
+
+//     // (size*4/3) + 24 ==> base64 and dataURL overhead
+//     if (!dataURL || dataURL.length > ((MAX_LOGO_SIZE*4/3)+24)) {
+//         console.err("E_TOO_LARGE");
+//         return
+//     }
+
+//     let s = dataURL.split(',');
+//     let base64 = s[1];
+//     let mime = s[0].slice(s[0].indexOf(":")+1, s[0].indexOf(";"));
+//     if (!base64 || !mime) { return void cb('EINVAL'); }
+//     let buf;
+//     try {
+//         buf = Buffer.from(base64, 'base64');
+//     } catch (e) {
+//     console.err(e);
+//         return 
+//     }
+
+//     nThen(waitFor => {
+//         Fse.mkdirp('customize', {}, waitFor((err) => {
+//             if (!err) { return; }
+//             waitFor.abort();
+//             console.err(err);
+//             return 
+//         }));
+//     }).nThen(waitFor => {
+//         Fse.writeFile('./customize/CryptPad_logo_hero.svg', buf, waitFor((err) => {
+//             if (!err) { return; }
+//             waitFor.abort();
+//             console.err(err);
+//             return 
+//         }));
+//     }).nThen(() => {
+//         adminDecree(Env, null, function (err) {
+        
+//             if (err) { console.err(err);
+//             return 
+//  }
+//             Env.flushCache();
+//             // cb(void 0, true);
+//         }, ['UPLOAD_LOGO', [
+//             'SET_LOGO_MIME',
+//             [mime]
+//         ]]);
+//     });
+// }
+
 commands.SET_SUPPORT_KEYS = function (Env, args) {
     const curvePublic = args[0]; // Support mailbox key
     const edPublic = args[1]; // Support pin log
@@ -418,6 +485,9 @@ var handleCommand = Decrees.handleCommand = function (Env, line) {
     var command = line[0];
     
     var args = line[1];
+    console.log('command', command)
+    console.log('commands', commands[command])
+    console.log('type', typeof(commands[command]))
     if (typeof(commands[command]) !== 'function') {
         throw new Error("DECREE_UNSUPPORTED_COMMAND");
     }
diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index 66c18b0ed..846b0e2b7 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -23,6 +23,14 @@ define([
 
 ) {
 
+    Messages.admin_onboardingTitle = 'Welcome to your CryptPad instance'
+    Messages.admin_onboardingDesc = 'Please choose a title and description'
+
+    Messages.admin_appSelection = 'App configuration saved'
+    Messages.admin_appsTitle = "Choose your applications"
+    Messages.admin_appsHint = "Choose which apps are available to users on your instance."
+    Messages.admin_cat_apps = "Apps"
+
     var AppConfigScreen = {};
     const blocks = Sidebar.blocks;
 
@@ -30,173 +38,262 @@ define([
 
         const blocks = Sidebar.blocks;
 
-        var input = blocks.input({
-            type: 'text',
-            value:  '',
-            placeholder: 'ApiConfig.httpUnsafeOrigin,',
-            'aria-labelledby': 'cp-admin-name'
-        });
-        var $input = $(input);
-        var textarea = blocks.textarea({
-            placeholder: Messages.home_host || '',
-            'aria-labelledby': 'cp-admin-description'
-        }, 'instanceDescription');
-        var $description = $(textarea);
+        var titleDescBlock = function() {
 
-        let inputLogo = blocks.input({
-            type: 'file',
-            accept: 'image/*',
-            'aria-labelledby': 'cp-admin-logo'
-        });
+            var input = blocks.input({
+                type: 'text',
+                value:  '',
+                placeholder: 'Instance title',
+                'aria-labelledby': 'cp-admin-name'
+            });
+            var textarea = blocks.textarea({
+                placeholder: 'Placeholder description text',
+                value:  '',
+                'aria-labelledby': 'cp-admin-description'
+            });
 
-        var currentContainer = blocks.block([], 'cp-admin-customize-logo');
-        let redraw = () => {
-            var current = h('img', {src: '/api/logo?'+(+new Date())});
-            $(currentContainer).empty().append(current);
-        };
-        redraw();
+            return [input, textarea]
+        }
 
-        var upload = blocks.button('primary', '', Messages.admin_logoButton);
-        var remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
+        var logoBlock = function() {
 
-        let spinnerBlock = blocks.inline();
-        let spinner = UI.makeSpinner($(spinnerBlock));
-        let formLogo = blocks.form([
-            currentContainer,
-            blocks.block(inputLogo),
-            blocks.nav([upload, remove, spinnerBlock])
-        ]);
+            let inputLogo = blocks.input({
+                type: 'file',
+                accept: 'image/*',
+                'aria-labelledby': 'cp-admin-logo'
+            });
 
-        let $button = $(upload);
-        let $remove = $(remove);
+            var currentContainer = blocks.block([], 'cp-admin-customize-logo');
+            let redraw = () => {
+                var current = h('img', {src: '/api/logo?'+(+new Date())});
+                $(currentContainer).empty().append(current);
+            };
+            redraw();
 
-        Util.onClickEnter($button, function () {
-            let files = input.files;
-            if (files.length !== 1) {
-                UI.warn(Messages.error);
-                return;
-            }
-            spinner.spin();
-            $button.attr('disabled', 'disabled');
-            let reader = new FileReader();
-            reader.onloadend = function () {
-                let dataURL = this.result;
-                sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) {
-                    $button.removeAttr('disabled');
-                    if (e || response.error) {
+            var upload = blocks.button('primary', '', Messages.admin_logoButton);
+            var remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
+
+            let spinnerBlock = blocks.inline();
+            let spinner = UI.makeSpinner($(spinnerBlock));
+            let formLogo = blocks.form([
+                currentContainer,
+                blocks.block(inputLogo),
+                blocks.nav([upload, remove, spinnerBlock])
+            ]);
+
+            let $button = $(upload);
+            let $remove = $(remove);
+
+            Util.onClickEnter($button, function () {
+                let files = inputLogo.files;
+                if (files.length !== 1) {
+                    UI.warn(Messages.error);
+                    return;
+                }
+                spinner.spin();
+                $button.attr('disabled', 'disabled');
+                let reader = new FileReader();
+                reader.onloadend = function () {
+                    let dataURL = this.result;
+                    console.log(dataURL, 'dataulr')
+                    sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) {
+                        $button.removeAttr('disabled');
+                        if (e || response.error) {
+                            UI.warn(Messages.error);
+                            $(inputLogo).val('');
+                            console.error(e, response);
+                            // done(false);
+                            return;
+                        }
+                        // flushCache();
+                        // done(true);
+                        redraw();
+                        spinner.done();
+                        UI.log(Messages.saved);
+                    })
+
+                };
+                reader.readAsDataURL(files[0]);
+            });
+            UI.confirmButton($remove, {
+                classes: 'btn-danger',
+                multiple: true
+            }, function () {
+                spinner.spin();
+                $remove.attr('disabled', 'disabled');
+                
+                sendAdminDecree('REMOVE_LOGO', {}, function (e, response) {
+                    $remove.removeAttr('disabled');
+                    if (err) {
                         UI.warn(Messages.error);
-                        $input.val('');
-                        console.error(e, response);
-                        done(false);
+                        console.error(err, response);
+                        spinner.hide();
                         return;
                     }
-                    // flushCache();
-                    done(true);
                     redraw();
                     spinner.done();
                     UI.log(Messages.saved);
-                })
+                });
+            });
 
-            };
-            reader.readAsDataURL(files[0]);
-        });
-        UI.confirmButton($remove, {
-            classes: 'btn-danger',
-            multiple: true
-        }, function () {
-            spinner.spin();
-            $remove.attr('disabled', 'disabled');
+            return formLogo
+        
+        }
+
+        // let inputLogo = blocks.input({
+        //     type: 'file',
+        //     accept: 'image/*',
+        //     'aria-labelledby': 'cp-admin-logo'
+        // });
+
+        // var currentContainer = blocks.block([], 'cp-admin-customize-logo');
+        // let redraw = () => {
+        //     var current = h('img', {src: '/api/logo?'+(+new Date())});
+        //     $(currentContainer).empty().append(current);
+        // };
+        // redraw();
+
+        // var upload = blocks.button('primary', '', Messages.admin_logoButton);
+        // var remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
+
+        // let spinnerBlock = blocks.inline();
+        // let spinner = UI.makeSpinner($(spinnerBlock));
+        // let formLogo = blocks.form([
+        //     currentContainer,
+        //     blocks.block(inputLogo),
+        //     blocks.nav([upload, remove, spinnerBlock])
+        // ]);
+
+        // let $button = $(upload);
+        // let $remove = $(remove);
+
+        // Util.onClickEnter($button, function () {
+        //     let files = input.files;
+        //     if (files.length !== 1) {
+        //         UI.warn(Messages.error);
+        //         return;
+        //     }
+        //     spinner.spin();
+        //     $button.attr('disabled', 'disabled');
+        //     let reader = new FileReader();
+        //     reader.onloadend = function () {
+        //         let dataURL = this.result;
+        //         console.log(dataURL, 'dataulr')
+        //         sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) {
+        //             $button.removeAttr('disabled');
+        //             if (e || response.error) {
+        //                 UI.warn(Messages.error);
+        //                 $input.val('');
+        //                 console.error(e, response);
+        //                 done(false);
+        //                 return;
+        //             }
+        //             // flushCache();
+        //             done(true);
+        //             redraw();
+        //             spinner.done();
+        //             UI.log(Messages.saved);
+        //         })
+
+        //     };
+        //     reader.readAsDataURL(files[0]);
+        // });
+        // UI.confirmButton($remove, {
+        //     classes: 'btn-danger',
+        //     multiple: true
+        // }, function () {
+        //     spinner.spin();
+        //     $remove.attr('disabled', 'disabled');
             
-            sendAdminDecree('REMOVE_LOGO', {}, function (e, response) {
-                $remove.removeAttr('disabled');
-                if (err) {
-                    UI.warn(Messages.error);
-                    console.error(err, response);
-                    spinner.hide();
-                    return;
-                }
-                redraw();
-                spinner.done();
-                UI.log(Messages.saved);
-            });
-        });
+        //     sendAdminDecree('REMOVE_LOGO', {}, function (e, response) {
+        //         $remove.removeAttr('disabled');
+        //         if (err) {
+        //             UI.warn(Messages.error);
+        //             console.error(err, response);
+        //             spinner.hide();
+        //             return;
+        //         }
+        //         redraw();
+        //         spinner.done();
+        //         UI.log(Messages.saved);
+        //     });
+        // });
 
-        let inputColor = blocks.input({
-            type: 'color',
-            value: (Instance && Instance.color) || '#0087FF'
-        });
-        let label = blocks.labelledInput(Messages.admin_colorPick, inputColor);
-        let current = blocks.block([], 'cp-admin-color-current');
-        let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
-        let preview = blocks.block([
-            blocks.block([
-                blocks.link('CryptPad', '/admin/#customize'),
-                blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
-                blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
-            ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
-            blocks.block([
-                blocks.link('CryptPad', '/admin/#customize'),
-                blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
-                blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
-            ], 'cp-admin-color-preview-light cp-sidebar-flex-block')
-        ], 'cp-admin-color-preview');
-        let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
-        let $preview = $(preview);
+        // var colorText = Messages.admin_colorTitle
 
-        let removeColor = blocks.button('danger', '', Messages.admin_logoRemoveButton);
-        let $removeColor = $(removeColor);
+        // let inputColor = blocks.input({
+        //     type: 'color',
+        //     value: (Instance && Instance.color) || '#0087FF'
+        // });
+        // let label = blocks.labelledInput(Messages.admin_colorPick, inputColor);
+        // let current = blocks.block([], 'cp-admin-color-current');
+        // let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
+        // let preview = blocks.block([
+        //     blocks.block([
+        //         blocks.link('CryptPad', '/admin/#customize'),
+        //         blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
+        //         blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
+        //     ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
+        //     blocks.block([
+        //         blocks.link('CryptPad', '/admin/#customize'),
+        //         blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
+        //         blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
+        //     ], 'cp-admin-color-preview-light cp-sidebar-flex-block')
+        // ], 'cp-admin-color-preview');
+        // let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
+        // let $preview = $(preview);
 
-        let setColor = (color, done) => {
-            sendAdminDecree('CHANGE_COLOR', {color}, function (e, response) {
-                if (err) {
-                    UI.warn(Messages.error);
-                    console.error(err, response);
-                    done(false);
-                    return;
-                }
-                done(true);
-                UI.log(Messages.saved);
-            });
-        };
+        // let removeColor = blocks.button('danger', '', Messages.admin_logoRemoveButton);
+        // let $removeColor = $(removeColor);
 
-        let btn = blocks.activeButton('primary', '',
-            Messages.admin_colorChange, (done) => {
-            let color = $input.val();
-            setColor(color, done);
-        });
+        // let setColor = (color, done) => {
+        //     sendAdminDecree('CHANGE_COLOR', {color}, function (e, response) {
+        //         if (err) {
+        //             UI.warn(Messages.error);
+        //             console.error(err, response);
+        //             done(false);
+        //             return;
+        //         }
+        //         done(true);
+        //         UI.log(Messages.saved);
+        //     });
+        // };
 
-        let $inputColor = $(inputColor).on('change', () => {
-            require(['/lib/less.min.js'], (Less) => {
-                let color = $inputColor.val();
-                let lColor = Less.color(color.slice(1));
-                let lighten = Less.functions.functionRegistry._data.lighten;
-                let lightColor = lighten(lColor, {value:30}).toRGB();
-                $preview.find('.btn-primary').css({
-                    'background-color': color
-                });
-                $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({
-                    'border-color': lightColor,
-                    'color': lightColor,
-                });
-                $preview.find('.cp-admin-color-preview-light .btn-secondary').css({
-                    'border-color': color,
-                    'color': color,
-                });
-                $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
-                $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
-            });
-        });
+        // //color picker
+        // let $inputColor = $(inputColor).on('change', () => {
+        //     require(['/lib/less.min.js'], (Less) => {
+        //         let color = $inputColor.val();
+        //         let lColor = Less.color(color.slice(1));
+        //         let lighten = Less.functions.functionRegistry._data.lighten;
+        //         let lightColor = lighten(lColor, {value:30}).toRGB();
+        //         $preview.find('.btn-primary').css({
+        //             'background-color': color
+        //         });
+        //         $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({
+        //             'border-color': lightColor,
+        //             'color': lightColor,
+        //         });
+        //         $preview.find('.cp-admin-color-preview-light .btn-secondary').css({
+        //             'border-color': color,
+        //             'color': color,
+        //         });
+        //         $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
+        //         $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
+        //     });
+        // });
 
-        UI.confirmButton($removeColor, {
-            classes: 'btn-danger',
-            multiple: true
-        }, function () {
-            $removeColor.attr('disabled', 'disabled');
-            setColor('', () => {});
-        });
+        // remove color
+        // UI.confirmButton($removeColor, {
+        //     classes: 'btn-danger',
+        //     multiple: true
+        // }, function () {
+        //     $removeColor.attr('disabled', 'disabled');
+        //     setColor('', () => {});
+        // });
 
         var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            sendAdminDecree('SET_INSTANCE_NAME', [$input.val().trim()], function (e, response) {
+
+            sendAdminDecree('SET_INSTANCE_NAME', [$(titleInput).val().trim()], function (e, response) {
                 if (e || response.error) {
                     UI.warn(Messages.error);
                     $input.val('');
@@ -209,7 +306,7 @@ define([
                 UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
 
             })
-            sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$description.val().trim()], function (e, response) {
+            sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(descriptionInput).val().trim()], function (e, response) {
                 if (e || response.error) {
                     UI.warn(Messages.error);
                     $input.val('');
@@ -222,6 +319,36 @@ define([
                 UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
 
             })
+
+             //         sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) {
+        //         console.log('ehllo')
+        //             $button.removeAttr('disabled');
+        //             if (e || response.error) {
+        //                 UI.warn(Messages.error);
+        //                 $input.val('');
+        //                 console.error(e, response);
+        //                 done(false);
+        //                 return;
+        //             }
+        //             // flushCache();
+        //             done(true);
+        //             redraw();
+        //             spinner.done();
+        //             UI.log(Messages.saved);
+        //         })
+
+
+            // sendAdminDecree('CHANGE_COLOR', {colorPick}, function (e, response) {
+            //     if (e || response.error) {
+            //         UI.warn(Messages.error);
+            //         console.error(e, response);
+            //         done(false);
+            //         return;
+            //     }
+            //     done(true);
+            //     UI.log(Messages.saved);
+            // });
+
             var nextPageForm = AppConfigScreen.appConfig(sendAdminDecree)
             var elem = document.createElement('div');
             elem.setAttribute('id', 'cp-loading');
@@ -239,9 +366,18 @@ define([
             append();
         });
 
+        var titleInput = titleDescBlock()[0]
+        var logoInput = logoBlock()
+        console.log(titleInput)
+        var descriptionInput = titleDescBlock()[1]
+
+        var screenTitle = h('div', Messages.admin_onboardingTitle, Messages.admin_onboardingDesc)
         var nav = blocks.nav([button]);
         var form = blocks.form([
-            input,textarea, inputLogo, label, labelCurrent
+        screenTitle, 
+        titleInput, descriptionInput, logoInput
+            // $(titleInput),descriptionInput, inputLogo
+            // , label, labelCurrent
         ], nav);
 
         return form
@@ -264,7 +400,7 @@ define([
                         return;
                     }
                     // flushCache();
-                    done(true);
+                    // done(true);
                     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
 
                 })
diff --git a/www/install/main.js b/www/install/main.js
index 4b207c071..d0bf4c9f2 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -60,26 +60,7 @@ define([
             }
         }
 
-        var showAppScreen = function (sendAdminDecree) {
 
-            var appScreen = AppConfigScreen.appConfig
-            var form = appScreen(sendAdminDecree)
-            var elem = document.createElement('div');
-            elem.setAttribute('id', 'cp-loading');
-            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
-            elem.append(frame)
-
-            built = true;
-            var intr;
-            var append = function () {
-                if (!document.body) { return; }
-                clearInterval(intr);
-                document.body.appendChild(elem);
-            };
-            intr = setInterval(append, 100);
-            append();
-
-        }
 
         var showTitleScreen = function (sendAdminDecree) {
 
@@ -103,53 +84,10 @@ define([
 
         }
 
-        var showTitleScreen = function (sendAdminDecree) {
-
-            var titleScreen = AppConfigScreen.titleConfig
-            var form = titleScreen(sendAdminDecree)
-
-            var elem = document.createElement('div');
-            elem.setAttribute('id', 'cp-loading');
-            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
-            elem.append(frame)
-
-            built = true;
-            var intr;
-            var append = function () {
-                if (!document.body) { return; }
-                clearInterval(intr);
-                document.body.appendChild(elem);
-            };
-            intr = setInterval(append, 100);
-            append();
-
-        }
-
-        var showMFARegistrationScreen = function (sendAdminDecree) {
-
-            var mfaRegistrationScreen = AppConfigScreen.mfaRegistrationScreen
-            var form = mfaRegistrationScreen(sendAdminDecree)
-
-            var elem = document.createElement('div');
-            elem.setAttribute('id', 'cp-loading');
-            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
-            elem.append(frame)
-
-            built = true;
-            var intr;
-            var append = function () {
-                if (!document.body) { return; }
-                clearInterval(intr);
-                document.body.appendChild(elem);
-            };
-            intr = setInterval(append, 100);
-            append();
-
-        }
 
         var registerClick = function () {
             // showTitleScreen()
-                        // document.location.href = '/drive/';
+//                         // document.location.href = '/drive/';
 
 
             var uname = $uname.val().trim();

From be4855b58223419450d873eee919ea4407b5a13c Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Thu, 6 Jun 2024 12:16:01 +0100
Subject: [PATCH 16/50] grid

---
 www/admin/app-admin.less       |  46 +++----
 www/install/appconfigscreen.js | 207 ++++++++++--------------------
 www/install/configscreen.css   | 108 ++++++++++++++++
 www/install/main.js            | 221 +++++++++++++++++----------------
 4 files changed, 307 insertions(+), 275 deletions(-)

diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less
index 99fa4a51f..d9417bfe5 100644
--- a/www/admin/app-admin.less
+++ b/www/admin/app-admin.less
@@ -11,28 +11,30 @@
 @import (reference) '../../customize/src/less2/include/export.less';
 
 .cp-app-drive-element-grid {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    .leftside-menu-category_main();
-    margin: 0;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: -5px;
-    padding-left: 5px;
-    .fa, .cptools {
-        display: inline-block;
-        min-width: 0;
-        width: 20px;
-        margin-right: 0px;
-        z-index: 99;
-    }
-    .cp-app-drive-element {
-        flex: 1;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+    // .leftside-menu-category_main();
+    // // margin: 0;
+    // display: flex;
+    // height: 70px !important;
+    // align-items: center;
+    // cursor: pointer;
+    // margin: 5px;
+    // margin-left: -5px;
+    // padding-left: 5px;
+    // .fa, .cptools {
+    //     display: inline-block;
+    //     min-width: 0;
+    //     width: 20px;
+    //     margin-right: 0px;
+    //     z-index: 99;
+    // }
+    // .cp-app-drive-element {
+    //     flex: 1;
+    //     min-width: 0;
+    //     overflow: hidden;
+    //     text-overflow: ellipsis;
+    // }
 }
 
 .active-app {
diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index 846b0e2b7..1852f1506 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -8,10 +8,10 @@ define([
     '/api/instance',
 
     '/common/hyperscript.js',
-    'css!/lib/datepicker/flatpickr.min.css',
     'css!/components/bootstrap/dist/css/bootstrap.min.css',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
     'less!/admin/app-admin.less',
+    'css!/install/configscreen.css'
 ], function(
     $,
     Sidebar,
@@ -23,6 +23,7 @@ define([
 
 ) {
 
+    //XXX
     Messages.admin_onboardingTitle = 'Welcome to your CryptPad instance'
     Messages.admin_onboardingDesc = 'Please choose a title and description'
 
@@ -140,84 +141,6 @@ define([
         
         }
 
-        // let inputLogo = blocks.input({
-        //     type: 'file',
-        //     accept: 'image/*',
-        //     'aria-labelledby': 'cp-admin-logo'
-        // });
-
-        // var currentContainer = blocks.block([], 'cp-admin-customize-logo');
-        // let redraw = () => {
-        //     var current = h('img', {src: '/api/logo?'+(+new Date())});
-        //     $(currentContainer).empty().append(current);
-        // };
-        // redraw();
-
-        // var upload = blocks.button('primary', '', Messages.admin_logoButton);
-        // var remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
-
-        // let spinnerBlock = blocks.inline();
-        // let spinner = UI.makeSpinner($(spinnerBlock));
-        // let formLogo = blocks.form([
-        //     currentContainer,
-        //     blocks.block(inputLogo),
-        //     blocks.nav([upload, remove, spinnerBlock])
-        // ]);
-
-        // let $button = $(upload);
-        // let $remove = $(remove);
-
-        // Util.onClickEnter($button, function () {
-        //     let files = input.files;
-        //     if (files.length !== 1) {
-        //         UI.warn(Messages.error);
-        //         return;
-        //     }
-        //     spinner.spin();
-        //     $button.attr('disabled', 'disabled');
-        //     let reader = new FileReader();
-        //     reader.onloadend = function () {
-        //         let dataURL = this.result;
-        //         console.log(dataURL, 'dataulr')
-        //         sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) {
-        //             $button.removeAttr('disabled');
-        //             if (e || response.error) {
-        //                 UI.warn(Messages.error);
-        //                 $input.val('');
-        //                 console.error(e, response);
-        //                 done(false);
-        //                 return;
-        //             }
-        //             // flushCache();
-        //             done(true);
-        //             redraw();
-        //             spinner.done();
-        //             UI.log(Messages.saved);
-        //         })
-
-        //     };
-        //     reader.readAsDataURL(files[0]);
-        // });
-        // UI.confirmButton($remove, {
-        //     classes: 'btn-danger',
-        //     multiple: true
-        // }, function () {
-        //     spinner.spin();
-        //     $remove.attr('disabled', 'disabled');
-            
-        //     sendAdminDecree('REMOVE_LOGO', {}, function (e, response) {
-        //         $remove.removeAttr('disabled');
-        //         if (err) {
-        //             UI.warn(Messages.error);
-        //             console.error(err, response);
-        //             spinner.hide();
-        //             return;
-        //         }
-        //         redraw();
-        //         spinner.done();
-        //         UI.log(Messages.saved);
-        //     });
-        // });
 
         // var colorText = Messages.admin_colorTitle
 
@@ -293,49 +216,32 @@ define([
 
         var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
 
-            sendAdminDecree('SET_INSTANCE_NAME', [$(titleInput).val().trim()], function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    $input.val('');
-                    console.error(e, response);
-                    done(false);
-                    return;
-                }
-                // flushCache();
-                done(true);
-                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+            // sendAdminDecree('SET_INSTANCE_NAME', [$(titleInput).val().trim()], function (e, response) {
+            //     if (e || response.error) {
+            //         UI.warn(Messages.error);
+            //         $input.val('');
+            //         console.error(e, response);
+            //         done(false);
+            //         return;
+            //     }
+            //     // flushCache();
+            //     done(true);
+            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
 
-            })
-            sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(descriptionInput).val().trim()], function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    $input.val('');
-                    console.error(e, response);
-                    done(false);
-                    return;
-                }
-                // flushCache();
-                done(true);
-                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+            // })
+            // sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(descriptionInput).val().trim()], function (e, response) {
+            //     if (e || response.error) {
+            //         UI.warn(Messages.error);
+            //         $input.val('');
+            //         console.error(e, response);
+            //         done(false);
+            //         return;
+            //     }
+            //     // flushCache();
+            //     done(true);
+            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
 
-            })
-
-             //         sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) {
-        //         console.log('ehllo')
-        //             $button.removeAttr('disabled');
-        //             if (e || response.error) {
-        //                 UI.warn(Messages.error);
-        //                 $input.val('');
-        //                 console.error(e, response);
-        //                 done(false);
-        //                 return;
-        //             }
-        //             // flushCache();
-        //             done(true);
-        //             redraw();
-        //             spinner.done();
-        //             UI.log(Messages.saved);
-        //         })
+            // })
 
 
             // sendAdminDecree('CHANGE_COLOR', {colorPick}, function (e, response) {
@@ -352,7 +258,7 @@ define([
             var nextPageForm = AppConfigScreen.appConfig(sendAdminDecree)
             var elem = document.createElement('div');
             elem.setAttribute('id', 'cp-loading');
-            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, nextPageForm)
+            let frame = h('div.configscreen', nextPageForm)
             elem.append(frame)
 
             built = true;
@@ -366,20 +272,23 @@ define([
             append();
         });
 
-        var titleInput = titleDescBlock()[0]
-        var logoInput = logoBlock()
+        var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0])
+        var logoInput = h('div.cp-onboardscreen-logo', logoBlock())
         console.log(titleInput)
-        var descriptionInput = titleDescBlock()[1]
-
-        var screenTitle = h('div', Messages.admin_onboardingTitle, Messages.admin_onboardingDesc)
+        var descriptionInput = h('div.cp-onboardscreen-description', titleDescBlock()[1])
+        var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
+        $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingTitle), h('br'), h('span', Messages.admin_onboardingDesc)))
         var nav = blocks.nav([button]);
         var form = blocks.form([
-        screenTitle, 
-        titleInput, descriptionInput, logoInput
+        screenTitleDiv, 
+        titleInput, descriptionInput, 
+        // logoInput
             // $(titleInput),descriptionInput, inputLogo
             // , label, labelCurrent
         ], nav);
 
+        var $form = $(form).addClass('cp-onboardscreen-form')
+
         return form
     
     }
@@ -434,7 +343,14 @@ define([
             return;
         })
 
-        var form = blocks.form([restrict, forceMFA], [button])
+        var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
+        $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-form-setting-title', Messages.admin_onboardingTitle), h('br'), h('span', Messages.admin_onboardingDesc)))
+        
+        var form = blocks.form([
+        screenTitleDiv,
+        restrict, forceMFA], 
+        [button])
+
         return form
     
     }
@@ -458,7 +374,7 @@ define([
         }
 
         allApps.forEach(app => { 
-            let appBlock = h('div',  {style: 'width:50%;height:20px;float:left;border:1px solid red'}, {class: 'inactive-app', id: `${app}-block`}, app)
+            let appBlock = h('div', {class: 'inactive-app', id: `${app}-block`}, {style: 'background-color:white'},app)
             $(appBlock).addClass('cp-app-drive-element-grid')
             $(appBlock).addClass('cp-app-drive-element-row')
             $(appBlock).addClass('cp-app-drive-new-doc')
@@ -468,24 +384,25 @@ define([
         }); 
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            sendAdminDecree('DISABLE_APPS', availableApps, function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    $input.val('');
-                    console.error(e, response);
-                    done(false);
-                    return;
-                }
-                // flushCache();
-                done(true);
-                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+            // sendAdminDecree('DISABLE_APPS', availableApps, function (e, response) {
+            //     if (e || response.error) {
+            //         UI.warn(Messages.error);
+            //         $input.val('');
+            //         console.error(e, response);
+            //         done(false);
+            //         return;
+            //     }
+            //     // flushCache();
+            //     done(true);
+            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
 
-            })
+            // })
+            
             UI.log('Messages._getKey(, [Messages.admin_appSelection])');
             var nextPageForm = AppConfigScreen.mfaRegistrationScreen(sendAdminDecree)
             var elem = document.createElement('div');
             elem.setAttribute('id', 'cp-loading');
-            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, nextPageForm)
+            let frame = h('div.configscreen', nextPageForm)
             elem.append(frame)
 
             built = true;
@@ -498,8 +415,12 @@ define([
             intr = setInterval(append, 100);
             append();
         });
+
+        var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
+            $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-form-setting-title', Messages.admin_onboardingTitle), h('br'), h('span', Messages.admin_onboardingDesc)))
                 
         let form = blocks.form([
+            screenTitleDiv,
             grid 
         ], blocks.nav([save]));
         
diff --git a/www/install/configscreen.css b/www/install/configscreen.css
index efbc5e213..3c78ab455 100644
--- a/www/install/configscreen.css
+++ b/www/install/configscreen.css
@@ -1,3 +1,111 @@
+
+
+.configscreen {
+
+    width: 70%; 
+    height: 75%;
+    background-color: #212121!important;
+
+}
+
+.cp-onboardscreen-name {
+
+    width:75%; 
+    float:right; 
+    padding:10px
+
+}
+
+.cp-onboardscreen-logo {
+
+    width:20%; 
+    height:30%;
+    float:left
+
+}
+
+
+.cp-onboardscreen-description {
+
+    width:75%; 
+    min-height:10000px;
+    float:right;padding:10px
+
+}
+
+.cp-onboardscreen-screentitle {
+
+    margin:auto;
+    padding:10px;
+    text-align:center;
+
+}
+
+.configscreen {
+
+    width: 70%; 
+    height: 75%; 
+    background-color: #424242 !important;
+
+}
+
+.cp-form-setting-title {
+
+    float:center;
+    padding:10px;
+    color: #fff;
+
+}
+
+.cp-onboardscreen-maintitle {
+
+    float:center;
+    padding:10px;  
+
+
+}
+
+
+.cp-onboardscreen-form {
+
+    padding:10px;   
+
+}
+
+.cp-onboardscreen-title {
+
+    font-family: "IBM Plex Mono";
+    font-weight: 500;
+
+}
+
+.cp-admin-customize-apps-grid {
+
+    width: 40%;
+    color: blue;
+    height: 10px !important;
+
+
+}
+
+.cp-app-drive-element-grid {
+
+    /* .leftside-menu-category_main(); */
+    /* float:left; */
+    /* display: flex; */
+    /* height: 70px !important; */
+    /* align-items: center; */
+
+    /* cursor: pointer;
+    margin: 5px;
+    border-color: white !important;
+    width: 50% !important; */
+
+    display: inline-block !important;
+    /* height: 40% !important */
+
+}
+
 .configscreen {
 
 background: red
diff --git a/www/install/main.js b/www/install/main.js
index d0bf4c9f2..8a64230f8 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -19,6 +19,7 @@ define([
     'appconfigscreen.js',
     '/common/inner/sidebar-layout.js',
 
+    'css!/install/configscreen.css',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
 ], function ($, Login, Cryptpad, /*Test,*/ Cred, UI, Util, Realtime, Constants, Feedback, LocalStore, h, Pages, Rpc, AppConfigScreen, Sidebar) {
     if (window.top !== window) { return; }
@@ -69,7 +70,7 @@ define([
 
             var elem = document.createElement('div');
             elem.setAttribute('id', 'cp-loading');
-            let frame = h('div.configscreen',  {style: 'width: 70%; height: 75%; background-color: white'}, form)
+            let frame = h('div.configscreen', form)
             elem.append(frame)
 
             built = true;
@@ -86,138 +87,138 @@ define([
 
 
         var registerClick = function () {
-            // showTitleScreen()
+            showTitleScreen()
 //                         // document.location.href = '/drive/';
 
 
-            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
-            $uname.val(uname);
+//             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
+//             $uname.val(uname);
 
-            var passwd = $passwd.val();
-            var confirmPassword = $confirm.val();
+//             var passwd = $passwd.val();
+//             var confirmPassword = $confirm.val();
 
-            if (!token) { token = $token.val().trim(); }
+//             if (!token) { token = $token.val().trim(); }
 
-            var shouldImport = false;
-            var doesAccept;
-            try {
-                // if this throws there's either a horrible bug (which someone will report)
-                // or the instance admins did not configure a terms page.
-                doesAccept = true;
-            } catch (err) {
-                console.error(err);
-            }
+//             var shouldImport = false;
+//             var doesAccept;
+//             try {
+//                 // if this throws there's either a horrible bug (which someone will report)
+//                 // or the instance admins did not configure a terms page.
+//                 doesAccept = true;
+//             } catch (err) {
+//                 console.error(err);
+//             }
 
-            if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
-                var emailWarning = [
-                    Messages.register_emailWarning0,
-                    br(), br(),
-                    Messages.register_emailWarning1,
-                    br(), br(),
-                    Messages.register_emailWarning2,
-                    br(), br(),
-                    Messages.register_emailWarning3,
-                ];
+//             if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
+//                 var emailWarning = [
+//                     Messages.register_emailWarning0,
+//                     br(), br(),
+//                     Messages.register_emailWarning1,
+//                     br(), br(),
+//                     Messages.register_emailWarning2,
+//                     br(), br(),
+//                     Messages.register_emailWarning3,
+//                 ];
 
-                Feedback.send("EMAIL_USERNAME_WARNING", true);
+//                 Feedback.send("EMAIL_USERNAME_WARNING", true);
 
-                return void UI.confirm(emailWarning, function (yes) {
-                    if (!yes) { return; }
-                    I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
-                    registerClick();
-                });
-            }
+//                 return void UI.confirm(emailWarning, function (yes) {
+//                     if (!yes) { return; }
+//                     I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
+//                     registerClick();
+//                 });
+//             }
 
-            /* basic validation */
-            if (!Cred.isLongEnoughPassword(passwd)) {
-                var warning = Messages._getKey('register_passwordTooShort', [
-                    Cred.MINIMUM_PASSWORD_LENGTH
-                ]);
-                return void UI.alert(warning);
-            }
+//             /* basic validation */
+//             if (!Cred.isLongEnoughPassword(passwd)) {
+//                 var warning = Messages._getKey('register_passwordTooShort', [
+//                     Cred.MINIMUM_PASSWORD_LENGTH
+//                 ]);
+//                 return void UI.alert(warning);
+//             }
 
-            if (passwd !== confirmPassword) { // do their passwords match?
-                return void UI.alert(Messages.register_passwordsDontMatch);
-            }
+//             if (passwd !== confirmPassword) { // do their passwords match?
+//                 return void UI.alert(Messages.register_passwordsDontMatch);
+//             }
 
-            if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
-                return void UI.alert(Messages.register_mustAcceptTerms);
-            }
+//             if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
+//                 return void UI.alert(Messages.register_mustAcceptTerms);
+//             }
 
-            let startOnboarding = function (network, proxy) {
-             Rpc.create(network, proxy.edPrivate, proxy.edPublic, function (e, rpc) {
-                if (e) {
-                  // TODO: handle error
-                  return;
-                }
+//             let startOnboarding = function (network, proxy) {
+//              Rpc.create(network, proxy.edPrivate, proxy.edPublic, function (e, rpc) {
+//                 if (e) {
+//                   // TODO: handle error
+//                   return;
+//                 }
 
-                let sendAdminDecree = function (command, data, callback) {
-                    var params = ['ADMIN_DECREE', [command, data]];  
-                    rpc.send('ADMIN', params, callback)
-                };
+//                 let sendAdminDecree = function (command, data, callback) {
+//                     var params = ['ADMIN_DECREE', [command, data]];  
+//                     rpc.send('ADMIN', params, callback)
+//                 };
 
-                showTitleScreen(sendAdminDecree)
+//                 showTitleScreen(sendAdminDecree)
               
-            });
+//             });
   
-    };
+//     };
 
-            setTimeout(function () {
-                var span = h('span', [
-                    h('h2', [
-                        h('i.fa.fa-warning'),
-                        ' ',
-                        Messages.register_warning,
-                    ]),
-                    Messages.register_warning_note
-                ]);
+//             setTimeout(function () {
+//                 var span = h('span', [
+//                     h('h2', [
+//                         h('i.fa.fa-warning'),
+//                         ' ',
+//                         Messages.register_warning,
+//                     ]),
+//                     Messages.register_warning_note
+//                 ]);
 
-            UI.confirm(span,
-            function (yes) {
-                if (!yes) { return; }
+//             UI.confirm(span,
+//             function (yes) {
+//                 if (!yes) { return; }
 
-                Login.loginOrRegisterUI({
-                    uname,
-                    passwd,
-                    isRegister: true,
-                    onOTP: UI.getOTPScreen,
-                    shouldImport,
-                    cb: function (data) {
-                        var proxy = data.proxy;
-                        if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
+//                 Login.loginOrRegisterUI({
+//                     uname,
+//                     passwd,
+//                     isRegister: true,
+//                     onOTP: UI.getOTPScreen,
+//                     shouldImport,
+//                     cb: function (data) {
+//                         var proxy = data.proxy;
+//                         if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
 
-                        Rpc.createAnonymous(data.network, function (e, call) {
-                            if (e) { UI.alert(Messages.error); return console.error(e); }
-                            var anon_rpc = call;
+//                         Rpc.createAnonymous(data.network, function (e, call) {
+//                             if (e) { UI.alert(Messages.error); return console.error(e); }
+//                             var anon_rpc = call;
 
-                            anon_rpc.send('ADD_FIRST_ADMIN', {
-                                token: token,
-                                edPublic: proxy.edPublic
-                            }, function (e) {
-                                if (e) { UI.alert(Messages.error); return console.error(e); }
-                                startOnboarding(data.network, proxy);
-                            });
-                        });
+//                             anon_rpc.send('ADD_FIRST_ADMIN', {
+//                                 token: token,
+//                                 edPublic: proxy.edPublic
+//                             }, function (e) {
+//                                 if (e) { UI.alert(Messages.error); return console.error(e); }
+//                                 startOnboarding(data.network, proxy);
+//                             });
+//                         });
 
-                        return true;
-                    }
-                });
-            }, {
-                ok: Messages.register_writtenPassword,
-                cancel: Messages.register_cancel,
-/*  If we're certain that we aren't using these "*Class" APIs
-    anywhere else then we can deprecate them and make this a
-    custom modal in common-interface (or here).  */
-                cancelClass: 'btn.btn-cancel.btn-register',
-                okClass: 'btn.btn-danger.btn-register',
-                reverseOrder: true,
-                done: function ($dialog) {
-                    $dialog.find('> div').addClass('half');
-                },
-            });
-            }, 150);
+//                         return true;
+//                     }
+//                 });
+//             }, {
+//                 ok: Messages.register_writtenPassword,
+//                 cancel: Messages.register_cancel,
+// /*  If we're certain that we aren't using these "*Class" APIs
+//     anywhere else then we can deprecate them and make this a
+//     custom modal in common-interface (or here).  */
+//                 cancelClass: 'btn.btn-cancel.btn-register',
+//                 okClass: 'btn.btn-danger.btn-register',
+//                 reverseOrder: true,
+//                 done: function ($dialog) {
+//                     $dialog.find('> div').addClass('half');
+//                 },
+//             });
+//             }, 150);
         };
 
         $register.click(registerClick);

From bc3c7f7779525e5cc87212e43d109334dd841820 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Fri, 7 Jun 2024 12:00:30 +0100
Subject: [PATCH 17/50] logo and color

---
 www/admin/app-admin.less       |   4 -
 www/install/appconfigscreen.js | 347 +++++++++++++++++++--------------
 www/install/configscreen.css   |  36 +++-
 www/install/main.js            |  13 +-
 www/kanban/inner.js            |  84 ++++----
 5 files changed, 279 insertions(+), 205 deletions(-)

diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less
index d9417bfe5..89aa4403a 100644
--- a/www/admin/app-admin.less
+++ b/www/admin/app-admin.less
@@ -37,10 +37,6 @@
     // }
 }
 
-.active-app {
-    color: red;
-
-} 
 
 &.cp-app-admin {
     .framework_min_main();
diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index 1852f1506..8f45b058f 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -24,18 +24,47 @@ define([
 ) {
 
     //XXX
-    Messages.admin_onboardingTitle = 'Welcome to your CryptPad instance'
-    Messages.admin_onboardingDesc = 'Please choose a title and description'
+    Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance'
+    Messages.admin_onboardingNameHint = 'Please choose a title and description'
+
+    Messages.admin_onboardingAppsTitle = "Choose your applications"
+    Messages.admin_onboardingAppsHint = "Choose which apps are available to users on your instance"
+
+    Messages.admin_onboardingRegistrationTitle = "Options"
+    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_onboardingRegistration = "All accounts on the instance have to use 2-factor authentication"
 
-    Messages.admin_appSelection = 'App configuration saved'
-    Messages.admin_appsTitle = "Choose your applications"
-    Messages.admin_appsHint = "Choose which apps are available to users on your instance."
-    Messages.admin_cat_apps = "Apps"
 
     var AppConfigScreen = {};
     const blocks = Sidebar.blocks;
 
-    AppConfigScreen.titleConfig = function (sendAdminDecree) {
+    var displayForm = function(sendAdminDecree, page) {
+
+        var pages = [AppConfigScreen.appConfig, AppConfigScreen.mfaRegistrationScreen, AppConfigScreen.titleConfig]
+        var nextPageFunction = pages[page]
+        console.log('here', typeof nextPageFunction)
+        var nextPageForm = nextPageFunction(sendAdminDecree)
+        var elem = document.createElement('div');
+        elem.setAttribute('id', 'cp-loading');
+        let frame = h('div.configscreen', nextPageForm)
+        elem.append(frame)
+
+        built = true;
+        var intr;
+        var append = function () {
+            if (!document.body) { return; }
+            clearInterval(intr);
+            document.body.appendChild(elem);
+        };
+        intr = setInterval(append, 100);
+        append();
+    
+    }
+
+    AppConfigScreen.titleConfig = function (sendAdminDecree, sendAdminRpc) {
 
         const blocks = Sidebar.blocks;
 
@@ -97,7 +126,7 @@ define([
                 reader.onloadend = function () {
                     let dataURL = this.result;
                     console.log(dataURL, 'dataulr')
-                    sendAdminDecree('UPLOAD_LOGO', {dataURL}, function (e, response) {
+                    sendAdminRpc('UPLOAD_LOGO', {dataURL}, function (e, response) {
                         $button.removeAttr('disabled');
                         if (e || response.error) {
                             UI.warn(Messages.error);
@@ -141,78 +170,93 @@ define([
         
         }
 
+        var colorBlock = function () {
+        
+            let input = blocks.input({
+                    type: 'color',
+                    value: (Instance && Instance.color) || '#0087FF'
+                });
+                let label = blocks.labelledInput(Messages.admin_colorPick, input);
+                let current = blocks.block([], 'cp-admin-color-current');
+                let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
+                let preview = blocks.block([
+                    blocks.block([
+                        blocks.link('CryptPad', '/admin/#customize'),
+                        blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
+                        blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
+                    ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
+                    blocks.block([
+                        blocks.link('CryptPad', '/admin/#customize'),
+                        blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
+                        blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
+                    ], 'cp-admin-color-preview-light cp-sidebar-flex-block')
+                ], 'cp-admin-color-preview');
+                let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
+                let $preview = $(preview);
 
-        // var colorText = Messages.admin_colorTitle
+                let remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
+                let $remove = $(remove);
 
-        // let inputColor = blocks.input({
-        //     type: 'color',
-        //     value: (Instance && Instance.color) || '#0087FF'
-        // });
-        // let label = blocks.labelledInput(Messages.admin_colorPick, inputColor);
-        // let current = blocks.block([], 'cp-admin-color-current');
-        // let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
-        // let preview = blocks.block([
-        //     blocks.block([
-        //         blocks.link('CryptPad', '/admin/#customize'),
-        //         blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
-        //         blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
-        //     ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
-        //     blocks.block([
-        //         blocks.link('CryptPad', '/admin/#customize'),
-        //         blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
-        //         blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
-        //     ], 'cp-admin-color-preview-light cp-sidebar-flex-block')
-        // ], 'cp-admin-color-preview');
-        // let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
-        // let $preview = $(preview);
+                let setColor = (color, done) => {
+                    sframeCommand('CHANGE_COLOR', {color}, (err, response) => {
+                        if (err) {
+                            UI.warn(Messages.error);
+                            console.error(err, response);
+                            done(false);
+                            return;
+                        }
+                        done(true);
+                        UI.log(Messages.saved);
+                    });
+                };
 
-        // let removeColor = blocks.button('danger', '', Messages.admin_logoRemoveButton);
-        // let $removeColor = $(removeColor);
+                let btn = blocks.activeButton('primary', '',
+                Messages.admin_colorChange, (done) => {
+                    let color = $input.val();
+                    setColor(color, done);
+                });
 
-        // let setColor = (color, done) => {
-        //     sendAdminDecree('CHANGE_COLOR', {color}, function (e, response) {
-        //         if (err) {
-        //             UI.warn(Messages.error);
-        //             console.error(err, response);
-        //             done(false);
-        //             return;
-        //         }
-        //         done(true);
-        //         UI.log(Messages.saved);
-        //     });
-        // };
+                let $input = $(input).on('change', () => {
+                    require(['/lib/less.min.js'], (Less) => {
+                        let color = $input.val();
+                        let lColor = Less.color(color.slice(1));
+                        let lighten = Less.functions.functionRegistry._data.lighten;
+                        let lightColor = lighten(lColor, {value:30}).toRGB();
+                        $preview.find('.btn-primary').css({
+                            'background-color': color
+                        });
+                        $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({
+                            'border-color': lightColor,
+                            'color': lightColor,
+                        });
+                        $preview.find('.cp-admin-color-preview-light .btn-secondary').css({
+                            'border-color': color,
+                            'color': color,
+                        });
+                        $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
+                        $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
+                    
+                    });
+                });
 
-        // //color picker
-        // let $inputColor = $(inputColor).on('change', () => {
-        //     require(['/lib/less.min.js'], (Less) => {
-        //         let color = $inputColor.val();
-        //         let lColor = Less.color(color.slice(1));
-        //         let lighten = Less.functions.functionRegistry._data.lighten;
-        //         let lightColor = lighten(lColor, {value:30}).toRGB();
-        //         $preview.find('.btn-primary').css({
-        //             'background-color': color
-        //         });
-        //         $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({
-        //             'border-color': lightColor,
-        //             'color': lightColor,
-        //         });
-        //         $preview.find('.cp-admin-color-preview-light .btn-secondary').css({
-        //             'border-color': color,
-        //             'color': color,
-        //         });
-        //         $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
-        //         $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
-        //     });
-        // });
+                UI.confirmButton($remove, {
+                    classes: 'btn-danger',
+                    multiple: true
+                }, function () {
+                    $remove.attr('disabled', 'disabled');
+                    setColor('', () => {});
+                });
+
+                // let form = blocks.form([
+                    var form = [labelCurrent,
+                    label]
+                // ], blocks.nav([btn, remove, btn.spinner]));
+
+
+            return form
+        
+        }
 
-        // remove color
-        // UI.confirmButton($removeColor, {
-        //     classes: 'btn-danger',
-        //     multiple: true
-        // }, function () {
-        //     $removeColor.attr('disabled', 'disabled');
-        //     setColor('', () => {});
-        // });
 
         var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
 
@@ -226,7 +270,7 @@ define([
             //     }
             //     // flushCache();
             //     done(true);
-            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+            //     UI.log(Messages.saved);
 
             // })
             // sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(descriptionInput).val().trim()], function (e, response) {
@@ -239,7 +283,7 @@ define([
             //     }
             //     // flushCache();
             //     done(true);
-            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+            //     UI.log(Messages.saved);
 
             // })
 
@@ -255,45 +299,36 @@ define([
             //     UI.log(Messages.saved);
             // });
 
-            var nextPageForm = AppConfigScreen.appConfig(sendAdminDecree)
-            var elem = document.createElement('div');
-            elem.setAttribute('id', 'cp-loading');
-            let frame = h('div.configscreen', nextPageForm)
-            elem.append(frame)
-
-            built = true;
-            var intr;
-            var append = function () {
-                if (!document.body) { return; }
-                clearInterval(intr);
-                document.body.appendChild(elem);
-            };
-            intr = setInterval(append, 100);
-            append();
+            displayForm(sendAdminDecree, 0)
         });
 
         var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0])
-        var logoInput = h('div.cp-onboardscreen-logo', logoBlock())
-        console.log(titleInput)
+        var logoInput = h('div.cp-onboardscreen-logo', logoBlock(), {style:'width:20%;height:20%'})
         var descriptionInput = h('div.cp-onboardscreen-description', titleDescBlock()[1])
+        var colorInput =  h('div', colorBlock()[0], colorBlock()[1], {style:'width:50%;height:20%;position:absolute;right:0;bottom:0;margin-right:17%;margin-bottom:10%'})
+        // var colorInputLabel = h('div', colorBlock()[0],  {style:'width:20%;height:20%'})
+        // var colorInputLabel2 = h('div', colorBlock()[1], {style:'width:20%;height:20%'})
+
         var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
-        $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingTitle), h('br'), h('span', Messages.admin_onboardingDesc)))
+        $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingNameTitle), h('br'), h('span', Messages.admin_onboardingNameHint)))
         var nav = blocks.nav([button]);
         var form = blocks.form([
-        screenTitleDiv, 
-        titleInput, descriptionInput, 
-        // logoInput
-            // $(titleInput),descriptionInput, inputLogo
-            // , label, labelCurrent
+            screenTitleDiv, 
+            titleInput, descriptionInput, 
+            logoInput, 
+            colorInput,
         ], nav);
 
-        var $form = $(form).addClass('cp-onboardscreen-form')
+        $(form).addClass('cp-onboardscreen-form')
 
-        return form
+        var wrapper = h('div', form,  {style:'width:100%'})
+
+        return wrapper
     
     }
 
     AppConfigScreen.mfaRegistrationScreen = function(sendAdminDecree) {
+
         var restrict = blocks.activeCheckbox({
             key: 'registration',
             getState: function () {
@@ -301,16 +336,16 @@ define([
             },
             query: function (val, setState) {
                 sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
-                    if (e || response.error) {
-                        UI.warn(Messages.error);
-                        $input.val('');
-                        console.error(e, response);
-                        done(false);
-                        return;
-                    }
-                    // flushCache();
-                    // done(true);
-                    UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+                    // if (e || response.error) {
+                    //     UI.warn(Messages.error);
+                    //     $input.val('');
+                    //     console.error(e, response);
+                    //     done(false);
+                    //     return;
+                    // }
+                    // // flushCache();
+                    // // done(true);
+                    // UI.log(Messages.saved);
 
                 })
             },
@@ -322,34 +357,50 @@ define([
                 return false
             },
             query: function (val, setState) {
-                sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    $input.val('');
-                    console.error(e, response);
-                    done(false);
-                    return;
-                }
-                // flushCache();
-                done(true);
-                UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+                // sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
+                //     if (e || response.error) {
+                //         UI.warn(Messages.error);
+                //         $input.val('');
+                //         console.error(e, response);
+                //         done(false);
+                //         return;
+                //     }
+                //     // flushCache();
+                //     done(true);
+                //     UI.log(Messages.saved);
 
-            })
+                // })
             },
         });
 
-        var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+        const grid = blocks.block([], 'cp-admin-customize-apps-grid');
+        const allApps = [restrict, forceMFA];
+
+        allApps.forEach(app => { 
+            let appBlock = h('div.cp-bloop', {style: 'width:50%;height:20px;float:left'}, {class: 'inactive-app', id: `${app}-block`}, app)
+            $(grid).append(appBlock);
+        }); 
+
+
+        var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
             document.location.href = '/drive/';
             return;
         })
 
+        var prev = blocks.activeButton('primary', '', Messages.settings_prev, function (done) {
+        
+            displayForm(sendAdminDecree, 2)
+        })
+
         var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
-        $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-form-setting-title', Messages.admin_onboardingTitle), h('br'), h('span', Messages.admin_onboardingDesc)))
+        $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingRegistrationTitle), h('br'), h('span', Messages.admin_onboardingRegistrationHint)))
         
         var form = blocks.form([
         screenTitleDiv,
-        restrict, forceMFA], 
-        [button])
+        grid], 
+        [prev, save])
+
+        $(form).addClass('cp-onboardscreen-form')
 
         return form
     
@@ -363,24 +414,29 @@ define([
         const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
         const availableApps = []
             
-        function select(app) {
+        function select(app, appBlock) {
             if (availableApps.indexOf(app) === -1) {
                 availableApps.push(app);
+                console.log(appBlock)
+                console.log(appBlock.innerHTML)
+                var checkMark = h('div.cp-onboardscreen-checkmark', "V", {style:'color:white'})
+                appBlock.append(checkMark)
                 $(`#${app}-block`).attr('class', 'active-app') 
             } else {
                 availableApps.splice(availableApps.indexOf(app), 1)
                 $(`#${app}-block`).attr('class', 'inactive-app')
+                appBlock.remove('.cp-onboardscreen-checkmark')
             } 
         }
 
         allApps.forEach(app => { 
-            let appBlock = h('div', {class: 'inactive-app', id: `${app}-block`}, {style: 'background-color:white'},app)
+            let appBlock = h('div.cp-bloop', {style: 'width:50%;height:20px;'}, {class: 'inactive-app', id: `${app}-block`}, app.charAt(0).toUpperCase() + app.slice(1))
             $(appBlock).addClass('cp-app-drive-element-grid')
             $(appBlock).addClass('cp-app-drive-element-row')
             $(appBlock).addClass('cp-app-drive-new-doc')
 
             $(grid).append(appBlock);
-            $(appBlock).on('click', () => select(app))
+            $(appBlock).on('click', () => select(app, $(appBlock)))
         }); 
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
@@ -394,35 +450,28 @@ define([
             //     }
             //     // flushCache();
             //     done(true);
-            //     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
+            //     UI.log(Messages.saved);
 
             // })
             
-            UI.log('Messages._getKey(, [Messages.admin_appSelection])');
-            var nextPageForm = AppConfigScreen.mfaRegistrationScreen(sendAdminDecree)
-            var elem = document.createElement('div');
-            elem.setAttribute('id', 'cp-loading');
-            let frame = h('div.configscreen', nextPageForm)
-            elem.append(frame)
-
-            built = true;
-            var intr;
-            var append = function () {
-                if (!document.body) { return; }
-                clearInterval(intr);
-                document.body.appendChild(elem);
-            };
-            intr = setInterval(append, 100);
-            append();
+            UI.log(Messages.saved);
+            displayForm(sendAdminDecree, 1)
         });
+        Messages.settings_prev = 'Back'
+        var prev = blocks.activeButton('primary', '', Messages.settings_prev, function (done) {
+        
+            displayForm(sendAdminDecree, 2)
+        })
 
         var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
-            $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-form-setting-title', Messages.admin_onboardingTitle), h('br'), h('span', Messages.admin_onboardingDesc)))
+        $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingAppsTitle), h('br'), h('span', Messages.admin_onboardingAppsHint)))
                 
         let form = blocks.form([
             screenTitleDiv,
             grid 
-        ], blocks.nav([save]));
+        ], blocks.nav([prev, save]));
+
+        $(form).addClass('cp-onboardscreen-form')
         
         return form
     }    
diff --git a/www/install/configscreen.css b/www/install/configscreen.css
index 3c78ab455..59c6d2a38 100644
--- a/www/install/configscreen.css
+++ b/www/install/configscreen.css
@@ -81,9 +81,10 @@
 
 .cp-admin-customize-apps-grid {
 
-    width: 40%;
-    color: blue;
+    width: 80%;
+    color: white;
     height: 10px !important;
+    margin:auto;
 
 
 }
@@ -102,12 +103,37 @@
     width: 50% !important; */
 
     display: inline-block !important;
-    /* height: 40% !important */
+    height: 60px !important;
+    /* background-color: #212121!important; */
+
+    /* margin: 10px !important; */
 
 }
 
-.configscreen {
 
-background: red
+
+.cp-bloop {
+
+    width:60% !important;
+    /* height:400% !important; */
+    float:left !important;
+    
+    padding: 5% !important;
+    /* border:1px solid red !important; */
+    background-color: #212121!important;
+    border-color:white;
+
+}
+
+.active-app {
+
+background-color: #212121!important;
+
+}
+
+.cp-onboardscreen-checkmark {
+
+text-align:right !important;
+color: white !important;
 
 }
\ No newline at end of file
diff --git a/www/install/main.js b/www/install/main.js
index 8a64230f8..348e0af9d 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -26,8 +26,6 @@ define([
     var Messages = Cryptpad.Messages;
     $(function () {
 
-        Messages.admin_appSelection = 'App configuration saved'
-
         if (LocalStore.isLoggedIn()) {
             // already logged in, redirect to drive
             document.location.href = '/drive/';
@@ -63,10 +61,10 @@ define([
 
 
 
-        var showTitleScreen = function (sendAdminDecree) {
+        var showTitleScreen = function (sendAdminDecree, sendAdminRpc) {
 
             var titleScreen = AppConfigScreen.titleConfig
-            var form = titleScreen(sendAdminDecree)
+            var form = titleScreen(sendAdminDecree, sendAdminRpc)
 
             var elem = document.createElement('div');
             elem.setAttribute('id', 'cp-loading');
@@ -159,7 +157,12 @@ define([
 //                     rpc.send('ADMIN', params, callback)
 //                 };
 
-//                 showTitleScreen(sendAdminDecree)
+//                 let sendAdminRpc = function (command, data, callback) {
+//                     var params = [command, data];  
+//                     rpc.send('ADMIN', params, callback)
+//                 };
+
+//                 showTitleScreen(sendAdminDecree, sendAdminRpc)
               
 //             });
   
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index e3579e952..22046d499 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -361,49 +361,49 @@ define([
         };
 
         // Colors
-        var $colors = $(colors);
-        var palette = [''];
-        for (var i=1; i<=8; i++) { palette.push('color'+i); }
-        var selectedColor = '';
-        var resetThemeClass = function () {
-            $colors.find('.cp-kanban-palette').each(function (i, el) {
-                var $c = $(el);
-                $c.removeClass('cp-kanban-palette-card');
-                $c.removeClass('cp-kanban-palette-board');
-                if (isBoard) {
-                    $c.addClass('cp-kanban-palette-board');
-                } else {
-                    $c.addClass('cp-kanban-palette-card');
-                }
-            });
-        };
-        palette.forEach(function (color) {
-            var $color = $(h('span.cp-kanban-palette.fa'));
-            $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
-            $color.click(function () {
-                if (offline) { return; }
-                if (color === selectedColor) { return; }
-                selectedColor = color;
-                $colors.find('.cp-kanban-palette').removeClass('fa-check');
-                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-                $col.addClass('fa-check');
+        // var $colors = $(colors);
+        // var palette = [''];
+        // for (var i=1; i<=8; i++) { palette.push('color'+i); }
+        // var selectedColor = '';
+        // var resetThemeClass = function () {
+        //     $colors.find('.cp-kanban-palette').each(function (i, el) {
+        //         var $c = $(el);
+        //         $c.removeClass('cp-kanban-palette-card');
+        //         $c.removeClass('cp-kanban-palette-board');
+        //         if (isBoard) {
+        //             $c.addClass('cp-kanban-palette-board');
+        //         } else {
+        //             $c.addClass('cp-kanban-palette-card');
+        //         }
+        //     });
+        // };
+        // palette.forEach(function (color) {
+        //     var $color = $(h('span.cp-kanban-palette.fa'));
+        //     $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
+        //     $color.click(function () {
+        //         if (offline) { return; }
+        //         if (color === selectedColor) { return; }
+        //         selectedColor = color;
+        //         $colors.find('.cp-kanban-palette').removeClass('fa-check');
+        //         var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+        //         $col.addClass('fa-check');
 
-                dataObject.color = color;
-                commit();
-            }).appendTo($colors);
-        });
-        var color = {
-            getValue: function () {
-                return selectedColor;
-            },
-            setValue: function (color) {
-                resetThemeClass();
-                $colors.find('.cp-kanban-palette').removeClass('fa-check');
-                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-                $col.addClass('fa-check');
-                selectedColor = color;
-            }
-        };
+        //         dataObject.color = color;
+        //         commit();
+        //     }).appendTo($colors);
+        // });
+        // var color = {
+        //     getValue: function () {
+        //         return selectedColor;
+        //     },
+        //     setValue: function (color) {
+        //         resetThemeClass();
+        //         $colors.find('.cp-kanban-palette').removeClass('fa-check');
+        //         var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+        //         $col.addClass('fa-check');
+        //         selectedColor = color;
+        //     }
+        // };
 
         var button = [{
             className: 'danger left',

From 98b7351070d020b39d55b6f6b03ad9711ed36871 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Fri, 7 Jun 2024 13:25:18 +0100
Subject: [PATCH 18/50] color palette

---
 www/install/appconfigscreen.js | 210 +++++++++++++++++++++------------
 www/kanban/inner.js            |  84 ++++++-------
 2 files changed, 178 insertions(+), 116 deletions(-)

diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index 8f45b058f..42371f84f 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -172,88 +172,150 @@ define([
 
         var colorBlock = function () {
         
-            let input = blocks.input({
-                    type: 'color',
-                    value: (Instance && Instance.color) || '#0087FF'
-                });
-                let label = blocks.labelledInput(Messages.admin_colorPick, input);
-                let current = blocks.block([], 'cp-admin-color-current');
-                let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
-                let preview = blocks.block([
-                    blocks.block([
-                        blocks.link('CryptPad', '/admin/#customize'),
-                        blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
-                        blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
-                    ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
-                    blocks.block([
-                        blocks.link('CryptPad', '/admin/#customize'),
-                        blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
-                        blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
-                    ], 'cp-admin-color-preview-light cp-sidebar-flex-block')
-                ], 'cp-admin-color-preview');
-                let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
-                let $preview = $(preview);
+            // let input = blocks.input({
+            //         type: 'color',
+            //         value: (Instance && Instance.color) || '#0087FF'
+            //     });
+            //     let label = blocks.labelledInput(Messages.admin_colorPick, input);
+            //     let current = blocks.block([], 'cp-admin-color-current');
+            //     let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
+            //     let preview = blocks.block([
+            //         blocks.block([
+            //             blocks.link('CryptPad', '/admin/#customize'),
+            //             blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
+            //             blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
+            //         ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
+            //         blocks.block([
+            //             blocks.link('CryptPad', '/admin/#customize'),
+            //             blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
+            //             blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
+            //         ], 'cp-admin-color-preview-light cp-sidebar-flex-block')
+            //     ], 'cp-admin-color-preview');
+            //     let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
+            //     let $preview = $(preview);
 
-                let remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
-                let $remove = $(remove);
+            //     let remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
+            //     let $remove = $(remove);
 
-                let setColor = (color, done) => {
-                    sframeCommand('CHANGE_COLOR', {color}, (err, response) => {
-                        if (err) {
-                            UI.warn(Messages.error);
-                            console.error(err, response);
-                            done(false);
-                            return;
-                        }
-                        done(true);
-                        UI.log(Messages.saved);
-                    });
-                };
+            //     let setColor = (color, done) => {
+            //         sframeCommand('CHANGE_COLOR', {color}, (err, response) => {
+            //             if (err) {
+            //                 UI.warn(Messages.error);
+            //                 console.error(err, response);
+            //                 done(false);
+            //                 return;
+            //             }
+            //             done(true);
+            //             UI.log(Messages.saved);
+            //         });
+            //     };
 
-                let btn = blocks.activeButton('primary', '',
-                Messages.admin_colorChange, (done) => {
-                    let color = $input.val();
-                    setColor(color, done);
-                });
+            //     let btn = blocks.activeButton('primary', '',
+            //     Messages.admin_colorChange, (done) => {
+            //         let color = $input.val();
+            //         setColor(color, done);
+            //     });
 
-                let $input = $(input).on('change', () => {
-                    require(['/lib/less.min.js'], (Less) => {
-                        let color = $input.val();
-                        let lColor = Less.color(color.slice(1));
-                        let lighten = Less.functions.functionRegistry._data.lighten;
-                        let lightColor = lighten(lColor, {value:30}).toRGB();
-                        $preview.find('.btn-primary').css({
-                            'background-color': color
-                        });
-                        $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({
-                            'border-color': lightColor,
-                            'color': lightColor,
-                        });
-                        $preview.find('.cp-admin-color-preview-light .btn-secondary').css({
-                            'border-color': color,
-                            'color': color,
-                        });
-                        $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
-                        $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
+            //     let $input = $(input).on('change', () => {
+            //         require(['/lib/less.min.js'], (Less) => {
+            //             let color = $input.val();
+            //             let lColor = Less.color(color.slice(1));
+            //             let lighten = Less.functions.functionRegistry._data.lighten;
+            //             let lightColor = lighten(lColor, {value:30}).toRGB();
+            //             $preview.find('.btn-primary').css({
+            //                 'background-color': color
+            //             });
+            //             $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({
+            //                 'border-color': lightColor,
+            //                 'color': lightColor,
+            //             });
+            //             $preview.find('.cp-admin-color-preview-light .btn-secondary').css({
+            //                 'border-color': color,
+            //                 'color': color,
+            //             });
+            //             $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
+            //             $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
                     
-                    });
-                });
+            //         });
+            //     });
 
-                UI.confirmButton($remove, {
-                    classes: 'btn-danger',
-                    multiple: true
-                }, function () {
-                    $remove.attr('disabled', 'disabled');
-                    setColor('', () => {});
-                });
+            //     UI.confirmButton($remove, {
+            //         classes: 'btn-danger',
+            //         multiple: true
+            //     }, function () {
+            //         $remove.attr('disabled', 'disabled');
+            //         setColor('', () => {});
+            //     });
 
-                // let form = blocks.form([
-                    var form = [labelCurrent,
-                    label]
-                // ], blocks.nav([btn, remove, btn.spinner]));
+            //     // let form = blocks.form([
+            //         var form = [labelCurrent,
+            //         label]
+            //     // ], blocks.nav([btn, remove, btn.spinner]));
+                    // Colors
 
+        var conflicts, conflictContainer, titleInput, tagsDiv, colors, text;
+        var content = h('div', [
+            // conflictContainer = h('div#cp-kanban-edit-conflicts', [
+            //     h('div', Messages.kanban_conflicts),
+            //     conflicts = h('div.cp-kanban-cursors')
+            // ]),
+            // h('label', {for:'cp-kanban-edit-title'}, Messages.kanban_title),
+            // titleInput = h('input#cp-kanban-edit-title'),
+            // h('label', {for:'cp-kanban-edit-body'}, Messages.kanban_body),
+            // h('div#cp-kanban-edit-body', [
+            //     text = h('textarea')
+            // ]),
+            // h('label', {for:'cp-kanban-edit-tags'}, Messages.fm_tagsName),
+            // tagsDiv = h('div#cp-kanban-edit-tags'),
+            h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
+            colors = h('div#cp-kanban-edit-colors'),
+        ]);
 
-            return form
+        var $colors = $(colors);
+        var palette = [''];
+        for (var i=1; i<=8; i++) { palette.push('color'+i); }
+        var selectedColor = '';
+        var resetThemeClass = function () {
+            $colors.find('.cp-kanban-palette').each(function (i, el) {
+                var $c = $(el);
+                $c.removeClass('cp-kanban-palette-card');
+                $c.removeClass('cp-kanban-palette-board');
+                // if (isBoard) {
+                //     $c.addClass('cp-kanban-palette-board');
+                // } else {
+                    $c.addClass('cp-kanban-palette-card');
+                // }
+            });
+        };
+        palette.forEach(function (color) {
+            var $color = $(h('span.cp-kanban-palette.fa'));
+            $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
+            $color.click(function () {
+                if (offline) { return; }
+                if (color === selectedColor) { return; }
+                selectedColor = color;
+                $colors.find('.cp-kanban-palette').removeClass('fa-check');
+                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+                $col.addClass('fa-check');
+
+                dataObject.color = color;
+                commit();
+            }).appendTo($colors);
+        });
+        var color = {
+            getValue: function () {
+                return selectedColor;
+            },
+            setValue: function (color) {
+                resetThemeClass();
+                $colors.find('.cp-kanban-palette').removeClass('fa-check');
+                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+                $col.addClass('fa-check');
+                selectedColor = color;
+            }
+        };
+
+            return color
         
         }
 
@@ -305,7 +367,7 @@ define([
         var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0])
         var logoInput = h('div.cp-onboardscreen-logo', logoBlock(), {style:'width:20%;height:20%'})
         var descriptionInput = h('div.cp-onboardscreen-description', titleDescBlock()[1])
-        var colorInput =  h('div', colorBlock()[0], colorBlock()[1], {style:'width:50%;height:20%;position:absolute;right:0;bottom:0;margin-right:17%;margin-bottom:10%'})
+        var colorInput =  h('div', colorBlock(), {style:'width:50%;height:20%;position:absolute;right:0;bottom:0;margin-right:17%;margin-bottom:10%'})
         // var colorInputLabel = h('div', colorBlock()[0],  {style:'width:20%;height:20%'})
         // var colorInputLabel2 = h('div', colorBlock()[1], {style:'width:20%;height:20%'})
 
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index 22046d499..e3579e952 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -361,49 +361,49 @@ define([
         };
 
         // Colors
-        // var $colors = $(colors);
-        // var palette = [''];
-        // for (var i=1; i<=8; i++) { palette.push('color'+i); }
-        // var selectedColor = '';
-        // var resetThemeClass = function () {
-        //     $colors.find('.cp-kanban-palette').each(function (i, el) {
-        //         var $c = $(el);
-        //         $c.removeClass('cp-kanban-palette-card');
-        //         $c.removeClass('cp-kanban-palette-board');
-        //         if (isBoard) {
-        //             $c.addClass('cp-kanban-palette-board');
-        //         } else {
-        //             $c.addClass('cp-kanban-palette-card');
-        //         }
-        //     });
-        // };
-        // palette.forEach(function (color) {
-        //     var $color = $(h('span.cp-kanban-palette.fa'));
-        //     $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
-        //     $color.click(function () {
-        //         if (offline) { return; }
-        //         if (color === selectedColor) { return; }
-        //         selectedColor = color;
-        //         $colors.find('.cp-kanban-palette').removeClass('fa-check');
-        //         var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-        //         $col.addClass('fa-check');
+        var $colors = $(colors);
+        var palette = [''];
+        for (var i=1; i<=8; i++) { palette.push('color'+i); }
+        var selectedColor = '';
+        var resetThemeClass = function () {
+            $colors.find('.cp-kanban-palette').each(function (i, el) {
+                var $c = $(el);
+                $c.removeClass('cp-kanban-palette-card');
+                $c.removeClass('cp-kanban-palette-board');
+                if (isBoard) {
+                    $c.addClass('cp-kanban-palette-board');
+                } else {
+                    $c.addClass('cp-kanban-palette-card');
+                }
+            });
+        };
+        palette.forEach(function (color) {
+            var $color = $(h('span.cp-kanban-palette.fa'));
+            $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
+            $color.click(function () {
+                if (offline) { return; }
+                if (color === selectedColor) { return; }
+                selectedColor = color;
+                $colors.find('.cp-kanban-palette').removeClass('fa-check');
+                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+                $col.addClass('fa-check');
 
-        //         dataObject.color = color;
-        //         commit();
-        //     }).appendTo($colors);
-        // });
-        // var color = {
-        //     getValue: function () {
-        //         return selectedColor;
-        //     },
-        //     setValue: function (color) {
-        //         resetThemeClass();
-        //         $colors.find('.cp-kanban-palette').removeClass('fa-check');
-        //         var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-        //         $col.addClass('fa-check');
-        //         selectedColor = color;
-        //     }
-        // };
+                dataObject.color = color;
+                commit();
+            }).appendTo($colors);
+        });
+        var color = {
+            getValue: function () {
+                return selectedColor;
+            },
+            setValue: function (color) {
+                resetThemeClass();
+                $colors.find('.cp-kanban-palette').removeClass('fa-check');
+                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+                $col.addClass('fa-check');
+                selectedColor = color;
+            }
+        };
 
         var button = [{
             className: 'danger left',

From 0cfc27f3d35a4444f3adb18cfb35a66787610a1a Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Fri, 14 Jun 2024 18:35:51 +0100
Subject: [PATCH 19/50] color pick

---
 lib/commands/admin-rpc.js      |  11 +-
 lib/decrees.js                 |  23 +-
 lib/metadata.js                |   3 +-
 lib/storage/block.js           |   2 +-
 lib/workers/db-worker.js       |   9 +-
 www/common/outer/roster.js     |  12 +-
 www/install/appconfigscreen.js | 378 +++++++++++----------------------
 www/install/configscreen.less  |   3 +
 www/install/main.js            |  21 +-
 www/install/onboarding.less    | 183 ++++++++++++++++
 www/kanban/inner.js            |   1 +
 www/worker/inner.js            |   1 -
 www/worker/worker.js           |   1 -
 13 files changed, 358 insertions(+), 290 deletions(-)
 create mode 100644 www/install/configscreen.less
 create mode 100644 www/install/onboarding.less

diff --git a/lib/commands/admin-rpc.js b/lib/commands/admin-rpc.js
index 30415dd17..6f15d63e1 100644
--- a/lib/commands/admin-rpc.js
+++ b/lib/commands/admin-rpc.js
@@ -726,7 +726,8 @@ var archivePinLog = function (Env, Server, cb, data) {
 
 var archiveBlock = function (Env, Server, cb, data) {
     var args = Array.isArray(data) && data[1];
-    if (!args) { return void cb("INVALID_ARGS"); }
+    if (!args) { 
+    return void cb("INVALID_ARGS"); }
     var key = args.key;
     var reason = args.reason;
     if (!isValidKey(key)) { return void cb("EINVAL"); }
@@ -748,7 +749,8 @@ var archiveBlock = function (Env, Server, cb, data) {
 
 var restoreArchivedBlock = function (Env, Server, cb, data) {
     var args = Array.isArray(data) && data[1];
-    if (!args) { return void cb("INVALID_ARGS"); }
+    if (!args) { 
+    return void cb("INVALID_ARGS"); }
     var key = args.key;
     var reason = args.reason;
     if (!isValidKey(key)) { return void cb("EINVAL"); }
@@ -1012,7 +1014,7 @@ var uploadLogo = (Env, Server, cb, data, unsafeKey) => {
 var changeColor = (Env, Server, cb, data, unsafeKey) => {
     const args = Array.isArray(data) && data[1];
     if (!args || typeof(args) !== 'object') { return void cb("EINVAL"); }
-    let color = args.color;
+    let color = args.color || args.selectedColor;
     adminDecree(Env, null, function (err) {
         if (err) { return void cb(err); }
         Env.flushCache();
@@ -1107,7 +1109,8 @@ Admin.addFirstAdmin = function (Env, data, cb) {
     if (!Env.installToken) { return void cb('EINVAL'); }
     var token = data.token;
     if (!token || !data.edPublic) { return void cb('MISSING_ARGS'); }
-    if (token.length !== 64 || data.edPublic.length !== 44) { return void cb('INVALID_ARGS'); }
+    if (token.length !== 64 || data.edPublic.length !== 44) { console.log('here21')
+    return void cb('INVALID_ARGS'); }
     if (token !== Env.installToken) { return void cb('FORBIDDEN'); }
     if (Array.isArray(Env.admins) && Env.admins.length) { return void cb('EEXISTS'); }
 
diff --git a/lib/decrees.js b/lib/decrees.js
index 063716bdf..d83bcda7d 100644
--- a/lib/decrees.js
+++ b/lib/decrees.js
@@ -167,6 +167,10 @@ var isInteger = function (n) {
 };
 
 var args_isString = function (args) {
+console.log('args', args)
+    console.log(typeof args)
+    console.log(Array.isArray(args))
+    console.log(isString(args[0]))
     return !(!Array.isArray(args) || !isString(args[0]));
 };
 var args_isInteger = function (args) {
@@ -237,6 +241,7 @@ commands.DISABLE_APPS = function (Env, args) {
 };
 
 commands.CHANGE_COLOR = function (Env, args) {
+        console.log('change color')
         var color = args
         adminDecree(Env, null, function (err) {
         if (err) { return void cb(err); }
@@ -310,19 +315,21 @@ commands.SET_SUPPORT_KEYS = function (Env, args) {
                     (Core.isValidPublicKey(curvePublic) || !curvePublic) &&
                     typeof(edPublic) === "string" &&
                     (Core.isValidPublicKey(edPublic) || !edPublic);
-    if (!validated) { throw new Error('INVALID_ARGS'); }
-    if (Env.supportMailboxKey === curvePublic && Env.supportPinKey === edPublic) { return false; }
-    Env.supportMailboxKey = curvePublic;
-    Env.supportPinKey = edPublic;
-    return true;
-};
+    if (!validated) { 
+        throw new Error('INVALID_ARGS'); }
+            if (Env.supportMailboxKey === curvePublic && Env.supportPinKey === edPublic) { return false; }
+            Env.supportMailboxKey = curvePublic;
+            Env.supportPinKey = edPublic;
+            return true;
+        };
 
 // CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_INSTANCE_PURPOSE', ["development"]]], console.log)
 commands.SET_INSTANCE_PURPOSE = makeGenericSetter('instancePurpose', args_isString);
 
 var makeTranslation = function (attr) {
     return function (Env, args) {
-        if (!Array.isArray(args)) { throw new Error("INVALID_ARGS"); }
+        if (!Array.isArray(args)) { 
+        throw new Error("INVALID_ARGS"); }
         var value = args[0];
         var state = Env[attr];
 
@@ -373,7 +380,7 @@ var args_isMaintenance = function (args) {
 // whenever that happens we can relax validation a bit to support more formats
 var makeBroadcastSetter = function (attr, validation) {
     return function (Env, args) {
-        if ((validation && !validation(args)) && !args_isString(args)) {
+        if ((validation && !validation(args)) && !args_isString(args)) {
             throw new Error('INVALID_ARGS');
         }
         var str = args[0];
diff --git a/lib/metadata.js b/lib/metadata.js
index 9d4081285..1c367d6d2 100644
--- a/lib/metadata.js
+++ b/lib/metadata.js
@@ -370,7 +370,8 @@ commands.ADD_MAILBOX = function (meta, args) {
 };
 
 commands.RM_MAILBOX = function (meta, args) {
-    if (!Array.isArray(args)) { throw new Error("INVALID_ARGS"); }
+    if (!Array.isArray(args)) { 
+        throw new Error("INVALID_ARGS"); }
     if (!meta.mailbox || typeof(meta.mailbox) === 'undefined') {
         return false;
     }
diff --git a/lib/storage/block.js b/lib/storage/block.js
index 8809cf1b7..479914f87 100644
--- a/lib/storage/block.js
+++ b/lib/storage/block.js
@@ -127,7 +127,7 @@ var exists = function (path, cb) {
 
 var checkPath = function (Env, publicKey, pathFunction, _cb) {
     var cb = Util.once(Util.mkAsync(_cb));
-    if (!isValidKey(publicKey)) { return void cb("INVALID_ARGS"); }
+    if (!isValidKey(publicKey)) {  return void cb("INVALID_ARGS"); }
     var path = pathFunction(Env, publicKey);
     exists(path, cb);
 };
diff --git a/lib/workers/db-worker.js b/lib/workers/db-worker.js
index 9878d2c22..d3a786307 100644
--- a/lib/workers/db-worker.js
+++ b/lib/workers/db-worker.js
@@ -582,7 +582,8 @@ var reportStatus = function (Env, label, safeKey, err, id, size) {
 };
 
 const completeUpload = function (data, cb) {
-    if (!data) { return void cb('INVALID_ARGS'); }
+    if (!data) { 
+    return void cb('INVALID_ARGS'); }
     if (typeof(data.safeKey) !== 'string') { return void cb("INVALID_KEY"); }
     var owned = data.owned;
     var safeKey = Util.escapeKeyCharacters(data.safeKey);
@@ -606,7 +607,8 @@ const completeUpload = function (data, cb) {
 };
 
 const getPinActivity = function (data, cb) {
-    if (!data) { return void cb("INVALID_ARGS"); }
+    if (!data) { 
+    return void cb("INVALID_ARGS"); }
     if (typeof(data.key) !== 'string') { return void cb("INVALID_KEY"); }
     var safeKey = Util.escapeKeyCharacters(data.key);
     var first;
@@ -633,7 +635,8 @@ const getPinActivity = function (data, cb) {
 };
 
 const getLastChannelTime = function (data, cb) {
-    if (!data) { return void cb("INVALID_ARGS"); }
+    if (!data) { 
+    return void cb("INVALID_ARGS"); }
     var latest;
     store.getMessages(data.channel, function (line) {
         try {
diff --git a/www/common/outer/roster.js b/www/common/outer/roster.js
index bcd952d9d..2cb505ac1 100644
--- a/www/common/outer/roster.js
+++ b/www/common/outer/roster.js
@@ -205,7 +205,8 @@ var factory = function (Util, Hash, CPNetflux, Sortify, nThen, Crypto, Feedback)
     };
 
     commands.RM = function (args, author, roster) {
-        if (!Array.isArray(args)) { throw new Error("INVALID_ARGS"); }
+        if (!Array.isArray(args)) { 
+        throw new Error("INVALID_ARGS"); }
 
         if (typeof(roster.state.members) === 'undefined') {
             throw new Error("CANNOT_RM_FROM_UNITIALIZED_ROSTER");
@@ -348,7 +349,8 @@ var factory = function (Util, Hash, CPNetflux, Sortify, nThen, Crypto, Feedback)
 
     // only admin/owner can change group metadata
     commands.METADATA = function (args, author, roster) {
-        if (!isMap(args)) { throw new Error("INVALID_ARGS"); }
+        if (!isMap(args)) { console.log('here27')
+        throw new Error("INVALID_ARGS"); }
 
         if (!canUpdateMetadata(author, roster.state.members)) { throw new Error("INSUFFICIENT_PERMISSIONS"); }
 
@@ -386,7 +388,8 @@ var factory = function (Util, Hash, CPNetflux, Sortify, nThen, Crypto, Feedback)
         // that key is ultimately given to the user you'd like on your team
         // that user can exploit their possession of the public key to remove
         // the pending invitation with their actual data.
-        if (!isMap(args)) { throw new Error('INVALID_ARGS'); }
+        if (!isMap(args)) {console.log('here28')
+         throw new Error('INVALID_ARGS'); }
         if (!roster.internal.initialized) { throw new Error("UNINITIALIED"); }
         if (typeof(roster.state.members) === 'undefined') {
             throw new Error("CANNOT+INVITE_TO_UNINITIALIED_ROSTER");
@@ -457,7 +460,8 @@ var factory = function (Util, Hash, CPNetflux, Sortify, nThen, Crypto, Feedback)
         if (!members[author].pending) { throw new Error("ALREADY_PRESENT"); }
 
         // args should be a string
-        if (typeof(args) !== 'string') { throw new Error("INVALID_ARGS"); }
+        if (typeof(args) !== 'string') { console.log('here29')
+        throw new Error("INVALID_ARGS"); }
         // ...and a valid curve key
         if (!isValidId(args)) { throw new Error("INVALID_CURVE_KEY"); }
 
diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index 42371f84f..c04b64687 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -10,8 +10,9 @@ define([
     '/common/hyperscript.js',
     'css!/components/bootstrap/dist/css/bootstrap.min.css',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
-    'less!/admin/app-admin.less',
-    'css!/install/configscreen.css'
+
+    // 'less!/admin/app-admin.less',
+    // 'css!/install/configscreen.css'
 ], function(
     $,
     Sidebar,
@@ -19,40 +20,30 @@ define([
     h,
     UI,
     Util,
-    Instance
-
 ) {
 
     //XXX
-    Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance'
-    Messages.admin_onboardingNameHint = 'Please choose a title and description'
-
-    Messages.admin_onboardingAppsTitle = "Choose your applications"
-    Messages.admin_onboardingAppsHint = "Choose which apps are available to users on your instance"
-
-    Messages.admin_onboardingRegistrationTitle = "Options"
-    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_onboardingRegistration = "All accounts on the instance have to use 2-factor authentication"
-
+    Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance';
+    Messages.admin_onboardingNameHint = 'Please choose a title and description';
+    Messages.admin_onboardingAppsTitle = "Choose your applications";
+    Messages.admin_onboardingAppsHint = "Choose which apps are available to users on your instance";
+    Messages.admin_onboardingRegistrationTitle = "Options";
+    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_onboardingRegistration = "All accounts on the instance have to use 2-factor authentication";
 
     var AppConfigScreen = {};
     const blocks = Sidebar.blocks;
 
     var displayForm = function(sendAdminDecree, page) {
 
-        var pages = [AppConfigScreen.appConfig, AppConfigScreen.mfaRegistrationScreen, AppConfigScreen.titleConfig]
-        var nextPageFunction = pages[page]
-        console.log('here', typeof nextPageFunction)
-        var nextPageForm = nextPageFunction(sendAdminDecree)
+        var pages = [AppConfigScreen.appConfig, AppConfigScreen.mfaRegistrationScreen, AppConfigScreen.titleConfig];
+        var nextPageFunction = pages[page];
+        var nextPageForm = nextPageFunction(sendAdminDecree);
         var elem = document.createElement('div');
         elem.setAttribute('id', 'cp-loading');
-        let frame = h('div.configscreen', nextPageForm)
-        elem.append(frame)
-
-        built = true;
+        let frame = h('div.configscreen', nextPageForm);
+        elem.append(frame);
         var intr;
         var append = function () {
             if (!document.body) { return; }
@@ -62,7 +53,7 @@ define([
         intr = setInterval(append, 100);
         append();
     
-    }
+    };
 
     AppConfigScreen.titleConfig = function (sendAdminDecree, sendAdminRpc) {
 
@@ -76,14 +67,17 @@ define([
                 placeholder: 'Instance title',
                 'aria-labelledby': 'cp-admin-name'
             });
-            var textarea = blocks.textarea({
+
+            var desc =  blocks.textarea({
                 placeholder: 'Placeholder description text',
                 value:  '',
                 'aria-labelledby': 'cp-admin-description'
             });
 
-            return [input, textarea]
-        }
+            $(desc).addClass('cp-onboardscreen-desc');
+
+            return [input, desc];
+        };
 
         var logoBlock = function() {
 
@@ -96,6 +90,7 @@ define([
             var currentContainer = blocks.block([], 'cp-admin-customize-logo');
             let redraw = () => {
                 var current = h('img', {src: '/api/logo?'+(+new Date())});
+                $(current).css({'max-width':'30px'});
                 $(currentContainer).empty().append(current);
             };
             redraw();
@@ -125,7 +120,6 @@ define([
                 let reader = new FileReader();
                 reader.onloadend = function () {
                     let dataURL = this.result;
-                    console.log(dataURL, 'dataulr')
                     sendAdminRpc('UPLOAD_LOGO', {dataURL}, function (e, response) {
                         $button.removeAttr('disabled');
                         if (e || response.error) {
@@ -140,7 +134,7 @@ define([
                         redraw();
                         spinner.done();
                         UI.log(Messages.saved);
-                    })
+                    });
 
                 };
                 reader.readAsDataURL(files[0]);
@@ -151,8 +145,8 @@ define([
             }, function () {
                 spinner.spin();
                 $remove.attr('disabled', 'disabled');
-                
-                sendAdminDecree('REMOVE_LOGO', {}, function (e, response) {
+
+                sendAdminRpc('REMOVE_LOGO', {dataURL}, function (e, response) {
                     $remove.removeAttr('disabled');
                     if (err) {
                         UI.warn(Messages.error);
@@ -166,159 +160,51 @@ define([
                 });
             });
 
-            return formLogo
+            return formLogo;
         
-        }
+        };
 
         var colorBlock = function () {
-        
-            // let input = blocks.input({
-            //         type: 'color',
-            //         value: (Instance && Instance.color) || '#0087FF'
-            //     });
-            //     let label = blocks.labelledInput(Messages.admin_colorPick, input);
-            //     let current = blocks.block([], 'cp-admin-color-current');
-            //     let labelCurrent = blocks.labelledInput(Messages.admin_colorCurrent, current);
-            //     let preview = blocks.block([
-            //         blocks.block([
-            //             blocks.link('CryptPad', '/admin/#customize'),
-            //             blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
-            //             blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
-            //         ], 'cp-admin-color-preview-dark cp-sidebar-flex-block'),
-            //         blocks.block([
-            //             blocks.link('CryptPad', '/admin/#customize'),
-            //             blocks.button('primary', 'fa-floppy-o', Messages.settings_save),
-            //             blocks.button('secondary', 'fa-floppy-o', Messages.settings_save)
-            //         ], 'cp-admin-color-preview-light cp-sidebar-flex-block')
-            //     ], 'cp-admin-color-preview');
-            //     let labelPreview = blocks.labelledInput(Messages.admin_colorPreview, preview);
-            //     let $preview = $(preview);
 
-            //     let remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
-            //     let $remove = $(remove);
+            var colors;
+            var content = h('div', [
+                h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
+                colors = h('div#cp-kanban-edit-colors'),
+            ], {style: 'padding-left:50%'});
 
-            //     let setColor = (color, done) => {
-            //         sframeCommand('CHANGE_COLOR', {color}, (err, response) => {
-            //             if (err) {
-            //                 UI.warn(Messages.error);
-            //                 console.error(err, response);
-            //                 done(false);
-            //                 return;
-            //             }
-            //             done(true);
-            //             UI.log(Messages.saved);
-            //         });
-            //     };
-
-            //     let btn = blocks.activeButton('primary', '',
-            //     Messages.admin_colorChange, (done) => {
-            //         let color = $input.val();
-            //         setColor(color, done);
-            //     });
-
-            //     let $input = $(input).on('change', () => {
-            //         require(['/lib/less.min.js'], (Less) => {
-            //             let color = $input.val();
-            //             let lColor = Less.color(color.slice(1));
-            //             let lighten = Less.functions.functionRegistry._data.lighten;
-            //             let lightColor = lighten(lColor, {value:30}).toRGB();
-            //             $preview.find('.btn-primary').css({
-            //                 'background-color': color
-            //             });
-            //             $preview.find('.cp-admin-color-preview-dark .btn-secondary').css({
-            //                 'border-color': lightColor,
-            //                 'color': lightColor,
-            //             });
-            //             $preview.find('.cp-admin-color-preview-light .btn-secondary').css({
-            //                 'border-color': color,
-            //                 'color': color,
-            //             });
-            //             $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
-            //             $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
-                    
-            //         });
-            //     });
-
-            //     UI.confirmButton($remove, {
-            //         classes: 'btn-danger',
-            //         multiple: true
-            //     }, function () {
-            //         $remove.attr('disabled', 'disabled');
-            //         setColor('', () => {});
-            //     });
-
-            //     // let form = blocks.form([
-            //         var form = [labelCurrent,
-            //         label]
-            //     // ], blocks.nav([btn, remove, btn.spinner]));
-                    // Colors
-
-        var conflicts, conflictContainer, titleInput, tagsDiv, colors, text;
-        var content = h('div', [
-            // conflictContainer = h('div#cp-kanban-edit-conflicts', [
-            //     h('div', Messages.kanban_conflicts),
-            //     conflicts = h('div.cp-kanban-cursors')
-            // ]),
-            // h('label', {for:'cp-kanban-edit-title'}, Messages.kanban_title),
-            // titleInput = h('input#cp-kanban-edit-title'),
-            // h('label', {for:'cp-kanban-edit-body'}, Messages.kanban_body),
-            // h('div#cp-kanban-edit-body', [
-            //     text = h('textarea')
-            // ]),
-            // h('label', {for:'cp-kanban-edit-tags'}, Messages.fm_tagsName),
-            // tagsDiv = h('div#cp-kanban-edit-tags'),
-            h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
-            colors = h('div#cp-kanban-edit-colors'),
-        ]);
-
-        var $colors = $(colors);
-        var palette = [''];
-        for (var i=1; i<=8; i++) { palette.push('color'+i); }
-        var selectedColor = '';
-        var resetThemeClass = function () {
-            $colors.find('.cp-kanban-palette').each(function (i, el) {
-                var $c = $(el);
-                $c.removeClass('cp-kanban-palette-card');
-                $c.removeClass('cp-kanban-palette-board');
-                // if (isBoard) {
-                //     $c.addClass('cp-kanban-palette-board');
-                // } else {
-                    $c.addClass('cp-kanban-palette-card');
-                // }
+            var $colors = $(colors);
+            var palette = [''];
+            for (var i=1; i<=8; i++) { palette.push('color'+i); }
+            var selectedColor = '';
+            palette.forEach(function (color) {
+                var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
+                $color.css({'width':'30px', 'height':'30px', 'display': 'inline-block', 'border-radius': '50%', 'text-align': 'center', 'line-height': '30px', 'margin-right':'1%'})
+                $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
+                $color.click(function () {
+                    if (color === selectedColor) { return; }
+                    selectedColor = $color.css('background-color');
+                    $colors.find('.cp-kanban-palette').removeClass('fa-check');
+                    var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+                    $col.addClass('fa-check');
+                    sendAdminRpc('CHANGE_COLOR', {selectedColor}, function (e, response) {
+                        if (e || response.error) {
+                            UI.warn(Messages.error);
+                            console.error(e, response);
+                            // done(false);
+                            return;
+                        }
+                        // flushCache();
+                        // done(true);
+                        // redraw();
+                        // spinner.done();
+                        UI.log(Messages.saved);
+                    });
+                }).appendTo($colors);
             });
-        };
-        palette.forEach(function (color) {
-            var $color = $(h('span.cp-kanban-palette.fa'));
-            $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
-            $color.click(function () {
-                if (offline) { return; }
-                if (color === selectedColor) { return; }
-                selectedColor = color;
-                $colors.find('.cp-kanban-palette').removeClass('fa-check');
-                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-                $col.addClass('fa-check');
-
-                dataObject.color = color;
-                commit();
-            }).appendTo($colors);
-        });
-        var color = {
-            getValue: function () {
-                return selectedColor;
-            },
-            setValue: function (color) {
-                resetThemeClass();
-                $colors.find('.cp-kanban-palette').removeClass('fa-check');
-                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-                $col.addClass('fa-check');
-                selectedColor = color;
-            }
-        };
-
-            return color
         
-        }
-
+            return content;
+        
+        };
 
         var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
 
@@ -349,52 +235,39 @@ define([
 
             // })
 
-
-            // sendAdminDecree('CHANGE_COLOR', {colorPick}, function (e, response) {
-            //     if (e || response.error) {
-            //         UI.warn(Messages.error);
-            //         console.error(e, response);
-            //         done(false);
-            //         return;
-            //     }
-            //     done(true);
-            //     UI.log(Messages.saved);
-            // });
-
-            displayForm(sendAdminDecree, 0)
+            displayForm(sendAdminDecree, 0);
         });
 
-        var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0])
-        var logoInput = h('div.cp-onboardscreen-logo', logoBlock(), {style:'width:20%;height:20%'})
-        var descriptionInput = h('div.cp-onboardscreen-description', titleDescBlock()[1])
-        var colorInput =  h('div', colorBlock(), {style:'width:50%;height:20%;position:absolute;right:0;bottom:0;margin-right:17%;margin-bottom:10%'})
-        // var colorInputLabel = h('div', colorBlock()[0],  {style:'width:20%;height:20%'})
-        // var colorInputLabel2 = h('div', colorBlock()[1], {style:'width:20%;height:20%'})
+        var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0]);
+        var logoInput = h('div.cp-onboardscreen-logo', logoBlock());
+        var desc = h('div', titleDescBlock()[1]);
+        var colorInput =  h('div.cp-onboardscreen-color', colorBlock());
 
-        var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
-        $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingNameTitle), h('br'), h('span', Messages.admin_onboardingNameHint)))
+        var screenTitle = h('div.cp-onboardscreen-screentitle');
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingNameTitle), h('br'), h('span', Messages.admin_onboardingNameHint)));
         var nav = blocks.nav([button]);
+        $(nav).addClass('cp-onboardscreen-save');
+ 
         var form = blocks.form([
-            screenTitleDiv, 
-            titleInput, descriptionInput, 
+            screenTitle, 
+            titleInput, 
+            desc,
             logoInput, 
             colorInput,
         ], nav);
 
-        $(form).addClass('cp-onboardscreen-form')
+        $(form).addClass('cp-onboardscreen-form');
 
-        var wrapper = h('div', form,  {style:'width:100%'})
+        return form;
 
-        return wrapper
-    
-    }
+    };
 
     AppConfigScreen.mfaRegistrationScreen = function(sendAdminDecree) {
 
         var restrict = blocks.activeCheckbox({
             key: 'registration',
             getState: function () {
-                return false
+                return false;
             },
             query: function (val, setState) {
                 sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
@@ -409,14 +282,14 @@ define([
                     // // done(true);
                     // UI.log(Messages.saved);
 
-                })
+                });
             },
         });
 
         var forceMFA = blocks.activeCheckbox({
             key: 'forcemfa',
             getState: function () {
-                return false
+                return false;
             },
             query: function (val, setState) {
                 // sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
@@ -436,37 +309,37 @@ define([
         });
 
         const grid = blocks.block([], 'cp-admin-customize-apps-grid');
-        const allApps = [restrict, forceMFA];
+        const options = [restrict, forceMFA];
 
-        allApps.forEach(app => { 
-            let appBlock = h('div.cp-bloop', {style: 'width:50%;height:20px;float:left'}, {class: 'inactive-app', id: `${app}-block`}, app)
-            $(grid).append(appBlock);
+        options.forEach(app => { 
+            let optionBlock = h('div.cp-appblock', {class: 'inactive-app', id: `${app}-block`}, app);
+            $(grid).append(optionBlock);
         }); 
 
-
-        var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+        var save = blocks.activeButton('primary', '', Messages.settings_save, function () {
             document.location.href = '/drive/';
             return;
-        })
+        });
 
-        var prev = blocks.activeButton('primary', '', Messages.settings_prev, function (done) {
-        
-            displayForm(sendAdminDecree, 2)
-        })
+        var prev = blocks.activeButton('primary', '', Messages.settings_prev, function () {
+            displayForm(sendAdminDecree, 0);
+        });
+
+        var screenTitle = h('div.cp-onboardscreen-screentitle');
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingRegistrationTitle), h('br'), h('span', Messages.admin_onboardingRegistrationHint)));
+        var nav = blocks.nav([prev, save]);
+        $(nav).addClass('cp-onboardscreen-save');
 
-        var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
-        $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingRegistrationTitle), h('br'), h('span', Messages.admin_onboardingRegistrationHint)))
-        
         var form = blocks.form([
-        screenTitleDiv,
-        grid], 
-        [prev, save])
+            screenTitle,
+            grid], 
+        );
 
-        $(form).addClass('cp-onboardscreen-form')
+        $(form).addClass('cp-onboardscreen-form');
 
-        return form
+        return form;
     
-    }
+    };
 
 
     AppConfigScreen.appConfig = function (sendAdminDecree) {
@@ -474,20 +347,18 @@ define([
         const blocks = Sidebar.blocks;
         const grid = blocks.block([], 'cp-admin-customize-apps-grid');
         const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
-        const availableApps = []
+        const availableApps = [];
             
         function select(app, appBlock) {
             if (availableApps.indexOf(app) === -1) {
                 availableApps.push(app);
-                console.log(appBlock)
-                console.log(appBlock.innerHTML)
-                var checkMark = h('div.cp-onboardscreen-checkmark', "V", {style:'color:white'})
-                appBlock.append(checkMark)
+                var checkMark = h('div.cp-onboardscreen-checkmark', "V", {style:'color:white'});
+                appBlock.append(checkMark);
                 $(`#${app}-block`).attr('class', 'active-app') 
             } else {
-                availableApps.splice(availableApps.indexOf(app), 1)
-                $(`#${app}-block`).attr('class', 'inactive-app')
-                appBlock.remove('.cp-onboardscreen-checkmark')
+                availableApps.splice(availableApps.indexOf(app), 1);
+                $(`#${app}-block`).attr('class', 'inactive-app');
+                appBlock.remove('.cp-onboardscreen-checkmark');
             } 
         }
 
@@ -495,10 +366,9 @@ define([
             let appBlock = h('div.cp-bloop', {style: 'width:50%;height:20px;'}, {class: 'inactive-app', id: `${app}-block`}, app.charAt(0).toUpperCase() + app.slice(1))
             $(appBlock).addClass('cp-app-drive-element-grid')
             $(appBlock).addClass('cp-app-drive-element-row')
-            $(appBlock).addClass('cp-app-drive-new-doc')
 
             $(grid).append(appBlock);
-            $(appBlock).on('click', () => select(app, $(appBlock)))
+            $(appBlock).on('click', () => select(app, $(appBlock)));
         }); 
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
@@ -519,27 +389,27 @@ define([
             UI.log(Messages.saved);
             displayForm(sendAdminDecree, 1)
         });
-        Messages.settings_prev = 'Back'
-        var prev = blocks.activeButton('primary', '', Messages.settings_prev, function (done) {
-        
-            displayForm(sendAdminDecree, 2)
-        })
 
-        var screenTitleDiv = h('div.cp-onboardscreen-screentitle')
-        $(screenTitleDiv).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingAppsTitle), h('br'), h('span', Messages.admin_onboardingAppsHint)))
-                
+        var prev = blocks.activeButton('primary', '', Messages.form_backButton, function () {
+            displayForm(sendAdminDecree, 2);
+        });
+
+        var screenTitle = h('div.cp-onboardscreen-screentitle');
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingAppsTitle), h('br'), h('span', Messages.admin_onboardingAppsHint)))
+        var nav = blocks.nav([prev, save]);
+        $(nav).addClass('cp-onboardscreen-save');  
+        
         let form = blocks.form([
-            screenTitleDiv,
+            screenTitle,
             grid 
-        ], blocks.nav([prev, save]));
+        ], nav);
 
-        $(form).addClass('cp-onboardscreen-form')
+        $(form).addClass('cp-onboardscreen-form');
         
-        return form
+        return form;
     }    
 
-    return AppConfigScreen
-
+    return AppConfigScreen;
 
 });
 
diff --git a/www/install/configscreen.less b/www/install/configscreen.less
new file mode 100644
index 000000000..b28b04f64
--- /dev/null
+++ b/www/install/configscreen.less
@@ -0,0 +1,3 @@
+
+
+
diff --git a/www/install/main.js b/www/install/main.js
index 348e0af9d..7d970df4c 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -19,7 +19,9 @@ define([
     'appconfigscreen.js',
     '/common/inner/sidebar-layout.js',
 
-    'css!/install/configscreen.css',
+    // 'css!/install/configscreen.css',
+        'less!/install/onboarding.less',
+
     'css!/components/components-font-awesome/css/font-awesome.min.css',
 ], function ($, Login, Cryptpad, /*Test,*/ Cred, UI, Util, Realtime, Constants, Feedback, LocalStore, h, Pages, Rpc, AppConfigScreen, Sidebar) {
     if (window.top !== window) { return; }
@@ -59,19 +61,15 @@ define([
             }
         }
 
-
-
         var showTitleScreen = function (sendAdminDecree, sendAdminRpc) {
 
-            var titleScreen = AppConfigScreen.titleConfig
-            var form = titleScreen(sendAdminDecree, sendAdminRpc)
+            var titleScreen = AppConfigScreen.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)
-
-            built = true;
+            let frame = h('div.configscreen', form);
+            elem.append(frame);
             var intr;
             var append = function () {
                 if (!document.body) { return; }
@@ -81,13 +79,10 @@ define([
             intr = setInterval(append, 100);
             append();
 
-        }
-
+        };
 
         var registerClick = function () {
             showTitleScreen()
-//                         // document.location.href = '/drive/';
-
 
 //             var uname = $uname.val().trim();
 //             // trim whitespace surrounding the username since it is otherwise included in key derivation
diff --git a/www/install/onboarding.less b/www/install/onboarding.less
new file mode 100644
index 000000000..bf6855dd8
--- /dev/null
+++ b/www/install/onboarding.less
@@ -0,0 +1,183 @@
+@import (reference) "../../customize/src/less2/include/browser.less";
+@import (reference) "../../customize/src/less2/include/framework.less";
+@import (reference) "../../customize/src/less2/include/tools.less";
+@import (reference) "../../customize/src/less2/include/markdown.less";
+@import (reference) "../../customize/src/less2/include/avatar.less";
+
+@cp_palette:
+    #FFD4D4,
+    #FFDECA,
+    #FFE69C,
+    #DBFFB7,
+    #AFFDC2,
+    #C9FFFE,
+    #C8D6FF,
+    #E4CAFF;    
+
+
+.cp_palette(@cp_palette; @index) when (@index > 0){
+        // loop through the @colors
+        .cp_palette(@cp_palette; (@index - 1));
+        @color: extract(@cp_palette, @index);
+        // make a numbered class selector for each color
+        .cp-kanban-palette-color@{index}{
+            background-color: @color !important;
+            &.cp-kanban-palette-board {
+                background-color: @color !important;
+            }
+            &.kanban-board-inner {
+                background-color: fade(@color, 50%) !important;
+            }
+        }
+    }
+ 
+// .kanban-colors(@kanban-colors; @index) when (@index > 0){
+//         // loop through the @colors
+//         .kanban-colors(@kanban-colors; (@index - 1));
+//         @color: extract(@kanban-colors, @index);
+//         // make a numbered class selector for each color
+//         .cp-kanban-palette-color@{index}{
+//             background-color: @color !important;
+//             &.cp-kanban-palette-board {
+//                 background-color: @color !important;
+//             }
+//             &.kanban-board-inner {
+//                 background-color: fade(@color, 50%) !important;
+//             }
+//         }
+//     }
+
+
+.configscreen {
+    width: 70%; 
+    height: 75%; 
+    background-color: #424242 !important;
+}
+
+.cp-onboardscreen-name {
+    width:70%; 
+    float:right; 
+    padding:10px
+}
+
+.cp-onboardscreen-logo {
+    width:20%; 
+    height:30%;
+    float:left;
+    margin-left:10px;
+}
+
+.cp-onboardscreen-desc {
+    width:67% !important;
+    float:right !important;
+    padding:20px !important;
+    margin-right:10px !important;
+}
+
+.cp-kanban-palette {
+    width:30px; 
+    height:30px;
+    display: inline-block;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 30px;
+    background-color: green !important;
+}
+
+.cp-onboardscreen-screentitle {
+    margin:auto;
+    padding:10px;
+    text-align:center;
+}
+
+.cp-onboardscreen-title {
+    font-family: "IBM Plex Mono";
+    font-weight: 500;
+}
+
+.cp-admin-customize-apps-grid {
+    width: 80%;
+    color: white;
+    height: 10px !important;
+    margin:auto;
+}
+
+.cp-onboardscreen-save {
+
+right:0;
+bottom:0;
+padding-left:90%;
+margin-top:5%;
+
+}
+
+.cp-app-drive-element-grid {
+    display: inline-block !important;
+    height: 60px !important;
+}
+
+.cp-appblock {
+    width:60% !important;
+    float:left !important;
+    padding: 5% !important;
+    background-color: #212121!important;
+    border-color:white;
+    height:20px;
+}
+
+.active-app {
+    background-color: #212121!important;
+}
+
+.cp-onboardscreen-checkmark {
+    text-align:right !important;
+    color: white !important;
+}
+
+.cp-onboardscreen-save {
+    margin-right: -2px !important;
+    margin-top: 5%;
+    right:0 !important;
+    bottom:0 !important;
+}
+
+.cp-form-setting-title {
+    float:center;
+    padding:10px;
+    color: #fff;
+}
+
+.cp-onboardscreen-maintitle {
+    float:center;
+    padding:10px;  
+}
+
+.cp-onboardscreen-form {
+    padding:10px;   
+}
+
+.cp-kanban-palette {
+    display: inline-block;
+    border-radius: 50%;
+    height: 30px !important;
+    width: 30px !important;
+    text-align: center;
+    line-height: 30px;
+    /* color: @cp_kanban-fg;
+    border: 1px solid fade(@cp_kanban-fg, 40%);
+    &.fa-check { // tick on selected color
+        color: @cryptpad_text_col;
+    } */
+}
+
+.cp-onboardscreen-color {
+    width:200%;
+    height:20%;
+    margin-top: 30%;
+    margin-left: -65%;
+    /* position:absolute;
+    right:0;
+    bottom:0; */
+    /* margin-right:17%;
+    margin-bottom:10% */
+}
\ No newline at end of file
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index e3579e952..d51896cd9 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -384,6 +384,7 @@ define([
                 if (offline) { return; }
                 if (color === selectedColor) { return; }
                 selectedColor = color;
+                console.log('clodlo', selectedColor)
                 $colors.find('.cp-kanban-palette').removeClass('fa-check');
                 var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
                 $col.addClass('fa-check');
diff --git a/www/worker/inner.js b/www/worker/inner.js
index 253986511..45df56279 100644
--- a/www/worker/inner.js
+++ b/www/worker/inner.js
@@ -75,7 +75,6 @@ define([
 
         // Service worker
         if ('serviceWorker' in navigator) {
-            console.log('here');
             var initializing = true;
             var worker;
             var postMessage = function (data) {
diff --git a/www/worker/worker.js b/www/worker/worker.js
index b70e760ee..cf9801474 100644
--- a/www/worker/worker.js
+++ b/www/worker/worker.js
@@ -37,7 +37,6 @@ onconnect = function(e) {
     console.log(e);
     console.log(i);
     var port = e.ports[0];
-    console.log('here');
     //require([
     //    '/common/outer/async-store.js'
     //], function (Store) {

From b5377e4c65a0e752321a4be851ddc786fbfdfae5 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Fri, 14 Jun 2024 18:50:47 +0100
Subject: [PATCH 20/50] cleaning

---
 customize.dist/application_config.js |   2 +-
 lib/commands/admin-rpc.js            |   9 +-
 lib/decrees.js                       |  27 ++----
 lib/metadata.js                      |   3 +-
 lib/storage/block.js                 |   2 +-
 lib/workers/db-worker.js             |   9 +-
 www/common/outer/roster.js           |  12 +--
 www/common/pad-types.js              |   2 +-
 www/install/configscreen.css         | 139 ---------------------------
 www/install/configscreen.less        |   3 -
 www/install/onboarding.less          |  10 +-
 www/kanban/inner.js                  |   1 -
 www/worker/inner.js                  |   1 +
 www/worker/worker.js                 |   1 +
 14 files changed, 29 insertions(+), 192 deletions(-)
 delete mode 100644 www/install/configscreen.css
 delete mode 100644 www/install/configscreen.less

diff --git a/customize.dist/application_config.js b/customize.dist/application_config.js
index d609c487b..e0fcd2bf9 100644
--- a/customize.dist/application_config.js
+++ b/customize.dist/application_config.js
@@ -20,7 +20,7 @@ define([
 
     // To inform users of the support ticket panel which languages your admins speak:
     //AppConfig.supportLanguages = [ 'en', 'fr' ];
-    AppConfig.availablePadTypes = ['drive', 'teams', 'file', 'contacts', 'convert'].concat(ApiConfig.availableApps)
+    AppConfig.availablePadTypes = ['drive', 'teams', 'file', 'contacts', 'convert'].concat(ApiConfig.availableApps);
     
     return AppConfig;
 });
diff --git a/lib/commands/admin-rpc.js b/lib/commands/admin-rpc.js
index 6f15d63e1..080073caf 100644
--- a/lib/commands/admin-rpc.js
+++ b/lib/commands/admin-rpc.js
@@ -726,8 +726,7 @@ var archivePinLog = function (Env, Server, cb, data) {
 
 var archiveBlock = function (Env, Server, cb, data) {
     var args = Array.isArray(data) && data[1];
-    if (!args) { 
-    return void cb("INVALID_ARGS"); }
+    if (!args) { return void cb("INVALID_ARGS"); }
     var key = args.key;
     var reason = args.reason;
     if (!isValidKey(key)) { return void cb("EINVAL"); }
@@ -749,8 +748,7 @@ var archiveBlock = function (Env, Server, cb, data) {
 
 var restoreArchivedBlock = function (Env, Server, cb, data) {
     var args = Array.isArray(data) && data[1];
-    if (!args) { 
-    return void cb("INVALID_ARGS"); }
+    if (!args) { return void cb("INVALID_ARGS"); }
     var key = args.key;
     var reason = args.reason;
     if (!isValidKey(key)) { return void cb("EINVAL"); }
@@ -1109,8 +1107,7 @@ Admin.addFirstAdmin = function (Env, data, cb) {
     if (!Env.installToken) { return void cb('EINVAL'); }
     var token = data.token;
     if (!token || !data.edPublic) { return void cb('MISSING_ARGS'); }
-    if (token.length !== 64 || data.edPublic.length !== 44) { console.log('here21')
-    return void cb('INVALID_ARGS'); }
+    if (token.length !== 64 || data.edPublic.length !== 44) { return void cb('INVALID_ARGS'); }
     if (token !== Env.installToken) { return void cb('FORBIDDEN'); }
     if (Array.isArray(Env.admins) && Env.admins.length) { return void cb('EEXISTS'); }
 
diff --git a/lib/decrees.js b/lib/decrees.js
index d83bcda7d..c2e29d6f3 100644
--- a/lib/decrees.js
+++ b/lib/decrees.js
@@ -167,10 +167,6 @@ var isInteger = function (n) {
 };
 
 var args_isString = function (args) {
-console.log('args', args)
-    console.log(typeof args)
-    console.log(Array.isArray(args))
-    console.log(isString(args[0]))
     return !(!Array.isArray(args) || !isString(args[0]));
 };
 var args_isInteger = function (args) {
@@ -315,21 +311,19 @@ commands.SET_SUPPORT_KEYS = function (Env, args) {
                     (Core.isValidPublicKey(curvePublic) || !curvePublic) &&
                     typeof(edPublic) === "string" &&
                     (Core.isValidPublicKey(edPublic) || !edPublic);
-    if (!validated) { 
-        throw new Error('INVALID_ARGS'); }
-            if (Env.supportMailboxKey === curvePublic && Env.supportPinKey === edPublic) { return false; }
-            Env.supportMailboxKey = curvePublic;
-            Env.supportPinKey = edPublic;
-            return true;
-        };
+    if (!validated) { throw new Error('INVALID_ARGS'); }
+    if (Env.supportMailboxKey === curvePublic && Env.supportPinKey === edPublic) { return false; }
+    Env.supportMailboxKey = curvePublic;
+    Env.supportPinKey = edPublic;
+    return true;
+    };
 
 // CryptPad_AsyncStore.rpc.send('ADMIN', [ 'ADMIN_DECREE', ['SET_INSTANCE_PURPOSE', ["development"]]], console.log)
 commands.SET_INSTANCE_PURPOSE = makeGenericSetter('instancePurpose', args_isString);
 
 var makeTranslation = function (attr) {
     return function (Env, args) {
-        if (!Array.isArray(args)) { 
-        throw new Error("INVALID_ARGS"); }
+        if (!Array.isArray(args)) { throw new Error("INVALID_ARGS"); }
         var value = args[0];
         var state = Env[attr];
 
@@ -380,7 +374,7 @@ var args_isMaintenance = function (args) {
 // whenever that happens we can relax validation a bit to support more formats
 var makeBroadcastSetter = function (attr, validation) {
     return function (Env, args) {
-        if ((validation && !validation(args)) && !args_isString(args)) {
+        if ((validation && !validation(args)) &&!args_isString(args)) {
             throw new Error('INVALID_ARGS');
         }
         var str = args[0];
@@ -490,11 +484,8 @@ commands.SET_BEARER_SECRET = function (Env, args) {
 // [<command>, <args>, <author>, <time>]
 var handleCommand = Decrees.handleCommand = function (Env, line) {
     var command = line[0];
-    
     var args = line[1];
-    console.log('command', command)
-    console.log('commands', commands[command])
-    console.log('type', typeof(commands[command]))
+
     if (typeof(commands[command]) !== 'function') {
         throw new Error("DECREE_UNSUPPORTED_COMMAND");
     }
diff --git a/lib/metadata.js b/lib/metadata.js
index 1c367d6d2..9d4081285 100644
--- a/lib/metadata.js
+++ b/lib/metadata.js
@@ -370,8 +370,7 @@ commands.ADD_MAILBOX = function (meta, args) {
 };
 
 commands.RM_MAILBOX = function (meta, args) {
-    if (!Array.isArray(args)) { 
-        throw new Error("INVALID_ARGS"); }
+    if (!Array.isArray(args)) { throw new Error("INVALID_ARGS"); }
     if (!meta.mailbox || typeof(meta.mailbox) === 'undefined') {
         return false;
     }
diff --git a/lib/storage/block.js b/lib/storage/block.js
index 479914f87..8809cf1b7 100644
--- a/lib/storage/block.js
+++ b/lib/storage/block.js
@@ -127,7 +127,7 @@ var exists = function (path, cb) {
 
 var checkPath = function (Env, publicKey, pathFunction, _cb) {
     var cb = Util.once(Util.mkAsync(_cb));
-    if (!isValidKey(publicKey)) {  return void cb("INVALID_ARGS"); }
+    if (!isValidKey(publicKey)) { return void cb("INVALID_ARGS"); }
     var path = pathFunction(Env, publicKey);
     exists(path, cb);
 };
diff --git a/lib/workers/db-worker.js b/lib/workers/db-worker.js
index d3a786307..9878d2c22 100644
--- a/lib/workers/db-worker.js
+++ b/lib/workers/db-worker.js
@@ -582,8 +582,7 @@ var reportStatus = function (Env, label, safeKey, err, id, size) {
 };
 
 const completeUpload = function (data, cb) {
-    if (!data) { 
-    return void cb('INVALID_ARGS'); }
+    if (!data) { return void cb('INVALID_ARGS'); }
     if (typeof(data.safeKey) !== 'string') { return void cb("INVALID_KEY"); }
     var owned = data.owned;
     var safeKey = Util.escapeKeyCharacters(data.safeKey);
@@ -607,8 +606,7 @@ const completeUpload = function (data, cb) {
 };
 
 const getPinActivity = function (data, cb) {
-    if (!data) { 
-    return void cb("INVALID_ARGS"); }
+    if (!data) { return void cb("INVALID_ARGS"); }
     if (typeof(data.key) !== 'string') { return void cb("INVALID_KEY"); }
     var safeKey = Util.escapeKeyCharacters(data.key);
     var first;
@@ -635,8 +633,7 @@ const getPinActivity = function (data, cb) {
 };
 
 const getLastChannelTime = function (data, cb) {
-    if (!data) { 
-    return void cb("INVALID_ARGS"); }
+    if (!data) { return void cb("INVALID_ARGS"); }
     var latest;
     store.getMessages(data.channel, function (line) {
         try {
diff --git a/www/common/outer/roster.js b/www/common/outer/roster.js
index 2cb505ac1..bcd952d9d 100644
--- a/www/common/outer/roster.js
+++ b/www/common/outer/roster.js
@@ -205,8 +205,7 @@ var factory = function (Util, Hash, CPNetflux, Sortify, nThen, Crypto, Feedback)
     };
 
     commands.RM = function (args, author, roster) {
-        if (!Array.isArray(args)) { 
-        throw new Error("INVALID_ARGS"); }
+        if (!Array.isArray(args)) { throw new Error("INVALID_ARGS"); }
 
         if (typeof(roster.state.members) === 'undefined') {
             throw new Error("CANNOT_RM_FROM_UNITIALIZED_ROSTER");
@@ -349,8 +348,7 @@ var factory = function (Util, Hash, CPNetflux, Sortify, nThen, Crypto, Feedback)
 
     // only admin/owner can change group metadata
     commands.METADATA = function (args, author, roster) {
-        if (!isMap(args)) { console.log('here27')
-        throw new Error("INVALID_ARGS"); }
+        if (!isMap(args)) { throw new Error("INVALID_ARGS"); }
 
         if (!canUpdateMetadata(author, roster.state.members)) { throw new Error("INSUFFICIENT_PERMISSIONS"); }
 
@@ -388,8 +386,7 @@ var factory = function (Util, Hash, CPNetflux, Sortify, nThen, Crypto, Feedback)
         // that key is ultimately given to the user you'd like on your team
         // that user can exploit their possession of the public key to remove
         // the pending invitation with their actual data.
-        if (!isMap(args)) {console.log('here28')
-         throw new Error('INVALID_ARGS'); }
+        if (!isMap(args)) { throw new Error('INVALID_ARGS'); }
         if (!roster.internal.initialized) { throw new Error("UNINITIALIED"); }
         if (typeof(roster.state.members) === 'undefined') {
             throw new Error("CANNOT+INVITE_TO_UNINITIALIED_ROSTER");
@@ -460,8 +457,7 @@ var factory = function (Util, Hash, CPNetflux, Sortify, nThen, Crypto, Feedback)
         if (!members[author].pending) { throw new Error("ALREADY_PRESENT"); }
 
         // args should be a string
-        if (typeof(args) !== 'string') { console.log('here29')
-        throw new Error("INVALID_ARGS"); }
+        if (typeof(args) !== 'string') { throw new Error("INVALID_ARGS"); }
         // ...and a valid curve key
         if (!isValidId(args)) { throw new Error("INVALID_CURVE_KEY"); }
 
diff --git a/www/common/pad-types.js b/www/common/pad-types.js
index 2271c0dc3..e1f74512a 100644
--- a/www/common/pad-types.js
+++ b/www/common/pad-types.js
@@ -14,7 +14,7 @@ define([
     );
 
     let availableTypes = AppConfig.availablePadTypes.filter(
-        (t) => ooEnabled || !OO_APPS.includes(t)
+        (t) => ooEnabled || !OO_APPS.includes(t),
     );
 
     return {
diff --git a/www/install/configscreen.css b/www/install/configscreen.css
deleted file mode 100644
index 59c6d2a38..000000000
--- a/www/install/configscreen.css
+++ /dev/null
@@ -1,139 +0,0 @@
-
-
-.configscreen {
-
-    width: 70%; 
-    height: 75%;
-    background-color: #212121!important;
-
-}
-
-.cp-onboardscreen-name {
-
-    width:75%; 
-    float:right; 
-    padding:10px
-
-}
-
-.cp-onboardscreen-logo {
-
-    width:20%; 
-    height:30%;
-    float:left
-
-}
-
-
-.cp-onboardscreen-description {
-
-    width:75%; 
-    min-height:10000px;
-    float:right;padding:10px
-
-}
-
-.cp-onboardscreen-screentitle {
-
-    margin:auto;
-    padding:10px;
-    text-align:center;
-
-}
-
-.configscreen {
-
-    width: 70%; 
-    height: 75%; 
-    background-color: #424242 !important;
-
-}
-
-.cp-form-setting-title {
-
-    float:center;
-    padding:10px;
-    color: #fff;
-
-}
-
-.cp-onboardscreen-maintitle {
-
-    float:center;
-    padding:10px;  
-
-
-}
-
-
-.cp-onboardscreen-form {
-
-    padding:10px;   
-
-}
-
-.cp-onboardscreen-title {
-
-    font-family: "IBM Plex Mono";
-    font-weight: 500;
-
-}
-
-.cp-admin-customize-apps-grid {
-
-    width: 80%;
-    color: white;
-    height: 10px !important;
-    margin:auto;
-
-
-}
-
-.cp-app-drive-element-grid {
-
-    /* .leftside-menu-category_main(); */
-    /* float:left; */
-    /* display: flex; */
-    /* height: 70px !important; */
-    /* align-items: center; */
-
-    /* cursor: pointer;
-    margin: 5px;
-    border-color: white !important;
-    width: 50% !important; */
-
-    display: inline-block !important;
-    height: 60px !important;
-    /* background-color: #212121!important; */
-
-    /* margin: 10px !important; */
-
-}
-
-
-
-.cp-bloop {
-
-    width:60% !important;
-    /* height:400% !important; */
-    float:left !important;
-    
-    padding: 5% !important;
-    /* border:1px solid red !important; */
-    background-color: #212121!important;
-    border-color:white;
-
-}
-
-.active-app {
-
-background-color: #212121!important;
-
-}
-
-.cp-onboardscreen-checkmark {
-
-text-align:right !important;
-color: white !important;
-
-}
\ No newline at end of file
diff --git a/www/install/configscreen.less b/www/install/configscreen.less
deleted file mode 100644
index b28b04f64..000000000
--- a/www/install/configscreen.less
+++ /dev/null
@@ -1,3 +0,0 @@
-
-
-
diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index bf6855dd8..9944014c2 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -103,12 +103,10 @@
 }
 
 .cp-onboardscreen-save {
-
-right:0;
-bottom:0;
-padding-left:90%;
-margin-top:5%;
-
+    right:0;
+    bottom:0;
+    padding-left:90%;
+    margin-top:5%;
 }
 
 .cp-app-drive-element-grid {
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index d51896cd9..e3579e952 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -384,7 +384,6 @@ define([
                 if (offline) { return; }
                 if (color === selectedColor) { return; }
                 selectedColor = color;
-                console.log('clodlo', selectedColor)
                 $colors.find('.cp-kanban-palette').removeClass('fa-check');
                 var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
                 $col.addClass('fa-check');
diff --git a/www/worker/inner.js b/www/worker/inner.js
index 45df56279..253986511 100644
--- a/www/worker/inner.js
+++ b/www/worker/inner.js
@@ -75,6 +75,7 @@ define([
 
         // Service worker
         if ('serviceWorker' in navigator) {
+            console.log('here');
             var initializing = true;
             var worker;
             var postMessage = function (data) {
diff --git a/www/worker/worker.js b/www/worker/worker.js
index cf9801474..b70e760ee 100644
--- a/www/worker/worker.js
+++ b/www/worker/worker.js
@@ -37,6 +37,7 @@ onconnect = function(e) {
     console.log(e);
     console.log(i);
     var port = e.ports[0];
+    console.log('here');
     //require([
     //    '/common/outer/async-store.js'
     //], function (Store) {

From e2a7be88b768fa48499c80410e034d40f00b80fb Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Fri, 14 Jun 2024 19:03:26 +0100
Subject: [PATCH 21/50] cleaning

---
 lib/decrees.js                 | 70 +---------------------------------
 www/admin/inner.js             |  9 +----
 www/common/pad-types.js        |  1 -
 www/install/appconfigscreen.js |  2 -
 www/install/main.js            |  4 +-
 5 files changed, 4 insertions(+), 82 deletions(-)

diff --git a/lib/decrees.js b/lib/decrees.js
index c2e29d6f3..ef2d75f4b 100644
--- a/lib/decrees.js
+++ b/lib/decrees.js
@@ -236,74 +236,6 @@ commands.DISABLE_APPS = function (Env, args) {
     return true;
 };
 
-commands.CHANGE_COLOR = function (Env, args) {
-        console.log('change color')
-        var color = args
-        adminDecree(Env, null, function (err) {
-        if (err) { return void cb(err); }
-        Env.flushCache();
-        cb(void 0, true);
-    }, ['CHANGE_COLOR', [
-        'SET_ACCENT_COLOR',
-        [color]
-    ]]);
-    return true;
-};
-
-// commands.UPLOAD_LOGO = function(Env, data) {
-// console.log('data', data)
-//     const args = Array.isArray(data) && data[1];
-//     if (!args || typeof(args) !== 'object') { console.err("EINVAL");
-//     return  }
-//     let dataURL = args.dataURL;
-
-//     // (size*4/3) + 24 ==> base64 and dataURL overhead
-//     if (!dataURL || dataURL.length > ((MAX_LOGO_SIZE*4/3)+24)) {
-//         console.err("E_TOO_LARGE");
-//         return
-//     }
-
-//     let s = dataURL.split(',');
-//     let base64 = s[1];
-//     let mime = s[0].slice(s[0].indexOf(":")+1, s[0].indexOf(";"));
-//     if (!base64 || !mime) { return void cb('EINVAL'); }
-//     let buf;
-//     try {
-//         buf = Buffer.from(base64, 'base64');
-//     } catch (e) {
-//     console.err(e);
-//         return 
-//     }
-
-//     nThen(waitFor => {
-//         Fse.mkdirp('customize', {}, waitFor((err) => {
-//             if (!err) { return; }
-//             waitFor.abort();
-//             console.err(err);
-//             return 
-//         }));
-//     }).nThen(waitFor => {
-//         Fse.writeFile('./customize/CryptPad_logo_hero.svg', buf, waitFor((err) => {
-//             if (!err) { return; }
-//             waitFor.abort();
-//             console.err(err);
-//             return 
-//         }));
-//     }).nThen(() => {
-//         adminDecree(Env, null, function (err) {
-        
-//             if (err) { console.err(err);
-//             return 
-//  }
-//             Env.flushCache();
-//             // cb(void 0, true);
-//         }, ['UPLOAD_LOGO', [
-//             'SET_LOGO_MIME',
-//             [mime]
-//         ]]);
-//     });
-// }
-
 commands.SET_SUPPORT_KEYS = function (Env, args) {
     const curvePublic = args[0]; // Support mailbox key
     const edPublic = args[1]; // Support pin log
@@ -374,7 +306,7 @@ var args_isMaintenance = function (args) {
 // whenever that happens we can relax validation a bit to support more formats
 var makeBroadcastSetter = function (attr, validation) {
     return function (Env, args) {
-        if ((validation && !validation(args)) &&!args_isString(args)) {
+        if ((validation && !validation(args)) && !args_isString(args)) {
             throw new Error('INVALID_ARGS');
         }
         var str = args[0];
diff --git a/www/admin/inner.js b/www/admin/inner.js
index 832688969..6d7f4904a 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -622,7 +622,6 @@ define([
                     UI.log(Messages._getKey('ui_saved', [Messages.admin_emailTitle]));
                 });
             });
-        
             var nav = blocks.nav([button]);
 
             var form = blocks.form([
@@ -635,22 +634,18 @@ define([
         });
 
         sidebar.addItem('apps', function (cb) {
-
             const grid = blocks.block([], 'cp-admin-customize-apps-grid');
-
             const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
-			const availableApps = []
+			const availableApps = [];
             
             function select(app) {
-
 				if (availableApps.indexOf(app) === -1) {
 					availableApps.push(app);
 					$(`#${app}-block`).attr('class', 'active-app') 
 				} else {
 					availableApps.splice(availableApps.indexOf(app), 1)
 					$(`#${app}-block`).attr('class', 'inactive-app')
-				}
-                    
+				}     
             }
 
             allApps.forEach(app => { 
diff --git a/www/common/pad-types.js b/www/common/pad-types.js
index e1f74512a..86390e885 100644
--- a/www/common/pad-types.js
+++ b/www/common/pad-types.js
@@ -2,7 +2,6 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-
 define([
     "/customize/application_config.js",
     "/api/config",
diff --git a/www/install/appconfigscreen.js b/www/install/appconfigscreen.js
index c04b64687..95311a78d 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/appconfigscreen.js
@@ -11,8 +11,6 @@ define([
     'css!/components/bootstrap/dist/css/bootstrap.min.css',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
 
-    // 'less!/admin/app-admin.less',
-    // 'css!/install/configscreen.css'
 ], function(
     $,
     Sidebar,
diff --git a/www/install/main.js b/www/install/main.js
index 7d970df4c..5205b9678 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -19,9 +19,7 @@ define([
     'appconfigscreen.js',
     '/common/inner/sidebar-layout.js',
 
-    // 'css!/install/configscreen.css',
-        'less!/install/onboarding.less',
-
+    'less!/install/onboarding.less',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
 ], function ($, Login, Cryptpad, /*Test,*/ Cred, UI, Util, Realtime, Constants, Feedback, LocalStore, h, Pages, Rpc, AppConfigScreen, Sidebar) {
     if (window.top !== window) { return; }

From 716442f3487bce80ef6e5c46b1cab35e634aadbc Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 18 Jun 2024 10:44:18 +0100
Subject: [PATCH 22/50] layout etc

---
 www/admin/app-admin.less                      |  76 ++++--
 www/admin/inner.js                            | 112 ++++++--
 www/common/inner/sidebar-layout.js            |  22 +-
 www/install/main.js                           |   7 +-
 www/install/onboarding.less                   | 246 +++++++++---------
 .../{appconfigscreen.js => onboardscreen.js}  | 219 ++++++++--------
 www/moderation/inner.js                       |   2 +-
 7 files changed, 410 insertions(+), 274 deletions(-)
 rename www/install/{appconfigscreen.js => onboardscreen.js} (82%)

diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less
index 89aa4403a..98d787002 100644
--- a/www/admin/app-admin.less
+++ b/www/admin/app-admin.less
@@ -10,31 +10,57 @@
 @import (reference) '../../customize/src/less2/include/framework.less';
 @import (reference) '../../customize/src/less2/include/export.less';
 
-.cp-app-drive-element-grid {
-    // overflow: hidden;
-    // text-overflow: ellipsis;
-    // .leftside-menu-category_main();
-    // // margin: 0;
-    // display: flex;
-    // height: 70px !important;
-    // align-items: center;
-    // cursor: pointer;
-    // margin: 5px;
-    // margin-left: -5px;
-    // padding-left: 5px;
-    // .fa, .cptools {
-    //     display: inline-block;
-    //     min-width: 0;
-    //     width: 20px;
-    //     margin-right: 0px;
-    //     z-index: 99;
-    // }
-    // .cp-app-drive-element {
-    //     flex: 1;
-    //     min-width: 0;
-    //     overflow: hidden;
-    //     text-overflow: ellipsis;
-    // }
+.cp-admin-customize-apps-grid {
+    padding: 10px;
+    margin-left: 10px;
+    width: 105%;
+}
+
+.cp-appblock {
+    width:30%;
+    float:left !important;
+    display:block !important;
+    margin: 2px !important;
+    height: 60px !important;
+    padding: 10px;
+}
+
+.active-app {
+    background-color: #323232!important;
+    max-width:30%;
+}
+
+.inactive-app {
+    background-color: #424242!important;
+    max-width:30%;
+}
+
+.cp-onboardscreen-colorpick {
+    padding-left:5%
+}
+
+.cp-onboardscreen-color {
+    width:200%;
+    height:20%;
+    margin-left: -65%;
+    margin-bottom: -10%;
+}
+
+.cp-kanban-palette {
+    display: inline-block;
+    border-radius: 50%;
+    height: 30px !important;
+    width: 30px !important;
+    text-align: center;
+    line-height: 30px;
+    background-color: green !important;
+    border: 1px solid fade(green, 40%);
+    margin-right: 1%;
+}
+
+.cp-onboardscreen-checkmark {
+    text-align:right !important;
+    color: white !important;
 }
 
 
diff --git a/www/admin/inner.js b/www/admin/inner.js
index 6d7f4904a..581e8d9cf 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -79,6 +79,7 @@ define([
                 content: [
                     'logo',
                     'color',
+                    'colorpalette'
                 ]
             },
             'broadcast' : { // Msg.admin_cat_broadcast
@@ -173,7 +174,7 @@ define([
             }
         };
 
-        const blocks = sidebar.blocks;
+        const blocks = Sidebar.blocks('admin');
 
         const flushCache = (cb) => {
             cb = cb || function () {};
@@ -203,6 +204,7 @@ define([
 
         // Msg.admin_flushCacheHint, .admin_flushCacheTitle, .admin_flushCacheButton
         sidebar.addItem('flush-cache', function (cb) {
+            const blocks = Sidebar.blocks('admin');
             var button = blocks.activeButton('primary', '',
                     Messages.admin_flushCacheButton, done => {
                 flushCache(function (e, data) {
@@ -638,22 +640,27 @@ define([
             const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
 			const availableApps = [];
             
-            function select(app) {
-				if (availableApps.indexOf(app) === -1) {
-					availableApps.push(app);
-					$(`#${app}-block`).attr('class', 'active-app') 
-				} else {
-					availableApps.splice(availableApps.indexOf(app), 1)
-					$(`#${app}-block`).attr('class', 'inactive-app')
-				}     
-            }
+        function select(app, appBlock) {
+            if (availableApps.indexOf(app) === -1) {
+                availableApps.push(app);
+                var checkMark = h('div.cp-onboardscreen-checkmark');
+                $(checkMark).addClass('fa-check');
+                appBlock.append(checkMark);
+                $(`#${app}-block`).addClass('active-app')
+                $(`#${app}-block`).removeClass('inactive-app')
+            } else {
+                availableApps.splice(availableApps.indexOf(app), 1);
+                $(`#${app}-block`).addClass('inactive-app') 
+                $(`#${app}-block`).removeClass('active-app')
+                appBlock.find('.cp-onboardscreen-checkmark').remove();
+            } 
+        }
 
-            allApps.forEach(app => { 
-                let appBlock = h('div', {class: 'inactive-app', id: `${app}-block`}, app)
-                $(appBlock).addClass('cp-app-drive-element-grid')
-                $(grid).append(appBlock);
-                $(appBlock).on('click', () => select(app))
-            }); 
+        allApps.forEach(app => { 
+            let appBlock = h('div.cp-appblock.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) {
                 sFrameChan.query('Q_ADMIN_RPC', {
@@ -995,14 +1002,85 @@ define([
                 setColor('', () => {});
             });
 
+            var colors;
+            var content = h('div.cp-onboardscreen-colorpick', [
+                h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
+                colors = h('div#cp-kanban-edit-colors'),
+            ]);
+
+            // var $colors = $(colors);
+            // var palette = [''];
+            // for (var i=1; i<=8; i++) { palette.push('color'+i); }
+            // var selectedColor = '';
+            // palette.forEach(function (color) {
+            //     var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
+            //     $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
+            //     $color.click(function () {
+            //         if (color === selectedColor) { return; }
+            //         selectedColor = $color.css('background-color');
+            //         $colors.find('.cp-kanban-palette').removeClass('fa-check');
+            //         var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+            //         $col.addClass('fa-check');
+            //         sframeCommand('CHANGE_COLOR', {selectedColor}, (err, response) => {
+            //         if (err) {
+            //             UI.warn(Messages.error);
+            //             console.error(err, response);
+            //             // done(false);
+            //             return;
+            //         }
+            //         done(true);
+            //         UI.log(Messages.saved);
+            //     });
+            //     }).appendTo($colors);
+            // });
+        
             let form = blocks.form([
                 labelCurrent,
                 label
             ], blocks.nav([btn, remove, btn.spinner]));
 
-            cb([form, labelPreview]);
+            cb([form, labelPreview, content]);
         });
 
+        // sidebar.addItem('colorpalette', cb => {
+        //     var colors;
+        //     var content = h('div.cp-onboardscreen-colorpick', [
+        //         h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
+        //         colors = h('div#cp-kanban-edit-colors'),
+        //     ]);
+
+        //     var $colors = $(colors);
+        //     var palette = [''];
+        //     for (var i=1; i<=8; i++) { palette.push('color'+i); }
+        //     var selectedColor = '';
+        //     palette.forEach(function (color) {
+        //         var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
+        //         $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
+        //         $color.click(function () {
+        //             if (color === selectedColor) { return; }
+        //             selectedColor = $color.css('background-color');
+        //             $colors.find('.cp-kanban-palette').removeClass('fa-check');
+        //             var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+        //             $col.addClass('fa-check');
+        //             sendAdminRpc('CHANGE_COLOR', {selectedColor}, function (e, response) {
+        //                 if (e || response.error) {
+        //                     UI.warn(Messages.error);
+        //                     console.error(e, response);
+        //                     // done(false);
+        //                     return;
+        //                 }
+        //                 // flushCache();
+        //                 // done(true);
+        //                 // redraw();
+        //                 // spinner.done();
+        //                 UI.log(Messages.saved);
+        //             });
+        //         }).appendTo($colors);
+        //     });
+        
+        //     cb([content]);
+        // });
+
         // Msg.admin_registrationHint, .admin_registrationTitle
         // Msg.admin_registrationSsoTitle
         sidebar.addItem('registration', function(cb){
diff --git a/www/common/inner/sidebar-layout.js b/www/common/inner/sidebar-layout.js
index 8003172e4..f6956d240 100644
--- a/www/common/inner/sidebar-layout.js
+++ b/www/common/inner/sidebar-layout.js
@@ -23,11 +23,11 @@ define([
 ) {
     const Sidebar = {};
 
-    let blocks = Sidebar.blocks = {};
+    Sidebar.blocks = function (app) {
 
-    var app = 'admin'
+        let blocks = {}
 
-    blocks.labelledInput = (label, input, inputBlock) => {
+        blocks.labelledInput = (label, input, inputBlock) => {
             let uid = Util.uid();
             let id = `cp-${app}-item-${uid}`;
             input.setAttribute('id', id);
@@ -103,7 +103,7 @@ define([
                 element
         ]);
         };
-        blocks.pre = (value) => {
+       blocks.pre = (value) => {
             return h('pre', value);
         };
 
@@ -218,6 +218,7 @@ define([
             return key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
         };
         blocks.activeCheckbox = (data) => {
+            console.log('APP', app)
             const state = data.getState();
             const key = data.key;
             const safeKey = keyToCamlCase(key);
@@ -240,6 +241,12 @@ define([
             return box;
         };
 
+        return blocks
+    
+    }
+
+    // let blocks = Sidebar.blocks(app) = {};
+
 
     Sidebar.create = function (common, app, $container) {
         const $leftside = $(h('div#cp-sidebarlayout-leftside')).appendTo($container);
@@ -249,9 +256,12 @@ define([
             $rightside
         };
         const items = {};
-        sidebar.blocks = Sidebar.blocks
+        sidebar.blocks = Sidebar.blocks(app)
 
         sidebar.addItem = (key, get, options) => {
+            const keyToCamlCase = (key) => {
+                return key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+            };
             const safeKey = keyToCamlCase(key);
             get((content) => {
                 if (content === false) { return; }
@@ -279,6 +289,8 @@ define([
 
         sidebar.addCheckboxItem = (data) => {
             const key = data.key;
+            let blocks = Sidebar.blocks(app)
+            console.log('blocks', blocks, typeof blocks)
             let box = blocks.activeCheckbox(data);
             sidebar.addItem(key, function (cb) {
                 cb(box);
diff --git a/www/install/main.js b/www/install/main.js
index 5205b9678..e62116e06 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -16,12 +16,12 @@ define([
     '/common/hyperscript.js',
     '/customize/pages.js',
     '/common/rpc.js',
-    'appconfigscreen.js',
+    'onboardscreen.js',
     '/common/inner/sidebar-layout.js',
 
     'less!/install/onboarding.less',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
-], function ($, Login, Cryptpad, /*Test,*/ Cred, UI, Util, Realtime, Constants, Feedback, LocalStore, h, Pages, Rpc, AppConfigScreen, Sidebar) {
+], function ($, Login, Cryptpad, /*Test,*/ Cred, UI, Util, Realtime, Constants, Feedback, LocalStore, h, Pages, Rpc, OnboardScreen, Sidebar) {
     if (window.top !== window) { return; }
     var Messages = Cryptpad.Messages;
     $(function () {
@@ -61,7 +61,7 @@ define([
 
         var showTitleScreen = function (sendAdminDecree, sendAdminRpc) {
 
-            var titleScreen = AppConfigScreen.titleConfig;
+            var titleScreen = OnboardScreen.titleConfig;
             var form = titleScreen(sendAdminDecree, sendAdminRpc);
 
             var elem = document.createElement('div');
@@ -80,6 +80,7 @@ define([
         };
 
         var registerClick = function () {
+
             showTitleScreen()
 
 //             var uname = $uname.val().trim();
diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index 9944014c2..7b1fd280f 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -12,8 +12,73 @@
     #AFFDC2,
     #C9FFFE,
     #C8D6FF,
-    #E4CAFF;    
+    #E4CAFF;  
+    
+.configscreen {
+    width: 70%; 
+    height: 75%; 
+    background-color: #424242 !important;
+}
 
+.cp-onboardscreen-form {
+    padding:10px;   
+    position:relative;
+    height: 90%;
+}
+
+.cp-onboardscreen-maintitle {
+    float:center;
+    padding:10px;  
+}
+
+.cp-onboardscreen-screentitle {
+    margin:auto;
+    padding:10px;
+    text-align:center;
+    float:center;
+}
+
+.cp-onboardscreen-title {
+    font-family: "IBM Plex Mono";
+    font-weight: 500;
+}
+
+.cp-onboardscreen-name {
+    width:70%; 
+    float:right; 
+    padding:10px
+}
+
+.cp-onboardscreen-desc {
+    width:67% !important;
+    float:right !important;
+    padding:20px !important;
+    margin-right:10px !important;
+}
+
+.cp-onboardscreen-logo {
+    width:20%; 
+    height:30%;
+    float:left;
+    margin-left:10px;
+}
+
+.cp-kanban-palette {
+    display: inline-block;
+    border-radius: 50%;
+    height: 30px !important;
+    width: 30px !important;
+    text-align: center;
+    line-height: 30px;
+    background-color: green !important;
+    border: 1px solid fade(green, 40%);
+    margin-right: 1%;
+    /* color: @cp_kanban-fg;
+    
+    &.fa-check { // tick on selected color
+        color: @cryptpad_text_col;
+    } */
+}
 
 .cp_palette(@cp_palette; @index) when (@index > 0){
         // loop through the @colors
@@ -47,84 +112,15 @@
 //         }
 //     }
 
-
-.configscreen {
-    width: 70%; 
-    height: 75%; 
-    background-color: #424242 !important;
+.cp-onboardscreen-colorpick {
+    padding-left:50%
 }
 
-.cp-onboardscreen-name {
-    width:70%; 
-    float:right; 
-    padding:10px
-}
-
-.cp-onboardscreen-logo {
-    width:20%; 
-    height:30%;
-    float:left;
-    margin-left:10px;
-}
-
-.cp-onboardscreen-desc {
-    width:67% !important;
-    float:right !important;
-    padding:20px !important;
-    margin-right:10px !important;
-}
-
-.cp-kanban-palette {
-    width:30px; 
-    height:30px;
-    display: inline-block;
-    border-radius: 50%;
-    text-align: center;
-    line-height: 30px;
-    background-color: green !important;
-}
-
-.cp-onboardscreen-screentitle {
-    margin:auto;
-    padding:10px;
-    text-align:center;
-}
-
-.cp-onboardscreen-title {
-    font-family: "IBM Plex Mono";
-    font-weight: 500;
-}
-
-.cp-admin-customize-apps-grid {
-    width: 80%;
-    color: white;
-    height: 10px !important;
-    margin:auto;
-}
-
-.cp-onboardscreen-save {
-    right:0;
-    bottom:0;
-    padding-left:90%;
-    margin-top:5%;
-}
-
-.cp-app-drive-element-grid {
-    display: inline-block !important;
-    height: 60px !important;
-}
-
-.cp-appblock {
-    width:60% !important;
-    float:left !important;
-    padding: 5% !important;
-    background-color: #212121!important;
-    border-color:white;
-    height:20px;
-}
-
-.active-app {
-    background-color: #212121!important;
+.cp-onboardscreen-color {
+    width:200%;
+    height:20%;
+    margin-left: -65%;
+    margin-bottom: -10%;
 }
 
 .cp-onboardscreen-checkmark {
@@ -132,50 +128,68 @@
     color: white !important;
 }
 
-.cp-onboardscreen-save {
+.cp-onboardscreen-nav {
+    padding-left:90%;
     margin-right: -2px !important;
-    margin-top: 5%;
-    right:0 !important;
-    bottom:0 !important;
+    margin-top: 300px;
+    position:absolute;
+    width:100%;
+    display:float;
 }
 
-.cp-form-setting-title {
+.cp-onboardscreen-prev {
+    margin-left: 20px;
+    left: 0;
+    position: absolute;
+}
+
+.cp-onboardscreen-save {
+    right: 0;
+    position: absolute;
+    margin-right: 40px
+}
+
+.cp-admin-customize-apps-grid {
+    padding: 10px;
+    margin-left: 10px;
+    width: 105%;
+}
+
+.cp-appblock {
+    width:30%;
+    float:left !important;
+    display:block !important;
+    margin: 2px !important;
+    background-color: #212121!important;
+    border-color:white;
+    height: 60px !important;
+    padding: 10px;
+}
+
+.active-app {
+    background-color: #212121!important;
+    max-width:30%;
+}
+
+.cp-admin-customize-options-grid {
+    height:40%;
     float:center;
-    padding:10px;
-    color: #fff;
+    margin-left: 20px;
+    width: 105%;
+    margin-bottom: -180px;
+
 }
 
-.cp-onboardscreen-maintitle {
-    float:center;
-    padding:10px;  
+.cp-optionblock {
+    width:40%;
+    float:left !important;
+    display:block !important;
+    margin: 2px !important;
+    background-color: #212121!important;
+    border-color:white;
+    height: 60% !important;
+    padding: 10px;
+
+
 }
 
-.cp-onboardscreen-form {
-    padding:10px;   
-}
-
-.cp-kanban-palette {
-    display: inline-block;
-    border-radius: 50%;
-    height: 30px !important;
-    width: 30px !important;
-    text-align: center;
-    line-height: 30px;
-    /* color: @cp_kanban-fg;
-    border: 1px solid fade(@cp_kanban-fg, 40%);
-    &.fa-check { // tick on selected color
-        color: @cryptpad_text_col;
-    } */
-}
-
-.cp-onboardscreen-color {
-    width:200%;
-    height:20%;
-    margin-top: 30%;
-    margin-left: -65%;
-    /* position:absolute;
-    right:0;
-    bottom:0; */
-    /* margin-right:17%;
-    margin-bottom:10% */
-}
\ No newline at end of file
diff --git a/www/install/appconfigscreen.js b/www/install/onboardscreen.js
similarity index 82%
rename from www/install/appconfigscreen.js
rename to www/install/onboardscreen.js
index 95311a78d..88bc97188 100644
--- a/www/install/appconfigscreen.js
+++ b/www/install/onboardscreen.js
@@ -28,14 +28,14 @@ define([
     Messages.admin_onboardingRegistrationTitle = "Options";
     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_onboardingRegistration = "All accounts on the instance have to use 2-factor authentication";
+    Messages.admin_onboardingMFA = "All accounts on the instance have to use 2-factor authentication";
 
-    var AppConfigScreen = {};
-    const blocks = Sidebar.blocks;
+    var OnboardScreen = {};
+    // const blocks = Sidebar.blocks('install');
 
     var displayForm = function(sendAdminDecree, page) {
 
-        var pages = [AppConfigScreen.appConfig, AppConfigScreen.mfaRegistrationScreen, AppConfigScreen.titleConfig];
+        var pages = [OnboardScreen.appConfig, OnboardScreen.mfaRegistrationScreen, OnboardScreen.titleConfig];
         var nextPageFunction = pages[page];
         var nextPageForm = nextPageFunction(sendAdminDecree);
         var elem = document.createElement('div');
@@ -53,9 +53,9 @@ define([
     
     };
 
-    AppConfigScreen.titleConfig = function (sendAdminDecree, sendAdminRpc) {
+    OnboardScreen.titleConfig = function (sendAdminDecree, sendAdminRpc) {
 
-        const blocks = Sidebar.blocks;
+        const blocks = Sidebar.blocks('install');
 
         var titleDescBlock = function() {
 
@@ -143,8 +143,7 @@ define([
             }, function () {
                 spinner.spin();
                 $remove.attr('disabled', 'disabled');
-
-                sendAdminRpc('REMOVE_LOGO', {dataURL}, function (e, response) {
+                sendAdminRpc('REMOVE_LOGO', {}, function (e, response) {
                     $remove.removeAttr('disabled');
                     if (err) {
                         UI.warn(Messages.error);
@@ -165,10 +164,10 @@ define([
         var colorBlock = function () {
 
             var colors;
-            var content = h('div', [
+            var content = h('div.cp-onboardscreen-colorpick', [
                 h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
                 colors = h('div#cp-kanban-edit-colors'),
-            ], {style: 'padding-left:50%'});
+            ]);
 
             var $colors = $(colors);
             var palette = [''];
@@ -176,7 +175,6 @@ define([
             var selectedColor = '';
             palette.forEach(function (color) {
                 var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
-                $color.css({'width':'30px', 'height':'30px', 'display': 'inline-block', 'border-radius': '50%', 'text-align': 'center', 'line-height': '30px', 'margin-right':'1%'})
                 $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
                 $color.click(function () {
                     if (color === selectedColor) { return; }
@@ -219,7 +217,7 @@ define([
             //     UI.log(Messages.saved);
 
             // })
-            // sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(descriptionInput).val().trim()], function (e, response) {
+            // sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(desc).val().trim()], function (e, response) {
             //     if (e || response.error) {
             //         UI.warn(Messages.error);
             //         $input.val('');
@@ -244,7 +242,12 @@ define([
         var screenTitle = h('div.cp-onboardscreen-screentitle');
         $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingNameTitle), h('br'), h('span', Messages.admin_onboardingNameHint)));
         var nav = blocks.nav([button]);
-        $(nav).addClass('cp-onboardscreen-save');
+                
+        $(button).addClass('cp-onboardscreen-save');
+        $(button).addClass('cp-onboardscreen-title-save');
+        $(nav).addClass('cp-onboardscreen-nav')
+        $(nav).addClass('cp-onboardscreen-title-nav')
+
  
         var form = blocks.form([
             screenTitle, 
@@ -260,89 +263,9 @@ define([
 
     };
 
-    AppConfigScreen.mfaRegistrationScreen = function(sendAdminDecree) {
+    OnboardScreen.appConfig = function (sendAdminDecree) {
 
-        var restrict = blocks.activeCheckbox({
-            key: 'registration',
-            getState: function () {
-                return false;
-            },
-            query: function (val, setState) {
-                sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
-                    // if (e || response.error) {
-                    //     UI.warn(Messages.error);
-                    //     $input.val('');
-                    //     console.error(e, response);
-                    //     done(false);
-                    //     return;
-                    // }
-                    // // flushCache();
-                    // // done(true);
-                    // UI.log(Messages.saved);
-
-                });
-            },
-        });
-
-        var forceMFA = blocks.activeCheckbox({
-            key: 'forcemfa',
-            getState: function () {
-                return false;
-            },
-            query: function (val, setState) {
-                // sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
-                //     if (e || response.error) {
-                //         UI.warn(Messages.error);
-                //         $input.val('');
-                //         console.error(e, response);
-                //         done(false);
-                //         return;
-                //     }
-                //     // flushCache();
-                //     done(true);
-                //     UI.log(Messages.saved);
-
-                // })
-            },
-        });
-
-        const grid = blocks.block([], 'cp-admin-customize-apps-grid');
-        const options = [restrict, forceMFA];
-
-        options.forEach(app => { 
-            let optionBlock = h('div.cp-appblock', {class: 'inactive-app', id: `${app}-block`}, app);
-            $(grid).append(optionBlock);
-        }); 
-
-        var save = blocks.activeButton('primary', '', Messages.settings_save, function () {
-            document.location.href = '/drive/';
-            return;
-        });
-
-        var prev = blocks.activeButton('primary', '', Messages.settings_prev, function () {
-            displayForm(sendAdminDecree, 0);
-        });
-
-        var screenTitle = h('div.cp-onboardscreen-screentitle');
-        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingRegistrationTitle), h('br'), h('span', Messages.admin_onboardingRegistrationHint)));
-        var nav = blocks.nav([prev, save]);
-        $(nav).addClass('cp-onboardscreen-save');
-
-        var form = blocks.form([
-            screenTitle,
-            grid], 
-        );
-
-        $(form).addClass('cp-onboardscreen-form');
-
-        return form;
-    
-    };
-
-
-    AppConfigScreen.appConfig = function (sendAdminDecree) {
-
-        const blocks = Sidebar.blocks;
+        const blocks = Sidebar.blocks('install');
         const grid = blocks.block([], 'cp-admin-customize-apps-grid');
         const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
         const availableApps = [];
@@ -350,21 +273,19 @@ define([
         function select(app, appBlock) {
             if (availableApps.indexOf(app) === -1) {
                 availableApps.push(app);
-                var checkMark = h('div.cp-onboardscreen-checkmark', "V", {style:'color:white'});
+                var checkMark = h('div.cp-onboardscreen-checkmark');
+                $(checkMark).addClass('fa-check');
                 appBlock.append(checkMark);
-                $(`#${app}-block`).attr('class', 'active-app') 
+                $(`#${app}-block`).addClass('active-app') 
             } else {
                 availableApps.splice(availableApps.indexOf(app), 1);
-                $(`#${app}-block`).attr('class', 'inactive-app');
-                appBlock.remove('.cp-onboardscreen-checkmark');
+                $(`#${app}-block`).addClass('inactive-app') 
+                appBlock.find('.cp-onboardscreen-checkmark').remove();
             } 
         }
 
         allApps.forEach(app => { 
-            let appBlock = h('div.cp-bloop', {style: 'width:50%;height:20px;'}, {class: 'inactive-app', id: `${app}-block`}, app.charAt(0).toUpperCase() + app.slice(1))
-            $(appBlock).addClass('cp-app-drive-element-grid')
-            $(appBlock).addClass('cp-app-drive-element-row')
-
+            let appBlock = h('div.cp-appblock.inactive-app', {id: `${app.toString()}-block`}, app.charAt(0).toUpperCase() + app.slice(1))
             $(grid).append(appBlock);
             $(appBlock).on('click', () => select(app, $(appBlock)));
         }); 
@@ -394,9 +315,10 @@ define([
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');
         $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingAppsTitle), h('br'), h('span', Messages.admin_onboardingAppsHint)))
-        var nav = blocks.nav([prev, save]);
-        $(nav).addClass('cp-onboardscreen-save');  
-        
+        $(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 
@@ -407,7 +329,90 @@ define([
         return form;
     }    
 
-    return AppConfigScreen;
+    OnboardScreen.mfaRegistrationScreen = function(sendAdminDecree) {
+        const blocks = Sidebar.blocks('install');
+
+        var restrict = blocks.activeCheckbox({
+            key: 'registration',
+            getState: function () {
+                return false;
+            },
+            query: function (val, setState) {
+                // sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
+                //     if (e || response.error) {
+                //         UI.warn(Messages.error);
+                //         $input.val('');
+                //         console.error(e, response);
+                //         done(false);
+                //         return;
+                //     }
+                //     // flushCache();
+                //     // done(true);
+                //     UI.log(Messages.saved);
+
+                // });
+            },
+        });
+
+        var forceMFA = blocks.activeCheckbox({
+            key: 'forcemfa',
+            getState: function () {
+                return false;
+            },
+            query: function (val, setState) {
+                // sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
+                //     if (e || response.error) {
+                //         UI.warn(Messages.error);
+                //         $input.val('');
+                //         console.error(e, response);
+                //         done(false);
+                //         return;
+                //     }
+                //     // flushCache();
+                //     done(true);
+                //     UI.log(Messages.saved);
+
+                // })
+            },
+        });
+
+        const grid = blocks.block([], 'cp-admin-customize-options-grid');
+        const options = [restrict, forceMFA];
+
+        options.forEach(option => { 
+            console.log('opt', option, option.toString())
+            let optionBlock = h('div.cp-optionblock.inactive-app', { id: `${option.toString()}-block`}, "option");
+            $(grid).append(optionBlock);
+        }); 
+
+        var save = blocks.activeButton('primary', '', Messages.settings_save, function () {
+            document.location.href = '/drive/';
+            return;
+        });
+
+        var prev = blocks.activeButton('primary', '', Messages.settings_prev, function () {
+            displayForm(sendAdminDecree, 0);
+        });
+
+        var screenTitle = h('div.cp-onboardscreen-screentitle');
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingRegistrationTitle), h('br'), h('span', Messages.admin_onboardingRegistrationHint)));
+        $(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;
+    
+    };
+
+    return OnboardScreen;
 
 });
 
diff --git a/www/moderation/inner.js b/www/moderation/inner.js
index 4fd9fa99f..a93dc5e98 100644
--- a/www/moderation/inner.js
+++ b/www/moderation/inner.js
@@ -56,7 +56,7 @@ define([
 
     var andThen = function (common, $container, linkedTicket) {
         const sidebar = Sidebar.create(common, 'support', $container);
-        const blocks = sidebar.blocks;
+        const blocks = sidebar.blocks();
         APP.recorded = {};
         APP.allTags = [];
         APP.openTicketCategory = Util.mkEvent();

From 6993487d2ac1db3fa10bc66d985c0091049031f8 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 18 Jun 2024 13:02:46 +0100
Subject: [PATCH 23/50] cleaning and corrections

---
 www/admin/inner.js                    |  92 +++--------
 www/common/translations/messages.json |   2 +
 www/install/main.js                   | 226 +++++++++++++-------------
 www/install/onboardscreen.js          | 160 +++++++++---------
 4 files changed, 221 insertions(+), 259 deletions(-)

diff --git a/www/admin/inner.js b/www/admin/inner.js
index 581e8d9cf..5c3195607 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -48,7 +48,7 @@ define([
 ) {
 
     //XXX 
-    Messages.admin_appSelection = 'App configuration saved'
+    Messages.admin_appSelection = 'App configuration'
     Messages.admin_appsTitle = "Choose your applications"
     Messages.admin_appsHint = "Choose which apps are available to users on your instance."
     Messages.admin_cat_apps = "Apps"
@@ -79,7 +79,6 @@ define([
                 content: [
                     'logo',
                     'color',
-                    'colorpalette'
                 ]
             },
             'broadcast' : { // Msg.admin_cat_broadcast
@@ -1008,31 +1007,31 @@ define([
                 colors = h('div#cp-kanban-edit-colors'),
             ]);
 
-            // var $colors = $(colors);
-            // var palette = [''];
-            // for (var i=1; i<=8; i++) { palette.push('color'+i); }
-            // var selectedColor = '';
-            // palette.forEach(function (color) {
-            //     var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
-            //     $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
-            //     $color.click(function () {
-            //         if (color === selectedColor) { return; }
-            //         selectedColor = $color.css('background-color');
-            //         $colors.find('.cp-kanban-palette').removeClass('fa-check');
-            //         var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-            //         $col.addClass('fa-check');
-            //         sframeCommand('CHANGE_COLOR', {selectedColor}, (err, response) => {
-            //         if (err) {
-            //             UI.warn(Messages.error);
-            //             console.error(err, response);
-            //             // done(false);
-            //             return;
-            //         }
-            //         done(true);
-            //         UI.log(Messages.saved);
-            //     });
-            //     }).appendTo($colors);
-            // });
+            var $colors = $(colors);
+            var palette = [''];
+            for (var i=1; i<=8; i++) { palette.push('color'+i); }
+            var selectedColor = '';
+            palette.forEach(function (color) {
+                var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
+                $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
+                $color.click(function () {
+                    if (color === selectedColor) { return; }
+                    selectedColor = $color.css('background-color');
+                    $colors.find('.cp-kanban-palette').removeClass('fa-check');
+                    var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
+                    $col.addClass('fa-check');
+                    sframeCommand('CHANGE_COLOR', {selectedColor}, (err, response) => {
+                    if (err) {
+                        UI.warn(Messages.error);
+                        console.error(err, response);
+                        // done(false);
+                        return;
+                    }
+                    done(true);
+                    UI.log(Messages.saved);
+                });
+                }).appendTo($colors);
+            });
         
             let form = blocks.form([
                 labelCurrent,
@@ -1042,45 +1041,6 @@ define([
             cb([form, labelPreview, content]);
         });
 
-        // sidebar.addItem('colorpalette', cb => {
-        //     var colors;
-        //     var content = h('div.cp-onboardscreen-colorpick', [
-        //         h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
-        //         colors = h('div#cp-kanban-edit-colors'),
-        //     ]);
-
-        //     var $colors = $(colors);
-        //     var palette = [''];
-        //     for (var i=1; i<=8; i++) { palette.push('color'+i); }
-        //     var selectedColor = '';
-        //     palette.forEach(function (color) {
-        //         var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
-        //         $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
-        //         $color.click(function () {
-        //             if (color === selectedColor) { return; }
-        //             selectedColor = $color.css('background-color');
-        //             $colors.find('.cp-kanban-palette').removeClass('fa-check');
-        //             var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-        //             $col.addClass('fa-check');
-        //             sendAdminRpc('CHANGE_COLOR', {selectedColor}, function (e, response) {
-        //                 if (e || response.error) {
-        //                     UI.warn(Messages.error);
-        //                     console.error(e, response);
-        //                     // done(false);
-        //                     return;
-        //                 }
-        //                 // flushCache();
-        //                 // done(true);
-        //                 // redraw();
-        //                 // spinner.done();
-        //                 UI.log(Messages.saved);
-        //             });
-        //         }).appendTo($colors);
-        //     });
-        
-        //     cb([content]);
-        // });
-
         // Msg.admin_registrationHint, .admin_registrationTitle
         // Msg.admin_registrationSsoTitle
         sidebar.addItem('registration', function(cb){
diff --git a/www/common/translations/messages.json b/www/common/translations/messages.json
index 74f29156d..d3768036b 100644
--- a/www/common/translations/messages.json
+++ b/www/common/translations/messages.json
@@ -1006,6 +1006,7 @@
     "snapshots_cantMake": "The snapshot could not be created. You are disconnected.",
     "admin_registrationHint": "Do not allow any new users to register",
     "admin_registrationTitle": "Close registration",
+    "install_registrationTitle": "Close registration",
     "admin_defaultlimitHint": "Maximum storage limit for CryptDrives (users and teams) when no custom rule is applied",
     "admin_defaultlimitTitle": "Storage limit (MB)",
     "admin_setlimitButton": "Set limit",
@@ -1681,6 +1682,7 @@
     "kanban_showTags": "See all tags",
     "kanban_hideTags": "See less tags",
     "admin_forcemfaTitle": "Mandatory Two-Factor Authentication",
+    "install_forcemfaTitle": "Mandatory Two-Factor Authentication",
     "admin_forcemfaHint": "All users on this instance will be asked to set up two-factor authentication to log in to their account.",
     "loading_mfa_required": "Two-factor authentication is required on this instance. Please update your account using an authenticator app and the form below.",
     "admin_cat_users": "User directory",
diff --git a/www/install/main.js b/www/install/main.js
index e62116e06..1ceb30278 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -81,141 +81,141 @@ define([
 
         var registerClick = function () {
 
-            showTitleScreen()
+            // 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
-//             $uname.val(uname);
+            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
+            $uname.val(uname);
 
-//             var passwd = $passwd.val();
-//             var confirmPassword = $confirm.val();
+            var passwd = $passwd.val();
+            var confirmPassword = $confirm.val();
 
-//             if (!token) { token = $token.val().trim(); }
+            if (!token) { token = $token.val().trim(); }
 
-//             var shouldImport = false;
-//             var doesAccept;
-//             try {
-//                 // if this throws there's either a horrible bug (which someone will report)
-//                 // or the instance admins did not configure a terms page.
-//                 doesAccept = true;
-//             } catch (err) {
-//                 console.error(err);
-//             }
+            var shouldImport = false;
+            var doesAccept;
+            try {
+                // if this throws there's either a horrible bug (which someone will report)
+                // or the instance admins did not configure a terms page.
+                doesAccept = true;
+            } catch (err) {
+                console.error(err);
+            }
 
-//             if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
-//                 var emailWarning = [
-//                     Messages.register_emailWarning0,
-//                     br(), br(),
-//                     Messages.register_emailWarning1,
-//                     br(), br(),
-//                     Messages.register_emailWarning2,
-//                     br(), br(),
-//                     Messages.register_emailWarning3,
-//                 ];
+            if (Cred.isEmail(uname) && !I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME) {
+                var emailWarning = [
+                    Messages.register_emailWarning0,
+                    br(), br(),
+                    Messages.register_emailWarning1,
+                    br(), br(),
+                    Messages.register_emailWarning2,
+                    br(), br(),
+                    Messages.register_emailWarning3,
+                ];
 
-//                 Feedback.send("EMAIL_USERNAME_WARNING", true);
+                Feedback.send("EMAIL_USERNAME_WARNING", true);
 
-//                 return void UI.confirm(emailWarning, function (yes) {
-//                     if (!yes) { return; }
-//                     I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
-//                     registerClick();
-//                 });
-//             }
+                return void UI.confirm(emailWarning, function (yes) {
+                    if (!yes) { return; }
+                    I_REALLY_WANT_TO_USE_MY_EMAIL_FOR_MY_USERNAME = true;
+                    registerClick();
+                });
+            }
 
-//             /* basic validation */
-//             if (!Cred.isLongEnoughPassword(passwd)) {
-//                 var warning = Messages._getKey('register_passwordTooShort', [
-//                     Cred.MINIMUM_PASSWORD_LENGTH
-//                 ]);
-//                 return void UI.alert(warning);
-//             }
+            /* basic validation */
+            if (!Cred.isLongEnoughPassword(passwd)) {
+                var warning = Messages._getKey('register_passwordTooShort', [
+                    Cred.MINIMUM_PASSWORD_LENGTH
+                ]);
+                return void UI.alert(warning);
+            }
 
-//             if (passwd !== confirmPassword) { // do their passwords match?
-//                 return void UI.alert(Messages.register_passwordsDontMatch);
-//             }
+            if (passwd !== confirmPassword) { // do their passwords match?
+                return void UI.alert(Messages.register_passwordsDontMatch);
+            }
 
-//             if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
-//                 return void UI.alert(Messages.register_mustAcceptTerms);
-//             }
+            if (Pages.customURLs.terms && !doesAccept) { // do they accept the terms of service? (if they exist)
+                return void UI.alert(Messages.register_mustAcceptTerms);
+            }
 
-//             let startOnboarding = function (network, proxy) {
-//              Rpc.create(network, proxy.edPrivate, proxy.edPublic, function (e, rpc) {
-//                 if (e) {
-//                   // TODO: handle error
-//                   return;
-//                 }
+            let startOnboarding = function (network, proxy) {
+             Rpc.create(network, proxy.edPrivate, proxy.edPublic, function (e, rpc) {
+                if (e) {
+                  // TODO: handle error
+                  return;
+                }
 
-//                 let sendAdminDecree = function (command, data, callback) {
-//                     var params = ['ADMIN_DECREE', [command, data]];  
-//                     rpc.send('ADMIN', params, callback)
-//                 };
+                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)
-//                 };
+                let sendAdminRpc = function (command, data, callback) {
+                    var params = [command, data];  
+                    rpc.send('ADMIN', params, callback)
+                };
 
-//                 showTitleScreen(sendAdminDecree, sendAdminRpc)
+                showTitleScreen(sendAdminDecree, sendAdminRpc)
               
-//             });
+            });
   
-//     };
+    };
 
-//             setTimeout(function () {
-//                 var span = h('span', [
-//                     h('h2', [
-//                         h('i.fa.fa-warning'),
-//                         ' ',
-//                         Messages.register_warning,
-//                     ]),
-//                     Messages.register_warning_note
-//                 ]);
+            setTimeout(function () {
+                var span = h('span', [
+                    h('h2', [
+                        h('i.fa.fa-warning'),
+                        ' ',
+                        Messages.register_warning,
+                    ]),
+                    Messages.register_warning_note
+                ]);
 
-//             UI.confirm(span,
-//             function (yes) {
-//                 if (!yes) { return; }
+            UI.confirm(span,
+            function (yes) {
+                if (!yes) { return; }
 
-//                 Login.loginOrRegisterUI({
-//                     uname,
-//                     passwd,
-//                     isRegister: true,
-//                     onOTP: UI.getOTPScreen,
-//                     shouldImport,
-//                     cb: function (data) {
-//                         var proxy = data.proxy;
-//                         if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
+                Login.loginOrRegisterUI({
+                    uname,
+                    passwd,
+                    isRegister: true,
+                    onOTP: UI.getOTPScreen,
+                    shouldImport,
+                    cb: function (data) {
+                        var proxy = data.proxy;
+                        if (!proxy || !proxy.edPublic) { UI.alert(Messages.error); return true; }
 
-//                         Rpc.createAnonymous(data.network, function (e, call) {
-//                             if (e) { UI.alert(Messages.error); return console.error(e); }
-//                             var anon_rpc = call;
+                        Rpc.createAnonymous(data.network, function (e, call) {
+                            if (e) { UI.alert(Messages.error); return console.error(e); }
+                            var anon_rpc = call;
 
-//                             anon_rpc.send('ADD_FIRST_ADMIN', {
-//                                 token: token,
-//                                 edPublic: proxy.edPublic
-//                             }, function (e) {
-//                                 if (e) { UI.alert(Messages.error); return console.error(e); }
-//                                 startOnboarding(data.network, proxy);
-//                             });
-//                         });
+                            anon_rpc.send('ADD_FIRST_ADMIN', {
+                                token: token,
+                                edPublic: proxy.edPublic
+                            }, function (e) {
+                                if (e) { UI.alert(Messages.error); return console.error(e); }
+                                startOnboarding(data.network, proxy);
+                            });
+                        });
 
-//                         return true;
-//                     }
-//                 });
-//             }, {
-//                 ok: Messages.register_writtenPassword,
-//                 cancel: Messages.register_cancel,
-// /*  If we're certain that we aren't using these "*Class" APIs
-//     anywhere else then we can deprecate them and make this a
-//     custom modal in common-interface (or here).  */
-//                 cancelClass: 'btn.btn-cancel.btn-register',
-//                 okClass: 'btn.btn-danger.btn-register',
-//                 reverseOrder: true,
-//                 done: function ($dialog) {
-//                     $dialog.find('> div').addClass('half');
-//                 },
-//             });
-//             }, 150);
+                        return true;
+                    }
+                });
+            }, {
+                ok: Messages.register_writtenPassword,
+                cancel: Messages.register_cancel,
+/*  If we're certain that we aren't using these "*Class" APIs
+    anywhere else then we can deprecate them and make this a
+    custom modal in common-interface (or here).  */
+                cancelClass: 'btn.btn-cancel.btn-register',
+                okClass: 'btn.btn-danger.btn-register',
+                reverseOrder: true,
+                done: function ($dialog) {
+                    $dialog.find('> div').addClass('half');
+                },
+            });
+            }, 150);
         };
 
         $register.click(registerClick);
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 88bc97188..f33b7fe03 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -21,17 +21,16 @@ define([
 ) {
 
     //XXX
-    Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance';
-    Messages.admin_onboardingNameHint = 'Please choose a title and description';
-    Messages.admin_onboardingAppsTitle = "Choose your applications";
-    Messages.admin_onboardingAppsHint = "Choose which apps are available to users on your instance";
-    Messages.admin_onboardingRegistrationTitle = "Options";
-    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.install_onboardingNameTitle = 'Welcome to your CryptPad instance';
+    Messages.install_onboardingNameHint = 'Please choose a title and description';
+    Messages.install_onboardingAppsTitle = "Choose your applications";
+    Messages.install_onboardingAppsHint = "Choose which apps are available to users on your instance";
+    Messages.install_onboardingRegistrationTitle = "Options";
+    Messages.install_onboardingRegistrationHint = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id tristique justo";
+    Messages.install_onboardingRegistration = "Visitors to the instance are not able to create accounts. Invitations can be created by administrators";
+    Messages.install_onboardingMfa = "All accounts on the instance have to use 2-factor authentication";
 
     var OnboardScreen = {};
-    // const blocks = Sidebar.blocks('install');
 
     var displayForm = function(sendAdminDecree, page) {
 
@@ -145,9 +144,9 @@ define([
                 $remove.attr('disabled', 'disabled');
                 sendAdminRpc('REMOVE_LOGO', {}, function (e, response) {
                     $remove.removeAttr('disabled');
-                    if (err) {
+                    if (e) {
                         UI.warn(Messages.error);
-                        console.error(err, response);
+                        console.error(e, response);
                         spinner.hide();
                         return;
                     }
@@ -204,32 +203,32 @@ define([
 
         var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
 
-            // sendAdminDecree('SET_INSTANCE_NAME', [$(titleInput).val().trim()], function (e, response) {
-            //     if (e || response.error) {
-            //         UI.warn(Messages.error);
-            //         $input.val('');
-            //         console.error(e, response);
-            //         done(false);
-            //         return;
-            //     }
-            //     // flushCache();
-            //     done(true);
-            //     UI.log(Messages.saved);
+            sendAdminDecree('SET_INSTANCE_NAME', [$(titleInput).val().trim()], function (e, response) {
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    $input.val('');
+                    console.error(e, response);
+                    done(false);
+                    return;
+                }
+                // flushCache();
+                done(true);
+                UI.log(Messages.saved);
 
-            // })
-            // sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(desc).val().trim()], function (e, response) {
-            //     if (e || response.error) {
-            //         UI.warn(Messages.error);
-            //         $input.val('');
-            //         console.error(e, response);
-            //         done(false);
-            //         return;
-            //     }
-            //     // flushCache();
-            //     done(true);
-            //     UI.log(Messages.saved);
+            })
+            sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(desc).val().trim()], function (e, response) {
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    $input.val('');
+                    console.error(e, response);
+                    done(false);
+                    return;
+                }
+                // flushCache();
+                done(true);
+                UI.log(Messages.saved);
 
-            // })
+            })
 
             displayForm(sendAdminDecree, 0);
         });
@@ -240,7 +239,7 @@ define([
         var colorInput =  h('div.cp-onboardscreen-color', colorBlock());
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');
-        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingNameTitle), h('br'), h('span', Messages.admin_onboardingNameHint)));
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.install_onboardingNameTitle), h('br'), h('span', Messages.install_onboardingNameHint)));
         var nav = blocks.nav([button]);
                 
         $(button).addClass('cp-onboardscreen-save');
@@ -291,19 +290,19 @@ define([
         }); 
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            // sendAdminDecree('DISABLE_APPS', availableApps, function (e, response) {
-            //     if (e || response.error) {
-            //         UI.warn(Messages.error);
-            //         $input.val('');
-            //         console.error(e, response);
-            //         done(false);
-            //         return;
-            //     }
-            //     // flushCache();
-            //     done(true);
-            //     UI.log(Messages.saved);
+            sendAdminDecree('DISABLE_APPS', availableApps, function (e, response) {
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    $input.val('');
+                    console.error(e, response);
+                    done(false);
+                    return;
+                }
+                // flushCache();
+                done(true);
+                UI.log(Messages.saved);
 
-            // })
+            })
             
             UI.log(Messages.saved);
             displayForm(sendAdminDecree, 1)
@@ -314,7 +313,7 @@ define([
         });
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');
-        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingAppsTitle), h('br'), h('span', Messages.admin_onboardingAppsHint)))
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.install_onboardingAppsTitle), h('br'), h('span', Messages.install_onboardingAppsHint)))
         $(save).addClass('cp-onboardscreen-save');
         $(prev).addClass('cp-onboardscreen-prev');
         var nav = blocks.nav([prev, save])
@@ -329,7 +328,7 @@ define([
         return form;
     }    
 
-    OnboardScreen.mfaRegistrationScreen = function(sendAdminDecree) {
+    OnboardScreen.mfaRegistrationScreen = function(sendAdminDecree, app) {
         const blocks = Sidebar.blocks('install');
 
         var restrict = blocks.activeCheckbox({
@@ -337,20 +336,21 @@ define([
             getState: function () {
                 return false;
             },
+            label: 'registration',
             query: function (val, setState) {
-                // sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
-                //     if (e || response.error) {
-                //         UI.warn(Messages.error);
-                //         $input.val('');
-                //         console.error(e, response);
-                //         done(false);
-                //         return;
-                //     }
-                //     // flushCache();
-                //     // done(true);
-                //     UI.log(Messages.saved);
+                sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
+                    if (e || response.error) {
+                        UI.warn(Messages.error);
+                        $input.val('');
+                        console.error(e, response);
+                        done(false);
+                        return;
+                    }
+                    // flushCache();
+                    // done(true);
+                    UI.log(Messages.saved);
 
-                // });
+                });
             },
         });
 
@@ -359,31 +359,31 @@ define([
             getState: function () {
                 return false;
             },
+            label: 'forcemfa',
             query: function (val, setState) {
-                // sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
-                //     if (e || response.error) {
-                //         UI.warn(Messages.error);
-                //         $input.val('');
-                //         console.error(e, response);
-                //         done(false);
-                //         return;
-                //     }
-                //     // flushCache();
-                //     done(true);
-                //     UI.log(Messages.saved);
+                sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
+                    if (e || response.error) {
+                        UI.warn(Messages.error);
+                        $input.val('');
+                        console.error(e, response);
+                        done(false);
+                        return;
+                    }
+                    // flushCache();
+                    // done(true);
+                    UI.log(Messages.saved);
 
-                // })
+                })
             },
         });
 
         const grid = blocks.block([], 'cp-admin-customize-options-grid');
         const options = [restrict, forceMFA];
 
-        options.forEach(option => { 
-            console.log('opt', option, option.toString())
-            let optionBlock = h('div.cp-optionblock.inactive-app', { id: `${option.toString()}-block`}, "option");
-            $(grid).append(optionBlock);
-        }); 
+        let mfaOption = h('div.cp-appblock.inactive-app', forceMFA, h('br'), Messages.install_onboardingMfa);
+        $(grid).append(mfaOption);
+        let registrationOption = h('div.cp-appblock.inactive-app', restrict, h('br'), Messages.install_onboardingRegistration);
+        $(grid).append(registrationOption);
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function () {
             document.location.href = '/drive/';
@@ -395,7 +395,7 @@ define([
         });
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');
-        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.admin_onboardingRegistrationTitle), h('br'), h('span', Messages.admin_onboardingRegistrationHint)));
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.install_onboardingRegistrationTitle), h('br'), h('span', Messages.install_onboardingRegistrationHint)));
         $(save).addClass('cp-onboardscreen-save');
         $(prev).addClass('cp-onboardscreen-prev');
         var nav = blocks.nav([prev, save])

From c1193b45c39f457cb4394152a54f2ad00039d651 Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Tue, 18 Jun 2024 13:05:59 +0100
Subject: [PATCH 24/50] cleaning and corrections

---
 www/common/inner/sidebar-layout.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/www/common/inner/sidebar-layout.js b/www/common/inner/sidebar-layout.js
index f6956d240..38748a18c 100644
--- a/www/common/inner/sidebar-layout.js
+++ b/www/common/inner/sidebar-layout.js
@@ -218,7 +218,6 @@ define([
             return key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
         };
         blocks.activeCheckbox = (data) => {
-            console.log('APP', app)
             const state = data.getState();
             const key = data.key;
             const safeKey = keyToCamlCase(key);
@@ -290,7 +289,6 @@ define([
         sidebar.addCheckboxItem = (data) => {
             const key = data.key;
             let blocks = Sidebar.blocks(app)
-            console.log('blocks', blocks, typeof blocks)
             let box = blocks.activeCheckbox(data);
             sidebar.addItem(key, function (cb) {
                 cb(box);

From c9f9d143b14ec35754373736cc01cb860aeecd99 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 19 Jun 2024 16:12:22 +0200
Subject: [PATCH 25/50] Fix color palette

---
 customize.dist/src/less2/include/admin.less | 36 +++++++++++++
 customize.dist/src/less2/include/forms.less | 21 ++++++++
 www/admin/app-admin.less                    | 12 +++++
 www/admin/inner.js                          | 49 ++++++------------
 www/common/common-ui-elements.js            | 37 ++++++++++++++
 www/common/common-util.js                   |  3 ++
 www/install/onboarding.less                 |  8 +++
 www/install/onboardscreen.js                | 56 ++++++++-------------
 www/kanban/app-kanban.less                  | 27 +++-------
 www/kanban/inner.js                         | 34 ++++---------
 10 files changed, 169 insertions(+), 114 deletions(-)
 create mode 100644 customize.dist/src/less2/include/admin.less

diff --git a/customize.dist/src/less2/include/admin.less b/customize.dist/src/less2/include/admin.less
new file mode 100644
index 000000000..7aa2caaad
--- /dev/null
+++ b/customize.dist/src/less2/include/admin.less
@@ -0,0 +1,36 @@
+/*
+ * SPDX-FileCopyrightText: 2023 XWiki CryptPad Team <contact@cryptpad.org> and contributors
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+@import (reference) "./colortheme-all.less";
+@import (reference) "./forms.less";
+
+.admin_main() {
+    --LessLoader_require: LessLoader_currentFile();
+}
+& {
+
+    @palette-colors: @cp_kanban-colors;
+    div.cp-palette-container {
+
+        .cp-palette-nocolor {
+            display: none;
+        }
+        .instance-colors(@palette-colors; @index) when (@index > 0){
+            // loop through the @colors
+            .instance-colors(@palette-colors; (@index - 1));
+
+            @color: extract(@palette-colors, @index);
+            // make a numbered class selector for each color
+            .cp-palette-color@{index}{
+                background-color: @color !important;
+                color: contrast(@color, @cryptpad_color_grey_800, @cryptpad_color_grey_200) !important;
+            }
+        }
+        .instance-colors(@palette-colors; length(@palette-colors));
+
+    }
+
+}
diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less
index 2f5777771..f57af45a2 100644
--- a/customize.dist/src/less2/include/forms.less
+++ b/customize.dist/src/less2/include/forms.less
@@ -119,6 +119,27 @@
         }
     }
 
+    // The following palette container is just for the UI components
+    // The specific colors you want to show have to be defined in your app
+    // using the classes .cp-palette-nocolor .cp-palette-color1 .cp-palette-color2 etc.
+    div.cp-palette-container {
+        display: flex;
+        justify-content: space-between;
+        .cp-palette-color {
+            display: inline-block;
+            border-radius: 50%;
+            height: 30px;
+            width: 30px;
+            text-align: center;
+            line-height: 30px;
+            color: @cp_kanban-fg;
+            border: 1px solid fade(@cp_kanban-fg, 40%);
+            &.fa-check { // tick on selected color
+                color: @cryptpad_text_col;
+            }
+        }
+    }
+
     button.btn {
         background-color: @cp_buttons-cancel;
         box-sizing: border-box;
diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less
index 98d787002..5c179326d 100644
--- a/www/admin/app-admin.less
+++ b/www/admin/app-admin.less
@@ -9,6 +9,7 @@
 @import (reference) "../../customize/src/less2/include/creation.less";
 @import (reference) '../../customize/src/less2/include/framework.less';
 @import (reference) '../../customize/src/less2/include/export.less';
+@import (reference) '../../customize/src/less2/include/admin.less';
 
 .cp-admin-customize-apps-grid {
     padding: 10px;
@@ -69,6 +70,7 @@
     .sidebar-layout_main();
     .limit-bar_main();
     .creation_main();
+    .admin_main();
 
     display: flex;
     flex-flow: column;
@@ -86,6 +88,16 @@
         border-radius: 5px;
         background-color: @cryptpad_color_brand;
     }
+    input.cp-admin-color-picker {
+        vertical-align: middle;
+    }
+    .cp-palette-container {
+        display: inline-flex;
+        width: ~"calc(100% - 5rem)";
+        padding-left: 0.5rem;
+        vertical-align: middle;
+    }
+
     .cp-admin-color-preview {
         & > div {
             margin-top: @sidebar_base-margin;
diff --git a/www/admin/inner.js b/www/admin/inner.js
index 5c3195607..27f968956 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -971,7 +971,7 @@ define([
                 setColor(color, done);
             });
 
-            let $input = $(input).on('change', () => {
+            let onColorPicked = () => {
                 require(['/lib/less.min.js'], (Less) => {
                     let color = $input.val();
                     let lColor = Less.color(color.slice(1));
@@ -991,7 +991,8 @@ define([
                     $preview.find('.cp-admin-color-preview-dark a').attr('style', `color: ${lightColor} !important`);
                     $preview.find('.cp-admin-color-preview-light a').attr('style', `color: ${color} !important`);
                 });
-            });
+            };
+            let $input = $(input).on('change', onColorPicked).addClass('cp-admin-color-picker');
 
             UI.confirmButton($remove, {
                 classes: 'btn-danger',
@@ -1001,44 +1002,22 @@ define([
                 setColor('', () => {});
             });
 
-            var colors;
-            var content = h('div.cp-onboardscreen-colorpick', [
-                h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
-                colors = h('div#cp-kanban-edit-colors'),
-            ]);
-
-            var $colors = $(colors);
-            var palette = [''];
-            for (var i=1; i<=8; i++) { palette.push('color'+i); }
-            var selectedColor = '';
-            palette.forEach(function (color) {
-                var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
-                $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
-                $color.click(function () {
-                    if (color === selectedColor) { return; }
-                    selectedColor = $color.css('background-color');
-                    $colors.find('.cp-kanban-palette').removeClass('fa-check');
-                    var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-                    $col.addClass('fa-check');
-                    sframeCommand('CHANGE_COLOR', {selectedColor}, (err, response) => {
-                    if (err) {
-                        UI.warn(Messages.error);
-                        console.error(err, response);
-                        // done(false);
-                        return;
-                    }
-                    done(true);
-                    UI.log(Messages.saved);
-                });
-                }).appendTo($colors);
+            var colors = UIElements.makePalette(8, (color, $color) => {
+                // onselect
+                let rgb = $color.css('background-color');
+                let hex = Util.rgbToHex(rgb);
+                $input.val(hex);
+                onColorPicked();
             });
-        
+            var $colors = $(colors);
+
+            $(label).append(colors);
             let form = blocks.form([
                 labelCurrent,
-                label
+                label,
             ], blocks.nav([btn, remove, btn.spinner]));
 
-            cb([form, labelPreview, content]);
+            cb([form, labelPreview]);
         });
 
         // Msg.admin_registrationHint, .admin_registrationTitle
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 537fb89de..014c5ba23 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -4285,5 +4285,42 @@ define([
         return UI.errorLoadingScreen(msg, false, false);
     };
 
+    UIElements.makePalette = (maxColors, onSelect) => {
+        let palette = [''];
+        for (var i=1; i<=maxColors; i++) { palette.push('color'+i); }
+
+        let offline = false;
+        let selectedColor = '';
+        let container = h('div.cp-palette-container');
+        let $container = $(container);
+
+        palette.forEach(function (color) {
+            var $color = $(h('span.cp-palette-color.fa'));
+            $color.addClass('cp-palette-'+(color || 'nocolor'));
+            $color.click(function () {
+                if (offline) { return; }
+                if (color === selectedColor) { return; }
+                selectedColor = color;
+                $container.find('.cp-palette-color').removeClass('fa-check');
+                $color.addClass('fa-check');
+                onSelect(color, $color);
+            }).appendTo($container);
+        });
+
+        container.disable = state => {
+            offline = !!state;
+        };
+        container.getValue = () => {
+            return selectedColor;
+        };
+        container.setValue = color => {
+            $container.find('.cp-palette-color').removeClass('fa-check');
+            let $color = $container.find('.cp-palette-'+(color || 'nocolor'));
+            $color.addClass('fa-check');
+            selectedColor = color;
+        };
+        return container;
+    };
+
     return UIElements;
 });
diff --git a/www/common/common-util.js b/www/common/common-util.js
index fd96f12c4..5faa9171e 100644
--- a/www/common/common-util.js
+++ b/www/common/common-util.js
@@ -606,6 +606,9 @@
             parseInt(h.slice(4,6), 16),
         ];
     };
+    Util.rgbToHex = function (rgb) {
+        return `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`;
+    };
 
     Util.isSmallScreen = function () {
         return window.innerHeight < 800 || window.innerWidth < 800;
diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index 7b1fd280f..dfec9b87c 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -3,6 +3,14 @@
 @import (reference) "../../customize/src/less2/include/tools.less";
 @import (reference) "../../customize/src/less2/include/markdown.less";
 @import (reference) "../../customize/src/less2/include/avatar.less";
+@import (reference) '../../customize/src/less2/include/admin.less';
+
+&.cp-page-install {
+    .admin_main();
+    div.cp-palette-container {
+        max-width: 400px;
+    }
+}
 
 @cp_palette:
     #FFD4D4,
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index f33b7fe03..16dbc8f48 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -5,9 +5,8 @@ define([
     '/common/hyperscript.js',
     '/common/common-interface.js',
     '/common/common-util.js',
-    '/api/instance',
+    '/common/common-ui-elements.js',
 
-    '/common/hyperscript.js',
     'css!/components/bootstrap/dist/css/bootstrap.min.css',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
 
@@ -18,6 +17,7 @@ define([
     h,
     UI,
     Util,
+    UIElements
 ) {
 
     //XXX
@@ -162,47 +162,33 @@ define([
 
         var colorBlock = function () {
 
-            var colors;
+            let selectorColor = '';
+            var colors = UIElements.makePalette(8, (color, $color) => {
+                let rgb = $color.css('background-color');
+                let hex = Util.rgbToHex(rgb);
+                selectorColor = hex;
+                // XXX Save only at the end
+                sendAdminRpc('CHANGE_COLOR', {selectedColor}, function (e, response) {
+                    if (e || response.error) {
+                        UI.warn(Messages.error);
+                        console.error(e, response);
+                        return;
+                    }
+                    UI.log(Messages.saved);
+                });
+            });
+            var $colors = $(colors).attr('id', 'cp-install-color');
             var content = h('div.cp-onboardscreen-colorpick', [
-                h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
-                colors = h('div#cp-kanban-edit-colors'),
+                h('label', {for:'cp-install-color'}, Messages.kanban_color),
+                colors
             ]);
 
-            var $colors = $(colors);
-            var palette = [''];
-            for (var i=1; i<=8; i++) { palette.push('color'+i); }
-            var selectedColor = '';
-            palette.forEach(function (color) {
-                var $color = $(h('div.cp-kanban-palette.cp-kanban-palette-card.fa'), );
-                $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
-                $color.click(function () {
-                    if (color === selectedColor) { return; }
-                    selectedColor = $color.css('background-color');
-                    $colors.find('.cp-kanban-palette').removeClass('fa-check');
-                    var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-                    $col.addClass('fa-check');
-                    sendAdminRpc('CHANGE_COLOR', {selectedColor}, function (e, response) {
-                        if (e || response.error) {
-                            UI.warn(Messages.error);
-                            console.error(e, response);
-                            // done(false);
-                            return;
-                        }
-                        // flushCache();
-                        // done(true);
-                        // redraw();
-                        // spinner.done();
-                        UI.log(Messages.saved);
-                    });
-                }).appendTo($colors);
-            });
-        
             return content;
-        
         };
 
         var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
 
+            // XXX Save only at the end
             sendAdminDecree('SET_INSTANCE_NAME', [$(titleInput).val().trim()], function (e, response) {
                 if (e || response.error) {
                     UI.warn(Messages.error);
diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less
index 8d50f1e91..fd54b070a 100644
--- a/www/kanban/app-kanban.less
+++ b/www/kanban/app-kanban.less
@@ -63,11 +63,13 @@
         .kanban-colors(@kanban-colors; (@index - 1));
         @color: extract(@kanban-colors, @index);
         // make a numbered class selector for each color
-        .cp-kanban-palette-color@{index}{
-            background-color: @color !important;
+        .cp-palette-color@{index}{
             &.cp-kanban-palette-board {
                 background-color: @color !important;
             }
+        }
+        .cp-kanban-palette-color@{index}{
+            background-color: @color !important;
             &.kanban-board-inner {
                 background-color: fade(@color, 50%) !important;
             }
@@ -81,10 +83,12 @@
         // .cp-kanban-card-color@{index}{
         //     background-color: @color !important;
         // }
-        .cp-kanban-palette-color@{index}{
+        .cp-palette-color@{index}{
             &.cp-kanban-palette-card {
                 background-color: @color !important;
             }
+        }
+        .cp-kanban-palette-color@{index}{
             &.kanban-item {
                 background-color: @color !important;
             }
@@ -140,23 +144,6 @@
         }
         margin-bottom: 15px;
     }
-    #cp-kanban-edit-colors {
-        display: flex;
-        justify-content: space-between;
-        .cp-kanban-palette {
-            display: inline-block;
-            border-radius: 50%;
-            height: 30px;
-            width: 30px;
-            text-align: center;
-            line-height: 30px;
-            color: @cp_kanban-fg;
-            border: 1px solid fade(@cp_kanban-fg, 40%);
-            &.fa-check { // tick on selected color
-                color: @cryptpad_text_col;
-            }
-        }
-    }
     #cp-kanban-edit-tags {
         .tokenfield {
             margin: 0;
diff --git a/www/kanban/inner.js b/www/kanban/inner.js
index e3579e952..6114266ad 100644
--- a/www/kanban/inner.js
+++ b/www/kanban/inner.js
@@ -185,6 +185,11 @@ define([
             update();
         };
 
+        var colors = UIElements.makePalette(8, color => {
+            dataObject.color = color;
+            commit();
+        });
+
         var conflicts, conflictContainer, titleInput, tagsDiv, colors, text;
         var content = h('div', [
             conflictContainer = h('div#cp-kanban-edit-conflicts', [
@@ -200,7 +205,7 @@ define([
             h('label', {for:'cp-kanban-edit-tags'}, Messages.fm_tagsName),
             tagsDiv = h('div#cp-kanban-edit-tags'),
             h('label', {for:'cp-kanban-edit-color'}, Messages.kanban_color),
-            colors = h('div#cp-kanban-edit-colors'),
+            colors,
         ]);
         var $tags = $(tagsDiv);
 
@@ -362,11 +367,9 @@ define([
 
         // Colors
         var $colors = $(colors);
-        var palette = [''];
-        for (var i=1; i<=8; i++) { palette.push('color'+i); }
         var selectedColor = '';
         var resetThemeClass = function () {
-            $colors.find('.cp-kanban-palette').each(function (i, el) {
+            $colors.find('.cp-palette-color').each(function (i, el) {
                 var $c = $(el);
                 $c.removeClass('cp-kanban-palette-card');
                 $c.removeClass('cp-kanban-palette-board');
@@ -377,31 +380,13 @@ define([
                 }
             });
         };
-        palette.forEach(function (color) {
-            var $color = $(h('span.cp-kanban-palette.fa'));
-            $color.addClass('cp-kanban-palette-'+(color || 'nocolor'));
-            $color.click(function () {
-                if (offline) { return; }
-                if (color === selectedColor) { return; }
-                selectedColor = color;
-                $colors.find('.cp-kanban-palette').removeClass('fa-check');
-                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-                $col.addClass('fa-check');
-
-                dataObject.color = color;
-                commit();
-            }).appendTo($colors);
-        });
         var color = {
             getValue: function () {
-                return selectedColor;
+                return colors.getValue();
             },
             setValue: function (color) {
                 resetThemeClass();
-                $colors.find('.cp-kanban-palette').removeClass('fa-check');
-                var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor'));
-                $col.addClass('fa-check');
-                selectedColor = color;
+                colors.setValue(color);
             }
         };
 
@@ -453,6 +438,7 @@ define([
 
             $modal.find('nav button.danger').prop('disabled', unlocked ? '' : 'disabled');
             offline = !unlocked;
+            palette.disable(offline);
         });
 
 

From 5b7095a4a82fde0f2dc3ddbaa38de830a7911de7 Mon Sep 17 00:00:00 2001
From: David Benque <david.benque@xwiki.com>
Date: Wed, 19 Jun 2024 15:38:58 +0100
Subject: [PATCH 26/50] Start onboarding screen UI

- Main screen window
- Title
- Some navigation
---
 www/install/onboarding.less  | 91 ++++++++++++++++++++----------------
 www/install/onboardscreen.js |  8 ++--
 2 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index 7b1fd280f..b74286f07 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -12,37 +12,46 @@
     #AFFDC2,
     #C9FFFE,
     #C8D6FF,
-    #E4CAFF;  
-    
+    #E4CAFF;
+
 .configscreen {
-    width: 70%; 
-    height: 75%; 
-    background-color: #424242 !important;
+    //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: 80px 110px 20px 110px;
 }
 
-.cp-onboardscreen-form {
-    padding:10px;   
-    position:relative;
-    height: 90%;
-}
-
-.cp-onboardscreen-maintitle {
-    float:center;
-    padding:10px;  
-}
+// .cp-onboardscreen-form {
+//     // padding:10px;
+//     // position:relative;
+//     // height: 90%;
+// }
 
 .cp-onboardscreen-screentitle {
-    margin:auto;
-    padding:10px;
-    text-align:center;
-    float:center;
+    text-align: center;
+    .cp-onboardscreen-maintitle {
+        float:center;
+        padding:10px; 
+
+        h1.cp-onboardscreen-title {
+            font-family: "IBM Plex Mono";
+            color: @cryptpad_color_brand;
+            font-size: 1.5rem;
+            font-weight: 500;
+        }
+    }
 }
 
-.cp-onboardscreen-title {
-    font-family: "IBM Plex Mono";
-    font-weight: 500;
+nav.cp-onboardscreen-nav {
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
 }
 
+
 .cp-onboardscreen-name {
     width:70%; 
     float:right; 
@@ -116,26 +125,26 @@
     padding-left:50%
 }
 
-.cp-onboardscreen-color {
-    width:200%;
-    height:20%;
-    margin-left: -65%;
-    margin-bottom: -10%;
-}
+// .cp-onboardscreen-color {
+//     width:200%;
+//     height:20%;
+//     margin-left: -65%;
+//     margin-bottom: -10%;
+// }
 
 .cp-onboardscreen-checkmark {
     text-align:right !important;
     color: white !important;
 }
 
-.cp-onboardscreen-nav {
-    padding-left:90%;
-    margin-right: -2px !important;
-    margin-top: 300px;
-    position:absolute;
-    width:100%;
-    display:float;
-}
+// .cp-onboardscreen-nav {
+//     padding-left:90%;
+//     margin-right: -2px !important;
+//     margin-top: 300px;
+//     position:absolute;
+//     width:100%;
+//     display:float;
+// }
 
 .cp-onboardscreen-prev {
     margin-left: 20px;
@@ -143,11 +152,11 @@
     position: absolute;
 }
 
-.cp-onboardscreen-save {
-    right: 0;
-    position: absolute;
-    margin-right: 40px
-}
+// .cp-onboardscreen-save {
+//     right: 0;
+//     position: absolute;
+//     margin-right: 40px
+// }
 
 .cp-admin-customize-apps-grid {
     padding: 10px;
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index f33b7fe03..b2b537aea 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -239,9 +239,9 @@ define([
         var colorInput =  h('div.cp-onboardscreen-color', colorBlock());
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');
-        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.install_onboardingNameTitle), h('br'), h('span', Messages.install_onboardingNameHint)));
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.install_onboardingNameTitle), h('span', Messages.install_onboardingNameHint)));
         var nav = blocks.nav([button]);
-                
+
         $(button).addClass('cp-onboardscreen-save');
         $(button).addClass('cp-onboardscreen-title-save');
         $(nav).addClass('cp-onboardscreen-nav')
@@ -313,7 +313,7 @@ define([
         });
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');
-        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.install_onboardingAppsTitle), h('br'), h('span', Messages.install_onboardingAppsHint)))
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.install_onboardingAppsTitle), h('span', Messages.install_onboardingAppsHint)))
         $(save).addClass('cp-onboardscreen-save');
         $(prev).addClass('cp-onboardscreen-prev');
         var nav = blocks.nav([prev, save])
@@ -395,7 +395,7 @@ define([
         });
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');
-        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('span.cp-onboardscreen-title', Messages.install_onboardingRegistrationTitle), h('br'), h('span', Messages.install_onboardingRegistrationHint)));
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.install_onboardingRegistrationTitle), h('span', Messages.install_onboardingRegistrationHint)));
         $(save).addClass('cp-onboardscreen-save');
         $(prev).addClass('cp-onboardscreen-prev');
         var nav = blocks.nav([prev, save])

From b24cce5f0a83f6e4d3f1c53642a0feda7916beb2 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 19 Jun 2024 17:51:17 +0200
Subject: [PATCH 27/50] Fix restoring default color

---
 lib/commands/admin-rpc.js    | 2 +-
 www/install/onboardscreen.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/commands/admin-rpc.js b/lib/commands/admin-rpc.js
index 080073caf..30415dd17 100644
--- a/lib/commands/admin-rpc.js
+++ b/lib/commands/admin-rpc.js
@@ -1012,7 +1012,7 @@ var uploadLogo = (Env, Server, cb, data, unsafeKey) => {
 var changeColor = (Env, Server, cb, data, unsafeKey) => {
     const args = Array.isArray(data) && data[1];
     if (!args || typeof(args) !== 'object') { return void cb("EINVAL"); }
-    let color = args.color || args.selectedColor;
+    let color = args.color;
     adminDecree(Env, null, function (err) {
         if (err) { return void cb(err); }
         Env.flushCache();
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 16dbc8f48..29663ff4a 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -168,7 +168,7 @@ define([
                 let hex = Util.rgbToHex(rgb);
                 selectorColor = hex;
                 // XXX Save only at the end
-                sendAdminRpc('CHANGE_COLOR', {selectedColor}, function (e, response) {
+                sendAdminRpc('CHANGE_COLOR', {color:selectedColor}, function (e, response) {
                     if (e || response.error) {
                         UI.warn(Messages.error);
                         console.error(e, response);

From 1d0166da6901f583ffe188684ff7c778732d3c1c Mon Sep 17 00:00:00 2001
From: David Benque <david.benque@xwiki.com>
Date: Wed, 19 Jun 2024 16:58:44 +0100
Subject: [PATCH 28/50] Onboard Flow UI

- Instance details forms
- Color preset picker
---
 customize.dist/src/less2/include/admin.less |   7 +-
 www/install/onboarding.less                 | 188 +++++++++++---------
 www/install/onboardscreen.js                |  18 +-
 3 files changed, 120 insertions(+), 93 deletions(-)

diff --git a/customize.dist/src/less2/include/admin.less b/customize.dist/src/less2/include/admin.less
index 7aa2caaad..98b110d3e 100644
--- a/customize.dist/src/less2/include/admin.less
+++ b/customize.dist/src/less2/include/admin.less
@@ -11,8 +11,12 @@
     --LessLoader_require: LessLoader_currentFile();
 }
 & {
+    // XXX Instance accent color presets
+    @palette-colors:
+        @cryptpad_color_brand,
+        #ffee00,
+        #FF0073;
 
-    @palette-colors: @cp_kanban-colors;
     div.cp-palette-container {
 
         .cp-palette-nocolor {
@@ -30,7 +34,6 @@
             }
         }
         .instance-colors(@palette-colors; length(@palette-colors));
-
     }
 
 }
diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index 0a7ab93e2..9989358fa 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -28,7 +28,7 @@
     background-color: @cp_loading-progress-bg;
     border-radius: @variables_radius_L;
     box-shadow: 0px 0px 10px 0px @cp_shadow-color;
-    padding: 80px 110px 20px 110px;
+    padding: 30px 110px 20px 110px;
 }
 
 // .cp-onboardscreen-form {
@@ -39,9 +39,10 @@
 
 .cp-onboardscreen-screentitle {
     text-align: center;
+    font-size: 1rem;
     .cp-onboardscreen-maintitle {
         float:center;
-        padding:10px; 
+        padding:10px;
 
         h1.cp-onboardscreen-title {
             font-family: "IBM Plex Mono";
@@ -52,6 +53,41 @@
     }
 }
 
+.cp-instance-form {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    input, textarea {
+        border: 0px transparent !important;
+    }
+    .cp-onboardscreen-logo {
+        width: 130px;
+    }
+    .cp-instance-text-form {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        .cp-onboardscreen-name {
+            input {
+                font-family: "IBM Plex Mono";
+                font-size: 1.2em;
+            }
+        }
+        .cp-onboardscreen-colorpick {
+            div.cp-palette-container {
+                display: flex;
+                justify-content: flex-start;
+                .cp-palette-color {
+                    margin-right: 1rem;
+                }
+            }
+        }
+    }
+}
+
+
 nav.cp-onboardscreen-nav {
     width: 100%;
     display: flex;
@@ -60,42 +96,26 @@ nav.cp-onboardscreen-nav {
 }
 
 
-.cp-onboardscreen-name {
-    width:70%; 
-    float:right; 
-    padding:10px
-}
+// .cp-onboardscreen-name {
+//     width:70%; 
+//     float:right; 
+//     padding:10px
+// }
 
-.cp-onboardscreen-desc {
-    width:67% !important;
-    float:right !important;
-    padding:20px !important;
-    margin-right:10px !important;
-}
+// .cp-onboardscreen-desc {
+//     width:67% !important;
+//     float:right !important;
+//     padding:20px !important;
+//     margin-right:10px !important;
+// }
 
-.cp-onboardscreen-logo {
-    width:20%; 
-    height:30%;
-    float:left;
-    margin-left:10px;
-}
+// .cp-onboardscreen-logo {
+//     width:20%; 
+//     height:30%;
+//     float:left;
+//     margin-left:10px;
+// }
 
-.cp-kanban-palette {
-    display: inline-block;
-    border-radius: 50%;
-    height: 30px !important;
-    width: 30px !important;
-    text-align: center;
-    line-height: 30px;
-    background-color: green !important;
-    border: 1px solid fade(green, 40%);
-    margin-right: 1%;
-    /* color: @cp_kanban-fg;
-    
-    &.fa-check { // tick on selected color
-        color: @cryptpad_text_col;
-    } */
-}
 
 .cp_palette(@cp_palette; @index) when (@index > 0){
         // loop through the @colors
@@ -112,7 +132,7 @@ nav.cp-onboardscreen-nav {
             }
         }
     }
- 
+
 // .kanban-colors(@kanban-colors; @index) when (@index > 0){
 //         // loop through the @colors
 //         .kanban-colors(@kanban-colors; (@index - 1));
@@ -129,9 +149,9 @@ nav.cp-onboardscreen-nav {
 //         }
 //     }
 
-.cp-onboardscreen-colorpick {
-    padding-left:50%
-}
+// .cp-onboardscreen-colorpick {
+//     padding-left:50%
+// }
 
 // .cp-onboardscreen-color {
 //     width:200%;
@@ -140,10 +160,10 @@ nav.cp-onboardscreen-nav {
 //     margin-bottom: -10%;
 // }
 
-.cp-onboardscreen-checkmark {
-    text-align:right !important;
-    color: white !important;
-}
+// .cp-onboardscreen-checkmark {
+//     text-align:right !important;
+//     color: white !important;
+// }
 
 // .cp-onboardscreen-nav {
 //     padding-left:90%;
@@ -154,11 +174,11 @@ nav.cp-onboardscreen-nav {
 //     display:float;
 // }
 
-.cp-onboardscreen-prev {
-    margin-left: 20px;
-    left: 0;
-    position: absolute;
-}
+// .cp-onboardscreen-prev {
+//     margin-left: 20px;
+//     left: 0;
+//     position: absolute;
+// }
 
 // .cp-onboardscreen-save {
 //     right: 0;
@@ -166,47 +186,47 @@ nav.cp-onboardscreen-nav {
 //     margin-right: 40px
 // }
 
-.cp-admin-customize-apps-grid {
-    padding: 10px;
-    margin-left: 10px;
-    width: 105%;
-}
+// .cp-admin-customize-apps-grid {
+//     padding: 10px;
+//     margin-left: 10px;
+//     width: 105%;
+// }
 
-.cp-appblock {
-    width:30%;
-    float:left !important;
-    display:block !important;
-    margin: 2px !important;
-    background-color: #212121!important;
-    border-color:white;
-    height: 60px !important;
-    padding: 10px;
-}
+// .cp-appblock {
+//     width:30%;
+//     float:left !important;
+//     display:block !important;
+//     margin: 2px !important;
+//     background-color: #212121!important;
+//     border-color:white;
+//     height: 60px !important;
+//     padding: 10px;
+// }
 
-.active-app {
-    background-color: #212121!important;
-    max-width:30%;
-}
+// .active-app {
+//     background-color: #212121!important;
+//     max-width:30%;
+// }
 
-.cp-admin-customize-options-grid {
-    height:40%;
-    float:center;
-    margin-left: 20px;
-    width: 105%;
-    margin-bottom: -180px;
+// .cp-admin-customize-options-grid {
+//     height:40%;
+//     float:center;
+//     margin-left: 20px;
+//     width: 105%;
+//     margin-bottom: -180px;
 
-}
+// }
 
-.cp-optionblock {
-    width:40%;
-    float:left !important;
-    display:block !important;
-    margin: 2px !important;
-    background-color: #212121!important;
-    border-color:white;
-    height: 60% !important;
-    padding: 10px;
+// .cp-optionblock {
+//     width:40%;
+//     float:left !important;
+//     display:block !important;
+//     margin: 2px !important;
+//     background-color: #212121!important;
+//     border-color:white;
+//     height: 60% !important;
+//     padding: 10px;
 
 
-}
+// }
 
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index b81857f95..4944d8ea3 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -157,13 +157,13 @@ define([
             });
 
             return formLogo;
-        
         };
 
         var colorBlock = function () {
 
             let selectorColor = '';
-            var colors = UIElements.makePalette(8, (color, $color) => {
+            // XXX Number of accent color presets
+            var colors = UIElements.makePalette(5, (color, $color) => {
                 let rgb = $color.css('background-color');
                 let hex = Util.rgbToHex(rgb);
                 selectorColor = hex;
@@ -233,13 +233,17 @@ define([
         $(nav).addClass('cp-onboardscreen-nav')
         $(nav).addClass('cp-onboardscreen-title-nav')
 
- 
-        var form = blocks.form([
-            screenTitle, 
-            titleInput, 
+        var textForm= h('div.cp-instance-text-form',[
+            titleInput,
             desc,
-            logoInput, 
             colorInput,
+        ]);
+
+        var instanceForm = h('div.cp-instance-form', [logoInput, textForm]);
+
+        var form = blocks.form([
+            screenTitle,
+            instanceForm
         ], nav);
 
         $(form).addClass('cp-onboardscreen-form');

From a0f101ce456ec9b73d22b9ee374c28fe6e7b3c4e Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Wed, 19 Jun 2024 17:11:55 +0100
Subject: [PATCH 29/50] activeapps >appstodisable

---
 customize.dist/application_config.js  |  6 +-
 lib/commands/admin-rpc.js             |  2 +-
 lib/decrees.js                        | 10 +--
 lib/http-worker.js                    |  2 +-
 lib/stats.js                          |  3 -
 www/admin/app-admin.less              |  8 +--
 www/admin/inner.js                    | 63 ++++++++++---------
 www/common/inner/sidebar-layout.js    | 15 ++---
 www/common/pad-types.js               | 14 ++++-
 www/common/translations/messages.json |  3 -
 www/install/onboarding.less           |  8 +--
 www/install/onboardscreen.js          | 88 +++++++++++++++------------
 12 files changed, 114 insertions(+), 108 deletions(-)

diff --git a/customize.dist/application_config.js b/customize.dist/application_config.js
index e0fcd2bf9..ab29b56fa 100644
--- a/customize.dist/application_config.js
+++ b/customize.dist/application_config.js
@@ -10,17 +10,13 @@
    but you should not change it directly (/common/application_config_internal.js)
 */
 
-define([
-  '/common/application_config_internal.js',
-  '/api/config'
-  ], function (AppConfig, ApiConfig ) {
+define(['/common/application_config_internal.js'], function (AppConfig) {
 
     // Example: If you want to remove the survey link in the menu:
     // AppConfig.surveyURL = "";
 
     // To inform users of the support ticket panel which languages your admins speak:
     //AppConfig.supportLanguages = [ 'en', 'fr' ];
-    AppConfig.availablePadTypes = ['drive', 'teams', 'file', 'contacts', 'convert'].concat(ApiConfig.availableApps);
     
     return AppConfig;
 });
diff --git a/lib/commands/admin-rpc.js b/lib/commands/admin-rpc.js
index 30415dd17..5d04f9f9d 100644
--- a/lib/commands/admin-rpc.js
+++ b/lib/commands/admin-rpc.js
@@ -468,7 +468,7 @@ var setLastEviction = function (Env, Server, cb, data, unsafeKey) {
 var instanceStatus = function (Env, Server, cb) {
     cb(void 0, {
 
-        availableApps: Env.availableApps,
+        appsToDisable: Env.appsToDisable,
         restrictRegistration: Env.restrictRegistration,
         restrictSsoRegistration: Env.restrictSsoRegistration,
         dontStoreSSOUsers: Env.dontStoreSSOUsers,
diff --git a/lib/decrees.js b/lib/decrees.js
index ef2d75f4b..5bbb89907 100644
--- a/lib/decrees.js
+++ b/lib/decrees.js
@@ -226,13 +226,9 @@ commands.SET_SUPPORT_MAILBOX = makeGenericSetter('supportMailbox', function (arg
 
 
 commands.DISABLE_APPS = function (Env, args) {
-    const availableApps = args;
-    // let validated = typeof(curvePublic) === "string" &&
-    //                 (Core.isValidPublicKey(curvePublic) || !curvePublic) &&
-    //                 typeof(edPublic) === "string" &&
-    //                 (Core.isValidPublicKey(edPublic) || !edPublic);
-    // if (!validated) { throw new Error('INVALID_ARGS'); }
-    Env.availableApps = availableApps;
+    if (!Array.isArray(args)) { throw new Error("INVALID_ARGS"); }
+    const appsToDisable = args;
+    Env.appsToDisable = appsToDisable;
     return true;
 };
 
diff --git a/lib/http-worker.js b/lib/http-worker.js
index cfdb677a0..a2424b9f0 100644
--- a/lib/http-worker.js
+++ b/lib/http-worker.js
@@ -583,7 +583,7 @@ var serveConfig = makeRouteCache(function () {
             maxUploadSize: Env.maxUploadSize,
             premiumUploadSize: Env.premiumUploadSize,
             restrictRegistration: Env.restrictRegistration,
-            availableApps: Env.availableApps,
+            appsToDisable: Env.appsToDisable,
             restrictSsoRegistration: Env.restrictSsoRegistration,
             httpSafeOrigin: Env.httpSafeOrigin,
             enableEmbedding: Env.enableEmbedding,
diff --git a/lib/stats.js b/lib/stats.js
index 449803004..e3c8e502d 100644
--- a/lib/stats.js
+++ b/lib/stats.js
@@ -49,9 +49,6 @@ Stats.instanceData = function (Env) {
         // do you allow registration?
         data.restrictRegistration = Boolean(Env.restrictRegistration);
 
-        //which apps have you disabled?
-        data.availableApps = Env.availableApps
-
         // have you removed the donate button?
         data.removeDonateButton = Boolean(Env.removeDonateButton);
 
diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less
index 5c179326d..4ced37da4 100644
--- a/www/admin/app-admin.less
+++ b/www/admin/app-admin.less
@@ -26,13 +26,13 @@
     padding: 10px;
 }
 
-.active-app {
-    background-color: #323232!important;
+.cp-active-app {
+    background-color:  #323232!important;
     max-width:30%;
 }
 
-.inactive-app {
-    background-color: #424242!important;
+.cp-inactive-app {
+    background-color:#424242!important; 
     max-width:30%;
 }
 
diff --git a/www/admin/inner.js b/www/admin/inner.js
index 27f968956..116263667 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -5,6 +5,7 @@
 define([
     'jquery',
     '/common/toolbar.js',
+    '/common/pad-types.js',
     '/components/nthen/index.js',
     '/common/sframe-common.js',
     '/common/common-interface.js',
@@ -17,11 +18,11 @@ define([
     '/common/hyperscript.js',
     '/common/clipboard.js',
     'json.sortify',
-    '/customize/application_config.js',
     '/api/config',
     '/api/instance',
     '/lib/datepicker/flatpickr.js',
     '/common/hyperscript.js',
+    
     'css!/lib/datepicker/flatpickr.min.css',
     'css!/components/bootstrap/dist/css/bootstrap.min.css',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
@@ -29,6 +30,7 @@ define([
 ], function(
     $,
     Toolbar,
+    PadTypes,
     nThen,
     SFCommon,
     UI,
@@ -39,18 +41,18 @@ define([
     Messages,
     Keys,
     h,
+    
     Clipboard,
     Sortify,
-    AppConfig,
     ApiConfig,
     Instance,
-    Flatpickr
+    Flatpickr, 
 ) {
 
     //XXX 
     Messages.admin_appSelection = 'App configuration'
     Messages.admin_appsTitle = "Choose your applications"
-    Messages.admin_appsHint = "Choose which apps are available to users on your instance."
+    Messages.admin_appsHint = "Choose which apps to disable on your instance."
     Messages.admin_cat_apps = "Apps"
 
     var APP = window.APP = {};
@@ -636,39 +638,44 @@ define([
 
         sidebar.addItem('apps', function (cb) {
             const grid = blocks.block([], 'cp-admin-customize-apps-grid');
-            const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
-			const availableApps = [];
+            const allApps = PadTypes.appsToSelect;
+			const appsToDisable = ApiConfig.appsToDisable || [];
             
-        function select(app, appBlock) {
-            if (availableApps.indexOf(app) === -1) {
-                availableApps.push(app);
-                var checkMark = h('div.cp-onboardscreen-checkmark');
-                $(checkMark).addClass('fa-check');
-                appBlock.append(checkMark);
-                $(`#${app}-block`).addClass('active-app')
-                $(`#${app}-block`).removeClass('inactive-app')
-            } else {
-                availableApps.splice(availableApps.indexOf(app), 1);
-                $(`#${app}-block`).addClass('inactive-app') 
-                $(`#${app}-block`).removeClass('active-app')
-                appBlock.find('.cp-onboardscreen-checkmark').remove();
-            } 
-        }
+            function select(app, appBlock) {
+                if (appsToDisable.indexOf(app) === -1) {
+                    appsToDisable.push(app);
+                    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')
+                } else {
+                    appsToDisable.splice(appsToDisable.indexOf(app), 1);
+                    $(`#${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.inactive-app', {id: `${app.toString()}-block`}, app.charAt(0).toUpperCase() + app.slice(1))
-            $(grid).append(appBlock);
-            $(appBlock).on('click', () => select(app, $(appBlock)));
-        }); 
+            allApps.forEach(app => { 
+                
+                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')
+                } else {
+                    $(appBlock).addClass('cp-active-app')
+                }
+                $(grid).append(appBlock);
+                $(appBlock).on('click', () => select(app, $(appBlock)));
+            }); 
 
             var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
                 sFrameChan.query('Q_ADMIN_RPC', {
                     cmd: 'ADMIN_DECREE',
-                    data: ['DISABLE_APPS', availableApps]
+                    data: ['DISABLE_APPS', appsToDisable]
                 }, function (e, response) {
                     if (e || response.error) {
                         UI.warn(Messages.error);
-                        $input.val('');
                         console.error(e, response);
                         done(false);
                         return;
diff --git a/www/common/inner/sidebar-layout.js b/www/common/inner/sidebar-layout.js
index 38748a18c..a57f7f97c 100644
--- a/www/common/inner/sidebar-layout.js
+++ b/www/common/inner/sidebar-layout.js
@@ -22,6 +22,9 @@ define([
     h
 ) {
     const Sidebar = {};
+    const keyToCamlCase = (key) => {
+        return key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+    };
 
     Sidebar.blocks = function (app) {
 
@@ -214,9 +217,7 @@ define([
             return button;
         };
 
-        const keyToCamlCase = (key) => {
-            return key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
-        };
+
         blocks.activeCheckbox = (data) => {
             const state = data.getState();
             const key = data.key;
@@ -244,9 +245,6 @@ define([
     
     }
 
-    // let blocks = Sidebar.blocks(app) = {};
-
-
     Sidebar.create = function (common, app, $container) {
         const $leftside = $(h('div#cp-sidebarlayout-leftside')).appendTo($container);
         const $rightside = $(h('div#cp-sidebarlayout-rightside')).appendTo($container);
@@ -258,9 +256,6 @@ define([
         sidebar.blocks = Sidebar.blocks(app)
 
         sidebar.addItem = (key, get, options) => {
-            const keyToCamlCase = (key) => {
-                return key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
-            };
             const safeKey = keyToCamlCase(key);
             get((content) => {
                 if (content === false) { return; }
@@ -288,7 +283,7 @@ define([
 
         sidebar.addCheckboxItem = (data) => {
             const key = data.key;
-            let blocks = Sidebar.blocks(app)
+            let blocks = sidebar.blocks
             let box = blocks.activeCheckbox(data);
             sidebar.addItem(key, function (cb) {
                 cb(box);
diff --git a/www/common/pad-types.js b/www/common/pad-types.js
index 86390e885..724627a26 100644
--- a/www/common/pad-types.js
+++ b/www/common/pad-types.js
@@ -12,12 +12,22 @@ define([
         OOCurrentVersion.currentVersion,
     );
 
-    let availableTypes = AppConfig.availablePadTypes.filter(
-        (t) => ooEnabled || !OO_APPS.includes(t),
+    let availablePadTypes = AppConfig.availablePadTypes.filter(
+        (t) => ooEnabled || !OO_APPS.includes(t) 
     );
 
+    let availableTypes;
+    if (ApiConfig.appsToDisable) {
+        availableTypes = availablePadTypes.filter(value => !ApiConfig.appsToDisable.includes(value))
+    } else {
+        availableTypes = availablePadTypes
+    }
+    
+    var appsToSelect = availablePadTypes.filter(value => !['drive', 'teams', 'file', 'contacts', 'convert'].includes(value))
+
     return {
         availableTypes,
+        appsToSelect,
 
         isAvailable: function (type) {
             return availableTypes.includes(type);
diff --git a/www/common/translations/messages.json b/www/common/translations/messages.json
index d3768036b..900de6aed 100644
--- a/www/common/translations/messages.json
+++ b/www/common/translations/messages.json
@@ -1006,7 +1006,6 @@
     "snapshots_cantMake": "The snapshot could not be created. You are disconnected.",
     "admin_registrationHint": "Do not allow any new users to register",
     "admin_registrationTitle": "Close registration",
-    "install_registrationTitle": "Close registration",
     "admin_defaultlimitHint": "Maximum storage limit for CryptDrives (users and teams) when no custom rule is applied",
     "admin_defaultlimitTitle": "Storage limit (MB)",
     "admin_setlimitButton": "Set limit",
@@ -1438,7 +1437,6 @@
     "admin_uptimeHint": "Date and time at which the server was launched",
     "admin_cat_database": "Database",
     "admin_generatedAt": "Report timestamp",
-    "admin_cat_apps": "Apps",
     "ui_true": "true",
     "ui_false": "false",
     "ui_undefined": "unknown",
@@ -1682,7 +1680,6 @@
     "kanban_showTags": "See all tags",
     "kanban_hideTags": "See less tags",
     "admin_forcemfaTitle": "Mandatory Two-Factor Authentication",
-    "install_forcemfaTitle": "Mandatory Two-Factor Authentication",
     "admin_forcemfaHint": "All users on this instance will be asked to set up two-factor authentication to log in to their account.",
     "loading_mfa_required": "Two-factor authentication is required on this instance. Please update your account using an authenticator app and the form below.",
     "admin_cat_users": "User directory",
diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index 9989358fa..9d2611213 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -203,10 +203,10 @@ nav.cp-onboardscreen-nav {
 //     padding: 10px;
 // }
 
-// .active-app {
-//     background-color: #212121!important;
-//     max-width:30%;
-// }
+.cp-active-app {
+    background-color: #212121!important;
+    max-width:30%;
+}
 
 // .cp-admin-customize-options-grid {
 //     height:40%;
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 87e91ea07..c09ed842c 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -6,6 +6,8 @@ define([
     '/common/common-interface.js',
     '/common/common-util.js',
     '/common/common-ui-elements.js',
+    '/common/pad-types.js',
+    '/api/instance',
 
     'css!/components/bootstrap/dist/css/bootstrap.min.css',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
@@ -17,18 +19,21 @@ define([
     h,
     UI,
     Util,
-    UIElements
+    UIElements,
+    PadTypes
 ) {
 
     //XXX
-    Messages.install_onboardingNameTitle = 'Welcome to your CryptPad instance';
-    Messages.install_onboardingNameHint = 'Please choose a title and description';
-    Messages.install_onboardingAppsTitle = "Choose your applications";
-    Messages.install_onboardingAppsHint = "Choose which apps are available to users on your instance";
-    Messages.install_onboardingRegistrationTitle = "Options";
-    Messages.install_onboardingRegistrationHint = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id tristique justo";
-    Messages.install_onboardingRegistration = "Visitors to the instance are not able to create accounts. Invitations can be created by administrators";
-    Messages.install_onboardingMfa = "All accounts on the instance have to use 2-factor authentication";
+    Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance';
+    Messages.admin_onboardingNameHint = 'Please choose a title and description';
+    Messages.admin_onboardingAppsTitle = "Choose your applications";
+    Messages.admin_onboardingAppsHint = "Choose which apps to disable on your instance";
+    Messages.admin_onboardingRegistrationTitle = "Options";
+    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'
 
     var OnboardScreen = {};
 
@@ -52,21 +57,33 @@ define([
     
     };
 
+    var flushCache = () => {
+            console.log('flushcashe')
+            // sendAdminDecree('FLUSH_CACHE', function (e, response) {
+            //     if (e || response.error) {
+            //         UI.warn(Messages.error);
+            //         console.error(e, response);
+            //         return;
+            //     }
+
+            // })
+        };
+
     OnboardScreen.titleConfig = function (sendAdminDecree, sendAdminRpc) {
 
-        const blocks = Sidebar.blocks('install');
+        const blocks = Sidebar.blocks('admin');
 
         var titleDescBlock = function() {
 
             var input = blocks.input({
                 type: 'text',
                 value:  '',
-                placeholder: 'Instance title',
+                placeholder: Messages.admin_onboardingNamePlaceholder,
                 'aria-labelledby': 'cp-admin-name'
             });
 
             var desc =  blocks.textarea({
-                placeholder: 'Placeholder description text',
+                placeholder: Messages.admin_onboardingDescPlaceholder,
                 value:  '',
                 'aria-labelledby': 'cp-admin-description'
             });
@@ -123,11 +140,9 @@ define([
                             UI.warn(Messages.error);
                             $(inputLogo).val('');
                             console.error(e, response);
-                            // done(false);
                             return;
                         }
-                        // flushCache();
-                        // done(true);
+                        flushCache();
                         redraw();
                         spinner.done();
                         UI.log(Messages.saved);
@@ -192,12 +207,11 @@ define([
             sendAdminDecree('SET_INSTANCE_NAME', [$(titleInput).val().trim()], function (e, response) {
                 if (e || response.error) {
                     UI.warn(Messages.error);
-                    $input.val('');
                     console.error(e, response);
                     done(false);
                     return;
                 }
-                // flushCache();
+                flushCache();
                 done(true);
                 UI.log(Messages.saved);
 
@@ -205,12 +219,11 @@ define([
             sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(desc).val().trim()], function (e, response) {
                 if (e || response.error) {
                     UI.warn(Messages.error);
-                    $input.val('');
                     console.error(e, response);
                     done(false);
                     return;
                 }
-                // flushCache();
+                flushCache();
                 done(true);
                 UI.log(Messages.saved);
 
@@ -254,41 +267,40 @@ define([
 
     OnboardScreen.appConfig = function (sendAdminDecree) {
 
-        const blocks = Sidebar.blocks('install');
+        const blocks = Sidebar.blocks('admin');
         const grid = blocks.block([], 'cp-admin-customize-apps-grid');
-        const allApps = ['pad', 'code', 'kanban', 'slide', 'sheet', 'form', 'whiteboard', 'diagram'];
-        const availableApps = [];
+        const allApps = PadTypes.appsToSelect;
+        const appsToDisable = [];
             
         function select(app, appBlock) {
-            if (availableApps.indexOf(app) === -1) {
-                availableApps.push(app);
+            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('active-app') 
+                $(`#${app}-block`).addClass('cp-active-app') 
             } else {
-                availableApps.splice(availableApps.indexOf(app), 1);
-                $(`#${app}-block`).addClass('inactive-app') 
+                appsToDisable.splice(appsToDisable.indexOf(app), 1);
+                $(`#${app}-block`).addClass('cp-inactive-app') 
                 appBlock.find('.cp-onboardscreen-checkmark').remove();
             } 
         }
 
         allApps.forEach(app => { 
-            let appBlock = h('div.cp-appblock.inactive-app', {id: `${app.toString()}-block`}, app.charAt(0).toUpperCase() + app.slice(1))
+            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) {
-            sendAdminDecree('DISABLE_APPS', availableApps, function (e, response) {
+            sendAdminDecree('DISABLE_APPS', appsToDisable, function (e, response) {
                 if (e || response.error) {
                     UI.warn(Messages.error);
-                    $input.val('');
                     console.error(e, response);
                     done(false);
                     return;
                 }
-                // flushCache();
+                flushCache();
                 done(true);
                 UI.log(Messages.saved);
 
@@ -319,7 +331,7 @@ define([
     }    
 
     OnboardScreen.mfaRegistrationScreen = function(sendAdminDecree, app) {
-        const blocks = Sidebar.blocks('install');
+        const blocks = Sidebar.blocks('admin');
 
         var restrict = blocks.activeCheckbox({
             key: 'registration',
@@ -331,13 +343,11 @@ define([
                 sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
                     if (e || response.error) {
                         UI.warn(Messages.error);
-                        $input.val('');
                         console.error(e, response);
                         done(false);
                         return;
                     }
-                    // flushCache();
-                    // done(true);
+                    flushCache();
                     UI.log(Messages.saved);
 
                 });
@@ -354,13 +364,11 @@ define([
                 sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
                     if (e || response.error) {
                         UI.warn(Messages.error);
-                        $input.val('');
                         console.error(e, response);
                         done(false);
                         return;
                     }
-                    // flushCache();
-                    // done(true);
+                    flushCache();
                     UI.log(Messages.saved);
 
                 })
@@ -370,9 +378,9 @@ define([
         const grid = blocks.block([], 'cp-admin-customize-options-grid');
         const options = [restrict, forceMFA];
 
-        let mfaOption = h('div.cp-appblock.inactive-app', forceMFA, h('br'), Messages.install_onboardingMfa);
+        let mfaOption = h('div.cp-appblock.cp-inactive-app', forceMFA, h('br'), Messages.admin_onboardingMfa);
         $(grid).append(mfaOption);
-        let registrationOption = h('div.cp-appblock.inactive-app', restrict, h('br'), Messages.install_onboardingRegistration);
+        let registrationOption = h('div.cp-appblock.cp-inactive-app', restrict, h('br'), Messages.admin_onboardingRegistration);
         $(grid).append(registrationOption);
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function () {

From 98a0b7f88f688ec348511474f6cc39ec033b3793 Mon Sep 17 00:00:00 2001
From: David Benque <david.benque@xwiki.com>
Date: Wed, 19 Jun 2024 17:44:58 +0100
Subject: [PATCH 30/50] Fix logo and title

---
 www/install/onboarding.less  | 12 +++++++++++-
 www/install/onboardscreen.js |  1 -
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index 9989358fa..0b53c5f1f 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -46,7 +46,7 @@
 
         h1.cp-onboardscreen-title {
             font-family: "IBM Plex Mono";
-            color: @cryptpad_color_brand;
+            color: @cryptpad_color_link;
             font-size: 1.5rem;
             font-weight: 500;
         }
@@ -63,6 +63,16 @@
     }
     .cp-onboardscreen-logo {
         width: 130px;
+        .cp-sidebar-form {
+            background-color: @cp_forms-bg;
+            border-radius: @variables_radius;
+            padding: 0.5rem;
+            .cp-admin-customize-logo {
+                img {
+                    max-width: 100%;
+                }
+            }
+        }
     }
     .cp-instance-text-form {
         width: 100%;
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 87e91ea07..beb0b65a2 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -87,7 +87,6 @@ define([
             var currentContainer = blocks.block([], 'cp-admin-customize-logo');
             let redraw = () => {
                 var current = h('img', {src: '/api/logo?'+(+new Date())});
-                $(current).css({'max-width':'30px'});
                 $(currentContainer).empty().append(current);
             };
             redraw();

From 72a8e5794010b5077ea93a9459529a37a12af1be Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Thu, 20 Jun 2024 01:59:53 +0100
Subject: [PATCH 31/50] refactor

---
 www/install/onboardscreen.js | 225 +++++++++++++++++------------------
 1 file changed, 110 insertions(+), 115 deletions(-)

diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 372d868e2..ae6261908 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -37,11 +37,11 @@ define([
 
     var OnboardScreen = {};
 
-    var displayForm = function(sendAdminDecree, page) {
+    var displayForm = function(sendAdminDecree, sendAdminRpc, page) {
 
         var pages = [OnboardScreen.appConfig, OnboardScreen.mfaRegistrationScreen, OnboardScreen.titleConfig];
         var nextPageFunction = pages[page];
-        var nextPageForm = nextPageFunction(sendAdminDecree);
+        var nextPageForm = nextPageFunction(sendAdminDecree, sendAdminRpc);
         var elem = document.createElement('div');
         elem.setAttribute('id', 'cp-loading');
         let frame = h('div.configscreen', nextPageForm);
@@ -57,6 +57,7 @@ define([
     
     };
 
+    //TODO: fix EXPECTED_FUNCTION error
     var flushCache = () => {
             console.log('flushcashe')
             // sendAdminDecree('FLUSH_CACHE', function (e, response) {
@@ -67,7 +68,9 @@ define([
             //     }
 
             // })
-        };
+    };
+
+    var selections = {title: '', description: '', logoURL: '', color: '', appsToDisable: [], mfa: false, closeRegistration: false}
 
     OnboardScreen.titleConfig = function (sendAdminDecree, sendAdminRpc) {
 
@@ -78,12 +81,12 @@ define([
             var input = blocks.input({
                 type: 'text',
                 value:  '',
-                placeholder: Messages.admin_onboardingNamePlaceholder,
+                placeholder: selections.title || Messages.admin_onboardingNamePlaceholder,
                 'aria-labelledby': 'cp-admin-name'
             });
 
             var desc =  blocks.textarea({
-                placeholder: Messages.admin_onboardingDescPlaceholder,
+                placeholder: selections.description || Messages.admin_onboardingDescPlaceholder,
                 value:  '',
                 'aria-labelledby': 'cp-admin-description'
             });
@@ -93,6 +96,7 @@ define([
             return [input, desc];
         };
 
+        let dataURL = ''
         var logoBlock = function() {
 
             let inputLogo = blocks.input({
@@ -122,6 +126,7 @@ define([
             let $button = $(upload);
             let $remove = $(remove);
 
+            //TODO: update preview
             Util.onClickEnter($button, function () {
                 let files = inputLogo.files;
                 if (files.length !== 1) {
@@ -132,21 +137,7 @@ define([
                 $button.attr('disabled', 'disabled');
                 let reader = new FileReader();
                 reader.onloadend = function () {
-                    let dataURL = this.result;
-                    sendAdminRpc('UPLOAD_LOGO', {dataURL}, function (e, response) {
-                        $button.removeAttr('disabled');
-                        if (e || response.error) {
-                            UI.warn(Messages.error);
-                            $(inputLogo).val('');
-                            console.error(e, response);
-                            return;
-                        }
-                        flushCache();
-                        redraw();
-                        spinner.done();
-                        UI.log(Messages.saved);
-                    });
-
+                    dataURL = this.result;
                 };
                 reader.readAsDataURL(files[0]);
             });
@@ -156,18 +147,7 @@ define([
             }, function () {
                 spinner.spin();
                 $remove.attr('disabled', 'disabled');
-                sendAdminRpc('REMOVE_LOGO', {}, function (e, response) {
-                    $remove.removeAttr('disabled');
-                    if (e) {
-                        UI.warn(Messages.error);
-                        console.error(e, response);
-                        spinner.hide();
-                        return;
-                    }
-                    redraw();
-                    spinner.done();
-                    UI.log(Messages.saved);
-                });
+                selections.logoURL = ''
             });
 
             return formLogo;
@@ -181,15 +161,9 @@ define([
                 let rgb = $color.css('background-color');
                 let hex = Util.rgbToHex(rgb);
                 selectorColor = hex;
-                // XXX Save only at the end
-                sendAdminRpc('CHANGE_COLOR', {color:selectedColor}, function (e, response) {
-                    if (e || response.error) {
-                        UI.warn(Messages.error);
-                        console.error(e, response);
-                        return;
-                    }
-                    UI.log(Messages.saved);
-                });
+                if (hex) {
+                    selections.color = hex
+                }
             });
             var $colors = $(colors).attr('id', 'cp-install-color');
             var content = h('div.cp-onboardscreen-colorpick', [
@@ -201,34 +175,17 @@ define([
         };
 
         var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+            if ($($(titleInput).children()[0]).val() !== '') {
+                selections.title = $($(titleInput).children()[0]).val()
+            }
+            if ($($(desc).children()[0]).val() !== '') {
+                selections.description = $($(desc).children()[0]).val()
+            } 
+            if (dataURL) {
+                selections.logoURL = dataURL
+            } 
 
-            // XXX Save only at the end
-            sendAdminDecree('SET_INSTANCE_NAME', [$(titleInput).val().trim()], function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    console.error(e, response);
-                    done(false);
-                    return;
-                }
-                flushCache();
-                done(true);
-                UI.log(Messages.saved);
-
-            })
-            sendAdminDecree('SET_INSTANCE_DESCRIPTION', [$(desc).val().trim()], function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    console.error(e, response);
-                    done(false);
-                    return;
-                }
-                flushCache();
-                done(true);
-                UI.log(Messages.saved);
-
-            })
-
-            displayForm(sendAdminDecree, 0);
+            displayForm(sendAdminDecree, sendAdminRpc, 0);
         });
 
         var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0]);
@@ -241,9 +198,7 @@ define([
         var nav = blocks.nav([button]);
 
         $(button).addClass('cp-onboardscreen-save');
-        $(button).addClass('cp-onboardscreen-title-save');
         $(nav).addClass('cp-onboardscreen-nav')
-        $(nav).addClass('cp-onboardscreen-title-nav')
 
         var textForm= h('div.cp-instance-text-form',[
             titleInput,
@@ -264,7 +219,7 @@ define([
 
     };
 
-    OnboardScreen.appConfig = function (sendAdminDecree) {
+    OnboardScreen.appConfig = function (sendAdminDecree, sendAdminRpc) {
 
         const blocks = Sidebar.blocks('admin');
         const grid = blocks.block([], 'cp-admin-customize-apps-grid');
@@ -292,25 +247,13 @@ define([
         }); 
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            sendAdminDecree('DISABLE_APPS', appsToDisable, function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    console.error(e, response);
-                    done(false);
-                    return;
-                }
-                flushCache();
-                done(true);
-                UI.log(Messages.saved);
-
-            })
-            
+            selections.appsToDisable = appsToDisable
             UI.log(Messages.saved);
-            displayForm(sendAdminDecree, 1)
+            displayForm(sendAdminDecree, sendAdminRpc, 1)
         });
 
         var prev = blocks.activeButton('primary', '', Messages.form_backButton, function () {
-            displayForm(sendAdminDecree, 2);
+            displayForm(sendAdminDecree, sendAdminRpc, 2);
         });
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');
@@ -329,7 +272,7 @@ define([
         return form;
     }    
 
-    OnboardScreen.mfaRegistrationScreen = function(sendAdminDecree, app) {
+    OnboardScreen.mfaRegistrationScreen = function(sendAdminDecree, sendAdminRpc) {
         const blocks = Sidebar.blocks('admin');
 
         var restrict = blocks.activeCheckbox({
@@ -338,18 +281,8 @@ define([
                 return false;
             },
             label: 'registration',
-            query: function (val, setState) {
-                sendAdminDecree('RESTRICT_REGISTRATION', [val], function (e, response) {
-                    if (e || response.error) {
-                        UI.warn(Messages.error);
-                        console.error(e, response);
-                        done(false);
-                        return;
-                    }
-                    flushCache();
-                    UI.log(Messages.saved);
-
-                });
+            query: function (val) {
+                selections.closeRegistration = val
             },
         });
 
@@ -359,18 +292,8 @@ define([
                 return false;
             },
             label: 'forcemfa',
-            query: function (val, setState) {
-                sendAdminDecree('ENFORCE_MFA', [val], function (e, response) {
-                    if (e || response.error) {
-                        UI.warn(Messages.error);
-                        console.error(e, response);
-                        done(false);
-                        return;
-                    }
-                    flushCache();
-                    UI.log(Messages.saved);
-
-                })
+            query: function (val) {
+                selections.mfa = val
             },
         });
 
@@ -383,12 +306,84 @@ define([
         $(grid).append(registrationOption);
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function () {
-            document.location.href = '/drive/';
-            return;
+
+            var name = selections.title
+            sendAdminDecree('SET_INSTANCE_NAME', [name], function (e, response) {
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    console.error(e, response);
+                    return;
+                }
+                UI.log(Messages.saved);
+
+            })
+
+            var description = selections.title
+            sendAdminDecree('SET_INSTANCE_DESCRIPTION', [description], function (e, response) {
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    console.error(e, response);
+                    return;
+                }
+                UI.log(Messages.saved);
+
+            })
+            
+            var logoURL = selections.logoURL
+            sendAdminRpc('UPLOAD_LOGO', {logoURL}, function (e, response) {
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    console.error(e, response);
+                    return;
+                }
+            });
+
+            var color = selections.color
+            sendAdminRpc('CHANGE_COLOR', {color}, function (e, response) {
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    console.error(e, response);
+                    return;
+                }
+            });
+
+            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) {
+                    UI.warn(Messages.error);
+                    console.error(e, response);
+                    return;
+                }
+                UI.log(Messages.saved);
+
+            })
+
+            sendAdminDecree('RESTRICT_REGISTRATION', [selections.closeRegistration], function (e, response) {
+                if (e || response.error) {
+                    UI.warn(Messages.error);
+                    console.error(e, response);
+                    return;
+                }
+                UI.log(Messages.saved);
+
+            });
+
+            flushCache();
+
+            // document.location.href = '/drive/';
+            // return;
         });
 
-        var prev = blocks.activeButton('primary', '', Messages.settings_prev, function () {
-            displayForm(sendAdminDecree, 0);
+        var prev = blocks.activeButton('primary', '', Messages.form_backButton, function () {
+            displayForm(sendAdminDecree, sendAdminRpc, 0);
         });
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');

From b4e3e9e859e8f1e1fb747f83c217eed43f023bff Mon Sep 17 00:00:00 2001
From: zuzanna-maria <zuzanna.ludzik@gmail.com>
Date: Thu, 20 Jun 2024 02:03:09 +0100
Subject: [PATCH 32/50] redirect

---
 www/install/onboardscreen.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index ae6261908..889d2611e 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -378,8 +378,8 @@ define([
 
             flushCache();
 
-            // document.location.href = '/drive/';
-            // return;
+            document.location.href = '/drive/';
+            return;
         });
 
         var prev = blocks.activeButton('primary', '', Messages.form_backButton, function () {

From 9dc15d68df1c2b4bee95a7266cad1aec2ddb1ce5 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 20 Jun 2024 14:44:20 +0200
Subject: [PATCH 33/50] Fix translation keys

---
 www/install/onboardscreen.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 889d2611e..1a8d0e054 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -194,7 +194,7 @@ define([
         var colorInput =  h('div.cp-onboardscreen-color', colorBlock());
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');
-        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.install_onboardingNameTitle), h('span', Messages.install_onboardingNameHint)));
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.admin_onboardingNameTitle), h('span', Messages.admin_onboardingNameHint)));
         var nav = blocks.nav([button]);
 
         $(button).addClass('cp-onboardscreen-save');
@@ -257,7 +257,7 @@ define([
         });
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');
-        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.install_onboardingAppsTitle), h('span', Messages.install_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])
@@ -387,7 +387,7 @@ define([
         });
 
         var screenTitle = h('div.cp-onboardscreen-screentitle');
-        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.install_onboardingRegistrationTitle), h('span', Messages.install_onboardingRegistrationHint)));
+        $(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])

From d390d6078570ac4d2488646ff1dd266a3006b7bb Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 20 Jun 2024 14:46:52 +0200
Subject: [PATCH 34/50] Add missing semicolon

---
 www/admin/inner.js                 | 22 +++++------
 www/common/inner/sidebar-layout.js | 10 ++---
 www/common/pad-types.js            |  6 +--
 www/install/main.js                |  6 +--
 www/install/onboardscreen.js       | 62 +++++++++++++++---------------
 5 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/www/admin/inner.js b/www/admin/inner.js
index 116263667..4ff24497d 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -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)));
diff --git a/www/common/inner/sidebar-layout.js b/www/common/inner/sidebar-layout.js
index a57f7f97c..9df1ac220 100644
--- a/www/common/inner/sidebar-layout.js
+++ b/www/common/inner/sidebar-layout.js
@@ -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);
diff --git a/www/common/pad-types.js b/www/common/pad-types.js
index 724627a26..78adb56df 100644
--- a/www/common/pad-types.js
+++ b/www/common/pad-types.js
@@ -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,
diff --git a/www/install/main.js b/www/install/main.js
index 1ceb30278..62051d5ae 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -148,15 +148,15 @@ define([
 
                 let sendAdminDecree = function (command, data, callback) {
                     var params = ['ADMIN_DECREE', [command, data]];  
-                    rpc.send('ADMIN', params, callback)
+                    rpc.send('ADMIN', params, callback);
                 };
 
                 let sendAdminRpc = function (command, data, callback) {
                     var params = [command, data];  
-                    rpc.send('ADMIN', params, callback)
+                    rpc.send('ADMIN', params, callback);
                 };
 
-                showTitleScreen(sendAdminDecree, sendAdminRpc)
+                showTitleScreen(sendAdminDecree, sendAdminRpc);
               
             });
   
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 1a8d0e054..4fd3b23f3 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -32,8 +32,8 @@ 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 = {};
 
@@ -59,7 +59,7 @@ define([
 
     //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,7 +70,7 @@ 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) {
 
@@ -96,7 +96,7 @@ define([
             return [input, desc];
         };
 
-        let dataURL = ''
+        let dataURL = '';
         var logoBlock = function() {
 
             let inputLogo = blocks.input({
@@ -147,7 +147,7 @@ define([
             }, function () {
                 spinner.spin();
                 $remove.attr('disabled', 'disabled');
-                selections.logoURL = ''
+                selections.logoURL = '';
             });
 
             return formLogo;
@@ -162,7 +162,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,13 +176,13 @@ 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);
@@ -198,7 +198,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,
@@ -232,24 +232,24 @@ define([
                 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))
+            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)
+            displayForm(sendAdminDecree, sendAdminRpc, 1);
         });
 
         var prev = blocks.activeButton('primary', '', Messages.form_backButton, function () {
@@ -257,10 +257,10 @@ define([
         });
 
         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,
@@ -270,7 +270,7 @@ define([
         $(form).addClass('cp-onboardscreen-form');
         
         return form;
-    }    
+    };    
 
     OnboardScreen.mfaRegistrationScreen = function(sendAdminDecree, sendAdminRpc) {
         const blocks = Sidebar.blocks('admin');
@@ -282,7 +282,7 @@ define([
             },
             label: 'registration',
             query: function (val) {
-                selections.closeRegistration = val
+                selections.closeRegistration = val;
             },
         });
 
@@ -293,7 +293,7 @@ define([
             },
             label: 'forcemfa',
             query: function (val) {
-                selections.mfa = val
+                selections.mfa = val;
             },
         });
 
@@ -307,7 +307,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 +316,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 +327,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 +338,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 +347,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 +364,7 @@ define([
                 }
                 UI.log(Messages.saved);
 
-            })
+            });
 
             sendAdminDecree('RESTRICT_REGISTRATION', [selections.closeRegistration], function (e, response) {
                 if (e || response.error) {
@@ -390,7 +390,7 @@ define([
         $(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([

From 51aeb8bc7edad5d7ac2f012509865741a187067f Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 20 Jun 2024 15:26:36 +0200
Subject: [PATCH 35/50] 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 };
 
 });
 

From 29d4a767c8209623525cdd45dba1fe509026a3e9 Mon Sep 17 00:00:00 2001
From: David Benque <david.benque@xwiki.com>
Date: Thu, 20 Jun 2024 14:30:12 +0100
Subject: [PATCH 36/50] Remove unnecessary code

---
 www/install/onboarding.less | 34 ++++------------------------------
 1 file changed, 4 insertions(+), 30 deletions(-)

diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index 0ac025055..79e07210e 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -12,16 +12,6 @@
     }
 }
 
-@cp_palette:
-    #FFD4D4,
-    #FFDECA,
-    #FFE69C,
-    #DBFFB7,
-    #AFFDC2,
-    #C9FFFE,
-    #C8D6FF,
-    #E4CAFF;
-
 .configscreen {
     //width: 70%;
     //height: 75%;
@@ -127,22 +117,6 @@ nav.cp-onboardscreen-nav {
 // }
 
 
-.cp_palette(@cp_palette; @index) when (@index > 0){
-        // loop through the @colors
-        .cp_palette(@cp_palette; (@index - 1));
-        @color: extract(@cp_palette, @index);
-        // make a numbered class selector for each color
-        .cp-kanban-palette-color@{index}{
-            background-color: @color !important;
-            &.cp-kanban-palette-board {
-                background-color: @color !important;
-            }
-            &.kanban-board-inner {
-                background-color: fade(@color, 50%) !important;
-            }
-        }
-    }
-
 // .kanban-colors(@kanban-colors; @index) when (@index > 0){
 //         // loop through the @colors
 //         .kanban-colors(@kanban-colors; (@index - 1));
@@ -213,10 +187,10 @@ nav.cp-onboardscreen-nav {
 //     padding: 10px;
 // }
 
-.cp-active-app {
-    background-color: #212121!important;
-    max-width:30%;
-}
+// .cp-active-app {
+//     background-color: #212121!important;
+//     max-width:30%;
+// }
 
 // .cp-admin-customize-options-grid {
 //     height:40%;

From 1feaa6965256a6bc45c217152f81bc56996c1b4d Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 20 Jun 2024 16:45:00 +0200
Subject: [PATCH 37/50] Onboarding: remember values when switching page

---
 www/common/common-interface.js |  15 +++
 www/install/onboarding.less    |  25 ++++-
 www/install/onboardscreen.js   | 184 ++++++++++++++++++---------------
 3 files changed, 140 insertions(+), 84 deletions(-)

diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index e34037d30..5e015c1ca 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -1064,6 +1064,21 @@ define([
         }
     };
 
+    UI.getNewIcon = function (type) {
+        var icon = h('i.fa.fa-file-text-o');
+
+        if (AppConfig.applicationsIcon && AppConfig.applicationsIcon[type]) {
+            var icon = AppConfig.applicationsIcon[type];
+            var font = icon.indexOf('cptools') === 0 ? 'cptools' : 'fa';
+            if (type === 'fileupload') { type = 'file'; }
+            if (type === 'folderupload') { type = 'file'; }
+            if (type === 'link') { type = 'drive'; }
+            var appClass = ' cp-icon cp-icon-color-'+type;
+            icon = h('i', {'class': font + ' ' + icon + appClass});
+        }
+
+        return icon;
+    };
     var $defaultIcon = $('<span>', {"class": "fa fa-file-text-o"});
     UI.getIcon = function (type) {
         var $icon = $defaultIcon.clone();
diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index 6d635d9f3..71da6d9b6 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -4,6 +4,7 @@
 @import (reference) "../../customize/src/less2/include/markdown.less";
 @import (reference) "../../customize/src/less2/include/avatar.less";
 @import (reference) '../../customize/src/less2/include/admin.less';
+@import (reference) '../../customize/src/less2/include/icon-colors.less';
 
 &.cp-page-install {
     .admin_main();
@@ -29,6 +30,21 @@
             box-shadow: 0px 0px 10px 0px @cp_shadow-color;
             padding: 30px 110px 20px 110px;
         }
+        .cp-onboarding-logo-input {
+            display: none;
+        }
+        .cp-onboardscreen-logo {
+            min-width: 200px;
+            max-width: 200px;
+            nav {
+                display: flex;
+                margin-top: 0.5rem;
+                justify-content: center;
+            }
+        }
+        .cp-appblock {
+            .iconColors_main();
+        }
     }
 }
 
@@ -73,7 +89,6 @@
         border: 0px transparent !important;
     }
     .cp-onboardscreen-logo {
-        width: 130px;
         .cp-sidebar-form {
             background-color: @cp_forms-bg;
             border-radius: @variables_radius;
@@ -224,9 +239,17 @@ nav.cp-onboardscreen-nav {
 //     padding: 10px;
 // }
 
+.cp-inactive-app {
+    .cp-on-enabled {
+        visibility: hidden;
+    }
+}
 .cp-active-app {
     background-color: #212121!important;
     max-width:30%;
+    .cp-on-enabled {
+        visibility: visible;
+    }
 }
 
 // .cp-admin-customize-options-grid {
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 4f4eb99e0..24c445f6b 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -2,6 +2,7 @@ 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',
@@ -16,6 +17,7 @@ define([
     $,
     Sidebar,
     Messages,
+    AppConfig,
     h,
     UI,
     Util,
@@ -24,6 +26,7 @@ define([
 ) {
 
     //XXX
+    Messages.onboarding_upload = "Select logo";
     Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance';
     Messages.admin_onboardingNameHint = 'Please choose a title and description';
     Messages.admin_onboardingAppsTitle = "Choose your applications";
@@ -45,6 +48,7 @@ define([
         let frame = h('div.cp-onboarding-box', nextPageForm);
         Env.overlay.empty().append(frame);
     };
+    const blocks = Sidebar.blocks('admin');
 
     //TODO: fix EXPECTED_FUNCTION error
     var flushCache = () => {
@@ -59,36 +63,33 @@ define([
             // })
     };
 
-    var selections = {title: '', description: '', logoURL: '', color: '', appsToDisable: [], mfa: false, closeRegistration: false};
+    var selections = {
+        title: '',
+        description: '',
+        logoURL: '',
+        color: '',
+        appsToDisable: [],
+        mfa: false,
+        closeRegistration: false
+    };
 
     const titleConfig = function (Env) {
         const { sendAdminDecree, sendAdminRpc } = Env;
 
-        const blocks = Sidebar.blocks('admin');
-
-        var titleDescBlock = function() {
-
-            var input = blocks.input({
-                type: 'text',
-                value:  '',
-                placeholder: selections.title || Messages.admin_onboardingNamePlaceholder,
-                'aria-labelledby': 'cp-admin-name'
-            });
-
-            var desc =  blocks.textarea({
-                placeholder: selections.description || Messages.admin_onboardingDescPlaceholder,
-                value:  '',
-                'aria-labelledby': 'cp-admin-description'
-            });
-
-            $(desc).addClass('cp-onboardscreen-desc');
-
-            return [input, desc];
-        };
-
-        let dataURL = '';
-        var logoBlock = function() {
+        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/*',
@@ -96,65 +97,73 @@ define([
             });
 
             var currentContainer = blocks.block([], 'cp-admin-customize-logo');
-            let redraw = () => {
-                var current = h('img', {src: '/api/logo?'+(+new Date())});
-                $(currentContainer).empty().append(current);
-            };
-            redraw();
 
-            var upload = blocks.button('primary', '', Messages.admin_logoButton);
-            var remove = blocks.button('danger', '', Messages.admin_logoRemoveButton);
+            var upload = blocks.button('secondary', '', Messages.onboarding_upload);
 
-            let spinnerBlock = blocks.inline();
-            let spinner = UI.makeSpinner($(spinnerBlock));
             let formLogo = blocks.form([
                 currentContainer,
-                blocks.block(inputLogo),
-                blocks.nav([upload, remove, spinnerBlock])
+                blocks.block(inputLogo, 'cp-onboarding-logo-input'),
+                blocks.nav([upload])
             ]);
 
             let $button = $(upload);
-            let $remove = $(remove);
 
-            //TODO: update preview
-            Util.onClickEnter($button, function () {
+            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;
                 }
-                spinner.spin();
-                $button.attr('disabled', 'disabled');
                 let reader = new FileReader();
                 reader.onloadend = function () {
                     dataURL = this.result;
+                    redraw(dataURL);
                 };
                 reader.readAsDataURL(files[0]);
             });
-            UI.confirmButton($remove, {
-                classes: 'btn-danger',
-                multiple: true
-            }, function () {
-                spinner.spin();
-                $remove.attr('disabled', 'disabled');
-                selections.logoURL = '';
+            Util.onClickEnter($button, function () {
+                $button.attr('disabled', 'disabled');
+                if (!state) {
+                    return void $input.click();
+                }
+                dataURL = '';
+                redraw();
             });
 
             return formLogo;
         };
 
-        var colorBlock = function () {
+        var getColorBlock = function () {
 
-            let selectorColor = '';
             // XXX Number of accent color presets
             var colors = UIElements.makePalette(5, (color, $color) => {
                 let rgb = $color.css('background-color');
                 let hex = Util.rgbToHex(rgb);
-                selectorColor = hex;
                 if (hex) {
                     selections.color = hex;
+                    selections.colorId = color;
                 }
             });
+            if (selections.colorId) {
+                colors.setValue(selections.colorId);
+            }
             var $colors = $(colors).attr('id', 'cp-install-color');
             var content = h('div.cp-onboardscreen-colorpick', [
                 h('label', {for:'cp-install-color'}, Messages.kanban_color),
@@ -165,12 +174,8 @@ define([
         };
 
         var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            if ($($(titleInput).children()[0]).val() !== '') {
-                selections.title = $($(titleInput).children()[0]).val();
-            }
-            if ($($(desc).children()[0]).val() !== '') {
-                selections.description = $($(desc).children()[0]).val();
-            }
+            selections.title = $(titleInput).val() || '';
+            selections.description = $(description).val() || '';
             if (dataURL) {
                 selections.logoURL = dataURL;
             }
@@ -178,25 +183,28 @@ define([
             gotoPage(Env, 1);
         });
 
-        var titleInput = h('div.cp-onboardscreen-name', titleDescBlock()[0]);
-        var logoInput = h('div.cp-onboardscreen-logo', logoBlock());
-        var desc = h('div', titleDescBlock()[1]);
-        var colorInput =  h('div.cp-onboardscreen-color', colorBlock());
+        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(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.admin_onboardingNameTitle), h('span', Messages.admin_onboardingNameHint)));
-        var nav = blocks.nav([button]);
+        $(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',[
-            titleInput,
-            desc,
-            colorInput,
+        var textForm = h('div.cp-instance-text-form', [
+            titleBlock,
+            descriptionBlock,
+            colorBlock,
         ]);
 
-        var instanceForm = h('div.cp-instance-form', [logoInput, textForm]);
+        var instanceForm = h('div.cp-instance-form', [logoBlock, textForm]);
 
         var form = blocks.form([
             screenTitle,
@@ -212,33 +220,45 @@ define([
     const appConfig = function (Env) {
         const { sendAdminDecree, sendAdminRpc } = Env;
 
-        const blocks = Sidebar.blocks('admin');
         const grid = blocks.block([], 'cp-admin-customize-apps-grid');
+        const $grid = $(grid);
         const allApps = PadTypes.appsToSelect;
-        const appsToDisable = [];
+        const appsToDisable = selections.appsToDisable;
 
-        function select(app, appBlock) {
+        let apps = {};
+
+        let select = function (app, $app) {
             if (appsToDisable.indexOf(app) === -1) {
+                console.error('SET ACTIVE', app);
                 appsToDisable.push(app);
-                var checkMark = h('div.cp-onboardscreen-checkmark');
-                $(checkMark).addClass('fa-check');
-                appBlock.append(checkMark);
-                $(`#${app}-block`).addClass('cp-active-app');
+                $app.toggleClass('cp-inactive-app', true);
+                $app.toggleClass('cp-active-app', false);
             } else {
+                console.error('SET INACTIVE', app);
                 appsToDisable.splice(appsToDisable.indexOf(app), 1);
-                $(`#${app}-block`).addClass('cp-inactive-app');
-                appBlock.find('.cp-onboardscreen-checkmark').remove();
+                $app.toggleClass('cp-inactive-app', false);
+                $app.toggleClass('cp-active-app', true);
             }
         }
 
         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)));
+            let name = Messages.type[app] || app;
+            let icon = UI.getNewIcon(app);
+            let appBlock = apps[app] = h('div.cp-appblock', [
+                icon,
+                h('span', 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));
         });
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            selections.appsToDisable = appsToDisable;
             UI.log(Messages.saved);
             gotoPage(Env, 2);
         });
@@ -266,8 +286,6 @@ define([
     const mfaRegistrationScreen = function (Env) {
         const { sendAdminDecree, sendAdminRpc } = Env;
 
-        const blocks = Sidebar.blocks('admin');
-
         var restrict = blocks.activeCheckbox({
             key: 'registration',
             getState: function () {

From 5726d6b35ccbbf3e453b75a10e43fc9151777319 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 20 Jun 2024 17:01:22 +0200
Subject: [PATCH 38/50] Onboarding: deduplicate code between admin and
 onboarding screen

---
 www/admin/app-admin.less     | 54 ------------------------------------
 www/admin/inner.js           | 48 ++++++--------------------------
 www/install/onboardscreen.js | 21 ++++++++------
 3 files changed, 20 insertions(+), 103 deletions(-)

diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less
index 4ced37da4..fbaaf4b5e 100644
--- a/www/admin/app-admin.less
+++ b/www/admin/app-admin.less
@@ -11,60 +11,6 @@
 @import (reference) '../../customize/src/less2/include/export.less';
 @import (reference) '../../customize/src/less2/include/admin.less';
 
-.cp-admin-customize-apps-grid {
-    padding: 10px;
-    margin-left: 10px;
-    width: 105%;
-}
-
-.cp-appblock {
-    width:30%;
-    float:left !important;
-    display:block !important;
-    margin: 2px !important;
-    height: 60px !important;
-    padding: 10px;
-}
-
-.cp-active-app {
-    background-color:  #323232!important;
-    max-width:30%;
-}
-
-.cp-inactive-app {
-    background-color:#424242!important; 
-    max-width:30%;
-}
-
-.cp-onboardscreen-colorpick {
-    padding-left:5%
-}
-
-.cp-onboardscreen-color {
-    width:200%;
-    height:20%;
-    margin-left: -65%;
-    margin-bottom: -10%;
-}
-
-.cp-kanban-palette {
-    display: inline-block;
-    border-radius: 50%;
-    height: 30px !important;
-    width: 30px !important;
-    text-align: center;
-    line-height: 30px;
-    background-color: green !important;
-    border: 1px solid fade(green, 40%);
-    margin-right: 1%;
-}
-
-.cp-onboardscreen-checkmark {
-    text-align:right !important;
-    color: white !important;
-}
-
-
 &.cp-app-admin {
     .framework_min_main();
     .sidebar-layout_main();
diff --git a/www/admin/inner.js b/www/admin/inner.js
index d8f032be5..75a2c4aa4 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -21,8 +21,8 @@ define([
     '/api/config',
     '/api/instance',
     '/lib/datepicker/flatpickr.js',
-    '/common/hyperscript.js',
-    
+    '/install/onboardscreen.js',
+
     'css!/lib/datepicker/flatpickr.min.css',
     'css!/components/bootstrap/dist/css/bootstrap.min.css',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
@@ -41,12 +41,12 @@ define([
     Messages,
     Keys,
     h,
-    
     Clipboard,
     Sortify,
     ApiConfig,
     Instance,
-    Flatpickr, 
+    Flatpickr,
+    Onboarding,
 ) {
 
     //XXX 
@@ -637,40 +637,8 @@ define([
         });
 
         sidebar.addItem('apps', function (cb) {
-            const grid = blocks.block([], 'cp-admin-customize-apps-grid');
-            const $grid = $(grid);
-            const allApps = PadTypes.appsToSelect;
             const appsToDisable = ApiConfig.appsToDisable || [];
-
-            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', [
-                    icon,
-                    h('span', 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));
-            });
-
+            const grid = Onboarding.createAppsGrid(appsToDisable);
 
             var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
                 sFrameChan.query('Q_ADMIN_RPC', {
@@ -688,13 +656,13 @@ define([
                     UI.log(Messages._getKey('ui_saved', [Messages.admin_appSelection]));
                 });
             });
-            
+
             let form = blocks.form([
-                grid 
+                grid
             ], blocks.nav([save]));
 
             cb(form);
-        }); 
+        });
 
 
         sidebar.addItem('instance-info-notice', function(cb){
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index d191cd51c..9f839cfcf 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -8,7 +8,6 @@ define([
     '/common/common-util.js',
     '/common/common-ui-elements.js',
     '/common/pad-types.js',
-    '/api/instance',
 
     'css!/components/bootstrap/dist/css/bootstrap.min.css',
     'css!/components/components-font-awesome/css/font-awesome.min.css',
@@ -217,22 +216,17 @@ define([
 
     };
 
-    const appConfig = function (Env) {
-        const { sendAdminDecree, sendAdminRpc } = Env;
-
+    const createAppsGrid = appsToDisable => {
         const grid = blocks.block([], 'cp-admin-customize-apps-grid');
         const $grid = $(grid);
         const allApps = PadTypes.appsToSelect;
-        const appsToDisable = selections.appsToDisable;
 
         let select = function (app, $app) {
             if (appsToDisable.indexOf(app) === -1) {
-                console.error('SET ACTIVE', app);
                 appsToDisable.push(app);
                 $app.toggleClass('cp-inactive-app', true);
                 $app.toggleClass('cp-active-app', false);
             } else {
-                console.error('SET INACTIVE', app);
                 appsToDisable.splice(appsToDisable.indexOf(app), 1);
                 $app.toggleClass('cp-inactive-app', false);
                 $app.toggleClass('cp-active-app', true);
@@ -256,8 +250,17 @@ define([
             $app.on('click', () => select(app, $app));
         });
 
+        return grid;
+    };
+
+    const appConfig = function (Env) {
+        const { sendAdminDecree, sendAdminRpc } = Env;
+
+        const appsToDisable = selections.appsToDisable;
+        const grid = createAppsGrid(appsToDisable);
+
+
         var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
-            UI.log(Messages.saved);
             gotoPage(Env, 2);
         });
 
@@ -430,7 +433,7 @@ define([
     window.CP_onboarding_test = () => {
         create(() => {}, () => {});
     };
-    return { create };
+    return { create, createAppsGrid };
 
 });
 

From a76e7403784b172dde81a922831b57169dddb6f6 Mon Sep 17 00:00:00 2001
From: David Benque <david.benque@xwiki.com>
Date: Thu, 20 Jun 2024 16:01:26 +0100
Subject: [PATCH 39/50] UI for setting grids

---
 customize.dist/src/less2/include/admin.less | 26 +++++++++++++++++++++
 www/install/onboardscreen.js                |  2 +-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/customize.dist/src/less2/include/admin.less b/customize.dist/src/less2/include/admin.less
index 98b110d3e..16febfd47 100644
--- a/customize.dist/src/less2/include/admin.less
+++ b/customize.dist/src/less2/include/admin.less
@@ -36,4 +36,30 @@
         .instance-colors(@palette-colors; length(@palette-colors));
     }
 
+    .cp-admin-customize-apps-grid, .cp-admin-customize-options-grid {
+        display: grid;
+        gap: 0.25rem;
+        .cp-appblock {
+
+        }
+    }
+
+    .cp-admin-customize-apps-grid {
+        grid-template-columns: 1fr 1fr 1fr;
+        .cp-appblock {
+            background-color: fade(@cryptpad_text_col, 10%);
+            padding: 0.3rem;
+            border-radius: @variables_radius;
+            font-size: 1.2em;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+    }
+
+    .cp-admin-customize-options-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+
 }
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 4f4eb99e0..7901b401e 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -220,7 +220,7 @@ define([
         function select(app, appBlock) {
             if (appsToDisable.indexOf(app) === -1) {
                 appsToDisable.push(app);
-                var checkMark = h('div.cp-onboardscreen-checkmark');
+                var checkMark = h('i.cp-onboardscreen-checkmark.fa');
                 $(checkMark).addClass('fa-check');
                 appBlock.append(checkMark);
                 $(`#${app}-block`).addClass('cp-active-app');

From 35078ba4331077c81770f07fd27b7609df598ff0 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 20 Jun 2024 17:09:26 +0200
Subject: [PATCH 40/50] Onboarding: Clean last tab

---
 www/install/onboardscreen.js | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 9f839cfcf..306854f4a 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -290,32 +290,42 @@ define([
         var restrict = blocks.activeCheckbox({
             key: 'registration',
             getState: function () {
-                return false;
+                return selections.closeRegistration;
             },
             label: 'registration',
-            query: function (val) {
+            query: function (val, setState) {
                 selections.closeRegistration = val;
+                setState(val)
             },
         });
 
         var forceMFA = blocks.activeCheckbox({
             key: 'forcemfa',
             getState: function () {
-                return false;
+                return selections.mfa;
             },
             label: 'forcemfa',
-            query: function (val) {
+            query: function (val, setState) {
                 selections.mfa = val;
+                setState(val)
             },
         });
 
-        const grid = blocks.block([], 'cp-admin-customize-options-grid');
-        const options = [restrict, forceMFA];
 
-        let mfaOption = h('div.cp-appblock.cp-inactive-app', forceMFA, h('br'), Messages.admin_onboardingMfa);
-        $(grid).append(mfaOption);
-        let registrationOption = h('div.cp-appblock.cp-inactive-app', restrict, h('br'), Messages.admin_onboardingRegistration);
-        $(grid).append(registrationOption);
+        let mfaOption = h('div', [
+            forceMFA,
+            h('br'),
+            h('span', Messages.admin_onboardingMfa)
+        ]);
+        let registrationOption = h('div', [
+            restrict,
+            h('br'),
+            h('span', Messages.admin_onboardingRegistration)
+        ]);
+        const grid = blocks.block([
+            mfaOption,
+            registrationOption
+        ], 'cp-admin-customize-options-grid');
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function () {
 

From 4c465965afeb6215d05c450bed82380d5814f864 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 20 Jun 2024 17:10:58 +0200
Subject: [PATCH 41/50] Fix merge issue

---
 www/install/onboardscreen.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index d7b2f911e..306854f4a 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -226,10 +226,6 @@ define([
                 appsToDisable.push(app);
                 $app.toggleClass('cp-inactive-app', true);
                 $app.toggleClass('cp-active-app', false);
-                var checkMark = h('i.cp-onboardscreen-checkmark.fa');
-                $(checkMark).addClass('fa-check');
-                appBlock.append(checkMark);
-                $(`#${app}-block`).addClass('cp-active-app');
             } else {
                 appsToDisable.splice(appsToDisable.indexOf(app), 1);
                 $app.toggleClass('cp-inactive-app', false);

From fd9984f1186c9c6345741b7bc92a38a779ef1a95 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 20 Jun 2024 17:55:20 +0200
Subject: [PATCH 42/50] Onboarding: fix save and flush cache

---
 www/install/main.js          |   2 +-
 www/install/onboardscreen.js | 245 ++++++++++++++++++++++-------------
 2 files changed, 155 insertions(+), 92 deletions(-)

diff --git a/www/install/main.js b/www/install/main.js
index a63332a1b..b7735a321 100644
--- a/www/install/main.js
+++ b/www/install/main.js
@@ -26,7 +26,7 @@ define([
     var Messages = Cryptpad.Messages;
     $(function () {
 
-        if (LocalStore.isLoggedIn()) {
+        if (LocalStore.isLoggedIn() && !localStorage.CP_dev) {
             // already logged in, redirect to drive
             document.location.href = '/drive/';
             return;
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 306854f4a..6c475f3b0 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -8,6 +8,7 @@ define([
     '/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',
@@ -21,10 +22,12 @@ define([
     UI,
     Util,
     UIElements,
-    PadTypes
+    PadTypes,
+    nThen
 ) {
 
     //XXX
+    Messages.onboarding_save_error = "Some options could not be saved properly. Please visit the administration panel to check the values.";
     Messages.onboarding_upload = "Select logo";
     Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance';
     Messages.admin_onboardingNameHint = 'Please choose a title and description';
@@ -49,17 +52,14 @@ define([
     };
     const blocks = Sidebar.blocks('admin');
 
-    //TODO: fix EXPECTED_FUNCTION error
-    var flushCache = () => {
-            console.log('flushcashe');
-            // sendAdminDecree('FLUSH_CACHE', function (e, response) {
-            //     if (e || response.error) {
-            //         UI.warn(Messages.error);
-            //         console.error(e, response);
-            //         return;
-            //     }
-
-            // })
+    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 = {
@@ -72,9 +72,93 @@ define([
         closeRegistration: false
     };
 
-    const titleConfig = function (Env) {
+    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,
@@ -156,7 +240,7 @@ define([
                 let rgb = $color.css('background-color');
                 let hex = Util.rgbToHex(rgb);
                 if (hex) {
-                    selections.color = hex;
+                    selections.color = color ? hex : '';
                     selections.colorId = color;
                 }
             });
@@ -254,8 +338,6 @@ define([
     };
 
     const appConfig = function (Env) {
-        const { sendAdminDecree, sendAdminRpc } = Env;
-
         const appsToDisable = selections.appsToDisable;
         const grid = createAppsGrid(appsToDisable);
 
@@ -285,8 +367,6 @@ define([
     };
 
     const mfaRegistrationScreen = function (Env) {
-        const { sendAdminDecree, sendAdminRpc } = Env;
-
         var restrict = blocks.activeCheckbox({
             key: 'registration',
             getState: function () {
@@ -329,79 +409,7 @@ define([
 
         var save = blocks.activeButton('primary', '', Messages.settings_save, function () {
 
-            var name = selections.title;
-            sendAdminDecree('SET_INSTANCE_NAME', [name], function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    console.error(e, response);
-                    return;
-                }
-                UI.log(Messages.saved);
-
-            });
-
-            var description = selections.title;
-            sendAdminDecree('SET_INSTANCE_DESCRIPTION', [description], function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    console.error(e, response);
-                    return;
-                }
-                UI.log(Messages.saved);
-
-            });
-
-            var logoURL = selections.logoURL;
-            sendAdminRpc('UPLOAD_LOGO', {logoURL}, function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    console.error(e, response);
-                    return;
-                }
-            });
-
-            var color = selections.color;
-            sendAdminRpc('CHANGE_COLOR', {color}, function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    console.error(e, response);
-                    return;
-                }
-            });
-
-            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) {
-                    UI.warn(Messages.error);
-                    console.error(e, response);
-                    return;
-                }
-                UI.log(Messages.saved);
-
-            });
-
-            sendAdminDecree('RESTRICT_REGISTRATION', [selections.closeRegistration], function (e, response) {
-                if (e || response.error) {
-                    UI.warn(Messages.error);
-                    console.error(e, response);
-                    return;
-                }
-                UI.log(Messages.saved);
-
-            });
-
-            flushCache();
-
-            document.location.href = '/drive/';
-            return;
+            saveAndRedirect(Env);
         });
 
         var prev = blocks.activeButton('primary', '', Messages.form_backButton, function () {
@@ -440,9 +448,64 @@ define([
         $('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 };
 
 });

From 040c63b5334dd3619011d13cded8df517ea54f36 Mon Sep 17 00:00:00 2001
From: David Benque <david.benque@xwiki.com>
Date: Fri, 21 Jun 2024 10:47:52 +0100
Subject: [PATCH 43/50] Onboarding application grid UI

---
 customize.dist/src/less2/include/admin.less | 22 ++++++++++-----
 www/install/onboarding.less                 | 31 +++++----------------
 www/install/onboardscreen.js                |  8 ++++--
 3 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/customize.dist/src/less2/include/admin.less b/customize.dist/src/less2/include/admin.less
index 0d688f24e..e30c5b242 100644
--- a/customize.dist/src/less2/include/admin.less
+++ b/customize.dist/src/less2/include/admin.less
@@ -39,30 +39,39 @@
 
     .cp-admin-customize-apps-grid, .cp-admin-customize-options-grid {
         display: grid;
-        gap: 0.25rem;
-        .cp-appblock {
-
-        }
+        gap: 0.5rem;
     }
 
     .cp-admin-customize-apps-grid {
         grid-template-columns: 1fr 1fr 1fr;
         .cp-appblock {
-            background-color: fade(@cryptpad_text_col, 10%);
-            padding: 0.3rem;
+            padding: 0.5rem;
             border-radius: @variables_radius;
             font-size: 1.2em;
             display: flex;
             flex-direction: row;
             align-items: center;
+            gap: 0.75rem;
             .iconColors_main();
+            &:hover {
+                cursor: pointer;
+            }
+            i.cp-icon {
+                font-size: 2.8rem;
+            }
+            .cp-app-name {
+                flex-grow: 1;
+            }
         }
         .cp-inactive-app {
+            background-color: transparent;
+            opacity: 0.75;
             .cp-on-enabled {
                 visibility: hidden;
             }
         }
         .cp-active-app {
+            background-color: fade(@cryptpad_text_col, 10%);
             .cp-on-enabled {
                 visibility: visible;
             }
@@ -70,7 +79,6 @@
     }
 
     .cp-admin-customize-options-grid {
-        display: grid;
         grid-template-columns: 1fr 1fr;
     }
 
diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index aaa7a6e01..801fa5978 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -42,19 +42,6 @@
                 justify-content: center;
             }
         }
-        .cp-appblock {
-            .iconColors_main();
-        }
-        .cp-inactive-app {
-            .cp-on-enabled {
-                visibility: hidden;
-            }
-        }
-        .cp-active-app {
-            .cp-on-enabled {
-                visibility: visible;
-            }
-        }
     }
 }
 
@@ -76,21 +63,16 @@
 .cp-onboardscreen-screentitle {
     text-align: center;
     font-size: 1rem;
-    .cp-onboardscreen-maintitle {
-        float:center;
-        padding:10px;
-
-        h1.cp-onboardscreen-title {
-            font-family: "IBM Plex Mono";
-            color: @cryptpad_color_link;
-            font-size: 1.5rem;
-            font-weight: 500;
-        }
+    margin-bottom: 1rem;
+    h1.cp-onboardscreen-title {
+        font-family: "IBM Plex Mono";
+        color: @cryptpad_color_link;
+        font-size: 1.5rem;
+        font-weight: 500;
     }
 }
 
 .cp-instance-form {
-    margin-top: 1rem;
     display: flex;
     flex-direction: row;
     gap: 2rem;
@@ -138,6 +120,7 @@ nav.cp-onboardscreen-nav {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
+    margin-top: 1rem;
 }
 
 
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index 306854f4a..52a5aa46f 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -236,9 +236,11 @@ define([
         allApps.forEach(app => {
             let name = Messages.type[app] || app;
             let icon = UI.getNewIcon(app);
-            let appBlock = h('div.cp-appblock', [
+            let appBlock = h('div.cp-appblock',
+                {tabindex:0, role:"button"},
+            [
                 icon,
-                h('span', name),
+                h('span.cp-app-name', name),
                 h('i.fa.fa-check.cp-on-enabled')
             ]);
             let $app = $(appBlock).appendTo($grid);
@@ -312,7 +314,7 @@ define([
         });
 
 
-        let mfaOption = h('div', [
+        let mfaOption = h('div.cp-optionblock', [
             forceMFA,
             h('br'),
             h('span', Messages.admin_onboardingMfa)

From a27b3df66132b6d80cb11c7a41142291db7d57da Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 21 Jun 2024 15:49:24 +0200
Subject: [PATCH 44/50] Onboarding: automatically create install token and link
 if no admin detected

---
 lib/api.js         | 34 ++++++++++++++++++++++++++++++++++
 lib/common-hash.js |  6 ++++++
 scripts/install.js |  1 -
 server.js          |  7 -------
 4 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 lib/common-hash.js

diff --git a/lib/api.js b/lib/api.js
index 220e954d8..b3beddf3d 100644
--- a/lib/api.js
+++ b/lib/api.js
@@ -10,6 +10,7 @@ const nThen = require("nthen");
 const Fs = require("fs");
 const Path = require("path");
 const Nacl = require("tweetnacl/nacl-fast");
+const Hash = require('./common-hash');
 
 module.exports.create = function (Env) {
     var log = Env.Log;
@@ -25,6 +26,39 @@ nThen(function (w) {
             console.error(err);
         }
     }));
+}).nThen(function (w) {
+    let admins = Env.admins || [];
+
+    // If we don't have any admin on this instance, print an onboarding link
+    if (Array.isArray(admins) && admins.length) { return; }
+    let token = Env.installToken;
+    let printLink = () => {
+        let url = `${Env.httpUnsafeOrigin}/install/#${token}`;
+        console.log('=============================');
+        console.log('Create your first admin account and customize your instance by visiting');
+        console.log(url);
+        console.log('=============================');
+
+    };
+
+    // If we already have a token, print it
+    if (token) { return void printLink(); }
+
+    // Otherwise create a new token
+    let decreeName = Path.join(Env.paths.decree, 'decree.ndjson');
+    token = Hash.createChannelId() + Hash.createChannelId();
+    let decree = ["ADD_INSTALL_TOKEN",[token],"",+new Date()];
+    Fs.appendFile(decreeName, JSON.stringify(decree) + '\n', w(function (err) {
+        if (err) { console.log(err); return; }
+        printLink();
+    }));
+}).nThen(function (w) {
+    if (!Env.admins.length) {
+        Env.Log.info('NO_ADMIN_CONFIGURED', {
+            message: `Your instance is not correctly configured for production usage. Review its checkup page for more information.`,
+            details: new URL('/checkup/', Env.httpUnsafeOrigin).href,
+        });
+    }
 }).nThen(function (w) {
     // we assume the server has generated a secret used to validate JWT tokens
     if (typeof(Env.bearerSecret) === 'string') { return; }
diff --git a/lib/common-hash.js b/lib/common-hash.js
new file mode 100644
index 000000000..7a3beddab
--- /dev/null
+++ b/lib/common-hash.js
@@ -0,0 +1,6 @@
+// SPDX-FileCopyrightText: 2023 XWiki CryptPad Team <contact@cryptpad.org> and contributors
+//
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+module.exports = require("../www/common/common-hash");
+
diff --git a/scripts/install.js b/scripts/install.js
index 86a0d0b75..4fb06a4ed 100644
--- a/scripts/install.js
+++ b/scripts/install.js
@@ -40,5 +40,4 @@ nThen(function (w) {
     console.log(token);
     var url = config.httpUnsafeOrigin + '/install/';
     console.log(`Please visit ${url} to create your first admin user`);
-
 });
diff --git a/server.js b/server.js
index f8e8ffd94..5326f0270 100644
--- a/server.js
+++ b/server.js
@@ -71,13 +71,6 @@ nThen(function (w) {
         Env.Log.info("WEBSERVER_LISTENING", {
             origin: url,
         });
-
-        if (!Env.admins.length) {
-            Env.Log.info('NO_ADMIN_CONFIGURED', {
-                message: `Your instance is not correctly configured for production usage. Review its checkup page for more information.`,
-                details: new URL('/checkup/', Env.httpUnsafeOrigin).href,
-            });
-        }
     } catch (err) {
         Env.Log.error("INVALID_ORIGIN", {
             httpUnsafeOrigin: Env.httpUnsafeOrigin,

From bc60ece1155b66c8328d2cbe4e0c02fc3d7c2814 Mon Sep 17 00:00:00 2001
From: David Benque <david.benque@xwiki.com>
Date: Fri, 21 Jun 2024 14:59:02 +0100
Subject: [PATCH 45/50] Onboarding and admin: adjust temp microcopy

---
 www/install/onboardscreen.js | 30 +++++++++++++-----------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index f903670b7..c37941057 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -31,12 +31,10 @@ define([
     Messages.onboarding_upload = "Select logo";
     Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance';
     Messages.admin_onboardingNameHint = 'Please choose a title and description';
-    Messages.admin_onboardingAppsTitle = "Choose your applications";
-    Messages.admin_onboardingAppsHint = "Choose which apps to disable on your instance";
-    Messages.admin_onboardingRegistrationTitle = "Options";
-    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_appsTitle = "Instance applications";
+    Messages.admin_appsHint = "Choose which apps to enable on your instance";
+    Messages.admin_onboardingOptionsTitle = "Instance options";
+    Messages.admin_onboardingOptionsHint = "Please select the apropriate option for your instance. These settings can be changed later in the admin panel.";
     Messages.admin_onboardingNamePlaceholder = 'Instance title';
     Messages.admin_onboardingDescPlaceholder = 'Placeholder description text';
 
@@ -256,7 +254,7 @@ define([
             return content;
         };
 
-        var button = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+        var button = blocks.activeButton('primary', '', Messages.continue, function (done) {
             selections.title = $(titleInput).val() || '';
             selections.description = $(description).val() || '';
             if (dataURL) {
@@ -344,16 +342,16 @@ define([
         const grid = createAppsGrid(appsToDisable);
 
 
-        var save = blocks.activeButton('primary', '', Messages.settings_save, function (done) {
+        var save = blocks.activeButton('primary', '', Messages.continue, function (done) {
             gotoPage(Env, 2);
         });
 
-        var prev = blocks.activeButton('primary', '', Messages.form_backButton, function () {
+        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_onboardingAppsTitle), h('span', Messages.admin_onboardingAppsHint)));
+        $(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]);
@@ -396,13 +394,11 @@ define([
 
         let mfaOption = h('div.cp-optionblock', [
             forceMFA,
-            h('br'),
-            h('span', Messages.admin_onboardingMfa)
+            h('span.cp-option-hint', Messages.admin_forcemfaHint)
         ]);
-        let registrationOption = h('div', [
+        let registrationOption = h('div.cp-optionblock', [
             restrict,
-            h('br'),
-            h('span', Messages.admin_onboardingRegistration)
+            h('span.cp-option-hint', Messages.admin_registrationHint)
         ]);
         const grid = blocks.block([
             mfaOption,
@@ -414,12 +410,12 @@ define([
             saveAndRedirect(Env);
         });
 
-        var prev = blocks.activeButton('primary', '', Messages.form_backButton, function () {
+        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_onboardingRegistrationTitle), h('span', Messages.admin_onboardingRegistrationHint)));
+        $(screenTitle).append(h('div.cp-onboardscreen-maintitle', h('h1.cp-onboardscreen-title', Messages.admin_onboardingOptionsTitle), h('span', Messages.admin_onboardingOptionsHint)));
         $(save).addClass('cp-onboardscreen-save');
         $(prev).addClass('cp-onboardscreen-prev');
         var nav = blocks.nav([prev, save]);

From c7019a07577d66e0ce0dd7c5a8e39adba92c7cc5 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 21 Jun 2024 16:14:23 +0200
Subject: [PATCH 46/50] Update translation keys on install page

---
 customize.dist/messages.js      |  8 ++++++++
 customize.dist/pages/install.js | 16 ++++------------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/customize.dist/messages.js b/customize.dist/messages.js
index 579dcd31e..c80311c55 100755
--- a/customize.dist/messages.js
+++ b/customize.dist/messages.js
@@ -129,6 +129,14 @@ define(req, function(AppConfig, Default, Language) {
         }
     };
 
+Messages.install_token = "Install token";
+Messages.install_header = "Installation"; // XXX
+Messages.install_instance = "Set up your new CryptPad instance"; // XXX
+Messages.install_launch = "Launch";
+Messages.install_notes = `<ul class="cp-notes-list">
+<li>This page will help you create your first administrator account and set up your instance.</li>
+<li>Your password is the secret key that encrypts all of your documents. <span class="red">If you lose it there is no way we can recover your data.</span></li>
+<li>If you are using a shared computer, <span class="red">remember to log out</span> when you are done. Only closing the browser window leaves your account exposed. </li></ul>`;
 
     return Messages;
 
diff --git a/customize.dist/pages/install.js b/customize.dist/pages/install.js
index d6e8a1713..018d221b9 100644
--- a/customize.dist/pages/install.js
+++ b/customize.dist/pages/install.js
@@ -18,8 +18,6 @@ define([
             return;
         }
 
-Msg.install_token = "Install token";
-
         document.title = Msg.install_header;
 
         var frame = function (content) {
@@ -27,8 +25,7 @@ Msg.install_token = "Install token";
                 h('div#cp-main', [
                     //Pages.infopageTopbar(),
                     h('div.container.cp-container', [
-                        //h('div.row.cp-page-title', h('h1', Msg.install_header)),
-                        h('div.row.cp-page-title', h('h1', Msg.register_header)),
+                        h('div.row.cp-page-title', h('h1', Msg.install_header)),
                     ].concat(content)),
                     Pages.infopageFooter(),
                 ]),
@@ -39,17 +36,12 @@ Msg.install_token = "Install token";
             h('div.row.cp-register-det', [
                 h('div#data.hidden.col-md-6', [
                     h('h2', Msg.register_notes_title),
-                    //Pages.setHTML(h('div.cp-register-notes'), Msg.install_notes)
-                    Pages.setHTML(h('div.cp-register-notes'), Msg.register_notes)
+                    Pages.setHTML(h('div.cp-register-notes'), Msg.install_notes)
                 ]),
                 h('div.cp-reg-form.col-md-6', [
                     h('div#userForm.form-group.hidden', [
                         h('div.cp-register-instance', [
-                            Msg._getKey('register_instance', [ Pages.Instance.name ]),
-                            /*h('br'),
-                            h('a', {
-                                href: '/features.html'
-                            }, Msg.register_whyRegister)*/
+                            Msg.install_instance,
                         ]),
                         h('input.form-control#installtoken', {
                             type: 'text',
@@ -75,7 +67,7 @@ Msg.install_token = "Install token";
                         /*h('div.checkbox-container', [
                             UI.createCheckbox('import-recent', Msg.register_importRecent, true)
                         ]),*/
-                        h('button#register', Msg.login_register)
+                        h('button#register', Msg.install_launch)
                     ])
                 ]),
             ])

From aeb8cd34f620723fa9fbf2ddf860d7f28e2d065a Mon Sep 17 00:00:00 2001
From: David Benque <david.benque@xwiki.com>
Date: Fri, 21 Jun 2024 16:42:06 +0100
Subject: [PATCH 47/50] Ajust temporary microcopy

---
 customize.dist/messages.js   | 24 +++++++++++++++++++-----
 www/admin/inner.js           |  6 ------
 www/install/onboardscreen.js | 12 ------------
 3 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/customize.dist/messages.js b/customize.dist/messages.js
index c80311c55..e3581cf0f 100755
--- a/customize.dist/messages.js
+++ b/customize.dist/messages.js
@@ -130,14 +130,28 @@ define(req, function(AppConfig, Default, Language) {
     };
 
 Messages.install_token = "Install token";
-Messages.install_header = "Installation"; // XXX
-Messages.install_instance = "Set up your new CryptPad instance"; // XXX
-Messages.install_launch = "Launch";
+Messages.install_header = "Installation";
+Messages.install_instance = "Create the first admin account, then proceed to customize this instance";
+Messages.install_launch = "Instance setup";
 Messages.install_notes = `<ul class="cp-notes-list">
-<li>This page will help you create your first administrator account and set up your instance.</li>
-<li>Your password is the secret key that encrypts all of your documents. <span class="red">If you lose it there is no way we can recover your data.</span></li>
+<li>Create your first administrator account on this page. Administrators manage instance settings including storage quotas, and have access to moderation tools.</li>
+<li>Your password is the secret key that encrypts all of your documents and administrator privileges on this instance. <span class="red">If you lose it there is no way we can recover your data.</span></li>
 <li>If you are using a shared computer, <span class="red">remember to log out</span> when you are done. Only closing the browser window leaves your account exposed. </li></ul>`;
 
+Messages.admin_appSelection = 'App configuration';
+Messages.admin_appsTitle = "Instance applications";
+Messages.admin_appsHint = "Choose which apps to enable on this instance.";
+Messages.admin_cat_apps = "Applications";
+
+Messages.onboarding_save_error = "Some options could not be saved properly. Please visit the administration panel to check the values.";
+Messages.onboarding_upload = "Select logo";
+Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance';
+Messages.admin_onboardingNameHint = 'Please choose a title, description, accent color and logo (all are optional)';
+Messages.admin_onboardingOptionsTitle = "Instance options";
+Messages.admin_onboardingOptionsHint = "Please select the apropriate option for your instance. These settings can be changed later in the admin panel.";
+Messages.admin_onboardingNamePlaceholder = 'Instance title';
+Messages.admin_onboardingDescPlaceholder = 'Instance description text';
+
     return Messages;
 
 });
diff --git a/www/admin/inner.js b/www/admin/inner.js
index 75a2c4aa4..a00bbf615 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -49,12 +49,6 @@ define([
     Onboarding,
 ) {
 
-    //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";
-
     var APP = window.APP = {};
 
     var Nacl = window.nacl;
diff --git a/www/install/onboardscreen.js b/www/install/onboardscreen.js
index c37941057..6272da418 100644
--- a/www/install/onboardscreen.js
+++ b/www/install/onboardscreen.js
@@ -26,18 +26,6 @@ define([
     nThen
 ) {
 
-    //XXX
-    Messages.onboarding_save_error = "Some options could not be saved properly. Please visit the administration panel to check the values.";
-    Messages.onboarding_upload = "Select logo";
-    Messages.admin_onboardingNameTitle = 'Welcome to your CryptPad instance';
-    Messages.admin_onboardingNameHint = 'Please choose a title and description';
-    Messages.admin_appsTitle = "Instance applications";
-    Messages.admin_appsHint = "Choose which apps to enable on your instance";
-    Messages.admin_onboardingOptionsTitle = "Instance options";
-    Messages.admin_onboardingOptionsHint = "Please select the apropriate option for your instance. These settings can be changed later in the admin panel.";
-    Messages.admin_onboardingNamePlaceholder = 'Instance title';
-    Messages.admin_onboardingDescPlaceholder = 'Placeholder description text';
-
     let pages = [];
     const gotoPage = function (Env, page) {
         if (typeof(page) !== "number" || !page) { page = 0; }

From acfec441e075a040d9b55be31ff3c0b18d86278c Mon Sep 17 00:00:00 2001
From: David Benque <david.benque@xwiki.com>
Date: Fri, 21 Jun 2024 17:08:07 +0100
Subject: [PATCH 48/50] Onbaording layout adjustments

---
 customize.dist/src/less2/include/admin.less |  14 ++-
 www/install/onboarding.less                 | 127 +-------------------
 2 files changed, 16 insertions(+), 125 deletions(-)

diff --git a/customize.dist/src/less2/include/admin.less b/customize.dist/src/less2/include/admin.less
index e30c5b242..13fe5360e 100644
--- a/customize.dist/src/less2/include/admin.less
+++ b/customize.dist/src/less2/include/admin.less
@@ -80,6 +80,18 @@
 
     .cp-admin-customize-options-grid {
         grid-template-columns: 1fr 1fr;
+        .cp-optionblock {
+            padding: 0.5rem;
+            border-radius: @variables_radius;
+            background-color: fade(@cryptpad_text_col, 10%);
+            align-self: start;
+            .cp-checkmark-label {
+                font-weight: bold;
+            }
+            .cp-option-hint {
+                margin-left: 30px;
+                display: inline-block;
+            }
+        }
     }
-
 }
diff --git a/www/install/onboarding.less b/www/install/onboarding.less
index 801fa5978..d0f2c33ac 100644
--- a/www/install/onboarding.less
+++ b/www/install/onboarding.less
@@ -25,6 +25,7 @@
         justify-content: center;
         align-items: center;
         .cp-onboarding-box {
+            width: 850px;
             background-color: @cp_loading-progress-bg;
             border-radius: @variables_radius_L;
             box-shadow: 0px 0px 10px 0px @cp_shadow-color;
@@ -54,12 +55,6 @@
     padding: 30px 110px 20px 110px;
 }
 
-// .cp-onboardscreen-form {
-//     // padding:10px;
-//     // position:relative;
-//     // height: 90%;
-// }
-
 .cp-onboardscreen-screentitle {
     text-align: center;
     font-size: 1rem;
@@ -75,7 +70,7 @@
 .cp-instance-form {
     display: flex;
     flex-direction: row;
-    gap: 2rem;
+    gap: 1rem;
     input, textarea {
         border: 0px transparent !important;
     }
@@ -121,120 +116,4 @@ nav.cp-onboardscreen-nav {
     align-items: flex-end;
     justify-content: space-between;
     margin-top: 1rem;
-}
-
-
-// .cp-onboardscreen-name {
-//     width:70%; 
-//     float:right; 
-//     padding:10px
-// }
-
-// .cp-onboardscreen-desc {
-//     width:67% !important;
-//     float:right !important;
-//     padding:20px !important;
-//     margin-right:10px !important;
-// }
-
-// .cp-onboardscreen-logo {
-//     width:20%; 
-//     height:30%;
-//     float:left;
-//     margin-left:10px;
-// }
-
-
-// .kanban-colors(@kanban-colors; @index) when (@index > 0){
-//         // loop through the @colors
-//         .kanban-colors(@kanban-colors; (@index - 1));
-//         @color: extract(@kanban-colors, @index);
-//         // make a numbered class selector for each color
-//         .cp-kanban-palette-color@{index}{
-//             background-color: @color !important;
-//             &.cp-kanban-palette-board {
-//                 background-color: @color !important;
-//             }
-//             &.kanban-board-inner {
-//                 background-color: fade(@color, 50%) !important;
-//             }
-//         }
-//     }
-
-// .cp-onboardscreen-colorpick {
-//     padding-left:50%
-// }
-
-// .cp-onboardscreen-color {
-//     width:200%;
-//     height:20%;
-//     margin-left: -65%;
-//     margin-bottom: -10%;
-// }
-
-// .cp-onboardscreen-checkmark {
-//     text-align:right !important;
-//     color: white !important;
-// }
-
-// .cp-onboardscreen-nav {
-//     padding-left:90%;
-//     margin-right: -2px !important;
-//     margin-top: 300px;
-//     position:absolute;
-//     width:100%;
-//     display:float;
-// }
-
-// .cp-onboardscreen-prev {
-//     margin-left: 20px;
-//     left: 0;
-//     position: absolute;
-// }
-
-// .cp-onboardscreen-save {
-//     right: 0;
-//     position: absolute;
-//     margin-right: 40px
-// }
-
-// .cp-admin-customize-apps-grid {
-//     padding: 10px;
-//     margin-left: 10px;
-//     width: 105%;
-// }
-
-// .cp-appblock {
-//     width:30%;
-//     float:left !important;
-//     display:block !important;
-//     margin: 2px !important;
-//     background-color: #212121!important;
-//     border-color:white;
-//     height: 60px !important;
-//     padding: 10px;
-// }
-
-
-// .cp-admin-customize-options-grid {
-//     height:40%;
-//     float:center;
-//     margin-left: 20px;
-//     width: 105%;
-//     margin-bottom: -180px;
-
-// }
-
-// .cp-optionblock {
-//     width:40%;
-//     float:left !important;
-//     display:block !important;
-//     margin: 2px !important;
-//     background-color: #212121!important;
-//     border-color:white;
-//     height: 60% !important;
-//     padding: 10px;
-
-
-// }
-
+}
\ No newline at end of file

From ac9eff541a4037df404804571e23a8da2b6765a4 Mon Sep 17 00:00:00 2001
From: David Benque <david.benque@xwiki.com>
Date: Fri, 21 Jun 2024 17:33:41 +0100
Subject: [PATCH 49/50] Admin: change app tab icon

---
 www/admin/inner.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/www/admin/inner.js b/www/admin/inner.js
index a00bbf615..574cbb800 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -94,7 +94,7 @@ define([
                 ]
             },
             'apps': { // Msg.admin_cat_apps
-                icon: 'fa fa-cog',
+                icon: 'fa  fa-wrench',
                 content: [
                     'apps',
                 ]

From 26514afa76a1ec3db21515bdeb2f9ee160bc1b24 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 21 Jun 2024 18:38:42 +0200
Subject: [PATCH 50/50] Add keyboard shortcuts to kanban palette

---
 www/common/common-ui-elements.js | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 014c5ba23..554c00eb0 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -4294,8 +4294,10 @@ define([
         let container = h('div.cp-palette-container');
         let $container = $(container);
 
-        palette.forEach(function (color) {
-            var $color = $(h('span.cp-palette-color.fa'));
+        var all = [];
+        palette.forEach(function (color, i) {
+            var $color = $(h('button.cp-palette-color.fa'));
+            all.push($color);
             $color.addClass('cp-palette-'+(color || 'nocolor'));
             $color.click(function () {
                 if (offline) { return; }
@@ -4305,6 +4307,32 @@ define([
                 $color.addClass('fa-check');
                 onSelect(color, $color);
             }).appendTo($container);
+            $color.keydown(e => {
+                if (e.which === 37) {
+                    e.preventDefault();
+                    if (i === 0) {
+                        all[all.length - 1].focus();
+                    } else {
+                        all[i - 1].focus();
+                    }
+                }
+                if (e.which === 39) {
+                    e.preventDefault();
+                    if (i === (all.length - 1)) {
+                        all[0].focus();
+                    } else {
+                        all[i + 1].focus();
+                    }
+                }
+                if (e.which === 9) {
+                    if (e.shiftKey) {
+                        all[0].focus();
+                        return;
+                    }
+                    all[all.length - 1].focus();
+                }
+
+            });
         });
 
         container.disable = state => {