add upgrade button to all static pages

customize.dist/about.html

@@ -39,6 +39,9 @@
     <span class="link right">
         <a href="https://blog.cryptpad.fr/" data-localization="blog">Blog</a>
     </span>
+    <span class="link right">
+        <button id="upgrade" class="upgrade btn buttonSuccess" style="display: none;"></button>
+    </span>
 </div>
 
 

customize.dist/contact.html

@@ -39,6 +39,9 @@
     <span class="link right">
         <a href="https://blog.cryptpad.fr/" data-localization="blog">Blog</a>
     </span>
+    <span class="link right">
+        <button id="upgrade" class="upgrade btn buttonSuccess" style="display: none;"></button>
+    </span>
 </div>
 
 

customize.dist/index.html

@@ -39,6 +39,9 @@
     <span class="link right">
         <a href="https://blog.cryptpad.fr/" data-localization="blog">Blog</a>
     </span>
+    <span class="link right">
+        <button id="upgrade" class="upgrade btn buttonSuccess" style="display: none;"></button>
+    </span>
 </div>
 
 

customize.dist/main.css

@@ -525,6 +525,22 @@
   margin: 0px 10px;
   line-height: 40px;
 }
+#cryptpadTopBar .right .buttonSuccess {
+  color: #fff;
+  background: #5cb85c;
+  border-color: #5cb85c;
+}
+#cryptpadTopBar .right .buttonSuccess:hover {
+  color: #fff;
+  background: #449d44;
+  border: 1px solid #419641;
+}
+#cryptpadTopBar .right .buttonSuccess span {
+  color: #fff;
+}
+#cryptpadTopBar .right .buttonSuccess .large {
+  margin-left: 5px;
+}
 #cryptpadTopBar .right button .buttonTitle .fa-user {
   margin-right: 5px;
 }

customize.dist/main.js

@@ -2,7 +2,7 @@ define([
     'jquery',
     '/customize/application_config.js',
     '/common/cryptpad-common.js'
-], function ($, Config, Cryptpad) {
+], function ($, Config, Cryptpad, ApiConfig) {
 
     window.APP = {
         Cryptpad: Cryptpad,
@@ -19,6 +19,8 @@ define([
         $sel.find('button').addClass('btn').addClass('btn-secondary');
         $sel.show();
 
+        var $upgrade = $('#upgrade');
+
         // User admin menu
         var $userMenu = $('#user-menu');
         var userMenuCfg = {
@@ -31,7 +33,6 @@ define([
             $('.cryptpad-dropdown').hide();
         });
 
-
         // main block is hidden in case javascript is disabled
         $main.removeClass('hidden');
 
@@ -57,11 +58,17 @@ define([
                 });
             });
 
+            if (!localStorage.plan) {
+                $upgrade.show().text(Messages.upgradeAccount);
+            }
+
+
             $loggedInBlock.removeClass('hidden');
             //return;
         } else {
             $main.find('#userForm').removeClass('hidden');
             $('#name').focus();
+            $upgrade.show().text(Messages.supportCryptpad);
         }
 
         var displayCreateButtons = function () {
@@ -88,8 +95,8 @@ define([
             var $block = Cryptpad.createDropdown(dropdownConfig);
             $block.find('button').addClass('btn').addClass('btn-primary');
             $block.appendTo($parent);
-        };
 
+        };
 
         /* Log in UI */
         var Login;

customize.dist/privacy.html

@@ -39,6 +39,9 @@
     <span class="link right">
         <a href="https://blog.cryptpad.fr/" data-localization="blog">Blog</a>
     </span>
+    <span class="link right">
+        <button id="upgrade" class="upgrade btn buttonSuccess" style="display: none;"></button>
+    </span>
 </div>
 
 

customize.dist/src/fragments/topbar.html

@@ -24,4 +24,7 @@
     <span class="link right">
         <a href="https://blog.cryptpad.fr/" data-localization="blog">Blog</a>
     </span>
+    <span class="link right">
+        <button id="upgrade" class="upgrade btn buttonSuccess" style="display: none;"></button>
+    </span>
 </div>

customize.dist/src/less/topbar.less

@@ -47,6 +47,24 @@
         margin: 0px 10px;
         line-height: 40px;
 
+        .buttonSuccess {
+            // Bootstrap 4 colors
+            color: #fff;
+            background: @toolbar-green;
+            border-color: @toolbar-green;
+            &:hover {
+                color: #fff;
+                background: #449d44;
+                border: 1px solid #419641;
+            }
+            span {
+                color: #fff;
+            }
+            .large {
+                margin-left: 5px;
+            }
+        }
+
         button {
             .buttonTitle {
                 .fa-user {

customize.dist/terms.html

@@ -39,6 +39,9 @@
     <span class="link right">
         <a href="https://blog.cryptpad.fr/" data-localization="blog">Blog</a>
     </span>
+    <span class="link right">
+        <button id="upgrade" class="upgrade btn buttonSuccess" style="display: none;"></button>
+    </span>
 </div>
 
 

www/common/cryptpad-common.js

@@ -217,6 +217,7 @@ define([
             userNameKey,
             userHashKey,
             'loginToken',
+            'plan',
         ].forEach(function (k) {
             sessionStorage.removeItem(k);
             localStorage.removeItem(k);
@@ -1433,7 +1434,7 @@ define([
                         common.getPinLimit(function (e, limit, plan, note) {
                             if (e) { return void console.error(e); }
                             common.account.limit = limit;
-                            common.account.plan = plan;
+                            localStorage.plan = common.account.plan = plan;
                             common.account.note = note;
                             cb();
                         });

www/settings/index.html

@@ -40,6 +40,9 @@
     <span class="link right">
         <a href="https://blog.cryptpad.fr/" data-localization="blog">Blog</a>
     </span>
+    <span class="link right">
+        <button id="upgrade" class="upgrade btn buttonSuccess" style="display: none;"></button>
+    </span>
 </div>
 
 

www/settings/main.js

@@ -14,6 +14,8 @@ define([
         _onRefresh: []
     };
 
+    var $upgrade = $('#upgrade');
+
     var Messages = Cryptpad.Messages;
 
     // Manage changes in the realtime object made from another page
@@ -324,6 +326,15 @@ define([
         APP.$container.append(createUserFeedbackToggle(obj));
         obj.proxy.on('change', [], refresh);
         obj.proxy.on('remove', [], refresh);
+
+
+        if (Cryptpad.isLoggedIn()) {
+            if (!Cryptpad.account.plan) {
+                $upgrade.text(Messages.upgradeAccount).show();
+            }
+        } else {
+            $upgrade.text(Messages.supportCryptpad).show();
+        }
     };
 
     $(function () {

www/user/index.html

@@ -40,6 +40,9 @@
     <span class="link right">
         <a href="https://blog.cryptpad.fr/" data-localization="blog">Blog</a>
     </span>
+    <span class="link right">
+        <button id="upgrade" class="upgrade btn buttonSuccess" style="display: none;"></button>
+    </span>
 </div>