Settings::ApiTokens: Improve token value display

Author: Turbo87

app/components/settings/api-tokens.hbs

@@ -73,12 +73,21 @@
       </div>
 
       {{#if token.token}}
-        <div local-class="new-token" data-test-token>
+        <div local-class="new-token">
           Please record this token somewhere, you cannot retrieve
           its value again. For use on the command line you can save it to <code>~/.cargo/credentials</code>
           with:
 
-          <pre class="terminal">cargo login {{token.token}}</pre>
+          <div local-class="token-display">
+            <span local-class="token-value" data-test-token>{{token.token}}</span>
+
+            {{#if (is-clipboard-supported)}}
+              <CopyButton @copyText={{token.token}} local-class="copy-button">
+                <span local-class="copy-button-label">Copy</span>
+                {{svg-jar "copy" aria-hidden="true" local-class="copy-button-icon"}}
+              </CopyButton>
+            {{/if}}
+          </div>
         </div>
       {{/if}}
 

app/components/settings/api-tokens.module.css

@@ -83,14 +83,44 @@
 
 .new-token {
     margin: 24px 0;
+}
 
-    pre {
-        border-radius: 4px;
-        margin-bottom: 0;
-        user-select: all;
+.token-display {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    background: var(--main-color);
+    color: white;
+    font-family: var(--font-monospace);
+    border-radius: 4px;
+    margin-top: 16px;
+}
+
+.token-value {
+    padding: 20px;
+    user-select: all;
+}
+
+.copy-button {
+    composes: button-reset from '../../styles/shared/buttons.module.css';
+    align-self: stretch;
+    padding: 0 16px;
+    cursor: pointer;
+
+    &:hover {
+        color: #ddd8b2;
     }
 }
 
+.copy-button-label {
+    composes: sr-only from '../../styles/shared/a11y.module.css';
+}
+
+.copy-button-icon {
+    width: 24px;
+    height: 24px;
+}
+
 @media (min-width: 640px) {
     .new-token-form {
         display: grid;

tests/acceptance/api-token-test.js

@@ -126,7 +126,7 @@ module('Acceptance | api-tokens', function (hooks) {
     assert.dom('[data-test-api-token="3"] [data-test-revoke-token-button]').exists();
     assert.dom('[data-test-api-token="3"] [data-test-saving-spinner]').doesNotExist();
     assert.dom('[data-test-api-token="3"] [data-test-error]').doesNotExist();
-    assert.dom('[data-test-token]').includesText(`cargo login ${token.token}`);
+    assert.dom('[data-test-token]').hasText(token.token);
   });
 
   test('navigating away while creating a token does not keep it in the list', async function (assert) {