From 5ccf581e1ea3e166baa5fab53f56b5241c3c2edb Mon Sep 17 00:00:00 2001
From: Bianca Nenciu <nenciu.bianca@gmail.com>
Date: Thu, 23 Aug 2018 22:27:08 +0200
Subject: [PATCH] UX: Improve copying from IP lookup component.

- Removed trailing whitespaces caused by textarea.
- Clicking the Copy button will show "copied" for 2 seconds.
---
 app/assets/javascripts/admin/components/ip-lookup.js.es6 | 9 ++++++---
 .../discourse/templates/components/ip-lookup.hbs         | 6 +++++-
 config/locales/client.en.yml                             | 1 +
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/admin/components/ip-lookup.js.es6 b/app/assets/javascripts/admin/components/ip-lookup.js.es6
index f376007af00..4717b365028 100644
--- a/app/assets/javascripts/admin/components/ip-lookup.js.es6
+++ b/app/assets/javascripts/admin/components/ip-lookup.js.es6
@@ -88,10 +88,13 @@ export default Ember.Component.extend({
           text += `: ${location.phone}\n`;
         }
       }
-      const copyRange = $(`<textarea id="copy-range"></textarea>`);
-      copyRange.text(text);
+      const copyRange = $('<p id="copy-range"></p>');
+      copyRange.html(text.trim().replace("\n", "<br>"));
       $(document.body).append(copyRange);
-      copyText(text, copyRange[0]);
+      if (copyText(text, copyRange[0])) {
+        this.set("copied", true);
+        Ember.run.later(() => this.set("copied", false), 2000);
+      }
       copyRange.remove();
     },
 
diff --git a/app/assets/javascripts/discourse/templates/components/ip-lookup.hbs b/app/assets/javascripts/discourse/templates/components/ip-lookup.hbs
index d63f71375c4..969d6ef8106 100644
--- a/app/assets/javascripts/discourse/templates/components/ip-lookup.hbs
+++ b/app/assets/javascripts/discourse/templates/components/ip-lookup.hbs
@@ -6,7 +6,11 @@
 {{#if show}}
   <div class="location-box">
     <a class="close pull-right" {{action "hide"}}>{{d-icon "times"}}</a>
-    <a class="btn pull-right" {{action "copy"}}>{{d-icon "copy"}}</a>
+    {{#if copied}}
+      <a class="btn btn-hover pull-right">{{d-icon "copy"}} {{i18n "ip_lookup.copied"}}</a>
+    {{else}}
+      <a class="btn pull-right" {{action "copy"}}>{{d-icon "copy"}}</a>
+    {{/if}}
     <h4>{{i18n 'ip_lookup.title'}}</h4>
     <p class='powered-by'>{{{i18n 'ip_lookup.powered_by'}}}</p>
     <dl>
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 4ec9c51a95a..32bb849b995 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -597,6 +597,7 @@ en:
       post_count: "# posts"
       confirm_delete_other_accounts: "Are you sure you want to delete these accounts?"
       powered_by: "powered by <a href='https://ipinfo.io'>ipinfo.io</a>"
+      copied: "copied"
 
     user_fields:
       none: "(select an option)"