Integrate Firestore database

pages/dashboard.vue

@@ -1,24 +1,62 @@
 <template>
-  <v-row>
-    <v-col class="text-center">
-      <blockquote class="blockquote">
-        &#8220;First, solve the problem. Then, write the code.&#8221;
-        <footer>
-          <small>
-            <em>&mdash;John Johnson</em>
-          </small>
-        </footer>
-      </blockquote>
-    </v-col>
-  </v-row>
+  <v-container>
+    <v-row>
+      <v-col v-for="course, id in courses" :key="id">
+        <v-card :width="vCardSize" :height="vCardSize" align="center" justify="center" @click="openCourse">
+          {{ id.toUpperCase() }} - {{ course.name }}
+        </v-card>
+      </v-col>
+      <v-col cols="12" class="text-center">
+        <blockquote class="blockquote">
+          &#8220;First, solve the problem. Then, write the code.&#8221;
+          <footer>
+            <small>
+              <em>&mdash;John Johnson</em>
+            </small>
+          </footer>
+        </blockquote>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
+import { collection, getDocs } from 'firebase/firestore'
+
 export default {
   name: 'DashboardPage',
   layout ({ $auth }) {
     // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#currentuser
     return $auth.currentUser.emailVerified ? 'default' : 'unverified'
+  },
+  data () {
+    return {
+      vCardSize: 150
+    }
+  },
+  computed: {
+    courses () {
+      return this.$store.state.courses
+    }
+  },
+  created () {
+    // Load all courses from the database and convert to JS object
+    getDocs(collection(this.$db, 'kurse')).then(querySnapshot => {
+      const courses = {}
+      querySnapshot.forEach((doc) => {
+        // doc.data() is never undefined for query doc snapshots
+        courses[doc.id] = doc.data()
+      })
+
+      // Save courses in Vuex store
+      this.$store.commit('setCourses', courses)
+    })
+  },
+  methods: {
+    openCourse () {
+      // TODO
+      this.$toast({ content: 'TODO: Eigener Bereich für jeden Kurs.', color: 'info', timeout: 3000 })
+    }
   }
 }
 </script>

pages/index.vue

@@ -18,9 +18,11 @@ export default {
       this.$store.commit('initFirebase')
       if (user) {
         // User is signed in; redirect to main page (dashboard)
+        this.$store.commit('setUserLoggedIn', true)
         this.$router.push({ name: 'dashboard' })
       } else {
         // User is signed out; redirect to login page
+        this.$store.commit('setUserLoggedIn', false)
         this.$router.push({ name: 'login' })
       }
     })

pages/login.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-container>
-    <v-card v-if="existingUser" max-width="500px" elevation="12" class="mx-auto">
+  <v-container fill-height>
+    <v-card v-if="existingUser" width="500px" elevation="12" class="mx-auto">
       <v-card-text>
         <v-form ref="loginForm" v-model="valid">
           <v-text-field
@@ -35,7 +35,7 @@
         <v-btn text block color="primary" @click="showPwResetDialog = true">Passwort vergessen?</v-btn>
       </v-card-text>
     </v-card>
-    <v-card v-else max-width="500px" elevation="12" class="mx-auto">
+    <v-card v-else width="500px" elevation="12" class="mx-auto">
       <v-card-text>
         <v-form ref="signupForm" v-model="valid">
           <v-text-field
@@ -98,7 +98,7 @@
         </v-btn>
       </v-card-text>
     </v-card>
-    <v-dialog v-model="showPwResetDialog" max-width="500px">
+    <v-dialog v-model="showPwResetDialog" width="500px">
       <v-card>
         <v-card-title>
           <span class="headline">Passwort zurücksetzen</span>
@@ -139,7 +139,7 @@ export default {
       email: '',
       emailRules: [
         v => !!v || this.defaultErrorReqField,
-        v => /^\w+([.-]?\w+)*@(iu\.org|iubh-fernstudium\.de)+$/.test(v) || 'Keine gültige IU E-Mail-Adresse'
+        v => /^\w+([.-]?\w+)*@(iubh\.de|iubh-fernstudium\.de|iu\.org)+$/.test(v) || 'Keine gültige IU E-Mail-Adresse'
       ],
       password: '',
       passwordRules: [

plugins/firebase.js

@@ -1,5 +1,6 @@
 import { initializeApp } from 'firebase/app'
 import { getAuth } from 'firebase/auth'
+import { getFirestore } from 'firebase/firestore'
 
 // Firebase configuration
 const firebaseConfig = {
@@ -17,8 +18,12 @@ const app = initializeApp(firebaseConfig)
 // Initialize Firebase Authentication and get a reference to the service
 const auth = getAuth(app)
 
+// Initialize Cloud Firestore and get a reference to the service
+const db = getFirestore(app)
+
 export default ({ app }, inject) => {
-  // Inject $auth in Vue, context and store.
+  // Inject $auth and $db in Vue, context and store.
   // Ref: https://nuxtjs.org/docs/directory-structure/plugins/
   inject('auth', auth)
+  inject('db', db)
 }

store/index.js

@@ -1,5 +1,7 @@
 export const state = () => ({
-  firebaseInitialized: false
+  firebaseInitialized: false,
+  userLoggedIn: false,
+  courses: []
 })
 
 export const getters = {
@@ -8,6 +10,12 @@ export const getters = {
 export const mutations = {
   initFirebase (state) {
     state.firebaseInitialized = true
+  },
+  setUserLoggedIn (state, isLoggedIn) {
+    state.userLoggedIn = isLoggedIn
+  },
+  setCourses (state, courses) {
+    state.courses = courses
   }
 }