import Vue from 'vue'
import Router from 'vue-router'
import addPost from '@/components/addPost'
import showPost from '@/components/showPost'
import Login from '@/components/Login'
import SignUp from '@/components/SignUp'
import firebase from 'firebase'


Vue.use(Router)

const router = new Router({
    mode: 'history',
  routes: [
    {
      path: '/',
      name: 'app',
      component: showPost
    },
    {
      path: '/add',
      component: addPost,
      meta: {
        requiresAuth: true
      }
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/signup',
        name: 'SignUp',
        component: SignUp
    }
  ]
})

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

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


export default router

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

Vue.use(VueFire)

Vue.config.productionTip = false

let app;

firebase.auth().onAuthStateChanged(function(user) {

    if(!app) {
        app = new Vue({
          el: '#app',
          router,
          template: '<App/>',
          components: { App }
        })
    }

})

<template>
  <div id="app">
    <app-header></app-header>
    <router-view></router-view>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
import header from './components/header'
import firebase from 'firebase'

export default {
  name: 'app',
  components: {
     'app-header': header
  },
  methods: {
    logout: function() {
      firebase.auth().signOut().then(() => {
        this.$router.replace('login')
      })
    }
  }
}

</script>

import firebase from 'firebase'

import db from '../firebaseInit'
const postRef = db.ref('posts')

export default {
  name: 'login',
  data: function() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    signIn: function() {
      firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
        (user) => {
          this.$router.replace('/')
        },
        (err) => {
          alert('Oops ' + err.message)
        }
      );
    }
  }
}
</script>

<template>
  <div id="add-blog">
      <h2>Add a New Post</h2>
      <form v-if="!submitted">
        <label>Title:</label>
        <input type="text" v-model="newPost.title" required />
        <p>{{ getDate }}</p>
        <label for="">Content:</label>
        <textarea v-model.trim="newPost.content"></textarea>
        <div id="checkboxes">
          <p>Categories:</p>
          <label>Vue.js</label>
          <input type="checkbox" value="vue" v-model="newPost.categories" />
          <label>CSS Magic</label>
          <input type="checkbox" value="css" v-model="newPost.categories" />
        </div>
        <label>Author:</label>
        <select v-model="newPost.author">
          <option v-for="author in authors">{{ author }}</option>
        </select>
        <button @click.prevent="addPost">Add Post</button>
      </form>
      <div v-if="submitted">
        <p>Congraturation!</p>
      </div>
      <div id="preview">
        <h3>Preview Post</h3>
        <h4>Title {{ newPost.title }}</h4>
        <h4>Content </h4>
        <p style="white-space: pre">{{ newPost.content }}</p>
        <ul>
          <li v-for="category in newPost.categories">{{ category }}</li>
        </ul>
        <p>{{ newPost.author }}</p>
      </div>
    </div>
</template>

<script>

import db from '../firebaseInit'
const postRef = db.ref('posts')

export default {
  data() {
    return {
      newPost: {
        date: '',
        title: '',
        author: '',
        content: '',
        categories: []
      },
      authors: ['Naeun', 'Raphael'],
      submitted: false,
      items: []
    }
  },
  methods: {
    addPost: function() {
      postRef.push(this.newPost)
      this.newPost.date = '',
      this.newPost.title = '',
      this.newPost.author = '',
      this.newPost.content = '',
      this.newPost.categories = ''
    },
    removePost: function() {
      postRef.child(post['.key']).remove()
    }
  },
  computed: {
    getDate: function() {
      const toTwoDigits = num => num < 10 ? '0' + num : num;
      let today = new Date();
      let year = today.getFullYear();
      let month = toTwoDigits(today.getMonth() + 1);
      let day = toTwoDigits(today.getDate());
      return this.newPost.date = `${year}-${month}-${day}`;
    }
  }
}

</script>