somewhere
This commit is contained in:
Swift
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<user-dashboard-container page-class="verify" panel-title="تایید اطلاعات">
|
||||
<el-alert
|
||||
v-if="!user.confirmed"
|
||||
title="ثبت نام شما هنوز نهایی نشده است. چنانچه تا 24 ساعت پس از زمان ثبت نام اولیه اطلاعات خود را تایید نکنید اطلاعات حساب شما از سیستم پاک خواهد شد."
|
||||
class="mb-3"
|
||||
type="warning"
|
||||
>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
v-if="!user.email_confirmed"
|
||||
title="کاربر گرامی چنانچه قادر به مشاهده کد تایید در صندوق ورودی ایمیل خود نیستید پوشه spam را چک کنید"
|
||||
class="mb-3"
|
||||
type="warning"
|
||||
>
|
||||
</el-alert>
|
||||
<div class="row">
|
||||
<div v-if="!user.mobile_confirmed" class="col-12 col-lg">
|
||||
<form class="form form_3" style="margin-bottom: 50px" @submit.prevent="verify('mobile')">
|
||||
<div class="formRow">
|
||||
<label class="verify-labels" for="mobileConfirmationKey">
|
||||
<b>شماره: </b>
|
||||
<b>{{ user.mobile_number }}</b>
|
||||
<span @click="showModal('mobile')">(تغییر شماره)</span>
|
||||
<span v-if="mobileResendCountDown < 1" @click="resend('mobile')">(ارسال مجدد کد)</span>
|
||||
<span v-else class="countdown">( ارسال مجدد کد {{ mobileResendCountDown }} ثانیه دیگر)</span>
|
||||
</label>
|
||||
<input
|
||||
id="mobileConfirmationKey"
|
||||
v-model="mobileConfirmationKey"
|
||||
type="text"
|
||||
name="mobileConfirmationKey"
|
||||
placeholder="کد امنیتی پیامک شده"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="btnRow">
|
||||
<el-button
|
||||
class="btn btn-primary custom-el-button"
|
||||
type="primary"
|
||||
native-type="submit"
|
||||
:loading="verifyingMobile"
|
||||
:disabled="mobileConfirmationKey.length < 6"
|
||||
>
|
||||
تایید شماره
|
||||
</el-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div v-if="!user.email_confirmed" class="col-12 col-lg">
|
||||
<form class="form form_3" style="margin-bottom: 50px" @submit.prevent="verify('email')">
|
||||
<div class="formRow">
|
||||
<label class="verify-labels" for="emailConfirmationKey">
|
||||
<b>ایمیل: </b>
|
||||
<b>{{ user.email }}</b>
|
||||
<span @click="showModal('email')">(تغییر ایمیل)</span>
|
||||
<span v-if="emailResendCountDown < 1" @click="resend('email')">(ارسال مجدد کد)</span>
|
||||
<span v-else class="countdown">( ارسال مجدد کد {{ emailResendCountDown }} ثانیه دیگر)</span>
|
||||
</label>
|
||||
<input
|
||||
id="emailConfirmationKey"
|
||||
v-model="emailConfirmationKey"
|
||||
type="text"
|
||||
name="emailConfirmationKey"
|
||||
placeholder="کد امنیتی ایمیل شده"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="btnRow">
|
||||
<el-button
|
||||
class="btn btn-primary custom-el-button"
|
||||
type="primary"
|
||||
native-type="submit"
|
||||
:loading="verifyingEmail"
|
||||
:disabled="emailConfirmationKey.length < 6"
|
||||
>
|
||||
تایید ایمیل
|
||||
</el-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<template #body>
|
||||
<ChangeEmailModal :key="modalKey" :show="modalVisible" :type="modalType" @closeModal="closeModal" />
|
||||
</template>
|
||||
</user-dashboard-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AccountVerify',
|
||||
layout: 'user',
|
||||
data() {
|
||||
return {
|
||||
emailConfirmationKey: '',
|
||||
mobileConfirmationKey: '',
|
||||
verifyingEmail: false,
|
||||
verifyingMobile: false,
|
||||
currentTime: Date.now(),
|
||||
mobileResendTime: 0,
|
||||
emailResendTime: 0,
|
||||
modalKey: 0,
|
||||
modalType: '',
|
||||
modalVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
user() {
|
||||
return this.$auth.user
|
||||
},
|
||||
emailResendCountDown() {
|
||||
const timer = 59
|
||||
const secondsPassed = Math.floor((this.currentTime - this.emailResendTime) / 1000)
|
||||
const remainSeconds = timer - secondsPassed
|
||||
if (remainSeconds > 0) return remainSeconds
|
||||
else return 0
|
||||
},
|
||||
mobileResendCountDown() {
|
||||
const timer = 59
|
||||
const secondsPassed = Math.floor((this.currentTime - this.mobileResendTime) / 1000)
|
||||
const remainSeconds = timer - secondsPassed
|
||||
if (remainSeconds > 0) return remainSeconds
|
||||
else return 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// fetch countdown data from localstorga
|
||||
this.mobileResendTime = +localStorage.getItem('mobileResendTime')
|
||||
this.emailResendTime = +localStorage.getItem('emailResendTime')
|
||||
|
||||
// update current time
|
||||
setInterval(() => (this.currentTime = Date.now()), 1000)
|
||||
},
|
||||
methods: {
|
||||
showModal(type) {
|
||||
this.modalType = type
|
||||
this.modalVisible = true
|
||||
},
|
||||
closeModal() {
|
||||
this.modalType = ''
|
||||
this.modalVisible = false
|
||||
this.modalKey = Math.random()
|
||||
},
|
||||
async verify(type) {
|
||||
try {
|
||||
let res
|
||||
if (type === 'email') {
|
||||
this.verifyingEmail = true
|
||||
res = await this.$axios.put('/api/user/confirmEmail', { verificationKey: this.emailConfirmationKey })
|
||||
this.verifyingEmail = false
|
||||
}
|
||||
|
||||
if (type === 'mobile') {
|
||||
this.verifyingMobile = true
|
||||
res = await this.$axios.put('/api/user/confirmMobile', { verificationKey: this.mobileConfirmationKey })
|
||||
this.verifyingMobile = false
|
||||
}
|
||||
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.data.message
|
||||
})
|
||||
await this.$auth.fetchUser()
|
||||
if (this.user.email_confirmed && this.user.mobile_confirmed) {
|
||||
this.$router.push({ name: 'account' })
|
||||
}
|
||||
} catch (err) {
|
||||
if (err.config.url === '/api/user/confirmEmail') this.verifyingEmail = false
|
||||
if (err.config.url === '/api/user/confirmMobile') this.verifyingMobile = false
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: err.response.data.message
|
||||
})
|
||||
}
|
||||
},
|
||||
async resend(type) {
|
||||
try {
|
||||
const thisTime = Date.now()
|
||||
let res
|
||||
if (type === 'email') {
|
||||
this.emailResendTime = thisTime
|
||||
localStorage.setItem('emailResendTime', thisTime)
|
||||
res = await this.$axios.post('/api/user/resendEmailConfirmation')
|
||||
}
|
||||
if (type === 'mobile') {
|
||||
this.mobileResendTime = thisTime
|
||||
localStorage.setItem('mobileResendTime', thisTime)
|
||||
res = await this.$axios.post('/api/user/resendMobileConfirmation')
|
||||
}
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.data.message
|
||||
})
|
||||
} catch (err) {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'مشکلی در ارسال مجدد کد تایید پیش آمده'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user