Merge pull request #11 from Ahmet-Kaplan/master

Added firebase login

package.json

@@ -16,11 +16,14 @@
     "countup.js": "^1.8.2",
     "dragula": "^3.7.2",
     "fastclick": "^1.0.6",
+    "firebase": "^4.1.3",
+    "firebaseui": "^2.2.1",
     "font-awesome": "^4.7.0",
     "gmaps": "^0.4.24",
     "highlight": "^0.2.4",
     "material-design-icons": "^3.0.1",
     "moment": "^2.15.0",
+    "promise-polyfill": "^6.0.2",
     "quasar-framework": "^0.13.2",
     "roboto-fontface": "^0.7.0",
     "vivus": "^0.4.0",

src/components/Auth.vue

@@ -0,0 +1,26 @@
+<template lang="html">
+  <div id="firebaseui-auth-container"></div>
+</template>
+
+<script>
+  import firebase from 'firebase'
+  import firebaseui from 'firebaseui'
+  export default {
+    name: 'auth',
+    mounted () {
+      var uiConfig = {
+        signInSuccessUrl: '/success',
+        signInOptions: [
+          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
+          firebase.auth.EmailAuthProvider.PROVIDER_ID
+        ]
+      }
+      var ui = new firebaseui.auth.AuthUI(firebase.auth())
+      ui.start('#firebaseui-auth-container', uiConfig)
+    }
+  }
+</script>
+
+<style lang="css">
+  
+</style>

src/components/AuthSuccess.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <h1>Signup succeeded</h1>
+    <button @click='logOut'>Log out</button>
+    <hr>
+    <img :src="photo" style='height: 120px'>
+    <br>
+    <p>{{name}}</p>
+    <p>{{email}}</p>
+    <p>{{userId}}</p>
+    <hr>
+    <pre>{{user}}</pre>
+  </div>
+</template>
+
+<script>
+  import firebase from 'firebase'
+  export default {
+    data () {
+      return {
+        photo: '',
+        userId: '',
+        name: '',
+        email: '',
+        user: {}
+      }
+    },
+    created () {
+      var vm = this
+      firebase.auth().onAuthStateChanged(function (user) {
+        if (user) {
+          vm.user = user
+          vm.name = vm.user.displayName
+          vm.email = vm.user.email
+          vm.photo = vm.user.photoURL
+          vm.userId = vm.user.uid
+        }
+      })
+    },
+    methods: {
+      logOut () {
+        firebase.auth().signOut()
+      }
+    }
+  }
+</script>

src/components/layout/drawer/drawer.vue

@@ -1,17 +1,18 @@
 <template>
   <q-drawer ref="leftDrawer" v-show="getLayoutNeeded">
     <div id="profile">
-      <img src="../img/avatar-1.svg" id="avatar" class="inline-block">
+      <img :src="photo" style='height: 80px' class="inline-block">
+      <!--img src="../img/avatar-1.svg" id="avatar" class="inline-block"--> 
       <div id="user-name">
-        <span class="text-white">Greldon</span>
+        <span class="text-white"> {{ name }} </span>
+        <hr>
+        <span class="text-white"> {{ email }} </span>
         <hr>
       </div>
       <div id="user-actions">
         <button class="bordered blue small" ><i>person</i></button>
         <button class="bordered blue small" ><i>lock</i></button>
-        <router-link to="login-one">
-          <button class="bordered blue small" ><i>exit_to_app</i></button>
-        </router-link>
+        <button class="bordered blue small" @click='logOut'><i>exit_to_app</i></button>
       </div>
     </div>
     <menu-one v-if="getMenuCollapse" :links="links"></menu-one>
@@ -28,9 +29,16 @@
   import { mapGetters } from 'vuex'
   import menuOne from './menuOne.vue'
   import menuTwo from './menuTwo.vue'
+  import firebase from 'firebase'
+  
   export default {
     data () {
       return {
+        photo: '',
+        userId: '',
+        name: '',
+        email: '',
+        user: {},
         links: {
           Dashboard: {
             routes: [
@@ -58,6 +66,23 @@
         }
       }
     },
+    created () {
+      var vm = this
+      firebase.auth().onAuthStateChanged(function (user) {
+        if (user) {
+          vm.user = user
+          vm.name = vm.user.displayName
+          vm.email = vm.user.email
+          vm.photo = vm.user.photoURL
+          vm.userId = vm.user.uid
+        }
+      })
+    },
+    methods: {
+      logOut () {
+        firebase.auth().signOut()
+      }
+    },
     computed: {
       ...mapGetters(['getLayoutNeeded', 'getMenuCollapse'])
     },

src/configs/router.js

@@ -8,27 +8,29 @@ function load (component) {
 }
 
 export default new VueRouter({
-  /*
-   * NOTE! VueRouter "history" mode DOESN'T works for Cordova builds,
-   * it is only to be used only for websites.
-   *
-   * If you decide to go with "history" mode, please also open /config/index.js
-   * and set "build.publicPath" to something other than an empty string.
-   * Example: '/' instead of current ''
-   *
-   * If switching back to default "hash" mode, don't forget to set the
-   * build publicPath back to '' so Cordova builds work again.
-   */
+    /*
+     * NOTE! VueRouter "history" mode DOESN'T works for Cordova builds,
+     * it is only to be used only for websites.
+     *
+     * If you decide to go with "history" mode, please also open /config/index.js
+     * and set "build.publicPath" to something other than an empty string.
+     * Example: '/' instead of current ''
+     *
+     * If switching back to default "hash" mode, don't forget to set the
+     * build publicPath back to '' so Cordova builds work again.
+     */
 
   routes: [
-    { path: '/', component: load('views/dashboard/one/dashboard'), meta: { name: 'Dashboard One' } },
-    { path: '/form', component: load('views/form/simpleForm/simpleForm'), meta: { name: 'Form find / edit' } },
-    { path: '/embeeded', component: load('views/form/embeeded/embeeded'), meta: { name: 'Embeeded Validations' } },
-    { path: '/advanced-form-one', component: load('views/form/advancedFormOne/advancedFormOne'), meta: { name: 'Advanced Form One' } },
-    { path: '/login-one', component: load('views/login/login-one'), meta: { name: 'Login One' } },
-    { path: '/pricing', component: load('views/pricing/pricing'), meta: { name: 'Pricing' } },
-    { path: '/drag-and-drop', component: load('views/dragAndDrop/dragAndDrop'), meta: { name: 'Drag and Drop' } },
-    { path: '/server-side-data-table', component: load('views/serverSideDataTable/serverSideDataTable'), meta: { name: 'Server Side Data Table' } },
-    { path: '*', component: load('Error404') } // Not found
+        { path: '/', component: load('views/dashboard/one/dashboard'), meta: { name: 'Dashboard One' } },
+        { path: '/auth', component: load('Auth'), meta: { name: 'Form Login' } },
+        { path: '/success', component: load('AuthSuccess'), meta: { name: 'Form Profile' } },
+        { path: '/form', component: load('views/form/simpleForm/simpleForm'), meta: { name: 'Form find / edit' } },
+        { path: '/embeeded', component: load('views/form/embeeded/embeeded'), meta: { name: 'Embeeded Validations' } },
+        { path: '/advanced-form-one', component: load('views/form/advancedFormOne/advancedFormOne'), meta: { name: 'Advanced Form One' } },
+        { path: '/login-one', component: load('views/login/login-one'), meta: { name: 'Login One' } },
+        { path: '/pricing', component: load('views/pricing/pricing'), meta: { name: 'Pricing' } },
+        { path: '/drag-and-drop', component: load('views/dragAndDrop/dragAndDrop'), meta: { name: 'Drag and Drop' } },
+        { path: '/server-side-data-table', component: load('views/serverSideDataTable/serverSideDataTable'), meta: { name: 'Server Side Data Table' } },
+        { path: '*', component: load('Error404') } // Not found
   ]
 })

src/helpers/firebaseConfig.js

@@ -0,0 +1,8 @@
+export const config = {
+  apiKey: 'AIzaSyAtAQsA7-max7T6WWK0Co079ew2mWp6kn8',
+  authDomain: 'triphin-ccbdb.firebaseapp.com',
+  databaseURL: 'https://triphin-ccbdb.firebaseio.com',
+  projectId: 'triphin-ccbdb',
+  storageBucket: 'triphin-ccbdb.appspot.com',
+  messagingSenderId: '395196543424'
+}

src/index.html

@@ -1,17 +1,21 @@
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
     <meta charset="utf-8">
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 
     <title>Quasar Admin Examples</title>
     <link rel="shortcut icon" type="image/x-icon" href="statics/favicon.ico">
-  </head>
-  <body>
+    <link type="text/css" rel="stylesheet" href="statics/firebaseui.css" />
+</head>
+
+<body>
     <div id="q-app"></div>
     <!-- built files will be auto injected -->
     <script src="https://maps.google.com/maps/api/js?key=AIzaSyAYCzEZ0tKmY_SeTJJ9aBDe4wyk68irIwM"></script>
-  </body>
-</html>
+</body>
+
+</html>

src/main.js

@@ -14,18 +14,41 @@ import axios from 'configs/axios'
 import router from 'configs/router'
 import store from './configs/store'
 
+import VueRouter from 'vue-router'
+import firebase from 'firebase'
+
+import {
+  config
+} from './helpers/firebaseConfig'
+
 import 'font-awesome/css/font-awesome.css'
 import 'highlight/lib/vendor/highlight.js/styles/default.css'
 import 'dragula/dist/dragula.css'
 
 Vue.use(Vuelidate)
 Vue.use(Quasar) // Install Quasar Framework
 Vue.use(axios)
+Vue.use(VueRouter)
 
 Quasar.start(() => {
   /* eslint-disable no-new */
   new Vue({
     el: '#q-app',
+    created () {
+      firebase.initializeApp(config)
+      firebase.auth().onAuthStateChanged((user) => {
+        if (user) {
+          this.$store.state.user = this.$firebase.auth().currentUser
+          this.$router.push('/success')
+        }
+        else {
+          this.$store.state.user = null
+          if (this.$route.path !== '/auth') {
+            this.$router.push('/auth')
+          }
+        }
+      })
+    },
     router,
     store,
     render: h => h(require('./App'))