Add the read-only mode for /pad and /code

customize.dist/toolbar.css

@@ -83,3 +83,8 @@
 .cryptpad-spinner {
   float: left;
 }
+.cryptpad-readonly {
+  margin-right: 20px;
+  font-weight: bold;
+  text-transform: uppercase;
+}

customize.dist/translations/messages.fr.js

@@ -20,6 +20,12 @@ define(function () {
     out.synchronizing = 'Synchronisation';
     out.reconnecting = 'Reconnexion...';
     out.lag = 'Latence';
+    out.readonly = 'Lecture seule';
+    out.nobodyIsEditing = "Personne n'édite le document";
+    out.onePersonIsEditing = 'Une personne édite le document';
+    out.peopleAreEditing = '{0} personnes éditent le document';
+    out.oneViewer = '1 lecteur';
+    out.viewers = '{0} lecteurs';
 
     out.importButton = 'IMPORTER';
     out.importButtonTitle = 'Importer un document depuis un fichier local';

customize.dist/translations/messages.js

@@ -20,6 +20,12 @@ define(function () {
     out.synchronizing = 'Synchronizing';
     out.reconnecting = 'Reconnecting...';
     out.lag = 'Lag';
+    out.readonly = 'Read only';
+    out.nobodyIsEditing = 'Nobody is editing';
+    out.onePersonIsEditing = 'One person is editing';
+    out.peopleAreEditing = '{0} people are editing';
+    out.oneViewer = '1 viewer';
+    out.viewers = '{0} viewers';
 
     out.importButton = 'IMPORT';
     out.importButtonTitle = 'Import a document from a local file';

www/code/main.js

@@ -39,6 +39,7 @@ define([
             toolbar;
 
         var secret = Cryptpad.getSecrets();
+        var readOnly = !secret.keys.editKeyStr;
 
         var andThen = function (CMeditor) {
             var CodeMirror = module.CodeMirror = CMeditor;
@@ -106,6 +107,7 @@ define([
             }());
 
             var setEditable = module.setEditable = function (bool) {
+                if (readOnly && bool) { return; }
                 editor.setOption('readOnly', !bool);
             };
 
@@ -132,8 +134,10 @@ define([
                 userName: userName,
                 websocketURL: Config.websocketURL,
                 channel: secret.channel,
-                //cryptKey: key,
-                crypto: Crypto.createEncryptor(secret.key),
+                // our public key
+                validateKey: secret.keys.validateKey || undefined,
+                readOnly: readOnly,
+                crypto: Crypto.createEncryptor(secret.keys),
                 setMyID: setMyID,
                 transformFunction: JsonOT.validate
             };
@@ -274,9 +278,11 @@ define([
                 var config = {
                     userData: userList,
                     changeNameID: Toolbar.constants.changeName,
+                    readOnly: readOnly
                 };
+                if (readOnly) {delete config.changeNameID; }
                 toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
-                createChangeName(Toolbar.constants.changeName, $bar);
+                if (!readOnly) { createChangeName(Toolbar.constants.changeName, $bar); }
 
                 var $rightside = $bar.find('.' + Toolbar.constants.rightside);
 
@@ -443,7 +449,11 @@ define([
                     configureTheme();
                 });
 
-                window.location.hash = Cryptpad.getHashFromKeys(info.channel, secret.key);
+                // set the hash
+                if (!readOnly) {
+                    window.location.hash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
+                }
+                console.log("View Hash : " + Cryptpad.getViewHashFromKeys(info.channel, secret.keys));
                 Cryptpad.getPadTitle(function (err, title) {
                     if (err) {
                         console.log("Unable to get pad title");
@@ -510,7 +520,7 @@ define([
                 }
 
                 // Update the user list (metadata) from the hyperjson
-                //updateUserList(shjson);
+                updateUserList(userDoc);
 
                 editor.setValue(newDoc || Messages.codeInitialState);
 
@@ -531,9 +541,17 @@ define([
                         console.error(err);
                         return;
                     }
+                    // Update the toolbar list:
+                    // Add the current user in the metadata if he has edit rights
+                    if (readOnly) { return; }
+                    myData[myID] = {
+                        name: ""
+                    };
+                    addToUserList(myData);
                     if (typeof(lastName) === 'string' && lastName.length) {
                         setName(lastName);
                     }
+                    onLocal();
                 });
             };
 
@@ -604,17 +622,19 @@ define([
 
                 editor.scrollTo(scroll.left, scroll.top);
 
-                var localDoc = canonicalize($textarea.val());
-                var hjson2 = {
-                  content: localDoc,
-                  metadata: userList,
-                  highlightMode: highlightMode,
-                };
-                var shjson2 = stringify(hjson2);
-                if (shjson2 !== shjson) {
-                    console.error("shjson2 !== shjson");
-                    TextPatcher.log(shjson, TextPatcher.diff(shjson, shjson2));
-                    module.patchText(shjson2);
+                if (!readOnly) {
+                    var localDoc = canonicalize($textarea.val());
+                    var hjson2 = {
+                      content: localDoc,
+                      metadata: userList,
+                      highlightMode: highlightMode,
+                    };
+                    var shjson2 = stringify(hjson2);
+                    if (shjson2 !== shjson) {
+                        console.error("shjson2 !== shjson");
+                        TextPatcher.log(shjson, TextPatcher.diff(shjson, shjson2));
+                        module.patchText(shjson2);
+                    }
                 }
 
                 notify();

www/common/toolbar.js

@@ -141,22 +141,44 @@ define([
         });
     };
 
+    var getViewers = function (n) {
+        if (!n || !parseInt(n) || n === 0) { return ''; }
+        if (n === 1) { return '; + ' + Messages.oneViewer; }
+        return '; + ' + Messages._getKey('viewers', [n]);
+    }
     var updateUserList = function (myUserName, listElement, userList, userData, readOnly) {
         var meIdx = userList.indexOf(myUserName);
         if (meIdx === -1) {
             listElement.textContent = Messages.synchronizing;
             return;
         }
-        console.log(userList);
+        var numberOfUsers = userList.length;
         userList = readOnly === -1 ? userList : arrayIntersect(userList, Object.keys(userData));
-        console.log(userList);
-        if (userList.length === 1) {
-            listElement.innerHTML = Messages.editingAlone;
-        } else if (userList.length === 2) {
-            listElement.innerHTML = Messages.editingWithOneOtherPerson + getOtherUsers(myUserName, userList, userData);
-        } else {
-            listElement.innerHTML = Messages.editingWith + ' ' + (userList.length - 1) + ' ' + Messages.otherPeople + getOtherUsers(myUserName, userList, userData);
+        var innerHTML;
+        var numberOfViewUsers = numberOfUsers - userList.length;
+        if (readOnly === 1) {
+            innerHTML = '<span class="cryptpad-readonly">' + Messages.readonly + '</span>';
+            if (userList.length === 0) {
+                innerHTML += Messages.nobodyIsEditing;
+            } else if (userList.length === 1) {
+                innerHTML += Messages.onePersonIsEditing + getOtherUsers(myUserName, userList, userData);
+            } else {
+                innerHTML += Messages._getKey('peopleAreEditing', [userList.length]) + getOtherUsers(myUserName, userList, userData);
+            }
+            // Remove the current user
+            numberOfViewUsers--;
+        }
+        else {
+            if (userList.length === 1) {
+                innerHTML = Messages.editingAlone;
+            } else if (userList.length === 2) {
+                innerHTML = Messages.editingWithOneOtherPerson + getOtherUsers(myUserName, userList, userData);
+            } else {
+                innerHTML = Messages.editingWith + ' ' + (userList.length - 1) + ' ' + Messages.otherPeople + getOtherUsers(myUserName, userList, userData);
+            }
         }
+        innerHTML += getViewers(numberOfViewUsers);
+        listElement.innerHTML = innerHTML;
     };
 
     var createLagElement = function ($container) {
@@ -197,7 +219,7 @@ define([
         var saveContentID = config.saveContentID || config.exportContentID;
         var loadContentID = config.loadContentID || config.importContentID;
         // readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
-        var readOnly = (typeof config.readOnly !== "undefined") ? (readOnly ? 1 : 0) : -1;
+        var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1;
         var saveElement;
         var loadElement;
 

www/pad/main.js

@@ -327,7 +327,7 @@ define([
                 // the channel we will communicate over
                 channel: secret.channel,
 
-                // our public key. send -1 if view mode
+                // our public key
                 validateKey: secret.keys.validateKey || undefined,
                 readOnly: readOnly,
 
@@ -593,6 +593,9 @@ define([
                 var shjson = info.realtime.getUserDoc();
                 applyHjson(shjson);
 
+                // Update the user list (metadata) from the hyperjson
+                updateUserList(shjson);
+
                 if (Visible.isSupported()) {
                     Visible.onChange(function (yes) {
                         if (yes) { unnotify(); }
@@ -603,6 +606,9 @@ define([
                     console.log("Unlocking editor");
                     setEditable(true);
                     initializing = false;
+                    // Update the toolbar list:
+                    // Add the current user in the metadata if he has edit rights
+                    if (readOnly) { return; }
                     myData[myID] = {
                         name: ""
                     };