k_online_ui/src/views/Login/src/components/ChangePasswordCard.vue

<script setup lang="ts">
import { useThemeStore } from '@/stores/modules/theme'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'

const userStore = useUserStore()
const router = useRouter()

const themeStore = useThemeStore()

const route = useRoute()

const tips = ref('Please change your password for security.')

if (route.query.firstLogin === 't') {
  tips.value = 'First login, please change your password.'
}
const loginForm = ref({
  username: '',
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
loginForm.value.username = userStore.userInfo?.uname || ''
// 没有用户名时，跳转到登录页
if (!loginForm.value.username) {
  router.push({
    name: 'Login'
  })
  ElMessage.warning('Please login first')
}
const newPwdErrTips = ref('')
const loginError: any = ref({
  oldPassword: false,
  newPassword: false,
  confirmPassword: false
})

const handleChangePwd = () => {
  if (loginForm.value.newPassword !== loginForm.value.confirmPassword) {
    loginError.value.confirmPassword = true
    return
  }
  if (loginForm.value.newPassword.length < 12 || loginForm.value.newPassword.length > 20) {
    loginError.value.newPassword = true
    newPwdErrTips.value = 'Password length between 12 - 20'
    return
  }
  if (!/[A-Z]/.test(loginForm.value.newPassword)) {
    loginError.value.newPassword = true
    newPwdErrTips.value = 'Password must contain uppercase letters'
    return
  }
  if (!/[a-z]/.test(loginForm.value.newPassword)) {
    loginError.value.newPassword = true
    newPwdErrTips.value = 'Password must contain lowercase letters'
    return
  }
  if (!/[0-9]/.test(loginForm.value.newPassword)) {
    loginError.value.newPassword = true
    newPwdErrTips.value = 'Password must contain numbers'
    return
  }
  $api
    .resetPwd({
      uname: loginForm.value.username,
      old_password: loginForm.value.oldPassword,
      password: loginForm.value.newPassword
    })
    .then((res: any) => {
      if (res.code === 200) {
        router.push({
          name: 'Login',
          query: {
            isChange: 'true'
          }
        })
      } else if (res.code === 400) {
        if (res.msg === 'Old password is incorrect') {
          loginError.value.oldPassword = true
        } else {
          loginError.value.newPassword = true
          newPwdErrTips.value = res.msg
        }
      }
    })
}

const hiddenError = (key: string) => {
  loginError.value[key] = false
}
const confirmPwd = () => {
  if (loginForm.value.confirmPassword !== loginForm.value.newPassword) {
    loginError.value.confirmPassword = true
  } else {
    loginError.value.confirmPassword = false
  }
}

const isUserNameExit = ref(false)

const handleForgot = () => {
  router.push({
    name: 'Login',
    query: {
      status: 'reset'
    }
  })
}

const hasUppercase = ref(false)
const hasLowercase = ref(false)
const hasNumber = ref(false)
const isValidLength = ref(false)
const checkPassword = () => {
  const pwd = loginForm.value.newPassword
  // 检测是否包含大写字母
  hasUppercase.value = /[A-Z]/.test(pwd)
  // 检测是否包含小写字母
  hasLowercase.value = /[a-z]/.test(pwd)
  // 检测是否包含数字
  hasNumber.value = /[0-9]/.test(pwd)
  // 检测长度是否符合要求
  isValidLength.value = pwd.length >= 12 && pwd.length <= 20
}
</script>

<template>
  <div class="login" :class="{ 'dark-bg': themeStore.theme === 'dark' }">
    <el-card class="login-card">
      <div class="title" :class="{ 'is-dark': themeStore.theme === 'dark' }">
        <span class="welcome">Change Password</span>
        <span class="tips">{{ tips }}</span>
      </div>
      <div class="login-form">
        <div class="label">
          <span>User Name</span>
        </div>
        <el-input :disabled="true" ref="userNameRef" v-model="loginForm.username" class="user-name">
          <template #prefix>
            <span class="font_family icon-icon_username_b"></span>
          </template>
          <template #suffix>
            <span v-if="isUserNameExit" class="font_family icon-icon_confirm_b confirm-icon"></span>
          </template>
        </el-input>
        <div class="label">
          <span>Old Password</span>
          <span class="forgot-password" @click="handleForgot">Forgot Password?</span>
        </div>
        <el-input
          ref="passWordRef"
          :class="{ 'is-error': loginError.oldPassword }"
          v-model="loginForm.oldPassword"
          type="password"
          placeholder="Please input password"
          show-password
          @focus="hiddenError('oldPassword')"
        >
          <template #prefix>
            <span class="font_family icon-icon_password_b"></span>
          </template>
        </el-input>
        <div class="error" v-if="loginError.oldPassword">Incorrect password. Please try again.</div>
        <div class="label">
          <span>New Password</span>
        </div>
        <el-input
          ref="passWordRef"
          :class="{ 'is-error': loginError.newPassword }"
          v-model="loginForm.newPassword"
          type="password"
          placeholder="Please input password"
          show-password
          @focus="hiddenError('newPassword')"
          @input="checkPassword"
        >
          <template #prefix>
            <span class="font_family icon-icon_password_b"></span>
          </template>
        </el-input>
        <div class="error" v-if="loginError.newPassword">{{ newPwdErrTips }}</div>
        <div class="limit-tips">
          <div class="tip-item">
            <span class="font_family icon-icon_confirm_b" :class="{ active: hasUppercase }"></span>
            <span>Password must contain uppercase letters</span>
          </div>
          <div class="tip-item">
            <span class="font_family icon-icon_confirm_b" :class="{ active: hasLowercase }"></span>
            <span>Password must contain lowercase letters</span>
          </div>
          <div class="tip-item">
            <span class="font_family icon-icon_confirm_b" :class="{ active: hasNumber }"></span>
            <span>Password must contain numbers</span>
          </div>
          <div class="tip-item">
            <span
              style="padding-top: 2px"
              class="font_family icon-icon_confirm_b"
              :class="{ active: isValidLength }"
            ></span>
            <span>Password length between12 - 20 </span>
          </div>
        </div>
        <div class="label">
          <span>Confirm New Password</span>
        </div>

        <el-input
          ref="passWordRef"
          :class="{ 'is-error': loginError.confirmPassword }"
          v-model="loginForm.confirmPassword"
          type="password"
          placeholder="Please input password"
          show-password
          @focus="hiddenError('confirmPassword')"
          @blur="confirmPwd"
        >
          <template #prefix>
            <span class="font_family icon-icon_password_b"></span>
          </template>
        </el-input>
        <div class="error" v-if="loginError.confirmPassword">
          The password does not match. Please try again.
        </div>
        <el-button @click="handleChangePwd" class="el-button--dark login-btn"
          >Change Password</el-button
        >
      </div>
      <template #footer>
        <div class="license">
          <span>© KLN LOGISTICS GROUP LIMITED. ALL RIGHTS RESERVED.</span>
        </div>
      </template>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.login {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background: url(../image/bg.png) no-repeat center center;
  background-size: cover;
  &.dark-bg {
    background: url(../image/bg-dark.png) no-repeat center center;
    background-size: cover;
  }
}

.login-card {
  width: 400px;
  border-radius: 12px;
  .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
    padding: 40px 40px 0;
    background: url(../image/bg-login-card.png) no-repeat;
    background-position: top left; /* 从左上角开始显示 */
    background-size: 400px 100px; /* 保持背景图像的原始尺寸 */
    &.is-dark {
      background: url(../image/bg-login-card-dark.png) no-repeat;
    }
    .welcome {
      margin-bottom: 16px;
      font-size: 24px;
      font-weight: 700;
    }
  }

  :deep(.el-card__body) {
    padding: 0;
    padding-bottom: 16px;
  }

  .login-btn {
    width: 100%;
    height: 40px;
    margin-top: 16px;
  }
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 40px;
  .el-input {
    height: 40px;
    .confirm-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 16px;
      width: 16px;
      margin-right: 4px;
      font-size: 14px;
      color: #fff;
      background-color: var(--color-success);
      border-radius: 50%;
    }

    &.is-error {
      :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 1px var(--color-danger) inset;
      }
    }

    :deep(.el-input__prefix) {
      margin: 0 4px;
      background-color: transparent;
    }
    &.is-disabled {
      :deep(.el-input__inner) {
        -webkit-text-fill-color: var(--color-neutral-1);
        color: var(--color-neutral-1);
        font-weight: 700;
      }
    }
  }
  .limit-tips {
    margin-top: 10px;
    .tip-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--color-neutral-2);
      &:nth-last-child(1) {
        margin-bottom: 0;
      }
      .font_family {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 12px;
        width: 12px;
        padding-top: 1px;
        background-color: #b5b9bf;
        font-size: 10px;
        color: white;
        border-radius: 50%;
        &.active {
          background-color: #00a870;
        }
      }
      span {
        margin-left: 4px;
      }
    }
  }
  .verification-code {
    margin-top: 16px;
    .verification-code-img {
      width: 130px;
      height: 38px;
      object-fit: cover;
    }
    :deep(.el-input-group__append) {
      padding: 0;
      padding-right: 1px;
    }
  }
  .el-input.user-name {
    :deep(.el-input__wrapper) {
      padding-right: 6px;
      box-shadow: 0 0 0 1px var(--color-input-disabled-border) inset;
    }
  }

  .label {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 16px;
    font-size: 12px;
    line-height: 18px;

    span {
      color: var(--color-neutral-2);
    }

    .forgot-password {
      color: var(--color-theme);
      cursor: pointer;
    }
  }

  .error {
    font-size: 12px;
    color: var(--color-danger);
    line-height: 14px;
  }
}

.license {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;

  .company {
    color: var(--color-theme);
  }

  span {
    color: var(--color-neutral-2);
  }
}
</style>