From c2cc1f4c1723dd44e8d26a65b5a3e1143ce22803 Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Sun, 6 Nov 2022 18:54:10 +0100
Subject: [PATCH] Add logout button

---
 layouts/unverified.vue | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/layouts/unverified.vue b/layouts/unverified.vue
index de30ae7..07d9036 100644
--- a/layouts/unverified.vue
+++ b/layouts/unverified.vue
@@ -2,7 +2,7 @@
   <v-app :style="{ background: $vuetify.theme.themes[theme].background }">
     <v-main>
       <v-container fill-height>
-        <v-card max-width="500px" class="mx-auto">
+        <v-card max-width="500" class="mx-auto">
           <v-card-title>
             Verifiziere deine E-Mail-Adresse!
           </v-card-title>
@@ -13,6 +13,7 @@
           </v-card-text>
           <v-card-actions>
             <v-spacer></v-spacer>
+            <v-btn text color="primary" @click="logout">Logout</v-btn>
             <v-btn depressed color="primary" :loading="loading" @click="sendVerificationEmail">E-Mail erneut senden</v-btn>
           </v-card-actions>
         </v-card>
@@ -24,7 +25,7 @@
 </template>
 
 <script>
-import { sendEmailVerification } from 'firebase/auth'
+import { sendEmailVerification, signOut } from 'firebase/auth'
 
 export default {
   name: 'UnverifiedLayout',
@@ -47,15 +48,28 @@ export default {
       this.loading = true
 
       sendEmailVerification(this.$auth.currentUser)
-      .then(() => {
+      .then((empty) => {
         // Email verification sent!
-        this.loading = false
         this.$toast({
           content: 'Erfolg! Folge dem Link in der E-Mail, die wir dir gerade geschickt haben, um deine Registrierung abzuschließen!',
           color: 'success',
           timeout: -1
         })
       })
+      .catch((error) => {
+        this.$toast({ content: error, color: 'error' })
+      })
+      .then(() => { this.loading = false })
+    },
+    logout () {
+      signOut(this.$auth).then(() => {
+        // Sign-out successful
+        // The authentication state observer will redirect the user to the main page (dashboard),
+        // see pages/index.vue
+      }).catch((error) => {
+        // An error happened.
+        this.$toast({ content: error, color: 'error' })
+      })
     }
   }
 }