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 172 additions and 46 deletions
components/elements/menu.vue
......@@ -8,10 +8,12 @@
<nuxt-link to="/" tag="a">Home</nuxt-link>
</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>
<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>
<!-- <nuxt-link to="" tag="a" "></nuxt-link> -->
</li>
......@@ -31,20 +33,30 @@
</template>
<script>
export default {
data() {
return {
isLogin: false,
};
},
methods: {
logOut: function() {
this.$store.dispatch('signOut')
logOut: function () {
this.$store
.dispatch("signOut")
.then()
.catch(err => {
.catch((err) => {
alert(err);
});
},
},
created: function () {
if (this.$store.state.user !== null) {
this.isLogin = true;
}
}
}
},
};
</script>
<style lang="scss">
@import '~/assets/scss/menu.scss';
@import "~/assets/scss/menu.scss";
</style>
components/elements/textInput.vue
<template>
<ValidationProvider rules="required" v-slot="{ errors, ariaInput, ariaMsg }">
<ValidationProvider rules="" v-slot="{ errors, ariaInput, ariaMsg }">
<input
:id="vid"
type="text"
......@@ -9,42 +9,42 @@
v-model.lazy="innerValue"
v-bind="ariaInput"
/>
<span style="color:red" v-bind="ariaMsg">{{ errors[0] }}</span>
<span style="color: red" v-bind="ariaMsg">{{ errors[0] }}</span>
</ValidationProvider>
</template>
<script>
import { extend, configure, ValidationProvider } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';
import { extend, configure, ValidationProvider } from "vee-validate";
import { required } from "vee-validate/dist/rules";
// Add the required rule
extend("required", {
...required,
message: "This field is required"
message: "This field is required",
});
export default {
props: {
vid: {
type: String,
default: undefined
default: undefined,
},
name: {
type: String,
default: ""
default: "",
},
placeHolder: {
type: String,
default: ""
default: "",
},
classStyle: {
type: String,
default: "form-control bg-white border-md"
}
default: "form-control bg-white border-md",
},
},
data() {
return {
innerValue: ''
}
innerValue: "",
};
},
watch: {
innerValue() {
......@@ -52,12 +52,11 @@ export default {
type: this.name,
value: this.innerValue,
});
}
},
},
components: {
ValidationProvider,
},
};
</script>
<style lang="scss">
</style>
<style lang="scss"></style>
pages/regirst/index.vue
......@@ -3,8 +3,22 @@
<div class="row py-5 mt-4 align-items-center">
<!-- For Demo Purpose -->
<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"/>
<h1>Create an Account</h1>
<img :src="user.photoURL" class="img-fluid mb-3 d-none d-md-block" />
<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>
<!-- Registeration Form -->
<div class="col-md-7 col-lg-6 ml-auto">
......@@ -13,27 +27,46 @@
<div class="row">
<!-- First Name -->
<div class="input-group col-lg-6 mb-4">
<text-input vid="firstName" name="firstName" placeHolder="First Name" @input="getValue($event)"/>
</div>
<!-- Last Name -->
<div class="input-group col-lg-6 mb-4">
<text-input vid="lastName" name="lastName" placeHolder="Last 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="nameLogin" name="nameLogin" placeHolder="User Login" @input="getValue($event)" classStyle="form-control bg-white border-md pl-3"/>
<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)"/>
<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)"/>
<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>
<button type="submit" class="btn btn-primary btn-block py-2">
{{ user.isLogin ? "Update info" : "Create your account" }}
</button>
</div>
</div>
</form>
......@@ -45,29 +78,35 @@
<script>
import axios from "axios";
import firebase from "firebase";
import { ValidationObserver } from "vee-validate";
import TextInput from '~/components/elements/textInput.vue';
import TextInput from "~/components/elements/textInput.vue";
export default {
data() {
return {
title: "Create your account",
user: {
firstName: "",
lastName: "",
nameLogin: "",
name: "",
email: "",
password: "",
passConfirm: "",
photoURL:
"https://res.cloudinary.com/mhmd/image/upload/v1569543678/form_d9sh6m.svg",
isLogin: false,
},
urlFireBase: "https://vue-chat-c1525-default-rtdb.firebaseio.com",
caption: "",
imageData: null,
};
},
methods: {
getValue: function(data) {
getValue: function (data) {
this.user[data.type] = data.value;
console.log(data)
},
// import data
submitForm: function () {
axios
......@@ -80,15 +119,30 @@ export default {
});
},
// regist
userSignUp: function(err) {
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();
});
} else {
// regist
this.$store
.dispatch("signUp", {
email: this.user.nameLogin,
email: this.user.email,
password: this.user.password,
})
.then(() => {
this.email = "";
this.password = "";
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) => {
......@@ -96,10 +150,59 @@ export default {
});
}
},
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: {
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>
......
store/index.js
......@@ -34,6 +34,18 @@ const createStore = () => {
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) {
return auth.signOut();
}
......
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