From 276bb6fba7eb55415506cf09ef301ae7259f6ff8 Mon Sep 17 00:00:00 2001
From: Stefan K <korun@hfour.com>
Date: Thu, 23 Aug 2018 23:36:09 +0200
Subject: [PATCH] Add copy to clipboard button, select token on page load

---
 public/index.html | 16 ++++++++++++++--
 public/js/app.js  |  9 +++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 752be61..9825337 100644
--- a/public/index.html
+++ b/public/index.html
@@ -48,10 +48,22 @@ <h1 class="title">TOTP Token Generator</h1>
         <progress class="progress is-info is-small" v-bind:value="period - updatingIn" :max="period"></progress>
       </div>
 
-      <div class="tile is-ancestor">
+      <div class="tile is-ancestor is-vertical">
         <div class="tile box">
-          <p class="title is-size-1 has-text-centered" style="margin: auto">{{ token }}</p>
+          <textarea
+            class="title is-size-1 has-text-centered"
+            style="margin: auto; border: none; overflow: hidden; outline: none; box-shadow: none; resize: none;"
+            rows="1"
+            readonly
+            ref="tokenInput"
+          >{{ token }}</textarea>
         </div>
+        <div class="tile button is-fullwidth" @click='copyToClipboard'>
+          Copy to clipboard
+        </div>
+        <p class="tag">
+          Or refresh the page to select the token
+        </p>
       </div>
 
     </div>
diff --git a/public/js/app.js b/public/js/app.js
index d1fa5dd..d6d9e01 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -36,6 +36,9 @@ new Vue({
 
   mounted: function () {
     this.update();
+    this.$nextTick(function () {
+      this.copyToClipboard();
+    })
 
     this.intervalHandle = setInterval(this.update, 1000);
   },
@@ -59,6 +62,12 @@ new Vue({
     update: function () {
       this.updatingIn = this.period - (getCurrentSeconds() % this.period);
       this.token = truncateTo(this.totp.generate(), this.digits);
+    },
+    copyToClipboard: function() {
+      if (!this.$refs.tokenInput) return;
+
+      this.$refs.tokenInput.select();
+      document.execCommand('copy');
     }
   }
 });