@@ -4,59 +4,41 @@ | |||
} | |||
</style> | |||
<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 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> | |||
</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> | |||
</form> | |||
</template> | |||
<script type="text/ecmascript-6"> | |||
import Auth from '../api/auth'; | |||
@@ -76,7 +58,7 @@ | |||
successMessage: false, | |||
}; | |||
}, | |||
methods: Object.assign(mapActions(['go']), { | |||
methods: { | |||
cleanErrors(){ | |||
this.emailRequired = false; | |||
this.showError = false; | |||
@@ -97,7 +79,7 @@ | |||
this.showError = true; | |||
}); | |||
} | |||
}) | |||
} | |||
} | |||
</script> | |||
@@ -47,15 +47,17 @@ | |||
<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')"> | |||
<router-link class="btn btn-secondary" :to="{ name: 'register'}"> | |||
Register | |||
</button> | |||
</router-link> | |||
</div> | |||
</div> | |||
<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> | |||
</form> | |||
</template> | |||
@@ -105,7 +107,7 @@ | |||
this.storage.save({baseURL: baseURL, email: email}); | |||
this.$store.dispatch('userAuthenticated', {email: email}); | |||
this.$store.dispatch('loadPasswords'); | |||
this.$router.push({ name: 'home'}); | |||
this.$router.push({name: 'home'}); | |||
}) | |||
.catch(err => { | |||
if (err.response === undefined) { | |||
@@ -6,20 +6,29 @@ | |||
} | |||
.menu-link { | |||
color: white; | |||
color: #373a3c; | |||
text-decoration: none; | |||
} | |||
.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; | |||
color: white; | |||
} | |||
</style> | |||
<template> | |||
<div id="menu"> | |||
<!--<div class="card-header" v-show="isAuthenticated"> | |||
<div class="card-header" v-show="isAuthenticated"> | |||
<div class="row"> | |||
<div class="col-xs-6"> | |||
<router-link to="/">LessPass</router-link> | |||
<router-link class="menu-link" :to="{ name: 'home'}">LessPass</router-link> | |||
</div> | |||
<div class="col-xs-6 text-xs-right"> | |||
<div class="btn-group"> | |||
@@ -28,23 +37,23 @@ | |||
{{email}} | |||
</button> | |||
<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> | |||
<button class="dropdown-item" type="button" v-on:click="logout">Log out</button> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div>--> | |||
</div> | |||
<div class="card-header card-header-dark" v-show="isGuest"> | |||
<div class="row"> | |||
<div class="index-header"> | |||
<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 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> | |||
</router-link> | |||
</div> | |||
@@ -58,7 +67,6 @@ | |||
export default { | |||
methods: mapActions([ | |||
'go', | |||
'logout' | |||
]), | |||
computed: mapGetters([ | |||
@@ -67,13 +75,4 @@ | |||
'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> | |||
<template> | |||
<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 class="col-xs-5 text-xs-right"> | |||
<button class="btn btn-secondary"> | |||
<i class="fa fa-save"></i> | |||
download | |||
</button> | |||
</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> | |||
</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> | |||
</template> | |||
<script type="text/ecmascript-6"> | |||
import {mapGetters, mapActions} from 'vuex'; | |||
import LesspassMenu from './Menu'; | |||
import {mapGetters} from 'vuex'; | |||
export default { | |||
data(){ | |||
@@ -55,14 +50,11 @@ | |||
}) | |||
} | |||
}), | |||
components: { | |||
LesspassMenu | |||
}, | |||
methods: Object.assign(mapActions(['go']), { | |||
methods: { | |||
setCurrentPasswordAndGoIndex(password){ | |||
this.$store.dispatch('setCurrentPassword', password); | |||
this.go('index'); | |||
this.$router.push({name: 'home'}); | |||
} | |||
}) | |||
} | |||
} | |||
</script> |
@@ -4,72 +4,54 @@ | |||
} | |||
</style> | |||
<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 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 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> | |||
</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> | |||
</form> | |||
</template> | |||
<script type="text/ecmascript-6"> | |||
import Auth from '../api/auth'; | |||
@@ -93,7 +75,7 @@ | |||
showError: false | |||
}; | |||
}, | |||
methods: Object.assign(mapActions(['go']), { | |||
methods: { | |||
cleanErrors(){ | |||
this.userNameAlreadyExist = false; | |||
this.emailRequired = false; | |||
@@ -115,7 +97,7 @@ | |||
} | |||
this.auth.register(this.user, 'https://lesspass.com') | |||
.then(()=> { | |||
this.go('login'); | |||
this.$router.push({name: 'login'}); | |||
}) | |||
.catch(err => { | |||
if (err.response && (err.response.data.email[0].indexOf('already exists') !== -1)) { | |||
@@ -125,7 +107,7 @@ | |||
} | |||
}); | |||
} | |||
}) | |||
} | |||
} | |||
</script> | |||
@@ -12,7 +12,7 @@ Vue.use(VueRouter); | |||
const routes = [ | |||
{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}, | |||
]; | |||
@@ -11,7 +11,6 @@ const auth = new Auth(storage); | |||
const passwords = new HTTP('passwords', storage); | |||
const state = { | |||
page: 'index', | |||
authenticated: auth.isAuthenticated(), | |||
email: '', | |||
passwords: [], | |||
@@ -22,12 +21,8 @@ const mutations = { | |||
setCurrentPassword(state, password){ | |||
state.currentPassword = password | |||
}, | |||
go(state, page){ | |||
state.page = page | |||
}, | |||
logout(state){ | |||
state.authenticated = false; | |||
state.page = 'login'; | |||
state.currentPassword = { | |||
site: '', | |||
login: '', | |||
@@ -52,7 +47,6 @@ const mutations = { | |||
}; | |||
const actions = { | |||
go: ({commit}, page) => commit('go', page), | |||
userAuthenticated: ({commit}, user) => commit('userAuthenticated', user), | |||
logout: ({commit}) => { | |||
auth.logout(); | |||
@@ -69,7 +63,6 @@ const actions = { | |||
}; | |||
const getters = { | |||
page: state => state.page, | |||
isAuthenticated: state => state.authenticated, | |||
isGuest: state => !state.authenticated, | |||
passwords: state => state.passwords, | |||