From 89b3789c764f1dc45cafdc0a1f72faa48f2fb47e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcos=20Pe=C3=B1a?= <devilcius@gmail.com>
Date: Sun, 17 Oct 2021 11:31:20 +0000
Subject: [PATCH] Resolve "Show a popup to let user know that the subsonic api
 password has been copied"

---
 changes/changelog.d/1496.enhancement          |  1 +
 front/src/components/forms/PasswordInput.vue  | 86 ++++++++++++-------
 .../tests/unit/specs/components/forms.spec.js | 40 +++++++++
 3 files changed, 96 insertions(+), 31 deletions(-)
 create mode 100644 changes/changelog.d/1496.enhancement
 create mode 100644 front/tests/unit/specs/components/forms.spec.js

diff --git a/changes/changelog.d/1496.enhancement b/changes/changelog.d/1496.enhancement
new file mode 100644
index 000000000..3e94a03e4
--- /dev/null
+++ b/changes/changelog.d/1496.enhancement
@@ -0,0 +1 @@
+Displays toast when subsonic password is copied (#1496)
diff --git a/front/src/components/forms/PasswordInput.vue b/front/src/components/forms/PasswordInput.vue
index 99661971c..4b5dac7ea 100644
--- a/front/src/components/forms/PasswordInput.vue
+++ b/front/src/components/forms/PasswordInput.vue
@@ -1,58 +1,82 @@
 <template>
   <div class="ui fluid action input">
     <input
-    required
-    name="password"
-    :type="passwordInputType"
-    @input="$emit('input', $event.target.value)"
-    :id="fieldId"
-    :value="value">
-    <button @click.prevent="showPassword = !showPassword" type="button" :title="labels.title" class="ui icon button">
+      required
+      name="password"
+      :type="passwordInputType"
+      @input="$emit('input', $event.target.value)"
+      :id="fieldId"
+      :value="value"
+    />
+    <button
+      @click.prevent="showPassword = !showPassword"
+      type="button"
+      :title="labels.title"
+      class="ui icon button"
+    >
       <i class="eye icon"></i>
     </button>
-    <button v-if="copyButton" @click.prevent="copy" type="button" class="ui icon button" :title="labels.copy">
+    <button
+      v-if="copyButton"
+      @click.prevent="copyPassword"
+      type="button"
+      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', 'defaultShow', 'copyButton', 'fieldId'],
-  data () {
+  props: ["value", "defaultShow", "copyButton", "fieldId"],
+  data() {
     return {
       showPassword: this.defaultShow || false,
-    }
+    };
   },
   computed: {
     labels () {
       return {
-        title: this.$pgettext('Content/Settings/Button.Tooltip/Verb', 'Show/hide password'),
-        copy: this.$pgettext('*/*/Button.Label/Short, Verb', 'Copy')
+        title: this.$pgettext(
+          "Content/Settings/Button.Tooltip/Verb",
+          "Show/hide password"
+        ),
+        copy: this.$pgettext("*/*/Button.Label/Short, Verb", "Copy"),
       }
     },
-    passwordInputType () {
+    passwordInputType() {
       if (this.showPassword) {
-        return 'text'
+        return "text";
       }
-      return 'password'
+      return "password";
     }
   },
   methods: {
-    copy () {
-      copyStringToClipboard(this.value)
+    copyPassword () {
+      try {
+        this._copyStringToClipboard(this.value)
+        this.$store.commit('ui/addMessage', {
+          content: this.$pgettext(
+            'Content/*/Paragraph',
+            'Text copied to clipboard!'
+          ),
+          date: new Date()
+        })
+      } catch ($e) {
+        console.error('Cannot copy', $e)
+      }
+    },
+    _copyStringToClipboard (str) {
+      // cf https://techoverflow.net/2018/03/30/copying-strings-to-the-clipboard-using-pure-javascript/
+      const 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)
     }
   }
 }
diff --git a/front/tests/unit/specs/components/forms.spec.js b/front/tests/unit/specs/components/forms.spec.js
new file mode 100644
index 000000000..5ea0a7bee
--- /dev/null
+++ b/front/tests/unit/specs/components/forms.spec.js
@@ -0,0 +1,40 @@
+import { expect } from 'chai'
+import PasswordInput from '@/components/forms/PasswordInput.vue'
+import { shallowMount } from '@vue/test-utils'
+const sinon = require('sinon')
+
+describe('PasswordInput', () => {
+  const password = 'password'
+  let sandbox
+
+  beforeEach(function () {
+    sandbox = sinon.createSandbox()
+  })
+
+  afterEach(function () {
+    sandbox.restore()
+  })
+  const wrapper = shallowMount(PasswordInput, {
+    mocks: {
+      $pgettext: () => 'dummy',
+      $store: {
+        commit: () => { }
+      }
+    }
+  })
+  wrapper.setProps({ value: password, copyButton: true })
+  it('password input has passed value', () => {
+    const inputElement = wrapper.find('input')
+    expect(inputElement.element.value).to.equal(password)
+  })
+  it('copy password function called', () => {
+    const spy = sandbox.spy()
+    wrapper.setMethods({
+      copyPassword: spy
+    })
+    sandbox.stub(PasswordInput.methods, '_copyStringToClipboard').callsFake()
+    const copyButton = wrapper.findAll('button').at(1)
+    copyButton.trigger('click')
+    sandbox.assert.calledOnce(spy)
+  })
+})