added (not yet working) code for login
This commit is contained in:
42
src/views/HomePage.vue
Normal file
42
src/views/HomePage.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Hi {{account.user.firstName}}!</h1>
|
||||
<p>You're logged in with Vue + Vuex & JWT!!</p>
|
||||
<h3>Users from secure api end point:</h3>
|
||||
<em v-if="users.loading">Loading users...</em>
|
||||
<span v-if="users.error" class="text-danger">ERROR: {{users.error}}</span>
|
||||
<ul v-if="users.items">
|
||||
<li v-for="user in users.items" :key="user.id">
|
||||
{{user.firstName + ' ' + user.lastName}}
|
||||
<span v-if="user.deleting"><em> - Deleting...</em></span>
|
||||
<span v-else-if="user.deleteError" class="text-danger"> - ERROR: {{user.deleteError}}</span>
|
||||
<span v-else> - <a @click="deleteUser(user.id)" class="text-danger">Delete</a></span>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
<router-link to="/login">Logout</router-link>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
account: (state) => state.account,
|
||||
users: (state) => state.users.all,
|
||||
}),
|
||||
},
|
||||
created() {
|
||||
this.getAllUsers();
|
||||
},
|
||||
methods: {
|
||||
...mapActions('users', {
|
||||
getAllUsers: 'getAll',
|
||||
deleteUser: 'delete',
|
||||
}),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
72
src/views/LoginPage.vue
Normal file
72
src/views/LoginPage.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="alert alert-info">
|
||||
Username: test<br />
|
||||
Password: test
|
||||
</div>
|
||||
<h2>Login</h2>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" v-model="username" name="username" class="form-control" :class="{ 'is-invalid': submitted && !username }" />
|
||||
<div v-show="submitted && !username" class="invalid-feedback">Username is required</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input type="password" v-model="password" name="password" class="form-control" :class="{ 'is-invalid': submitted && !password }" />
|
||||
<div v-show="submitted && !password" class="invalid-feedback">Password is required</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button class="btn btn-primary" :disabled="loading">Login</button>
|
||||
<img v-show="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
|
||||
</div>
|
||||
<div v-if="error" class="alert alert-danger">{{error}}</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import router from '@/router/';
|
||||
import { userService } from '@/services';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
username: '',
|
||||
password: '',
|
||||
submitted: false,
|
||||
loading: false,
|
||||
returnUrl: '',
|
||||
error: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// reset login status
|
||||
userService.logout();
|
||||
|
||||
// get return url from route parameters or default to '/'
|
||||
this.returnUrl = this.$route.query.returnUrl || '/';
|
||||
},
|
||||
methods: {
|
||||
handleSubmit(e) {
|
||||
this.submitted = true;
|
||||
const { username, password } = this;
|
||||
|
||||
// stop here if form is invalid
|
||||
if (!(username && password)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
userService.login(username, password)
|
||||
.then(
|
||||
(user) => router.push(this.returnUrl),
|
||||
(error) => {
|
||||
this.error = error;
|
||||
this.loading = false;
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
64
src/views/RegisterPage.vue
Normal file
64
src/views/RegisterPage.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Register</h2>
|
||||
<form @submit.prevent="handleSubmit">
|
||||
<div class="form-group">
|
||||
<label for="firstName">First Name</label>
|
||||
<input type="text" v-model="user.firstName" v-validate="'required'" name="firstName" class="form-control" :class="{ 'is-invalid': submitted && errors.has('firstName') }" />
|
||||
<div v-if="submitted && errors.has('firstName')" class="invalid-feedback">{{ errors.first('firstName') }}</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="lastName">Last Name</label>
|
||||
<input type="text" v-model="user.lastName" v-validate="'required'" name="lastName" class="form-control" :class="{ 'is-invalid': submitted && errors.has('lastName') }" />
|
||||
<div v-if="submitted && errors.has('lastName')" class="invalid-feedback">{{ errors.first('lastName') }}</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" v-model="user.username" v-validate="'required'" name="username" class="form-control" :class="{ 'is-invalid': submitted && errors.has('username') }" />
|
||||
<div v-if="submitted && errors.has('username')" class="invalid-feedback">{{ errors.first('username') }}</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label htmlFor="password">Password</label>
|
||||
<input type="password" v-model="user.password" v-validate="{ required: true, min: 6 }" name="password" class="form-control" :class="{ 'is-invalid': submitted && errors.has('password') }" />
|
||||
<div v-if="submitted && errors.has('password')" class="invalid-feedback">{{ errors.first('password') }}</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button class="btn btn-primary" :disabled="status.registering">Register</button>
|
||||
<img v-show="status.registering" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
|
||||
<router-link to="/login" class="btn btn-link">Cancel</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
username: '',
|
||||
password: '',
|
||||
},
|
||||
submitted: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState('account', ['status']),
|
||||
},
|
||||
methods: {
|
||||
...mapActions('account', ['register']),
|
||||
handleSubmit(e) {
|
||||
this.submitted = true;
|
||||
this.$validator.validate().then((valid) => {
|
||||
if (valid) {
|
||||
this.register(this.user);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user