flnxi-Wu/components/ChangePasswordModal.tsx

/**
 * ChangePasswordModal 组件
 * 
 * 修改密码模态框组件
 * 支持首次登录强制修改密码和普通修改密码
 * 使用统一的 Modal 和 Input 组件，遵循三层架构
 * 
 * @created 2025-01-XX
 * @component
 */

'use client'

import { useState } from 'react'
import { useDialog } from '@/components/ui/DialogProvider'
import Modal from '@/components/ui/Modal'
import Input from '@/components/ui/Input'
import Button from '@/components/ui/Button'
import { useThemeStyles, cn } from '@/lib/ui-styles'
import { PASSWORD_POLICY_DESCRIPTION, validatePasswordStrength } from '@/lib/password-policy'

interface ChangePasswordModalProps {
  isOpen: boolean
  onClose: () => void
  isRequired?: boolean // 是否强制修改（首次登录）
  onSuccess?: () => void
}

export default function ChangePasswordModal({
  isOpen,
  onClose,
  isRequired = false,
  onSuccess
}: ChangePasswordModalProps) {
  const { alert } = useDialog()
  const styles = useThemeStyles()
  const [oldPassword, setOldPassword] = useState('')
  const [newPassword, setNewPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')

    if (!newPassword || !confirmPassword) {
      setError('请填写所有字段')
      return
    }

    const passwordValidation = validatePasswordStrength(newPassword)
    if (!passwordValidation.valid) {
      setError(passwordValidation.error || '新密码不符合安全要求')
      return
    }

    if (newPassword !== confirmPassword) {
      setError('两次输入的密码不一致')
      return
    }

    setLoading(true)

    try {
      const payload = isRequired
        ? { newPassword }
        : { oldPassword, newPassword }

      const response = await fetch('/api/user/change-password', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
      })

      const data = await response.json()

      if (response.ok) {
        // 清空表单
        setOldPassword('')
        setNewPassword('')
        setConfirmPassword('')
        setError('')
        
        if (onSuccess) {
          onSuccess()
        } else {
          onClose()
        }
        
        // 显示成功消息
        alert({
          title: '成功',
          message: '密码修改成功！',
          variant: 'success',
        })
      } else {
        setError(data.error || '修改密码失败')
      }
    } catch (error) {
      console.error('修改密码错误:', error)
      setError('修改密码失败，请稍后重试')
    } finally {
      setLoading(false)
    }
  }

  return (
    <Modal
      isOpen={isOpen}
      onClose={isRequired ? () => {} : onClose}
      title={isRequired ? '首次登录，请修改密码' : '修改密码'}
      showCloseButton={!isRequired}
      closeOnOverlayClick={!isRequired}
      closeOnEscape={!isRequired}
    >
      {isRequired && (
        <div className={cn(
          'mb-4 p-3 rounded-lg border',
          'bg-yellow-50 dark:bg-yellow-900/20',
          'border-yellow-200 dark:border-yellow-800'
        )}>
          <p className="text-sm text-yellow-800 dark:text-yellow-200">
            ⚠️ 您正在使用系统初始化密码，为了账户安全，请立即修改密码。
          </p>
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-4">
        {!isRequired && (
          <div>
            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
              旧密码
            </label>
            <Input
              type="password"
              value={oldPassword}
              onChange={(e) => setOldPassword(e.target.value)}
              placeholder="请输入旧密码"
              required={!isRequired}
              fullWidth
            />
          </div>
        )}

        <div>
          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
            新密码
          </label>
          <Input
            type="password"
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
            placeholder={PASSWORD_POLICY_DESCRIPTION}
            required
            minLength={10}
            fullWidth
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
            确认新密码
          </label>
          <Input
            type="password"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            placeholder="请再次输入新密码"
            required
            minLength={10}
            fullWidth
          />
        </div>

        {error && (
          <div className={cn(
            'p-3 rounded-lg border',
            'bg-red-50 dark:bg-red-900/20',
            'border-red-200 dark:border-red-800'
          )}>
            <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
          </div>
        )}

        <div className="flex gap-3 justify-end">
          {!isRequired && (
            <Button
              type="button"
              variant="secondary"
              onClick={onClose}
            >
              取消
            </Button>
          )}
          <Button
            type="submit"
            variant="primary"
            disabled={loading}
            loading={loading}
          >
            {loading ? '修改中...' : '确认修改'}
          </Button>
        </div>
      </form>
    </Modal>
  )
}