98 lines
3.7 KiB
Vue
98 lines
3.7 KiB
Vue
<template>
|
|
<v-card width="500" min-height="350"
|
|
class="mx-auto my-12"
|
|
id="login-box"
|
|
title="Welcome!"
|
|
subtitle="Please Log In">
|
|
<v-form>
|
|
<v-responsive class="mx-auto" max-width="475">
|
|
<v-text-field label="Username"
|
|
@keyup.enter="submitLogin"
|
|
clearable
|
|
v-model="user.email"></v-text-field>
|
|
<v-text-field label="Password"
|
|
@keyup.enter="submitLogin"
|
|
v-model="user.password" clearable
|
|
type="password"></v-text-field>
|
|
<v-btn color="blue" :loading="logging_in" @click="submitLogin">Login</v-btn>
|
|
<v-banner v-if="show_error" color="error" icon="mdi-exclamation-thick" theme="dark">
|
|
<v-banner-text>{{ error_message }}</v-banner-text>
|
|
</v-banner>
|
|
</v-responsive>
|
|
</v-form>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
name: 'LoginPage',
|
|
data() {
|
|
return {
|
|
user: {
|
|
email: "",
|
|
password: ""
|
|
},
|
|
show_error: false,
|
|
error_message: "",
|
|
error_count: 0,
|
|
logging_in: false
|
|
}
|
|
},
|
|
methods: {
|
|
submitLogin() {
|
|
this.error_message = ""
|
|
this.show_error = false
|
|
let url = this.$api_url + "/users/login"
|
|
this.logging_in = true
|
|
console.log("Logging in...")
|
|
axios
|
|
.post(url, {
|
|
email: this.user.email,
|
|
password: this.user.password
|
|
})
|
|
.then(resp => {
|
|
let data = resp.data
|
|
console.log(data)
|
|
if (data.logged_in) {
|
|
let token = data.token
|
|
localStorage.setItem('access_token', token.content)
|
|
let tok = localStorage.getItem('access_token')
|
|
if (tok.content != "") {
|
|
this.user.logged_in = true
|
|
console.log("Logged in")
|
|
window.location.href = '/'
|
|
}
|
|
} else {
|
|
this.error_message = "Login failed. Invalid username or password."
|
|
this.error_count += 1
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
this.error_message = "Login failed. Invalid username or password."
|
|
this.error_count += 1
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
if (this.error_message != ""){
|
|
this.show_error = true
|
|
}
|
|
this.logging_in = false
|
|
if (this.error_count > 2) {
|
|
let box = document.getElementById("login-box")
|
|
box.classList.add("animate__animated")
|
|
box.classList.add("animate__hinge")
|
|
setTimeout(() => {
|
|
box.classList.add("animate__fadeInUp")
|
|
box.classList.remove("animate__hinge")
|
|
},5000)
|
|
this.error_count = 0
|
|
}
|
|
},2000)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|