authentication related components created

frontend/src/components/Login.jsx

@@ -0,0 +1,122 @@
+import TextField from '@mui/material/TextField';
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+
+const Login = () => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+  });
+  const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setIsLoading(true);
+    try {
+      const response = await fetch("http://localhost:3500/auth/login", {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      });
+      if (!response.ok) {
+        const errData = await response.json();
+        throw new Error(errData.message || "Failed to login");
+      }
+      const { token, user } = await response.json();
+      localStorage.setItem('token', token);
+      navigate("/");
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const ColorButton = styled(Button)(() => ({
+    color: '#FFFFFF',
+    backgroundColor: '#8D538D',
+    '&:hover': {
+      backgroundColor: '#514ACD',
+    },
+    borderRadius: '8px',
+  }));
+
+  return (
+    <div className='flex flex-col justify-center items-center min-h-screen bg-gray-100'>
+      <div className='mb-8 text-center'>
+        <h1 className='text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#8D538D] to-[#514ACD]'>
+          Welcome to JobNode!
+        </h1>
+        <p className='text-xl text-gray-700 mt-2'>Your gateway to career opportunities</p>
+      </div>
+
+      <div className='flex items-center bg-white shadow-lg rounded-lg overflow-hidden w-[40em]'>
+        <form
+          className='flex flex-col gap-4 w-1/2 p-8'
+          onSubmit={handleSubmit}
+        >
+          <h1 className='text-2xl font-bold text-center text-gray-800 mb-4'>Login</h1>
+          <TextField
+            id='login-email'
+            label='Email'
+            variant='outlined'
+            onChange={handleChange}
+            type='email'
+            name='email'
+            value={formData.email}
+          />
+          <TextField
+            id='login-password'
+            label='Password'
+            variant='outlined'
+            onChange={handleChange}
+            type='password'
+            name='password'
+            value={formData.password}
+          />
+          <Link to='/forgot-password' className='text-sm text-blue-500 hover:underline self-center'>
+            Forgot Password?
+          </Link>
+          {error && <p className='text-red-500 text-center'>{error}</p>}
+          <ColorButton
+            variant='contained'
+            size='large'
+            type='submit'
+            disabled={isLoading}
+          >
+            {isLoading ? 'Logging in...' : 'Login'}
+          </ColorButton>
+          <div className='flex items-center gap-2 text-sm mt-4'>
+            <div className='w-full h-[1px] bg-gray-300'></div>
+          </div>
+          <p className='text-sm text-center mt-4'>
+            Don't have an account?{' '}
+            <Link to='/signup' className='text-blue-500 hover:underline'>
+              Register
+            </Link>
+          </p>
+        </form>
+        <div className='w-1/2 bg-gray-200 flex items-center justify-center'>
+          <img src='/loginImg.jpeg' alt='Illustration' className='w-full h-auto' />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

frontend/src/components/RegistrationModal.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import Divider from '@mui/material/Divider';
+
+// You can use this styled button or import your existing ColorButton
+const ColorButton = styled(Button)(() => ({
+  color: '#FFFFFF',
+  backgroundColor: '#8D538D',
+  '&:hover': {
+    backgroundColor: '#514ACD',
+  },
+  borderRadius: '8px',
+}));
+
+// Standalone Registration Success Modal component
+const RegistrationSuccessModal = ({ 
+  open, 
+  onClose, 
+  userType = 'JobSeeker' // Default value in case it's not provided
+}) => {
+  return (
+    <Dialog 
+      open={open} 
+      onClose={onClose}
+      PaperProps={{
+        style: {
+          borderRadius: '12px',
+          padding: '16px',
+          maxWidth: '450px'
+        }
+      }}
+    >
+      <DialogTitle 
+        sx={{ 
+          textAlign: 'center', 
+          fontWeight: 'bold',
+          color: '#8D538D',
+          fontSize: '1.5rem'
+        }}
+      >
+        Registration Successful
+      </DialogTitle>
+
+      <Divider />
+
+      <DialogContent sx={{ padding: '24px 16px' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <CheckCircleOutlineIcon 
+            sx={{ 
+              fontSize: 80, 
+              color: '#8D538D', 
+              marginBottom: '16px' 
+            }} 
+          />
+
+          <DialogContentText 
+            sx={{ 
+              textAlign: 'center',
+              fontSize: '1.1rem',
+              color: '#333'
+            }}
+          >
+            Your account has been successfully created! Please log in to start exploring opportunities.
+          </DialogContentText>
+
+          <DialogContentText 
+            sx={{ 
+              textAlign: 'center',
+              fontSize: '0.9rem',
+              color: '#666',
+              marginTop: '8px'
+            }}
+          >
+            {userType === 'JobSeeker' 
+              ? "You're now ready to find your dream job!" 
+              : "You're now ready to find talented candidates!"}
+          </DialogContentText>
+        </div>
+      </DialogContent>
+
+      <DialogActions sx={{ padding: '0 16px 16px', justifyContent: 'center' }}>
+        <ColorButton 
+          onClick={onClose} 
+          sx={{ 
+            minWidth: '120px',
+            fontWeight: 'bold',
+            padding: '10px 24px'
+          }}
+        >
+          Proceed to Login
+        </ColorButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default RegistrationSuccessModal;