forked from RaghadAlkhous/RestaurantDash
428 lines
14 KiB
JavaScript
428 lines
14 KiB
JavaScript
import React, { useState } from 'react';
|
||
import { TextField, Button, Typography, Stack, Box, IconButton, InputAdornment } from '@mui/material';
|
||
import { useTheme } from '@mui/material/styles';
|
||
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
|
||
import { VisibilityOutlined } from '@mui/icons-material';
|
||
import SidePanel from './SidePanel';
|
||
import { useNavigate, Link } from 'react-router-dom';
|
||
import authService from '../../../services/authService';
|
||
|
||
import { GoogleLogin, useGoogleLogin } from '@react-oauth/google';
|
||
import { jwtDecode } from "jwt-decode";
|
||
|
||
const LoginForm = () => {
|
||
const navigate = useNavigate();
|
||
const theme = useTheme();
|
||
const [showPassword, setShowPassword] = useState(false);
|
||
const [email, setEmail] = useState('');
|
||
const [password, setPassword] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
|
||
const handleTogglePassword = () => {
|
||
setShowPassword(prev => !prev);
|
||
};
|
||
|
||
const handleLogin = async () => {
|
||
setLoading(true);
|
||
setError('');
|
||
|
||
const result = await authService.login(email, password);
|
||
|
||
if (!result.success) {
|
||
// 🔹 أولًا: نتحقق إن كانت الرسالة تشير إلى أن الحساب غير موجود
|
||
if (result.message && result.message.includes('Account not found')) {
|
||
setError('This account is not registered.');
|
||
}
|
||
// 🔹 ثانيًا: نتحقق من "Invalid credentials"
|
||
else if (result.message && result.message.includes('Invalid credentials')) {
|
||
setError('Email or password is incorrect.');
|
||
}
|
||
// 🔹 ثالثًا: نعرض أول خطأ موجود في كائن errors
|
||
else if (result.errors) {
|
||
const firstError = Object.values(result.errors)[0][0];
|
||
setError(firstError);
|
||
}
|
||
// 🔹 أخيرًا: fallback لأي رسالة أخرى
|
||
else {
|
||
setError(result.message || 'Login failed');
|
||
}
|
||
|
||
setLoading(false);
|
||
return;
|
||
}
|
||
|
||
localStorage.setItem('token', result.data.token);
|
||
localStorage.setItem('refresh_token', result.data.refresh_token);
|
||
setLoading(false);
|
||
navigate('/restaurant', { replace: true });
|
||
};
|
||
|
||
const handleGoogleSuccess = async (tokenResponse) => {
|
||
try {
|
||
const res = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
|
||
headers: {
|
||
Authorization: `Bearer ${tokenResponse.access_token}`,
|
||
},
|
||
});
|
||
|
||
const userInfo = await res.json();
|
||
console.log('Google User Info:', userInfo);
|
||
|
||
if (userInfo.email) {
|
||
setEmail(userInfo.email);
|
||
}
|
||
|
||
setPassword('');
|
||
localStorage.setItem("google_user", JSON.stringify(userInfo));
|
||
} catch (e) {
|
||
console.error("Google login failed:", e);
|
||
setError("Google login failed");
|
||
}
|
||
};
|
||
|
||
const handleGoogleError = () => {
|
||
setError("Google login failed");
|
||
};
|
||
|
||
const loginWithGoogle = useGoogleLogin({
|
||
onSuccess: handleGoogleSuccess,
|
||
onError: handleGoogleError,
|
||
});
|
||
|
||
return (
|
||
<Box
|
||
bgcolor={"background.default"}
|
||
color={"text.primary"}
|
||
display="flex"
|
||
sx={{
|
||
width: '100vw',
|
||
height: '100vh',
|
||
overflow: 'auto',
|
||
scrollbarWidth: 'none',
|
||
'&::-webkit-scrollbar': {
|
||
display: 'none',
|
||
},
|
||
}}
|
||
>
|
||
<SidePanel />
|
||
<Box
|
||
sx={{
|
||
marginLeft: { xs: 0, sm: '50%' },
|
||
width: { xs: '100%', sm: '50%', md: '70%' },
|
||
}}
|
||
>
|
||
<Box
|
||
flex={1}
|
||
paddingTop={4}
|
||
paddingBottom={4}
|
||
paddingLeft={2}
|
||
paddingRight={2}
|
||
sx={{
|
||
backgroundColor: '#FFFFFF',
|
||
minHeight: '10vh',
|
||
display: 'flex',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
position: 'sticky',
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: {
|
||
xs: '120%',
|
||
sm: '100%',
|
||
md: '150%',
|
||
lg: '150%'
|
||
},
|
||
maxWidth: '600px'
|
||
}}
|
||
>
|
||
<Stack spacing={2}>
|
||
|
||
{/* الشعار */}
|
||
<Box>
|
||
<img
|
||
src="/image.png"
|
||
alt="logo"
|
||
style={{
|
||
width: '4vw',
|
||
maxWidth: '80px',
|
||
height: 'auto',
|
||
objectFit: 'contain'
|
||
}}
|
||
/>
|
||
</Box>
|
||
|
||
{/* عنوان تسجيل الدخول */}
|
||
<Typography variant="h4" fontWeight={700} sx={{ fontSize: { xs: '1.8rem', sm: '2rem', md: '2.2rem' } }}>
|
||
Login
|
||
</Typography>
|
||
|
||
<Typography variant="body2" color="text.secondary" fontWeight={500} sx={{ pb: 1 }}>
|
||
Enter your username and password to access your account securely. Welcome back to our service!
|
||
</Typography>
|
||
|
||
|
||
{/* إدخال البريد */}
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||
Email
|
||
</Typography>
|
||
<TextField
|
||
placeholder="Enter your email"
|
||
type="email"
|
||
variant="outlined"
|
||
fullWidth
|
||
value={email}
|
||
onChange={e => setEmail(e.target.value)}
|
||
sx={{
|
||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||
'& input::placeholder': { color: '#969BA7' },
|
||
'& .MuiOutlinedInput-root': {
|
||
borderRadius: '10px',
|
||
transition: '0.3s',
|
||
'&.Mui-focused fieldset': {
|
||
borderColor: theme.palette.primary.main,
|
||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||
}
|
||
},
|
||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||
borderColor: '#3f51b5',
|
||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||
}
|
||
}}
|
||
/>
|
||
</Box>
|
||
|
||
{/* إدخال كلمة السر */}
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||
<Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
|
||
Password
|
||
</Typography>
|
||
<TextField
|
||
type={showPassword ? 'text' : 'password'}
|
||
placeholder="Enter your password"
|
||
fullWidth
|
||
variant="outlined"
|
||
autoComplete="new-password"
|
||
value={password}
|
||
onChange={e => setPassword(e.target.value)}
|
||
sx={{
|
||
'& input': { fontWeight: 500, fontSize: '15px' },
|
||
'& input::placeholder': { color: '#969BA7' },
|
||
'& .MuiOutlinedInput-root': {
|
||
borderRadius: '10px',
|
||
transition: '0.3s',
|
||
'&.Mui-focused fieldset': {
|
||
borderColor: theme.palette.primary.main,
|
||
boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
|
||
}
|
||
},
|
||
'& .MuiOutlinedInput-root.Mui-focused': {
|
||
borderColor: '#3f51b5',
|
||
boxShadow: '0 0 0 2px rgba(63,81,181,0.1)'
|
||
},
|
||
'& input::-ms-reveal, & input::-ms-clear': {
|
||
display: 'none',
|
||
},
|
||
}}
|
||
InputProps={{
|
||
endAdornment: (
|
||
<InputAdornment position="end">
|
||
<IconButton onClick={handleTogglePassword} edge="end">
|
||
{showPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlined />}
|
||
</IconButton>
|
||
</InputAdornment>
|
||
)
|
||
}}
|
||
/>
|
||
</Box>
|
||
|
||
{/* عرض الخطأ */}
|
||
{error && (
|
||
<Typography color="error" textAlign="center">
|
||
{error}
|
||
</Typography>
|
||
)}
|
||
|
||
{/* زر تسجيل الدخول */}
|
||
<Box sx={{ pt: 2 }}>
|
||
<Button
|
||
variant="contained"
|
||
fullWidth
|
||
onClick={handleLogin}
|
||
disabled={loading}
|
||
sx={{
|
||
fontFamily: 'PlusJakartaSans',
|
||
fontWeight: 600,
|
||
fontSize: { xs: '14px', sm: '16px' },
|
||
height: { xs: '45px', sm: '52px' },
|
||
borderRadius: '50px',
|
||
textTransform: 'none',
|
||
color: 'white',
|
||
backgroundColor: theme.palette.primary.main,
|
||
'&:hover': {
|
||
backgroundColor: theme.palette.primary.hover
|
||
}
|
||
}}
|
||
>
|
||
{loading ? 'Loading...' : 'Log in'}
|
||
</Button>
|
||
</Box>
|
||
|
||
{/* Divider */}
|
||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 2 }}>
|
||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
||
<Typography variant="body1" sx={{ fontWeight: 500, fontSize: '16px', color: 'black', fontFamily: 'PlusJakartaSans' }}>
|
||
Or
|
||
</Typography>
|
||
<Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
|
||
</Box>
|
||
|
||
{/* <Button
|
||
variant="outlined"
|
||
fullWidth
|
||
onClick={loginWithGoogle}
|
||
sx={{
|
||
fontWeight: 500,
|
||
fontSize: '16px',
|
||
borderRadius: '50px',
|
||
height: '50px',
|
||
textTransform: 'none',
|
||
gap: 1,
|
||
borderColor: '#E6E6E6',
|
||
color: 'black',
|
||
'&:hover': {
|
||
borderColor: 'black',
|
||
backgroundColor: 'transparent'
|
||
},
|
||
fontFamily: 'PlusJakartaSans'
|
||
}}
|
||
>
|
||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||
<img
|
||
src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"
|
||
alt="Google"
|
||
style={{ width: 25, height: 25 }}
|
||
/>
|
||
</Box>
|
||
Login with Google
|
||
</Button> */}
|
||
|
||
{/* Facebook Button */}
|
||
{/* <Button
|
||
variant="outlined"
|
||
fullWidth
|
||
sx={{
|
||
fontWeight: 500,
|
||
fontSize: '16px',
|
||
borderRadius: '50px',
|
||
height: '50px',
|
||
textTransform: 'none',
|
||
gap: 1,
|
||
borderColor: '#E6E6E6',
|
||
color: 'black',
|
||
'&:hover': {
|
||
borderColor: 'black',
|
||
backgroundColor: 'transparent'
|
||
}
|
||
, fontFamily: 'PlusJakartaSans'
|
||
}}
|
||
>
|
||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||
<img
|
||
src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png"
|
||
alt="Facebook"
|
||
style={{ width: 25, height: 25 }}
|
||
/>
|
||
</Box>
|
||
Login with Facebook
|
||
</Button> */}
|
||
|
||
{/* Register Link */}
|
||
<Typography
|
||
variant="body2"
|
||
sx={{
|
||
fontSize: '16px',
|
||
textAlign: 'center',
|
||
color: '#969BA7',
|
||
pt: 2
|
||
}}
|
||
>
|
||
Don’t have an account?{' '}
|
||
<Link
|
||
to="/register"
|
||
style={{
|
||
color: '#2261FF',
|
||
textDecoration: 'none'
|
||
}}
|
||
>
|
||
Register
|
||
</Link>
|
||
</Typography>
|
||
|
||
{/* ForgetPassword Link */}
|
||
<Typography
|
||
variant="body2"
|
||
sx={{
|
||
fontSize: '14px',
|
||
textAlign: 'center',
|
||
color: '#969BA7',
|
||
pt: 3
|
||
}}
|
||
>
|
||
Did you forget the password?{' '}
|
||
<Link
|
||
to="/forget"
|
||
style={{
|
||
color: '#2261FF',
|
||
textDecoration: 'none'
|
||
}}
|
||
>
|
||
Forget Password
|
||
</Link>
|
||
</Typography>
|
||
|
||
{/* Terms */}
|
||
|
||
<Typography
|
||
variant="caption"
|
||
sx={{
|
||
fontSize: '14px',
|
||
textAlign: 'center',
|
||
color: '#969BA7',
|
||
pt: 5
|
||
}}
|
||
>
|
||
By logging in, I agree to the{' '}
|
||
<Box
|
||
component="span"
|
||
sx={{ color: '#2261FF', cursor: 'pointer', textDecoration: 'none' }}
|
||
onClick={() => window.open('/terms', 'TermsOfService')}
|
||
>
|
||
Terms of Service
|
||
</Box>{' '}
|
||
and{' '}
|
||
<Box
|
||
component="span"
|
||
sx={{ color: '#2261FF', cursor: 'pointer', textDecoration: 'none' }}
|
||
onClick={() => window.open('/privacy', 'PrivacyPolicy')}
|
||
>
|
||
Privacy Policy
|
||
</Box>.
|
||
</Typography>
|
||
|
||
|
||
|
||
</Stack>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default LoginForm;
|
||
|