From 9d1d1b3afb488c5b605d1690c450205976129c07 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sat, 25 Apr 2020 23:17:25 +0200
Subject: [PATCH] Yes

---
 frontend/components/LoginForm.vue    | 25 +++++++++++++++----------
 frontend/components/RegisterForm.vue | 27 ++++++++++++++++-----------
 frontend/layouts/default.vue         | 24 +++++++++++++++++++-----
 frontend/nuxt.config.js              |  1 +
 frontend/store/index.js              | 10 +++++++++-
 5 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/frontend/components/LoginForm.vue b/frontend/components/LoginForm.vue
index d39c569..66c0a7a 100644
--- a/frontend/components/LoginForm.vue
+++ b/frontend/components/LoginForm.vue
@@ -1,7 +1,7 @@
 <template>
     <v-card flat>
-        <v-card-text>
-            <v-form ref="form" v-model="valid" lazy-validation>
+        <v-form ref="form" v-model="valid" lazy-validation>
+            <v-card-text>
                 <v-text-field
                     v-model="form.username"
                     :rules="usernameRules"
@@ -18,14 +18,19 @@
                     prepend-icon="mdi-lock"
                     type="password"
                 ></v-text-field>
-            </v-form>
-        </v-card-text>
-        <v-card-actions>
-            <v-spacer />
-            <v-btn :disabled="!valid" color="success" @click="userLogin">
-                Login
-            </v-btn>
-        </v-card-actions>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn
+                    :disabled="!valid"
+                    color="success"
+                    type="submit"
+                    @click.prevent="userLogin"
+                >
+                    Login
+                </v-btn>
+            </v-card-actions>
+        </v-form>
     </v-card>
 </template>
 
diff --git a/frontend/components/RegisterForm.vue b/frontend/components/RegisterForm.vue
index 6b3c7fc..b0a276b 100644
--- a/frontend/components/RegisterForm.vue
+++ b/frontend/components/RegisterForm.vue
@@ -1,7 +1,7 @@
 <template>
     <v-card flat>
-        <v-card-text>
-            <v-form ref="form" v-model="valid" lazy-validation>
+        <v-form ref="form" v-model="valid" lazy-validation>
+            <v-card-text>
                 <v-text-field
                     v-model="form.username"
                     :rules="usernameRules"
@@ -35,15 +35,20 @@
                     prepend-icon="mdi-lock"
                     type="password"
                 ></v-text-field>
-            </v-form>
-        </v-card-text>
-        <v-divider />
-        <v-card-actions>
-            <v-spacer />
-            <v-btn :disabled="!valid" color="success" @click="registerUser">
-                Register
-            </v-btn>
-        </v-card-actions>
+            </v-card-text>
+            <v-divider />
+            <v-card-actions>
+                <v-spacer />
+                <v-btn
+                    :disabled="!valid"
+                    color="success"
+                    type="submit"
+                    @click.prevent="registerUser"
+                >
+                    Register
+                </v-btn>
+            </v-card-actions>
+        </v-form>
     </v-card>
 </template>
 
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index c364f9e..b48e766 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -3,10 +3,13 @@
         <v-app-bar fixed app color="primary" dark>
             <v-btn to="/" text rounded>Simple Notes</v-btn>
             <v-spacer />
-            <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
-            <v-btn v-if="this.$store.state.auth.loggedIn" outlined>
-                Welcome {{ this.$store.state.auth.user.username }}
-            </v-btn>
+            <div v-if="isAuthenticated">
+                <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
+                <v-btn class="mr-2" outlined>
+                    Welcome {{ loggedInUser.username }}
+                </v-btn>
+                <v-btn outlined @click="logout">Logout</v-btn>
+            </div>
             <v-btn v-else to="/account" text rounded>Account</v-btn>
         </v-app-bar>
         <v-content>
@@ -18,7 +21,18 @@
 </template>
 
 <script>
-export default {}
+import { mapGetters } from 'vuex'
+
+export default {
+    computed: {
+        ...mapGetters(['isAuthenticated', 'loggedInUser']),
+    },
+    methods: {
+        async logout() {
+            await this.$auth.logout()
+        },
+    },
+}
 </script>
 
 <style>
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index e472262..1e9ed0f 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -79,6 +79,7 @@ export default {
                         method: 'get',
                         propertyName: 'user',
                     },
+                    logout: false,
                 },
                 autoFetchUser: true,
             },
diff --git a/frontend/store/index.js b/frontend/store/index.js
index 6358304..3c1c180 100644
--- a/frontend/store/index.js
+++ b/frontend/store/index.js
@@ -4,4 +4,12 @@ export const mutations = {}
 
 export const actions = {}
 
-export const getters = {}
+export const getters = {
+    isAuthenticated(state) {
+        return state.auth.loggedIn
+    },
+
+    loggedInUser(state) {
+        return state.auth.user
+    },
+}