Set up Webauthn Reset request & Recover views

resources/js_vue3/router/index.js

@@ -13,10 +13,9 @@ import Groups               from '../views/groups/Groups.vue'
 import CreateUpdateGroup    from '../views/groups/CreateUpdate.vue'
 import Login                from '../views/auth/Login.vue'
 import Register             from '../views/auth/Register.vue'
-import PasswordRequest      from '../views/auth/password/Request.vue'
+import RequestReset         from '../views/auth/RequestReset.vue'
 import PasswordReset        from '../views/auth/password/Reset.vue'
-import WebauthnLost         from '../views/auth/webauthn/Lost.vue'
-// import WebauthnRecover   from './views/auth/webauthn/Recover.vue'
+import WebauthnRecover      from '../views/auth/webauthn/Recover.vue'
 import SettingsOptions      from '../views/settings/Options.vue'
 import SettingsAccount      from '../views/settings/Account.vue'
 import SettingsOAuth        from '../views/settings/OAuth.vue'
@@ -53,10 +52,10 @@ const router = createRouter({
 
         { path: '/login', name: 'login', component: Login, meta: { disabledWithAuthProxy: true, showAbout: true } },
         { path: '/register', name: 'register', component: Register, meta: { disabledWithAuthProxy: true, showAbout: true } },
-        { path: '/password/request', name: 'password.request', component: PasswordRequest, meta: { disabledWithAuthProxy: true, showAbout: true } },
+        { path: '/password/request', name: 'password.request', component: RequestReset, meta: { disabledWithAuthProxy: true, showAbout: true } },
         { path: '/user/password/reset', name: 'password.reset', component: PasswordReset, meta: { disabledWithAuthProxy: true, showAbout: true } },
-        { path: '/webauthn/lost', name: 'webauthn.lost', component: WebauthnLost, meta: { disabledWithAuthProxy: true, showAbout: true } },
-        // { path: '/webauthn/recover', name: 'webauthn.recover', component: WebauthnRecover, meta: { disabledWithAuthProxy: true, showAbout: true } },
+        { path: '/webauthn/lost', name: 'webauthn.lost', component: RequestReset, meta: { disabledWithAuthProxy: true, showAbout: true } },
+        { path: '/webauthn/recover', name: 'webauthn.recover', component: WebauthnRecover, meta: { disabledWithAuthProxy: true, showAbout: true } },
 
         { path: '/about', name: 'about', component: About, meta: { showAbout: true } },
         { path: '/error', name: 'genericError', component: Errors, meta: { middlewares: [noEmptyError], err: null } },

resources/js_vue3/views/auth/RequestReset.vue

@@ -3,16 +3,20 @@
     import { useNotifyStore } from '@/stores/notify'
 
     const notify = useNotifyStore()
+    const route = useRoute()
+
+    const isWebauthnReset = route.name == 'webauthn.lost'
 
     const form = reactive(new Form({
         email: '',
     }))
 
     /**
-     * Submits the password reset request to the backend
+     * Submits the reset request to the backend
      */
     function requestPasswordReset(e) {
-        form.post('/user/password/lost', {returnError: true})
+        notify.clear()
+        form.post(isWebauthnReset ? '/webauthn/lost' : '/user/password/lost', {returnError: true})
         .then(response => {
             notify.success({ text: response.data.message, duration:-1 })
         })
@@ -33,13 +37,13 @@
 </script>
 
 <template>
-    <FormWrapper :title="$t('auth.forms.reset_password')" :punchline="$t('auth.forms.reset_punchline')">
+    <FormWrapper :title="$t(isWebauthnReset ? 'auth.webauthn.account_recovery' : 'auth.forms.reset_password')" :punchline="$t(isWebauthnReset ? 'auth.webauthn.recovery_punchline' : 'auth.forms.reset_punchline')">
         <form @submit.prevent="requestPasswordReset" @keydown="form.onKeydown($event)">
             <FormField v-model="form.email" fieldName="email" :fieldError="form.errors.get('email')" label="auth.forms.email" autofocus />
             <FormButtons
                 :submitId="'btnSendResetPwd'"
                 :isBusy="form.isBusy"
-                :caption="$t('auth.forms.send_password_reset_link')"
+                :caption="$t(isWebauthnReset ? 'auth.webauthn.send_recovery_link' : 'auth.forms.send_password_reset_link')"
                 :showCancelButton="true"
                 cancelLandingView="login" />
         </form>

resources/js_vue3/views/auth/password/Reset.vue

@@ -14,9 +14,6 @@
         token: route.query.token
     }))
 
-    // form.email = route.query.email
-    // form.token = route.query.token
-
     /**
      * Submits the password reset to the backend
      */
@@ -60,7 +57,6 @@
                 cancelLandingView="login" />
             <RouterLink v-if="!isPending" id="btnContinue" :to="{ name: 'accounts' }" class="button is-link">{{ $t('commons.continue') }}</RouterLink>
         </form>
-        <!-- footer -->
         <VueFooter />
     </FormWrapper>
 </template>

resources/js_vue3/views/auth/webauthn/Recover.vue

@@ -0,0 +1,72 @@
+<script setup>
+    import Form from '@/components/formElements/Form'
+    import { useNotifyStore } from '@/stores/notify'
+
+    const $2fauth = inject('2fauth')
+    const notify = useNotifyStore()
+    const router = useRouter()
+    const route = useRoute()
+    const showWebauthnForm = useStorage($2fauth.prefix + 'showWebauthnForm', false)
+    
+    const form = reactive(new Form({
+        email : route.query.email,
+        password : '',
+        token: route.query.token,
+        revokeAll: false,
+    }))
+
+    /**
+     * Submits the recovery to the backend
+     */
+    function recover(e) {
+        notify.clear()
+        form.post('/webauthn/recover', {returnError: true})
+        .then(response => {
+            showWebauthnForm.value = false
+            router.push({ name: 'login' })
+        })
+        .catch(error => {
+            if ( error.response.status === 401 ) {
+                notify.alert({ text: trans('auth.forms.authentication_failed'), duration:-1 })
+            }
+            else if (error.response.status === 422) {
+                notify.alert({ text: error.response.data.message, duration:-1 })
+            }
+            else  {
+                notify.error(error)
+            }
+        })
+    }
+
+    onBeforeRouteLeave(() => {
+        notify.clear()
+    })
+</script>
+
+<template>
+    <FormWrapper :title="$t('auth.webauthn.account_recovery')" :punchline="$t('auth.webauthn.recover_account_instructions')" >
+        <div>
+            <form @submit.prevent="recover" @keydown="form.onKeydown($event)">
+                <FormCheckbox v-model="form.revokeAll" fieldName="revokeAll" label="auth.webauthn.disable_all_security_devices" help="auth.webauthn.disable_all_security_devices_help" />
+                <FormPasswordField v-model="form.password" fieldName="password" :fieldError="form.errors.get('password')" :autocomplete="'current-password'" :showRules="false" label="auth.forms.current_password.label" help="auth.forms.current_password.help" />
+                <div class="field">
+                    <p>
+                        {{ $t('auth.forms.forgot_your_password') }}&nbsp;
+                        <RouterLink id="lnkResetPwd" :to="{ name: 'password.request' }" class="is-link" :aria-label="$t('auth.forms.reset_your_password')">
+                            {{ $t('auth.forms.request_password_reset') }}
+                        </RouterLink>
+                    </p>
+                </div>
+                <FieldError v-if="form.errors.get('token') != undefined" :error="form.errors.get('token')" :field="form.token" />
+                <FormButtons
+                    :submitId="'btnRecover'"
+                    :isBusy="form.isBusy"
+                    :isDisabled="form.isDisabled"
+                    :caption="$t('commons.continue')"
+                    :showCancelButton="true"
+                    cancelLandingView="login" />
+            </form>
+        </div>
+        <VueFooter />
+    </FormWrapper>
+</template>