From 7909825c791cf339415892da33e8b64fa6f76da7 Mon Sep 17 00:00:00 2001
From: Vojtech Szocs <vszocs@redhat.com>
Date: Wed, 29 Oct 2025 19:30:04 +0000
Subject: [PATCH 1/3] Add copy to clipboard buttons to display token page

---
 pkg/server/tokenrequest/tokenrequest.go | 32 +++++++++++++++++++++----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/pkg/server/tokenrequest/tokenrequest.go b/pkg/server/tokenrequest/tokenrequest.go
index 7ed86387d..7954d8444 100644
--- a/pkg/server/tokenrequest/tokenrequest.go
+++ b/pkg/server/tokenrequest/tokenrequest.go
@@ -144,6 +144,8 @@ func (t *tokenRequest) displayTokenPost(osinOAuthClient *osincli.Client, w http.
 	}
 
 	data.AccessToken = accessData.AccessToken
+	data.AccessTokenJSStr = template.JSStr(data.AccessToken)
+	data.PublicMasterURLJSStr = template.JSStr(data.PublicMasterURL)
 	renderToken(w, data)
 }
 
@@ -178,9 +180,11 @@ type sharedData struct {
 type tokenData struct {
 	sharedData
 
-	AccessToken     string
-	PublicMasterURL string
-	LogoutURL       string
+	AccessToken          string
+	AccessTokenJSStr     template.JSStr
+	PublicMasterURL      string
+	PublicMasterURLJSStr template.JSStr
+	LogoutURL            string
 }
 
 func getBaseURL(req *http.Request) (*url.URL, error) {
@@ -214,6 +218,7 @@ const cssStyle = `
 	code,pre { font-family: Menlo, Monaco, Consolas, monospace; }
 	code     { font-weight: 300; font-size: 1.5em; margin-bottom: 1em; display: inline-block;  color: #646464;  }
 	pre      { padding-left: 1em; border-radius: 5px; color: #003d6e; background-color: #EAEDF0; padding: 1.5em 0 1.5em 4.5em; white-space: normal; text-indent: -2em; }
+	pre>button { margin-left: 1.5em; margin-right: 1.5em; float: right; }
 	a        { color: #00f; text-decoration: none; }
 	a:hover  { text-decoration: underline; }
 	button   { background: none; border: none; color: #00f; text-decoration: none; font: inherit; padding: 0; }
@@ -232,11 +237,28 @@ var tokenTemplate = template.Must(template.New("tokenTemplate").Parse(
   <h2>Your API token is</h2>
   <code>{{.AccessToken}}</code>
 
+  <script>
+    var commands = {
+      login: 'oc login --token={{.AccessTokenJSStr}} --server={{.PublicMasterURLJSStr}}',
+      apiCall: 'curl -H "Authorization: Bearer {{.AccessTokenJSStr}}" "{{.PublicMasterURLJSStr}}/apis/user.openshift.io/v1/users/~"',
+    };
+  </script>
+
   <h2>Log in with this token</h2>
-  <pre>oc login <span class="nowrap">--token={{.AccessToken}}</span> <span class="nowrap">--server={{.PublicMasterURL}}</span></pre>
+  <pre>
+    oc login
+    <span class="nowrap">--token={{.AccessToken}}</span>
+    <span class="nowrap">--server={{.PublicMasterURL}}</span>
+    <button onclick="navigator.clipboard.writeText(commands.login)">Copy</button>
+  </pre>
 
   <h3>Use this token directly against the API</h3>
-  <pre>curl <span class="nowrap">-H "Authorization: Bearer {{.AccessToken}}"</span> <span class="nowrap">"{{.PublicMasterURL}}/apis/user.openshift.io/v1/users/~"</span></pre>
+  <pre>
+    curl
+    <span class="nowrap">-H "Authorization: Bearer {{.AccessToken}}"</span>
+    <span class="nowrap">"{{.PublicMasterURL}}/apis/user.openshift.io/v1/users/~"</span>
+    <button onclick="navigator.clipboard.writeText(commands.apiCall)">Copy</button>
+  </pre>
 {{ end }}
 
 <br><br>

From 34ca6e5170a4ae2fd9c53e85c5a54b51325fa9a8 Mon Sep 17 00:00:00 2001
From: Vojtech Szocs <vszocs@redhat.com>
Date: Wed, 10 Dec 2025 20:26:21 +0100
Subject: [PATCH 2/3] Add Copy button feedback & add Show button to reveal data

---
 pkg/server/tokenrequest/tokenrequest.go | 86 +++++++++++++++++++------
 1 file changed, 67 insertions(+), 19 deletions(-)

diff --git a/pkg/server/tokenrequest/tokenrequest.go b/pkg/server/tokenrequest/tokenrequest.go
index 7954d8444..e03895f84 100644
--- a/pkg/server/tokenrequest/tokenrequest.go
+++ b/pkg/server/tokenrequest/tokenrequest.go
@@ -219,6 +219,8 @@ const cssStyle = `
 	code     { font-weight: 300; font-size: 1.5em; margin-bottom: 1em; display: inline-block;  color: #646464;  }
 	pre      { padding-left: 1em; border-radius: 5px; color: #003d6e; background-color: #EAEDF0; padding: 1.5em 0 1.5em 4.5em; white-space: normal; text-indent: -2em; }
 	pre>button { margin-left: 1.5em; margin-right: 1.5em; float: right; }
+	pre>button:disabled { color: #444; }
+	pre>button:disabled:hover { text-decoration: none; cursor: default; }
 	a        { color: #00f; text-decoration: none; }
 	a:hover  { text-decoration: underline; }
 	button   { background: none; border: none; color: #00f; text-decoration: none; font: inherit; padding: 0; }
@@ -234,31 +236,77 @@ var tokenTemplate = template.Must(template.New("tokenTemplate").Parse(
 {{ if .Error }}
   {{ .Error }}
 {{ else }}
-  <h2>Your API token is</h2>
-  <code>{{.AccessToken}}</code>
-
   <script>
-    var commands = {
-      login: 'oc login --token={{.AccessTokenJSStr}} --server={{.PublicMasterURLJSStr}}',
-      apiCall: 'curl -H "Authorization: Bearer {{.AccessTokenJSStr}}" "{{.PublicMasterURLJSStr}}/apis/user.openshift.io/v1/users/~"',
-    };
+    function codeSnippet(e, textBlocks) {
+      const snippet = textBlocks.join(' ');
+
+      const snippetHTML = textBlocks
+        .map((text) => '<span class="nowrap">' + text + '</span>')
+        .join(' ');
+
+      const copyButton = document.createElement('button');
+      copyButton.innerText = 'Copy';
+
+      copyButton.onclick = () => {
+        copyButton.disabled = true;
+        navigator.clipboard.writeText(snippet)
+          .then(() => {
+            copyButton.innerText = 'Copied!';
+            setTimeout(() => {
+              copyButton.innerText = 'Copy';
+              copyButton.disabled = false;
+            }, 3000);
+          })
+          .catch((error) => {
+            copyButton.innerText = 'Error!';
+            setTimeout(() => {
+              copyButton.innerText = 'Copy';
+              copyButton.disabled = false;
+            }, 3000);
+            console.error('Failed to copy snippet to clipboard', error);
+          });
+      };
+
+      const showButton = document.createElement('button');
+      showButton.innerText = 'Show';
+
+      showButton.onclick = () => {
+        e.innerHTML = snippetHTML;
+        e.appendChild(copyButton);
+      };
+
+      e.innerHTML = '***';
+      e.appendChild(copyButton);
+      e.appendChild(showButton);
+    }
   </script>
 
+  <h2>Your API token is</h2>
+  <pre id="token"></pre>
+
   <h2>Log in with this token</h2>
-  <pre>
-    oc login
-    <span class="nowrap">--token={{.AccessToken}}</span>
-    <span class="nowrap">--server={{.PublicMasterURL}}</span>
-    <button onclick="navigator.clipboard.writeText(commands.login)">Copy</button>
-  </pre>
+  <pre id="login"></pre>
 
   <h3>Use this token directly against the API</h3>
-  <pre>
-    curl
-    <span class="nowrap">-H "Authorization: Bearer {{.AccessToken}}"</span>
-    <span class="nowrap">"{{.PublicMasterURL}}/apis/user.openshift.io/v1/users/~"</span>
-    <button onclick="navigator.clipboard.writeText(commands.apiCall)">Copy</button>
-  </pre>
+  <pre id="apiCall"></pre>
+
+  <script>
+    codeSnippet(document.getElementById('token'), [
+      '{{.AccessTokenJSStr}}',
+    ]);
+
+    codeSnippet(document.getElementById('login'), [
+      'oc login',
+      '--token={{.AccessTokenJSStr}}',
+      '--server={{.PublicMasterURLJSStr}}',
+    ]);
+
+    codeSnippet(document.getElementById('apiCall'), [
+      'curl',
+      '-H "Authorization: Bearer {{.AccessTokenJSStr}}"',
+      '"{{.PublicMasterURLJSStr}}/apis/user.openshift.io/v1/users/~"',
+    ]);
+  </script>
 {{ end }}
 
 <br><br>

From 89206d3bc472447ba9010d591300bc197601c66f Mon Sep 17 00:00:00 2001
From: Vojtech Szocs <vszocs@redhat.com>
Date: Wed, 29 Apr 2026 16:37:47 +0000
Subject: [PATCH 3/3] Ensure that snippet content is treated as text only

---
 pkg/server/tokenrequest/tokenrequest.go | 28 ++++++++++++++-----------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/pkg/server/tokenrequest/tokenrequest.go b/pkg/server/tokenrequest/tokenrequest.go
index e03895f84..5d03f335d 100644
--- a/pkg/server/tokenrequest/tokenrequest.go
+++ b/pkg/server/tokenrequest/tokenrequest.go
@@ -237,32 +237,36 @@ var tokenTemplate = template.Must(template.New("tokenTemplate").Parse(
   {{ .Error }}
 {{ else }}
   <script>
-    function codeSnippet(e, textBlocks) {
-      const snippet = textBlocks.join(' ');
+    function codeSnippet(e, textBlocks = []) {
+      const snippetString = textBlocks.join(' ').trim();
 
       const snippetHTML = textBlocks
-        .map((text) => '<span class="nowrap">' + text + '</span>')
+        .map((text) => {
+          const span = document.createElement('span');
+          span.className = 'nowrap';
+          span.innerText = text;
+          return span.outerHTML;
+        })
         .join(' ');
 
       const copyButton = document.createElement('button');
       copyButton.innerText = 'Copy';
 
+      const resetCopyButton = () => {
+        copyButton.innerText = 'Copy';
+        copyButton.disabled = false;
+      };
+
       copyButton.onclick = () => {
         copyButton.disabled = true;
-        navigator.clipboard.writeText(snippet)
+        navigator.clipboard.writeText(snippetString)
           .then(() => {
             copyButton.innerText = 'Copied!';
-            setTimeout(() => {
-              copyButton.innerText = 'Copy';
-              copyButton.disabled = false;
-            }, 3000);
+            setTimeout(resetCopyButton, 3000);
           })
           .catch((error) => {
             copyButton.innerText = 'Error!';
-            setTimeout(() => {
-              copyButton.innerText = 'Copy';
-              copyButton.disabled = false;
-            }, 3000);
+            setTimeout(resetCopyButton, 3000);
             console.error('Failed to copy snippet to clipboard', error);
           });
       };