<template>
  <div class="text-center">
    <q-card-section>
      <q-icon
        name="contact_support"
        class="block q-mx-auto text-accent"
        style="font-size: 120px;"
      />
    </q-card-section>
    <q-card-section>
      <q-form @submit="onSend" class="q-gutter-y-md text-grey-8">
        <div class="text-h5">
          <div>
            {{$t('dontWorry')}}
          </div>
          <div>
            {{$t('fillData')}}
          </div>
        </div>
        <q-input
          v-model="email"
          :label="$t('email')"
          :rules="[ val => !!val || $t('inputEmail')]"
          autofocus
          filled
        />
        <div>
          {{$t('weSendEmail')}}
        </div>
        <div>
          <q-btn
            type="submit"
            :label="$t('send')"
            class="full-width"
            color="black"
          />
          <div class="text-center q-mt-xs">
            <router-link to="/login" class="link">
              {{$t('return')}}
            </router-link>
          </div>
        </div>
      </q-form>
    </q-card-section>
  </div>
</template>

<style lang="stylus" scoped>
  #image
    height 190px
</style>

<script>
export default {
  name: 'RememberPasword',
  data () {
    return {
      email: ''
    }
  },
  methods: {
    async onSend () {
      const params = {
        email: this.email
      }
      await this.$axios.post('users/reset', params)
      this.$q.notify({
        message: this.$t('weHaveSentEmailToRecover'),
        type: 'positive'
      })
      this.$router.push('/login')
    }
  }
}
</script>
