Add forgot password form

resources/js/app.js

@@ -6,13 +6,15 @@ import Locale from './vue-i18n-locales.generated';
 Vue.use(VueRouter)
 Vue.use(VueInternationalization);
 
-import App          from './views/App'
-import Login        from './views/Login'
-import Register     from './views/Register'
-import Accounts     from './views/Accounts'
-import Create       from './views/Create'
-import Edit         from './views/Edit'
-import NotFound     from './views/Error'
+import App              from './views/App'
+import Login            from './views/Login'
+import Register         from './views/Register'
+import Accounts         from './views/Accounts'
+import Create           from './views/Create'
+import Edit             from './views/Edit'
+import PasswordRequest  from './views/auth/password/Request'
+import NotFound         from './views/Error'
+
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen, faSearch } from '@fortawesome/free-solid-svg-icons'
@@ -33,54 +35,19 @@ const i18n = new VueInternationalization({
 const router = new VueRouter({
     mode: 'history',
     routes: [
-        {
-            path: '/',
-            name: 'accounts',
-            component: Accounts,
-            props: true
-        },
-        {
-            path: '/login',
-            name: 'login',
-            component: Login,
-        },
-        {
-            path: '/register',
-            name: 'register',
-            component: Register,
-        },
-        {
-            path: '/create',
-            name: 'create',
-            component: Create,
-        },
-        {
-            path: '/edit/:twofaccountId',
-            name: 'edit',
-            component: Edit,
-        },
-        {
-            path: '/flooded',
-            name: 'flooded',
-            component: NotFound,
-            props: true
-        },
-        {
-            path: '/error',
-            name: 'genericError',
-            component: NotFound,
-            props: true
-        },
-        {
-            path: '/404',
-            name: '404',
-            component: NotFound,
-            props: true
-        },
-        {
-            path: '*',
-            redirect: { name: '404' }
-        }
+        { path: '/', name: 'accounts', component: Accounts, props: true },
+        { path: '/login', name: 'login',component: Login },
+        { path: '/register', name: 'register',component: Register },
+        { path: '/create', name: 'create',component: Create },
+        { path: '/edit/:twofaccountId', name: 'edit',component: Edit },
+
+        { path: '/password/request', name: 'password.request', component: PasswordRequest },
+        //{ path: '/password/reset/:token', name: 'password.reset', component: page('auth/password/reset.vue') },
+
+        { path: '/flooded', name: 'flooded',component: NotFound,props: true },
+        { path: '/error', name: 'genericError',component: NotFound,props: true },
+        { path: '/404', name: '404',component: NotFound,props: true },
+        { path: '*', redirect: { name: '404' } }
     ],
 });
 

resources/js/views/Login.vue

@@ -33,6 +33,13 @@
                 </router-link>
             </div>
         </div>
+        <div class="columns is-mobile is-centered">
+            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
+                {{ $t('auth.forms.forgot_your_password') }}&nbsp;<router-link :to="{ name: 'password.request' }" class="is-link">
+                    {{ $t('auth.forms.request_password_reset') }}
+                </router-link>
+            </div>
+        </div>
     </div>
 </template>
 

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

@@ -0,0 +1,58 @@
+<template>
+    <div class="section">
+        <div class="columns is-mobile  is-centered">
+            <div class="column is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
+                <h1 class="title">{{ $t('passwords.reset_password') }}</h1>
+                <form method="POST" action="/login">
+                    <div class="field">
+                        <label class="label">{{ $t('auth.forms.email') }}</label>
+                        <div class="control">
+                            <input id="email" type="email" class="input" v-model="email" required autofocus />
+                        </div>
+                        <p class="help is-danger" v-if="validationErrors.email">{{ validationErrors.email.toString() }}</p>
+                    </div>
+                    <div class="field is-grouped">
+                        <div class="control">
+                            <button type="submit" class="button is-link" @click="handleSubmit">{{ $t('passwords.send_password_reset_link') }}</button>
+                        </div>
+                        <div class="control">
+                            <router-link :to="{ name: 'login' }" class="button is-text">{{ $t('commons.cancel') }}</router-link>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data(){
+            return {
+                email : '',
+                validationErrors: {}
+            }
+        },
+        methods : {
+            handleSubmit(e){
+                e.preventDefault()
+
+                axios.post('/api/password/email', {
+                    email: this.email
+                })
+                .then(response => {
+                    alert('email sent')
+                })
+                .catch(error => {
+                    console.log(error.response)
+                    if( error.response.data.errors ) {
+                        this.validationErrors = error.response.data.errors
+                    }
+                    else {
+                        this.$router.push({ name: 'genericError', params: { err: error.response.data.message } });
+                    }
+                });
+            }
+        }
+    }
+</script>

resources/js/vue-i18n-locales.generated.js

@@ -16,7 +16,9 @@ export default {
                 "confirm_password": "Confirm password",
                 "dont_have_account_yet": "Don't have your account yet?",
                 "already_register": "Already registered?",
-                "password_do_not_match": "Password do not match"
+                "password_do_not_match": "Password do not match",
+                "forgot_your_password": "Forgot your password?",
+                "request_password_reset": "Request a password reset"
             }
         },
         "commons": {
@@ -42,7 +44,9 @@ export default {
             "reset": "Your password has been reset!",
             "sent": "We have e-mailed your password reset link!",
             "token": "This password reset token is invalid.",
-            "user": "We can't find a user with that e-mail address."
+            "user": "We can't find a user with that e-mail address.",
+            "send_password_reset_link": "Send password reset link",
+            "reset_password": "Reset your password"
         },
         "twofaccounts": {
             "service": "Service",