From da9f1058254f8a7e0f071bd9b7093a3af543723c Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Wed, 19 Oct 2022 21:10:49 +0200
Subject: [PATCH] Integrate Firestore database

---
 pages/dashboard.vue | 62 ++++++++++++++++++++++++++++++++++++---------
 pages/index.vue     |  2 ++
 pages/login.vue     | 10 ++++----
 plugins/firebase.js |  7 ++++-
 store/index.js      | 10 +++++++-
 5 files changed, 72 insertions(+), 19 deletions(-)

diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 6c8bbcd..2859d42 100644
--- a/pages/dashboard.vue
+++ b/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>
diff --git a/pages/index.vue b/pages/index.vue
index 72f02f4..99da4d0 100644
--- a/pages/index.vue
+++ b/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' })
       }
     })
diff --git a/pages/login.vue b/pages/login.vue
index 80f3a9f..927748f 100644
--- a/pages/login.vue
+++ b/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: [
diff --git a/plugins/firebase.js b/plugins/firebase.js
index a3aa173..c4a6971 100644
--- a/plugins/firebase.js
+++ b/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)
 }
\ No newline at end of file
diff --git a/store/index.js b/store/index.js
index 951ad79..2ccdb5e 100644
--- a/store/index.js
+++ b/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
   }
 }