123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- <template>
- <div class="p-password">
- <div v-if="action === 'change'" class="step ptc-inner">
- <div class="ptc-form">
- <h3 class="title">Change Password</h3>
- <div class="ptc-form-item">
- <input
- v-model="values.old_password"
- class="ptc-input"
- type="password"
- placeholder="Enter old password"
- />
- </div>
- <div class="ptc-form-item">
- <input
- v-model="values.new_password"
- class="ptc-input"
- type="password"
- placeholder="Enter new password"
- />
- </div>
- <div class="ptc-form-item">
- <input
- v-model="values.new_password_confirmation"
- class="ptc-input"
- type="password"
- placeholder="Repeat new password"
- />
- </div>
- <div class="ptc-form-item">
- <button class="ptc-button" @click="handleSubmit(applyChange)">
- SUBMIT
- </button>
- </div>
- </div>
- </div>
- <div v-else-if="step === 0" class="step ptc-inner">
- <h3 class="title">Recover password</h3>
- <div class="desc">
- We will send you an email for password reset. Please check it
- </div>
- <div class="ptc-form">
- <div class="ptc-form-item">
- <input
- v-model="resetForm.email"
- class="ptc-input"
- placeholder="email address"
- />
- </div>
- <div class="ptc-form-item">
- <button class="ptc-button" @click="sendEmail">NEXT</button>
- </div>
- <div class="ptc-form-item">
- <button class="ptc-button ptc-button--stroke" @click="$router.back()">
- BACK
- </button>
- </div>
- </div>
- </div>
- <div v-else-if="step === 1" class="step ptc-inner">
- <h3 class="title">Recover password</h3>
- <div class="desc">
- We will send you an email( {{ resetForm.email }} )The password reset
- email has been sent. Please go to check it
- </div>
- </div>
- <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">
- <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>
- </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>
- <h3 class="title tac">Password reset successfully</h3>
- <button class="ptc-button mgt96" @click="$router.push('/login')">
- TO LOG IN
- </button>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- 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'
- import { debounce } from 'lodash-es'
- import useForm from '@/hooks/useForm'
- import Toast from '@/components/toast'
- const props = defineProps<{ action: 'change' | 'reset' }>()
- 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'),
- new_password: string().required('Please enter new password'),
- new_password_confirmation: string().required('Please repeat new password'),
- },
- })
- const resetForm = reactive<ApiUser.PasswordReset.Request>({
- email: step.value === 2 ? query.email : '',
- token: query.token || '',
- password: '',
- password_confirmation: '',
- })
- 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() {
- const { message } = await changePassword(values as any)
- Toast(message)
- state.userInfo = null
- fromPath.startsWith('/login') ? router.back() : router.push('/login')
- }
- async function sendEmail() {
- try {
- await string()
- .email('invalid email')
- .required('email is required')
- .validate(resetForm.email)
- await sendPasswordEmail(resetForm.email)
- step.value++
- } catch (err) {
- Toast(err.message)
- }
- }
- async function applyReset() {
- try {
- await string().required('password is required').validate(resetForm.password)
- resetForm.password_confirmation = resetForm.password
- await resetPassword(resetForm)
- step.value++
- } catch (err) {
- Toast(err.message)
- }
- }
- function refresh() {
- location.href = 'reset'
- }
- </script>
- <style lang="scss">
- .p-password {
- .step {
- margin-top: 98px;
- padding: 0 76px;
- @include media-breakpoint-up(md) {
- padding: 0;
- min-height: 1084px - 98px;
- }
- }
- .title {
- line-height: 56px;
- font-size: 40px;
- font-weight: 500;
- color: #333;
- }
- .desc {
- margin: 36px 0 64px;
- line-height: 44px;
- font-size: 32px;
- 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);
- }
- .mgt96 {
- margin-top: 96px;
- }
- }
- </style>
|