145 lines
4.4 KiB
Vue
145 lines
4.4 KiB
Vue
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue'
|
|
import Swal from 'sweetalert2';
|
|
import axios from "axios";
|
|
import { getSiteName } from '@/hesabixConfig';
|
|
export default defineComponent({
|
|
name: "active_account",
|
|
data() {
|
|
const self = this;
|
|
return {
|
|
dialog: false,
|
|
dialogSuccess: false,
|
|
loading: false,
|
|
disableSend: true,
|
|
code: '',
|
|
user: {
|
|
mobile: '',
|
|
email: '',
|
|
},
|
|
siteName: '',
|
|
response: {
|
|
code: '',
|
|
message: '',
|
|
Success: false,
|
|
data: {
|
|
id: ''
|
|
}
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
code(cval, bval) {
|
|
if (Object.keys(cval).length == 6) {
|
|
this.disableSend = ref(false);
|
|
}
|
|
else {
|
|
this.disableSend = ref(true);
|
|
}
|
|
}
|
|
},
|
|
async created() {
|
|
this.siteName = await getSiteName();
|
|
},
|
|
methods: {
|
|
onResendCodeClick() {
|
|
axios.post('/api/user/register/resend-active-code', { 'mobile': this.$route.params.id }).then((response: any) => {
|
|
if (response.data.Success == true) {
|
|
Swal.fire({
|
|
text: this.$t('user.resendCode'),
|
|
confirmButtonText: this.$t('dialog.ok'),
|
|
icon: 'success'
|
|
});
|
|
}
|
|
else {
|
|
Swal.fire({
|
|
text: response.data.message,
|
|
confirmButtonText: this.$t('dialog.ok'),
|
|
icon: 'error'
|
|
});
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
submit() {
|
|
this.loading = true;
|
|
axios.post('/api/user/active/account', {
|
|
mobile: this.$route.params.id,
|
|
code: this.code
|
|
}).then((response: any) => {
|
|
if (response.data.Success == false) {
|
|
this.response = response.data;
|
|
this.dialog = true;
|
|
}
|
|
else {
|
|
this.response = response.data;
|
|
this.dialogSuccess = true;
|
|
}
|
|
this.loading = false;
|
|
});
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<v-container>
|
|
<v-row class="d-flex justify-center">
|
|
<v-col md="5">
|
|
<v-card :loading="loading ? 'blue' : null" :disabled="loading" :title="siteName"
|
|
:subtitle="$t('user.active_account')">
|
|
<v-card-text>
|
|
کد ارسالی از طریق پیامک و یا پست الکترونیکی دریافتی خود را در کادر زیر وارد نمایید.
|
|
</v-card-text>
|
|
<v-form ref="form" :disabled="loading" fast-fail @submit.prevent="submit()">
|
|
<v-card-text>
|
|
<v-otp-input focus-all v-model="code" style="direction: ltr"></v-otp-input>
|
|
<v-row>
|
|
<v-col class="my-2 mx-4">
|
|
<v-icon icon="mdi-phone" />
|
|
<b>
|
|
{{ $t('user.your_phone_number', { 'mobile': $route.params.id }) }}
|
|
</b>
|
|
<v-btn class="float-end" color="indigo" @click="onResendCodeClick()">
|
|
<span>{{ $t('user.send_again') }}</span>
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
<v-btn :disabled="disableSend" :loading="loading" block class="text-none mb-4" color="indigo-darken-3"
|
|
size="x-large" variant="flat" prepend-icon="mdi-send" type="submit">
|
|
{{ $t('dialog.active_account') }}
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-form>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
<div v-if="dialog" class="text-center">
|
|
<v-dialog v-model="dialog" max-width="500" persistent>
|
|
<v-card color="dangerLight" prepend-icon="mdi-close-octagon " :title="$t('dialog.error')"
|
|
:text="response.message">
|
|
<template v-slot:actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" :text="$t('dialog.ok')" variant="flat"
|
|
@click="dialog = false; loading = false; code = ''" />
|
|
</template>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
<div v-if="dialogSuccess" class="text-center">
|
|
<v-dialog v-model="dialogSuccess" max-width="500" persistent>
|
|
<v-card color="successLight" prepend-icon="mdi-check-bold " :title="$t('dialog.title')" :text="response.message">
|
|
<template v-slot:actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" :text="$t('dialog.ok')" variant="flat"
|
|
@click="dialog = false; loading = false; $router.push({ name: 'user_login' })" />
|
|
</template>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style> |