<template>
  <div>
    <q-card-section>
      <q-icon
        name="check"
        class="block q-mx-auto text-accent"
        style="font-size: 120px;"
      />
    </q-card-section>
    <q-card-section>
      <q-form @submit="onRegister" ref="form" class="q-gutter-y-md">
        <div class="text-grey-8 text-h5 text-center">
          {{$t('fillData')}}
        </div>
        <div class="q-gutter-y-sm">
          <q-input
            v-model="password"
            :label="$t('password')"
            :type="showPwd ? 'password' : 'text'"
            autofocus
            hint=""
            filled>
            <template v-slot:append>
              <q-icon
                :name="showPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="showPwd = !showPwd"
              />
            </template>
          </q-input>
          <q-input
            v-model="repeatPassword"
            :label="$t('repeatPassword')"
            :type="showRpPwd ? 'password' : 'text'"
            :rules="[value => value == password || $t('repeatPasswordError')]"
            hint=""
            filled>
            <template v-slot:append>
              <q-icon
                :name="showRpPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="showRpPwd = !showRpPwd"
              />
            </template>
          </q-input>
        </div>
        <div>
          <q-btn
            type="submit"
            :label="$t('resetPassword')"
            class="full-width"
            color="primary"
          />
          <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>

<script>
export default {
  name: 'Register',
  data () {
    return {
      password: '',
      repeatPassword: '',
      showPwd: true,
      showRpPwd: true
    }
  },
  methods: {
    async onRegister () {
      const headers = {
        Authorization: this.$route.query.access_token
      }
      await this.$axios.post(`users/reset-password`, {
        newPassword: this.password
      }, { headers })

      this.$q.notify({
        message: this.$t('passwordResetSuccessfully'),
        type: 'positive'
      })
      this.$router.push('/login')
    }
  }
}
</script>
