From 0944fb39ba8b774eb116c8bfb5784dd4de34d785 Mon Sep 17 00:00:00 2001
From: Thibaut Patel <thibaut@ghost.org>
Date: Wed, 24 Mar 2021 19:14:46 +0100
Subject: [PATCH] Updated the staff access token to use the existing patterns

issue https://github.com/TryGhost/Team/issues/497
---
 .../app/components/modal-regenerate-token.hbs |  6 +--
 ghost/admin/app/controllers/staff/user.js     |  8 +++-
 ghost/admin/app/styles/layouts/apps.css       | 11 ++++-
 ghost/admin/app/templates/staff/user.hbs      | 42 +++++++++++--------
 4 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/ghost/admin/app/components/modal-regenerate-token.hbs b/ghost/admin/app/components/modal-regenerate-token.hbs
index 2b852172c8..021fede7c2 100644
--- a/ghost/admin/app/components/modal-regenerate-token.hbs
+++ b/ghost/admin/app/components/modal-regenerate-token.hbs
@@ -1,11 +1,11 @@
 <header class="modal-header">
-    <h1>Regenerate your Personal Token</h1>
+    <h1>Regenerate your Staff Access Token</h1>
 </header>
 <a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
 
 <div class="modal-body">
     <p>
-        You can regenerate your Personal Token any time, but any scripts or applications using it will need to be updated.
+        You can regenerate your Staff Access Token any time, but any scripts or applications using it will need to be updated.
     </p>
     {{#if this.errorMessage}}
         <p class='red'> {{this.errorMessage}}</p>
@@ -15,6 +15,6 @@
 <div class="modal-footer">
     <button {{action "closeModal"}} class="gh-btn" autofocus><span>Cancel</span></button>
     <button class="gh-btn gh-btn-icon gh-btn-red" {{action "confirm"}}>
-        <span>Regenerate your Personal Token</span>
+        <span>Regenerate your Staff Access Token</span>
     </button>
 </div>
diff --git a/ghost/admin/app/controllers/staff/user.js b/ghost/admin/app/controllers/staff/user.js
index 6542e42f03..50176e2aac 100644
--- a/ghost/admin/app/controllers/staff/user.js
+++ b/ghost/admin/app/controllers/staff/user.js
@@ -1,5 +1,6 @@
 import Controller from '@ember/controller';
 import boundOneWay from 'ghost-admin/utils/bound-one-way';
+import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
 import isNumber from 'ghost-admin/utils/isNumber';
 import validator from 'validator';
 import windowProxy from 'ghost-admin/utils/window-proxy';
@@ -471,5 +472,10 @@ export default Controller.extend({
                 this.notifications.showAPIError(error, {key: 'user.update'});
             }
         }
-    }).group('saveHandlers')
+    }).group('saveHandlers'),
+
+    copyContentKey: task(function* () {
+        copyTextToClipboard(this.personalToken);
+        yield timeout(this.isTesting ? 50 : 3000);
+    })
 });
diff --git a/ghost/admin/app/styles/layouts/apps.css b/ghost/admin/app/styles/layouts/apps.css
index c0eaeb2e58..eb4045b69c 100644
--- a/ghost/admin/app/styles/layouts/apps.css
+++ b/ghost/admin/app/styles/layouts/apps.css
@@ -174,7 +174,7 @@
     border-top: none;
 }
 
-.apps-card-left {   
+.apps-card-left {
     display: flex;
     align-items: center;
 }
@@ -372,6 +372,13 @@
     right: -3px;
 }
 
+.app-api-personal-token-buttons {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: 5px;
+}
+
 .app-button-regenerate {
     display: flex;
     align-items: center;
@@ -512,4 +519,4 @@
 
 .apps-card-app-orb.rot-3 {
     transform: rotate(270deg);
-}
\ No newline at end of file
+}
diff --git a/ghost/admin/app/templates/staff/user.hbs b/ghost/admin/app/templates/staff/user.hbs
index e2011b357d..d51e47d581 100644
--- a/ghost/admin/app/templates/staff/user.hbs
+++ b/ghost/admin/app/templates/staff/user.hbs
@@ -354,34 +354,42 @@
                     <div class="pa5">
                         <fieldset class="user-details-form">
                             <GhFormGroup>
-                                <label for="personal-token">Personal Token</label>
-                                <GhTextInput
-                                        @id="personal-token"
-                                        @value={{readonly this.personalToken}}
-                                        @readonly
-                                        @type="text"
-                                        onclick="this.select()"
-                                    />
+                                <label for="personal-token">Staff Access Token</label>
+                                <div class="relative flex items-center {{unless this.copyContentKey.isRunning "hide-child-instant"}}">
+                                    <GhTextInput
+                                            @id="personal-token"
+                                            @value={{readonly this.personalToken}}
+                                            @readonly
+                                            @type="text"
+                                            onclick="this.select()"
+                                        />
+                                    <div class="app-api-personal-token-buttons child">
+                                        <button type="button" {{action "confirmRegenerateTokenModal"}} class="app-button-regenerate" data-tooltip="Regenerate">
+                                            {{svg-jar "reload" class="w4 h4 stroke-midgrey"}}
+                                        </button>
+                                        <button type="button" {{action (perform this.copyContentKey)}} class="app-button-copy">
+                                            {{#if this.copyContentKey.isRunning}}
+                                            {{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
+                                            {{else}}
+                                            Copy
+                                            {{/if}}
+                                        </button>
+                                    </div>
+                                </div>
                                 <p>
                                     Give apps personal access without sharing your email/password.
                                 </p>
                                 {{#if this.personalTokenRegenerated}}
-                                    <p class="green"> Personal Token was successfully regenerated </p>
+                                    <p class="green"> Staff Access Token was successfully regenerated </p>
                                 {{/if}}
-
-                            </GhFormGroup>
-
-                            <div class="form-group">
-                                <button class="gh-btn gh-btn-icon gh-btn-red" {{action "confirmRegenerateTokenModal"}}>
-                                    <span>Regenerate</span>
-                                </button>
                                 {{#if this.showRegenerateTokenModal}}
                                     <GhFullscreenModal @modal="regenerate-token"
                                         @confirm={{action "regenerateToken"}}
                                         @close={{action "cancelRegenerateTokenModal"}}
                                         @modifier="action wide" />
                                 {{/if}}
-                            </div>
+
+                            </GhFormGroup>
                         </fieldset>
                     </div>
                 </form>