From 1cd10f074bcffc6f7ae205cd2d5588eaaa35cfa3 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <knolleary@users.noreply.github.com>
Date: Mon, 16 Nov 2020 11:37:32 +0000
Subject: [PATCH] Update projects dialogs to use TypedInput-cred input

---
 .../src/js/ui/projects/projectSettings.js     |  4 +-
 .../src/js/ui/projects/projects.js            | 48 +++++++++++--------
 .../editor-client/src/sass/projects.scss      |  2 +-
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
index 4abe6fd1f..fdd106e23 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js
@@ -1033,7 +1033,7 @@ RED.projects.settings = (function() {
 
         var credentialSecretExistingRow = $('<div class="red-ui-settings-row red-ui-settings-row-credentials"></div>').appendTo(credentialFormRows);
         $('<label for=""></label>').text(RED._("sidebar.project.projectSettings.currentKey")).appendTo(credentialSecretExistingRow);
-        var credentialSecretExistingInput = $('<input type="password">').appendTo(credentialSecretExistingRow)
+        var credentialSecretExistingInput = $('<input type="text">').appendTo(credentialSecretExistingRow).typedInput({type:"cred"})
             .on("change keyup paste",function() {
                 if (popover) {
                     popover.close();
@@ -1046,7 +1046,7 @@ RED.projects.settings = (function() {
 
 
         $('<label for=""></label>').text(RED._("sidebar.project.projectSettings.newKey")).appendTo(credentialSecretNewRow);
-        var credentialSecretNewInput = $('<input type="password">').appendTo(credentialSecretNewRow).on("change keyup paste",checkFiles);
+        var credentialSecretNewInput = $('<input type="text">').appendTo(credentialSecretNewRow).typedInput({type:"cred"}).on("change keyup paste",checkFiles);
 
         var credentialResetWarning = $('<div class="form-tips form-warning" style="margin: 10px;"><i class="fa fa-warning"></i>' + RED._("sidebar.project.projectSettings.credentialsAlert") + '</div>').hide().appendTo(credentialFormRows);
 
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js
index 13f9dcb02..7a77217d5 100755
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projects.js
@@ -81,8 +81,8 @@ RED.projects = (function() {
                     $('<p>').text(RED._("projects.welcome.desc2")).appendTo(body);
 
                     var row = $('<div style="text-align: center"></div>').appendTo(body);
-                    var createAsEmpty = $('<button data-type="empty" class="red-ui-button red-ui-projects-dialog-screen-create-type"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-asterisk"></i><br/>'+RED._("projects.welcome.create")+'</button>').appendTo(row);
-                    var createAsClone = $('<button data-type="clone" class="red-ui-button red-ui-projects-dialog-screen-create-type"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-git"></i><br/>'+RED._("projects.welcome.clone")+'</button>').appendTo(row);
+                    var createAsEmpty = $('<button data-type="empty" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-asterisk"></i><br/>'+RED._("projects.welcome.create")+'</button>').appendTo(row);
+                    var createAsClone = $('<button data-type="clone" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-git"></i><br/>'+RED._("projects.welcome.clone")+'</button>').appendTo(row);
 
                     createAsEmpty.on("click", function(e) {
                         e.preventDefault();
@@ -511,7 +511,8 @@ RED.projects = (function() {
 
                         subrow = $('<div style="width: calc(50% - 10px); margin-left: 20px; display:inline-block;"></div>').appendTo(row);
                         $('<label for="red-ui-projects-dialog-screen-create-project-repo-pass">'+RED._("projects.clone-project.passwd")+'</label>').appendTo(subrow);
-                        projectRepoPasswordInput = $('<input id="red-ui-projects-dialog-screen-create-project-repo-pass" type="password"></input>').appendTo(subrow);
+                        projectRepoPasswordInput = $('<input style="width:100%" id="red-ui-projects-dialog-screen-create-project-repo-pass" type="password"></input>').appendTo(subrow);
+                        projectRepoPasswordInput.typedInput({type:"cred"});
                         // -----------------------------------------------------
 
                         // Repo credentials - key/passphrase -------------------
@@ -539,12 +540,12 @@ RED.projects = (function() {
                         subrow = $('<div style="width: calc(50% - 10px); margin-left: 20px; display:inline-block;"></div>').appendTo(row);
                         $('<label for="red-ui-projects-dialog-screen-create-project-repo-passphrase">'+RED._("projects.clone-project.passphrase")+'</label>').appendTo(subrow);
                         projectRepoPassphrase = $('<input id="red-ui-projects-dialog-screen-create-project-repo-passphrase" type="password"></input>').appendTo(subrow);
-
+                        projectRepoPassphrase.typedInput({type:"cred"});
                         subrow = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-sshkey"></div>').appendTo(cloneAuthRows);
                         var sshwarningRow = $('<div class="red-ui-projects-dialog-screen-create-row-auth-error-no-keys"></div>').hide().appendTo(subrow);
                         $('<div class="form-row"><i class="fa fa-warning"></i> '+RED._("projects.clone-project.ssh-key-desc")+'</div>').appendTo(sshwarningRow);
                         subrow = $('<div style="text-align: center">').appendTo(sshwarningRow);
-                        $('<button class="red-ui-button">'+RED._("projects.clone-project.ssh-key-add")+'</button>').appendTo(subrow).on("click", function(e) {
+                        $('<button class="red-ui-button red-ui-projects-dialog-button">'+RED._("projects.clone-project.ssh-key-add")+'</button>').appendTo(subrow).on("click", function(e) {
                             e.preventDefault();
                             dialog.dialog( "close" );
                             RED.userSettings.show('gitconfig');
@@ -558,8 +559,8 @@ RED.projects = (function() {
                         // Secret - clone
                         row = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-clone"></div>').appendTo(body);
                         $('<label>'+RED._("projects.clone-project.credential-key")+'</label>').appendTo(row);
-                        projectSecretInput = $('<input type="password"></input>').appendTo(row);
-
+                        projectSecretInput = $('<input style="width: 100%" type="password"></input>').appendTo(row);
+                        projectSecretInput.typedInput({type:"cred"});
 
 
                         return container;
@@ -894,6 +895,7 @@ RED.projects = (function() {
                         $('<label class="red-ui-projects-edit-form-inline-label" style="margin-left: 5px"><input type="radio" style="vertical-align: middle; margin-top:0; margin-right: 10px;" value="custom" name="projects-encryption-key"> <span style="vertical-align: middle;">'+RED._("projects.encryption-config.use-custom")+'</span></label>').appendTo(row);
                         row = $('<div class="projects-encryption-enabled-row"></div>').appendTo(credentialsRightBox);
                         emptyProjectCredentialInput = $('<input disabled type="password" style="margin-left: 25px; width: calc(100% - 30px);"></input>').appendTo(row);
+                        emptyProjectCredentialInput.typedInput({type:"cred"});
                         emptyProjectCredentialInput.on("change keyup paste", validateForm);
 
                         row = $('<div class="form-row projects-encryption-disabled-row"></div>').hide().appendTo(credentialsRightBox);
@@ -1169,11 +1171,11 @@ RED.projects = (function() {
 
                         row = $('<div class="form-row button-group"></div>').appendTo(container);
 
-                        var openProject = $('<button data-type="open" class="red-ui-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-folder-open"></i><br/>'+RED._("projects.create.open")+'</button>').appendTo(row);
-                        var createAsEmpty = $('<button data-type="empty" class="red-ui-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-asterisk"></i><br/>'+RED._("projects.create.create")+'</button>').appendTo(row);
-                        // var createAsCopy = $('<button data-type="copy" class="red-ui-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i class="fa fa-long-arrow-right fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Copy existing</button>').appendTo(row);
-                        var createAsClone = $('<button data-type="clone" class="red-ui-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-git"></i><br/>'+RED._("projects.create.clone")+'</button>').appendTo(row);
-                        // var createAsClone = $('<button data-type="clone" class="red-ui-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-git fa-2x"></i><i class="fa fa-arrows-h fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Clone Repository</button>').appendTo(row);
+                        var openProject = $('<button data-type="open" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-folder-open"></i><br/>'+RED._("projects.create.open")+'</button>').appendTo(row);
+                        var createAsEmpty = $('<button data-type="empty" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-asterisk"></i><br/>'+RED._("projects.create.create")+'</button>').appendTo(row);
+                        // var createAsCopy = $('<button data-type="copy" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i class="fa fa-long-arrow-right fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Copy existing</button>').appendTo(row);
+                        var createAsClone = $('<button data-type="clone" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-archive fa-2x"></i><i style="position: absolute;" class="fa fa-git"></i><br/>'+RED._("projects.create.clone")+'</button>').appendTo(row);
+                        // var createAsClone = $('<button data-type="clone" class="red-ui-button red-ui-projects-dialog-button red-ui-projects-dialog-screen-create-type toggle"><i class="fa fa-git fa-2x"></i><i class="fa fa-arrows-h fa-2x"></i><i class="fa fa-archive fa-2x"></i><br/>Clone Repository</button>').appendTo(row);
                         row.find(".red-ui-projects-dialog-screen-create-type").on("click", function(evt) {
                             evt.preventDefault();
                             container.find(".red-ui-projects-dialog-screen-create-type").removeClass('selected');
@@ -1298,6 +1300,7 @@ RED.projects = (function() {
                         $('<label class="red-ui-projects-edit-form-inline-label">'+RED._("projects.create.encryption-key")+'</label>').appendTo(row);
                         // row = $('<div class="projects-encryption-enabled-row"></div>').appendTo(credentialsRightBox);
                         emptyProjectCredentialInput = $('<input type="password"></input>').appendTo(row);
+                        emptyProjectCredentialInput.typedInput({type:"cred"});
                         emptyProjectCredentialInput.on("change keyup paste", validateForm);
                         $('<label class="red-ui-projects-edit-form-sublabel"><small>'+RED._("projects.create.desc0")+'</small></label>').appendTo(row);
 
@@ -1356,7 +1359,8 @@ RED.projects = (function() {
 
                         subrow = $('<div style="width: calc(50% - 10px); margin-left: 20px; display:inline-block;"></div>').appendTo(row);
                         $('<label for="red-ui-projects-dialog-screen-create-project-repo-pass">'+RED._("projects.create.password")+'</label>').appendTo(subrow);
-                        projectRepoPasswordInput = $('<input id="red-ui-projects-dialog-screen-create-project-repo-pass" type="password"></input>').appendTo(subrow);
+                        projectRepoPasswordInput = $('<input style="width:100%" id="red-ui-projects-dialog-screen-create-project-repo-pass" type="password"></input>').appendTo(subrow);
+                        projectRepoPasswordInput.typedInput({type:"cred"});
                         // -----------------------------------------------------
 
                         // Repo credentials - key/passphrase -------------------
@@ -1384,12 +1388,13 @@ RED.projects = (function() {
                         subrow = $('<div style="width: calc(50% - 10px); margin-left: 20px; display:inline-block;"></div>').appendTo(row);
                         $('<label for="red-ui-projects-dialog-screen-create-project-repo-passphrase">'+RED._("projects.create.passphrase")+'</label>').appendTo(subrow);
                         projectRepoPassphrase = $('<input id="red-ui-projects-dialog-screen-create-project-repo-passphrase" type="password"></input>').appendTo(subrow);
+                        projectRepoPassphrase.typedInput({type:"cred"});
 
                         subrow = $('<div class="form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-sshkey"></div>').appendTo(cloneAuthRows);
                         var sshwarningRow = $('<div class="red-ui-projects-dialog-screen-create-row-auth-error-no-keys"></div>').hide().appendTo(subrow);
                         $('<div class="form-row"><i class="fa fa-warning"></i> '+RED._("projects.create.desc2")+'</div>').appendTo(sshwarningRow);
                         subrow = $('<div style="text-align: center">').appendTo(sshwarningRow);
-                        $('<button class="red-ui-button">'+RED._("projects.create.add-ssh-key")+'</button>').appendTo(subrow).on("click", function(e) {
+                        $('<button class="red-ui-button red-ui-projects-dialog-button">'+RED._("projects.create.add-ssh-key")+'</button>').appendTo(subrow).on("click", function(e) {
                             e.preventDefault();
                             $('#red-ui-projects-dialog-cancel').trigger("click");
                             RED.userSettings.show('gitconfig');
@@ -1403,8 +1408,8 @@ RED.projects = (function() {
                         // Secret - clone
                         row = $('<div class="hide form-row red-ui-projects-dialog-screen-create-row red-ui-projects-dialog-screen-create-row-clone"></div>').appendTo(container);
                         $('<label>'+RED._("projects.create.credentials-encryption-key")+'</label>').appendTo(row);
-                        projectSecretInput = $('<input type="password"></input>').appendTo(row);
-
+                        projectSecretInput = $('<input style="width:100%" type="password"></input>').appendTo(row);
+                        projectSecretInput.typedInput({type:"cred"});
 
                         switch(options.screen||"empty") {
                             case "empty": createAsEmpty.trigger("click"); break;
@@ -1617,14 +1622,14 @@ RED.projects = (function() {
     function deleteProject(row,name,done) {
         var cover = $('<div class="red-ui-projects-dialog-project-list-entry-delete-confirm"></div>').on("click", function(evt) { evt.stopPropagation(); }).appendTo(row);
         $('<span>').text(RED._("projects.delete.confirm")).appendTo(cover);
-        $('<button class="red-ui-button">'+RED._("common.label.cancel")+'</button>')
+        $('<button class="red-ui-button red-ui-projects-dialog-button">'+RED._("common.label.cancel")+'</button>')
             .appendTo(cover)
             .on("click", function(e) {
                 e.stopPropagation();
                 cover.remove();
                 done(true);
             });
-        $('<button class="red-ui-button primary">'+RED._("common.label.delete")+'</button>')
+        $('<button class="red-ui-button red-ui-projects-dialog-button primary">'+RED._("common.label.delete")+'</button>')
             .appendTo(cover)
             .on("click", function(e) {
                 e.stopPropagation();
@@ -1808,7 +1813,7 @@ RED.projects = (function() {
                 header.addClass("selectable");
 
                 var tools = $('<div class="red-ui-projects-dialog-project-list-entry-tools"></div>').appendTo(header);
-                $('<button class="red-ui-button red-ui-button-small" style="float: right;"><i class="fa fa-trash"></i></button>')
+                $('<button class="red-ui-button red-ui-projects-dialog-button red-ui-button-small" style="float: right;"><i class="fa fa-trash"></i></button>')
                     .appendTo(tools)
                     .on("click", function(e) {
                         e.stopPropagation();
@@ -1962,7 +1967,8 @@ RED.projects = (function() {
                         var isSSH = false;
                         if (/^https?:\/\//.test(url)) {
                             $('<div class="form-row"><label for="projects-user-auth-username">'+RED._("projects.send-req.username")+'</label><input id="projects-user-auth-username" type="text"></input></div>'+
-                            '<div class="form-row"><label for=projects-user-auth-password">'+RED._("projects.send-req.password")+'</label><input id="projects-user-auth-password" type="password"></input></div>').appendTo(message);
+                            '<div class="form-row"><label for="projects-user-auth-password">'+RED._("projects.send-req.password")+'</label><input id="projects-user-auth-password" type="password"></input></div>').appendTo(message);
+                            message.find("#projects-user-auth-password").typedInput({type:"cred"})
                         } else if (/^(?:ssh|[\d\w\.\-_]+@[\w\.]+):(?:\/\/)?/.test(url)) {
                             isSSH = true;
                             var row = $('<div class="form-row"></div>').appendTo(message);
@@ -1980,7 +1986,7 @@ RED.projects = (function() {
                             });
                             row = $('<div class="form-row"></div>').appendTo(message);
                             $('<label for="projects-user-auth-passphrase">'+RED._("projects.send-req.passphrase")+'</label>').appendTo(row);
-                            $('<input id="projects-user-auth-passphrase" type="password"></input>').appendTo(row);
+                            $('<input id="projects-user-auth-passphrase" type="password"></input>').appendTo(row).typedInput({type:"cred"});
                         }
 
                         var notification = RED.notify(message,{
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
index e42125c23..6a8e73938 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/projects.scss
@@ -90,7 +90,7 @@
             font-size: 1.2em;
         }
     }
-    button.red-ui-button {
+    button.red-ui-button.red-ui-projects-dialog-button {
         width: calc(50% - 80px);
         margin: 20px;
         height: auto;