heuzef
/
lesspass
mirror of https://github.com/lesspass/lesspass.git
1
0
Fork 0
Code Issues 0 Releases 67 Wiki Activity
Browse Source

add login page in vue-router migration

pull/342/head
Guillaume Vincent 8 years ago
parent
d33fc7483b
commit
3be21c04fb
3 changed files with 83 additions and 100 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +58
    -89
      src/components/Login.vue
  2. +22
    -9
      src/components/Menu.vue
  3. +3
    -2
      src/routes.js

+ 58
- 89
src/components/Login.vue View File

@@ -1,99 +1,68 @@
<style>
.card-block {
position: relative;
}

.alert {
position: absolute;
z-index: 20;
width: 100%;
top: 0;
left: 0;
}
</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('index')">
<i class="fa fa-chevron-circle-left white" aria-hidden="true"></i>
</span>
</div>
<div class="col-xs-10 text-xs-center">
Connect to LessPass Database
</div>
</div>
<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> </div>
<div class="card-block">
<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 class="form-group row">
<div class="col-xs-12">
<div class="inner-addon left-addon">
<i class="fa fa-user"></i>
<input id="login"
class="form-control"
name="login"
type="email"
placeholder="Email"
v-model="user.email">
</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="login"
class="form-control"
name="login"
type="email"
placeholder="Email"
v-model="user.email">
</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">
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-12">
<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
</small>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-12">
<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>
<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">
</div> </div>
<div class="form-group row">
<button class="btn btn-link" type="button" v-on:click="go('forgotPassword')">
Forgot you password ?
</button>
</div>
</div>
<div class="form-group row">
<div class="col-xs-12">
<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
</small>
</div> </div>
</form>
</div>
</div> </div>
</div>
<div class="form-group row">
<div class="col-xs-12">
<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">
<button class="btn btn-link" type="button" v-on:click="go('forgotPassword')">
Forgot you password ?
</button>
</div>
</form>
</template> </template>
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">
import Auth from '../api/auth'; import Auth from '../api/auth';
import Storage from '../api/storage'; import Storage from '../api/storage';
import {mapGetters, mapActions} from 'vuex';
import {mapGetters} from 'vuex';


export default { export default {
data() { data() {
@@ -111,7 +80,7 @@
}; };
}, },


methods: Object.assign(mapActions(['go']), {
methods: {
showErrorMessage(errorMessage){ showErrorMessage(errorMessage){
this.errorMessage = errorMessage; this.errorMessage = errorMessage;
this.showError = true; this.showError = true;
@@ -128,15 +97,15 @@
var baseURL = this.baseURL; var baseURL = this.baseURL;
var email = this.user.email; var email = this.user.email;
if (!email || !this.user.password || !baseURL) { if (!email || !this.user.password || !baseURL) {
this.showErrorMessage('email, password and url ');
this.showErrorMessage('email, password and url are mandatory');
return; return;
} }
this.auth.login(this.user, baseURL) this.auth.login(this.user, baseURL)
.then(()=> { .then(()=> {
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('go', 'index');
this.$store.dispatch('loadPasswords'); this.$store.dispatch('loadPasswords');
this.$router.push({ name: 'home'});
}) })
.catch(err => { .catch(err => {
if (err.response === undefined) { if (err.response === undefined) {
@@ -152,7 +121,7 @@
} }
}); });
} }
}),
},
computed: mapGetters([ computed: mapGetters([
'baseURL' 'baseURL'
]) ])


+ 22
- 9
src/components/Menu.vue View File

@@ -5,16 +5,21 @@
color: #FFF; color: #FFF;
} }


#menu-title {
cursor: pointer;
.menu-link {
color: white;
}

.menu-link:hover, .menu-link:focus, .menu-link:active {
text-decoration: none;
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">
<span id="menu-title" v-on:click="go('index')">LessPass</span>
<router-link to="/">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">
@@ -31,18 +36,17 @@
</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">
LessPass
<router-link class="menu-link" to="/">LessPass</router-link>
</div> </div>
<div class="col-xs-6 text-xs-right"> <div class="col-xs-6 text-xs-right">
<button type="button" class="btn" v-on:click="go('login')"
style="background-color:transparent; padding:0; color:white;">
<router-link class="menu-link" to="/login">
<i class="fa fa-user-secret white" aria-hidden="true"></i> <i class="fa fa-user-secret white" aria-hidden="true"></i>
</button>
</router-link>
</div> </div>
</div> </div>
</div> </div>
@@ -64,3 +68,12 @@
]) ])
} }
</script> </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
};

+ 3
- 2
src/routes.js View File

@@ -11,8 +11,9 @@ import Passwords from './components/Passwords';
Vue.use(VueRouter); Vue.use(VueRouter);


const routes = [ const routes = [
{path: '/', component: PasswordGenerator},
{path: '/password/reset/confirm/:uid/:token', name:'passwordResetConfirm', component: PasswordResetConfirm},
{path: '/', name: 'home', component: PasswordGenerator},
{path: '/login', component: Login},
{path: '/password/reset/confirm/:uid/:token', name: 'passwordResetConfirm', component: PasswordResetConfirm},
]; ];


const router = new VueRouter({ const router = new VueRouter({


Write Preview
Loading…
Cancel
Save