psw/cmc_fe
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity

added progress bar for logon and nicer logout menu

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/MyNav.vue
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-toolbar-title>{{ site_info.name }}</v-toolbar-title>
<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-navigation-drawer
v-if="user.logged_in"
@ -54,10 +72,16 @@ export default{
}
}
},
computed: {
user_items() {
return this.items.filter(x => x.isUserMgmt == true)
}
},
data(){
return {
items: [],
drawer: null
drawer: null,
drawer2: false
}
},
created() {
@ -87,7 +111,7 @@ export default{
value:"/sop/printed"}]
})
items.push({title: "Logout", value:"/logout"})
items.push({title: "Logout", value:"/logout", isUserMgmt: true})
return items
}
}

33
src/views/LoginPage.vue
View file

@ -1,14 +1,22 @@
<template>
<v-card width="500" height="300"
<v-card width="500" min-height="350"
class="mx-auto my-12"
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
<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" @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-form>
</v-card>
@ -24,12 +32,15 @@ export default {
user: {
email: "",
password: ""
}
},
error: "",
logging_in: false
}
},
methods: {
submitLogin() {
let url = this.$api_url + "/users/login"
this.logging_in = true
console.log("Logging in...")
axios
.post(url, {
@ -38,6 +49,7 @@ export default {
})
.then(resp => {
let data = resp.data
console.log(data)
if (data.logged_in) {
let token = data.token
localStorage.setItem('access_token', token.content)
@ -47,10 +59,17 @@ export default {
console.log("Logged in")
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
})
}
}
}