merge
Change-Id: I5227831adac7f85854cbe7321c2a3aa39d8c1d7a
diff --git a/src/views/login/login.tsx b/src/views/login/login.tsx
index 562f178..fef6e32 100644
--- a/src/views/login/login.tsx
+++ b/src/views/login/login.tsx
@@ -1,37 +1,46 @@
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
import { useApi } from '@/hooks/request';
import request from '@/utils/request';
-import { postUserLogin} from '@/api/auth';
+import { postUserLogin } from '@/api/auth';
import { useAppDispatch } from '@/hooks/store';
-import { RootState } from '@/store';
import style from './login.module.css';
-import { useState } from 'react';
-import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router';
import logo from '&/assets/logo.png';
import { getUserInfo } from '@/api/user';
import debounce from 'lodash/debounce';
-import {message} from 'antd';
-
+import { message } from 'antd';
const Login: React.FC = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
- const dispatch = useAppDispatch();
- const { refresh: postUserLoginRefresh } = useApi(() => request.post(postUserLogin, {email, password}), false);
- const { refresh: getUserInfoRefresh } = useApi(() => request.get(getUserInfo), false);
- const [messageApi, contextHolder] = message.useMessage();
+ const [showRegister, setShowRegister] = useState(false);
+ const [inviteCode, setInviteCode] = useState('');
+ const [registerEmail, setRegisterEmail] = useState('');
+ const [registerPassword, setRegisterPassword] = useState('');
+ const [emailCode, setEmailCode] = useState('');
+ const [codeBtnDisabled, setCodeBtnDisabled] = useState(false);
+ const [codeBtnText, setCodeBtnText] = useState('发送验证码');
+ const [codeTimer, setCodeTimer] = useState<NodeJS.Timeout | null>(null);
+ const dispatch = useAppDispatch();
+ const [messageApi, contextHolder] = message.useMessage();
+ const { refresh: postUserLoginRefresh } = useApi(
+ () => request.post(postUserLogin, { email, password}), false);
+ const { refresh: getUserInfoRefresh } = useApi(
+ () => request.get(getUserInfo), false);
const nav = useNavigate();
- const showErrorMessage = async (message: string) => {
- messageApi.error(message);
+ const showErrorMessage = async (msg: string) => {
+ messageApi.error(msg);
};
+
+ // 登录逻辑
const handleLogin = debounce(async () => {
try {
- const res = await postUserLoginRefresh();
- console.log(res);
- if (res == null || (res as any).error) {
- throw new Error('登录失败');
+ const res =await postUserLoginRefresh({email, password});
+ console.log("res", res);
+ if (res==null ||(res as any).error) {
+ alert('Login failed. Please check your credentials.');
+ return;
}
dispatch({ type: "user/login", payload: res });
@@ -42,23 +51,133 @@
dispatch({ type: "user/getUserInfo", payload: userInfo });
nav('/');
} catch (error) {
- // 将错误信息传递给一个异步函数
showErrorMessage('登录失败，请检查您的用户名和密码');
}
}, 1000) as () => void;
+ // 发送验证码逻辑
+ const handleSendCode = async () => {
+ if (!registerEmail) {
+ showErrorMessage('请填写邮箱');
+ return;
+ }
+ setCodeBtnDisabled(true);
+ let seconds = 60;
+ setCodeBtnText(`已发送(${seconds}s)`);
+ const timer = setInterval(() => {
+ seconds -= 1;
+ setCodeBtnText(`已发送(${seconds}s)`);
+ if (seconds <= 0) {
+ clearInterval(timer);
+ setCodeBtnDisabled(false);
+ setCodeBtnText('发送验证码');
+ }
+ }, 1000);
+ setCodeTimer(timer);
+ // TODO: 调用发送验证码接口
+ message.success('验证码已发送');
+ };
+
+ // 切换回登录
+ const handleBackToLogin = () => {
+ setShowRegister(false);
+ setInviteCode('');
+ setRegisterEmail('');
+ setRegisterPassword('');
+ setEmailCode('');
+ if (codeTimer) clearInterval(codeTimer);
+ setCodeBtnDisabled(false);
+ setCodeBtnText('发送验证码');
+ };
+
+ // 注册逻辑（仅前端校验，实际应调用注册接口）
+ const handleRegister = async () => {
+ if (!inviteCode || !registerEmail || !registerPassword || !emailCode) {
+ showErrorMessage('请填写完整信息');
+ return;
+ }
+ // TODO: 调用注册接口
+ message.success('注册成功，请登录');
+ handleBackToLogin();
+ };
+
const handleLogoClick = () => {
nav('/');
- }
+ };
+
return (
<div className={style.form}>
{contextHolder}
- <img className={style.logo} src={logo} alt="logo" onClick={handleLogoClick}></img>
- <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className={style.email} placeholder="Enter your email" />
- <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className={style.password} placeholder="Enter your password" />
- <button className={style.submit} onClick={() => handleLogin()}>登录</button>
- <button className={style.register}>注册</button>
- <button className={style.forget}> 忘记密码</button>
+ <img className={style.logo} src={logo} alt="logo" onClick={handleLogoClick} />
+ {!showRegister ? (
+ <>
+ <input
+ type="email"
+ value={email}
+ onChange={(e) => setEmail(e.target.value)}
+ className={style.email}
+ placeholder="Enter your email"
+ />
+ <input
+ type="password"
+ value={password}
+ onChange={(e) => setPassword(e.target.value)}
+ className={style.password}
+ placeholder="Enter your password"
+ />
+ <button className={style.submit} onClick={() => handleLogin()}>登录</button>
+ <button className={style.register} onClick={() => setShowRegister(true)}>注册</button>
+ <button className={style.forget}>忘记密码</button>
+ </>
+ ) : (
+ <>
+ <input
+ type="text"
+ value={inviteCode}
+ onChange={(e) => setInviteCode(e.target.value)}
+ className={style.invite}
+ placeholder="邀请码"
+ />
+ <input
+ type="email"
+ value={registerEmail}
+ onChange={(e) => setRegisterEmail(e.target.value)}
+ className={style.email}
+ placeholder="邮箱"
+ />
+ <input
+ type="password"
+ value={registerPassword}
+ onChange={(e) => setRegisterPassword(e.target.value)}
+ className={style.password}
+ placeholder="密码"
+ />
+ <div style={{ display: 'flex',width:'80%', alignItems: 'center', gap: 8, padding:'10px' }}>
+ <input
+ type="text"
+ value={emailCode}
+ onChange={(e) => setEmailCode(e.target.value)}
+ className={style.code}
+ placeholder="邮箱验证码"
+ style={{ flex: 1 }}
+ />
+ <button
+ className={style.sendCode}
+ onClick={handleSendCode}
+ disabled={codeBtnDisabled}
+ style={{
+ background: codeBtnDisabled ? '#ccc' : undefined,
+ color: codeBtnDisabled ? '#888' : undefined,
+ cursor: codeBtnDisabled ? 'not-allowed' : 'pointer'
+ }}
+ >
+ {codeBtnText}
+ </button>
+ </div>
+ <button className={style.submit} onClick={handleRegister}>注册</button>
+ <button className={style.back} onClick={handleBackToLogin}>返回登录</button>
+ </>
+ )}
</div>
);
};