ux: add register page into login page

src/router.js

@@ -3,7 +3,6 @@ import VueRouter from 'vue-router';
 
 import PasswordGenerator from './views/PasswordGenerator';
 import Login from './views/Login';
-import Register from './views/Register';
 import PasswordReset from './views/PasswordReset';
 import PasswordResetConfirm from './views/PasswordResetConfirm';
 import Passwords from './views/Passwords';
@@ -13,7 +12,6 @@ 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: '/passwords/:id', name: 'password', component: PasswordGenerator},
     {path: '/password/reset', name: 'passwordReset', component: PasswordReset},

src/store.js

@@ -28,6 +28,7 @@ const state = {
     email: '',
     passwordStatus: 'CLEAN',
     passwords: [],
+    baseURL: 'https://lesspass.com',
     password: {
         ...defaultPassword
     }
@@ -70,6 +71,12 @@ const mutations = {
     },
     UPDATE_SITE(state, {site}){
         state.password.site = site
+    },
+    UPDATE_BASE_URL(state, {baseURL}){
+        state.baseURL = baseURL
+    },
+    UPDATE_EMAIL(state, {email}){
+        state.email = email
     }
 };
 
@@ -133,8 +140,7 @@ const getters = {
     isAuthenticated: state => state.authenticated,
     isGuest: state => !state.authenticated,
     passwordStatus: state => state.passwordStatus,
-    email: state => state.email,
-    baseURL: state => state.baseURL
+    email: state => state.email
 };
 
 export default new Vuex.Store({

src/views/Login.vue

@@ -1,5 +1,5 @@
 <template>
-    <form v-on:submit.prevent="login">
+    <form>
         <div class="form-group row" v-if="showError">
             <div class="col-xs-12 text-muted text-danger">
                 {{ errorMessage }}
@@ -9,12 +9,17 @@
             <div class="col-xs-12">
                 <div class="inner-addon left-addon">
                     <i class="fa fa-user"></i>
-                    <input id="login"
+                    <input id="email"
                            class="form-control"
                            name="login"
                            type="email"
                            placeholder="Email"
-                           v-model="user.email">
+                           required
+                           v-model="email">
+                    <small class="form-text text-muted text-danger">
+                        <span v-if="errors.userNameAlreadyExist">Someone already use that username. Do you want to sign in ?</span>
+                        <span v-if="errors.emailRequired">An email is required</span>
+                    </small>
                 </div>
             </div>
         </div>
@@ -26,30 +31,41 @@
                            name="password"
                            type="password"
                            class="form-control"
-                           placeholder="Password"
-                           v-model="user.password">
+                           required
+                           placeholder="LessPass password"
+                           v-model="password">
+                    <small class="form-text text-muted">
+                        <span v-if="noErrors()" class="text-warning">Do not use your master password here</span>
+                        <span v-if="errors.passwordRequired" class="text-danger">A password is required</span>
+                    </small>
                 </div>
             </div>
         </div>
         <div class="form-group row">
-            <div class="col-xs-12">
+            <div class="col-xs-12 hint--bottom" aria-label="You can use your self hosted LessPass Database">
                 <div class="inner-addon left-addon">
                     <i class="fa fa-globe"></i>
-                    <input class="form-control" type="text" id="baseURL" v-model="$store.state.baseURL">
-                    <small id="siteHelp" class="form-text text-muted">You can use your self hosted LessPass
-                        Database
+                    <input id="baseURL"
+                           class="form-control"
+                           type="text"
+                           placeholder="LessPass Database (https://...)"
+                           v-model="baseURL">
+                    <small class="form-text text-muted">
+                        <span v-if="noErrors()">You can use your self hosted LessPass Database</span>
+                        <span v-if="errors.baseURLRequired"
+                              class="text-danger">A LessPass database url 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">
+                <button id="loginButton" class="btn btn-primary" type="button" v-on:click="signIn">
                     Sign In
                 </button>
-                <router-link class="btn btn-secondary" :to="{ name: 'register'}">
+                <button id="registerButton" class="btn btn-secondary" type="button" v-on:click="register">
                     Register
-                </router-link>
+                </button>
             </div>
         </div>
         <div class="form-group row">
@@ -66,6 +82,13 @@
     import Storage from '../api/storage';
     import {mapGetters} from 'vuex';
 
+    const defaultErrors = {
+        userNameAlreadyExist: false,
+        baseURLRequired: false,
+        emailRequired: false,
+        passwordRequired: false,
+    };
+
     export default {
         data() {
             const storage = new Storage();
@@ -73,59 +96,106 @@
             return {
                 auth,
                 storage,
-                user: {
-                    email: '',
-                    password: ''
-                },
+                password: '',
+                showError: false,
                 errorMessage: '',
-                showError: false
+                errors: {...defaultErrors}
             };
         },
-
         methods: {
-            showErrorMessage(errorMessage){
-                this.errorMessage = errorMessage;
-                this.showError = true;
-                setTimeout(() => {
-                    this.cleanErrors();
-                }, 6000);
+            noErrors(){
+                return !(this.errors.userNameAlreadyExist || this.errors.emailRequired || this.errors.passwordRequired || this.errors.baseURLRequired || this.showError);
+            },
+            formIsValid(){
+                this.cleanErrors();
+                let formIsValid = true;
+                if (!this.email) {
+                    this.errors.emailRequired = true;
+                    formIsValid = false;
+                }
+                if (!this.password) {
+                    this.errors.passwordRequired = true;
+                    formIsValid = false;
+                }
+                if (!this.baseURL) {
+                    this.errors.baseURLRequired = true;
+                    formIsValid = false;
+                }
+                return formIsValid;
             },
             cleanErrors(){
                 this.showError = false;
                 this.errorMessage = '';
+                this.errors = {...defaultErrors}
             },
-            login(){
-                this.cleanErrors();
-                var baseURL = this.baseURL;
-                var email = this.user.email;
-                if (!email || !this.user.password || !baseURL) {
-                    this.showErrorMessage('email, password and url are mandatory');
-                    return;
+            signIn(){
+                if (this.formIsValid()) {
+                    const email = this.email;
+                    const password = this.password;
+                    const baseURL = this.baseURL;
+                    this.auth.login({email, password}, baseURL)
+                            .then(()=> {
+                                this.storage.save({baseURL, email});
+                                this.$store.dispatch('USER_AUTHENTICATED', {email});
+                                this.$router.push({name: 'home'});
+                            })
+                            .catch(err => {
+                                if (err.response === undefined) {
+                                    if (baseURL === "https://lesspass.com") {
+                                        this.showErrorMessage();
+                                    } else {
+                                        this.showErrorMessage('Your LessPass Database is not running');
+                                    }
+                                } else if (err.response.status === 400) {
+                                    this.showErrorMessage('Your login or password is not good. Do you have an account ?');
+                                } else {
+                                    this.showErrorMessage()
+                                }
+                            });
                 }
-                this.auth.login(this.user, baseURL)
-                        .then(()=> {
-                            this.storage.save({baseURL: baseURL, email: email});
-                            this.$store.dispatch('USER_AUTHENTICATED', {email: email});
-                            this.$router.push({name: 'home'});
-                        })
-                        .catch(err => {
-                            if (err.response === undefined) {
-                                if (baseURL === "https://lesspass.com") {
-                                    this.showErrorMessage('Oops! Something went wrong. Retry in a few minutes.');
+            },
+            register(){
+                if (this.formIsValid()) {
+                    const email = this.email;
+                    const password = this.password;
+                    const baseURL = this.baseURL;
+                    this.auth.register({email, password}, baseURL)
+                            .then(this.signIn)
+                            .catch(err => {
+                                if (err.response && (err.response.data.email[0].indexOf('already exists') !== -1)) {
+                                    this.userNameAlreadyExist = true;
                                 } else {
-                                    this.showErrorMessage('Your LessPass Database is not running');
+                                    this.showErrorMessage();
                                 }
-                            } else if (err.response.status === 400) {
-                                this.showErrorMessage('Your login or password is not good. Do you have an account ?');
-                            } else {
-                                this.showErrorMessage('Oops! Something went wrong. Retry in a few minutes.')
-                            }
-                        });
-            }
+                            });
+                }
+            },
+            showErrorMessage(errorMessage = 'Oops! Something went wrong. Retry in a few minutes.'){
+                this.errorMessage = errorMessage;
+                this.showError = true;
+                setTimeout(() => {
+                    this.cleanErrors();
+                }, 6000);
+            },
         },
-        computed: mapGetters([
-            'baseURL'
-        ])
+        computed: {
+            baseURL: {
+                get () {
+                    return this.$store.state.baseURL
+                },
+                set (baseURL) {
+                    this.$store.commit('UPDATE_BASE_URL', {baseURL})
+                }
+            },
+            email: {
+                get () {
+                    return this.$store.state.email
+                },
+                set (email) {
+                    this.$store.commit('UPDATE_EMAIL', {email})
+                }
+            }
+        }
     }
 </script>
 

src/views/Register.vue

@@ -1,108 +0,0 @@
-<template>
-    <form v-on:submit.prevent="register">
-        <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">
-            <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="user.email">
-                    <small class="form-text text-muted text-danger">
-                        <span v-if="userNameAlreadyExist">Someone already use that username. Do you want to sign in ?</span>
-                        <span v-if="emailRequired">An email is required</span>
-                    </small>
-                </div>
-            </div>
-        </div>
-        <div class="form-group row">
-            <div class="col-xs-12">
-                <div class="inner-addon left-addon">
-                    <i class="fa fa-lock"></i>
-                    <input id="password"
-                           name="password"
-                           type="password"
-                           class="form-control"
-                           placeholder="Password"
-                           v-model="user.password">
-                    <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>
-        </div>
-        <div class="form-group row">
-            <div class="col-xs-12">
-                <button id="loginButton" class="btn btn-primary" type="submit">
-                    Register
-                </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,
-                user: {
-                    email: '',
-                    password: ''
-                },
-                userNameAlreadyExist: false,
-                emailRequired: false,
-                passwordRequired: false,
-                showError: false
-            };
-        },
-        methods: {
-            cleanErrors(){
-                this.userNameAlreadyExist = false;
-                this.emailRequired = false;
-                this.passwordRequired = false;
-                this.showError = false;
-            },
-            noErrors(){
-                return !(this.userNameAlreadyExist || this.emailRequired || this.passwordRequired || this.showError);
-            },
-            register(){
-                this.cleanErrors();
-                if (!this.user.email) {
-                    this.emailRequired = true;
-                    return;
-                }
-                if (!this.user.password) {
-                    this.passwordRequired = true;
-                    return;
-                }
-                this.auth.register(this.user, 'https://lesspass.com')
-                        .then(()=> {
-                            this.$router.push({name: 'login'});
-                        })
-                        .catch(err => {
-                            if (err.response && (err.response.data.email[0].indexOf('already exists') !== -1)) {
-                                this.userNameAlreadyExist = true
-                            } else {
-                                this.showError = true;
-                            }
-                        });
-            }
-        }
-    }
-</script>
-