Add revealable password input to display or prompt the password

pull/1/head
yflory 7 years ago
parent 447230d42e
commit 2b8e734cae

@ -97,15 +97,20 @@ define([], function () {
#cp-loading-password-prompt .cp-password-form {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
#cp-loading-password-prompt .cp-password-form * {
#cp-loading-password-prompt .cp-password-form button,
#cp-loading-password-prompt .cp-password-form .cp-password-input {
background-color: #4591c4;
color: white;
border: 1px solid #4591c4;
}
#cp-loading-password-prompt .cp-password-form .cp-password-container {
flex-shrink: 1;
min-width: 0;
}
#cp-loading-password-prompt .cp-password-form input {
flex: 1;
margin-right: 15px;
padding: 0 5px;
min-width: 0;
text-overflow: ellipsis;

@ -177,16 +177,15 @@
.cp-creation-password {
.cp-creation-password-picker {
text-align: center;
width: 100%;
.cp-password-container {
input {
width: 150px;
padding: 0 5px;
}
}
&.active {
label {
flex: unset;
}
.cp-creation-slider {
flex: 1;
}
}
}
@ -335,7 +334,7 @@
width: 95%;
margin: 10px auto;
}
.cp-creation-expire, .cp-creation-password {
.cp-creation-expire{
&.active {
label {
flex: 1;

@ -6,6 +6,7 @@
@import (once) './creation.less';
@import (once) './tippy.less';
@import (once) "./checkmark.less";
@import (once) "./password-input.less";
.framework_main(@bg-color, @warn-color, @color) {
.toolbar_main(
@ -18,6 +19,7 @@
.tokenfield_main();
.tippy_main();
.checkmark_main(20px);
.password_main();
.creation_main(
@bg-color: @bg-color,
@warn-color: @warn-color,
@ -39,6 +41,7 @@
.alertify_main();
.tippy_main();
.checkmark_main(20px);
.password_main();
}

@ -1093,6 +1093,7 @@ define(function () {
out.creation_ownedByOther = "Appartient à un autre utilisateur";
out.creation_noOwner = "Pas de propriétaire";
out.creation_expiration = "Date d'expiration";
out.creation_passwordValue = "Mot de passe";
out.creation_propertiesTitle = "Disponibilité";
out.creation_appMenuName = "Mode avancé (Ctrl + E)";
out.creation_newPadModalDescription = "Cliquez sur un type de pad pour le créer. Vous pouvez aussi appuyer sur <b>Tab</b> pour sélectionner un type et appuyer sur <b>Entrée</b> pour valider.";
@ -1104,6 +1105,7 @@ define(function () {
out.password_error = "Pad introuvable !<br>Cette erreur peut provenir de deux facteurs. Soit le mot de passe est faux, soit le pad a été supprimé du serveur.";
out.password_placeholder = "Tapez le mot de passe ici...";
out.password_submit = "Valider";
out.password_show = "Afficher";
// New share modal
out.share_linkCategory = "Partage";

@ -1139,6 +1139,7 @@ define(function () {
out.creation_ownedByOther = "Owned by another user";
out.creation_noOwner = "No owner";
out.creation_expiration = "Expiration time";
out.creation_passwordValue = "Password";
out.creation_propertiesTitle = "Availability";
out.creation_appMenuName = "Advanced mode (Ctrl + E)";
out.creation_newPadModalDescription = "Click on a pad type to create it. You can also press <b>Tab</b> to select the type and press <b>Enter</b> to confirm.";
@ -1150,6 +1151,7 @@ define(function () {
out.password_error = "Pad not found!<br>This error can be caused by two factors: either the password in invalid, or the pad has been deleted from the server.";
out.password_placeholder = "Type the password here...";
out.password_submit = "Submit";
out.password_show = "Show";
// New share modal
out.share_linkCategory = "Share link";

@ -513,6 +513,50 @@ define([
Alertify.error(Util.fixHTML(msg));
};
UI.passwordInput = function (opts, displayEye) {
opts = opts || {};
var attributes = merge({
type: 'password'
}, opts);
var input = h('input.cp-password-input', attributes);
var reveal = UI.createCheckbox('cp-password-reveal', Messages.password_show);
var eye = h('span.fa.fa-eye.cp-password-reveal');
$(reveal).find('input').on('change', function () {
if($(this).is(':checked')) {
$(input).prop('type', 'text');
$(input).focus();
return;
}
$(input).prop('type', 'password');
$(input).focus();
});
$(eye).mousedown(function () {
$(input).prop('type', 'text');
$(input).focus();
}).mouseup(function(){
$(input).prop('type', 'password');
$(input).focus();
}).mouseout(function(){
$(input).prop('type', 'password');
$(input).focus();
});
if (displayEye) {
$(reveal).hide();
} else {
$(eye).hide();
}
return h('span.cp-password-container', [
input,
reveal,
eye
]);
};
/*
* spinner
*/

@ -143,6 +143,22 @@ define([
$d.append(UI.dialog.selectable(expire, {
id: 'cp-app-prop-expire',
}));
if (typeof data.password !== "undefined") {
$('<label>', {'for': 'cp-app-prop-password'}).text(Messages.creation_passwordValue)
.appendTo($d);
var password = UI.passwordInput({
id: 'cp-app-prop-expire',
readonly: 'readonly'
});
var $pwInput = $(password).find('.cp-password-input');
$pwInput.val(data.password).click(function () {
$pwInput[0].select();
});
$(password).find('.cp-checkmark').css('margin-bottom', '15px');
$d.append(password);
}
cb(void 0, $d);
};
var getPadProperties = function (common, data, cb) {
@ -1920,9 +1936,10 @@ define([
var password = h('div.cp-creation-password', [
UI.createCheckbox('cp-creation-password', Messages.creation_password, false),
h('span.cp-creation-password-picker.cp-creation-slider', [
h('input#cp-creation-password-val', {
UI.passwordInput({id: 'cp-creation-password-val'})
/*h('input#cp-creation-password-val', {
type: "text" // TODO type password with click to show
}),
}),*/
]),
//createHelper('#', "TODO: password protection adds another layer of security ........") // TODO
]);
@ -2207,14 +2224,11 @@ define([
var error;
if (isError) { error = setHTML(h('p.cp-password-error'), Messages.password_error); }
var info = h('p.cp-password-info', Messages.password_info);
var input = h('input', {
type: "password",
placeholder: Messages.password_placeholder
});
var password = UI.passwordInput({placeholder: Messages.password_placeholder});
var button = h('button', Messages.password_submit);
var submit = function () {
var value = $(input).val();
var value = $(password).find('.cp-password-input').val();
UI.addLoadingScreen();
common.getSframeChannel().query('Q_PAD_PASSWORD_VALUE', value, function (err, data) {
if (!data) {
@ -2222,7 +2236,7 @@ define([
}
});
};
$(input).on('keydown', function (e) { if (e.which === 13) { submit(); } });
$(password).find('.cp-password-input').on('keydown', function (e) { if (e.which === 13) { submit(); } });
$(button).on('click', function () { submit(); });
@ -2230,11 +2244,13 @@ define([
error,
info,
h('p.cp-password-form', [
input,
password,
button
])
]);
UI.errorLoadingScreen(block);
$(password).find('.cp-password-input').focus();
};
return UIElements;

@ -379,7 +379,6 @@ define([
Object.freeze(funcs);
return { create: function (cb) {
console.log('create');
if (window.CryptPad_sframe_common) {
throw new Error("Sframe-common should only be created once");
}

Loading…
Cancel
Save