upload avatar

components/elements/menu.vue

@@ -9,13 +9,12 @@
           </li>
           <li>
             <nuxt-link to="/regirst" tag="a">{{
-              !isLogin ? "Regirst" : "My Page"
+              !checkLogin ? "Regirst" : "My Page"
             }}</nuxt-link>
           </li>
           <li>
-            <nuxt-link to="/login" tag="a" v-if="!isLogin">Login</nuxt-link>
+            <nuxt-link to="/login" tag="a" v-if="!checkLogin">Login</nuxt-link>
             <a href="/login" v-else @click.prevent="logOut()">Logout</a>
-            <!-- <nuxt-link to="" tag="a"  "></nuxt-link> -->
           </li>
           <li>
             <a href="" style="pointer-events: none; display: inline-block">Users</a>
@@ -49,6 +48,11 @@ export default {
         });
     },
   },
+  computed: {
+      checkLogin: function() {
+          return (this.$store.state.user !== null) ? true : false;
+      }
+  },
   created: function () {
     if (this.$store.state.user !== null) {
       this.isLogin = true;

pages/regirst/index.vue

@@ -11,14 +11,7 @@
           @change="previewImage"
           class="btn btn-success"
         />
-        <input
-          type="file"
-          ref="input1"
-          style="display: none"
-          @change="previewImage"
-          accept="image/*"
-        />
-        <h1>{{ title }}</h1>
+        <h1>{{ user.title }}</h1>
       </div>
       <!-- Registeration Form -->
       <div class="col-md-7 col-lg-6 ml-auto">
@@ -122,18 +115,15 @@ export default {
     userSignUp: function (err) {
       if (this.user.isLogin) {
         // upload img
-        this.onUpload();
-        // update info
-        this.$store
-          .dispatch("updateInfoUser", {
-            user: this.user,
-          })
-          .then((res) => {
-            this.user.email = "";
-            this.user.password = "";
-            this.updateShowInfo();
+
+        if (this.imageData) {
+          this.onUpload().then(url => {
+            this.commonUpdateInfo();
           });
         } else {
+          this.commonUpdateInfo();
+        }
+      } else {
         // regist
         this.$store
           .dispatch("signUp", {
@@ -159,6 +149,7 @@ export default {
     },
     // upload image to storage
     onUpload() {
+      return new Promise((resolve, reject) => {
         const storageRef = firebase
           .storage()
           .ref(`${this.imageData.name}`)
@@ -175,16 +166,30 @@ export default {
           () => {
             this.uploadValue = 100;
             storageRef.snapshot.ref.getDownloadURL().then((url) => {
+              resolve(url)
               this.user.photoURL = url;
             });
           }
         );
+      });
     },
     previewImage(event) {
       this.uploadValue = 0;
       this.imageData = event.target.files[0];
       this.user.photoURL = URL.createObjectURL(this.imageData);
     },
+    commonUpdateInfo() {
+      // update info
+      this.$store
+        .dispatch("updateInfoUser", {
+          userUpdate: this.user,
+        })
+        .then((res) => {
+          this.user.email = "";
+          this.user.password = "";
+          this.updateShowInfo();
+        });
+    },
   },
   components: {
     ValidationObserver,

store/index.js

@@ -34,13 +34,13 @@ const createStore = () => {
                 return auth.signInWithEmailAndPassword(email, password);
             },
 
-            updateInfoUser({ commit }, { user }) {
+            updateInfoUser({ commit }, { userUpdate }) {
                 return auth.currentUser.updateProfile({
-                    displayName: user.name,
-                    email: user.email,
-                    photoURL: user.photoURL
-                }).then(function () {
-                    console.log('Updated');
+                    displayName: userUpdate.name,
+                    email: userUpdate.email,
+                    photoURL: userUpdate.photoURL
+                }).then(res => {
+                    // commit('setUser', userUpdate)
                 }).catch(error => {
                     console.log(error)
                 });