121 lines
3.3 KiB
TypeScript
121 lines
3.3 KiB
TypeScript
import React, { useState, FormEvent } from 'react';
|
||
import {
|
||
Box,
|
||
Button,
|
||
TextField,
|
||
Link,
|
||
Typography,
|
||
Stack,
|
||
Divider,
|
||
} from '@mui/material';
|
||
import { Link as RouterLink } from 'react-router-dom';
|
||
import GoogleIcon from '@mui/icons-material/Google';
|
||
import FacebookIcon from '@mui/icons-material/Facebook';
|
||
|
||
const LoginForm: React.FC = () => {
|
||
const [email, setEmail] = useState<string>('');
|
||
const [password, setPassword] = useState<string>('');
|
||
const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
|
||
|
||
const validate = () => {
|
||
const newErrors: { email?: string; password?: string } = {};
|
||
if (!email) {
|
||
newErrors.email = 'Email is required';
|
||
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||
newErrors.email = 'Invalid email address';
|
||
}
|
||
if (!password) {
|
||
newErrors.password = 'Password is required';
|
||
} else if (password.length < 6) {
|
||
newErrors.password = 'Password must be at least 6 characters';
|
||
}
|
||
setErrors(newErrors);
|
||
return Object.keys(newErrors).length === 0;
|
||
};
|
||
|
||
const handleSubmit = (e: FormEvent) => {
|
||
e.preventDefault();
|
||
if (!validate()) return;
|
||
console.log('Submitting', { email, password });
|
||
// Placeholder for actual authentication logic
|
||
};
|
||
|
||
const handleThirdPartyLogin = (provider: string) => {
|
||
console.log(`Logging in with ${provider}`);
|
||
// Placeholder for third‑party auth
|
||
};
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
maxWidth: 400,
|
||
mx: 'auto',
|
||
mt: 8,
|
||
p: 4,
|
||
border: '1px solid #e0e0e0',
|
||
borderRadius: 2,
|
||
boxShadow: 3,
|
||
}}
|
||
>
|
||
<Typography variant="h5" component="h1" gutterBottom>
|
||
Sign In
|
||
</Typography>
|
||
<Box component="form" onSubmit={handleSubmit} noValidate>
|
||
<TextField
|
||
label="Email"
|
||
type="email"
|
||
fullWidth
|
||
margin="normal"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
error={!!errors.email}
|
||
helperText={errors.email}
|
||
/>
|
||
<TextField
|
||
label="Password"
|
||
type="password"
|
||
fullWidth
|
||
margin="normal"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
error={!!errors.password}
|
||
helperText={errors.password}
|
||
/>
|
||
<Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>
|
||
<Link component={RouterLink} to="/forgot-password" variant="body2">
|
||
Forgot password?
|
||
</Link>
|
||
<Link component={RouterLink} to="/register" variant="body2">
|
||
Register
|
||
</Link>
|
||
</Box>
|
||
<Button type="submit" variant="contained" color="primary" fullWidth sx={{ mt: 2 }}>
|
||
Sign In
|
||
</Button>
|
||
</Box>
|
||
|
||
<Divider sx={{ my: 3 }}>or</Divider>
|
||
|
||
<Stack spacing={2}>
|
||
<Button
|
||
variant="outlined"
|
||
fullWidth
|
||
startIcon={<GoogleIcon />}
|
||
onClick={() => handleThirdPartyLogin('Google')}
|
||
>
|
||
Sign in with Google
|
||
</Button>
|
||
<Button
|
||
variant="outlined"
|
||
fullWidth
|
||
startIcon={<FacebookIcon />}
|
||
onClick={() => handleThirdPartyLogin('Facebook')}
|
||
>
|
||
Sign in with Facebook
|
||
</Button>
|
||
</Stack>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default LoginForm; |