70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
/**
|
|
* @deprecated Use src/pages/sign-in.tsx instead.
|
|
* This file is kept for reference and is not used in the router.
|
|
*/
|
|
import { useState } from 'react';
|
|
import type { FormEvent } from 'react';
|
|
import { Navigate } from 'react-router';
|
|
import authService from '../services/auth.service';
|
|
import { useAuthStore } from '../stores/useAuthStore';
|
|
|
|
export default function Login() {
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [message, setMessage] = useState('');
|
|
const [redirect, setRedirect] = useState<string | null>(null);
|
|
|
|
const user = useAuthStore((s) => s.user);
|
|
if (user || redirect) return <Navigate to={redirect ?? '/home'} />;
|
|
|
|
const handleLogin = async (e: FormEvent) => {
|
|
e.preventDefault();
|
|
setMessage('');
|
|
try {
|
|
await authService.login(username, password);
|
|
setRedirect('/home');
|
|
} catch (error: unknown) {
|
|
setMessage(error instanceof Error ? error.message : '登录失败');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="col-md-12">
|
|
<div className="card card-container">
|
|
<form onSubmit={(e) => void handleLogin(e)}>
|
|
<div className="form-group">
|
|
<label htmlFor="username">Username</label>
|
|
<input
|
|
id="username"
|
|
type="text"
|
|
className="form-control"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="password">Password</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
className="form-control"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="form-group">
|
|
<button type="submit" className="btn btn-primary btn-block">
|
|
Login
|
|
</button>
|
|
</div>
|
|
{message && (
|
|
<div className="alert alert-danger" role="alert">
|
|
{message}
|
|
</div>
|
|
)}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|