From 2398d73e241f86616d74cc94e7cf9f453c1ea46c Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Sat, 23 Feb 2019 16:48:18 +0700
Subject: [PATCH] Added copyable API Url to custom integration screen

---
 .../app/controllers/settings/integration.js   |  32 +++--
 .../app/templates/settings/integration.hbs    | 128 +++++++++---------
 2 files changed, 88 insertions(+), 72 deletions(-)

diff --git a/ghost/admin/app/controllers/settings/integration.js b/ghost/admin/app/controllers/settings/integration.js
index 3a7e889e2f..216960ab01 100644
--- a/ghost/admin/app/controllers/settings/integration.js
+++ b/ghost/admin/app/controllers/settings/integration.js
@@ -11,12 +11,20 @@ import {task, timeout} from 'ember-concurrency';
 
 export default Controller.extend({
     config: service(),
+    ghostPaths: service(),
 
     imageExtensions: IMAGE_EXTENSIONS,
     imageMimeTypes: IMAGE_MIME_TYPES,
 
     integration: alias('model'),
 
+    apiUrl: computed(function () {
+        let origin = window.location.origin;
+        let subdir = this.ghostPaths.subdir;
+
+        return this.ghostPaths.url.join(origin, subdir);
+    }),
+
     allWebhooks: computed(function () {
         return this.store.peekAll('webhook');
     }),
@@ -127,21 +135,29 @@ export default Controller.extend({
     }),
 
     copyContentKey: task(function* () {
-        this._copyInputTextToClipboard('input#content_key');
+        this._copyTextToClipboard(this.integration.contentKey.secret);
         yield timeout(3000);
     }),
 
     copyAdminKey: task(function* () {
-        this._copyInputTextToClipboard('input#admin_key');
+        this._copyTextToClipboard(this.integration.adminKey.secret);
         yield timeout(3000);
     }),
 
-    _copyInputTextToClipboard(selector) {
-        let input = document.querySelector(selector);
-        input.disabled = false;
-        input.focus();
-        input.select();
+    copyApiUrl: task(function* () {
+        this._copyTextToClipboard(this.apiUrl);
+        yield timeout(3000);
+    }),
+
+    _copyTextToClipboard(text) {
+        let textarea = document.createElement('textarea');
+        textarea.value = text;
+        textarea.setAttribute('readonly', '');
+        textarea.style.position = 'absolute';
+        textarea.style.left = '-9999px';
+        document.body.appendChild(textarea);
+        textarea.select();
         document.execCommand('copy');
-        input.disabled = true;
+        document.body.removeChild(textarea);
     }
 });
diff --git a/ghost/admin/app/templates/settings/integration.hbs b/ghost/admin/app/templates/settings/integration.hbs
index f1171324ee..496069d906 100644
--- a/ghost/admin/app/templates/settings/integration.hbs
+++ b/ghost/admin/app/templates/settings/integration.hbs
@@ -1,5 +1,5 @@
 <section class="gh-canvas">
-    <form {{action (perform "save") on="submit"}}>
+    <form class="mb15" {{action (perform "save") on="submit"}}>
         <header class="gh-canvas-header">
             <h2 class="gh-canvas-title" data-test-screen-title>
                 {{#link-to "settings.integrations" data-test-link="integrations-back"}}Integrations{{/link-to}}
@@ -92,70 +92,70 @@
         </div>
     </form>
 
-    <h4 class="mt15 midgrey f7 fw4 pb2 bb b--whitegrey">API Keys</h4>
-    <div class="flex flex-row mt5">
-        {{#with integration.contentKey as |contentKey|}}
-            {{#gh-validation-status-container class="flex flex-column w-100 mr5"}}
-                <div class="flex">
-                    <label for="content_key" class="flex-grow-1 darkgrey fw7 f8">
-                        Content API Key
-                    </label>
-                    <span class="db f8 midgrey">
-                        {{#if copyContentKey.isRunning}}
-                            Copied to clipboard
-                        {{else}}
-                            {{contentKey.lastSeenAtUTC}}
-                        {{/if}}
-                    </span>
-                </div>
-                <div class="relative hide-child mt1">
-                    <input id="content_key"
-                        class="w-100 pa3 bg-whitegrey-l2 midlightgrey ba b--whitegrey br3"
-                        type="text"
-                        value={{contentKey.secret}}
-                        disabled="true"
-                        data-test-input="content_key">
-
-                    <div class="absolute top-0 right-1">
-                        <div class="pt1 pr3 pb1 pl3 bg-black-70 child br3 f8 nudge-top--6 nudge-right--1">
-                            <button type="button" {{action (perform copyContentKey)}} class="white fw4">Copy</button>
-                        </div>
-                    </div>
-                </div>
-            {{/gh-validation-status-container}}
-        {{/with}}
-        {{#if config.enableDeveloperExperiments}}
-            {{#with integration.adminKey as |adminKey|}}
-                {{#gh-validation-status-container class="flex flex-column w-100 ml3"}}
-                    <div class="flex">
-                        <label for="admin_key" class="flex-grow-1 darkgrey fw7 f8">
-                            Admin API Key
-                        </label>
-                        <span class="db f8 midgrey">
-                            {{#if copyAdminKey.isRunning}}
-                                Copied to clipboard
-                            {{else}}
-                                {{adminKey.lastSeenAtUTC}}
-                            {{/if}}
-                        </span>
-                    </div>
-                    <div class="relative hide-child mt1">
-                        <input id="admin_key"
-                            class="w-100 pa3 bg-whitegrey-l2 midlightgrey ba b--whitegrey br3"
-                            type="text"
-                            value={{adminKey.secret}}
-                            disabled="true"
-                            data-test-input="admin_key">
-
-                        <div class="absolute top-0 right-1">
-                            <div class="pt1 pr3 pb1 pl3 bg-black-70 child br3 f8 nudge-top--6 nudge-right--1">
-                                <button type="button" {{action (perform copyAdminKey)}} class="white fw4">Copy</button>
+    <div class="m15 ba br3 b--lightgrey mt4">
+        <table class="ma0" style="table-layout: fixed">
+            <tbody>
+                <tr class="bb b--lightgrey">
+                    <td class="pa4 pl5 w50 fw7">Content API Key</td>
+                    <td class="pa0 truncate">
+                        <div class="pa4 relative truncate {{unless copyContentKey.isRunning "hide-child"}}">
+                            <span class="midgrey">{{this.integration.contentKey.secret}}</span>
+                            <div class="absolute top-1 right-1">
+                                <div class="pt1 pr3 pb1 pl3 bg-black-70 child br3 f8 nudge-top--6 nudge-right--1">
+                                    <button type="button" {{action (perform copyContentKey)}} class="white fw4">
+                                        {{#if copyContentKey.isRunning}}
+                                            {{svg-jar "check-circle" class="w3 v-mid"}} Copied
+                                        {{else}}
+                                            Copy
+                                        {{/if}}
+                                    </button>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                {{/gh-validation-status-container}}
-            {{/with}}
-        {{/if}}
+                    </td>
+                </tr>
+                {{#if config.enableDeveloperExperiments}}
+                <tr class="bb b--lightgrey">
+                    <td class="pa4 pl5 w50 fw7">Admin API Key</td>
+                    <td class="pa0">
+                        <div class="pa4 relative truncate {{unless copyAdminKey.isRunning "hide-child"}}">
+                            <span class="midgrey">{{this.integration.adminKey.secret}}</span>
+                            <div class="absolute top-1 right-2">
+                                <div class="pt1 pr3 pb1 pl3 bg-black-70 child br3 f8 nudge-top--6 nudge-right--1">
+                                    <button type="button" {{action (perform copyAdminKey)}} class="white fw4">
+                                        {{#if copyAdminKey.isRunning}}
+                                            {{svg-jar "check-circle" class="w3 v-mid"}} Copied
+                                        {{else}}
+                                            Copy
+                                        {{/if}}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+                {{/if}}
+                <tr>
+                    <td class="pa4 pl5 w50 fw7">API URL</td>
+                    <td class="pa0 truncate">
+                        <div class="pa4 relative truncate {{unless copyApiUrl.isRunning "hide-child"}}">
+                            <span class="midgrey">{{this.apiUrl}}</span>
+                            <div class="absolute top-1 right-2">
+                                <div class="pt1 pr3 pb1 pl3 bg-black-70 child br3 f8 nudge-top--6 nudge-right--1">
+                                    <button type="button" {{action (perform copyApiUrl)}} class="white fw4">
+                                        {{#if copyApiUrl.isRunning}}
+                                            {{svg-jar "check-circle" class="w3 v-mid"}} Copied
+                                        {{else}}
+                                            Copy
+                                        {{/if}}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
     </div>
 
     <h4 class="mt15 midgrey f7 fw4">Webhooks</h4>
@@ -214,7 +214,7 @@
                         {{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center"
                         data-test-link="add-webhook"}}
                         <div class="pa3 f7">
-                            {{svg-jar "add" class="w3 h3 fill-blue-d1"}} 
+                            {{svg-jar "add" class="w3 h3 fill-blue-d1"}}
                             <span class="ml1 blue">Add webhook</span>
                         </div>
                         {{/link-to}}