<template>
  <div id="landing">
    <form class="pure-form pure-form-stacked" @submit.prevent="checkCode">
      <fieldset class="pure-group">
        <input type="text" class="pure-input-1-2" v-model="code.value" :placeholder="$t('landing.invitePlaceholder')" autofocus>
      </fieldset>

      <button type="submit" class="pure-button pure-button-primary" :disabled="code.value.trim() == '' || code.checking">{{ $t(code.checking ? 'landing.inviteButtonChecking' : 'landing.inviteButton') }} <span v-if="code.checking"><i class="fas fa-spinner fa-pulse"></i></span></button>
    </form>
  </div>
</template>

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

export default {
  props: [
    'codeParam'
  ],

  data () {
    return {
      code: {
        value: '',
        checking: false
      }
    }
  },

  created()
  {
    var self = this;
    if (self.codeParam)
    {
      self.code.value = self.codeParam;
      self.checkCode();
    }
  },

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

      self.code.checking = true;

      axios.post('/token/upload', {
        code: self.code.value
      })
      .then((response) =>
      {
        shared.token = response.data;
        self.$router.push({ path: '/u/' + self.code.value });
      })
      .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.code.checking = false;
      });
    }
  }
}
</script>

<style lang="scss">
@import '../../../node_modules/uppy/src/scss/uppy.scss';


#landing
{
  text-align: center;

  input
  {
    display: inline-block;
  }

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