Linking of login, logout and registration interfaces.

src/components/Authentication/SignUp_In/LoginForm.js

@@ -3,27 +3,47 @@ import { TextField, Button, Typography, Stack, Box, IconButton, InputAdornment }
 import { useTheme } from '@mui/material/styles';
 import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
 import { VisibilityOutlined } from '@mui/icons-material';
-import SidePanel from './SidePanel'; // استدعاء SidePanel من نفس المجلد أو حسب المسار المناسب
-import { useNavigate } from 'react-router-dom';
-import { Link } from 'react-router-dom';
-
+import SidePanel from './SidePanel';
+import { useNavigate, Link } from 'react-router-dom';
+import authService from '../../../services/authService';
 
 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);
+    setShowPassword(prev => !prev);
   };
-  const handleLogin = () => {
-    // بعد تنفيذ عملية تسجيل الدخول بنجاح، يتم التوجيه
-    navigate('/dashboard');
+
+  const handleLogin = async () => {
+    setLoading(true);
+    setError('');
+
+    const result = await authService.login(email, password);
+
+    if (!result.success) {
+      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 });
   };
+
   return (
-
-
     <Box
       bgcolor={"background.default"}
       color={"text.primary"}
@@ -38,14 +58,11 @@ const LoginForm = () => {
         },
       }}
     >
-      {/* SidePanel ثابت */}
       <SidePanel />
-      
-      {/* Login Content */}
       <Box
         sx={{
-          marginLeft: { xs: 0, sm: '50%'  },
-          width: { xs: '100%', sm: '50%' ,md:'70%'},
+          marginLeft: { xs: 0, sm: '50%' },
+          width: { xs: '100%', sm: '50%', md: '70%' },
         }}
       >
         <Box
@@ -76,7 +93,7 @@ const LoginForm = () => {
           >
             <Stack spacing={2}>
 
-              {/* Logo */}
+              {/* الشعار */}
               <Box>
                 <img
                   src="/image.png"
@@ -90,30 +107,16 @@ const LoginForm = () => {
                 />
               </Box>
 
-              <Typography
-                variant="h4"
-                fontWeight={700}
-                sx={{
-                  fontSize: {
-                    xs: '1.8rem',
-                    sm: '2rem',
-                    md: '2.2rem'
-                  }
-                }}
-              >
+              {/* عنوان تسجيل الدخول */}
+              <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 }}
-              >
+              <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>
 
-              {/* Email Input */}
+              {/* إدخال البريد */}
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                 <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
                   Email
@@ -123,15 +126,17 @@ const LoginForm = () => {
                   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': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
+                      '&.Mui-focused fieldset': {
                         borderColor: theme.palette.primary.main,
-                        boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
+                        boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
                       }
                     },
                     '& .MuiOutlinedInput-root.Mui-focused': {
@@ -142,7 +147,7 @@ const LoginForm = () => {
                 />
               </Box>
 
-              {/* Password Input */}
+              {/* إدخال كلمة السر */}
               <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                 <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
                   Password
@@ -153,15 +158,17 @@ const LoginForm = () => {
                   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': { // أضف هذا الجزء لتغيير لون الحدود عند التركيز
+                      '&.Mui-focused fieldset': {
                         borderColor: theme.palette.primary.main,
-                        boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)' // ظل برتقالي خفيف
+                        boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)'
                       }
                     },
                     '& .MuiOutlinedInput-root.Mui-focused': {
@@ -184,14 +191,22 @@ const LoginForm = () => {
                 />
               </Box>
 
-              {/* Login Button */}
+              {/* عرض الخطأ */}
+              {error && (
+                <Typography color="error" textAlign="center">
+                  {error}
+                </Typography>
+              )}
+
+              {/* زر تسجيل الدخول */}
               <Box sx={{ pt: 2 }}>
                 <Button
                   variant="contained"
                   fullWidth
                   onClick={handleLogin}
+                  disabled={loading}
                   sx={{
-                     fontFamily: 'PlusJakartaSans' ,
+                    fontFamily: 'PlusJakartaSans',
                     fontWeight: 600,
                     fontSize: { xs: '14px', sm: '16px' },
                     height: { xs: '45px', sm: '52px' },
@@ -204,7 +219,7 @@ const LoginForm = () => {
                     }
                   }}
                 >
-                  Log in
+                  {loading ? 'Loading...' : 'Log in'}
                 </Button>
               </Box>