From 1b1ef208703a63316c7d989577db1b6921076bba Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 27 Mar 2019 17:52:08 +0100
Subject: [PATCH] Add admin folder

---
 www/admin/app-admin.less |  16 +++
 www/admin/index.html     |  38 ++++++
 www/admin/inner.html     |  18 +++
 www/admin/inner.js       | 260 +++++++++++++++++++++++++++++++++++++++
 www/admin/main.js        |  64 ++++++++++
 5 files changed, 396 insertions(+)
 create mode 100644 www/admin/app-admin.less
 create mode 100644 www/admin/index.html
 create mode 100644 www/admin/inner.html
 create mode 100644 www/admin/inner.js
 create mode 100644 www/admin/main.js
diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less
new file mode 100644
index 000000000..c3b8a31de
--- /dev/null
+++ b/www/admin/app-admin.less
@@ -0,0 +1,16 @@
+@import (reference) '../../customize/src/less2/include/framework.less';
+@import (reference) '../../customize/src/less2/include/sidebar-layout.less';
+
+&.cp-app-admin {
+
+    .framework_min_main(
+        @bg-color: @colortheme_admin-bg,
+        @warn-color: @colortheme_admin-warn,
+        @color: @colortheme_admin-color
+    );
+    .sidebar-layout_main();
+
+    display: flex;
+    flex-flow: column;
+}
+
diff --git a/www/admin/index.html b/www/admin/index.html
new file mode 100644
index 000000000..e3f7eacc4
--- /dev/null
+++ b/www/admin/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CryptPad</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="referrer" content="no-referrer" />
+    <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        html, body {
+            margin: 0px;
+            padding: 0px;
+        }
+        #sbox-iframe {
+            position:fixed;
+            top:0px;
+            left:0px;
+            bottom:0px;
+            right:0px;
+            width:100%;
+            height:100%;
+            border:none;
+            margin:0;
+            padding:0;
+            overflow:hidden;
+        }
+        #sbox-filePicker-iframe {
+            position: fixed;
+            top:0; left:0;
+            bottom:0; right:0;
+            width:100%;
+            height: 100%;
+            border: 0;
+        }
+    </style>
+</head>
+<body>
+<iframe id="sbox-iframe">
diff --git a/www/admin/inner.html b/www/admin/inner.html
new file mode 100644
index 000000000..01bda5fab
--- /dev/null
+++ b/www/admin/inner.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html class="cp-app-noscroll">
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script async data-bootload="/admin/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        .loading-hidden { display: none; }
+    </style>
+</head>
+<body class="cp-app-admin">
+    <div id="cp-toolbar" class="cp-toolbar-container"></div>
+    <div id="cp-sidebarlayout-container"></div>
+    <noscript>
+        <p><strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.</p>
+        <p><strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.</p>
+    </noscript>
+</body>
+
diff --git a/www/admin/inner.js b/www/admin/inner.js
new file mode 100644
index 000000000..932fbaacd
--- /dev/null
+++ b/www/admin/inner.js
@@ -0,0 +1,260 @@
+define([
+    'jquery',
+    '/api/config',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/common/toolbar3.js',
+    '/bower_components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/common/hyperscript.js',
+    '/customize/messages.js',
+    '/common/common-interface.js',
+    '/common/common-util.js',
+
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/admin/app-admin.less',
+], function (
+    $,
+    ApiConfig,
+    Crypto,
+    Toolbar,
+    nThen,
+    SFCommon,
+    h,
+    Messages,
+    UI,
+    Util
+    )
+{
+    var APP = {};
+
+    var common;
+    var sFrameChan;
+
+    var categories = {
+        'general': [
+            'cp-admin-flush-cache',
+            'cp-admin-update-limit'
+        ],
+        'stats': [
+            'cp-admin-active-sessions',
+            'cp-admin-active-pads',
+            'cp-admin-registered',
+            'cp-admin-disk-usage',
+        ]
+    };
+
+    var create = {};
+
+    var makeBlock = function (key, addButton) {
+        // Convert to camlCase for translation keys
+        var safeKey = key.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+
+        var $div = $('<div>', {'class': 'cp-admin-' + key + ' cp-sidebarlayout-element'});
+        $('<label>').text(Messages['admin_'+safeKey+'Title'] || key).appendTo($div);
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .text(Messages['admin_'+safeKey+'Hint'] || 'Coming soon...').appendTo($div);
+        if (addButton) {
+            $('<button>', {
+                'class': 'btn btn-primary'
+            }).text(Messages['admin_'+safeKey+'Button'] || safeKey).appendTo($div);
+        }
+        return $div;
+    };
+    create['update-limit'] = function () {
+        var key = 'update-limit';
+        var $div = makeBlock(key, true);
+        $div.find('button').click(function () {
+            sFrameChan.query('Q_UPDATE_LIMIT', null, function (e, res) {
+                if (e || (res && res.error)) { return void console.error(e || res.error); }
+                UI.alert(Messages.admin_updateLimitDone || 'done');
+            });
+        });
+        return $div;
+    };
+    create['flush-cache'] = function () {
+        var key = 'flush-cache';
+        var $div = makeBlock(key, true);
+        var called = false;
+        $div.find('button').click(function () {
+            if (called) { return; }
+            called = true;
+            sFrameChan.query('Q_ADMIN_RPC', {
+                cmd: 'FLUSH_CACHE',
+            }, function (e, data) {
+                called = false;
+                UI.alert(data ? Messages.admin_flushCacheDone || 'done' : 'error' + e);
+            });
+        });
+        return $div;
+    };
+    create['active-sessions'] = function () {
+        var key = 'active-sessions';
+        var $div = makeBlock(key);
+        sFrameChan.query('Q_ADMIN_RPC', {
+            cmd: 'ACTIVE_SESSIONS',
+        }, function (e, data) {
+            console.log(e, data);
+            var total = data[0];
+            var ips = data[1];
+            $div.append(h('pre', total + ' (' + ips + ')'));
+        });
+        return $div;
+    };
+    create['active-pads'] = function () {
+        var key = 'active-pads';
+        var $div = makeBlock(key);
+        sFrameChan.query('Q_ADMIN_RPC', {
+            cmd: 'ACTIVE_PADS',
+        }, function (e, data) {
+            console.log(e, data);
+            $div.append(h('pre', String(data)));
+        });
+        return $div;
+    };
+    create['registered'] = function () {
+        var key = 'registered';
+        var $div = makeBlock(key);
+        sFrameChan.query('Q_ADMIN_RPC', {
+            cmd: 'REGISTERED_USERS',
+        }, function (e, data) {
+            console.log(e, data);
+            $div.append(h('pre', String(data)));
+        });
+        return $div;
+    };
+    create['disk-usage'] = function () {
+        var key = 'disk-usage';
+        var $div = makeBlock(key, true);
+        var called = false;
+        $div.find('button').click(function () {
+            $div.find('button').hide();
+            if (called) { return; }
+            called = true;
+            sFrameChan.query('Q_ADMIN_RPC', {
+                cmd: 'DISK_USAGE',
+            }, function (e, data) {
+                console.log(e, data);
+                if (e) { return void console.error(e); }
+                var obj = data[0];
+                Object.keys(obj).forEach(function (key) {
+                    var val = obj[key];
+                    var unit = Util.magnitudeOfBytes(val);
+                    if (unit === 'GB') {
+                        obj[key] = Util.bytesToGigabytes(val) + ' GB';
+                    } else if (unit === 'MB') {
+                        obj[key] = Util.bytesToMegabytes(val) + ' MB';
+                    } else {
+                        obj[key] = Util.bytesToKilobytes(val) + ' KB';
+                    }
+                });
+                $div.append(h('ul', Object.keys(obj).map(function (k) {
+                    return h('li', [
+                        h('strong', k === 'total' ? k : '/' + k),
+                        ' : ',
+                        obj[k]
+                    ]);
+                })));
+            });
+        });
+        return $div;
+    };
+
+    var hideCategories = function () {
+        APP.$rightside.find('> div').hide();
+    };
+    var showCategories = function (cat) {
+        hideCategories();
+        cat.forEach(function (c) {
+            APP.$rightside.find('.'+c).show();
+        });
+    };
+    var createLeftside = function () {
+        var $categories = $('<div>', {'class': 'cp-sidebarlayout-categories'})
+                            .appendTo(APP.$leftside);
+        var metadataMgr = common.getMetadataMgr();
+        var privateData = metadataMgr.getPrivateData();
+        var active = privateData.category || 'general';
+        common.setHash(active);
+        Object.keys(categories).forEach(function (key) {
+            var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
+            if (key === 'general') { $category.append($('<span>', {'class': 'fa fa-user-o'})); }
+            if (key === 'stats') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
+
+            if (key === active) {
+                $category.addClass('cp-leftside-active');
+            }
+
+            $category.click(function () {
+                if (!Array.isArray(categories[key]) && categories[key].onClick) {
+                    categories[key].onClick();
+                    return;
+                }
+                active = key;
+                common.setHash(key);
+                $categories.find('.cp-leftside-active').removeClass('cp-leftside-active');
+                $category.addClass('cp-leftside-active');
+                showCategories(categories[key]);
+            });
+
+            $category.append(Messages['admin_cat_'+key] || key);
+        });
+        showCategories(categories[active]);
+    };
+
+    var createToolbar = function () {
+        var displayed = ['useradmin', 'newpad', 'limit', 'pageTitle'];
+        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');
+        APP.$leftside = $('<div>', {id: 'cp-sidebarlayout-leftside'}).appendTo(APP.$container);
+        APP.$rightside = $('<div>', {id: 'cp-sidebarlayout-rightside'}).appendTo(APP.$container);
+        sFrameChan = common.getSframeChannel();
+        sFrameChan.onReady(waitFor());
+    }).nThen(function (/*waitFor*/) {
+        createToolbar();
+        var metadataMgr = common.getMetadataMgr();
+        var privateData = metadataMgr.getPrivateData();
+        common.setTabTitle(Messages.adminPage || 'Administration');
+
+        if (!privateData.edPublic || !ApiConfig.adminKeys || !Array.isArray(ApiConfig.adminKeys)
+            || ApiConfig.adminKeys.indexOf(privateData.edPublic) === -1) {
+            return void UI.errorLoadingScreen(Messages.admin_authError || '403 Forbidden');
+        }
+
+        APP.origin = privateData.origin;
+        APP.readOnly = privateData.readOnly;
+
+        // Content
+        var $rightside = APP.$rightside;
+        var addItem = function (cssClass) {
+            var item = cssClass.slice(9); // remove 'cp-settings-'
+            if (typeof (create[item]) === "function") {
+                $rightside.append(create[item]());
+            }
+        };
+        for (var cat in categories) {
+            if (!Array.isArray(categories[cat])) { continue; }
+            categories[cat].forEach(addItem);
+        }
+
+        createLeftside();
+
+        UI.removeLoadingScreen();
+
+    });
+});
diff --git a/www/admin/main.js b/www/admin/main.js
new file mode 100644
index 000000000..cdfaf115c
--- /dev/null
+++ b/www/admin/main.js
@@ -0,0 +1,64 @@
+// Load #1, load as little as possible because we are in a race to get the loading screen up.
+define([
+    '/bower_components/nthen/index.js',
+    '/api/config',
+    '/common/dom-ready.js',
+    '/common/requireconfig.js',
+    '/common/sframe-common-outer.js',
+], function (nThen, ApiConfig, DomReady, RequireConfig, SFCommonO) {
+    var requireConfig = RequireConfig();
+
+    // Loaded in load #2
+    nThen(function (waitFor) {
+        DomReady.onReady(waitFor());
+    }).nThen(function (waitFor) {
+        var req = {
+            cfg: requireConfig,
+            req: [ '/common/loading.js' ],
+            pfx: window.location.origin
+        };
+        window.rc = requireConfig;
+        window.apiconf = ApiConfig;
+        document.getElementById('sbox-iframe').setAttribute('src',
+            ApiConfig.httpSafeOrigin + '/admin/inner.html?' + requireConfig.urlArgs +
+                '#' + encodeURIComponent(JSON.stringify(req)));
+
+        // This is a cheap trick to avoid loading sframe-channel in parallel with the
+        // loading screen setup.
+        var done = waitFor();
+        var onMsg = function (msg) {
+            var data = JSON.parse(msg.data);
+            if (data.q !== 'READY') { return; }
+            window.removeEventListener('message', onMsg);
+            var _done = done;
+            done = function () { };
+            _done();
+        };
+        window.addEventListener('message', onMsg);
+    }).nThen(function (/*waitFor*/) {
+        var addRpc = function (sframeChan, Cryptpad/*, Utils*/) {
+            // Adding a new avatar from the profile: pin it and store it in the object
+            sframeChan.on('Q_ADMIN_RPC', function (data, cb) {
+                Cryptpad.adminRpc(data, cb);
+            });
+            sframeChan.on('Q_UPDATE_LIMIT', function (data, cb) {
+                Cryptpad.updatePinLimit(function (e) {
+                    cb({error: e});
+                });
+            });
+        };
+        var category;
+        if (window.location.hash) {
+            category = window.location.hash.slice(1);
+            window.location.hash = '';
+        }
+        var addData = function (obj) {
+            if (category) { obj.category = category; }
+        };
+        SFCommonO.start({
+            noRealtime: true,
+            addRpc: addRpc,
+            addData: addData
+        });
+    });
+});
