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