Skip to content

V
vue_chat
Commit 2749014f by Hứa Minh Thành
Options

import axios + vee validate

parent 9ed10cad
Pipeline #1138 failed with stages
in 0 seconds
Showing with 189 additions and 99 deletions
assets/scss/regirst.scss
......@@ -53,9 +53,4 @@ body {
&:focus {
box-shadow: none;
}
}
select.form-control {
height : 52px;
padding-left: 0.5rem;
}
\ No newline at end of file
components/elements/textInput.vue 0 → 100644
<template>
<ValidationProvider rules="required" v-slot="{ errors, ariaInput, ariaMsg }">
<input
:id="vid"
type="text"
:name="name"
:placeholder="placeHolder"
:class="classStyle"
v-model.lazy="innerValue"
v-bind="ariaInput"
/>
<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';
// Add the required rule
extend("required", {
...required,
message: "This field is required"
});
export default {
props: {
vid: {
type: String,
default: undefined
},
name: {
type: String,
default: ""
},
placeHolder: {
type: String,
default: ""
},
classStyle: {
type: String,
default: "form-control bg-white border-md"
}
},
data() {
return {
innerValue: ''
}
},
watch: {
innerValue() {
this.$emit("input", {
type: this.name,
value: this.innerValue,
});
}
},
components: {
ValidationProvider,
},
};
</script>
<style lang="scss">
</style>
nuxt.config.js
......@@ -21,6 +21,9 @@ module.exports = {
** Build configuration
*/
build: {
transpile: [
'vee-validate'
],
/*
** Run ESLint on save
*/
......
package-lock.json
......@@ -7,7 +7,9 @@
"": {
"version": "1.0.0",
"dependencies": {
"nuxt": "^2.0.0"
"axios": "^0.21.0",
"nuxt": "^2.0.0",
"vee-validate": "^3.4.5"
},
"devDependencies": {
"@nuxtjs/style-resources": "^1.0.0",
......@@ -3259,6 +3261,14 @@
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
"dev": true
},
"node_modules/axios": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
"integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
"dependencies": {
"follow-redirects": "^1.10.0"
}
},
"node_modules/babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
......@@ -6578,6 +6588,25 @@
"readable-stream": "^2.3.6"
}
},
"node_modules/follow-redirects": {
"version": "1.13.1",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
"integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
......@@ -14415,6 +14444,14 @@
"node": ">= 0.8"
}
},
"node_modules/vee-validate": {
"version": "3.4.5",
"resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-3.4.5.tgz",
"integrity": "sha512-ZEcLqOAZzSkMhDvPcTx0xcwVOijFnMW9J+BA20j+rDmo24T8RCCqVQyRwwrDrcWJZV2dRYl/yYNa2GB6UCoBvg==",
"peerDependencies": {
"vue": "^2.5.18"
}
},
"node_modules/vendors": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
......@@ -18707,6 +18744,14 @@
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
"dev": true
},
"axios": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
"integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
"requires": {
"follow-redirects": "^1.10.0"
}
},
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
......@@ -21379,6 +21424,11 @@
"readable-stream": "^2.3.6"
}
},
"follow-redirects": {
"version": "1.13.1",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
"integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
......@@ -27642,6 +27692,12 @@
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
},
"vee-validate": {
"version": "3.4.5",
"resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-3.4.5.tgz",
"integrity": "sha512-ZEcLqOAZzSkMhDvPcTx0xcwVOijFnMW9J+BA20j+rDmo24T8RCCqVQyRwwrDrcWJZV2dRYl/yYNa2GB6UCoBvg==",
"requires": {}
},
"vendors": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
package.json
......@@ -13,7 +13,9 @@
"precommit": "npm run lint"
},
"dependencies": {
"nuxt": "^2.0.0"
"axios": "^0.21.0",
"nuxt": "^2.0.0",
"vee-validate": "^3.4.5"
},
"devDependencies": {
"@nuxtjs/style-resources": "^1.0.0",
......
pages/regirst/index.vue
......@@ -3,127 +3,94 @@
<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"
alt=""
class="img-fluid mb-3 d-none d-md-block"
/>
<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>
</div>
<!-- Registeration Form -->
<div class="col-md-7 col-lg-6 ml-auto">
<form action="#">
<ValidationObserver v-slot="{ passes }">
<form @submit.prevent="passes(submitForm)">
<div class="row">
<!-- First Name -->
<div class="input-group col-lg-6 mb-4">
<div class="input-group-prepend">
<span class="input-group-text bg-white px-4 border-md border-right-0">
<i class="fa fa-user text-muted"></i>
</span>
</div>
<input
id="firstName"
type="text"
name="firstname"
placeholder="First Name"
class="form-control bg-white border-left-0 border-md"
/>
<text-input vid="firstName" name="firstName" placeHolder="First Name" @input="getValue($event)"/>
</div>
<!-- Last Name -->
<div class="input-group col-lg-6 mb-4">
<div class="input-group-prepend">
<span class="input-group-text bg-white px-4 border-md border-right-0">
<i class="fa fa-user text-muted"></i>
</span>
</div>
<input
id="lastName"
type="text"
name="lastname"
placeholder="Last Name"
class="form-control bg-white border-left-0 border-md"
/>
<text-input vid="lastName" name="lastName" placeHolder="Last Name" @input="getValue($event)"/>
</div>
<!-- Phone Number -->
<!-- nameLogin -->
<div class="input-group col-lg-12 mb-4">
<div class="input-group-prepend">
<span class="input-group-text bg-white px-4 border-md border-right-0">
<i class="fa fa-phone-square text-muted"></i>
</span>
</div>
<select
id="countryCode"
name="countryCode"
style="max-width: 80px"
class="custom-select form-control bg-white border-left-0 border-md h-100 font-weight-bold text-muted"
>
<option value="">+12</option>
<option value="">+10</option>
<option value="">+15</option>
<option value="">+18</option>
</select>
<input
id="phoneNumber"
type="tel"
name="phone"
placeholder="Phone Number"
class="form-control bg-white border-md border-left-0 pl-3"
/>
<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">
<div class="input-group-prepend">
<span class="input-group-text bg-white px-4 border-md border-right-0">
<i class="fa fa-lock text-muted"></i>
</span>
</div>
<input
id="password"
type="password"
name="password"
placeholder="Password"
class="form-control bg-white border-left-0 border-md"
/>
<text-input vid="password" name="password" placeHolder="Password" @input="getValue($event)"/>
</div>
<!-- Password Confirmation -->
<div class="input-group col-lg-6 mb-4">
<div class="input-group-prepend">
<span class="input-group-text bg-white px-4 border-md border-right-0">
<i class="fa fa-lock text-muted"></i>
</span>
</div>
<input
id="passwordConfirmation"
type="text"
name="passwordConfirmation"
placeholder="Confirm Password"
class="form-control bg-white border-left-0 border-md"
/>
<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">
<a href="#" class="btn btn-primary btn-block py-2">
<span class="font-weight-bold">Create your account</span>
</a>
<button type="submit" class="btn btn-primary btn-block py-2">Create your account</button>
</div>
</div>
</form>
</ValidationObserver>
</div>
</div>
</div>
</template>
<script>
export default {};
import axios from "axios";
import { ValidationObserver } from "vee-validate";
import TextInput from '~/components/elements/textInput.vue';
export default {
data() {
return {
user: {
firstName: "",
lastName: "",
nameLogin: "",
password: "",
passConfirm: "",
},
urlFireBase: "https://vue-chat-c1525-default-rtdb.firebaseio.com",
};
},
methods: {
getValue: function(data) {
this.user[data.type] = data.value;
console.log(data)
},
submitForm: function () {
axios
.post(this.urlFireBase + "/user.json", this.user)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
},
components: {
ValidationObserver,
TextInput
}
};
</script>
<style lang='scss' scoped>
@import '~/assets/css/bootstrap.min.css';
@import '~/assets/scss/regirst.scss';
<style lang="scss">
@import "~/assets/css/bootstrap.min.css";
@import "~/assets/scss/regirst.scss";
.disabled {
pointer-events: none;
cursor: default;
}
</style>
plugins/vee-validate.js 0 → 100644
import { ValidationProvider } from 'vee-validate';
import Vue from 'vue';
Vue.component('ValidationProvider', ValidationProvider);
\ 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