[CODEBREW] Added video 007 progress

Author: strobsi

package-lock.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "firebase": "^8.6.8",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

package.json

@@ -1,59 +1,36 @@
 <template>
   <div id="app">
     <img alt="Vue logo" src="./assets/logo.png" />
-    <LoginForm @login="login" v-if="!loggedIn" msg="Bitte einloggen" /> 
+    <LoginForm @login="login" v-if="!user.uid" msg="Bitte einloggen" /> 
     <div v-else>
-    Sie sind eingeloggt
+    Sie sind eingeloggt <button @click="logout()">Logout</button>
     </div>
   </div>
 </template>
 
 <script>
 import LoginForm from "./components/LoginForm.vue";
-import * as fb from "./firebase";
+import {mapState} from "vuex";
 
 export default {
   name: "App",
   components: {
     LoginForm,
   },
 data() {
-    return {
-      loggedIn: false
-    }
-  },
+   return{}
+  },  
 
+  computed: {
+    ...mapState(["user"])
+  },
   methods: {
     login(payload) {
-     fb.auth.signInWithEmailAndPassword(payload.email,payload.password).then((userCredentials) => {
-      var user = userCredentials.user;
-       console.log("Logged in user:",user);
-       this.loggedIn = true;
-    }).catch((error) => {
-      var errorCode = error.code;
-      var errorMessage = error.message;
-      console.log("Failed to login: ",errorCode,errorMessage);
-      this.loggedIn = false;
-    });
-    }
-  },
-
-  mounted() {
-    /*
-    fb.auth.createUserWithEmailAndPassword("[email protected]","")
-    .then((userCredentials) => {
-      var user = userCredentials.user;
-      console.log("Newly created user: ",user);
-    })
-    */
-    /*
-    fb.demoCollection
-      .doc("pbLh3aRXvxHzNCtp4QKb")
-      .get()
-      .then((doc) => {
-        console.log(doc.data().hello);
-      });
-      */
+      this.$store.dispatch("login",payload)
+    },  
+    logout(){
+      this.$store.dispatch("logout");
+    },
   },
 };
 </script>

src/App.vue

@@ -1,8 +1,31 @@
 import Vue from "vue";
 import App from "./App.vue";
+import store from "./store";
+
+import { auth } from "./firebase";
 
 Vue.config.productionTip = false;
 
-new Vue({
-  render: (h) => h(App),
-}).$mount("#app");
+let app;
+
+auth.onAuthStateChanged((user) => {
+  if(!app) {
+    app = new Vue({
+      store,
+      render: (h) => h(App),
+    }).$mount("#app");
+    store.$app = app;
+
+    if(user) {
+     store.dispatch("setAuthState",user);
+    }
+    else {
+      store.dispatch("setAuthState",{});
+    }
+  } else {
+    store.$app = app;
+    app.$mount("#app");
+  }
+  console.log("Auth state changed")
+
+})

src/main.js

@@ -0,0 +1,37 @@
+import Vuex from "vuex";
+import Vue from "vue";
+import * as fb from "../firebase";
+
+Vue.use(Vuex);
+export default new Vuex.Store({
+    state: {
+        user: {}
+    },
+    mutations: {
+        setUser(state,val) {
+            state.user = val;
+        }
+    },
+    actions: {
+        async setAuthState({commit}, user) {
+            console.log(user)
+            commit("setUser",user);
+        },
+        async login({commit},payload) {
+            return fb.auth.signInWithEmailAndPassword(payload.email,payload.password).then((userCredentials) => {
+                var user = userCredentials.user;
+                 console.log("Logged in user:",user);
+                 commit("setUser",user);
+              }).catch((error) => {
+                var errorCode = error.code;
+                var errorMessage = error.message;
+                console.log("Failed to login: ",errorCode,errorMessage);
+              });
+        },
+        async logout({commit}) {
+            fb.auth.signOut();
+            commit("setUser",{})
+        }
+    },
+});
+