infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Improve the login UI (css and translations)

pull/1/head
yflory 2017-01-17 16:21:12 +01:00
parent e006ed7076
commit 73d424b506
9 changed files with 105 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/index.html
View File

@ -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>

2
customize.dist/main.css
View File

@ -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"],

2
customize.dist/src/fragments/index.html
View File

@ -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>

8
customize.dist/src/less/cryptpad.less
View File

@ -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"] {

49
customize.dist/translations/messages.fr.js
View File

@ -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 = '<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";

20
customize.dist/translations/messages.js
View File

@ -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 () {
'<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";

12
www/common/toolbar.js
View File

@ -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) {

8
www/user/index.html
View File

@ -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>

37
www/user/main.js
View File

@ -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,
});