Resolve "Show a popup to let user know that the subsonic api password has been copied"

changes/changelog.d/1496.enhancement

@@ -0,0 +1 @@
+Displays toast when subsonic password is copied (#1496)

front/src/components/forms/PasswordInput.vue

@@ -1,58 +1,82 @@
 <template>
   <div class="ui fluid action input">
     <input
-    required
+      required
-    name="password"
+      name="password"
-    :type="passwordInputType"
+      :type="passwordInputType"
-    @input="$emit('input', $event.target.value)"
+      @input="$emit('input', $event.target.value)"
-    :id="fieldId"
+      :id="fieldId"
-    :value="value">
+      :value="value"
-    <button @click.prevent="showPassword = !showPassword" type="button" :title="labels.title" class="ui icon button">
+    />
+    <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'],
+  props: ["value", "defaultShow", "copyButton", "fieldId"],
-  data () {
+  data() {
     return {
       showPassword: this.defaultShow || false,
-    }
+    };
   },
   computed: {
     labels () {
       return {
-        title: this.$pgettext('Content/Settings/Button.Tooltip/Verb', 'Show/hide password'),
+        title: this.$pgettext(
-        copy: this.$pgettext('*/*/Button.Label/Short, Verb', 'Copy')
+          "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 () {
+    copyPassword () {
-      copyStringToClipboard(this.value)
+      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)
     }
   }
 }

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)
+  })
+})