From 1851134e9283c49f6558a8514c39ba2e23778b49 Mon Sep 17 00:00:00 2001
From: Herman van Rink <rink@initfour.nl>
Date: Sun, 12 Nov 2023 21:26:48 +0100
Subject: [PATCH 1/8] Enhance ssh keys textarea with Javascript, #6604

---
 .../web/sites/templates/shell_user_edit.htm   | 176 +++++++++++++++++-
 1 file changed, 174 insertions(+), 2 deletions(-)

diff --git a/interface/web/sites/templates/shell_user_edit.htm b/interface/web/sites/templates/shell_user_edit.htm
index e96986a9fd..9360715476 100644
--- a/interface/web/sites/templates/shell_user_edit.htm
+++ b/interface/web/sites/templates/shell_user_edit.htm
@@ -66,8 +66,18 @@
             </div>
 			<tmpl_if name="ssh_authentication" op="!=" value="password">
             <div class="form-group">
-                <label for="ssh_rsa" class="col-sm-3 control-label">{tmpl_var name='ssh_rsa_txt'}</label>
-                <div class="col-sm-9"><textarea class="form-control" name="ssh_rsa" id="ssh_rsa" rows="10" cols="30">{tmpl_var name='ssh_rsa'}</textarea></div>
+                <label for="ssh_rsa" class="col-sm-3 control-label">{tmpl_var name='ssh_rsa_txt'}
+                    <button onclick="toggleView(); return false;">Toggle View</button>
+                </label>
+                <div class="col-sm-9"><textarea class="form-control" name="ssh_rsa" id="ssh_rsa" rows="10" cols="30">{tmpl_var name='ssh_rsa'}</textarea>
+
+                    <div id="sshWidgetContainer"></div>
+
+                    <div id="addKeyContainer">
+                        <input type="text" id="newSSHKey" placeholder="Enter new SSH key">
+                        <button onclick="addNewKey()">Add Key</button>
+                    </div>
+                </div>
             </div>
 			</tmpl_if>
             <div class="form-group">
@@ -84,3 +94,165 @@
             <button class="btn btn-default formbutton-success" type="button" value="{tmpl_var name='btn_save_txt'}" data-submit-form="pageForm" data-form-action="sites/shell_user_edit.php">{tmpl_var name='btn_save_txt'}</button>
             <button class="btn btn-default formbutton-default" type="button" value="{tmpl_var name='btn_cancel_txt'}" data-load-content="sites/shell_user_list.php">{tmpl_var name='btn_cancel_txt'}</button>
         </div></div>
+
+<script>
+    function createSSHWidget(type, comment, index, textarea) {
+        const widget = document.createElement('div');
+        widget.classList.add('ssh-widget');
+        widget.textContent = `${type}, ${comment}`;
+
+        // Add a data attribute to the widget for later identification
+        widget.setAttribute('data-index', index);
+
+        // Add a delete icon to the widget
+        const deleteIcon = document.createElement('i');
+        deleteIcon.classList.add('fa', 'fa-trash', 'delete-icon');
+        deleteIcon.addEventListener('click', () => deleteRow(index));
+        widget.appendChild(deleteIcon);
+
+        // Add a copy icon to the widget
+        const copyIcon = document.createElement('i');
+        copyIcon.classList.add('fa', 'fa-copy', 'copy-icon');
+        copyIcon.addEventListener('click', () => copyToClipboard(index, textarea));
+        widget.appendChild(copyIcon);
+
+        // Add a tooltip to show the full pubkey on hover
+        const fullPubkeyTooltip = document.createElement('div');
+        fullPubkeyTooltip.classList.add('full-pubkey-tooltip');
+        fullPubkeyTooltip.textContent = textarea.value.trim().split('\n')[index];
+        widget.appendChild(fullPubkeyTooltip);
+
+        return widget;
+    }
+
+    function convertToWidget() {
+        const textarea = document.getElementById('ssh_rsa');
+        const widgetContainer = document.getElementById('sshWidgetContainer');
+        widgetContainer.innerHTML = ''; // Clear existing widgets
+
+        const publicKeys = textarea.value.trim().split('\n');
+        for (let i = 0; i < publicKeys.length; i++) {
+            const publicKey = publicKeys[i];
+            const parts = publicKey.split(/\s+/);
+            const type = parts[0];
+            const comment = parts[parts.length - 1];
+
+            const widget = createSSHWidget(type, comment, i, textarea);
+            widgetContainer.appendChild(widget);
+        }
+    }
+
+    function toggleView() {
+        const textarea = document.getElementById('ssh_rsa');
+        const widgetContainer = document.getElementById('sshWidgetContainer');
+        const addKeyContainer = document.getElementById('addKeyContainer');
+
+        if (textarea.style.display == "" || textarea.style.display === 'block') {
+            // Switching to widget view
+            textarea.style.display = 'none';
+            widgetContainer.style.display = 'block';
+            addKeyContainer.style.display = 'block';
+        } else {
+            // Switching to textarea view
+            textarea.style.display = 'block';
+            widgetContainer.style.display = 'none';
+            addKeyContainer.style.display = 'none';
+        }
+    }
+
+    function deleteRow(index) {
+        const textarea = document.getElementById('ssh_rsa');
+        const widgetContainer = document.getElementById('sshWidgetContainer');
+
+        // Delete the corresponding row from the textarea
+        const publicKeys = textarea.value.trim().split('\n');
+        publicKeys.splice(index, 1);
+        textarea.value = publicKeys.join('\n');
+
+        // Update the widget display
+        convertToWidget();
+    }
+
+    function addNewKey() {
+        const textarea = document.getElementById('ssh_rsa');
+        const newSSHKeyInput = document.getElementById('newSSHKey');
+
+        // Append the new key to the textarea
+        textarea.value += '\n' + newSSHKeyInput.value;
+
+        // Update the widget display
+        convertToWidget();
+
+        // Clear the input field
+        newSSHKeyInput.value = '';
+    }
+
+    function copyToClipboard(index, textarea) {
+    const fullPubkey = textarea.value.trim().split('\n')[index];
+    navigator.clipboard.writeText(fullPubkey).then(() => {
+        alert('Public key copied to clipboard!');
+    }).catch((error) => {
+        console.error('Unable to copy to clipboard', error);
+    });
+    }
+
+
+    // Call the function initially to convert the existing textarea content
+    convertToWidget();
+    toggleView();
+
+    // Attach an event listener to dynamically update the widgets when textarea content changes
+    document.getElementById('ssh_rsa').addEventListener('input', convertToWidget);
+</script>
+
+
+    <style>
+        /* Add your custom styling here */
+        .ssh-widget {
+            border: 1px solid #ccc;
+            padding: 10px;
+            margin-bottom: 10px;
+            position: relative;
+            cursor: pointer;
+        }
+
+        .delete-icon {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            cursor: pointer;
+            color: #888;
+        }
+
+        .copy-icon {
+            position: absolute;
+            top: 5px;
+            right: 30px;
+            cursor: pointer;
+            color: #888;
+        }
+
+        .full-pubkey-tooltip {
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #333;
+            color: #fff;
+            padding: 5px;
+            border-radius: 5px;
+            display: none;
+            z-index: 1;
+        }
+
+        .ssh-widget:hover .full-pubkey-tooltip {
+            display: block;
+        }
+
+        #addKeyContainer {
+            display: none;
+        }
+        #newSSHKey {
+            width: 80%;
+        }
+    </style>
-- 
GitLab


From 2a3fbddf65cd6a2bb0971844584a5805d17cb0e7 Mon Sep 17 00:00:00 2001
From: Herman van Rink <rink@initfour.nl>
Date: Fri, 12 Jan 2024 21:10:05 +0100
Subject: [PATCH 2/8] Handle whitespace prefixes

---
 interface/web/sites/templates/shell_user_edit.htm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/interface/web/sites/templates/shell_user_edit.htm b/interface/web/sites/templates/shell_user_edit.htm
index 9360715476..a3e632de8d 100644
--- a/interface/web/sites/templates/shell_user_edit.htm
+++ b/interface/web/sites/templates/shell_user_edit.htm
@@ -132,7 +132,7 @@
 
         const publicKeys = textarea.value.trim().split('\n');
         for (let i = 0; i < publicKeys.length; i++) {
-            const publicKey = publicKeys[i];
+            const publicKey = publicKeys[i].trim();;
             const parts = publicKey.split(/\s+/);
             const type = parts[0];
             const comment = parts[parts.length - 1];
-- 
GitLab


From ab4b7c6d0c32e8dce09261a19e35ba63b618b46d Mon Sep 17 00:00:00 2001
From: Herman van Rink <rink@initfour.nl>
Date: Fri, 12 Jan 2024 21:10:18 +0100
Subject: [PATCH 3/8] Skip empty lines

---
 interface/web/sites/templates/shell_user_edit.htm | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/interface/web/sites/templates/shell_user_edit.htm b/interface/web/sites/templates/shell_user_edit.htm
index a3e632de8d..5f1a43efa4 100644
--- a/interface/web/sites/templates/shell_user_edit.htm
+++ b/interface/web/sites/templates/shell_user_edit.htm
@@ -133,6 +133,12 @@
         const publicKeys = textarea.value.trim().split('\n');
         for (let i = 0; i < publicKeys.length; i++) {
             const publicKey = publicKeys[i].trim();;
+
+            // Skip empty lines
+            if (publicKey === '') {
+                continue;
+            }
+
             const parts = publicKey.split(/\s+/);
             const type = parts[0];
             const comment = parts[parts.length - 1];
-- 
GitLab


From d01b45363982ba35fb14b54672f638585508583e Mon Sep 17 00:00:00 2001
From: Herman van Rink <rink@initfour.nl>
Date: Fri, 12 Jan 2024 21:10:42 +0100
Subject: [PATCH 4/8] Handle comments with spaces

---
 interface/web/sites/templates/shell_user_edit.htm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/interface/web/sites/templates/shell_user_edit.htm b/interface/web/sites/templates/shell_user_edit.htm
index 5f1a43efa4..6626eaabfd 100644
--- a/interface/web/sites/templates/shell_user_edit.htm
+++ b/interface/web/sites/templates/shell_user_edit.htm
@@ -141,7 +141,7 @@
 
             const parts = publicKey.split(/\s+/);
             const type = parts[0];
-            const comment = parts[parts.length - 1];
+            const comment = parts.slice(2).join(' '); // Handle comments with spaces
 
             const widget = createSSHWidget(type, comment, i, textarea);
             widgetContainer.appendChild(widget);
-- 
GitLab


From c41aac18de9b187fdf801733a4ed47dcd9854e35 Mon Sep 17 00:00:00 2001
From: Herman van Rink <rink@initfour.nl>
Date: Fri, 12 Jan 2024 21:18:21 +0100
Subject: [PATCH 5/8] Also skip comments

---
 interface/web/sites/templates/shell_user_edit.htm | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/interface/web/sites/templates/shell_user_edit.htm b/interface/web/sites/templates/shell_user_edit.htm
index 6626eaabfd..aba9e3c498 100644
--- a/interface/web/sites/templates/shell_user_edit.htm
+++ b/interface/web/sites/templates/shell_user_edit.htm
@@ -134,8 +134,8 @@
         for (let i = 0; i < publicKeys.length; i++) {
             const publicKey = publicKeys[i].trim();;
 
-            // Skip empty lines
-            if (publicKey === '') {
+            // Skip empty lines and comments
+            if (publicKey === '' || publicKey.startsWith('#')) {
                 continue;
             }
 
-- 
GitLab


From a62abdb1b9c524548d10e634d08ac3448546293e Mon Sep 17 00:00:00 2001
From: Herman van Rink <rink@initfour.nl>
Date: Sun, 14 Jan 2024 21:26:08 +0100
Subject: [PATCH 6/8] Styling

---
 interface/web/sites/templates/shell_user_edit.htm | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/interface/web/sites/templates/shell_user_edit.htm b/interface/web/sites/templates/shell_user_edit.htm
index aba9e3c498..2c931d4579 100644
--- a/interface/web/sites/templates/shell_user_edit.htm
+++ b/interface/web/sites/templates/shell_user_edit.htm
@@ -73,9 +73,11 @@
 
                     <div id="sshWidgetContainer"></div>
 
-                    <div id="addKeyContainer">
-                        <input type="text" id="newSSHKey" placeholder="Enter new SSH key">
-                        <button onclick="addNewKey()">Add Key</button>
+                    <div id="addKeyContainer" class="input-group col-sm-9" >
+                        <input type="text" id="newSSHKey" placeholder="Enter new SSH key"  class="form-control">
+                        <span class="input-group-btn">
+                            <button class="btn btn-default" type="button" onclick="addNewKey(); return false;">Add Key</button>
+                        </span>
                     </div>
                 </div>
             </div>
-- 
GitLab


From 11869b77be78aef956e9a01cf904aebebf75d047 Mon Sep 17 00:00:00 2001
From: Herman van Rink <rink@initfour.nl>
Date: Wed, 27 Mar 2024 12:31:28 +0100
Subject: [PATCH 7/8] Add support for options such as command=/bin/something

---
 .../web/sites/templates/shell_user_edit.htm   | 46 +++++++++++++++----
 1 file changed, 38 insertions(+), 8 deletions(-)

diff --git a/interface/web/sites/templates/shell_user_edit.htm b/interface/web/sites/templates/shell_user_edit.htm
index 2c931d4579..e3a8103d6e 100644
--- a/interface/web/sites/templates/shell_user_edit.htm
+++ b/interface/web/sites/templates/shell_user_edit.htm
@@ -98,14 +98,21 @@
         </div></div>
 
 <script>
-    function createSSHWidget(type, comment, index, textarea) {
+    function createSSHWidget(type, comment, optionsString, index, textarea) {
         const widget = document.createElement('div');
         widget.classList.add('ssh-widget');
         widget.textContent = `${type}, ${comment}`;
-
         // Add a data attribute to the widget for later identification
         widget.setAttribute('data-index', index);
 
+        // Add a options span to the widget
+        if (optionsString != '') {
+            widget.appendChild(document.createElement('br'));
+            const optionsSpan = document.createElement('span');
+            optionsSpan.textContent = `Options: ${optionsString}`;
+            widget.appendChild(optionsSpan);
+        }
+
         // Add a delete icon to the widget
         const deleteIcon = document.createElement('i');
         deleteIcon.classList.add('fa', 'fa-trash', 'delete-icon');
@@ -134,18 +141,41 @@
 
         const publicKeys = textarea.value.trim().split('\n');
         for (let i = 0; i < publicKeys.length; i++) {
-            const publicKey = publicKeys[i].trim();;
+            const publicKeyLine = publicKeys[i].trim();
 
             // Skip empty lines and comments
-            if (publicKey === '' || publicKey.startsWith('#')) {
+            if (publicKeyLine === '' || publicKeyLine.startsWith('#')) {
                 continue;
             }
 
-            const parts = publicKey.split(/\s+/);
-            const type = parts[0];
-            const comment = parts.slice(2).join(' '); // Handle comments with spaces
+            // Split the line into parts
+            const parts = publicKeyLine.split(/\s+/);
+
+            // Extract options and public key
+            let options = [];
+            let publicKey = '';
+            let publicKeyIndex = 0;
+
+            for (let j = 0; j < parts.length; j++) {
+                if (parts[j].includes('=')) {
+                    options.push(parts[j]);
+                } else {
+                    publicKey = parts[j];
+                    publicKeyIndex = j;
+                    break;
+                }
+            }
+
+            // Combine the options into a string
+            const optionsString = options.join(' ');
+
+            // Extract the type and comment from the public key
+            const type = publicKey.split(/\s+/)[0];
+
+            const comment = parts.slice(publicKeyIndex + 2).join(' '); // Handle comments with spaces
 
-            const widget = createSSHWidget(type, comment, i, textarea);
+            // Create the widget
+            const widget = createSSHWidget(type, comment, optionsString, i, textarea);
             widgetContainer.appendChild(widget);
         }
     }
-- 
GitLab


From 9948ea4bdeab083efb917694c3636abcc2feb5e7 Mon Sep 17 00:00:00 2001
From: Herman van Rink <rink@initfour.nl>
Date: Wed, 27 Mar 2024 12:32:21 +0100
Subject: [PATCH 8/8] Make sure the tooltip is in front

---
 interface/web/sites/templates/shell_user_edit.htm | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/interface/web/sites/templates/shell_user_edit.htm b/interface/web/sites/templates/shell_user_edit.htm
index e3a8103d6e..b0edab9fe7 100644
--- a/interface/web/sites/templates/shell_user_edit.htm
+++ b/interface/web/sites/templates/shell_user_edit.htm
@@ -280,7 +280,7 @@
             padding: 5px;
             border-radius: 5px;
             display: none;
-            z-index: 1;
+            z-index: 3;
         }
 
         .ssh-widget:hover .full-pubkey-tooltip {
-- 
GitLab