<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="//unpkg.com/vue-router/dist/vue-router.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <div id="app">
      <p><router-link to="/about">About</router-link></p>
      <p><router-link v-if="!logged" to="/login">Login</router-link></P>
      <p><router-link v-if="logged" to="/logout">Logout</router-link></p>
      <p><router-link v-if="logged" to="/content0">Content0</router-link></p>
      <p><router-link v-if="logged" to="/content0">Content0</router-link></p>
      <p><router-link v-if="logged" to="/content0">Content0</router-link></p>
      <p><router-link v-if="logged" to="/content0">Content0</router-link></p>
      <router-view v-bind:logged="logged"></router-view>
    </div>
    <script src="script.js"></script>
  </body>
</html>





const About = { 
  template: '<div><h1>About</h1>id: admin<br>pass: pass</div>'
}
const Content0 = {
  props: ['logged'],
  template: '<div><h1>Content0</h1>logged: {{ logged }}</div>'
}
const Login = {
  template: '<div>id:<input type="text" v-model="id"><br>pass:<input type="text" v-model="pass"><br><button v-on:click="login">Login</button></div>',
  data: {
    id: '',
    pass: '',
  },
  methods: {
    login: function() {
      if (this.id == "admin" && this.pass == "pass")
      {
        app.logged = true
        router.push('/')
      }
    }
  }
}
const Logout = {
  template: '<button v-on:click="logout">Logout</button>',
  methods: {
    logout: function() {
      router.push('/')
      app.logged = false
    }
  }
}
const routes = [{
  path: '/login',
  component: Login 
}, {
  path: '/logout', 
  component: Logout 
}, {
  path: '/about',
  component: About
}, {
  path: '/content0',
  component: Content0
}]
const router = new VueRouter({
  routes
})
const app = new Vue({
  el: '#app',
  router,
  data: {
    logged: false,
    id: '',
    pass: '',
  },
})



/* Styles go here */