From 9ab4f2a6db4984328cefebc2c4fd44314345fd66 Mon Sep 17 00:00:00 2001
From: Paul Wilde <paul@wilde.cloud>
Date: Tue, 14 Feb 2023 16:29:15 +0000
Subject: [PATCH] added progress bar for logon and nicer logout menu

---
 src/components/MyNav.vue | 30 +++++++++++++++++++++++++++---
 src/views/LoginPage.vue  | 35 +++++++++++++++++++++++++++--------
 2 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/src/components/MyNav.vue b/src/components/MyNav.vue
index f09e4fa..6fdb4e5 100644
--- a/src/components/MyNav.vue
+++ b/src/components/MyNav.vue
@@ -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
         }
     }
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index ca0c000..a8e2122 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -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
-                                               type="password"></v-text-field>
-                <v-btn color="blue" @click="submitLogin">Login</v-btn>
+                <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-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
+                })
         }
     }
 }