Add revealable password input to display or prompt the password
This commit is contained in:
yflory
parent
447230d42e
commit
2b8e734cae
8 changed files with 93 additions and 23 deletions
|
|
@ -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;
|
||||
input {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
label {
|
||||
flex: unset;
|
||||
}
|
||||
.cp-creation-slider {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
.cp-password-container {
|
||||
input {
|
||||
width: 150px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
label {
|
||||
flex: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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…
Reference in a new issue