<template>
  <div id="container">
    <div class="content">
      <div id="login">
        <div class="logo">
          <img src="/images/logo.png">
        </div>

        <form class="pure-form pure-form-stacked" @submit.prevent="login">
          <fieldset class="pure-group">
            <input type="text" class="pure-input-1-2" v-model="username" :placeholder="$t('admin.login.usernamePlaceholder')" autofocus>
            <input type="password" class="pure-input-1-2" v-model="password" :placeholder="$t('admin.login.passwordPlaceholder')">
          </fieldset>

          <button type="submit" class="pure-button pure-button-primary" :disabled="username.trim() == '' || password.trim() == '' || checking">{{ $t(checking ? 'admin.login.buttonChecking' : 'admin.login.button') }} <span v-if="checking"><i class="fas fa-spinner fa-pulse"></i></span></button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import shared from '../../shared';

export default {
  data()
  {
    return {
      username: '',
      password: '',
      checking: false
    };
  },

  methods: {
    login()
    {
      var self = this;
      if (self.checking)
        return;

      self.checking = true;

      axios.post('/token/login', {
        username: self.username,
        password: self.password
      })
      .then((response) =>
      {
        shared.token = response.data;
        self.$router.push({ path: '/admin/uploads' });
      })
      .catch((error) =>
      {
        if (error.response && error.response.status == 403)
          shared.$emit('showNotification', self.$i18n.t('notification.invalidCode'), false);
        else
          shared.$emit('showNotification', error.message);
      })
      .then(() =>
      {
        self.checking = false;
      });
    }
  }
}
</script>

<style lang="scss">
#login
{
  text-align: center;

  input
  {
    display: inline-block;
  }

  .login
  {
    margin-top: 5em;
  }
}
</style>