vue-ptc/src/pages/password/index.vue

<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>