72 lines
2.2 KiB
Vue
72 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<form v-on:submit.prevent="handleSubmit">
|
||
|
|
<div v-if="error" class="alert alert-danger">
|
||
|
|
{{ error }}
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="exampleInputEmail1">Username</label>
|
||
|
|
<input type="text" v-model="username" class="form-control" id="username"
|
||
|
|
aria-describedby="emailHelp" placeholder="Enter email">
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="exampleInputPassword1">Password</label>
|
||
|
|
<input type="password" v-model="password" class="form-control"
|
||
|
|
id="exampleInputPassword1" placeholder="Password">
|
||
|
|
</div>
|
||
|
|
<div class="form-check">
|
||
|
|
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||
|
|
<label class="form-check-label" for="exampleCheck1">I like cheese</label>
|
||
|
|
</div>
|
||
|
|
<button type="submit" class="btn btn-primary" v-bind:class="{ disabled: isLoading }">Log in</button>
|
||
|
|
</form>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import axios from 'axios';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'Login',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
username: '',
|
||
|
|
password: '',
|
||
|
|
error: '',
|
||
|
|
isLoading: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props: ['user'],
|
||
|
|
methods: {
|
||
|
|
handleSubmit() {
|
||
|
|
console.log("handle submit");
|
||
|
|
this.isLoading = true
|
||
|
|
this.error = ''
|
||
|
|
|
||
|
|
axios
|
||
|
|
.post('/login', {
|
||
|
|
username: this.username,
|
||
|
|
password: this.password
|
||
|
|
})
|
||
|
|
.then(response => {
|
||
|
|
console.log(response.headers);
|
||
|
|
|
||
|
|
this.$emit('user-authenticated', response.headers.location);
|
||
|
|
this.username = '';
|
||
|
|
this.password = '';
|
||
|
|
}).catch(error => {
|
||
|
|
console.log(error.response.data);
|
||
|
|
if (error.response.data.error) {
|
||
|
|
this.error = error.response.data.error
|
||
|
|
} else {
|
||
|
|
this.error = 'Unknown error'
|
||
|
|
}
|
||
|
|
}).finally(() => {
|
||
|
|
this.isLoading = false;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
</style>
|