---
title: Sign In
type: page
---

<style>
  html,
  body {
    height: 100%;
  }
  body {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
  }
  .app {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
  }
  .form-signin .checkbox {
    font-weight: 400;
  }
  .form-signin .form-control {
    position: relative;
    box-sizing: border-box;
    height: auto;
    padding: 10px;
    font-size: 16px;
  }
  .form-signin .form-control:focus {
    z-index: 2;
  }
  .form-signin input[type='email'] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .form-signin input[type='password'] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
</style>

<div class="app">
  <form class="form-signin text-center" @submit="submit($event)">
    <label for="inputEmail" class="sr-only">Email address</label>
    <input
      type="email"
      id="inputEmail"
      class="form-control"
      placeholder="Email address"
      required
      autofocus
      v-model="email"
    />
    <br />
    <button class="btn btn-lg btn-primary btn-block" type="submit">
      Sign in
    </button>
  </form>
</div>

<script src="/axios.js"></script>
<script src="/vue.js"></script>
<script src="/messages.js"></script>
<script>
  var app = new Vue({
    data: {
      email: ''
    },
    methods: {
      submit: function (ev) {
        var _this = this;
        if (ev) {
          ev.preventDefault();
        }
        axios
          .post('/api/authentication/signin', {
            email: _this.email
          })
          .then(function (response) {})
          .catch(function (error) {
            console.log(_this.email);
            window.postMessage('Something went wrong. Please try again.');
          });
      }
    }
  });
  var token = window.localStorage.getItem('token');
  if (token) {
    axios
      .get('/api/authentication/me', {
        headers: {
          Authorization: 'Bearer ' + token
        }
      })
      .then(function (response) {
        window.location.href = '/';
      })
      .catch(function (error) {
        window.localStorage.removeItem('token');
        app.$mount('.app');
      });
  } else {
    app.$mount('.app');
  }
</script>