Set up the Webauthn settings view

resources/js_vue3/layouts/SettingTabs.vue

@@ -1,7 +1,7 @@
 <script setup>
     const tabs = ref([
         {
-            'name' : wTrans('settings.options'),
+            'name' : trans('settings.options'),
             'view' : 'settings.options',
             'id'   : 'lnkTabOptions'
         },
@@ -15,11 +15,11 @@
         //     'view' : 'settings.oauth.tokens',
         //     'id'   : 'lnkTabOAuth'
         // },
-        // {
+        {
-        //     'name' : wTrans('settings.webauthn'),
+            'name' : trans('settings.webauthn'),
-        //     'view' : 'settings.webauthn.devices',
+            'view' : 'settings.webauthn.devices',
-        //     'id'   : 'lnkTabWebauthn'
+            'id'   : 'lnkTabWebauthn'
-        // },
+        },
     ])
 
     const props = defineProps({

resources/js_vue3/router/index.js

@@ -22,8 +22,8 @@ import WebauthnLost     from '../views/auth/webauthn/Lost.vue'
 import SettingsOptions  from '../views/settings/Options.vue'
 // import SettingsAccount  from './views/settings/Account.vue'
 // import SettingsOAuth    from './views/settings/OAuth.vue'
-// import SettingsWebAuthn from './views/settings/WebAuthn.vue'
+import SettingsWebAuthn from '../views/settings/WebAuthn.vue'
-// import EditCredential   from './views/settings/Credentials/Edit.vue'
+import EditCredential   from '../views/settings/Credentials/Edit.vue'
 // import GeneratePAT      from './views/settings/PATokens/Create.vue'
 import Errors           from '../views/Error.vue'
 import About            from '../views/About.vue'
@@ -51,8 +51,8 @@ const router = createRouter({
         // { path: '/settings/account', name: 'settings.account', component: SettingsAccount, meta: { middlewares: [authGuard], showAbout: true } },
         // { path: '/settings/oauth', name: 'settings.oauth.tokens', component: SettingsOAuth, meta: { middlewares: [authGuard], showAbout: true } },
         // { path: '/settings/oauth/pat/create', name: 'settings.oauth.generatePAT', component: GeneratePAT, meta: { middlewares: [authGuard], showAbout: true } },
-        // { path: '/settings/webauthn/:credentialId/edit', name: 'settings.webauthn.editCredential', component: EditCredential, meta: { middlewares: [authGuard], showAbout: true }, props: true },
+        { path: '/settings/webauthn/:credentialId/edit', name: 'settings.webauthn.editCredential', component: EditCredential, meta: { middlewares: [authGuard], showAbout: true }, props: true },
-        // { path: '/settings/webauthn', name: 'settings.webauthn.devices', component: SettingsWebAuthn, meta: { middlewares: [authGuard], showAbout: true } },
+        { path: '/settings/webauthn', name: 'settings.webauthn.devices', component: SettingsWebAuthn, meta: { middlewares: [authGuard], showAbout: true } },
 
         { path: '/login', name: 'login', component: Login, meta: { disabledWithAuthProxy: true, showAbout: true } },
         { path: '/register', name: 'register', component: Register, meta: { disabledWithAuthProxy: true, showAbout: true } },

resources/js_vue3/services/userService.js

@@ -15,4 +15,26 @@ export default {
         return apiClient.put('/user/preferences/' + name, { value: value })
     },
 
+    /**
+     * Get all webauthn devices
+     * 
+     * @param {string} name 
+     * @param {any} value 
+     * @returns promise
+     */
+    getWebauthnDevices(config = {}) {
+        return webClient.get('/webauthn/credentials', {...config})
+    },
+
+    /**
+     * Revoke a webauthn device
+     * 
+     * @param {string} name 
+     * @param {any} value 
+     * @returns promise
+     */
+    revokeWebauthnDevice(credentialId, config = {}) {
+        return webClient.delete('/webauthn/credentials/' + credentialId, {...config})
+    },
+    
 }

resources/js_vue3/views/settings/Credentials/Edit.vue

@@ -0,0 +1,41 @@
+<script setup>
+    import Form from '@/components/formElements/Form'
+    import { useNotifyStore } from '@/stores/notify'
+
+    const router = useRouter()
+    const notify = useNotifyStore()
+    const form = reactive(new Form({
+        name: trans('auth.webauthn.my_device')
+    }))
+
+    const props = defineProps({
+        credentialId: {
+            type: String,
+            default: ''
+        },
+    })
+
+    function updateCredential() {
+        form.patch('/webauthn/credentials/' + props.credentialId + '/name')
+        .then(() => {
+            notify.info({ text: trans('auth.webauthn.device_successfully_registered') })
+            router.push({ name: 'settings.webauthn.devices' })
+        })
+    }
+
+</script>
+
+<template>
+    <FormWrapper title="auth.webauthn.rename_device">
+        <form @submit.prevent="updateCredential" @keydown="form.onKeydown($event)">
+            <FormField v-model="form.name" fieldName="name" :fieldError="form.errors.get('name')" inputType="name" label="commons.new_name" autofocus />
+            <FormButtons
+                :submitId="'btnEditCredential'"
+                :isBusy="form.isBusy"
+                :caption="$t('commons.save')"
+                :showCancelButton="true"
+                cancelLandingView="settings.webauthn.devices"
+            />
+        </form>
+    </FormWrapper>
+</template>

resources/js_vue3/views/settings/Options.vue

@@ -115,7 +115,7 @@
 
 <template>
     <div>
-        <SettingTabs activeTab="settings.options"></SettingTabs>
+        <SettingTabs activeTab="settings.options" />
         <div class="options-tabs">
             <FormWrapper>
                 <form>

resources/js_vue3/views/settings/WebAuthn.vue

@@ -0,0 +1,189 @@
+<script setup>
+    import SettingTabs from '@/layouts/SettingTabs.vue'
+    import userService from '@/services/userService'
+    import { webauthnService } from '@/services/webauthn/webauthnService'
+    import { useUserStore } from '@/stores/user'
+    import { useNotifyStore } from '@/stores/notify'
+    import { UseColorMode } from '@vueuse/components'
+    import Spinner from '@/components/Spinner.vue'
+
+    const $2fauth = inject('2fauth')
+    const user = useUserStore()
+    const notify = useNotifyStore()
+    const router = useRouter()
+    const returnTo = useStorage($2fauth.prefix + 'returnTo', 'accounts')
+
+    const credentials = ref([])
+    const isFetching = ref(false)
+    const isRemoteUser = ref(false)
+    
+    onMounted(() => {
+        fetchCredentials()
+    })
+
+    watch(() => user.preferences.useWebauthnOnly, () => {
+        userService.updatePreference('useWebauthnOnly', user.preferences.useWebauthnOnly).then(response => {
+            notify.info({ text: trans('settings.forms.setting_saved') })
+        })
+    })
+
+    /**
+     * Register a new security device
+     */
+    function register() {
+
+        if (isRemoteUser == true) {
+            notify.warn({text: trans('errors.unsupported_with_reverseproxy') })
+            return false
+        }
+
+        webauthnService.register().then((response) => {
+            router.push({ name: 'settings.webauthn.editCredential', params: { credentialId: JSON.parse(response.config.data).id, name: trans('auth.webauthn.my_device') } })
+        })
+        .catch(error => {
+            console.log(error)
+            if ('webauthn' in error) {
+                if (error.name == 'is-warning') {
+                    notify.warn({ text: trans(error.message) })
+                }
+                else notify.alert({ text: trans(error.message) })
+            }
+            else if( error.response?.status === 422 ) {
+                notify.alert({ text: error.response.data.message })
+            }
+            else {
+                notify.error(error);
+            }
+        })
+    }
+
+    /**
+     * revoke a credential
+     */
+    function revokeCredential(credentialId) {
+        if(confirm(trans('auth.confirm.revoke_device'))) {
+            userService.revokeWebauthnDevice(credentialId).then(response => {
+                // Remove the revoked credential from the collection
+                credentials.value = credentials.value.filter(a => a.id !== credentialId)
+
+                // Then we disable the useWebauthnOnly preference which is relevant
+                // only when at least one device is registered
+                if (credentials.value.length == 0) {
+                    user.preferences.useWebauthnOnly = false
+                }
+
+                notify.info({ text: trans('auth.webauthn.device_revoked') })
+            });
+        }
+    }
+
+    /**
+     * Always display a printable name
+     */
+    function displayName(credential) {
+        return credential.alias ? credential.alias : trans('auth.webauthn.my_device') + ' (#' + credential.id.substring(0, 10) + ')'
+    }
+
+    /**
+     * Get all credentials from backend
+     */
+    function fetchCredentials() {
+        isFetching.value = true
+
+        userService.getWebauthnDevices({returnError: true})
+        .then(response => {
+            credentials.value = response.data
+        })
+        .catch(error => {
+            if( error.response.status === 400 ) {
+                // The backend returns a 400 response for routes with the
+                // rejectIfReverseProxy middleware
+                isRemoteUser.value = true
+            }
+            else {
+                notify.error(error)
+            }
+        })
+        .finally(() => {
+            isFetching.value = false
+        })
+    }
+
+    onBeforeRouteLeave((to) => {
+        if (! to.name.startsWith('settings.')) {
+            notify.clear()
+        }
+    })
+</script>
+
+<template>
+    <div>
+        <SettingTabs :activeTab="'settings.webauthn.devices'" />
+        <div class="options-tabs">
+            <FormWrapper>
+                <div v-if="isRemoteUser" class="notification is-warning has-text-centered" v-html="$t('auth.auth_handled_by_proxy')" />
+                <h4 class="title is-4 has-text-grey-light">{{ $t('auth.webauthn.security_devices') }}</h4>
+                <div class="is-size-7-mobile">
+                    {{ $t('auth.webauthn.security_devices_legend')}}
+                </div>
+                <div class="mt-3">
+                    <a tabindex="0" @click="register" @keyup.enter="register">
+                        <FontAwesomeIcon :icon="['fas', 'plus-circle']" />&nbsp;{{ $t('auth.webauthn.register_a_new_device')}}
+                    </a>
+                </div>
+                <!-- credentials list -->
+                <div v-if="credentials.length > 0" class="field">
+                    <div v-for="credential in credentials" :key="credential.id" class="group-item is-size-5 is-size-6-mobile">
+                        {{ displayName(credential) }}
+                        <!-- revoke link -->
+                        <UseColorMode v-slot="{ mode }">
+                            <button class="button tag is-pulled-right" :class="mode === 'dark' ? 'is-dark':'is-white'" @click="revokeCredential(credential.id)" :title="$t('settings.revoke')">
+                                {{ $t('settings.revoke') }}
+                            </button>
+                        </UseColorMode>
+                        <!-- edit link -->
+                        <!-- <RouterLink :to="{ name: '' }" class="has-text-grey pl-1" :title="$t('commons.rename')">
+                            <FontAwesomeIcon :icon="['fas', 'pen-square']" />
+                        </RouterLink> -->
+                    </div>
+                    <div class="mt-2 is-size-7 is-pulled-right">
+                        {{ $t('auth.webauthn.revoking_a_device_is_permanent')}}
+                    </div>
+                </div>
+                <Spinner :isVisible="isFetching && credentials.length === 0" />
+                <h4 class="title is-4 pt-6 has-text-grey-light">{{ $t('settings.options') }}</h4>
+                <div class="field">
+                    {{ $t('auth.webauthn.need_a_security_device_to_enable_options')}}
+                </div>
+                <form>
+                    <!-- use webauthn only -->
+                    <FormCheckbox
+                        v-model="user.preferences.useWebauthnOnly"
+                        fieldName="useWebauthnOnly"
+                        label="auth.webauthn.use_webauthn_only.label"
+                        help="auth.webauthn.use_webauthn_only.help"
+                        :disabled="isRemoteUser || credentials.length === 0"
+                    />
+                </form>
+                <!-- footer -->
+                <VueFooter :showButtons="true">
+                    <!-- close button -->
+                    <p class="control">
+                        <UseColorMode v-slot="{ mode }">
+                            <RouterLink
+                                id="btnClose"
+                                :to="{ name: returnTo }"
+                                class="button is-rounded"
+                                :class="{'is-dark' : mode === 'dark'}"
+                                tabindex="0"
+                                role="button"
+                                :aria-label="$t('commons.close_the_x_page', {pagetitle: $route.meta.title})">
+                                {{ $t('commons.close') }}
+                            </RouterLink>
+                        </UseColorMode>
+                    </p>
+                </VueFooter>
+            </FormWrapper>
+        </div>
+    </div>
+</template>