[CODEBREW] Added video 009 progress

Author: strobsi

src/firebase.js

@@ -1,6 +1,7 @@
 import firebase from "firebase/app";
 import "firebase/firestore";
 import "firebase/auth";
+import "firebase/storage";
 
 const firebaseConfig = {
   apiKey: "AIzaSyDVFoOhFYY1zqDcSrgd05IVbonbcSE0AAk",
@@ -16,7 +17,8 @@ firebase.initializeApp(firebaseConfig);
 
 const db = firebase.firestore();
 const auth = firebase.auth();
+const storage = firebase.storage();
 
 const demoCollection = db.collection("demo");
 
-export { db, auth, demoCollection };
+export { db, auth, storage, demoCollection };

src/store/index.js

@@ -4,34 +4,58 @@ import * as fb from "../firebase";
 
 Vue.use(Vuex);
 export default new Vuex.Store({
-    state: {
-        user: {}
+  state: {
+    user: {},
+    image: "",
+  },
+  mutations: {
+    setUser(state, val) {
+      state.user = val;
     },
-    mutations: {
-        setUser(state,val) {
-            state.user = val;
-        }
+    setImageURL(state, val) {
+      state.image = 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",{})
-        }
+  },
+  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", {});
+    },
+    async uploadProfilePicture({ commit }, payload) {
+      var storageRef = fb.storage.ref();
+      var pictureRef = storageRef.child("profilePicture.png");
+      return pictureRef.put(payload.image).then((snapshot) => {
+        return snapshot.ref.getDownloadURL().then((res) => {
+          console.log(res);
+          commit("setImageURL", res);
+        });
+      });
+    },
+    async fetchProfilePicture({ commit }) {
+      var storageRef = fb.storage.ref();
+      var pictureRef = storageRef.child("profilePicture.png");
+      return pictureRef.getDownloadURL().then((res) => {
+        console.log(res);
+        commit("setImageURL", res);
+      });
+    },
+  },
 });
-

src/views/Dashboard.vue

@@ -1,6 +1,17 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="@/assets/logo.png" />
+    <img class="image" alt="Vue logo" :src="image" />
+    <br />
+    Profilbild hochladen: <br />
+    <input
+      type="file"
+      accept="image/*"
+      @change="uploadProfilePicture($event)"
+    />
+    <br />
+    <br />
+    <br />
+    <hr />
     Sie sind eingeloggt <button @click="logout()">Logout</button>
   </div>
 </template>
@@ -14,14 +25,34 @@ export default {
     return {};
   },
   computed: {
-    ...mapState(["user"]),
+    ...mapState(["user", "image"]),
+  },
+  mounted() {
+    this.$store.dispatch("fetchProfilePicture");
   },
   methods: {
     logout() {
       this.$store.dispatch("logout").then(() => {
         this.$router.push("/");
       });
     },
+    uploadProfilePicture(event) {
+      console.log("Upload image: ", event.target.files[0]);
+      let payload = {
+        uid: this.user.uid,
+        image: event.target.files[0],
+      };
+      this.$store.dispatch("uploadProfilePicture", payload).then(() => {
+        alert("Successfully uploaded profile picture");
+      });
+    },
   },
 };
 </script>
+
+<style scoped>
+.image {
+  width: 300px;
+  height: 300px;
+}
+</style>