Improve the login UI (css and translations)

customize.dist/index.html

@@ -76,7 +76,7 @@
 
     <div id="userForm">
         <center>
-            <h1>Join Us!</h1>
+            <h1 data-localization="form_title"></h1>
         </center>
         <label for="name" data-localization="form_username"></label><br>
         <input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br>

customize.dist/main.css

@@ -618,7 +618,6 @@ html.cp,
   margin-left: 50px;
   display: inline-block;
   width: 400px;
-  height: 350px;
   background-color: rgba(34, 177, 221, 0.8);
   padding: 10px;
   box-sizing: border-box;
@@ -628,6 +627,7 @@ html.cp,
 .cp #main #userForm h1,
 .cp #main_other #userForm h1 {
   color: black;
+  padding: 0;
 }
 .cp #main #userForm [type="text"],
 .cp #main_other #userForm [type="text"],

customize.dist/src/fragments/index.html

@@ -15,7 +15,7 @@
 
     <div id="userForm">
         <center>
-            <h1>Join Us!</h1>
+            <h1 data-localization="form_title"></h1>
         </center>
         <label for="name" data-localization="form_username"></label><br>
         <input type="text" id="name" name="name" data-localization-placeholder="login_username" autofocus><br>

customize.dist/src/less/cryptpad.less

@@ -158,12 +158,6 @@ body.html {
     //margin-top: 100px;
 
     font-size: medium;
-    //padding-bottom: 1em;
-
-    // Vertical positioning (middle)
-    //margin-top: 50vh;
-    //transform: translateY( ~"calc(40px - 50%)" ); //"
-
 
     #data {
         p {
@@ -191,7 +185,6 @@ body.html {
         margin-left: 50px;
         display: inline-block;
         width: 400px;
-        height: 350px;
         background-color: rgba(34, 177, 221, 0.8);
         padding: 10px;
         box-sizing: border-box;
@@ -200,6 +193,7 @@ body.html {
 
         h1 {
             color: black;
+            padding: 0;
         }
 
         [type="text"], [type="password"] {

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,9 +63,7 @@ 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_rename = "Changer le nmm affiché";
-    out.user_logout = "Déconnexion";
-    out.user_rename = "Changer le nom affiché";
     out.user_displayName = "Nom affiché";
     out.user_accountName = "Nom d'utilisateur";
 
@@ -118,10 +118,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";
 
@@ -181,6 +183,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";
@@ -234,6 +237,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 = "Utiliser une session anonyme";
+    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.';
@@ -255,6 +295,7 @@ define(function () {
     out.button_newpoll = 'NOUVEAU SONDAGE';
     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";
 

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";
@@ -121,7 +119,7 @@ define(function () {
 
     out.okButton = 'OK (enter)';
 
-    out.cancel = "cancel";
+    out.cancel = "Cancel";
     out.cancelButton = 'Cancel (esc)';
 
     out.forget = "Forget";
@@ -237,10 +235,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_nologin = "use cryptpad without account";
+    out.login_nologin = "Use an anonymous session";
-    out.login_register = "register";
+    out.login_register = "Sign up";
-    out.logoutButton = "log out";
+    out.logoutButton = "Log out";
 
     out.login_migrate = "Would you like to migrate existing data from your anonymous session?";
 
@@ -250,7 +248,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.";
 
@@ -265,11 +263,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.";
@@ -299,6 +292,7 @@ define(function () {
     out.button_newpoll = 'NEW POLL';
     out.button_newslide = 'NEW PRESENTATION';
 
+    out.form_title = "All your pads, everywhere!";
     out.form_username = "Username";
     out.form_password = "Password";
 

www/common/toolbar.js

@@ -389,13 +389,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'});
@@ -418,6 +423,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));
@@ -229,7 +237,12 @@ define([
                     });
                 });
             });
-        });
+        };
+        if (force) {
+            todo();
+            return;
+        }
+        confirmPassword(proxy, opt.password, todo);
     };
 
     var handleUser = function (proxy, opt) {
@@ -237,6 +250,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);
@@ -309,6 +325,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);
         }
 
@@ -317,9 +338,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');
             }
@@ -340,7 +367,7 @@ define([
                     window.setTimeout(function () {
                         useBytes(bytes, {
                             remember: remember,
-                            //register: register,
+                            register: register,
                             name: uname,
                             password: passwd,
                         });