Add passwod prompt to access protected pads

customize.dist/loading.js

@@ -81,6 +81,38 @@ define([], function () {
     text-align: center;
     display: none;
 }
+#cp-loading-password-prompt {
+    font-size: 18px;
+}
+#cp-loading-password-prompt .cp-password-error {
+    color: white;
+    background: #9e0000;
+    padding: 5px;
+    margin-bottom: 15px;
+}
+#cp-loading-password-prompt .cp-password-info {
+    text-align: left;
+    margin-bottom: 15px;
+}
+#cp-loading-password-prompt .cp-password-form {
+    display: flex;
+    justify-content: space-around;
+}
+#cp-loading-password-prompt .cp-password-form * {
+    background-color: #4591c4;
+    color: white;
+    border: 1px solid #4591c4;
+}
+#cp-loading-password-prompt .cp-password-form input {
+    flex: 1;
+    margin-right: 15px;
+    padding: 0 5px;
+    min-width: 0;
+    text-overflow: ellipsis;
+}
+#cp-loading-password-prompt .cp-password-form button:hover {
+    background-color: #326599;
+}
 #cp-loading .cp-loading-spinner-container {
   position: relative;
   height: 100px;

customize.dist/src/less2/include/creation.less

@@ -144,16 +144,18 @@
                     max-height: 100px;
                 }
             }
+
+            input, select {
+                font-size: 14px;
+                border: 1px solid @colortheme_form-border;
+                height: 26px;
+                background-color: @colortheme_form-bg;
+                color: @colortheme_form-color;
+            }
+
             .cp-creation-expire {
                 .cp-creation-expire-picker {
                     text-align: center;
-                    input, select {
-                        font-size: 14px;
-                        border: 1px solid @colortheme_form-border;
-                        height: 26px;
-                        background-color: @colortheme_form-bg;
-                        color: @colortheme_form-color;
-                    }
                     input {
                         width: 50px;
                         margin: 0 5px;
@@ -171,6 +173,22 @@
                     }
                 }
             }
+            .cp-creation-password {
+                .cp-creation-password-picker {
+                    text-align: center;
+                    input {
+                        width: 150px;
+                    }
+                }
+                &.active {
+                    label {
+                        flex: unset;
+                    }
+                    .cp-creation-slider {
+                        flex: 1;
+                    }
+                }
+            }
             .cp-creation-settings {
                 button {
                     margin: 0;
@@ -314,7 +332,7 @@
                         width: 95%;
                         margin: 10px auto;
                     }
-                    .cp-creation-expire {
+                    .cp-creation-expire, .cp-creation-password {
                         &.active {
                             label {
                                 flex: 1;

customize.dist/translations/messages.fr.js

@@ -1098,6 +1098,12 @@ define(function () {
     out.creation_newPadModalDescriptionAdvanced = "Cochez la case si vous souhaitez voir l'écran de création de pads (pour les pads avec propriétaire ou à durée de vie). Vous pouvez appuyer sur <b>Espace</b> pour changer sa valeur.";
     out.creation_newPadModalAdvanced = "Afficher l'écran de création de pads";
 
+    // Password prompt on the loadind screen
+    out.password_info = "Le pad auquel vous essayez d'accéder est protégé par un mot de passe. Entrez le bon mot de passe pour accéder à son contenu.";
+    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";
+
     // New share modal
     out.share_linkCategory = "Partage";
     out.share_linkAccess = "Droits d'accès";

customize.dist/translations/messages.js

@@ -1144,6 +1144,12 @@ define(function () {
     out.creation_newPadModalDescriptionAdvanced = "You can check the box (or press <b>Space</b> to change its value) if you want to display the pad creation screen (for owned pads, expiring pads, etc.).";
     out.creation_newPadModalAdvanced = "Display the pad creation screen";
 
+    // Password prompt on the loadind screen
+    out.password_info = "The pad you're tyring to open is protected with a password. Enter the correct password to access its content.";
+    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";
+
     // New share modal
     out.share_linkCategory = "Share link";
     out.share_linkAccess = "Access rights";