Merge branch 'feature/php/thanhhm/xios_firebase' into 'develop'

import axios + vee validate See merge request !3

Merge branch 'feature/php/thanhhm/xios_firebase' into 'develop'
import axios + vee validate See merge request !3
8b772eb5 · Hứa Minh Thành · f96e4964 · 2749014f · 8b772eb5 · 8b772eb5
Commit 8b772eb5 authored Dec 15, 2020 by Hứa Minh Thành
Showing with 189 additions and 99 deletions

assets/scss/regirst.scss
+0 -6

components/elements/textInput.vue
+63 -0

nuxt.config.js
+3 -0

package-lock.json
+57 -1

package.json
+3 -1

pages/regirst/index.vue
+58 -91

plugins/vee-validate.js
+5 -0

No files found.
--- a/assets/scss/regirst.scss
+++ b/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
--- a/components/elements/textInput.vue
+++ b/components/elements/textInput.vue
+<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>
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -21,6 +21,9 @@ module.exports = {
  ** Build configuration
  */
  build: {
+    transpile: [
+      'vee-validate'
+    ],
    /*
    ** Run ESLint on save
    */

--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",

--- a/pages/regirst/index.vue
+++ b/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
+        <img src="https://res.cloudinary.com/mhmd/image/upload/v1569543678/form_d9sh6m.svg" class="img-fluid mb-3 d-none d-md-block"/>
-          src="https://res.cloudinary.com/mhmd/image/upload/v1569543678/form_d9sh6m.svg"
-          alt=""
-          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">
+              <text-input vid="firstName" name="firstName" placeHolder="First Name" @input="getValue($event)"/>
-                <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"
-              />
            </div>
            <!-- Last Name -->
            <div class="input-group col-lg-6 mb-4">
-              <div class="input-group-prepend">
+              <text-input vid="lastName" name="lastName" placeHolder="Last Name" @input="getValue($event)"/>
-                <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"
-              />
            </div>
+            <!-- nameLogin -->
-            <!-- Phone Number -->
            <div class="input-group col-lg-12 mb-4">
-              <div class="input-group-prepend">
+              <text-input vid="nameLogin" name="nameLogin" placeHolder="User Login" @input="getValue($event)" classStyle="form-control bg-white border-md pl-3"/>
-                <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"
-              />
            </div>
            <!-- Password -->
            <div class="input-group col-lg-6 mb-4">
-              <div class="input-group-prepend">
+              <text-input vid="password" name="password" placeHolder="Password" @input="getValue($event)"/>
-                <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"
-              />
            </div>
            <!-- Password Confirmation -->
            <div class="input-group col-lg-6 mb-4">
-              <div class="input-group-prepend">
+              <text-input vid="passConfirm" name="passConfirm" placeHolder="Confirm Password" @input="getValue($event)"/>
-                <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"
-              />
            </div>
            <!-- Submit Button -->
            <div class="form-group col-lg-12 mx-auto mb-0">
-              <a href="#" class="btn btn-primary btn-block py-2">
+              <button type="submit" class="btn btn-primary btn-block py-2">Create your account</button>
-                <span class="font-weight-bold">Create your account</span>
-              </a>
            </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>
+<style lang="scss">
-  @import '~/assets/css/bootstrap.min.css';
+@import "~/assets/css/bootstrap.min.css";
-  @import '~/assets/scss/regirst.scss';
+@import "~/assets/scss/regirst.scss";
+.disabled {
+  pointer-events: none; 
+  cursor: default; 
+}
 </style>
--- a/plugins/vee-validate.js
+++ b/plugins/vee-validate.js
+import { ValidationProvider } from 'vee-validate';
+import Vue from 'vue';
+Vue.component('ValidationProvider', ValidationProvider);
\ No newline at end of file