Set up Password Request & Reset views

resources/js_vue3/router/index.js

@@ -14,7 +14,7 @@ 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 PasswordReset     from './views/auth/password/Reset.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 SettingsOptions      from '../views/settings/Options.vue'
@@ -54,7 +54,7 @@ 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: '/user/password/reset', name: 'password.reset', component: PasswordReset, 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 } },
 

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

@@ -0,0 +1,48 @@
+<script setup>
+    import Form from '@/components/formElements/Form'
+    import { useNotifyStore } from '@/stores/notify'
+
+    const notify = useNotifyStore()
+
+    const form = reactive(new Form({
+        email: '',
+    }))
+
+    /**
+     * Submits the password reset request to the backend
+     */
+    function requestPasswordReset(e) {
+        form.post('/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('auth.forms.reset_password')" :punchline="$t('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')"
+                :showCancelButton="true"
+                cancelLandingView="login" />
+        </form>
+        <VueFooter />
+    </FormWrapper>
+</template>

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

@@ -0,0 +1,66 @@
+<script setup>
+    import Form from '@/components/formElements/Form'
+    import { useNotifyStore } from '@/stores/notify'
+
+    const notify = useNotifyStore()
+    const router = useRouter()
+    const route = useRoute()
+    
+    const isPending = ref(true)
+    const form = reactive(new Form({
+        email : route.query.email,
+        password : '',
+        password_confirmation : '',
+        token: route.query.token
+    }))
+
+    // form.email = route.query.email
+    // form.token = route.query.token
+
+    /**
+     * Submits the password reset to the backend
+     */
+    function resetPassword(e) {
+        form.password_confirmation = form.password
+
+        form.post('/user/password/reset', {returnError: true})
+        .then(response => {
+            form.password = ''
+            form.password_confirmation = ''
+            isPending.value = false
+            notify.success({ text: response.data.message, duration:-1 })
+        })
+        .catch(error => {
+            if( error.response.data.resetFailed ) {
+                notify.alert({ text: error.response.data.resetFailed, duration:-1 })
+            }
+            else if( error.response.status !== 422 ) {
+                notify.error(error)
+            }
+        })
+    }
+
+    onBeforeRouteLeave(() => {
+        notify.clear()
+    })
+</script>
+
+<template>
+    <FormWrapper :title="$t('auth.forms.new_password')">
+        <form @submit.prevent="resetPassword" @keydown="form.onKeydown($event)">
+            <FormField v-model="form.email" :isDisabled="true" fieldName="email" :fieldError="form.errors.get('email')" label="auth.forms.email" autofocus />
+            <FormPasswordField v-model="form.password" fieldName="password" :fieldError="form.errors.get('password')" :autocomplete="'new-password'" :showRules="true" label="auth.forms.new_password" />
+            <FieldError v-if="form.errors.get('token') != undefined" :error="form.errors.get('token')" :field="form.token" />
+            <FormButtons
+                v-if="isPending"
+                :submitId="'btnResetPwd'"
+                :isBusy="form.isBusy"
+                :caption="$t('auth.forms.change_password')"
+                :showCancelButton="true"
+                cancelLandingView="login" />
+            <RouterLink v-if="!isPending" id="btnContinue" :to="{ name: 'accounts' }" class="button is-link">{{ $t('commons.continue') }}</RouterLink>
+        </form>
+        <!-- footer -->
+        <VueFooter />
+    </FormWrapper>
+</template>