manta/gofaster/app/src/renderer/components/PasswordChangeModal.vue

<template>
  <div v-if="visible" class="password-modal-overlay" @click="handleOverlayClick">
    <div class="password-modal" @click.stop>
      <div class="modal-header">
        <h3>{{ title }}</h3>
        <button class="close-btn" @click="handleClose">×</button>
      </div>
      
      <div class="modal-body">
        <form @submit.prevent="handleSubmit">
          <!-- 当前密码 -->
          <div class="form-group" v-if="!isForceChange">
            <label>当前密码 *</label>
            <input 
              v-model="form.currentPassword" 
              type="password" 
              required
              placeholder="请输入当前密码"
              :class="{ 'error': errors.currentPassword }"
            />
            <div v-if="errors.currentPassword" class="error-message">
              {{ errors.currentPassword }}
            </div>
          </div>
          
          <!-- 新密码 -->
          <div class="form-group">
            <label>新密码 *</label>
            <input 
              v-model="form.newPassword" 
              type="password" 
              required
              placeholder="请输入新密码"
              @input="validatePassword"
              @keyup="updateRequirements(form.newPassword)"
              :class="{ 'error': errors.newPassword }"
            />
            <div v-if="errors.newPassword" class="error-message">
              {{ errors.newPassword }}
            </div>
            
            <!-- 密码强度指示器 -->
            <div class="password-strength" >
              <div class="strength-bar">
                <div 
                  class="strength-fill" 
                  :class="strengthClass"
                  :style="{ width: strengthPercentage + '%' }"
                ></div>
              </div>
              <div class="strength-text">
                强度: {{ strengthText }} ({{ passwordLevel }}级)
              </div>
            </div>
            
            <!-- 密码要求提示 -->
            <div class="password-requirements" >
              <div class="requirement" :class="{ 'met': requirements.length }">
                ✓ 密码长度{{ form.newPassword.length }}位
              </div>
              <div class="requirement" :class="{ 'met': requirements.uppercase }">
                ✓ 包含大写字母
              </div>
              <div class="requirement" :class="{ 'met': requirements.lowercase }">
                ✓ 包含小写字母
              </div>
              <div class="requirement" :class="{ 'met': requirements.numbers }">
                ✓ 包含数字
              </div>
              <div class="requirement" :class="{ 'met': requirements.special }">
                ✓ 包含特殊字符
              </div>
            </div>
          </div>
          
          <!-- 确认新密码 -->
          <div class="form-group">
            <label>确认新密码 *</label>
            <input 
              v-model="form.confirmPassword" 
              type="password" 
              required
              placeholder="请再次输入新密码"
              @input="validateConfirmPassword"
              :class="{ 'error': errors.confirmPassword }"
            />
            <div v-if="errors.confirmPassword" class="error-message">
              {{ errors.confirmPassword }}
            </div>
          </div>
          
          <!-- 操作按钮 -->
          <div class="form-actions">
            <button 
              type="button" 
              class="btn btn-secondary" 
              @click="handleClose"
              :disabled="loading"
            >
              取消
            </button>
            <button 
              type="submit" 
              class="btn btn-primary" 
              :disabled="loading || !isFormValid"
            >
              <span v-if="loading" class="loading-spinner"></span>
              {{ submitText }}
            </button>
          </div>
          
          <!-- 强制修改密码提示 -->
          <div v-if="isForceChange" class="force-change-notice">
            <div class="notice-icon">⚠️</div>
            <div class="notice-text">
              <strong>重要提示：</strong>您的密码已被重置，必须立即修改密码才能继续使用系统。
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { userService } from '@/services/userService'

export default {
  name: 'PasswordChangeModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isForceChange: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close', 'success'],
  setup(props, { emit }) {
    const loading = ref(false)
    const policy = ref({
      minLength: 6,
      minCharTypes: 1,
      preventReuse: 3,
      level: 1,
      minRequiredLevel: 1,
      requireUppercase: false,
      requireLowercase: false,
      requireNumbers: false,
      requireSpecial: false
    })
    
    const form = reactive({
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    
    const errors = reactive({
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    
    const requirements = reactive({
      length: false,
      uppercase: false,
      lowercase: false,
      numbers: false,
      special: false
    })
    
    const passwordStrength = ref(0)
    const passwordLevel = ref(0)
    
    // 计算属性
    const title = computed(() => {
      return props.isForceChange ? '强制修改密码' : '修改密码'
    })
    
    const submitText = computed(() => {
      return props.isForceChange ? '确认修改' : '修改密码'
    })
    
    const strengthClass = computed(() => {
      if (passwordStrength.value >= 4) return 'strong'
      if (passwordStrength.value >= 3) return 'medium'
      if (passwordStrength.value >= 2) return 'weak'
      return 'very-weak'
    })
    
    const strengthText = computed(() => {
      if (passwordStrength.value >= 4) return '强'
      if (passwordStrength.value >= 3) return '中'
      if (passwordStrength.value >= 2) return '弱'
      return '很弱'
    })
    
    const strengthPercentage = computed(() => {
      // 将0-5的等级转换为0-100的百分比显示
      return (passwordStrength.value / 5) * 100
    })
    
    const isFormValid = computed(() => {
      if (props.isForceChange) {
        return form.newPassword && form.confirmPassword && 
               form.newPassword === form.confirmPassword && 
               !errors.newPassword && !errors.confirmPassword
      }
      return form.currentPassword && form.newPassword && form.confirmPassword &&
             form.newPassword === form.confirmPassword &&
             !errors.currentPassword && !errors.newPassword && !errors.confirmPassword
    })
    
    // 方法
    const loadPasswordPolicy = async () => {
      try {
        console.log('开始加载密码策略...')
        const response = await userService.getPasswordPolicy()
        console.log('密码策略API响应:', response)
        console.log('响应类型:', typeof response)
        console.log('response.data 类型:', typeof response.data)
        console.log('response.data 内容:', response.data)
        
        // 修复：直接检查response.data的结构
        if (response.data && response.data.code === 200 && response.data.data) {
          policy.value = response.data.data
          console.log('密码策略加载成功:', policy.value)
        } else if (response && response.code === 200 && response.data) {
          // 备用检查：如果response.data不存在，直接检查response
          policy.value = response.data
          console.log('密码策略加载成功(备用路径):', policy.value)
        } else {
          console.warn('密码策略响应格式不正确:', response)
          console.warn('尝试解析响应结构...')
          if (response.data) {
            console.warn('response.data.code:', response.data.code)
            console.warn('response.data.data:', response.data.data)
          }
          if (response) {
            console.warn('response.code:', response.code)
            console.warn('response.data:', response.data)
          }
          // 使用默认策略作为后备
          policy.value = {
            minLength: 6,
            minCharTypes: 1,
            preventReuse: 3,
            level: 1,
            minRequiredLevel: 1,
            requireUppercase: false,
            requireLowercase: false,
            requireNumbers: false,
            requireSpecial: false
          }
        }
      } catch (error) {
        console.error('加载密码策略失败:', error)
        // 使用默认策略作为后备
        policy.value = {
          minLength: 6,
          minCharTypes: 1,
          preventReuse: 3,
          level: 1,
          minRequiredLevel: 1,
          requireUppercase: false,
          requireLowercase: false,
          requireNumbers: false,
          requireSpecial: false
        }
      }
    }
    
    const validatePassword = async () => {
      errors.newPassword = ''
      
      if (!form.newPassword) {
        // 如果密码为空，重置所有要求状态
        updateRequirements('')
        return
      }
      
      try {
        console.log('正在验证密码:', form.newPassword)
        const response = await userService.validatePassword(form.newPassword)
        console.log('后端验证响应:', response)
        
        // 修复：检查多种可能的响应结构
        let result = null
        if (response.data && response.data.code === 200 && response.data.data) {
          result = response.data.data
        } else if (response && response.code === 200 && response.data) {
          result = response.data
        }
        
        if (result) {
          console.log('验证结果:', result)
          
          if (!result.is_valid) {
            // 确保错误信息是数组格式
            if (Array.isArray(result.errors)) {
              errors.newPassword = result.errors.join('; ')
            } else if (typeof result.errors === 'string') {
              errors.newPassword = result.errors
            } else {
              errors.newPassword = '密码验证失败'
            }
          }
          
          passwordStrength.value = result.strength || 0
          passwordLevel.value = result.level || 0
          
          console.log('设置密码强度:', passwordStrength.value, '等级:', passwordLevel.value)
          
          // 更新要求满足状态
          updateRequirements(form.newPassword)
        } else {
          console.warn('密码验证响应格式不正确:', response)
          // 即使验证失败，也要更新要求状态
          updateRequirements(form.newPassword)
        }
      } catch (error) {
        console.error('密码验证失败:', error)
        // 即使验证失败，也要更新要求状态
        updateRequirements(form.newPassword)
      }
    }
    
    const updateRequirements = (password) => {
      console.log('updateRequirements 被调用，密码:', password)
      
      // 重置所有状态
      requirements.length = false
      requirements.uppercase = false
      requirements.lowercase = false
      requirements.numbers = false
      requirements.special = false
      
      // 如果密码为空，直接返回
      if (!password || password.length === 0) {
        return
      }
      
      let hasUppercase = false
      let hasLowercase = false
      let hasNumbers = false
      let hasSpecial = false
      
      for (const char of password) {
        // 使用更准确的字符类型检测
        const charCode = char.charCodeAt(0)
        
        if (charCode >= 65 && charCode <= 90) { // A-Z
          hasUppercase = true
        } else if (charCode >= 97 && charCode <= 122) { // a-z
          hasLowercase = true
        } else if (charCode >= 48 && charCode <= 57) { // 0-9
          hasNumbers = true
        } else {
          // 特殊字符：包括标点符号、符号、空格等
          hasSpecial = true
        }
      }
      
      console.log('字符类型检测结果:', {
        hasUppercase: hasUppercase,
        hasLowercase: hasLowercase,
        hasNumbers: hasNumbers,
        hasSpecial: hasSpecial,
        length: password.length
      })
      
      // 更新要求状态
      requirements.length = password.length >= 6 // 要求至少6位
      requirements.uppercase = hasUppercase
      requirements.lowercase = hasLowercase
      requirements.numbers = hasNumbers
      requirements.special = hasSpecial
      
      // 计算字符类型数量
      let charTypes = 0
      if (hasUppercase) charTypes++
      if (hasLowercase) charTypes++
      if (hasNumbers) charTypes++
      if (hasSpecial) charTypes++
      
      // 计算密码强度
      const strength = calculatePasswordStrength(password, charTypes)
      passwordStrength.value = strength
      passwordLevel.value = strength
      
      console.log('更新后的要求状态:', {
        length: requirements.length,
        uppercase: requirements.uppercase,
        lowercase: requirements.lowercase,
        numbers: requirements.numbers,
        special: requirements.special
      })
      console.log('计算出的密码强度:', strength)
    }
    
    // 前端密码强度计算方法
    const calculatePasswordStrength = (password, charTypes) => {
      // 从最高等级开始判断，一旦满足条件就返回对应等级
      
      // 5级：长度>=8，字符类型>=4
      if (password.length >= 8 && charTypes >= 4) {
        return 5
      }
      
      // 4级：长度>=8，字符类型>=3
      if (password.length >= 8 && charTypes >= 3) {
        return 4
      }
      
      // 3级：长度>=6，字符类型>=3
      if (password.length >= 6 && charTypes >= 3) {
        return 3
      }
      
      // 2级：长度>=6，字符类型>=2
      if (password.length >= 6 && charTypes >= 2) {
        return 2
      }
      
      // 1级：长度>=6，字符类型>=1
      if (password.length >= 6 && charTypes >= 1) {
        return 1
      }
      
      // 0级：长度>=1，字符类型>=1（任何密码都至少有一种字符类型）
      if (password.length >= 1) {
        return 0
      }
      
      // 如果连0级都不满足，返回0
      return 0
    }
    
    const validateConfirmPassword = () => {
      errors.confirmPassword = ''
      
      if (form.newPassword !== form.confirmPassword) {
        errors.confirmPassword = '两次输入的密码不一致'
      }
    }
    
    const handleSubmit = async () => {
      if (!isFormValid.value) return
      
      loading.value = true
      
      try {
        const requestData = {
          current_password: form.currentPassword,
          new_password: form.newPassword,
          confirm_password: form.confirmPassword
        }
        
        await userService.changePassword(requestData)
        
        // 成功
        emit('success')
        handleClose()
        
        // 显示成功消息
        if (window.showToast) {
          window.showToast({
            type: 'success',
            title: '密码修改成功',
            content: '您的密码已成功修改'
          })
        }
      } catch (error) {
        console.error('修改密码失败:', error)
        
        // 显示错误消息
        if (error.response?.data?.message) {
          if (error.response.data.message.includes('当前密码不正确')) {
            errors.currentPassword = '当前密码不正确'
          } else if (error.response.data.message.includes('新密码不符合要求')) {
            errors.newPassword = error.response.data.message
          } else {
            errors.newPassword = error.response.data.message
          }
        } else {
          errors.newPassword = '修改密码失败，请重试'
        }
      } finally {
        loading.value = false
      }
    }
    
    const handleClose = () => {
      if (loading.value) return
      
      // 重置表单
      form.currentPassword = ''
      form.newPassword = ''
      form.confirmPassword = ''
      
      // 清除错误
      Object.keys(errors).forEach(key => {
        errors[key] = ''
      })
      
      // 重置要求状态
      Object.keys(requirements).forEach(key => {
        requirements[key] = false
      })
      
      passwordStrength.value = 0
      passwordLevel.value = 0
      
      emit('close')
    }
    
    const handleOverlayClick = () => {
      // 密码修改模态窗不应该在点击外部区域时关闭
      // 避免用户意外丢失已输入的密码内容
      // 只有通过明确的取消按钮或关闭按钮才能关闭
      return false
    }
    
    // 监听器
    watch(() => props.visible, (newVal) => {
      if (newVal) {
        console.log('模态框显示，开始加载密码策略')
        loadPasswordPolicy()
      }
    })
    
    // 监听密码变化，实时更新要求状态
    watch(() => form.newPassword, (newPassword) => {
      if (newPassword) {
        console.log('密码变化，更新要求状态:', newPassword)
        updateRequirements(newPassword)
      } else {
        // 密码为空时重置所有状态
        Object.keys(requirements).forEach(key => {
          requirements[key] = false
        })
        // 重置密码强度
        passwordStrength.value = 0
        passwordLevel.value = 0
      }
    })
    
    // 生命周期
    onMounted(() => {
      console.log('组件挂载，检查是否需要加载密码策略')
      if (props.visible) {
        loadPasswordPolicy()
      }
      // 如果有初始密码内容，计算强度
      if (form.newPassword) {
        updateRequirements(form.newPassword)
      }
    })
    
    return {
      loading,
      policy,
      form,
      errors,
      requirements,
      passwordStrength,
      passwordLevel,
      title,
      submitText,
      strengthClass,
      strengthText,
      strengthPercentage,
      isFormValid,
      validatePassword,
      validateConfirmPassword,
      updateRequirements,
      handleSubmit,
      handleClose,
      handleOverlayClick
    }
  }
}
</script>

<style scoped>
.password-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.password-modal {
  background: var(--card-bg);
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px var(--shadow-color);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.close-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-primary);
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
  background: var(--input-bg);
  color: var(--text-primary);
  transition: all 0.2s;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

.form-group input.error {
  border-color: #f44336;
}

.error-message {
  color: #f44336;
  font-size: 12px;
  margin-top: 4px;
}

/* 密码强度指示器 */
.password-strength {
  margin-top: 12px;
}

.strength-bar {
  width: 100%;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.strength-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.strength-fill.very-weak {
  background: #f44336;
}

.strength-fill.weak {
  background: #ff9800;
}

.strength-fill.medium {
  background: #ffc107;
}

.strength-fill.strong {
  background: #4caf50;
}

.strength-text {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

/* 密码要求提示 */
.password-requirements {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  font-size: 12px;
}

.requirement {
  color: var(--text-muted);
  margin-bottom: 4px;
  transition: color 0.2s;
}

.requirement.met {
  color: #4caf50;
}

.requirement:last-child {
  margin-bottom: 0;
}

/* 操作按钮 */
.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 30px;
}

/* 强制修改密码提示 */
.force-change-notice {
  margin-top: 20px;
  padding: 16px;
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.notice-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.notice-text {
  color: #856404;
  font-size: 14px;
  line-height: 1.5;
}

.notice-text strong {
  color: #856404;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent-color);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-tertiary);
}

/* 加载动画 */
.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .password-modal {
    width: 95%;
    margin: 20px;
  }
  
  .modal-header,
  .modal-body {
    padding: 16px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
}
</style>