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

environments/review-front-708-9rtl2l/deployments/1820
Eliot Berriot 2019-06-11 13:41:56 +02:00
rodzic 353ac0818e
commit 05f2ca53b8
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: DD6965E2476E5C27
3 zmienionych plików z 35 dodań i 5 usunięć

Wyświetl plik

@ -0,0 +1 @@
Added copy-to-clipboard button with Subsonic password input (#814)

Wyświetl plik

@ -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

Wyświetl plik

@ -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>