feat: 添加用户认证组件
- LoginPage（登录页） - RegisterPage（注册页） - 更新 App.js 路由配置 - 集成 AuthStore
This commit is contained in:
mashen
@@ -10,6 +10,8 @@ import CitiesPage from './components/region/CitiesPage';
|
||||
import CityDetailPage from './components/region/CityDetailPage';
|
||||
import ArticleDetailPage from './components/article/ArticleDetailPage';
|
||||
import ServiceDetailPage from './components/service/ServiceDetailPage';
|
||||
import LoginPage from './components/auth/LoginPage';
|
||||
import RegisterPage from './components/auth/RegisterPage';
|
||||
|
||||
const Container = styled.div`
|
||||
max-width: 1200px;
|
||||
@@ -46,6 +48,8 @@ function App() {
|
||||
<Route path="/cities/:regionId" element={<CityDetailPage />} />
|
||||
<Route path="/articles/:articleId" element={<ArticleDetailPageWrapper />} />
|
||||
<Route path="/services/:serviceId" element={<ServiceDetailPageWrapper />} />
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
<Route path="/user/profile" element={<UserProfilePage />} />
|
||||
<Route path="*" element={<NotFoundPage />} />
|
||||
</Routes>
|
||||
|
||||
143
frontend/src/components/auth/LoginPage.js
Normal file
143
frontend/src/components/auth/LoginPage.js
Normal file
@@ -0,0 +1,143 @@
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { useAuthStore } from '../../stores/AuthStore';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const Container = styled.div`
|
||||
max-width: 400px;
|
||||
margin: 50px auto;
|
||||
padding: 30px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
`;
|
||||
|
||||
const Title = styled.h2`
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
color: #333;
|
||||
`;
|
||||
|
||||
const Form = styled.form`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
`;
|
||||
|
||||
const InputGroup = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
`;
|
||||
|
||||
const Label = styled.label`
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
`;
|
||||
|
||||
const Input = styled.input`
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
`;
|
||||
|
||||
const Button = styled.button`
|
||||
padding: 12px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #5568d3;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
`;
|
||||
|
||||
const ErrorMessage = styled.div`
|
||||
color: #dc3545;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const Link = styled.a`
|
||||
text-align: center;
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`;
|
||||
|
||||
const LoginPage = observer(() => {
|
||||
const authStore = useAuthStore();
|
||||
const navigate = useNavigate();
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
const result = await authStore.login(email, password);
|
||||
if (result.success) {
|
||||
navigate('/');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Title>登录</Title>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
{authStore.error && (
|
||||
<ErrorMessage>{authStore.error}</ErrorMessage>
|
||||
)}
|
||||
|
||||
<InputGroup>
|
||||
<Label>邮箱</Label>
|
||||
<Input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="请输入邮箱"
|
||||
required
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup>
|
||||
<Label>密码</Label>
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<Button type="submit" disabled={authStore.loading}>
|
||||
{authStore.loading ? '登录中...' : '登录'}
|
||||
</Button>
|
||||
</Form>
|
||||
|
||||
<Link href="/register">没有账号？立即注册</Link>
|
||||
</Container>
|
||||
);
|
||||
});
|
||||
|
||||
export default LoginPage;
|
||||
161
frontend/src/components/auth/RegisterPage.js
Normal file
161
frontend/src/components/auth/RegisterPage.js
Normal file
@@ -0,0 +1,161 @@
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const Container = styled.div`
|
||||
max-width: 400px;
|
||||
margin: 50px auto;
|
||||
padding: 30px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
`;
|
||||
|
||||
const Title = styled.h2`
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
color: #333;
|
||||
`;
|
||||
|
||||
const Form = styled.form`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
`;
|
||||
|
||||
const InputGroup = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
`;
|
||||
|
||||
const Label = styled.label`
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
`;
|
||||
|
||||
const Input = styled.input`
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
`;
|
||||
|
||||
const Button = styled.button`
|
||||
padding: 12px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: #5568d3;
|
||||
}
|
||||
`;
|
||||
|
||||
const Link = styled.a`
|
||||
text-align: center;
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`;
|
||||
|
||||
const RegisterPage = () => {
|
||||
const navigate = useNavigate();
|
||||
const [username, setUsername] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
setError('两次输入的密码不一致');
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: 调用注册 API
|
||||
console.log('Register:', { username, email, password });
|
||||
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Title>注册</Title>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
{error && (
|
||||
<div style={{ color: '#dc3545', fontSize: '14px', textAlign: 'center' }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<InputGroup>
|
||||
<Label>用户名</Label>
|
||||
<Input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup>
|
||||
<Label>邮箱</Label>
|
||||
<Input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="请输入邮箱"
|
||||
required
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup>
|
||||
<Label>密码</Label>
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup>
|
||||
<Label>确认密码</Label>
|
||||
<Input
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="请再次输入密码"
|
||||
required
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<Button type="submit">注册</Button>
|
||||
</Form>
|
||||
|
||||
<Link href="/login">已有账号？立即登录</Link>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegisterPage;
|
||||
Reference in New Issue
Block a user