From ffe64e722a7e12e70aa2724082e28e56d25c884c Mon Sep 17 00:00:00 2001
From: Guillaume Vincent <guillaume@oslab.fr>
Date: Sun, 9 Oct 2016 20:12:17 +0200
Subject: [PATCH] fix errors with buttons in login page

---
 src/components/ForgotPassword.vue | 12 +++++-----
 src/components/Login.vue          | 48 ++++++++++++++++-----------------------
 src/components/Register.vue       | 12 +++++-----
 3 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/src/components/ForgotPassword.vue b/src/components/ForgotPassword.vue
index 5ad22b6..d65d5b6 100644
--- a/src/components/ForgotPassword.vue
+++ b/src/components/ForgotPassword.vue
@@ -9,7 +9,7 @@
             <div class="row">
                 <div class="login-header">
                     <div class="col-xs-1">
-                        <span class="link" v-on:click="go('index')">
+                        <span class="link" v-on:click="go('login')">
                             <i class="fa fa-chevron-circle-left white" aria-hidden="true"></i>
                         </span>
                     </div>
@@ -21,7 +21,7 @@
         </div>
         <div class="card-block">
             <form v-on:submit.prevent="forgotPassword">
-                <div class="form-group row" v-if="errorMessage">
+                <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>
@@ -72,18 +72,18 @@
                 storage,
                 email: '',
                 emailRequired: false,
-                errorMessage: false,
+                showError: false,
                 successMessage: false,
             };
         },
         methods: Object.assign(mapActions(['go']), {
             cleanErrors(){
                 this.emailRequired = false;
-                this.errorMessage = false;
+                this.showError = false;
                 this.successMessage = false;
             },
             noErrors(){
-                return !(this.emailRequired || this.errorMessage);
+                return !(this.emailRequired || this.showError);
             },
             forgotPassword(){
                 this.cleanErrors();
@@ -94,7 +94,7 @@
                 this.auth.resetPassword({email: this.email}).then(()=> {
                     this.successMessage = true
                 }).catch(err => {
-                    this.errorMessage = true;
+                    this.showError = true;
                 });
             }
         })
diff --git a/src/components/Login.vue b/src/components/Login.vue
index d45b23b..54d5c7c 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -10,14 +10,6 @@
         top: 0;
         left: 0;
     }
-
-    .fade-enter-active, .fade-leave-active {
-        transition: opacity .5s
-    }
-
-    .fade-enter, .fade-leave-active {
-        opacity: 0
-    }
 </style>
 <template>
     <div>
@@ -36,12 +28,12 @@
             </div>
         </div>
         <div class="card-block">
-            <transition name="fade">
-                <div class="alert alert-danger" role="alert" v-if="showError">
-                    {{ errorMessage }}
-                </div>
-            </transition>
             <form v-on:submit.prevent="login">
+                <div class="form-group row" v-if="showError">
+                    <div class="col-xs-12 text-muted text-danger">
+                        {{ errorMessage }}
+                    </div>
+                </div>
                 <div class="form-group row">
                     <div class="col-xs-12">
                         <div class="inner-addon left-addon">
@@ -84,21 +76,15 @@
                         <button id="loginButton" class="btn btn-primary" type="submit">
                             Sign In
                         </button>
+                        <button id="registerButton" class="btn btn-secondary" type="button" v-on:click="go('register')">
+                            Register
+                        </button>
                     </div>
                 </div>
                 <div class="form-group row">
-                    <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>
+                    <button class="btn btn-link" type="button" v-on:click="go('forgotPassword')">
+                        Forgot you password ?
+                    </button>
                 </div>
             </form>
         </div>
@@ -130,11 +116,15 @@
                 this.errorMessage = errorMessage;
                 this.showError = true;
                 setTimeout(() => {
-                    this.showError = false;
-                    this.errorMessage = '';
-                }, 4000);
+                    this.cleanErrors();
+                }, 6000);
+            },
+            cleanErrors(){
+                this.showError = false;
+                this.errorMessage = '';
             },
             login(){
+                this.cleanErrors();
                 var baseURL = this.baseURL;
                 var email = this.user.email;
                 if (!email || !this.user.password || !baseURL) {
@@ -151,7 +141,7 @@
                         .catch(err => {
                             if (err.response === undefined) {
                                 if (baseURL === "https://lesspass.com") {
-                                    this.showErrorMessage('LessPass Database is not running. Sorry for the inconvenience.');
+                                    this.showErrorMessage('Oops! Something went wrong. Retry in a few minutes.');
                                 } else {
                                     this.showErrorMessage('Your LessPass Database is not running');
                                 }
diff --git a/src/components/Register.vue b/src/components/Register.vue
index 8040547..1e0e467 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -9,7 +9,7 @@
             <div class="row">
                 <div class="login-header">
                     <div class="col-xs-1">
-                        <span class="link" v-on:click="go('index')">
+                        <span class="link" v-on:click="go('login')">
                             <i class="fa fa-chevron-circle-left white" aria-hidden="true"></i>
                         </span>
                     </div>
@@ -21,7 +21,7 @@
         </div>
         <div class="card-block">
             <form v-on:submit.prevent="register">
-                <div class="form-group row" v-if="errorMessage">
+                <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>
@@ -90,7 +90,7 @@
                 userNameAlreadyExist: false,
                 emailRequired: false,
                 passwordRequired: false,
-                errorMessage: false
+                showError: false
             };
         },
         methods: Object.assign(mapActions(['go']), {
@@ -98,10 +98,10 @@
                 this.userNameAlreadyExist = false;
                 this.emailRequired = false;
                 this.passwordRequired = false;
-                this.errorMessage = false;
+                this.showError = false;
             },
             noErrors(){
-                return !(this.userNameAlreadyExist || this.emailRequired || this.passwordRequired || this.errorMessage);
+                return !(this.userNameAlreadyExist || this.emailRequired || this.passwordRequired || this.showError);
             },
             register(){
                 this.cleanErrors();
@@ -121,7 +121,7 @@
                             if (err.response && (err.response.data.email[0].indexOf('already exists') !== -1)) {
                                 this.userNameAlreadyExist = true
                             } else {
-                                this.errorMessage = true;
+                                this.showError = true;
                             }
                         });
             }