layout etc

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 {
+.cp-admin-customize-apps-grid {
-    // overflow: hidden;
+    padding: 10px;
-    // text-overflow: ellipsis;
+    margin-left: 10px;
-    // .leftside-menu-category_main();
+    width: 105%;
-    // // margin: 0;
+}
-    // display: flex;
+
-    // height: 70px !important;
+.cp-appblock {
-    // align-items: center;
+    width:30%;
-    // cursor: pointer;
+    float:left !important;
-    // margin: 5px;
+    display:block !important;
-    // margin-left: -5px;
+    margin: 2px !important;
-    // padding-left: 5px;
+    height: 60px !important;
-    // .fa, .cptools {
+    padding: 10px;
-    //     display: inline-block;
+}
-    //     min-width: 0;
+
-    //     width: 20px;
+.active-app {
-    //     margin-right: 0px;
+    background-color: #323232!important;
-    //     z-index: 99;
+    max-width:30%;
-    // }
+}
-    // .cp-app-drive-element {
+
-    //     flex: 1;
+.inactive-app {
-    //     min-width: 0;
+    background-color: #424242!important;
-    //     overflow: hidden;
+    max-width:30%;
-    //     text-overflow: ellipsis;
+}
-    // }
+
+.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;
 }
 
 

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) {
+        function select(app, appBlock) {
-				if (availableApps.indexOf(app) === -1) {
+            if (availableApps.indexOf(app) === -1) {
-					availableApps.push(app);
+                availableApps.push(app);
-					$(`#${app}-block`).attr('class', 'active-app') 
+                var checkMark = h('div.cp-onboardscreen-checkmark');
-				} else {
+                $(checkMark).addClass('fa-check');
-					availableApps.splice(availableApps.indexOf(app), 1)
+                appBlock.append(checkMark);
-					$(`#${app}-block`).attr('class', 'inactive-app')
+                $(`#${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 => { 
+        allApps.forEach(app => { 
-                let appBlock = h('div', {class: 'inactive-app', id: `${app}-block`}, app)
+            let appBlock = h('div.cp-appblock.inactive-app', {id: `${app.toString()}-block`}, app.charAt(0).toUpperCase() + app.slice(1))
-                $(appBlock).addClass('cp-app-drive-element-grid')
+            $(grid).append(appBlock);
-                $(grid).append(appBlock);
+            $(appBlock).on('click', () => select(app, $(appBlock)));
-                $(appBlock).on('click', () => select(app))
+        }); 
-            }); 
 
             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){

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);

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();

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 @@
 //         }
 //     }
 
-
+.cp-onboardscreen-colorpick {
-.configscreen {
+    padding-left:50%
-    width: 70%; 
-    height: 75%; 
-    background-color: #424242 !important;
 }
 
-.cp-onboardscreen-name {
+.cp-onboardscreen-color {
-    width:70%; 
+    width:200%;
-    float:right; 
+    height:20%;
-    padding:10px
+    margin-left: -65%;
-}
+    margin-bottom: -10%;
-
-.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 {
@@ -132,50 +128,68 @@
     color: white !important;
 }
 
-.cp-onboardscreen-save {
+.cp-onboardscreen-nav {
+    padding-left:90%;
     margin-right: -2px !important;
-    margin-top: 5%;
+    margin-top: 300px;
-    right:0 !important;
+    position:absolute;
-    bottom:0 !important;
+    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;
+    margin-left: 20px;
-    color: #fff;
+    width: 105%;
+    margin-bottom: -180px;
+
 }
 
-.cp-onboardscreen-maintitle {
+.cp-optionblock {
-    float:center;
+    width:40%;
-    padding:10px;  
+    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% */
-}

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 = {};
+    var OnboardScreen = {};
-    const blocks = Sidebar.blocks;
+    // 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', {}, function (e, response) {
-                sendAdminRpc('REMOVE_LOGO', {dataURL}, 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({
+        const blocks = Sidebar.blocks('install');
-            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 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');
+                $(`#${app}-block`).addClass('inactive-app') 
-                appBlock.remove('.cp-onboardscreen-checkmark');
+                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))
+            let appBlock = h('div.cp-appblock.inactive-app', {id: `${app.toString()}-block`}, app.charAt(0).toUpperCase() + app.slice(1))
-            $(appBlock).addClass('cp-app-drive-element-grid')
-            $(appBlock).addClass('cp-app-drive-element-row')
-
             $(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]);
+        $(save).addClass('cp-onboardscreen-save');
-        $(nav).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;
 
 });
 

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();