Fix #814: Added copy-to-clipboard button with Subsonic password input

changes/changelog.d/814.enhancement

+Added copy-to-clipboard button with Subsonic password input (#814)

front/src/components/auth/SubsonicTokenForm.vue

@@ -24,7 +24,12 @@
     </div>
     <template v-if="subsonicEnabled">
       <div v-if="token" class="field">
-        <password-input v-model="token" />
+        <password-input
+          ref="passwordInput"
+          v-model="token"
+          :key="token"
+          :copy-button="true"
+          :default-show="showToken"/>
       </div>
       <dangerous-button
         v-if="token"
@@ -69,7 +74,8 @@ export default {
       errors: [],
       success: false,
       isLoading: false,
-      successMessage: ''
+      successMessage: '',
+      showToken: false
     }
   },
   created () {
@@ -98,6 +104,7 @@ export default {
       let self = this
       let url = `users/users/${this.$store.state.auth.username}/subsonic-token/`
       return axios.post(url, {}).then(response => {
+        self.showToken = true
         self.token = response.data['subsonic_api_token']
         self.isLoading = false
         self.success = true

front/src/components/forms/PasswordInput.vue

@@ -10,20 +10,37 @@
     <span @click="showPassword = !showPassword" :title="labels.title" class="ui icon button">
       <i class="eye icon"></i>
     </span>
+    <button v-if="copyButton" @click.prevent="copy" class="ui icon button" :title="labels.copy">
+      <i class="copy icon"></i>
+    </button>
   </div>
 </template>
 <script>
+
+function copyStringToClipboard (str) {
+  // cf https://techoverflow.net/2018/03/30/copying-strings-to-the-clipboard-using-pure-javascript/
+  let el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style = {position: 'absolute', left: '-9999px'};
+  document.body.appendChild(el);
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+}
+
 export default {
-  props: ['value', 'index'],
+  props: ['value', 'index', 'defaultShow', 'copyButton'],
   data () {
     return {
-      showPassword: false
+      showPassword: this.defaultShow || false,
     }
   },
   computed: {
     labels () {
       return {
-        title: this.$pgettext('Content/Settings/Button.Tooltip/Verb', 'Show/hide password')
+        title: this.$pgettext('Content/Settings/Button.Tooltip/Verb', 'Show/hide password'),
+        copy: this.$pgettext('*/*/Button.Label/Short, Verb', 'Copy')
       }
     },
     passwordInputType () {
@@ -32,6 +49,11 @@ export default {
       }
       return 'password'
     }
+  },
+  methods: {
+    copy () {
+      copyStringToClipboard(this.value)
+    }
   }
 }
 </script>