Add copy to clipboard buttons to display token page

Author: vojtechszocs

pkg/server/tokenrequest/tokenrequest.go

@@ -214,6 +214,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; }
@@ -224,6 +225,26 @@ const cssStyle = `
 </style>
 `
 
+const jsHandleCopyToClipboard = `
+<script>
+  const isCopyButton = (node) => node.localName === "button"
+    && node.attributes.getNamedItem("role") !== null
+    && node.attributes.getNamedItem("role").value === "copy-to-clipboard";
+
+  document.querySelectorAll("button[role=copy-to-clipboard]").forEach((button) => {
+    button.onclick = () => {
+      const textToCopy = Array.from(button.parentElement.childNodes.values()).reduce((acc, node) => {
+        return isCopyButton(node) ? acc : acc + node.textContent;
+      }, "");
+
+      if (navigator.clipboard) {
+        navigator.clipboard.writeText(textToCopy);
+      }
+    };
+  });
+</script>
+`
+
 var tokenTemplate = template.Must(template.New("tokenTemplate").Parse(
 	cssStyle + `
 {{ if .Error }}
@@ -233,10 +254,10 @@ var tokenTemplate = template.Must(template.New("tokenTemplate").Parse(
   <code>{{.AccessToken}}</code>
 
   <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 role="copy-to-clipboard">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 role="copy-to-clipboard">Copy</button></pre>
 {{ end }}
 
 <br><br>
@@ -251,7 +272,7 @@ var tokenTemplate = template.Must(template.New("tokenTemplate").Parse(
     </button>
   </form>
 {{ end }}
-`))
+` + jsHandleCopyToClipboard))
 
 var formTemplate = template.Must(template.New("formTemplate").Parse(
 	cssStyle + `