Add revealable password input to display or prompt the password

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;

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;

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();
 }
 
 

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 <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";

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 <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";

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
      */

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

www/common/sframe-common.js

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