diff options
Diffstat (limited to 'apps/settings/src/components/WebAuthn/Section.vue')
| -rw-r--r-- | apps/settings/src/components/WebAuthn/Section.vue | 79 |
1 files changed, 38 insertions, 41 deletions
diff --git a/apps/settings/src/components/WebAuthn/Section.vue b/apps/settings/src/components/WebAuthn/Section.vue index db6cc1dafc3..fa818c24355 100644 --- a/apps/settings/src/components/WebAuthn/Section.vue +++ b/apps/settings/src/components/WebAuthn/Section.vue @@ -1,23 +1,7 @@ <!-- - - @copyright 2020, Roeland Jago Douma <roeland@famdouma.nl> - - - - @author Roeland Jago Douma <roeland@famdouma.nl> - - - - @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/>. - --> + - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div id="security-webauthn" class="section"> @@ -25,22 +9,25 @@ <p class="settings-hint hidden-when-empty"> {{ t('settings', 'Set up your account for passwordless authentication following the FIDO2 standard.') }} </p> - <p v-if="devices.length === 0"> + <NcNoteCard v-if="devices.length === 0" type="info"> {{ t('settings', 'No devices configured.') }} - </p> - <p v-else> + </NcNoteCard> + + <h3 v-else id="security-webauthn__active-devices"> {{ t('settings', 'The following devices are configured for your account:') }} - </p> - <Device v-for="device in sortedDevices" - :key="device.id" - :name="device.name" - @delete="deleteDevice(device.id)" /> + </h3> + <ul aria-labelledby="security-webauthn__active-devices" class="security-webauthn__device-list"> + <Device v-for="device in sortedDevices" + :key="device.id" + :name="device.name" + @delete="deleteDevice(device.id)" /> + </ul> - <p v-if="!hasPublicKeyCredential" class="warning"> + <NcNoteCard v-if="!supportsWebauthn" type="warning"> {{ t('settings', 'Your browser does not support WebAuthn.') }} - </p> + </NcNoteCard> - <AddDevice v-if="hasPublicKeyCredential" + <AddDevice v-if="supportsWebauthn" :is-https="isHttps" :is-localhost="isLocalhost" @added="deviceAdded" /> @@ -48,14 +35,17 @@ </template> <script> +import { browserSupportsWebAuthn } from '@simplewebauthn/browser' import { confirmPassword } from '@nextcloud/password-confirmation' -import '@nextcloud/password-confirmation/dist/style.css' -import sortBy from 'lodash/fp/sortBy' +import NcNoteCard from '@nextcloud/vue/components/NcNoteCard' +import sortBy from 'lodash/fp/sortBy.js' -import AddDevice from './AddDevice' -import Device from './Device' -import logger from '../../logger' -import { removeRegistration } from '../../service/WebAuthnRegistrationSerice' +import AddDevice from './AddDevice.vue' +import Device from './Device.vue' +import logger from '../../logger.ts' +import { removeRegistration } from '../../service/WebAuthnRegistrationSerice.js' + +import '@nextcloud/password-confirmation/dist/style.css' const sortByName = sortBy('name') @@ -63,6 +53,7 @@ export default { components: { AddDevice, Device, + NcNoteCard, }, props: { initialDevices: { @@ -77,11 +68,15 @@ export default { type: Boolean, default: false, }, - hasPublicKeyCredential: { - type: Boolean, - default: false, - }, }, + + setup() { + // Non reactive properties + return { + supportsWebauthn: browserSupportsWebAuthn(), + } + }, + data() { return { devices: this.initialDevices, @@ -113,5 +108,7 @@ export default { </script> <style scoped> - +.security-webauthn__device-list { + margin-block: 12px 18px; +} </style> |