import React, { useState } from 'react';
import {
Container,
Box,
TextField,
Button,
Typography,
Alert,
Paper,
Avatar
} from '@mui/material';
import { LockOutlined } from '@mui/icons-material';
import authService from '../services/auth';
import apiService from '../services/api';
const LoginPage: React.FC = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError('');
setLoading(true);
try {
const success = await authService.login(username, password);
if (success) {
window.location.href = '/';
} else {
setError('Invalid username or password');
}
} catch (err) {
setError('Login failed. Please try again.');
} finally {
setLoading(false);
}
};
return (
<Container component="main" maxWidth="xs">
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Paper elevation={3} sx={{ p: 4, width: '100%' }}>
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlined />
</Avatar>
<Typography component="h1" variant="h5">
Sign in to MCP
</Typography>
{error && (
<Alert severity="error" sx={{ width: '100%', mt: 2 }}>
{error}
</Alert>
)}
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 1, width: '100%' }}>
<TextField
margin="normal"
required
fullWidth
id="username"
label="Username"
name="username"
autoComplete="username"
autoFocus
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
disabled={loading}
>
{loading ? 'Signing in...' : 'Sign In'}
</Button>
</Box>
</Box>
</Paper>
</Box>
</Container>
);
};
export default LoginPage;
