Add database integration

pages/index.vue

@@ -6,8 +6,8 @@
 
 <script>
 import { onAuthStateChanged } from 'firebase/auth'
-import { doc, getDoc } from 'firebase/firestore'
-import { UserConverter } from '~/plugins/user'
+import { doc, getDoc, setDoc } from 'firebase/firestore'
+import { User, UserConverter } from '~/plugins/user'
 
 export default {
   name: 'IndexPage',
@@ -33,12 +33,31 @@ export default {
       const ref = doc(this.$db, `benutzer/${this.$auth.currentUser.uid}`).withConverter(UserConverter)
       getDoc(ref).then((docSnap) => {
         if (docSnap.exists()) {
-          this.$store.commit('setUser', docSnap.data())
-          this.$router.push({ name: 'dashboard' })
+          // Successfully retrieved user data from the db.
+          this.redirectToDashboard(docSnap.data())
         } else {
-          this.$toast({ content: 'Benutzer konnte in DB nicht gefunden werden!', color: 'error' })
+          // No user data was found in the database, which means the user has just signed up.
+          this.createUser()
+          
         }
       })
+    },
+    createUser () {
+      const user = new User()
+
+      // Add a new document in collection "users"
+      setDoc(doc(this.$db, 'benutzer', this.$auth.currentUser.uid).withConverter(UserConverter), user)
+      .then((docSnap) => {
+        this.redirectToDashboard()
+      })
+      .catch((error) => {
+        // Couldn't create user data document
+        this.$toast({ content: error, color: 'error' })
+      })
+    },
+    redirectToDashboard (user) {
+      this.$store.commit('setUser', user)
+      this.$router.push({ name: 'dashboard' })
     }
   }
 }

pages/login.vue

@@ -163,7 +163,6 @@ export default {
 
         createUserWithEmailAndPassword(this.$auth, this.email, this.password)
         .then((userCredential) => {
-          // TODO: database integration
           // User signed up successfully.
           // The authentication state observer will redirect the user to the main page (dashboard),
           // see pages/index.vue

plugins/user.js

@@ -2,9 +2,11 @@ export class User {
   constructor (gamesStarted) {
     this.gamesStarted = []
 
-    gamesStarted.forEach(e => {
-      this.gamesStarted.push({ course: e.kurs, game: e.spiel })
-    })
+    if (gamesStarted && gamesStarted.length > 0) {
+      gamesStarted.forEach(e => {
+        this.gamesStarted.push({ course: e.kurs, game: e.spiel })
+      })
+    }
   }
 }