Set up Webauthn Reset request & Recover views

resources/js_vue3/views/auth/RequestReset.vue

@@ -0,0 +1,52 @@
+<script setup>
+    import Form from '@/components/formElements/Form'
+    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 reset request to the backend
+     */
+    function requestPasswordReset(e) {
+        notify.clear()
+        form.post(isWebauthnReset ? '/webauthn/lost' : '/user/password/lost', {returnError: true})
+        .then(response => {
+            notify.success({ text: response.data.message, duration:-1 })
+        })
+        .catch(error => {
+            console.log(error)
+            if( error.response.data.requestFailed ) {
+                notify.alert({ text: error.response.data.requestFailed, duration:-1 })
+            }
+            else if( error.response.status !== 422 ) {
+                notify.error(error)
+            }
+        })
+    }
+
+    onBeforeRouteLeave(() => {
+        notify.clear()
+    })
+</script>
+
+<template>
+    <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(isWebauthnReset ? 'auth.webauthn.send_recovery_link' : 'auth.forms.send_password_reset_link')"
+                :showCancelButton="true"
+                cancelLandingView="login" />
+        </form>
+        <VueFooter />
+    </FormWrapper>
+</template>