diff --git a/customize.dist/loading.js b/customize.dist/loading.js
index 80e064a67..53e20b561 100644
--- a/customize.dist/loading.js
+++ b/customize.dist/loading.js
@@ -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;
diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less
index c86b81e36..8dd9469b1 100644
--- a/customize.dist/src/less2/include/creation.less
+++ b/customize.dist/src/less2/include/creation.less
@@ -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;
diff --git a/customize.dist/src/less2/include/framework.less b/customize.dist/src/less2/include/framework.less
index 9dfab39f6..ded7983d7 100644
--- a/customize.dist/src/less2/include/framework.less
+++ b/customize.dist/src/less2/include/framework.less
@@ -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();
}
diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index 8b7eec775..4d40a2074 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -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 Tab pour sélectionner un type et appuyer sur Entrée pour valider.";
@@ -1104,6 +1105,7 @@ define(function () {
out.password_error = "Pad introuvable !
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";
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index f51e552dc..cd0e02477 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -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 Tab to select the type and press Enter to confirm.";
@@ -1150,6 +1151,7 @@ define(function () {
out.password_error = "Pad not found!
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";
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index 0e4124430..f38dadddd 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -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
*/
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index ce4504c2d..e085ea3a3 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -143,6 +143,22 @@ define([
$d.append(UI.dialog.selectable(expire, {
id: 'cp-app-prop-expire',
}));
+
+ if (typeof data.password !== "undefined") {
+ $('