diff options
Diffstat (limited to 'apps/settings/src/components/AuthTokenSetupDialogue.vue')
| -rw-r--r-- | apps/settings/src/components/AuthTokenSetupDialogue.vue | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue new file mode 100644 index 00000000000..000e873e659 --- /dev/null +++ b/apps/settings/src/components/AuthTokenSetupDialogue.vue @@ -0,0 +1,204 @@ +<!-- + - @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> |