<template>
  <div class="container">
    <div class="row">
      <div class="col-xs-6">
        <div class="page-header">
          <h1>Register</h1>
        </div>
        <p class="lead">Please register here.</p>
        <form method="post">
          <div class="form-group">
            <label for="username">Username</label>
            <input v-model="userForm.username" type="text" class="form-control" placeholder="Username">
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input v-model="userForm.password" type="password" class="form-control" placeholder="Password">
          </div>
          <button v-on:click="submit" type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
      <div class="col-xs-6">
        <div class="page-header">
          <h1>Login</h1>
        </div>
        <p class="lead">Please login here.</p>
        <form method="post">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" class="form-control" id="username" placeholder="Username">
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" placeholder="Password">
          </div>
          <button id="login-submit" type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  let Vue = require('vue');

  let userForm = {
    username: '',
    password: ''
  };

  module.exports = {
    data: function () {
      return {
        userForm: userForm
      }
    },
    methods: {
      submit: function () {

        console.log(userForm.username);

        Vue.$http.get('http://httpbin.org/ip', function (data) {
          // set data on vm
          Vue.$set('origin', data)
          console.log(data);

        }).error(function (data, status, request) {
          // handle er
        })

      }
    }
  }
</script>