Add a spinner when hashing the password and translate homepage

customize.dist/main.js

@@ -112,33 +112,43 @@ define([
         });
 
         $('button.login').click(function (e) {
+            Cryptpad.addLoadingScreen(Messages.login_hashing);
+            // We need a setTimeout(cb, 0) otherwise the loading screen is only displayed after hashing the password
+            window.setTimeout(function () {
                 loginReady(function () {
                     var uname = $uname.val();
                     var passwd = $passwd.val();
-
                     Login.loginOrRegister(uname, passwd, false, function (err, result) {
                         if (!err) {
                             // successful validation and user already exists
                             // set user hash in localStorage and redirect to drive
-                        localStorage.User_hash = result.userHash;
+                            Cryptpad.login(result.userHash, result.userName, function () {
                                 document.location.href = '/drive/';
-
+                            });
                             return;
                         }
                         switch (err) {
                             case 'NO_SUCH_USER':
-                            Cryptpad.alert('Invalid username or password. Try again, or sign up'); // XXX
+                                Cryptpad.removeLoadingScreen(function () {
+                                    Cryptpad.alert(Messages.login_noSuchUser);
+                                });
                                 break;
                             case 'INVAL_USER':
-                            Cryptpad.alert('Username required'); // XXX
+                                Cryptpad.removeLoadingScreen(function () {
+                                    Cryptpad.alert(Messages.login_invalUser);
+                                });
                                 break;
                             case 'INVAL_PASS':
-                            Cryptpad.alert('Password required'); // XXX
+                                Cryptpad.removeLoadingScreen(function () {
+                                    Cryptpad.alert(Messages.login_invalPass);
+                                });
                                 break;
                             default: // UNHANDLED ERROR
+                                Cryptpad.errorLoadingScreen(Messages.login_unhandledError);
                         }
                     });
                 });
+            }, 0);
         });
         /* End Log in UI */
 

customize.dist/translations/messages.fr.js

@@ -282,6 +282,15 @@ define(function () {
     out.login_accessDrive = 'Accédez à votre drive';
     out.login_orNoLogin = 'ou';
 
+    out.login_noSuchUser = "Nom d'utilisateur ou mot de passe invalide. Veuillez vous inscrire ou réessayer.";
+    out.login_invalUser = "Nom d'utilisateur requis";
+    out.login_invalPass = 'Mot de passe requis';
+    out.login_unhandledError = "Une erreur inattendue s'est produite :(";
+
+    out.register_importRecent = "Importer l'historique (Recommendé)";
+    out.register_acceptTerms = "J'accepte <a href='/terms.html'>les conditions d'utilisation</a>";
+    out.register_rememberPassword = "Je vais me souvenir de mes identifiants";
+
     // 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.';

customize.dist/translations/messages.js

@@ -283,8 +283,13 @@ define(function () {
     out.login_accessDrive = 'Access your drive';
     out.login_orNoLogin = 'or';
 
+    out.login_noSuchUser = 'Invalid username or password. Try again, or sign up';
+    out.login_invalUser = 'Username required';
+    out.login_invalPass = 'Password required';
+    out.login_unhandledError = 'An unexpected error occured :(';
+
     out.register_importRecent = "Import pad history (Recommended)";
-    out.register_acceptTerms = "I accept <a href='/terms.html'>the terms</a>";
+    out.register_acceptTerms = "I accept <a href='/terms.html'>the terms of use</a>";
     out.register_rememberPassword = "I will remember my login name and password";
 
     // index.html

www/common/cryptpad-common.js

@@ -734,7 +734,7 @@ define([
     };
 
     var LOADING = 'loading';
-    common.addLoadingScreen = function () {
+    common.addLoadingScreen = function (loadingText) {
         if ($('#' + LOADING).length) {
             $('#' + LOADING).show();
             return;
@@ -744,7 +744,7 @@ define([
         $container.append('<img class="cryptofist" src="/customize/cryptofist_small.png" />');
         var $spinner = $('<div>', {'class': 'spinnerContainer'});
         var loadingSpinner = common.spinner($spinner).show();
-        var $text = $('<p>').text(Messages.loading);
+        var $text = $('<p>').text(loadingText || Messages.loading);
         $container.append($spinner).append($text);
         $loading.append($container);
         $('body').append($loading);

www/login/main.js

@@ -12,6 +12,7 @@ define([
 
     $(function () {
         var $main = $('#mainBlock');
+        var Messages = Cryptpad.Messages;
 
         // Language selector
         var $sel = $('#language-selector');
@@ -63,33 +64,43 @@ define([
         });
 
         $('button.login').click(function (e) {
+            Cryptpad.addLoadingScreen(Messages.login_hashing);
+            // We need a setTimeout(cb, 0) otherwise the loading screen is only displayed after hashing the password
+            window.setTimeout(function () {
                 loginReady(function () {
                     var uname = $uname.val();
                     var passwd = $passwd.val();
-
                     Login.loginOrRegister(uname, passwd, false, function (err, result) {
                         if (!err) {
                             // successful validation and user already exists
                             // set user hash in localStorage and redirect to drive
-                        localStorage.User_hash = result.userHash;
+                            Cryptpad.login(result.userHash, result.userName, function () {
                                 document.location.href = '/drive/';
-
+                            });
                             return;
                         }
                         switch (err) {
                             case 'NO_SUCH_USER':
-                            Cryptpad.alert('Invalid username or password. Try again, or sign up'); // XXX
+                                Cryptpad.removeLoadingScreen(function () {
+                                    Cryptpad.alert(Messages.login_noSuchUser);
+                                });
                                 break;
                             case 'INVAL_USER':
-                            Cryptpad.alert('Username required'); // XXX
+                                Cryptpad.removeLoadingScreen(function () {
+                                    Cryptpad.alert(Messages.login_invalUser);
+                                });
                                 break;
                             case 'INVAL_PASS':
-                            Cryptpad.alert('Password required'); // XXX
+                                Cryptpad.removeLoadingScreen(function () {
+                                    Cryptpad.alert(Messages.login_invalPass);
+                                });
                                 break;
                             default: // UNHANDLED ERROR
+                                Cryptpad.errorLoadingScreen(Messages.login_unhandledError);
                         }
                     });
                 });
+            }, 0);
         });
     });
 });