45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
import React, { useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Button, Container, Paper, Typography, Box } from '@mui/material';
|
|
|
|
const Login = () => {
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
const storedUser = localStorage.getItem('user');
|
|
if (storedUser) {
|
|
navigate('/dashboard');
|
|
}
|
|
}, [navigate]);
|
|
|
|
const handleLogin = () => {
|
|
const API_BASE = process.env.REACT_APP_API_BASE || '';
|
|
window.location.href = `${API_BASE}/auth/discord`;
|
|
};
|
|
|
|
return (
|
|
<Container component="main" maxWidth="xs" sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
|
|
<Paper elevation={3} sx={{ padding: 4, display: 'flex', flexDirection: 'column', alignItems: 'center', borderRadius: '20px', boxShadow: '0 8px 16px 0 rgba(0,0,0,0.2)' }}>
|
|
<Typography component="h1" variant="h4" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
|
|
Welcome!
|
|
</Typography>
|
|
<Typography component="p" variant="h6" sx={{ marginBottom: 4, textAlign: 'center' }}>
|
|
Login with your Discord account to continue
|
|
</Typography>
|
|
<Box sx={{ width: '100%' }}>
|
|
<Button
|
|
fullWidth
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={handleLogin}
|
|
sx={{ borderRadius: '10px', padding: '10px 0', textTransform: 'none', fontSize: '1.2rem' }}
|
|
>
|
|
Login with Discord
|
|
</Button>
|
|
</Box>
|
|
</Paper>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default Login; |