Initial commit - restaurant dashboard

src/components/Authentication/SignUp_In/LoginForm.js

@@ -7,10 +7,12 @@ 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('');
@@ -28,21 +30,66 @@ const LoginForm = () => {
     const result = await authService.login(email, password);
 
     if (!result.success) {
-      setError(result.message || 'Login failed');
+      // 🔹 أولًا: نتحقق إن كانت الرسالة تشير إلى أن الحساب غير موجود
+      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('/dashboard', { replace: true });
+    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"}
@@ -116,6 +163,7 @@ const LoginForm = () => {
                 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' }}>
@@ -232,10 +280,10 @@ const LoginForm = () => {
                 <Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
               </Box>
 
-              {/* Google Button */}
-              <Button
+              {/* <Button
                 variant="outlined"
                 fullWidth
+                onClick={loginWithGoogle}
                 sx={{
                   fontWeight: 500,
                   fontSize: '16px',
@@ -248,8 +296,8 @@ const LoginForm = () => {
                   '&:hover': {
                     borderColor: 'black',
                     backgroundColor: 'transparent'
-                  }
-                  , fontFamily: 'PlusJakartaSans'
+                  },
+                  fontFamily: 'PlusJakartaSans'
                 }}
               >
                 <Box sx={{ display: 'flex', alignItems: 'center' }}>
@@ -260,10 +308,10 @@ const LoginForm = () => {
                   />
                 </Box>
                 Login with Google
-              </Button>
+              </Button> */}
 
               {/* Facebook Button */}
-              <Button
+              {/* <Button
                 variant="outlined"
                 fullWidth
                 sx={{
@@ -290,8 +338,7 @@ const LoginForm = () => {
                   />
                 </Box>
                 Login with Facebook
-              </Button>
-
+              </Button> */}
 
               {/* Register Link */}
               <Typography
@@ -300,7 +347,7 @@ const LoginForm = () => {
                   fontSize: '16px',
                   textAlign: 'center',
                   color: '#969BA7',
-                  pt: 3
+                  pt: 2
                 }}
               >
                 Don’t have an account?{' '}
@@ -338,6 +385,7 @@ const LoginForm = () => {
               </Typography>
 
               {/* Terms */}
+
               <Typography
                 variant="caption"
                 sx={{
@@ -348,14 +396,25 @@ const LoginForm = () => {
                 }}
               >
                 By logging in, I agree to the{' '}
-                <a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
+                <Box
+                  component="span"
+                  sx={{ color: '#2261FF', cursor: 'pointer', textDecoration: 'none' }}
+                  onClick={() => window.open('/terms', 'TermsOfService')}
+                >
                   Terms of Service
-                </a>{' '}
+                </Box>{' '}
                 and{' '}
-                <a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
+                <Box
+                  component="span"
+                  sx={{ color: '#2261FF', cursor: 'pointer', textDecoration: 'none' }}
+                  onClick={() => window.open('/privacy', 'PrivacyPolicy')}
+                >
                   Privacy Policy
-                </a>.
+                </Box>.
               </Typography>
+
+
+
             </Stack>
           </Box>
         </Box>
@@ -365,3 +424,4 @@ const LoginForm = () => {
 };
 
 export default LoginForm;
+