|
@@ -64,31 +64,36 @@
|
|
|
We will send you an email( {{ resetForm.email }} )The password reset
|
|
|
email has been sent. Please go to check it
|
|
|
</div>
|
|
|
- <!-- <div class="ptc-form">
|
|
|
- <div class="ptc-form-item">
|
|
|
- <button class="ptc-button">GO</button>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
- <div v-if="step === 2" class="step ptc-inner">
|
|
|
- <h3 class="title">Recover password</h3>
|
|
|
- <div class="desc">
|
|
|
- Please set a new password for {{ resetForm.email }}. It is recommended
|
|
|
- to use a combination of numbers, letters, and characters to improve the
|
|
|
- password security level
|
|
|
- </div>
|
|
|
- <div class="ptc-form">
|
|
|
- <div class="ptc-form-item">
|
|
|
- <input
|
|
|
- v-model="resetForm.password"
|
|
|
- class="ptc-input"
|
|
|
- placeholder="6-20 digits password, case sensitive"
|
|
|
- />
|
|
|
+ <div v-else-if="step === 2" class="step ptc-inner">
|
|
|
+ <template v-if="resetStatus === 1">
|
|
|
+ <h3 class="title">Recover password</h3>
|
|
|
+ <div class="desc">
|
|
|
+ Please set a new password for {{ resetForm.email }}. It is recommended
|
|
|
+ to use a combination of numbers, letters, and characters to improve
|
|
|
+ the password security level
|
|
|
</div>
|
|
|
- <div class="ptc-form-item">
|
|
|
- <button class="ptc-button" @click="applyReset">SUBMIT</button>
|
|
|
+ <div class="ptc-form">
|
|
|
+ <div class="ptc-form-item">
|
|
|
+ <input
|
|
|
+ v-model="resetForm.password"
|
|
|
+ class="ptc-input"
|
|
|
+ placeholder="6-20 digits password, case sensitive"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="ptc-form-item">
|
|
|
+ <button class="ptc-button" @click="applyReset">SUBMIT</button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="resetStatus === -1">
|
|
|
+ <i class="icon-fail"></i>
|
|
|
+ <h3 class="title tac">The Link For Reset Your Password Has Expired</h3>
|
|
|
+ <p class="desc tac">Please Press Below Button To Retrieve New Link</p>
|
|
|
+ <button class="ptc-button mgt96" @click="refresh">
|
|
|
+ RESET PASSWORD
|
|
|
+ </button>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
<div v-else-if="step === 3" class="step ptc-inner">
|
|
|
<i class="icon-success"></i>
|
|
@@ -101,12 +106,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { reactive, ref, watch } from 'vue'
|
|
|
+import { reactive, ref, watch, onMounted } from 'vue'
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
import { state } from '@/store'
|
|
|
import {
|
|
|
sendPasswordEmail,
|
|
|
resetPassword,
|
|
|
+ resetCheck,
|
|
|
changePassword,
|
|
|
} from '@/service/user'
|
|
|
import { string } from 'yup'
|
|
@@ -120,6 +126,7 @@ const router = useRouter()
|
|
|
const { query } = useRoute() as any
|
|
|
const fromPath = history.state.back
|
|
|
const step = ref(query.token ? 2 : 0)
|
|
|
+const resetStatus = ref(0)
|
|
|
const { values, handleSubmit } = useForm<ApiUser.PasswordChange.Request>({
|
|
|
schema: {
|
|
|
old_password: string().required('Please enter old password'),
|
|
@@ -136,6 +143,15 @@ const resetForm = reactive<ApiUser.PasswordReset.Request>({
|
|
|
|
|
|
state.bgWhite = true
|
|
|
|
|
|
+onMounted(() => {
|
|
|
+ if (step.value === 2) {
|
|
|
+ const { email, token } = resetForm
|
|
|
+ resetCheck({ email, token })
|
|
|
+ .then(() => (resetStatus.value = 1))
|
|
|
+ .catch(() => (resetStatus.value = -1))
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
watch(step, () => window.scrollTo(0, 0))
|
|
|
|
|
|
async function applyChange() {
|
|
@@ -168,6 +184,10 @@ async function applyReset() {
|
|
|
Toast(err.message)
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+function refresh() {
|
|
|
+ location.href = 'reset'
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
@@ -195,9 +215,15 @@ async function applyReset() {
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
+ .icon-fail,
|
|
|
.icon-success {
|
|
|
display: block;
|
|
|
margin: 0 auto 32px;
|
|
|
+ }
|
|
|
+ .icon-fail {
|
|
|
+ @include icon('@img/warn.png', 96px);
|
|
|
+ }
|
|
|
+ .icon-success {
|
|
|
@include icon('@img/success.png', 96px);
|
|
|
}
|
|
|
|