<template>
    <div>
        <QCard-section>
            <QIcon
                name="check"
                class="block q-mx-auto text-accent"
                style="font-size: 120px"
            />
        </QCard-section>
        <QCard-section>
            <QForm @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">
                    <QInput
                        v-model="password"
                        :label="$t('password')"
                        :type="showPwd ? 'password' : 'text'"
                        autofocus
                        hint=""
                        filled
                    >
                        <template v-slot:append>
                            <QIcon
                                :name="
                                    showPwd ? 'visibility_off' : 'visibility'
                                "
                                class="cursor-pointer"
                                @click="showPwd = !showPwd"
                            />
                        </template>
                    </QInput>
                    <QInput
                        v-model="repeatPassword"
                        :label="$t('repeatPassword')"
                        :type="showRpPwd ? 'password' : 'text'"
                        :rules="[
                            value =>
                                value == password || $t('repeatPasswordError')
                        ]"
                        hint=""
                        filled
                    >
                        <template v-slot:append>
                            <QIcon
                                :name="
                                    showRpPwd ? 'visibility_off' : 'visibility'
                                "
                                class="cursor-pointer"
                                @click="showRpPwd = !showRpPwd"
                            />
                        </template>
                    </QInput>
                </div>
                <div>
                    <QBtn
                        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>
            </QForm>
        </QCard-section>
    </div>
</template>

<script>
export default {
    name: 'VnRegister',
    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>
