From d36c2ea4cd63c361dc8cd2dcce10f53037918c02 Mon Sep 17 00:00:00 2001
From: Guillaume Vincent <guillaume@oslab.fr>
Date: Mon, 10 Oct 2016 11:12:17 +0200
Subject: [PATCH] add register reset password page to vue-router

---
 src/components/ForgotPassword.vue | 85 ---------------------------------------
 src/components/Login.vue          |  2 +-
 src/components/PasswordReset.vue  | 85 +++++++++++++++++++++++++++++++++++++++
 src/components/Passwords.vue      |  8 ++--
 src/components/Register.vue       |  6 +--
 src/routes.js                     |  7 +++-
 6 files changed, 97 insertions(+), 96 deletions(-)
 delete mode 100644 src/components/ForgotPassword.vue
 create mode 100644 src/components/PasswordReset.vue

diff --git a/src/components/ForgotPassword.vue b/src/components/ForgotPassword.vue
deleted file mode 100644
index 5977b68..0000000
--- a/src/components/ForgotPassword.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<style>
-    .card-block {
-        position: relative;
-    }
-</style>
-<template>
-    <form v-on:submit.prevent="forgotPassword">
-        <div class="form-group row" v-if="showError">
-            <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>
-</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,
-                showError: false,
-                successMessage: false,
-            };
-        },
-        methods: {
-            cleanErrors(){
-                this.emailRequired = false;
-                this.showError = false;
-                this.successMessage = false;
-            },
-            noErrors(){
-                return !(this.emailRequired || this.showError);
-            },
-            forgotPassword(){
-                this.cleanErrors();
-                if (!this.email) {
-                    this.emailRequired = true;
-                    return;
-                }
-                this.auth.resetPassword({email: this.email}).then(()=> {
-                    this.successMessage = true
-                }).catch(err => {
-                    this.showError = true;
-                });
-            }
-        }
-    }
-</script>
-
diff --git a/src/components/Login.vue b/src/components/Login.vue
index a6b711d..a362553 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -54,7 +54,7 @@
         </div>
         <div class="form-group row">
             <div class="col-xs-12">
-                <router-link :to="{ name: 'resetPassword'}">
+                <router-link :to="{ name: 'passwordReset'}">
                     Forgot you password ?
                 </router-link>
             </div>
diff --git a/src/components/PasswordReset.vue b/src/components/PasswordReset.vue
new file mode 100644
index 0000000..5977b68
--- /dev/null
+++ b/src/components/PasswordReset.vue
@@ -0,0 +1,85 @@
+<style>
+    .card-block {
+        position: relative;
+    }
+</style>
+<template>
+    <form v-on:submit.prevent="forgotPassword">
+        <div class="form-group row" v-if="showError">
+            <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>
+</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,
+                showError: false,
+                successMessage: false,
+            };
+        },
+        methods: {
+            cleanErrors(){
+                this.emailRequired = false;
+                this.showError = false;
+                this.successMessage = false;
+            },
+            noErrors(){
+                return !(this.emailRequired || this.showError);
+            },
+            forgotPassword(){
+                this.cleanErrors();
+                if (!this.email) {
+                    this.emailRequired = true;
+                    return;
+                }
+                this.auth.resetPassword({email: this.email}).then(()=> {
+                    this.successMessage = true
+                }).catch(err => {
+                    this.showError = true;
+                });
+            }
+        }
+    }
+</script>
+
diff --git a/src/components/Passwords.vue b/src/components/Passwords.vue
index 45b850a..ba53f2b 100644
--- a/src/components/Passwords.vue
+++ b/src/components/Passwords.vue
@@ -1,5 +1,5 @@
-<style scoped>
-    #sites {
+<style>
+    #passwords {
         max-height: 320px;
         overflow-y: scroll;
         overflow-x: hidden;
@@ -23,7 +23,7 @@
                 </div>-->
             </div>
         </form>
-        <div id="sites">
+        <div id="passwords">
             <a href="#" class="list-group-item list-group-item-action" v-for="password in filteredPasswords"
                v-on:click="setCurrentPasswordAndGoIndex(password)">
                 <h5 class="list-group-item-heading">{{password.site}}</h5>
@@ -32,8 +32,6 @@
         </div>
     </div>
 </template>
-
-
 <script type="text/ecmascript-6">
     import {mapGetters} from 'vuex';
 
diff --git a/src/components/Register.vue b/src/components/Register.vue
index 38e13b4..170c855 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -37,9 +37,9 @@
                            class="form-control"
                            placeholder="Password"
                            v-model="user.password">
-                    <small class="form-text text-muted text-danger">
-                        <span v-if="noErrors()">Do not use your master password here</span>
-                        <span v-if="passwordRequired">A password is required</span>
+                    <small class="form-text text-muted">
+                        <span v-if="noErrors()" class="text-warning">Do not use your master password here</span>
+                        <span v-if="passwordRequired" class="text-danger">A password is required</span>
                     </small>
                 </div>
             </div>
diff --git a/src/routes.js b/src/routes.js
index 5e5b6a7..3a657b5 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -2,10 +2,10 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 
 import PasswordGenerator from './components/PasswordGenerator';
-import PasswordResetConfirm from './components/PasswordResetConfirm';
 import Login from './components/Login';
 import Register from './components/Register';
-import ForgotPassword from './components/ForgotPassword';
+import PasswordReset from './components/PasswordReset';
+import PasswordResetConfirm from './components/PasswordResetConfirm';
 import Passwords from './components/Passwords';
 
 Vue.use(VueRouter);
@@ -13,6 +13,9 @@ Vue.use(VueRouter);
 const routes = [
     {path: '/', name: 'home', component: PasswordGenerator},
     {path: '/login', name: 'login', component: Login},
+    {path: '/register', name: 'register', component: Register},
+    {path: '/passwords', name: 'passwords', component: Passwords},
+    {path: '/password/reset', name: 'passwordReset', component: PasswordReset},
     {path: '/password/reset/confirm/:uid/:token', name: 'passwordResetConfirm', component: PasswordResetConfirm},
 ];