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
            class="ptc-input"
            type="password"
            placeholder="Enter new password"
          />
        </div>
        <div class="ptc-form-item">
          <input
            class="ptc-input"
            type="password"
            placeholder="Repeat new password"
          />
        </div>
        <div class="ptc-form-item">
          <button class="ptc-button">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
            class="ptc-input"
            placeholder="6-20 digits password, case sensitive"
          />
        </div>
        <div class="ptc-form-item">
          <button class="ptc-button" @click="next">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 } from '@/service/user'

const props = defineProps<{ action: 'change' | 'reset' }>()

const router = useRouter()
const { query } = useRoute()
const step = query.step ? +(query.step as string) : 0
const resetForm = reactive({ email: '' })

state.bgWhite = true

function next() {
  router.push({
    path: '',
    query: { step: step + 1 },
  })
}

async function sendEmail() {
  await sendPasswordEmail(resetForm.email)
  next()
}
</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>