Skip to content

V
vue_chat
Commit 18bf7b72 by Hứa Minh Thành
Options

upload avatar

parent 67ea6321
Pipeline #1161 canceled with stages
in 0 seconds
Showing with 55 additions and 46 deletions
components/elements/menu.vue
...@@ -9,13 +9,12 @@ ...@@ -9,13 +9,12 @@
</li> </li>
<li> <li>
<nuxt-link to="/regirst" tag="a">{{ <nuxt-link to="/regirst" tag="a">{{
!isLogin ? "Regirst" : "My Page" !checkLogin ? "Regirst" : "My Page"
}}</nuxt-link> }}</nuxt-link>
</li> </li>
<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> <a href="/login" v-else @click.prevent="logOut()">Logout</a>
<!-- <nuxt-link to="" tag="a" "></nuxt-link> -->
</li> </li>
<li> <li>
<a href="" style="pointer-events: none; display: inline-block">Users</a> <a href="" style="pointer-events: none; display: inline-block">Users</a>
...@@ -49,6 +48,11 @@ export default { ...@@ -49,6 +48,11 @@ export default {
}); });
}, },
}, },
computed: {
checkLogin: function() {
return (this.$store.state.user !== null) ? true : false;
}
},
created: function () { created: function () {
if (this.$store.state.user !== null) { if (this.$store.state.user !== null) {
this.isLogin = true; this.isLogin = true;
......
pages/regirst/index.vue
...@@ -11,14 +11,7 @@ ...@@ -11,14 +11,7 @@
@change="previewImage" @change="previewImage"
class="btn btn-success" class="btn btn-success"
/> />
<input <h1>{{ user.title }}</h1>
type="file"
ref="input1"
style="display: none"
@change="previewImage"
accept="image/*"
/>
<h1>{{ title }}</h1>
</div> </div>
<!-- Registeration Form --> <!-- Registeration Form -->
<div class="col-md-7 col-lg-6 ml-auto"> <div class="col-md-7 col-lg-6 ml-auto">
...@@ -122,17 +115,14 @@ export default { ...@@ -122,17 +115,14 @@ export default {
userSignUp: function (err) { userSignUp: function (err) {
if (this.user.isLogin) { if (this.user.isLogin) {
// upload img // upload img
this.onUpload();
// update info if (this.imageData) {
this.$store this.onUpload().then(url => {
.dispatch("updateInfoUser", { this.commonUpdateInfo();
user: this.user,
})
.then((res) => {
this.user.email = "";
this.user.password = "";
this.updateShowInfo();
}); });
} else {
this.commonUpdateInfo();
}
} else { } else {
// regist // regist
this.$store this.$store
...@@ -159,32 +149,47 @@ export default { ...@@ -159,32 +149,47 @@ export default {
}, },
// upload image to storage // upload image to storage
onUpload() { onUpload() {
const storageRef = firebase return new Promise((resolve, reject) => {
.storage() const storageRef = firebase
.ref(`${this.imageData.name}`) .storage()
.put(this.imageData); .ref(`${this.imageData.name}`)
.put(this.imageData);
storageRef.on( storageRef.on(
firebase.storage.TaskEvent.STATE_CHANGED, firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot) => { (snapshot) => {
this.uploadValue = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; this.uploadValue = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
}, },
(error) => { (error) => {
console.log(error.message); console.log(error.message);
}, },
() => { () => {
this.uploadValue = 100; this.uploadValue = 100;
storageRef.snapshot.ref.getDownloadURL().then((url) => { storageRef.snapshot.ref.getDownloadURL().then((url) => {
this.user.photoURL = url; resolve(url)
}); this.user.photoURL = url;
} });
); }
);
});
}, },
previewImage(event) { previewImage(event) {
this.uploadValue = 0; this.uploadValue = 0;
this.imageData = event.target.files[0]; this.imageData = event.target.files[0];
this.user.photoURL = URL.createObjectURL(this.imageData); 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: { components: {
ValidationObserver, ValidationObserver,
......
store/index.js
...@@ -34,13 +34,13 @@ const createStore = () => { ...@@ -34,13 +34,13 @@ const createStore = () => {
return auth.signInWithEmailAndPassword(email, password); return auth.signInWithEmailAndPassword(email, password);
}, },
updateInfoUser({ commit }, { user }) { updateInfoUser({ commit }, { userUpdate }) {
return auth.currentUser.updateProfile({ return auth.currentUser.updateProfile({
displayName: user.name, displayName: userUpdate.name,
email: user.email, email: userUpdate.email,
photoURL: user.photoURL photoURL: userUpdate.photoURL
}).then(function () { }).then(res => {
console.log('Updated'); // commit('setUser', userUpdate)
}).catch(error => { }).catch(error => {
console.log(error) console.log(error)
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment