ele-HeiXiu/src/pages/login/components/LoginForm.tsx

// ============================================================
// LoginForm — 登录表单
// ============================================================

import { useState, useCallback } from 'react';
import { Input, Button, Checkbox, Typography } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

import { loginFields } from '../config/login-fields';
import { validateForm } from '../config/validators';
import { LegalTextModal } from '@/components/common/LegalTextModal';
import type { LoginFormValues } from '../types';

const { Text } = Typography;

interface LoginFormProps {
   initialUsername?: string;
   initialPassword?: string;
   initialRemember?: boolean;
   initialAutoLogin?: boolean;
   submitting?: boolean;
   onSubmit: (values: LoginFormValues) => void;
   onRememberChange: (checked: boolean) => void;
   onAutoLoginChange: (checked: boolean) => void;
}

export function LoginForm({
   initialUsername,
   initialPassword,
   initialRemember = false,
   initialAutoLogin = false,
   submitting = false,
   onSubmit,
   onRememberChange,
   onAutoLoginChange,
}: LoginFormProps) {
   const [username, setUsername] = useState(initialUsername || '');
   const [password, setPassword] = useState(initialPassword || '');
   const [remember, setRemember] = useState(initialRemember);
   const [autoLogin, setAutoLogin] = useState(initialAutoLogin);
   const [agreed, setAgreed] = useState(false);
   const [errors, setErrors] = useState<Record<string, string[]>>({});

   // 协议弹窗
   const [legalType, setLegalType] = useState<'service' | 'points' | null>(null);

   const clearError = (name: string) =>
      setErrors((p) => {
         const n = { ...p };
         delete n[name];
         return n;
      });

   const handleSubmit = useCallback(() => {
      const values = { username, password };
      const fieldErrors = validateForm(values, loginFields);
      if (Object.keys(fieldErrors).length > 0) {
         setErrors(fieldErrors);
         return;
      }
      if (!agreed) {
         setErrors({ _agreement: ['请先阅读并同意用户协议'] });
         return;
      }
      setErrors({});
      onSubmit({ username, password, remember, autoLogin: remember && autoLogin });
   }, [username, password, remember, autoLogin, agreed, onSubmit]);

   return (
      <>
         <div className="space-y-5">
            {/* 用户名 */}
            <div>
               <Input
                  size="large"
                  prefix={<UserOutlined className="opacity-40" />}
                  placeholder="用户名"
                  value={username}
                  onChange={(e) => {
                     setUsername(e.target.value);
                     clearError('username');
                  }}
                  status={errors.username ? 'error' : undefined}
                  allowClear
               />
               {errors.username && (
                  <Text type="danger" className="text-xs ml-1">
                     {errors.username[0]}
                  </Text>
               )}
            </div>

            {/* 密码 */}
            <div>
               <Input.Password
                  size="large"
                  prefix={<LockOutlined className="opacity-40" />}
                  placeholder="密码"
                  value={password}
                  onChange={(e) => {
                     setPassword(e.target.value);
                     clearError('password');
                  }}
                  status={errors.password ? 'error' : undefined}
                  allowClear
               />
               {errors.password && (
                  <Text type="danger" className="text-xs ml-1">
                     {errors.password[0]}
                  </Text>
               )}
            </div>

            {/* 记住密码 / 自动登录 / 忘记密码 */}
            <div className="flex items-center justify-between">
               <div className="flex items-center gap-1">
                  <Checkbox
                     checked={remember}
                     onChange={(e) => {
                        const checked = e.target.checked;
                        setRemember(checked);
                        onRememberChange(checked);
                        // 取消记住密码 → 同时取消自动登录
                        if (!checked) {
                           setAutoLogin(false);
                           onAutoLoginChange(false);
                        }
                     }}
                     className="text-xs"
                  >
                     记住密码
                  </Checkbox>
                  <Checkbox
                     checked={autoLogin}
                     onChange={(e) => {
                        const checked = e.target.checked;
                        setAutoLogin(checked);
                        onAutoLoginChange(checked);
                        // 勾选自动登录 → 同时勾选记住密码
                        if (checked && !remember) {
                           setRemember(true);
                           onRememberChange(true);
                        }
                     }}
                     className="text-xs"
                  >
                     自动登录
                  </Checkbox>
               </div>
               <a
                  className="text-xs"
                  onClick={() => {
                     /* TODO: 忘记密码流程 */
                  }}
               >
                  忘记密码?
               </a>
            </div>

            {/* 用户协议 */}
            <div>
               <Checkbox
                  checked={agreed}
                  onChange={(e) => {
                     setAgreed(e.target.checked);
                     clearError('_agreement');
                  }}
                  className="text-xs"
               >
                  已阅读并同意
                  <a
                     className="text-xs mx-0.5"
                     onClick={(e) => {
                        e.stopPropagation();
                        setLegalType('service');
                     }}
                  >
                     《用户服务协议》
                  </a>
                  和
                  <a
                     className="text-xs mx-0.5"
                     onClick={(e) => {
                        e.stopPropagation();
                        setLegalType('points');
                     }}
                  >
                     《积分充值服务协议》
                  </a>
               </Checkbox>
               {errors._agreement && (
                  <Text type="danger" className="text-xs block mt-1">
                     {errors._agreement[0]}
                  </Text>
               )}
            </div>

            {/* 登录按钮 */}
            <Button
               type="primary"
               block
               size="large"
               icon={<UserOutlined />}
               loading={submitting}
               onClick={handleSubmit}
               className="h-11! text-base! font-medium! mt-2!"
            >
               登录
            </Button>
         </div>

         {/* 协议弹窗 */}
         {legalType && <LegalTextModal open type={legalType} onClose={() => setLegalType(null)} />}
      </>
   );
}