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

regist + login + logout

See merge request !4

components/elements/menu.vue

@@ -11,7 +11,9 @@
             <nuxt-link to="/regirst" tag="a">Regirst</nuxt-link>
             <nuxt-link to="/regirst" tag="a">Regirst</nuxt-link>
           </li>
           </li>
           <li>
           <li>
-            <nuxt-link to="/login" tag="a">Login</nuxt-link>
+            <nuxt-link to="/login" tag="a" v-if="!$store.state.user">Login</nuxt-link>
+            <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>
@@ -28,6 +30,21 @@
   </div>
   </div>
 </template>
 </template>
 
 
+<script>
+
+export default {
+  methods: {
+    logOut: function() {
+      this.$store.dispatch('signOut')
+      .then()
+      .catch(err => {
+        alert(err);
+      });
+    }
+  }
+}
+</script>
+
 <style lang="scss">
 <style lang="scss">
   @import '~/assets/scss/menu.scss';
   @import '~/assets/scss/menu.scss';
 </style>
 </style>

components/firebase.vue

+<template>
+    <div>
+        
+    </div>
+</template>
+<script>
+import firebase from 'firebase';
+
+export default {
+    
+}
+</script>
+<style>
+    
+</style>
\ No newline at end of file

nuxt.config.js

@@ -13,6 +13,12 @@ module.exports = {
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
     ]
     ]
   },
   },
+  mode: "spa",
+  devtools: true,
+  plugins: [
+    '~/plugins/firebase.js',
+    '~/plugins/fireauth.js'
+  ],
   /*
   /*
   ** Customize the progress bar color
   ** Customize the progress bar color
   */
   */
@@ -36,6 +42,9 @@ module.exports = {
           exclude: /(node_modules)/
           exclude: /(node_modules)/
         })
         })
       }
       }
+      if (isClient) {
+        config.devtool = 'source-map'
+      }
     }
     }
   }
   }
 }
 }

package.json

@@ -14,8 +14,10 @@
   },
   },
   "dependencies": {
   "dependencies": {
     "axios": "^0.21.0",
     "axios": "^0.21.0",
+    "firebase": "^8.2.0",
     "nuxt": "^2.0.0",
     "nuxt": "^2.0.0",
-    "vee-validate": "^3.4.5"
+    "vee-validate": "^3.4.5",
+    "vuex-persistedstate": "^4.0.0-beta.1"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "@nuxtjs/style-resources": "^1.0.0",
     "@nuxtjs/style-resources": "^1.0.0",

pages/index.vue

@@ -2,11 +2,13 @@
   <section class="container">
   <section class="container">
     <div class="wrapper">
     <div class="wrapper">
       <div class="background">
       <div class="background">
-        <!-- <h2>
-          We're glad <br />
-          you are here!
+        <div v-if="$store.state.user !== null">
+          <h2>
+            Hello {{$store.state.user.email}}<br />
+            Welcome you are here!
           </h2>
           </h2>
-        <h3>ThanhHM</h3> -->
+          <h3>ThanhHM</h3>
+        </div>
       </div>
       </div>
     </div>
     </div>
     <nuxt-child />
     <nuxt-child />
@@ -14,7 +16,15 @@
 </template>
 </template>
 
 
 <script>
 <script>
-export default {};
+// import { mapGetters } from "vuex";
+
+export default {
+  // computed: {
+  //   ...mapGetters({
+  //     user: "user"
+  //   })
+  // }
+};
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
@@ -24,6 +34,8 @@ html * {
   padding: 0;
   padding: 0;
 }
 }
 .wrapper {
 .wrapper {
+  position: relative;
+  left: 25%;
   justify-content: center;
   justify-content: center;
   background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="72" viewBox="0 0 36 72"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="white" fill-opacity="0.5" %3E%3Cpath d="M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
   background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="36" height="72" viewBox="0 0 36 72"%3E%3Cg fill-rule="evenodd"%3E%3Cg fill="white" fill-opacity="0.5" %3E%3Cpath d="M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
 }
 }

pages/login/index.vue

@@ -16,6 +16,7 @@
           class="fadeIn second"
           class="fadeIn second"
           name="login"
           name="login"
           placeholder="login"
           placeholder="login"
+          v-model="user.email"
         />
         />
         <input
         <input
           type="text"
           type="text"
@@ -23,8 +24,9 @@
           class="fadeIn third"
           class="fadeIn third"
           name="login"
           name="login"
           placeholder="password"
           placeholder="password"
+          v-model="user.password"
         />
         />
-        <input type="submit" class="fadeIn fourth" value="Log In" />
+        <input type="submit" class="fadeIn fourth" @click.prevent="logIn()" value="Log In" />
       </form>
       </form>
 
 
       <!-- Remind Passowrd -->
       <!-- Remind Passowrd -->
@@ -36,7 +38,32 @@
 </template>
 </template>
 
 
 <script>
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      user: {
+        email: '',
+        password: ''
+      }
+    }
+  },
+  methods: {
+    logIn: function() {
+      this.$store.dispatch('signInWithEmail', {
+        email: this.user.email,
+        password: this.user.password
+      })
+      .then(res => {
+        this.user.email = "";
+        this.user.password = "";
+        this.$router.push('/');
+      })
+      .catch(err => {
+        alert(err);
+      });
+    }
+  }
+};
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>

pages/regirst/index.vue

@@ -9,7 +9,7 @@
       <!-- 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(submitForm)">
+        <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">
@@ -68,6 +68,7 @@ export default {
       this.user[data.type] = data.value;
       this.user[data.type] = data.value;
       console.log(data)
       console.log(data)
     },
     },
+    // import data
     submitForm: function () {
     submitForm: function () {
       axios
       axios
         .post(this.urlFireBase + "/user.json", this.user)
         .post(this.urlFireBase + "/user.json", this.user)
@@ -78,6 +79,22 @@ export default {
           console.log(error);
           console.log(error);
         });
         });
     },
     },
+    // regist
+    userSignUp: function(err) {
+      this.$store
+        .dispatch("signUp", {
+          email: this.user.nameLogin,
+          password: this.user.password,
+        })
+        .then(() => {
+          this.email = "";
+          this.password = "";
+          //if you wanted to redirect after sign id you'd that here with this.$router.push('/pagename')
+        })
+        .catch((err) => {
+          alert(err.message);
+        });
+    }
   },
   },
   components: {
   components: {
     ValidationObserver,
     ValidationObserver,

plugins/README.md

-# PLUGINS
-
-This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/plugins
-
-**This directory is not required, you can delete it if you don't want to use it.**
-

plugins/fireauth.js

+import { auth } from '~/plugins/firebase.js'
+
+export default (context) => {
+    const { store } = context
+
+    return new Promise((resolve, reject) => {
+        auth.onAuthStateChanged(user => {
+
+            // here is you would want to build your user
+            // object, but for now, we'll just take everything
+            store.commit('setUser', user)
+            resolve()
+        })
+    })
+}
\ No newline at end of file

plugins/firebase.js

+import firebase from 'firebase/app'
+import 'firebase/auth'
+
+try {
+    var firebaseConfig = {
+        apiKey: "AIzaSyBc1-m1CgIxytlta3Bt2oSe7Db-4ihf0ko",
+        authDomain: "vue-chat-c1525.firebaseapp.com",
+        databaseURL: "https://vue-chat-c1525-default-rtdb.firebaseio.com",
+        projectId: "vue-chat-c1525",
+        storageBucket: "vue-chat-c1525.appspot.com",
+        messagingSenderId: "171135580106",
+        appId: "1:171135580106:web:48b3e10ba3943bc4f68133",
+        measurementId: "G-TJTTSL35QS"
+    };
+    // Initialize Firebase
+    firebase.initializeApp(firebaseConfig);
+} catch (err) {
+    if (!/already exists/.test(err.message)) {
+        console.error('Firebase initialization error raised', err.stack);
+    }
+}
+export const auth = firebase.auth()
+export default firebase
\ No newline at end of file

store/README.md

-# STORE
-
-This directory contains your Vuex Store files.
-Vuex Store option is implemented in the Nuxt.js framework.
-Creating a index.js file in this directory activate the option in the framework automatically.
-
-More information about the usage of this directory in the documentation:
-https://nuxtjs.org/guide/vuex-store
-
-**This directory is not required, you can delete it if you don't want to use it.**
-

store/index.js

+import Vuex from 'vuex'
+import { auth } from '~/plugins/firebase.js';
+// thư viện hỗ trợ lưu data vào store khi refresh page
+import createPersistedState from "vuex-persistedstate";
+
+const createStore = () => {
+    return new Vuex.Store({
+        state: {
+            user: '',
+        },
+
+        getters: {
+            user(state) {
+                return state.user
+            },
+
+            isAuthenticated(state) {
+                return !!state.user
+            }
+        },
+
+        mutations: {
+            setUser(state, payload) {
+                state.user = payload;
+            }
+        },
+
+        actions: {
+            signUp({ commit }, { email, password }) {
+                return auth.createUserWithEmailAndPassword(email, password);
+            },
+
+            signInWithEmail({ commit }, { email, password }) {
+                return auth.signInWithEmailAndPassword(email, password);
+            },
+
+            signOut(state) {
+                return auth.signOut();
+            }
+        },
+
+        plugins: [createPersistedState()],
+    })
+}
+
+export default createStore
\ No newline at end of file