ami/tl-vikunja
1
0
Fork 0
Code Activity

Added register page

Browse Source
This commit is contained in:
konrad
2018-09-08 22:27:13 +02:00
parent 6ec92f68e5
commit 46aec7b4ca
4 changed files with 138 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/user/Login.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<div class="container has-text-centered">
<div class="column is-4 is-offset-4">
<h2 class="title">Login</h2>
<div class="box">
<form id="loginform" @submit.prevent="submit">
<div class="field">
<div class="control">
<input type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
</div>
</div>
<div class="field">
<div class="control">
<input type="password" class="input" name="password" placeholder="Password" v-model="credentials.password" required>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" class="button is-link">Login</button>
<router-link :to="{ name: 'register' }" class="button">Register</router-link>
</div>
</div>
<div class="notification is-info" v-if="loading">
Loading...
</div>
<div class="notification is-danger" v-if="error">
{{ error }}
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import auth from '../../auth'
import router from '../../router'
export default {
data() {
return {
credentials: {
username: '',
password: ''
},
error: '',
loading: false
}
},
beforeMount() {
// Check if the user is already logged in, if so, redirect him to the homepage
if (auth.user.authenticated) {
router.push({name: 'home'})
}
},
methods: {
submit() {
this.loading = true
this.error = ''
let credentials = {
username: this.credentials.username,
password: this.credentials.password
}
auth.login(this, credentials, 'home')
}
}
}
</script>
<style scoped>
.button {
margin: 0 0.4em 0 0;
}
</style>

101
src/components/user/Register.vue Normal file
View File

@ -0,0 +1,101 @@
<template>
<div class="container has-text-centered">
<div class="column is-4 is-offset-4">
<h2 class="title">Register</h2>
<div class="box">
<form id="registerform" @submit.prevent="submit">
<div class="field">
<div class="control">
<input type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
</div>
</div>
<div class="field">
<div class="control">
<input type="text" class="input" name="email" placeholder="E-mail address" v-model="credentials.email" required>
</div>
</div>
<div class="field">
<div class="control">
<input type="password" class="input" name="password1" placeholder="Password" v-model="credentials.password" required>
</div>
</div>
<div class="field">
<div class="control">
<input type="password" class="input" name="password2" placeholder="Retype password" v-model="credentials.password2" required>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button type="submit" class="button is-link">Register</button>
<router-link :to="{ name: 'login' }" class="button">Login</router-link>
</div>
</div>
<div class="notification is-info" v-if="loading">
Loading...
</div>
<div class="notification is-danger" v-if="error">
{{ error }}
</div>
</form>
</div>
</div>
</div>
</template>
<script>
import auth from '../../auth'
import router from '../../router'
export default {
data() {
return {
credentials: {
username: '',
email: '',
password: '',
password2: '',
},
error: '',
loading: false
}
},
beforeMount() {
// Check if the user is already logged in, if so, redirect him to the homepage
if (auth.user.authenticated) {
router.push({name: 'home'})
}
},
methods: {
submit() {
this.loading = true
// eslint-disable-next-line
console.log(this.credentials)
this.error = ''
if (this.credentials.password2 !== this.credentials.password) {
this.loading = false
this.error = 'Passwords don\'t match'
return
}
let credentials = {
username: this.credentials.username,
email: this.credentials.email,
password: this.credentials.password
}
auth.register(this, credentials, 'home')
}
}
}
</script>
<style scoped>
.button {
margin: 0 0.4em 0 0;
}
</style>