diff options
Diffstat (limited to 'apps/twofactor_backupcodes/src/views/PersonalSettings.vue')
| -rw-r--r-- | apps/twofactor_backupcodes/src/views/PersonalSettings.vue | 78 |
1 files changed, 52 insertions, 26 deletions
diff --git a/apps/twofactor_backupcodes/src/views/PersonalSettings.vue b/apps/twofactor_backupcodes/src/views/PersonalSettings.vue index 1703bd2aafd..3e17613bb47 100644 --- a/apps/twofactor_backupcodes/src/views/PersonalSettings.vue +++ b/apps/twofactor_backupcodes/src/views/PersonalSettings.vue @@ -1,38 +1,49 @@ +<!-- + - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> - <div> - <button v-if="!enabled" + <div class="backupcodes-settings"> + <NcButton v-if="!enabled" id="generate-backup-codes" :disabled="generatingCodes" @click="generateBackupCodes"> + <template #icon> + <NcLoadingIcon v-if="generatingCodes" /> + </template> {{ t('twofactor_backupcodes', 'Generate backup codes') }} - <span :class="{'icon-loading-small': generatingCodes}" /> - </button> + </NcButton> <template v-else> - <p> + <p class="backupcodes-settings__codes"> <template v-if="!haveCodes"> {{ t('twofactor_backupcodes', 'Backup codes have been generated. {used} of {total} codes have been used.', {used, total}) }} </template> <template v-else> - {{ t('twofactor_backupcodes', 'These are your backup codes. Please save and/or print them as you will not be able to read the codes again later') }} + {{ t('twofactor_backupcodes', 'These are your backup codes. Please save and/or print them as you will not be able to read the codes again later.') }} <ul> - <li v-for="code in codes" :key="code" class="backup-code"> + <li v-for="code in codes" + :key="code" + class="backupcodes-settings__codes__code"> {{ code }} </li> </ul> - <a :href="downloadUrl" - class="button primary" - :download="downloadFilename">{{ t('twofactor_backupcodes', 'Save backup codes') }}</a> - <button class="button" - @click="printCodes"> - {{ t('twofactor_backupcodes', 'Print backup codes') }} - </button> </template> </p> - <p> - <button id="generate-backup-codes" + <p class="backupcodes-settings__actions"> + <template v-if="haveCodes"> + <NcButton :href="downloadUrl" + :download="downloadFilename" + type="primary"> + {{ t('twofactor_backupcodes', 'Save backup codes') }} + </NcButton> + <NcButton @click="printCodes"> + {{ t('twofactor_backupcodes', 'Print backup codes') }} + </NcButton> + </template> + <NcButton id="generate-backup-codes" @click="generateBackupCodes"> {{ t('twofactor_backupcodes', 'Regenerate backup codes') }} - </button> + </NcButton> </p> <p> <em> @@ -45,11 +56,18 @@ <script> import { confirmPassword } from '@nextcloud/password-confirmation' -import '@nextcloud/password-confirmation/dist/style.css' import { print } from '../service/PrintService.js' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon' + +import '@nextcloud/password-confirmation/dist/style.css' export default { name: 'PersonalSettings', + components: { + NcButton, + NcLoadingIcon, + }, data() { return { generatingCodes: false, @@ -93,7 +111,7 @@ export default { // Hide old codes this.generatingCodes = true - this.$store.dispatch('generate').then(data => { + this.$store.dispatch('generate').then(() => { this.generatingCodes = false }).catch(err => { OC.Notification.showTemporary(t('twofactor_backupcodes', 'An error occurred while generating your backup codes')) @@ -119,13 +137,21 @@ export default { } </script> -<style scoped> - .backup-code { - font-family: monospace; - letter-spacing: 0.02em; - font-size: 1.2em; +<style lang="scss" scoped> +.backupcodes-settings { + &__codes { + &__code { + font-family: monospace; + letter-spacing: 0.02em; + font-size: 1.2em; + } } - .button { - display: inline-block; + + &__actions { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--default-grid-baseline); } +} </style> |