@@ -4,59 +4,41 @@ | |||||
} | } | ||||
</style> | </style> | ||||
<template> | <template> | ||||
<div> | |||||
<div class="card-header card-header-dark"> | |||||
<div class="row"> | |||||
<div class="login-header"> | |||||
<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> | |||||
<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> | </div> | ||||
<div class="card-block"> | |||||
<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 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> | ||||
</form> | |||||
</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> | </div> | ||||
</div> | |||||
</form> | |||||
</template> | </template> | ||||
<script type="text/ecmascript-6"> | <script type="text/ecmascript-6"> | ||||
import Auth from '../api/auth'; | import Auth from '../api/auth'; | ||||
@@ -76,7 +58,7 @@ | |||||
successMessage: false, | successMessage: false, | ||||
}; | }; | ||||
}, | }, | ||||
methods: Object.assign(mapActions(['go']), { | |||||
methods: { | |||||
cleanErrors(){ | cleanErrors(){ | ||||
this.emailRequired = false; | this.emailRequired = false; | ||||
this.showError = false; | this.showError = false; | ||||
@@ -97,7 +79,7 @@ | |||||
this.showError = true; | this.showError = true; | ||||
}); | }); | ||||
} | } | ||||
}) | |||||
} | |||||
} | } | ||||
</script> | </script> | ||||
@@ -47,15 +47,17 @@ | |||||
<button id="loginButton" class="btn btn-primary" type="submit"> | <button id="loginButton" class="btn btn-primary" type="submit"> | ||||
Sign In | Sign In | ||||
</button> | </button> | ||||
<button id="registerButton" class="btn btn-secondary" type="button" v-on:click="go('register')"> | |||||
<router-link class="btn btn-secondary" :to="{ name: 'register'}"> | |||||
Register | Register | ||||
</button> | |||||
</router-link> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="form-group row"> | <div class="form-group row"> | ||||
<button class="btn btn-link" type="button" v-on:click="go('forgotPassword')"> | |||||
Forgot you password ? | |||||
</button> | |||||
<div class="col-xs-12"> | |||||
<router-link :to="{ name: 'resetPassword'}"> | |||||
Forgot you password ? | |||||
</router-link> | |||||
</div> | |||||
</div> | </div> | ||||
</form> | </form> | ||||
</template> | </template> | ||||
@@ -105,7 +107,7 @@ | |||||
this.storage.save({baseURL: baseURL, email: email}); | this.storage.save({baseURL: baseURL, email: email}); | ||||
this.$store.dispatch('userAuthenticated', {email: email}); | this.$store.dispatch('userAuthenticated', {email: email}); | ||||
this.$store.dispatch('loadPasswords'); | this.$store.dispatch('loadPasswords'); | ||||
this.$router.push({ name: 'home'}); | |||||
this.$router.push({name: 'home'}); | |||||
}) | }) | ||||
.catch(err => { | .catch(err => { | ||||
if (err.response === undefined) { | if (err.response === undefined) { | ||||
@@ -6,20 +6,29 @@ | |||||
} | } | ||||
.menu-link { | .menu-link { | ||||
color: white; | |||||
color: #373a3c; | |||||
text-decoration: none; | |||||
} | } | ||||
.menu-link:hover, .menu-link:focus, .menu-link:active { | .menu-link:hover, .menu-link:focus, .menu-link:active { | ||||
color: #373a3c; | |||||
} | |||||
.menu-link-white { | |||||
color: white; | |||||
} | |||||
.menu-link-white:hover, .menu-link-white:focus, .menu-link-white:active { | |||||
text-decoration: none; | text-decoration: none; | ||||
color: white; | color: white; | ||||
} | } | ||||
</style> | </style> | ||||
<template> | <template> | ||||
<div id="menu"> | <div id="menu"> | ||||
<!--<div class="card-header" v-show="isAuthenticated"> | |||||
<div class="card-header" v-show="isAuthenticated"> | |||||
<div class="row"> | <div class="row"> | ||||
<div class="col-xs-6"> | <div class="col-xs-6"> | ||||
<router-link to="/">LessPass</router-link> | |||||
<router-link class="menu-link" :to="{ name: 'home'}">LessPass</router-link> | |||||
</div> | </div> | ||||
<div class="col-xs-6 text-xs-right"> | <div class="col-xs-6 text-xs-right"> | ||||
<div class="btn-group"> | <div class="btn-group"> | ||||
@@ -28,23 +37,23 @@ | |||||
{{email}} | {{email}} | ||||
</button> | </button> | ||||
<div class="dropdown-menu dropdown-menu-right"> | <div class="dropdown-menu dropdown-menu-right"> | ||||
<button class="dropdown-item" type="button" v-on:click="go('passwords')">Passwords</button> | |||||
<button class="dropdown-item" type="button">Help</button> | |||||
<router-link class="dropdown-item" :to="{ name: 'passwords'}">Passwords</router-link> | |||||
<router-link class="dropdown-item" :to="{ name: 'help'}">Help</router-link> | |||||
<div class="dropdown-divider"></div> | <div class="dropdown-divider"></div> | ||||
<button class="dropdown-item" type="button" v-on:click="logout">Log out</button> | <button class="dropdown-item" type="button" v-on:click="logout">Log out</button> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</div>--> | |||||
</div> | |||||
<div class="card-header card-header-dark" v-show="isGuest"> | <div class="card-header card-header-dark" v-show="isGuest"> | ||||
<div class="row"> | <div class="row"> | ||||
<div class="index-header"> | <div class="index-header"> | ||||
<div class="col-xs-6"> | <div class="col-xs-6"> | ||||
<router-link class="menu-link" to="/">LessPass</router-link> | |||||
<router-link class="menu-link-white" :to="{ name: 'home'}">LessPass</router-link> | |||||
</div> | </div> | ||||
<div class="col-xs-6 text-xs-right"> | <div class="col-xs-6 text-xs-right"> | ||||
<router-link class="menu-link" to="/login"> | |||||
<router-link class="menu-link-white" :to="{ name: 'login'}"> | |||||
<i class="fa fa-user-secret white" aria-hidden="true"></i> | <i class="fa fa-user-secret white" aria-hidden="true"></i> | ||||
</router-link> | </router-link> | ||||
</div> | </div> | ||||
@@ -58,7 +67,6 @@ | |||||
export default { | export default { | ||||
methods: mapActions([ | methods: mapActions([ | ||||
'go', | |||||
'logout' | 'logout' | ||||
]), | ]), | ||||
computed: mapGetters([ | computed: mapGetters([ | ||||
@@ -67,13 +75,4 @@ | |||||
'email' | 'email' | ||||
]) | ]) | ||||
} | } | ||||
</script> | |||||
module.exports = function (string, context) { | |||||
for (var key in context) { | |||||
var find = `\\$\\{(${key})\\}`; | |||||
var re = new RegExp(find, 'g'); | |||||
string = string.replace(re, context[key]); | |||||
} | |||||
return string | |||||
}; | |||||
</script> |
@@ -7,40 +7,35 @@ | |||||
</style> | </style> | ||||
<template> | <template> | ||||
<div> | <div> | ||||
<lesspass-menu></lesspass-menu> | |||||
<div class="card-block"> | |||||
<form action=""> | |||||
<div class="form-group row"> | |||||
<div class="col-sm-7"> | |||||
<div class="inner-addon left-addon"> | |||||
<i class="fa fa-search"></i> | |||||
<input class="form-control" name="search" placeholder="Search" v-model="searchQuery"> | |||||
</div> | |||||
<form> | |||||
<div class="form-group row"> | |||||
<div class="col-sm-7"> | |||||
<div class="inner-addon left-addon"> | |||||
<i class="fa fa-search"></i> | |||||
<input class="form-control" name="search" placeholder="Search" v-model="searchQuery"> | |||||
</div> | </div> | ||||
<!--<div class="col-xs-5 text-xs-right"> | |||||
<button class="btn btn-secondary"> | |||||
<i class="fa fa-save"></i> | |||||
download | |||||
</button> | |||||
</div>--> | |||||
</div> | </div> | ||||
</form> | |||||
<div id="sites"> | |||||
<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> | |||||
<p class="list-group-item-text">{{password.login}}</p> | |||||
</a> | |||||
<!--<div class="col-xs-5 text-xs-right"> | |||||
<button class="btn btn-secondary"> | |||||
<i class="fa fa-save"></i> | |||||
download | |||||
</button> | |||||
</div>--> | |||||
</div> | </div> | ||||
</form> | |||||
<div id="sites"> | |||||
<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> | |||||
<p class="list-group-item-text">{{password.login}}</p> | |||||
</a> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script type="text/ecmascript-6"> | <script type="text/ecmascript-6"> | ||||
import {mapGetters, mapActions} from 'vuex'; | |||||
import LesspassMenu from './Menu'; | |||||
import {mapGetters} from 'vuex'; | |||||
export default { | export default { | ||||
data(){ | data(){ | ||||
@@ -55,14 +50,11 @@ | |||||
}) | }) | ||||
} | } | ||||
}), | }), | ||||
components: { | |||||
LesspassMenu | |||||
}, | |||||
methods: Object.assign(mapActions(['go']), { | |||||
methods: { | |||||
setCurrentPasswordAndGoIndex(password){ | setCurrentPasswordAndGoIndex(password){ | ||||
this.$store.dispatch('setCurrentPassword', password); | this.$store.dispatch('setCurrentPassword', password); | ||||
this.go('index'); | |||||
this.$router.push({name: 'home'}); | |||||
} | } | ||||
}) | |||||
} | |||||
} | } | ||||
</script> | </script> |
@@ -4,72 +4,54 @@ | |||||
} | } | ||||
</style> | </style> | ||||
<template> | <template> | ||||
<div> | |||||
<div class="card-header card-header-dark"> | |||||
<div class="row"> | |||||
<div class="login-header"> | |||||
<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"> | |||||
Create a LessPass Database Account | |||||
</div> | |||||
</div> | |||||
<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> | </div> | ||||
<div class="card-block"> | |||||
<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 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 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 text-danger"> | |||||
<span v-if="noErrors()">Do not use your master password here</span> | |||||
<span v-if="passwordRequired">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> | |||||
</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 text-danger"> | |||||
<span v-if="noErrors()">Do not use your master password here</span> | |||||
<span v-if="passwordRequired">A password is required</span> | |||||
</small> | |||||
</div> | </div> | ||||
</form> | |||||
</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> | </div> | ||||
</div> | |||||
</form> | |||||
</template> | </template> | ||||
<script type="text/ecmascript-6"> | <script type="text/ecmascript-6"> | ||||
import Auth from '../api/auth'; | import Auth from '../api/auth'; | ||||
@@ -93,7 +75,7 @@ | |||||
showError: false | showError: false | ||||
}; | }; | ||||
}, | }, | ||||
methods: Object.assign(mapActions(['go']), { | |||||
methods: { | |||||
cleanErrors(){ | cleanErrors(){ | ||||
this.userNameAlreadyExist = false; | this.userNameAlreadyExist = false; | ||||
this.emailRequired = false; | this.emailRequired = false; | ||||
@@ -115,7 +97,7 @@ | |||||
} | } | ||||
this.auth.register(this.user, 'https://lesspass.com') | this.auth.register(this.user, 'https://lesspass.com') | ||||
.then(()=> { | .then(()=> { | ||||
this.go('login'); | |||||
this.$router.push({name: 'login'}); | |||||
}) | }) | ||||
.catch(err => { | .catch(err => { | ||||
if (err.response && (err.response.data.email[0].indexOf('already exists') !== -1)) { | if (err.response && (err.response.data.email[0].indexOf('already exists') !== -1)) { | ||||
@@ -125,7 +107,7 @@ | |||||
} | } | ||||
}); | }); | ||||
} | } | ||||
}) | |||||
} | |||||
} | } | ||||
</script> | </script> | ||||
@@ -12,7 +12,7 @@ Vue.use(VueRouter); | |||||
const routes = [ | const routes = [ | ||||
{path: '/', name: 'home', component: PasswordGenerator}, | {path: '/', name: 'home', component: PasswordGenerator}, | ||||
{path: '/login', component: Login}, | |||||
{path: '/login', name: 'login', component: Login}, | |||||
{path: '/password/reset/confirm/:uid/:token', name: 'passwordResetConfirm', component: PasswordResetConfirm}, | {path: '/password/reset/confirm/:uid/:token', name: 'passwordResetConfirm', component: PasswordResetConfirm}, | ||||
]; | ]; | ||||
@@ -11,7 +11,6 @@ const auth = new Auth(storage); | |||||
const passwords = new HTTP('passwords', storage); | const passwords = new HTTP('passwords', storage); | ||||
const state = { | const state = { | ||||
page: 'index', | |||||
authenticated: auth.isAuthenticated(), | authenticated: auth.isAuthenticated(), | ||||
email: '', | email: '', | ||||
passwords: [], | passwords: [], | ||||
@@ -22,12 +21,8 @@ const mutations = { | |||||
setCurrentPassword(state, password){ | setCurrentPassword(state, password){ | ||||
state.currentPassword = password | state.currentPassword = password | ||||
}, | }, | ||||
go(state, page){ | |||||
state.page = page | |||||
}, | |||||
logout(state){ | logout(state){ | ||||
state.authenticated = false; | state.authenticated = false; | ||||
state.page = 'login'; | |||||
state.currentPassword = { | state.currentPassword = { | ||||
site: '', | site: '', | ||||
login: '', | login: '', | ||||
@@ -52,7 +47,6 @@ const mutations = { | |||||
}; | }; | ||||
const actions = { | const actions = { | ||||
go: ({commit}, page) => commit('go', page), | |||||
userAuthenticated: ({commit}, user) => commit('userAuthenticated', user), | userAuthenticated: ({commit}, user) => commit('userAuthenticated', user), | ||||
logout: ({commit}) => { | logout: ({commit}) => { | ||||
auth.logout(); | auth.logout(); | ||||
@@ -69,7 +63,6 @@ const actions = { | |||||
}; | }; | ||||
const getters = { | const getters = { | ||||
page: state => state.page, | |||||
isAuthenticated: state => state.authenticated, | isAuthenticated: state => state.authenticated, | ||||
isGuest: state => !state.authenticated, | isGuest: state => !state.authenticated, | ||||
passwords: state => state.passwords, | passwords: state => state.passwords, | ||||