123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199 |
- <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.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 class="ptc-form">
- <div class="ptc-form-item">
- <button class="ptc-button" @click="next">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>
- <div class="ptc-form-item">
- <button class="ptc-button" @click="applyReset">SUBMIT</button>
- </div>
- </div>
- </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 } from 'vue'
- import { useRoute, useRouter } from 'vue-router'
- import { state } from '@/store'
- import {
- sendPasswordEmail,
- resetPassword,
- 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 step = query.step ? +(query.step as string) : 0
- const { values, handleSubmit } = useForm<ApiUser.PasswordChange.Request>({
- schema: {
- new_password: string().required(),
- new_password_confirmation: string().required(),
- },
- })
- const resetForm = reactive<ApiUser.PasswordReset.Request>({
- email: step === 2 ? query.email : '',
- token: query.token || '',
- password: '',
- password_confirmation: '',
- })
- state.bgWhite = true
- function next() {
- router.push({
- path: '',
- query: { step: step + 1 },
- })
- }
- async function applyChange() {
- // await changePassword(values as any)
- }
- async function sendEmail() {
- try {
- await string()
- .email('invalid email')
- .required('email is required')
- .validate(resetForm.email)
- await sendPasswordEmail(resetForm.email)
- next()
- } 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)
- next()
- } catch (err) {
- Toast(err.message)
- }
- }
- </script>
- <style lang="scss">
- .p-password {
- .step {
- margin-top: 98px;
- padding: 0 76px;
- @include media-breakpoint-up(md) {
- 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-success {
- display: block;
- margin: 0 auto 32px;
- @include icon('@img/success.png', 96px);
- }
- .mgt96 {
- margin-top: 96px;
- }
- }
- </style>
|