Add logout button

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' })
+      })
     }
   }
 }