Skip to content

V
vue_chat
Commit 67ea6321 by Hứa Minh Thành
Options

show + edit info/avatar user

parent ce65aa2e
Pipeline #1143 failed with stages
in 0 seconds
Showing with 210 additions and 85 deletions
components/elements/menu.vue
...@@ -8,10 +8,12 @@ ...@@ -8,10 +8,12 @@
<nuxt-link to="/" tag="a">Home</nuxt-link> <nuxt-link to="/" tag="a">Home</nuxt-link>
</li> </li>
<li> <li>
<nuxt-link to="/regirst" tag="a">Regirst</nuxt-link> <nuxt-link to="/regirst" tag="a">{{
!isLogin ? "Regirst" : "My Page"
}}</nuxt-link>
</li> </li>
<li> <li>
<nuxt-link to="/login" tag="a" v-if="!$store.state.user">Login</nuxt-link> <nuxt-link to="/login" tag="a" v-if="!isLogin">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> --> <!-- <nuxt-link to="" tag="a" "></nuxt-link> -->
</li> </li>
...@@ -31,20 +33,30 @@ ...@@ -31,20 +33,30 @@
</template> </template>
<script> <script>
export default { export default {
data() {
return {
isLogin: false,
};
},
methods: { methods: {
logOut: function() { logOut: function () {
this.$store.dispatch('signOut') this.$store
.then() .dispatch("signOut")
.catch(err => { .then()
alert(err); .catch((err) => {
}); alert(err);
});
},
},
created: function () {
if (this.$store.state.user !== null) {
this.isLogin = true;
} }
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/scss/menu.scss'; @import "~/assets/scss/menu.scss";
</style> </style>
components/elements/textInput.vue
<template> <template>
<ValidationProvider rules="required" v-slot="{ errors, ariaInput, ariaMsg }"> <ValidationProvider rules="" v-slot="{ errors, ariaInput, ariaMsg }">
<input <input
:id="vid" :id="vid"
type="text" type="text"
:name="name" :name="name"
...@@ -9,42 +9,42 @@ ...@@ -9,42 +9,42 @@
v-model.lazy="innerValue" v-model.lazy="innerValue"
v-bind="ariaInput" v-bind="ariaInput"
/> />
<span style="color:red" v-bind="ariaMsg">{{ errors[0] }}</span> <span style="color: red" v-bind="ariaMsg">{{ errors[0] }}</span>
</ValidationProvider> </ValidationProvider>
</template> </template>
<script> <script>
import { extend, configure, ValidationProvider } from 'vee-validate'; import { extend, configure, ValidationProvider } from "vee-validate";
import { required } from 'vee-validate/dist/rules'; import { required } from "vee-validate/dist/rules";
// Add the required rule // Add the required rule
extend("required", { extend("required", {
...required, ...required,
message: "This field is required" message: "This field is required",
}); });
export default { export default {
props: { props: {
vid: { vid: {
type: String, type: String,
default: undefined default: undefined,
}, },
name: { name: {
type: String, type: String,
default: "" default: "",
}, },
placeHolder: { placeHolder: {
type: String, type: String,
default: "" default: "",
}, },
classStyle: { classStyle: {
type: String, type: String,
default: "form-control bg-white border-md" default: "form-control bg-white border-md",
} },
}, },
data() { data() {
return { return {
innerValue: '' innerValue: "",
} };
}, },
watch: { watch: {
innerValue() { innerValue() {
...@@ -52,12 +52,11 @@ export default { ...@@ -52,12 +52,11 @@ export default {
type: this.name, type: this.name,
value: this.innerValue, value: this.innerValue,
}); });
} },
}, },
components: { components: {
ValidationProvider, ValidationProvider,
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss"></style>
</style>
pages/regirst/index.vue
...@@ -3,40 +3,73 @@ ...@@ -3,40 +3,73 @@
<div class="row py-5 mt-4 align-items-center"> <div class="row py-5 mt-4 align-items-center">
<!-- For Demo Purpose --> <!-- For Demo Purpose -->
<div class="col-md-5 pr-lg-5 mb-5 mb-md-0"> <div class="col-md-5 pr-lg-5 mb-5 mb-md-0">
<img src="https://res.cloudinary.com/mhmd/image/upload/v1569543678/form_d9sh6m.svg" class="img-fluid mb-3 d-none d-md-block"/> <img :src="user.photoURL" class="img-fluid mb-3 d-none d-md-block" />
<h1>Create an Account</h1> <input
type="file"
id="myFile"
name="filename"
@change="previewImage"
class="btn btn-success"
/>
<input
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">
<ValidationObserver v-slot="{ passes }"> <ValidationObserver v-slot="{ passes }">
<form @submit.prevent="passes(userSignUp)"> <form @submit.prevent="passes(userSignUp)">
<div class="row"> <div class="row">
<!-- First Name --> <!-- First Name -->
<div class="input-group col-lg-6 mb-4"> <div class="input-group col-lg-6 mb-4">
<text-input vid="firstName" name="firstName" placeHolder="First Name" @input="getValue($event)"/> <text-input
vid="name"
name="name"
:placeHolder="user.name"
@input="getValue($event)"
/>
</div>
<!-- nameLogin -->
<div class="input-group col-lg-12 mb-4">
<text-input
vid="email"
name="email"
:placeHolder="user.email"
@input="getValue($event)"
classStyle="form-control bg-white border-md pl-3"
/>
</div>
<!-- Password -->
<div class="input-group col-lg-6 mb-4">
<text-input
vid="password"
name="password"
placeHolder="Password"
@input="getValue($event)"
/>
</div>
<!-- Password Confirmation -->
<div class="input-group col-lg-6 mb-4">
<text-input
vid="passConfirm"
name="passConfirm"
placeHolder="Confirm Password"
@input="getValue($event)"
/>
</div>
<!-- Submit Button -->
<div class="form-group col-lg-12 mx-auto mb-0">
<button type="submit" class="btn btn-primary btn-block py-2">
{{ user.isLogin ? "Update info" : "Create your account" }}
</button>
</div>
</div> </div>
<!-- Last Name --> </form>
<div class="input-group col-lg-6 mb-4">
<text-input vid="lastName" name="lastName" placeHolder="Last Name" @input="getValue($event)"/>
</div>
<!-- nameLogin -->
<div class="input-group col-lg-12 mb-4">
<text-input vid="nameLogin" name="nameLogin" placeHolder="User Login" @input="getValue($event)" classStyle="form-control bg-white border-md pl-3"/>
</div>
<!-- Password -->
<div class="input-group col-lg-6 mb-4">
<text-input vid="password" name="password" placeHolder="Password" @input="getValue($event)"/>
</div>
<!-- Password Confirmation -->
<div class="input-group col-lg-6 mb-4">
<text-input vid="passConfirm" name="passConfirm" placeHolder="Confirm Password" @input="getValue($event)"/>
</div>
<!-- Submit Button -->
<div class="form-group col-lg-12 mx-auto mb-0">
<button type="submit" class="btn btn-primary btn-block py-2">Create your account</button>
</div>
</div>
</form>
</ValidationObserver> </ValidationObserver>
</div> </div>
</div> </div>
...@@ -45,29 +78,35 @@ ...@@ -45,29 +78,35 @@
<script> <script>
import axios from "axios"; import axios from "axios";
import firebase from "firebase";
import { ValidationObserver } from "vee-validate"; import { ValidationObserver } from "vee-validate";
import TextInput from '~/components/elements/textInput.vue'; import TextInput from "~/components/elements/textInput.vue";
export default { export default {
data() { data() {
return { return {
title: "Create your account",
user: { user: {
firstName: "", name: "",
lastName: "", email: "",
nameLogin: "",
password: "", password: "",
passConfirm: "", passConfirm: "",
photoURL:
"https://res.cloudinary.com/mhmd/image/upload/v1569543678/form_d9sh6m.svg",
isLogin: false,
}, },
urlFireBase: "https://vue-chat-c1525-default-rtdb.firebaseio.com", urlFireBase: "https://vue-chat-c1525-default-rtdb.firebaseio.com",
caption: "",
imageData: null,
}; };
}, },
methods: { methods: {
getValue: function(data) { getValue: function (data) {
this.user[data.type] = data.value; this.user[data.type] = data.value;
console.log(data)
}, },
// import data // import data
submitForm: function () { submitForm: function () {
axios axios
...@@ -80,26 +119,90 @@ export default { ...@@ -80,26 +119,90 @@ export default {
}); });
}, },
// regist // regist
userSignUp: function(err) { userSignUp: function (err) {
this.$store if (this.user.isLogin) {
.dispatch("signUp", { // upload img
email: this.user.nameLogin, this.onUpload();
password: this.user.password, // update info
}) this.$store
.then(() => { .dispatch("updateInfoUser", {
this.email = ""; user: this.user,
this.password = ""; })
//if you wanted to redirect after sign id you'd that here with this.$router.push('/pagename') .then((res) => {
}) this.user.email = "";
.catch((err) => { this.user.password = "";
alert(err.message); this.updateShowInfo();
}); });
} } else {
// regist
this.$store
.dispatch("signUp", {
email: this.user.email,
password: this.user.password,
})
.then(() => {
this.user.email = "";
this.user.password = "";
//if you wanted to redirect after sign id you'd that here with this.$router.push('/pagename')
})
.catch((err) => {
alert(err.message);
});
}
},
updateShowInfo: function () {
let user = this.$store.state.user;
this.user.email = user.email;
this.user.photoURL = user.photoURL;
this.title = this.user.name = user.displayName;
this.user.isLogin = true;
},
// upload image to storage
onUpload() {
const storageRef = firebase
.storage()
.ref(`${this.imageData.name}`)
.put(this.imageData);
storageRef.on(
firebase.storage.TaskEvent.STATE_CHANGED,
(snapshot) => {
this.uploadValue = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
},
(error) => {
console.log(error.message);
},
() => {
this.uploadValue = 100;
storageRef.snapshot.ref.getDownloadURL().then((url) => {
this.user.photoURL = url;
});
}
);
},
previewImage(event) {
this.uploadValue = 0;
this.imageData = event.target.files[0];
this.user.photoURL = URL.createObjectURL(this.imageData);
},
}, },
components: { components: {
ValidationObserver, ValidationObserver,
TextInput TextInput,
} },
computed: {
showTitle: function () {
if (this.$store.state.user !== null) {
return this.$store.state.user.displayName;
}
return this.title;
},
},
created: function () {
if (this.$store.state.user !== null) {
this.updateShowInfo();
}
},
}; };
</script> </script>
...@@ -107,7 +210,7 @@ export default { ...@@ -107,7 +210,7 @@ export default {
@import "~/assets/css/bootstrap.min.css"; @import "~/assets/css/bootstrap.min.css";
@import "~/assets/scss/regirst.scss"; @import "~/assets/scss/regirst.scss";
.disabled { .disabled {
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
} }
</style> </style>
store/index.js
...@@ -34,6 +34,18 @@ const createStore = () => { ...@@ -34,6 +34,18 @@ const createStore = () => {
return auth.signInWithEmailAndPassword(email, password); return auth.signInWithEmailAndPassword(email, password);
}, },
updateInfoUser({ commit }, { user }) {
return auth.currentUser.updateProfile({
displayName: user.name,
email: user.email,
photoURL: user.photoURL
}).then(function () {
console.log('Updated');
}).catch(error => {
console.log(error)
});
},
signOut(state) { signOut(state) {
return auth.signOut(); return auth.signOut();
} }
...@@ -43,4 +55,4 @@ const createStore = () => { ...@@ -43,4 +55,4 @@ const createStore = () => {
}) })
} }
export default createStore export default createStore
\ No newline at end of file
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