added progress bar for logon and nicer logout menu

This commit is contained in:
Paul Wilde 2023-02-14 16:29:15 +00:00
parent 6f82189a42
commit 9ab4f2a6db
2 changed files with 54 additions and 11 deletions

View file

@ -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
} }
} }

View file

@ -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"
type="password"></v-text-field> clearable
<v-btn color="blue" @click="submitLogin">Login</v-btn> 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-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
})
} }
} }
} }