fashion-ssr-vue3/components/business/account/settings/changePsw.vue

<script lang='ts' setup>
import type { FormInstance, FormRules } from 'element-plus'
import { passwordRegular } from '~/enums/regEnum'
import { resetOrChangePasswordApi } from '~/api/model/user'

const ruleFormRef = ref<FormInstance>()
const params = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})
const rules = ref<FormRules>({
  oldPassword: [
    {
      required: true,
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (value) {
          if (passwordRegular.test(value))
            callback()
          else
            callback(new Error('Please enter password that matches the rules'))
        }

        else { callback(new Error('Old password must be filled in')) }
      },
    },
  ],
  newPassword: [
    {
      required: true,
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (value) {
          if (passwordRegular.test(value))
            callback()
          else
            callback(new Error('Please enter password that matches the rules'))
        }

        else { callback(new Error('New password must be filled in')) }
      },
    },
  ],
  confirmPassword: [
    {
      required: true,
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (value) {
          if (passwordRegular.test(value))
            callback()
          else
            callback(new Error('Please enter password that matches the rules'))
        }
        else { callback(new Error('Password must be filled in')) }
      },
    },
  ],
})

async function submitForm(formEl: FormInstance | undefined) {
  if (!formEl)
    return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        await resetOrChangePasswordApi(params.value)
        ElMessage.success('Password updated successfully')
      }
      catch (error) {
        console.log('error', error)
      }
    }
    else { console.log('error submit!', fields) }
  })
}
</script>

<template>
  <div class="flex w-100% justify-center">
    <div>
      <div class="fw-700 mb-30px text-20px text-#333">
        Change Password
      </div>
      <el-form
        ref="ruleFormRef"
        :model="params"
        :rules="rules"
        label-width="auto"
        size="default"
        status-icon
      >
        <el-form-item
          label="Old Password"
          class="custom-form-item w-500px"
          prop="oldPassword"
        >
          <el-popover
            placement="right"
            :width="270"
            class="!text-#5B463E !text-16px"
            trigger="hover"
            content="6-20 characters, contain letters numbers or symbols only"
          >
            <template #reference>
              <el-input v-model="params.oldPassword" :show-password="true" placeholder="Please enter old password" class="h-50px" />
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item
          label="New Password"
          class="custom-form-item w-500px"
          prop="newPassword"
        >
          <el-popover
            placement="right"
            :width="270"
            class="!text-#5B463E !text-16px"
            trigger="hover"
            content="6-20 characters, contain letters numbers or symbols only"
          >
            <template #reference>
              <el-input v-model="params.newPassword" :show-password="true" placeholder="Please enter new password" class="h-50px" />
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item
          label="Confirm New Password"
          class="custom-form-item w-500px"
          prop="confirmPassword"
        >
          <el-popover
            placement="right"
            :width="270"
            class="!text-#5B463E !text-16px"
            trigger="hover"
            content="6-20 characters, contain letters numbers or symbols only"
          >
            <template #reference>
              <el-input v-model="params.confirmPassword" :show-password="true" placeholder="Please confirm new password" class="h-50px" />
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item>
          <el-button plain class="!bg-#C58C64 !text-#fff !w-500px !h-50px !text-18px !fw-500 !b-rd-6px " @click="submitForm(ruleFormRef)">
            Submit
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="less" scoped>
:deep(.custom-form-item) {
  margin-bottom: 30px;
  display: block !important;
  .el-form-item__content{
    .el-input{
      .el-select{
        .el-select__wrapper{
          height: 50px!important;
          background-color: #fff!important;
        }
      }
    }
  }

  .el-form-item__label-wrap {
     margin-left: unset!important;
     .el-form-item__label {
        margin-bottom: 5px;
        font-size: 16px !important;
        color: #333 !important;
      }
    }
  &.custom-form-item-hidden-label {
    width: 270px;
    &:last-child {
      .el-form-item__label-wrap {
        opacity: 0;
      }
    }
  }
}
</style>