import Vue from 'vue'
import firebase from 'firebase'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import SignUp from '../views/SignUp.vue'

Vue.use(Router)
Vue.use(BootstrapVue)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/',
      name: 'login',
      component: Login

    },
    {
      path: '/sign-up',
      name: 'sign up',
      component: SignUp
    },
    {
      path: '*',
      redirect: '/login'
    }
  ]
})

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)

  if (requiresAuth && !currentUser) next('login')
  else if (!requiresAuth && currentUser) next('home')
  else next()
})

export default router

import Vue from 'vue'
import firebase from 'firebase'
import App from './App'
import router from './router'

Vue.config.productionTip = false

// Initialize Firebase
let app = ''
const config = {
  apiKey: 'AIzaSyDE0IVgepdhCOJLjcunmLN35AJ-6e0X0ak',
  authDomain: 'repti-care-90f1d.firebaseapp.com',
  databaseURL: 'https://repti-care-90f1d.firebaseio.com',
  projectId: 'repti-care-90f1d',
  storageBucket: 'repti-care-90f1d.appspot.com',
  messagingSenderId: '551446965940'
}

firebase.initializeApp(config)

firebase.auth().onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')
  }
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

<template>
      <div class="login">
         <form action="" class="form-signin">
        <h3 class="heading">Sign In</h3>
        <input type="text" placeholder="Email" v-model="email" class="form-control"><br>
        <input type="password" placeholder="Password" v-model="password" class="form-control"><br>
        <button @click="login" class="btn btn-lg btn-primary btn-block">Log In</button>
        <p>You don't have an account? You can <router-link to="/sign-up">create one here</router-link></p>
        </form>
      </div>
    </template>


    <script>
    import firebase from 'firebase'

    export default {
      name: 'login',
      data() {
        return {
        email: '',
        password: ''
        }
      },
      methods: {
        login: function () {
         firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
           function(user) {
             alert('Welcome!')
           },
           function (error) {
            alert(`Ooops ${error}`)
           }
         )
        }
      }
    }
    </script>

<template>
  <div class="sign-up">
    <form action="" class="form-signin">
    <h3 class="heading">Create a new account</h3>
    <input type="text" placeholder="Email" v-model="email" class="form-control"><br>
    <input type="password" placeholder="Password" v-model="password" class="form-control"><br>
    <button @click="signUp" class="btn btn-lg btn-primary btn-block">Sign Up</button>
    <span>Already have an account?<router-link to="/login"> Sign in Here</router-link></span>
    </form>
  </div>
</template>

<script>
import firebase from 'firebase'
export default {
  name: 'signUp',
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    signUp: function () {
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password).then(function(user) {
        alert('Your account has been created!')
      },
      function (error) {
        alert(`Ooops ${error.message}`)
      }
      )
    }
  }
}
</script>