Merge branch 'staging' of github.com:xwiki-labs/cryptpad into staging

customize.dist/src/build.js

@@ -60,7 +60,10 @@ var fragments = {};
 });
 
 // build static pages
-['../www/settings/index'].forEach(function (page) {
+[
+    '../www/settings/index',
+    '../www/user/index'
+].forEach(function (page) {
     var source = swap(template, {
        topbar: fragments.topbar,
        fork: fragments.fork,

customize.dist/translations/messages.fr.js

@@ -52,6 +52,8 @@ define(function () {
 
     out.language = "Langue";
 
+    out.comingSoon = "Bientôt disponible...";
+
     out.upgrade = "Améliorer";
     out.upgradeTitle = "Améliorer votre compte pour augmenter la limite de stockage";
     out.MB = "Mo";
@@ -95,6 +97,8 @@ define(function () {
     out.templateSaved = "Modèle enregistré !";
     out.selectTemplate = "Sélectionner un modèle ou appuyer sur Échap";
 
+    out.previewButtonTitle = "Afficher ou cacher la prévisualisation de Markdown";
+
     out.presentButtonTitle = "Entrer en mode présentation";
     out.presentSuccess = 'Appuyer sur Échap pour quitter le mode présentation';
 

customize.dist/translations/messages.js

@@ -54,6 +54,8 @@ define(function () {
 
     out.language = "Language";
 
+    out.comingSoon = "Coming soon...";
+
     out.upgrade = "Upgrade";
     out.upgradeTitle = "Upgrade your account to increase the storage limit";
     out.MB = "MB";
@@ -97,6 +99,8 @@ define(function () {
     out.templateSaved = "Template saved!";
     out.selectTemplate = "Select a template or press escape";
 
+    out.previewButtonTitle = "Display or hide the Markdown preview mode";
+
     out.presentButtonTitle = "Enter presentation mode";
     out.presentSuccess = 'Hit ESC to exit presentation mode';
 

www/code/inner.html

@@ -55,6 +55,11 @@
             max-width: 80%;
             resize: horizontal;
         }
+        .CodeMirror.fullPage {
+            min-width: 100%;
+            max-width: 100%;
+            resize: none;
+        }
         .CodeMirror-focused .cm-matchhighlight {
             background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
             background-position: bottom;

www/code/main.js

@@ -13,14 +13,14 @@ define([
              Cryptget, DiffMd) {
     var Messages = Cryptpad.Messages;
 
-    var module = window.APP = {
+    var APP = window.APP = {
         Cryptpad: Cryptpad,
     };
 
     $(function () {
         Cryptpad.addLoadingScreen();
 
-        var ifrw = module.ifrw = $('#pad-iframe')[0].contentWindow;
+        var ifrw = APP.ifrw = $('#pad-iframe')[0].contentWindow;
         var stringify = function (obj) {
             return JSONSortify(obj);
         };
@@ -28,6 +28,7 @@ define([
         var toolbar;
         var editor;
         var $iframe = $('#pad-iframe').contents();
+        var $previewContainer = $iframe.find('#previewContainer');
         var $preview = $iframe.find('#preview');
         $preview.click(function (e) {
             if (!e.target) { return; }
@@ -58,7 +59,7 @@ define([
 
             var isHistoryMode = false;
 
-            var setEditable = module.setEditable = function (bool) {
+            var setEditable = APP.setEditable = function (bool) {
                 if (readOnly && bool) { return; }
                 editor.setOption('readOnly', !bool);
             };
@@ -121,21 +122,24 @@ define([
                 var textValue = canonicalize(CodeMirror.$textarea.val());
                 var shjson = stringifyInner(textValue);
 
-                module.patchText(shjson);
+                APP.patchText(shjson);
 
-                if (module.realtime.getUserDoc() !== shjson) {
+                if (APP.realtime.getUserDoc() !== shjson) {
                     console.error("realtime.getUserDoc() !== shjson");
                 }
             };
 
             var onModeChanged = function (mode) {
+                var $codeMirror = $iframe.find('.CodeMirror');
                 if (mode === "markdown") {
                     APP.$previewButton.show();
-                    $preview.show();
+                    $previewContainer.show();
+                    $codeMirror.removeClass('fullPage');
                     return;
                 }
                 APP.$previewButton.hide();
-                $preview.hide();
+                $previewContainer.hide();
+                $codeMirror.addClass('fullPage');
             };
 
             config.onInit = function (info) {
@@ -161,7 +165,7 @@ define([
                     network: info.network,
                     $container: $bar
                 };
-                toolbar = module.toolbar = Toolbar.create(configTb);
+                toolbar = APP.toolbar = Toolbar.create(configTb);
 
                 Title.setToolbar(toolbar);
                 CodeMirror.init(config.onLocal, Title, toolbar);
@@ -219,17 +223,25 @@ define([
 
                 var $previewButton = APP.$previewButton = Cryptpad.createButton(null, true);
                 $previewButton.removeClass('fa-question').addClass('fa-eye');
-                $previewButton.attr('title', 'TODO Preview'); //TODO
+                $previewButton.attr('title', Messages.previewButtonTitle);
                 $previewButton.click(function () {
+                    var $codeMirror = $iframe.find('.CodeMirror');
                     if (CodeMirror.highlightMode !== 'markdown') {
-                        return void $preview.hide();
+                        $previewContainer.show();
+                    }
+                    $previewContainer.toggle();
+                    if ($previewContainer.is(':visible')) {
+                        $codeMirror.removeClass('fullPage');
+                    } else {
+                        $codeMirror.addClass('fullPage');
                     }
-                    $preview.toggle();
                 });
                 $rightside.append($previewButton);
 
                 if (!readOnly) {
-                    CodeMirror.configureLanguage(CodeMirror.configureTheme, onModeChanged);
+                    CodeMirror.configureTheme(function () {
+                        CodeMirror.configureLanguage(null, onModeChanged);
+                    });
                 }
                 else {
                     CodeMirror.configureTheme();
@@ -240,15 +252,15 @@ define([
             };
 
             config.onReady = function (info) {
-                if (module.realtime !== info.realtime) {
+                if (APP.realtime !== info.realtime) {
-                    var realtime = module.realtime = info.realtime;
+                    var realtime = APP.realtime = info.realtime;
-                    module.patchText = TextPatcher.create({
+                    APP.patchText = TextPatcher.create({
                         realtime: realtime,
                         //logging: true
                     });
                 }
 
-                var userDoc = module.realtime.getUserDoc();
+                var userDoc = APP.realtime.getUserDoc();
 
                 var isNew = false;
                 if (userDoc === "" || userDoc === "{}") { isNew = true; }
@@ -301,7 +313,7 @@ define([
                 if (isHistoryMode) { return; }
 
                 var oldDoc = canonicalize(CodeMirror.$textarea.val());
-                var shjson = module.realtime.getUserDoc();
+                var shjson = APP.realtime.getUserDoc();
 
                 // Update the user list (metadata) from the hyperjson
                 Metadata.update(shjson);
@@ -312,7 +324,7 @@ define([
                 DiffMd.apply(DiffMd.render(remoteDoc), $preview);
 
                 var highlightMode = hjson.highlightMode;
-                if (highlightMode && highlightMode !== module.highlightMode) {
+                if (highlightMode && highlightMode !== APP.highlightMode) {
                     CodeMirror.setMode(highlightMode, onModeChanged);
                 }
 
@@ -324,7 +336,7 @@ define([
                     if (shjson2 !== shjson) {
                         console.error("shjson2 !== shjson");
                         TextPatcher.log(shjson, TextPatcher.diff(shjson, shjson2));
-                        module.patchText(shjson2);
+                        APP.patchText(shjson2);
                     }
                 }
                 if (oldDoc !== remoteDoc) { Cryptpad.notify(); }
@@ -351,7 +363,7 @@ define([
 
             config.onError = onConnectError;
 
-            module.realtime = Realtime.start(config);
+            APP.realtime = Realtime.start(config);
 
             editor.on('change', onLocal);
 

www/common/common-codemirror.js

@@ -158,10 +158,10 @@ define([
             });
 
             if ($rightside) { $rightside.append($block); }
-            cb();
+            if (cb) { cb(); }
         };
 
-        exp.configureTheme = function () {
+        exp.configureTheme = function (cb) {
             /*  Remember the user's last choice of theme using localStorage */
             var themeKey = 'CRYPTPAD_CODE_THEME';
             var lastTheme = localStorage.getItem(themeKey) || 'default';
@@ -195,6 +195,7 @@ define([
             });
 
             if ($rightside) { $rightside.append($block); }
+            if (cb) { cb(); }
         };
 
         exp.exportText = function () {

www/common/diffMarked.js

@@ -6,7 +6,7 @@ define([
     var DiffMd = {};
 
     var DiffDOM = window.diffDOM;
-    var renderer = DiffMd.renderer = new Marked.Renderer();
+    var renderer = new Marked.Renderer();
 
     Marked.setOptions({
         renderer: renderer
@@ -16,6 +16,24 @@ define([
         return Marked(md);
     };
 
+    // Tasks list
+    var checkedTaskItemPtn = /^\s*\[x\]\s*/;
+    var uncheckedTaskItemPtn = /^\s*\[ \]\s*/;
+    renderer.listitem = function (text) {
+        var isCheckedTaskItem = checkedTaskItemPtn.test(text);
+        var isUncheckedTaskItem = uncheckedTaskItemPtn.test(text);
+        if (isCheckedTaskItem) {
+            text = text.replace(checkedTaskItemPtn,
+                '<i class="fa fa-check-square" aria-hidden="true"></i>&nbsp;') + '\n';
+        }
+        if (isUncheckedTaskItem) {
+            text = text.replace(uncheckedTaskItemPtn,
+                '<i class="fa fa-square-o" aria-hidden="true"></i>&nbsp;') + '\n';
+        }
+        var cls = (isCheckedTaskItem || isUncheckedTaskItem) ? ' class="todo-list-item"' : '';
+        return '<li'+ cls + '>' + text + '</li>\n';
+    };
+
     var forbiddenTags = [
         'SCRIPT',
         'IFRAME',

www/slide/slide.js

@@ -2,23 +2,6 @@ define([
     'jquery',
     '/common/diffMarked.js',
 ],function ($, DiffMd) {
-    // Tasks list
-    var checkedTaskItemPtn = /^\s*\[x\]\s*/;
-    var uncheckedTaskItemPtn = /^\s*\[ \]\s*/;
-    DiffMd.renderer.listitem = function (text) {
-        var isCheckedTaskItem = checkedTaskItemPtn.test(text);
-        var isUncheckedTaskItem = uncheckedTaskItemPtn.test(text);
-        if (isCheckedTaskItem) {
-            text = text.replace(checkedTaskItemPtn,
-                '<i class="fa fa-check-square" aria-hidden="true"></i>&nbsp;') + '\n';
-        }
-        if (isUncheckedTaskItem) {
-            text = text.replace(uncheckedTaskItemPtn,
-                '<i class="fa fa-square-o" aria-hidden="true"></i>&nbsp;') + '\n';
-        }
-        var cls = (isCheckedTaskItem || isUncheckedTaskItem) ? ' class="todo-list-item"' : '';
-        return '<li'+ cls + '>' + text + '</li>\n';
-    };
 
     var Slide = {
         index: 0,

www/user/index.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html class="cp">
+<!-- If this file is not called customize.dist/src/template.html, it is generated -->
+<head>
+    <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" type="text/css" href="/customize/main.css" />
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
+    <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
+    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
+        <link rel="stylesheet" type="text/css" href="main.css" />
+    <script data-bootload="main.js" data-main="/common/boot.js" src="/bower_components/requirejs/require.js"></script>
+
+</head>
+<body class="html">
+    <div id="cryptpadTopBar">
+    <span>
+        <a class="gotoMain" href="/">
+            <img src="/customize/cryptofist_mini.png" class="cryptpad-logo" alt="" /> CryptPad
+        </a>
+    </span>
+
+    <!--<span class="slogan" data-localization="main_slogan"></span>-->
+
+    <span id="user-menu" class="right dropdown-bar"></span>
+    <span id="language-selector" class="right dropdown-bar"></span>
+    <span class="link right">
+        <a href="/about.html" data-localization="about">About</a>
+    </span>
+    <span class="link right">
+        <a href="/privacy.html" data-localization="privacy">Privacy</a>
+    </span>
+    <span class="link right">
+        <a href="/terms.html" data-localization="terms">ToS</a>
+    </span>
+    <span class="link right">
+        <a href="/contact.html" data-localization="contact">Contact</a>
+    </span>
+    <span class="link right">
+        <a href="https://blog.cryptpad.fr/" data-localization="blog">Blog</a>
+    </span>
+</div>
+
+
+    <noscript>
+    <div id="noscriptContainer">
+        <div class="mainOverlay"></div>
+        <div id="noscript">
+          <p>
+            <strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.
+          </p>
+          <hr>
+          <p>
+            <strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.
+          </p>
+        </div>
+    </div>
+</noscript>
+
+
+    <div id="mainBlock" class="hidden">
+        <div id="container"></div>
+
+    </div>
+
+        <footer>
+        <div class="container">
+            <div class="row">
+                    <div class="col">
+                        <ul class="list-unstyled">
+                            <li class="title">CryptPad</li>
+                            <li><a href="/about.html" data-localization="about"></a></li>
+                            <li><a href="/terms.html" data-localization="terms"></a></li>
+                            <li><a href="/privacy.html" data-localization="privacy"></a></li>
+                        </ul>
+                    </div>
+                    <div class="col">
+                        <ul class="list-unstyled">
+                            <li class="title" data-localization="footer_applications"><li>
+                            <li><a href="/pad/" data-localization="main_richText"></a></li>
+                            <li><a href="/code/" data-localization="main_code"></a></li>
+                            <li><a href="/slide/" data-localization="main_slide"></a></li>
+                            <li><a href="/poll/" data-localization="main_poll"></a></li>
+                            <li><a href="/drive/" data-localization="main_drive"></a></li>
+                        </ul>
+                    </div>
+                    <div class="col">
+                        <ul class="list-unstyled">
+                            <li class="title" data-localization="footer_aboutUs"><li>
+                            <li><a href="https://blog.cryptpad.fr" target="_blank" data-localization="blog" rel="noopener noreferrer">Blog</a></li>
+                            <li><a href="https://labs.xwiki.com" target="_blank" rel="noopener noreferrer">XWiki Labs</a></li>
+                            <li><a href="http://www.xwiki.com" target="_blank" rel="noopener noreferrer">XWiki SAS</a></li>
+                            <li><a href="https://www.open-paas.org/" target="_blank" rel="noopener noreferrer">OpenPaaS</a></li>
+                        </ul>
+                    </div>
+                    <div class="col">
+                        <ul class="list-unstyled">
+                            <li class="title" data-localization="footer_contact"><li>
+                            <li><a href="https://riot.im/app/#/room/#cryptpad:matrix.org" target="_blank" rel="noopener noreferrer">Chat</a></li>
+                            <li><a href="https://twitter.com/cryptpad" target="_blank" rel="noopener noreferrer">Twitter</a></li>
+                            <li><a href="https://github.com/xwiki-labs/cryptpad" target="_blank" rel="noopener noreferrer">GitHub</a></li>
+                            <li><a href="/contact.html">Email</a></li>
+                        </ul>
+                    </div>
+            </div>
+        </div>
+            <div class="version-footer">CryptPad v1.7.0 (Hodag)</div>
+    </footer>
+
+</body>
+</html>

www/user/main.css

@@ -0,0 +1,14 @@
+.cp #mainBlock {
+  z-index: 1;
+  width: 1000px;
+  max-width: 90%;
+  margin: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cp #mainBlock #container {
+    text-align: center;
+    font-size: 25px;
+}
+

www/user/main.js

@@ -0,0 +1,63 @@
+define([
+    'jquery',
+    '/common/cryptpad-common.js',
+], function ($, Cryptpad) {
+
+    var APP = window.APP = {
+        Cryptpad: Cryptpad,
+        _onRefresh: []
+    };
+
+    var Messages = Cryptpad.Messages;
+
+    var comingSoon = function () {
+        var $div = $('<div>', { 'class': 'coming-soon' })
+            .text(Messages.comingSoon)
+            .append('<br>');
+            console.log($div);
+        return $div;
+    };
+
+    var andThen = function () {
+        console.log(APP.$container);
+        APP.$container.append(comingSoon());
+    };
+
+    $(function () {
+        var $main = $('#mainBlock');
+        // Language selector
+        var $sel = $('#language-selector');
+        Cryptpad.createLanguageSelector(undefined, $sel);
+        $sel.find('button').addClass('btn').addClass('btn-secondary');
+        $sel.show();
+
+        // User admin menu
+        var $userMenu = $('#user-menu');
+        var userMenuCfg = {
+            $initBlock: $userMenu
+        };
+        var $userAdmin = Cryptpad.createUserAdminMenu(userMenuCfg);
+        $userAdmin.find('button').addClass('btn').addClass('btn-secondary');
+
+        $(window).click(function () {
+            $('.cryptpad-dropdown').hide();
+        });
+
+        // main block is hidden in case javascript is disabled
+        $main.removeClass('hidden');
+
+        APP.$container = $('#container');
+
+        Cryptpad.ready(function () {
+            //if (!Cryptpad.getUserHash()) { return redirectToMain(); }
+
+            //var storeObj = Cryptpad.getStore().getProxy && Cryptpad.getStore().getProxy().proxy
+            //               ? Cryptpad.getStore().getProxy() : undefined;
+
+            //andThen(storeObj);
+            andThen();
+            Cryptpad.reportAppUsage();
+        });
+    });
+
+});