Aida_Purchaser_Front/src/views/login/retrieve-password.vue

<template>
	<div class="retrieve-password">
		<el-form
			:model="formData"
			:rules="ruleForm"
			label-position="top"
			ref="form1Ref"
			v-show="index === 0"
		>
			<div class="title">Please enter your email address below to verify your identity.</div>
			<el-form-item :label="$t('Login.email')" prop="email">
				<el-input v-model="formData.email" :placeholder="$t('Login.enterEmail')" name="email" />
			</el-form-item>
			<el-form-item class="submit-item">
				<button class="submit" type="submit" custom="black" @click.prevent="onSubmit1">
					SUBMIT
				</button>
			</el-form-item>
		</el-form>
		<div class="verify-box" v-if="index === 1">
			<email-verify
				type="FORGOT_PWD"
				:email="formData.email"
				@submit-email-code="onVerifyCode"
				:is-show-other-login="false"
			/>
		</div>
		<el-form
			:model="formData"
			:rules="ruleForm"
			label-position="top"
			ref="form2Ref"
			v-show="index === 2"
		>
			<div class="title">
				Enter a new password for <br />
				<span>{{ formData.email }}</span>
			</div>
			<el-form-item :label="$t('Login.password')" prop="password">
				<password-tip :value="formData.password" v-show="showPasswordTip" />
				<el-input
					v-model="formData.password"
					:placeholder="$t('Login.enterPassword')"
					type="password"
					show-password
					name="password"
					@blur="showPasswordTip = false"
					@focus="showPasswordTip = true"
				/>
			</el-form-item>
			<div class="password-warning">
				<span class="icon"><svg-icon name="warning" size="12" /></span>
				<span class="label">You must satisfy ALL password conditions to register.</span>
			</div>
			<el-form-item :label="$t('Login.passwordConfirmation')" prop="confirmPassword">
				<el-input
					v-model="formData.confirmPassword"
					:placeholder="$t('Login.enterPasswordAgain')"
					type="password"
					show-password
					name="password"
				/>
			</el-form-item>
			<el-form-item class="submit-item">
				<button class="submit" type="submit" custom="black" @click.prevent="onSubmit2">
					SUBMIT
				</button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
	import { AccountSendVerifyCode, AccountVerifyCode, AccountResetPassword } from '@/api/account'
	import md5 from 'md5'
	import { computed, reactive, ref } from 'vue'
	import { validateEmail, validatePass } from './tools'
	import PasswordTip from './password-tip.vue'
	import EmailVerify from './email-verify.vue'
	const emit = defineEmits(['back'])
	const validateConfirmPassword = (rule: any, value: string, callback: any) => {
		if (value !== formData.password) {
			callback(new Error('Passwords do not match'))
		} else {
			callback()
		}
	}
	const index = ref(0)
	const ruleForm = reactive({
		email: [{ validator: validateEmail, trigger: 'change' }],
		password: [{ validator: validatePass, trigger: 'change' }],
		confirmPassword: [{ validator: validateConfirmPassword, trigger: 'change' }]
	})
	const showPasswordTip = ref(false)
	const formData = reactive({
		email: '',
		code: '',
		password: '',
		confirmPassword: ''
	})
	const form1Ref = ref(null)
	const visibleCodeRef = ref(null)
	const form2Ref = ref(null)
	const onSubmit1 = () => {
		form1Ref.value?.validate?.((valid) => {
			if (valid) {
				AccountSendVerifyCode({
					email: formData.email,
					operationType: 'FORGOT_PWD'
				}).then(() => {
					index.value = 1
				})
			} else {
				console.warn('error submit!')
			}
		})
	}
	const onVerifyCode = (code: string) => {
		if (!code) return
		AccountVerifyCode({
			email: formData.email,
			emailVerifyCode: code,
			operationType: 'FORGOT_PWD'
		}).then(() => {
			formData.code = code
			index.value = 2
		})
	}
	const onSubmit2 = () => {
		form2Ref.value?.validate?.((valid) => {
			if (valid) {
				const data = {
					email: formData.email,
					password: md5(formData.password),
					emailVerifyCode: formData.code
				}
				AccountResetPassword(data).then(() => {
					emit('back')
				})
			} else {
				console.warn('error submit!')
			}
		})
	}
</script>

<style lang="less" scoped>
	@import './less/style.less';

	.retrieve-password {
		flex: 1;
		&:deep(.el-form) {
			height: 100%;
			display: flex;
			flex-direction: column;
			.el-form-item.submit-item {
				margin-top: auto;
			}
			.el-input {
				--el-input-height: 4.8rem;
			}
			.el-form-item:nth-last-child(2) {
				margin-bottom: 10rem;
			}
			> .title {
				font-family: KaiseiOpti-Regular;
				font-size: 1.6rem;
				line-height: 2.4rem;
				text-align: center;
				color: #585858;
				margin-top: auto;
				margin-bottom: 3rem;
				> span {
					font-family: KaiseiOpti-Medium;
					color: #252727;
				}
			}
		}
		> .verify-box {
			width: 100%;
			height: 100%;
			display: flex;
			&:deep(.email-verify) {
				> .tip {
					margin-top: 8rem;
				}
				> .input-code {
					margin-top: 3rem;
				}
				> .verify {
					margin-top: auto;
				}
			}
		}
	}
</style>