53 lines
1.2 KiB
JavaScript
53 lines
1.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
import authService from '../services/auth.service';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
function FormLogin() {
|
|
const navigate = useNavigate();
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
|
|
const handleLogin = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
await authService.login(username, password);
|
|
alert('Login successful!');
|
|
navigate('/models');
|
|
} catch (err) {
|
|
alert('Login failed');
|
|
console.error(err);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{ maxWidth: '400px', margin: '0 auto' }}>
|
|
<h2>Login</h2>
|
|
<form onSubmit={handleLogin}>
|
|
<div>
|
|
<label>Username:</label>
|
|
<input
|
|
type="text"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label>Password:</label>
|
|
<input
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit">Login</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FormLogin;
|