add forget password page

src/App.vue

@@ -96,6 +96,7 @@
             <lesspass-menu></lesspass-menu>
             <login v-show="page === 'login'"></login>
             <register v-show="page === 'register'"></register>
+            <forgot-password v-show="page === 'forgotPassword'"></forgot-password>
             <passwords v-show="page === 'passwords'"></passwords>
             <password-generator v-show="page === 'index'"></password-generator>
         </div>
@@ -105,6 +106,7 @@
     import PasswordGenerator from './components/PasswordGenerator';
     import Login from './components/Login';
     import Register from './components/Register';
+    import ForgotPassword from './components/ForgotPassword';
     import Passwords from './components/Passwords';
     import LesspassMenu from './components/Menu';
     import {mapGetters} from 'vuex'
@@ -115,6 +117,7 @@
             Login,
             Register,
             LesspassMenu,
+            ForgotPassword,
             Passwords,
         },
         computed: mapGetters([

src/components/ForgotPassword.vue

@@ -0,0 +1,87 @@
+<style>
+    .card-block {
+        position: relative;
+    }
+</style>
+<template>
+    <div class="card-block">
+        <form v-on:submit.prevent="forgotPassword">
+            <div class="form-group row" v-if="errorMessage">
+                <div class="col-xs-12 text-muted text-danger">
+                    Oops! Something went wrong. Retry in a few minutes.
+                </div>
+            </div>
+            <div class="form-group row" v-if="successMessage">
+                <div class="col-xs-12 text-muted text-success">
+                    If a matching account was found an email was sent to allow you to reset your password.
+                </div>
+            </div>
+            <div class="form-group row">
+                <div class="col-xs-12">
+                    <div class="inner-addon left-addon">
+                        <i class="fa fa-user"></i>
+                        <input id="email"
+                               class="form-control"
+                               name="email"
+                               type="email"
+                               placeholder="Email"
+                               v-model="email">
+                        <small class="form-text text-muted text-danger">
+                            <span v-if="emailRequired">An email is required</span>
+                        </small>
+                    </div>
+                </div>
+            </div>
+            <div class="form-group row">
+                <div class="col-xs-12">
+                    <button id="loginButton" class="btn btn-primary" type="submit">
+                        Send me a reset link
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</template>
+<script type="text/ecmascript-6">
+    import Auth from '../api/auth';
+    import Storage from '../api/storage';
+    import {mapActions} from 'vuex';
+
+    export default {
+        data() {
+            const storage = new Storage();
+            const auth = new Auth(storage);
+            return {
+                auth,
+                storage,
+                email: '',
+                emailRequired: false,
+                errorMessage: false,
+                successMessage: false,
+            };
+        },
+        methods: Object.assign(mapActions(['go']), {
+            cleanErrors(){
+                this.emailRequired = false;
+                this.errorMessage = false;
+                this.successMessage = false;
+            },
+            noErrors(){
+                return !(this.emailRequired || this.errorMessage);
+            },
+            forgotPassword(){
+                this.cleanErrors();
+                if (!this.email) {
+                    this.emailRequired = true;
+                    return;
+                }
+                this.auth.resetPassword({email: this.email}).then(()=> {
+                    this.successMessage = true
+                }).catch(err => {
+                    this.errorMessage = true;
+                });
+            }
+        })
+    }
+</script>
+

src/components/Login.vue

@@ -71,7 +71,18 @@
                 </div>
             </div>
             <div class="form-group row">
-                    <button class="btn btn-link" v-on:click="go('register')">Do not have an account ? Register</button>
+                <ul class="list-unstyled">
+                    <li>
+                        <button class="btn btn-link" v-on:click="go('register')">
+                            Do not have an account ? Register
+                        </button>
+                    </li>
+                    <li>
+                        <button class="btn btn-link" v-on:click="go('forgotPassword')">
+                            Forgot you password ?
+                        </button>
+                    </li>
+                </ul>
             </div>
         </form>
     </div>
@@ -79,7 +90,7 @@
 <script type="text/ecmascript-6">
     import Auth from '../api/auth';
     import Storage from '../api/storage';
-    import {mapGetters,mapActions} from 'vuex';
+    import {mapGetters, mapActions} from 'vuex';
 
     export default {
         data() {

src/components/Menu.vue

@@ -65,6 +65,16 @@
                         Create a LessPass Database Account
                     </div>
                 </div>
+                <div class="login-header" v-show="page === 'forgotPassword'">
+                    <div class="col-xs-1">
+                        <span class="link" v-on:click="go('login')">
+                            <i class="fa fa-chevron-circle-left white" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                    <div class="col-xs-10 text-xs-center">
+                        Forgot Password
+                    </div>
+                </div>
             </div>
         </div>
     </div>

src/components/Register.vue

@@ -6,6 +6,11 @@
 <template>
     <div class="card-block">
         <form v-on:submit.prevent="register">
+            <div class="form-group row" v-if="errorMessage">
+                <div class="col-xs-12 text-muted text-danger">
+                    Oops! Something went wrong. Retry in a few minutes.
+                </div>
+            </div>
             <div class="form-group row">
                 <div class="col-xs-12">
                     <div class="inner-addon left-addon">
@@ -42,13 +47,6 @@
             </div>
             <div class="form-group row">
                 <div class="col-xs-12">
-                    <p v-if="errorMessage" class="form-text text-muted text-danger">
-                        Oops! Something went wrong. Retry in a few minutes.
-                    </p>
-                </div>
-            </div>
-            <div class="form-group row">
-                <div class="col-xs-12">
                     <button id="loginButton" class="btn btn-primary" type="submit">
                         Register
                     </button>
@@ -60,7 +58,7 @@
 <script type="text/ecmascript-6">
     import Auth from '../api/auth';
     import Storage from '../api/storage';
-    import {mapGetters, mapActions} from 'vuex';
+    import {mapActions} from 'vuex';
 
     export default {
         data() {
@@ -111,10 +109,7 @@
                             }
                         });
             }
-        }),
-        computed: mapGetters([
-            'baseURL'
-        ])
+        })
     }
 </script>