Base for Drive in sandboxed iframe

www/common/sframe-common-interface.js

@@ -1,12 +1,14 @@
 define([
     'jquery',
+    '/api/config',
     '/common/cryptpad-common.js',
+    '/common/common-util.js',
     '/common/media-tag.js',
     '/common/tippy.min.js',
     '/customize/application_config.js',
 
     'css!/common/tippy.css',
-], function ($, Cryptpad, MediaTag, Tippy, AppConfig) {
+], function ($, Config, Cryptpad, Util, MediaTag, Tippy, AppConfig) {
     var UI = {};
     var Messages = Cryptpad.Messages;
 
@@ -292,6 +294,103 @@ define([
         }
     };
 
+    /*  Create a usage bar which keeps track of how much storage space is used
+        by your CryptDrive. The getPinnedUsage RPC is one of the heavier calls,
+        so we throttle its usage. Clients will not update more than once per
+        LIMIT_REFRESH_RATE. It will be update at least once every three such intervals
+        If changes are made to your drive in the interim, they will trigger an
+        update.
+    */
+    var LIMIT_REFRESH_RATE = 30000; // milliseconds
+    UI.createUsageBar = function (common, cb) {
+        if (!common.isLoggedIn()) { return cb("NOT_LOGGED_IN"); }
+        // getPinnedUsage updates common.account.usage, and other values
+        // so we can just use those and only check for errors
+        var $container = $('<span>', {'class':'limit-container'});
+        var todo;
+        var updateUsage = Cryptpad.notAgainForAnother(function () {
+            common.getPinUsage(todo);
+        }, LIMIT_REFRESH_RATE);
+
+        todo = function (err, data) {
+            if (err) { return void console.error(err); }
+
+            var usage = data.usage;
+            var limit = data.limit;
+            var plan = data.plan;
+            $container.html('');
+            var unit = Util.magnitudeOfBytes(limit);
+
+            var usage = unit === 'GB'? Util.bytesToGigabytes(usage):
+                Util.bytesToMegabytes(usage);
+            var limit = unit === 'GB'? Util.bytesToGigabytes(limit):
+                Util.bytesToMegabytes(limit);
+
+            var $limit = $('<span>', {'class': 'cryptpad-limit-bar'}).appendTo($container);
+            var quota = usage/limit;
+            var $usage = $('<span>', {'class': 'usage'}).css('width', quota*100+'%');
+
+            var makeDonateButton = function () {
+                $('<a>', {
+                    'class': 'upgrade btn btn-success',
+                    href: Cryptpad.donateURL,
+                    rel: "noreferrer noopener",
+                    target: "_blank",
+                }).text(Messages.supportCryptpad).appendTo($container);
+            };
+
+            var makeUpgradeButton = function () {
+                $('<a>', {
+                    'class': 'upgrade btn btn-success',
+                    href: Cryptpad.upgradeURL,
+                    rel: "noreferrer noopener",
+                    target: "_blank",
+                }).text(Messages.upgradeAccount).appendTo($container);
+            };
+
+            if (!Config.removeDonateButton) {
+                if (!common.isLoggedIn() || !Config.allowSubscriptions) {
+                    // user is not logged in, or subscriptions are disallowed
+                    makeDonateButton();
+                } else if (!plan) {
+                    // user is logged in and subscriptions are allowed
+                    // and they don't have one. show upgrades
+                    makeUpgradeButton();
+                } else {
+                    // they have a plan. show nothing
+                }
+            }
+
+            var prettyUsage;
+            var prettyLimit;
+
+            if (unit === 'GB') {
+                prettyUsage = Messages._getKey('formattedGB', [usage]);
+                prettyLimit = Messages._getKey('formattedGB', [limit]);
+            } else {
+                prettyUsage = Messages._getKey('formattedMB', [usage]);
+                prettyLimit = Messages._getKey('formattedMB', [limit]);
+            }
+
+            if (quota < 0.8) { $usage.addClass('normal'); }
+            else if (quota < 1) { $usage.addClass('warning'); }
+            else { $usage.addClass('above'); }
+            var $text = $('<span>', {'class': 'usageText'});
+            $text.text(usage + ' / ' + prettyLimit);
+            $limit.append($usage).append($text);
+        };
+
+        setInterval(function () {
+            updateUsage();
+        }, LIMIT_REFRESH_RATE * 3);
+
+        updateUsage();
+        /*getProxy().on('change', ['drive'], function () {
+            updateUsage();
+        }); TODO*/
+        cb(null, $container);
+    };
+
     UI.createUserAdminMenu = function (Common, config) {
         var metadataMgr = Common.getMetadataMgr();