diff options
Diffstat (limited to 'settings/src/components/AuthTokenSetupDialogue.vue')
| -rw-r--r-- | settings/src/components/AuthTokenSetupDialogue.vue | 204 |
1 files changed, 0 insertions, 204 deletions
diff --git a/settings/src/components/AuthTokenSetupDialogue.vue b/settings/src/components/AuthTokenSetupDialogue.vue deleted file mode 100644 index 000e873e659..00000000000 --- a/settings/src/components/AuthTokenSetupDialogue.vue +++ /dev/null @@ -1,204 +0,0 @@ -<!-- - - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at> - - - - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - --> - -<template> - <div v-if="!adding"> - <input v-model="deviceName" - type="text" - @keydown.enter="submit" - :disabled="loading" - :placeholder="t('settings', 'App name')"> - <button class="button" - :disabled="loading" - @click="submit">{{ t('settings', 'Create new app password') }} - </button> - </div> - <div v-else> - {{ t('settings', 'Use the credentials below to configure your app or device.') }} - {{ t('settings', 'For security reasons this password will only be shown once.') }} - <div class="app-password-row"> - <span class="app-password-label">{{ t('settings', 'Username') }}</span> - <input :value="loginName" - type="text" - class="monospaced" - readonly="readonly" - @focus="selectInput"/> - </div> - <div class="app-password-row"> - <span class="app-password-label">{{ t('settings', 'Password') }}</span> - <input :value="appPassword" - type="text" - class="monospaced" - ref="appPassword" - readonly="readonly" - @focus="selectInput"/> - <a class="icon icon-clippy" - ref="clipboardButton" - v-tooltip="copyTooltipOptions" - @mouseover="hoveringCopyButton = true" - @mouseleave="hoveringCopyButton = false" - v-clipboard:copy="appPassword" - v-clipboard:success="onCopyPassword" - v-clipboard:error="onCopyPasswordFailed"></a> - <button class="button" - @click="reset"> - {{ t('settings', 'Done') }} - </button> - </div> - <div class="app-password-row"> - <span class="app-password-label"></span> - <a v-if="!showQR" - @click="showQR = true"> - {{ t('settings', 'Show QR code for mobile apps') }} - </a> - <QR v-else - :value="qrUrl"></QR> - </div> - </div> -</template> - -<script> - import QR from '@chenfengyuan/vue-qrcode'; - import confirmPassword from 'nextcloud-password-confirmation'; - - export default { - name: 'AuthTokenSetupDialogue', - components: { - QR, - }, - props: { - add: { - type: Function, - required: true, - } - }, - data () { - return { - adding: false, - loading: false, - deviceName: '', - appPassword: '', - loginName: '', - passwordCopied: false, - showQR: false, - qrUrl: '', - hoveringCopyButton: false, - } - }, - computed: { - copyTooltipOptions() { - const base = { - hideOnTargetClick: false, - trigger: 'manual', - }; - - if (this.passwordCopied) { - return { - ...base, - content:t('core', 'Copied!'), - show: true, - } - } else { - return { - ...base, - content: t('core', 'Copy'), - show: this.hoveringCopyButton, - } - } - } - }, - methods: { - selectInput (e) { - e.currentTarget.select(); - }, - submit: function () { - confirmPassword() - .then(() => { - this.loading = true; - return this.add(this.deviceName) - }) - .then(token => { - this.adding = true; - this.loginName = token.loginName; - this.appPassword = token.token; - - const server = window.location.protocol + '//' + window.location.host + OC.getRootPath(); - this.qrUrl = `nc://login/user:${token.loginName}&password:${token.token}&server:${server}`; - - this.$nextTick(() => { - this.$refs.appPassword.select(); - }); - }) - .catch(err => { - console.error('could not create a new app password', err); - OC.Notification.showTemporary(t('core', 'Error while creating device token')); - - this.reset(); - }); - }, - onCopyPassword() { - this.passwordCopied = true; - this.$refs.clipboardButton.blur(); - setTimeout(() => this.passwordCopied = false, 3000); - }, - onCopyPasswordFailed() { - OC.Notification.showTemporary(t('core', 'Could not copy app password. Please copy it manually.')); - }, - reset () { - this.adding = false; - this.loading = false; - this.showQR = false; - this.qrUrl = ''; - this.deviceName = ''; - this.appPassword = ''; - this.loginName = ''; - } - } - } -</script> - -<style lang="scss" scoped> - .app-password-row { - display: table-row; - - .icon { - background-size: 16px 16px; - display: inline-block; - position: relative; - top: 3px; - margin-left: 5px; - margin-right: 8px; - } - - } - - .app-password-label { - display: table-cell; - padding-right: 1em; - text-align: right; - vertical-align: middle; - } - - .monospaced { - width: 245px; - font-family: monospace; - } -</style> |