make 404 page translateable, point to home page or drive

customize.dist/four-oh-four.js

@@ -1,13 +1,33 @@
 define([
+    '/api/config',
     '/common/hyperscript.js',
+    '/common/outer/local-store.js',
+    '/customize/messages.js',
 
     'less!/customize/src/less2/pages/page-404.less',
-], function (h) {
+], function (Config, h, LocalStore, Messages) {
-    var scramble = h('h2#cp-scramble', "We couldn't find the page you were looking for");
+    var urlArgs = Config.requireConf.urlArgs;
-    var title = h('h1#title', "404");
+    var img = h('img#cp-logo', {
+        src: '/customize/cryptpad-new-logo-colors-logoonly.png?' + urlArgs
+    });
+
+    var brand = h('h1#cp-brand', 'CryptPad');
+    var message = h('h2#cp-scramble', Messages.four04_pageNotFound);
+    var title = h('h2#cp-title', "404");
+
+    var loggedIn = LocalStore.isLoggedIn();
+    var link = h('a#cp-link', {
+        href: loggedIn? '/drive/': '/',
+    }, loggedIn? Messages.four04_goToDrive: Messages.four04_goToHome);
+
     var content = h('div#cp-main', [
+        img,
+        brand,
+        //h('h1#cp-brand', 'CryptPad'),
         title,
-        scramble
+        message,
+        //scramble,
+        link,
     ]);
     document.body.appendChild(content);
 
@@ -50,8 +70,10 @@ define([
         };
     };
 
+    makeDecryptor(brand, 90, 4, function () { })();
     makeDecryptor(title, 70, 17, function () { })();
-    makeDecryptor(scramble, 10, 8, function () {
+    makeDecryptor(link, 20, 12, function () {})();
+    makeDecryptor(scramble, 30, 8, function () {
         console.log('done');
     })();
 });

customize.dist/src/less2/pages/page-404.less

@@ -1,16 +1,36 @@
-//@import (once) "../include/infopages.less";
 @import (once) "../include/colortheme.less";
+@import (once) "../include/font.less";
+.font_neuropolitical();
+.font_open-sans();
 
 html, body {
-    margin: 0;
+    margin: 0px;
-    padding: 0;
+    padding: 0px;
     #cp-main {
+
         height: 100vh;
+        margin: 0px;
         width: 100%;
-        padding-top: 20%;
+        padding-top: 5%;
         text-align: center;
-        #cp-scramble {
+        #cp-logo {
-            font-family: monospace !important;
+            display: block;
+            max-width: 15%;
+            margin: auto;
+        }
+        #cp-brand {
+            font-family: neuropolitical;
+            font-size: 40px;
+        }
+        #cp-title {
+            font-size: 30px;
+        }
+        #cp-scramble, #cp-link {
+            font-size: 20px;
+        }
+        #cp-title, #cp-scramble, #cp-link {
+            //font-family: 'Open Sans';
+            font-family: monospace;
         }
     }
 }

customize.dist/translations/messages.js

@@ -688,10 +688,14 @@ define(function () {
     out.tos_logs = "Metadata provided by your browser to the server may be logged for the purpose of maintaining the service.";
     out.tos_3rdparties = "We do not provide individualized data to third parties unless required to by law.";
 
+    out.four04_pageNotFound = "We couldn't find the page you were looking for.";
+    out.four04_goToHome = "Go to the home page.";
+    out.four04_goToDrive = "Go to my CryptDrive.";
+
     // BottomBar.html
 
-    out.bottom_france = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">Made with <img class="bottom-bar-heart" src="/customize/heart.png" alt="love" /> in <img class="bottom-bar-fr" src="/customize/fr.png" alt="France" /></a>';
+    //out.bottom_france = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">Made with <img class="bottom-bar-heart" src="/customize/heart.png" alt="love" /> in <img class="bottom-bar-fr" src="/customize/fr.png" alt="France" /></a>';
-    out.bottom_support = '<a href="http://labs.xwiki.com/" title="XWiki Labs" target="_blank" rel="noopener noreferrer">An <img src="/customize/logo-xwiki2.png" alt="XWiki SAS" class="bottom-bar-xwiki"/> Labs Project </a> with the support of <a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
+    //out.bottom_support = '<a href="http://labs.xwiki.com/" title="XWiki Labs" target="_blank" rel="noopener noreferrer">An <img src="/customize/logo-xwiki2.png" alt="XWiki SAS" class="bottom-bar-xwiki"/> Labs Project </a> with the support of <a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
 
     // Header.html