Backport changes for the login page from hpbs branch

customize.dist/translations/messages.fr.js

@@ -1,6 +1,8 @@
 define(function () {
     var out = {};
 
+    // translations must set this key for their language to be available in
+    // the language dropdowns that are shown throughout Cryptpad's interface
     out._languageName = "Français";
 
     out.main_title = "Cryptpad: Éditeur collaboratif en temps réel, zero knowledge";
@@ -61,8 +63,6 @@ define(function () {
     out.userButton = 'UTILISATEUR';
     out.userButtonTitle = "Changer votre nom d'utilisateur";
     out.changeNamePrompt = 'Changer votre nom (laisser vide pour rester anonyme) : ';
-    out.user_login = "Connexion";
-    out.user_logout = "Déconnexion";
     out.user_rename = "Changer le nom affiché";
     out.user_displayName = "Nom affiché";
     out.user_accountName = "Nom d'utilisateur";
@@ -121,10 +121,12 @@ define(function () {
     out.recentPadsIframe = 'Vos documents récents';
 
     out.okButton = 'OK (Entrée)';
+
+    out.cancel = "Annuler";
     out.cancelButton = 'Annuler (Echap)';
 
     out.loginText = '<p>Votre nom d\'utilisateur et votre mot de passe sont utilisés pour générer une clé unique qui reste inconnue de notre serveur.</p>\n' +
-                    '<p>Faites attention de ne pas oublier vos identifiants puisqu\'ils seront impossible à récupérer.</p>';
+                    '<p>Faites attention de ne pas oublier vos identifiants puisqu\'ils seront impossible à récupérer.</p>'; //TODO
 
     out.forget = "Oublier";
 
@@ -184,6 +186,7 @@ define(function () {
     out.fm_trashName = "Corbeille";
     out.fm_unsortedName = "Fichiers non triés";
     out.fm_filesDataName = "Tous les fichiers";
+    out.fm_templateName = "Modèles";
     out.fm_newButton = "Nouveau";
     out.fm_newFolder = "Nouveau dossier";
     out.fm_folder = "Dossier";
@@ -237,6 +240,43 @@ define(function () {
     out.fo_unableToRestore = "Impossible de restaurer ce fichier à son emplacement d'origine. Vous pouvez essayer de le déplacer à un nouvel emplacement.";
     out.fo_unavailableName = "Un fichier ou dossier avec le même nom existe déjà au nouvel emplacement. Renommez cet élément avant d'essayer à nouveau.";
 
+    // login
+    out.login_login = "Connexion";
+    out.login_nologin = "Documents récents de ce navigateur";
+    out.login_register = "Inscription";
+    out.logoutButton = "Déconnexion";
+
+    out.login_migrate = "Souhaitez-vous importer les données existantes de votre session anonyme ?";
+
+    out.username_label = "Nom d'utilisateur : ";
+    out.displayname_label = "Nom affiché : ";
+
+    out.login_username = "votre nom d'utilisateur";
+    out.login_password = "votre mot de passe";
+    out.login_confirm = "confirmer votre mot de passe";
+    out.login_remember = "Se souvenir de moi";
+
+    out.login_cancel_prompt = "...ou si vous avez entré le mauvais nom d'utilisateur ou mot de passe, annulez pour essayer à nouveau.";
+
+    out.login_registerSuccess = "Inscription réalisée avec succès. Prenez soin de ne pas oublier votre mot de passe !";
+    out.login_passwordMismatch = "Les deux mots de passe entrés sont différents. Essayez à nouveau.";
+
+    out.login_warning = [
+        '<h1 id="warning">ATTENTION</h1>',
+        '<p>Cryptpad sauve vos données personnelles dans un document temps-réel chiffré, comme pour tous les autres types de documents temps-réel.</p>',
+        '<p>Votre nom d\'utilisateur et votre mot de passe ne sont jamais envoyés au serveur de manière non-chiffré.</p>',
+        '<p>Ainsi, si vous oubliez votre nom d\'utilisateur ou votre mot de passe, il n\'y a absolument rien que nous puissions faire pour retrouver vos informations perdues.</p>',
+        '<p><strong>Prenez soin de ne surtout pas oublier votre nom d\'utilisateur OU votre mot de passe !</strong></p>',
+    ].join('\n');
+
+    out.login_hashing = "Traitement de vos identifiants, cela peut nécessiter quelques instants.";
+
+    out.login_no_user = "Il n'y a aucun utilisateur associé au nom et au mot de passe que vous avez entré.";
+    out.login_confirm_password = "Veuillez taper de nouveau votre mot de passe pour vous inscrire...";
+
+    out.loginText = '<p>Votre nom d\'utilisateur et votre mot d epasse sont utilisés pour générer une clé unique qui reste inconnue de notre serveur.</p>\n' +
+                    '<p>Faîtes attention de ne pas perdre vos identifiants, puisqu\'il est impossible de les récupérer</p>';
+
     // index.html
 
     out.main_p1 = 'CryptPad est l\'éditeur collaboratif en temps réel <strong>zero knowledge</strong>. Le chiffrement est effectué depuis votre navigateur, ce qui protège les données contre le serveur, le cloud, et la NSA. La clé de chiffrement est stockée dans l\'<a href="https://fr.wikipedia.org/wiki/Identificateur_de_fragment">identifieur de fragment</a> de l\'URL qui n\'est jamais envoyée au serveur mais est accessible depuis javascript, de sorte qu\'en partageant l\'URL, vous donnez l\'accès au pad à ceux qui souhaitent participer.';
@@ -253,10 +293,19 @@ define(function () {
     out.table_created = 'Créé le';
     out.table_last = 'Dernier accès';
 
-    out.button_newpad = 'NOUVEAU DOCUMENT TEXTE';
+    out.button_newpad = 'Nouveau document texte';
-    out.button_newcode = 'NOUVELLE PAGE DE CODE';
+    out.button_newcode = 'Nouvelle page de code';
-    out.button_newpoll = 'NOUVEAU SONDAGE';
+    out.button_newpoll = 'Nouveau sondage';
-    out.button_newslide = 'NOUVELLE PRÉSENTATION';
+    out.button_newslide = 'Nouvelle présentation';
+
+    out.form_title = "Tous vos pads, partout où vous allez !";
+    out.form_username = "Nom d'utilisateur";
+    out.form_password = "Mot de passe";
+
+    out.about = "À propos";
+    out.privacy = "Vie privée";
+    out.contact = "Contact";
+    out.terms = "Conditions";
 
     // privacy.html
 

customize.dist/translations/messages.js

@@ -63,8 +63,6 @@ define(function () {
     out.userButton = 'USER';
     out.userButtonTitle = 'Change your username';
     out.changeNamePrompt = 'Change your name (leave empty to be anonymous): ';
-    out.user_login = "Log in";
-    out.user_logout = "Log out";
     out.user_rename = "Change display name";
     out.user_displayName = "Display name";
     out.user_accountName = "Account name";
@@ -124,7 +122,7 @@ define(function () {
 
     out.okButton = 'OK (enter)';
 
-    out.cancel = "cancel";
+    out.cancel = "Cancel";
     out.cancelButton = 'Cancel (esc)';
 
     out.forget = "Forget";
@@ -240,9 +238,10 @@ define(function () {
     out.fo_unavailableName = "A file or a folder with the same name already exist at the new location. Rename the element and try again.";
 
     // login
-    out.login_login = "log in";
+    out.login_login = "Log in";
-    out.login_register = "register";
+    out.login_nologin = "Your browser's recent pads";
-    out.logoutButton = "log out";
+    out.login_register = "Sign up";
+    out.logoutButton = "Log out";
 
     out.login_migrate = "Would you like to migrate existing data from your anonymous session?";
 
@@ -252,7 +251,7 @@ define(function () {
     out.login_username = "your username";
     out.login_password = "your password";
     out.login_confirm = "confirm your password";
-    out.login_remember = "remember me";
+    out.login_remember = "Remember me";
 
     out.login_cancel_prompt = "...or if you may have entered the wrong username or password, cancel to try again.";
 
@@ -267,11 +266,6 @@ define(function () {
         '<p><strong>Make sure you do not forget your username and password!</strong></p>',
     ].join('\n');
 
-    out.login_logout = [
-        //'<p>It seems you are already logged in</p>',
-        //'<p>Would you like to log out and authenticate as another user?</p>',
-    ].join('\n');
-
     out.login_hashing = "Hashing your password, this might take some time.";
 
     out.login_no_user = "There is no user associated with the username and password that you entered.";
@@ -296,10 +290,19 @@ define(function () {
     out.table_created = 'Created';
     out.table_last = 'Last Accessed';
 
-    out.button_newpad = 'NEW RICH TEXT PAD';
+    out.button_newpad = 'New Rich Text pad';
-    out.button_newcode = 'NEW CODE PAD';
+    out.button_newcode = 'New Code pad';
-    out.button_newpoll = 'NEW POLL';
+    out.button_newpoll = 'New Poll';
-    out.button_newslide = 'NEW PRESENTATION';
+    out.button_newslide = 'New Presentation';
+
+    out.form_title = "All your pads, everywhere!";
+    out.form_username = "Username";
+    out.form_password = "Password";
+
+    out.about = "About";
+    out.privacy = "Privacy";
+    out.contact = "Contact";
+    out.terms = "ToS";
 
     // privacy.html
 

www/common/toolbar.js

@@ -410,13 +410,18 @@ define([
                 options.push({
                     tag: 'a',
                     attributes: {'class': 'logout'},
-                    content: Messages.user_logout
+                    content: Messages.logoutButton
                 });
             } else {
                 options.push({
                     tag: 'a',
                     attributes: {'class': 'login'},
-                    content: Messages.user_login
+                    content: Messages.login_login
+                });
+                options.push({
+                    tag: 'a',
+                    attributes: {'class': 'register'},
+                    content: Messages.login_register
                 });
             }
             var $icon = $('<span>', {'class': 'fa fa-user'});
@@ -439,6 +444,9 @@ define([
             $userAdmin.find('a.login').click(function (e) {
                 window.open('/user');
             });
+            $userAdmin.find('a.register').click(function (e) {
+                window.open('/user#register');
+            });
 
             if (config.userName && config.userName.setName && config.userName.lastName) {
                 $userAdmin.find('a.' + USERBUTTON_CLS).click(function (e) {

www/user/index.html

@@ -25,6 +25,11 @@
             display: none;
             border-radius: 5px;
         }
+
+        .register {
+            display: none;
+        }
+
         @media (max-width: 1000px) {
             div.panel { width: 90%; }
         }
@@ -49,6 +54,7 @@
     <div id="warning" data-localization="login_warning"></div>
     <input type="text" name="username" id="username" data-localization-placeholder="login_username" autofocus><br />
     <input type="password" name="password" id="password" data-localization-placeholder="login_password"><br />
+    <input type="password" class="register" name="confirm" id="confirm_register" data-localization-placeholder="login_confirm"><br />
 
     <button id="login" data-localization="login_login"></button>
     <input type="checkbox" name="remember" id="remember" checked="true"><label for="remember" data-localization="login_remember"></label>
@@ -83,6 +89,6 @@
         <p><span data-localization="username_label"></span>
             <strong id="user-name" class="display"></strong></p>
 
-        <p>View your <a href="/file" target="_blank">file manager</a>.</p>
+        <p>View your <a href="/drive" target="_blank">CryptDrive</a>.</p>
     </div>
 </div>

www/user/main.js

@@ -23,8 +23,10 @@ define([
     // login elements
     var $loginBox = $('#login-panel');
     var $login = $('#login');
+    var $login_register = $('#login_register');
     var $username = $('#username');
     var $password = $('#password');
+    var $password_register = $('#confirm_register');
     var $remember = $('#remember');
 
     // hashing elements
@@ -61,7 +63,13 @@ define([
     var revealConfirm = APP.revealConfirm = revealer($confirmBox);
 
     var revealLogout = APP.revealLogout= revealer($logoutBox);
-    var revealUser = APP.revealUser = revealer($userBox);
+    var revealUser_false = APP.revealUser_false = revealer($userBox);
+    var revealUser = APP.revealUser = function (state) {
+        if (!state) {
+            revealUser_false(state);
+        }
+        document.location.href = '/drive';
+    };
 
     var getDisplayName = APP.getDisplayName = function (proxy) {
         return proxy['cryptpad.username'];
@@ -186,9 +194,9 @@ define([
         };
     };
 
-    var handleNewUser = function (proxy, opt) {
+    var handleNewUser = function (proxy, opt, force) {
         // could not find a profile for that username/password
-        confirmPassword(proxy, opt.password, function () {
+        var todo = function () {
             APP.confirming = false;
             APP.setAccountName((proxy.login_name = opt.name));
             APP.setDisplayName(APP.getDisplayName(proxy));
@@ -219,17 +227,35 @@ define([
                             proxy[k] = map[k];
                         });
 
+                        var whenSynced = function () {
                             delete localStorage.FS_hash;
 
                             if (!proxy[USERNAME_KEY]) {
                                 proxy[USERNAME_KEY] = opt.name;
                             }
-
                             next();
+                        };
+
+                        // Make sure the migration is synced in chainpad before continuing otherwise
+                        // we may leave that page too early or trigger a reload in another tab before
+                        // the migration is complete
+                        var check = function () {
+                            if (APP.realtime.getUserDoc() === APP.realtime.getAuthDoc()) {
+                                whenSynced();
+                                return;
+                            }
+                            window.setTimeout(check, 300);
+                        };
+                        check();
                     });
                 });
             });
-        });
+        };
+        if (force) {
+            todo();
+            return;
+        }
+        confirmPassword(proxy, opt.password, todo);
     };
 
     var handleUser = function (proxy, opt) {
@@ -237,6 +263,9 @@ define([
         var now = opt.now = +(new Date());
 
         if (!proxyKeys.length) {
+            if (opt.register) {
+                return handleNewUser(proxy, opt, true);
+            }
             return handleNewUser(proxy, opt);
         }
         handleRegisteredUser(proxy, opt);
@@ -287,7 +316,6 @@ define([
         };
 
         var rt = APP.rt = Listmap.create(config);
-
         rt.proxy.on('create', function (info) {
             APP.realtime = info.realtime;
         })
@@ -310,6 +338,11 @@ define([
 
             revealUser(true);
         } else {
+            if (sessionStorage.register || document.location.hash.slice(1) === 'register') {
+                document.location.hash = 'register';
+                $login.text(Cryptpad.Messages.login_register);
+                $('#login-panel .register').show();
+            }
             revealLogin(true);
         }
 
@@ -318,9 +351,15 @@ define([
         $login.click(function () {
             var uname = $username.val().trim();
             var passwd = $password.val();
+            var passwd_confirm = $password_register.val();
             var confirm = $confirm.val();
             var remember = $remember[0].checked;
 
+            var register = document.location.hash.slice(1) === 'register';
+
+            if (passwd !== passwd_confirm && register) {
+                return void Cryptpad.alert("Passwords are not the same");
+            }
             if (!Cred.isValidUsername(uname)) {
                 return void Cryptpad.alert('invalid username');
             }
@@ -341,7 +380,7 @@ define([
                     window.setTimeout(function () {
                         useBytes(bytes, {
                             remember: remember,
-                            //register: register,
+                            register: register,
                             name: uname,
                             password: passwd,
                         });
@@ -350,5 +389,21 @@ define([
             }, 75);
             });
         });
+
+        if (sessionStorage.login) {
+            $username.val(sessionStorage.login_user);
+            $password.val(sessionStorage.login_pass);
+            $remember.attr('checked', sessionStorage.login_rmb === "true");
+            $login.click();
+        }
+        if (sessionStorage.register) {
+            $username.val(sessionStorage.login_user);
+            $password.val(sessionStorage.login_pass);
+            $remember.attr('checked', sessionStorage.login_rmb === "true");
+        }
+        ['login', 'register', 'login_user', 'login_pass', 'login_rmb'].forEach(function (k) {
+            delete sessionStorage[k];
+        });
+
     });
 });