From 73d424b506a3f5ed3466aab6e57c650436c648fb Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 17 Jan 2017 16:21:12 +0100 Subject: [PATCH] Improve the login UI (css and translations) --- customize.dist/index.html | 2 +- customize.dist/main.css | 2 +- customize.dist/src/fragments/index.html | 2 +- customize.dist/src/less/cryptpad.less | 8 +--- customize.dist/translations/messages.fr.js | 49 ++++++++++++++++++++-- customize.dist/translations/messages.js | 20 ++++----- www/common/toolbar.js | 12 +++++- www/user/index.html | 8 +++- www/user/main.js | 37 +++++++++++++--- 9 files changed, 105 insertions(+), 35 deletions(-) diff --git a/customize.dist/index.html b/customize.dist/index.html index 9a874b38f..a8cd4a4f5 100644 --- a/customize.dist/index.html +++ b/customize.dist/index.html @@ -76,7 +76,7 @@
-

Join Us!

+



diff --git a/customize.dist/main.css b/customize.dist/main.css index c31dc4408..f3327e0df 100644 --- a/customize.dist/main.css +++ b/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"], diff --git a/customize.dist/src/fragments/index.html b/customize.dist/src/fragments/index.html index e9190eae6..37a5cba34 100644 --- a/customize.dist/src/fragments/index.html +++ b/customize.dist/src/fragments/index.html @@ -15,7 +15,7 @@
-

Join Us!

+



diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less index dbed153d3..2f06decbf 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/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"] { diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index e3e73dd3b..9fa43247a 100644 --- a/customize.dist/translations/messages.fr.js +++ b/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_logout = "Déconnexion"; - out.user_rename = "Changer le nom affiché"; + out.user_rename = "Changer le nmm 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 = '

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.

\n' + - '

Faites attention de ne pas oublier vos identifiants puisqu\'ils seront impossible à récupérer.

'; + '

Faites attention de ne pas oublier vos identifiants puisqu\'ils seront impossible à récupérer.

'; //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 = [ + '

ATTENTION

', + '

Cryptpad sauve vos données personnelles dans un document temps-réel chiffré, comme pour tous les autres types de documents temps-réel.

', + '

Votre nom d\'utilisateur et votre mot de passe ne sont jamais envoyés au serveur de manière non-chiffré.

', + '

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.

', + '

Prenez soin de ne surtout pas oublier votre nom d\'utilisateur OU votre mot de passe !

', + ].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 = '

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.

\n' + + '

Faîtes attention de ne pas perdre vos identifiants, puisqu\'il est impossible de les récupérer

'; + // index.html out.main_p1 = 'CryptPad est l\'éditeur collaboratif en temps réel zero knowledge. 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\'identifieur de fragment 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"; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 7a22e6107..c0df35751 100644 --- a/customize.dist/translations/messages.js +++ b/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_nologin = "use cryptpad without account"; - out.login_register = "register"; - out.logoutButton = "log out"; + out.login_login = "Log in"; + out.login_nologin = "Use an anonymous session"; + out.login_register = "Sign up"; + 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 () { '

Make sure you do not forget your username and password!

', ].join('\n'); - out.login_logout = [ - //'

It seems you are already logged in

', - //'

Would you like to log out and authenticate as another user?

', - ].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"; diff --git a/www/common/toolbar.js b/www/common/toolbar.js index ada2534aa..83a6e02c6 100644 --- a/www/common/toolbar.js +++ b/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 = $('', {'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) { diff --git a/www/user/index.html b/www/user/index.html index 5f27377ba..b4e7eb2ac 100644 --- a/www/user/index.html +++ b/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 @@


+
@@ -83,6 +89,6 @@

-

View your file manager.

+

View your CryptDrive.

diff --git a/www/user/main.js b/www/user/main.js index 2da1aaebc..b658ef76a 100644 --- a/www/user/main.js +++ b/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, });