added progress bar for logon and nicer logout menu
This commit is contained in:
parent
6f82189a42
commit
9ab4f2a6db
2 changed files with 54 additions and 11 deletions
|
@ -4,7 +4,25 @@
|
||||||
<v-app-bar-nav-icon v-if="user.logged_in" variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
<v-app-bar-nav-icon v-if="user.logged_in" variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||||
<v-toolbar-title>{{ site_info.name }}</v-toolbar-title>
|
<v-toolbar-title>{{ site_info.name }}</v-toolbar-title>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<v-btn variant="text" v-if="user.logged_in">Hi {{ user.first_name }}</v-btn>
|
<v-menu>
|
||||||
|
<template v-slot:activator="{ props }">
|
||||||
|
<v-btn
|
||||||
|
variant="text"
|
||||||
|
v-if="user.logged_in"
|
||||||
|
v-bind="props">
|
||||||
|
Hi {{ user.first_name }}
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
<v-list theme="dark">
|
||||||
|
<v-list-item
|
||||||
|
v-for="(item, index) in user_items"
|
||||||
|
:key="index"
|
||||||
|
:title="item.title"
|
||||||
|
:to="item.value"
|
||||||
|
>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
</v-app-bar>
|
</v-app-bar>
|
||||||
<v-navigation-drawer
|
<v-navigation-drawer
|
||||||
v-if="user.logged_in"
|
v-if="user.logged_in"
|
||||||
|
@ -54,10 +72,16 @@ export default{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
user_items() {
|
||||||
|
return this.items.filter(x => x.isUserMgmt == true)
|
||||||
|
}
|
||||||
|
},
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
items: [],
|
items: [],
|
||||||
drawer: null
|
drawer: null,
|
||||||
|
drawer2: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -87,7 +111,7 @@ export default{
|
||||||
value:"/sop/printed"}]
|
value:"/sop/printed"}]
|
||||||
})
|
})
|
||||||
|
|
||||||
items.push({title: "Logout", value:"/logout"})
|
items.push({title: "Logout", value:"/logout", isUserMgmt: true})
|
||||||
return items
|
return items
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<v-card width="500" height="300"
|
<v-card width="500" min-height="350"
|
||||||
class="mx-auto my-12"
|
class="mx-auto my-12"
|
||||||
title="Welcome!"
|
title="Welcome!"
|
||||||
subtitle="Please Log In">
|
subtitle="Please Log In">
|
||||||
<v-form>
|
<v-form>
|
||||||
<v-responsive class="mx-auto" max-width="475">
|
<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="Username"
|
||||||
<v-text-field label="Password" @keyup.enter="submitLogin" v-model="user.password" clearable
|
@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>
|
type="password"></v-text-field>
|
||||||
<v-btn color="blue" @click="submitLogin">Login</v-btn>
|
<v-banner v-if="error" color="error" icon="mdi-exclamation-thick" theme="dark">
|
||||||
|
<v-banner-text>{{ error }}</v-banner-text>
|
||||||
|
</v-banner>
|
||||||
|
<v-btn color="blue" :loading="logging_in" @click="submitLogin">Login</v-btn>
|
||||||
</v-responsive>
|
</v-responsive>
|
||||||
</v-form>
|
</v-form>
|
||||||
</v-card>
|
</v-card>
|
||||||
|
@ -24,12 +32,15 @@ export default {
|
||||||
user: {
|
user: {
|
||||||
email: "",
|
email: "",
|
||||||
password: ""
|
password: ""
|
||||||
}
|
},
|
||||||
|
error: "",
|
||||||
|
logging_in: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
submitLogin() {
|
submitLogin() {
|
||||||
let url = this.$api_url + "/users/login"
|
let url = this.$api_url + "/users/login"
|
||||||
|
this.logging_in = true
|
||||||
console.log("Logging in...")
|
console.log("Logging in...")
|
||||||
axios
|
axios
|
||||||
.post(url, {
|
.post(url, {
|
||||||
|
@ -38,6 +49,7 @@ export default {
|
||||||
})
|
})
|
||||||
.then(resp => {
|
.then(resp => {
|
||||||
let data = resp.data
|
let data = resp.data
|
||||||
|
console.log(data)
|
||||||
if (data.logged_in) {
|
if (data.logged_in) {
|
||||||
let token = data.token
|
let token = data.token
|
||||||
localStorage.setItem('access_token', token.content)
|
localStorage.setItem('access_token', token.content)
|
||||||
|
@ -47,10 +59,17 @@ export default {
|
||||||
console.log("Logged in")
|
console.log("Logged in")
|
||||||
window.location.href = '/'
|
window.location.href = '/'
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
this.error = "Login failed. Invalid username or password."
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(error => { console.log(error) })
|
.catch(error => {
|
||||||
|
console.log(error)
|
||||||
|
this.error = "Login failed. Invalid username or password."
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.logging_in = false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue