feat: reset password

composables/apis/user.ts

@@ -1,4 +1,4 @@
-import { MemberParams, MemberVo } from 'Member'
+import type { MemberParams, MemberVo } from 'Member'
 
 const getMyInfoApi = async () => {
  const { data } = await xFetch<MemberVo>('/api/user/getMyInfo')
@@ -29,9 +29,18 @@ const updateMyInfo = async (params: Partial<MemberVo>) => {
  }
 }
 
+const resetPwd = async (params: Partial<MemberVo>) => {
+ const { data, refresh } = await xFetch<string>('/api/user/resetPassword', 'post', params)
+ return {
+ data: data && data.data,
+ refresh
+ }
+}
+
 export const UserApi = {
  getMyInfo: getMyInfoApi,
  login: login,
  register: register,
+ resetPwd: resetPwd,
  updateMyInfo: updateMyInfo
 }

composables/useFormRules.ts

@@ -17,6 +17,7 @@ export const useLoginRules = (registerForm: MemberParams, t: any) => {
  callback()
  }
  }
+
  const validateEmail = (rule: any, value: any, callback: any) => {
  const emailReg = /^[a-zA-Z0-9_.]+@[a-zA-Z0-9-]+[.a-zA-Z]+$/
  if (value === '') {
@@ -27,10 +28,12 @@ export const useLoginRules = (registerForm: MemberParams, t: any) => {
  callback()
  }
  }
+
  const ruleslogin = reactive({
  username: genral(t('username'), t),
  password: genral(t('password'), t)
  })
+
  const rulesRegister = reactive({
  username: [
  ...genral(t('username'), t),
@@ -59,10 +62,32 @@ export const useLoginRules = (registerForm: MemberParams, t: any) => {
  { pattern: /^[0-9]{6}/, message: t('correctCode'), trigger: 'change' }
  ]
  })
+
+ const forgotRegister = reactive({
+ password: [
+ ...genral(t('password'), t),
+ {
+ pattern: /^[A-Za-z0-9.+-_,]{6,16}$/,
+ message: t('teshu'),
+ triger: 'change'
+ }
+ ],
+ rePassword: [{ validator: validateRePass, trigger: 'change' }, ...genral(t('confirmPass'), t)],
+ email: [
+ { validator: validateEmail, trigger: 'change' },
+ { required: true, message: t('inputEmail'), trigger: 'change' }
+ ],
+ code: [
+ { required: true, message: t('inputCode'), trigger: 'change' },
+ { pattern: /^[0-9]{6}/, message: t('correctCode'), trigger: 'change' }
+ ]
+ })
+
  return {
  validateRePass,
  validateEmail,
  ruleslogin,
+ forgotRegister,
  rulesRegister
  }
 }

composables/useLoginpage.ts

@@ -1,4 +1,3 @@
-import type { MemberParams } from 'Member'
 import { useUserStore } from '~~/stores/user'
 import { UserApi } from '~~/composables/apis/user'
 import { getCode } from '~~/composables/apis/email'
@@ -29,18 +28,22 @@ export const useLoginPage = () => {
  const localeRoute = useLocaleRoute()
  const { t } = useI18n()
  const { createMessage } = useMessage()
- const { rulesRegister, ruleslogin } = useLoginRules(registerForm, t)
+ const { rulesRegister, ruleslogin, forgotRegister } = useLoginRules(registerForm, t)
 
  const goWelcome = () => {
  const route = localeRoute('/welcome')
  navigateTo(route?.fullPath)
  }
 
- const getCodeFn = async () => {
+ const getCodeFn = async (email: string) => {
  try {
- await registerRef.value.validateField('email')
+ const emailReg = /^[a-zA-Z0-9_.]+@[a-zA-Z0-9-]+[.a-zA-Z]+$/
+ if (!email || !emailReg.test(email)) {
+ createMessage(t('erroremail'))
+ return
+ }
  isLoading.value = true
- await getCode(registerForm.email)
+ await getCode(email)
  isSend.value = true
  const myInternal = setInterval(() => {
  time.value--
@@ -59,8 +62,6 @@ export const useLoginPage = () => {
  }
 
  const submitFn = async (isMobile?: boolean) => {
- const router = useRouter()
-
  if (isRegister.value) {
  await registerRef.value.validate()
  registerForm.verifyCode = parseInt(registerForm.verifyCode!.toString())
@@ -92,6 +93,7 @@ export const useLoginPage = () => {
  submitFn,
  goWelcome,
  ruleslogin,
+ forgotRegister,
  rulesRegister,
  loginForm,
  registerForm,
@@ -103,3 +105,38 @@ export const useLoginPage = () => {
  isRegister
  }
 }
+
+export const useForgotPwd = () => {
+ const { t } = useI18n()
+ const isForgot = ref(false)
+ const localeRoute = useLocaleRoute()
+ const forgotForm = reactive<any>({
+ email: '',
+ code: '',
+ password: '',
+ rePassword: ''
+ })
+
+ const { forgotRegister } = useLoginRules(forgotForm, t)
+
+ const resetPwd = async (isMobile?: boolean) => {
+ const params = _.cloneDeep(forgotForm)
+ delete params.rePassword
+ params.code = parseInt(params.code)
+ const { data: token } = await UserApi.resetPwd(params)
+ if (token) {
+ const userStore = useUserStore()
+ userStore.setToken(token)
+ await userStore.getUserInfo()
+ const route = localeRoute(`${isMobile ? '/mobile' : ''}/welcome`)
+ navigateTo(route?.fullPath)
+ }
+ }
+
+ return {
+ forgotForm,
+ isForgot,
+ resetPwd,
+ forgotRegister
+ }
+}

i18n/locales/cn.json

@@ -134,5 +134,7 @@
  "pollTwitter": "通过X(Twitter)进行投票",
  "PollLink": "投票链接",
  "pollByCustom": "通过主办方链接投票",
- "contact-us": "联系我们"
+ "contact-us": "联系我们",
+ "erroremail": "邮箱格式错误！",
+ "forgotPasw": "忘记密码？"
 }

i18n/locales/en.json

@@ -133,5 +133,7 @@
  "pollTwitter": "Poll your fav movie via X(Twitter)",
  "PollLink": "Poll Links",
  "pollByCustom": "Poll by Cutom link",
- "contact-us": "Contact Us"
+ "contact-us": "Contact Us",
+ "erroremail": "Wrong Email ",
+ "forgotPasw": "Forgot Password?"
 }

i18n/locales/jp.json

@@ -131,5 +131,7 @@
  "pollTwitter": "X（Twitter）で投票する",
  "PollLink": "投票する！",
  "pollByCustom": "特定なサイトで投票する",
- "contact-us": "Contact Us"
+ "contact-us": "Contact Us",
+ "erroremail": "Wrong Email ",
+ "forgotPasw": "Forgot Password?"
 }

pages/login.vue

@@ -12,6 +12,15 @@
  <p class="title">{{ $t('logintoMMGC') }}</p>
  <p class="sub-title">{{ $t('MMGCdesc') }}</p>
  </div>
+ <ElButton
+ @click="isForgot = true"
+ class="self-start my-2"
+ text
+ link
+ type="primary"
+ v-if="!isRegister && !isForgot"
+ >{{ $t('forgotPasw') }}</ElButton
+ >
  <Transition mode="out-in">
  <el-form
  label-position="left"
@@ -21,7 +30,7 @@
  :rules="ruleslogin"
  class="mt-5 flex-1"
  @submit.native.prevent
- v-if="!isRegister"
+ v-if="!isRegister && !isForgot"
  >
  <el-form-item :label="$t('username')" prop="username">
  <el-input v-model="loginForm.username" />
@@ -38,7 +47,7 @@
  :rules="rulesRegister"
  @submit.native.prevent
  ref="registerRef"
- v-else
+ v-else-if="!isForgot"
  >
  <el-form-item :label="$t('username')" prop="username">
  <el-input v-model="registerForm.username" />
@@ -61,24 +70,66 @@
  <el-button
  type="primary"
  class="ml-2"
- @click="getCodeFn"
+ @click="() => getCodeFn(registerForm.email)"
  :disabled="isSend || isLoading"
  :loading="isLoading"
  >{{ !isSend ? $t('getCode') : $t('time get', [time]) }}</el-button
  >
  </div>
  </el-form-item>
  </el-form>
+ <el-form
+ label-position="left"
+ :model="forgotForm"
+ status-icon
+ ref="loginRef"
+ :rules="forgotRegister"
+ class="mt-5 flex-1"
+ @submit.native.prevent
+ v-else-if="isForgot"
+ >
+ <el-form-item :label="$t('email')" prop="username">
+ <el-input v-model="forgotForm.email" />
+ </el-form-item>
+ <el-form-item :label="$t('verifyCode')" prop="code">
+ <div class="flex w-full">
+ <el-input v-model="forgotForm.code" />
+ <el-button
+ type="primary"
+ class="ml-2"
+ @click="() => getCodeFn(forgotForm.email)"
+ :disabled="isSend || isLoading"
+ :loading="isLoading"
+ >{{ !isSend ? $t('getCode') : $t('time get', [time]) }}</el-button
+ >
+ </div>
+ </el-form-item>
+ <el-form-item :label="$t('password')" prop="password">
+ <el-input v-model="forgotForm.password" type="password" />
+ </el-form-item>
+ <el-form-item :label="$t('confirmPass')" prop="rePassword">
+ <el-input v-model="forgotForm.rePassword" type="password" />
+ </el-form-item>
+ </el-form>
  </Transition>
 
- <div class="text-light-50 self-end">
+ <div class="text-light-50 self-end" v-if="!isForgot">
  <el-button type="primary" round :dark="true" @click="isRegister = !isRegister">{{
  isRegister ? $t('login') : $t('register')
  }}</el-button>
  <el-button type="primary" round :dark="true" @click="() => submitFn()">{{
  $t('submit')
  }}</el-button>
  </div>
+
+ <div class="text-light-50 self-end" v-else>
+ <el-button type="primary" round :dark="true" @click="isForgot = !isForgot">{{
+ $t('login')
+ }}</el-button>
+ <el-button type="primary" round :dark="true" @click="() => resetPwd(false)">{{
+ $t('update')
+ }}</el-button>
+ </div>
  <div class="flex items-center justify-self-end">
  <div class="w-24 h-12">
  <MyCustomImage :img="Mirai" />
@@ -113,6 +164,8 @@ const {
  isSend,
  isRegister
 } = useLoginPage()
+
+const { isForgot, forgotForm, resetPwd, forgotRegister } = useForgotPwd()
 </script>
 
 <style lang="scss" scoped>