Adding initial login UI and dropdown icon state change

src/components/Dropdown/Dropdown.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import Avatar from '@mui/material/Avatar';
 import Menu from '@mui/material/Menu';
@@ -8,25 +9,32 @@ import Divider from '@mui/material/Divider';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import Settings from '@mui/icons-material/Settings';
-import Logout from '@mui/icons-material/Logout';
+import LogoutIcon from '@mui/icons-material/Logout';
 import LoginIcon from '@mui/icons-material/Login';
 import HelpIcon from '@mui/icons-material/Help';
 import MessageIcon from '@mui/icons-material/Message';
 
 export default function Dropdown() {
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const [logIn, setLogIn] = React.useState(true);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [loggedIn, setLoggedIn] = useState(true); // Change the state name to 'loggedIn'
     const open = Boolean(anchorEl);
+    const navigate = useNavigate();
+
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
+
     const handleClose = () => {
         setAnchorEl(null);
     };
 
     const handleAccount = () => {
-        logIn ? setLogIn(false) : setLogIn(true);
+        setLoggedIn(!loggedIn); // Toggle the loggedIn state
+        if (!loggedIn) {
+            navigate('/login'); // Navigate to the login route
+        }
     };
+
     return (
         <React.Fragment>
             <Box
@@ -98,10 +106,10 @@ export default function Dropdown() {
                     </ListItemIcon>
                     Settings
                 </MenuItem>
-                {logIn ? (
+                {loggedIn ? ( // Use the 'loggedIn' state to conditionally render the Logout/Login menu item
                     <MenuItem onClick={handleAccount}>
                         <ListItemIcon>
-                            <Logout fontSize='small' />
+                            <LogoutIcon fontSize='small' />
                         </ListItemIcon>
                         Logout
                     </MenuItem>

src/pages/Login/Login.jsx

@@ -1,7 +1,70 @@
-import React from 'react';
+import React, { useState } from 'react';
+import axios from 'axios';
+import { IconButton, InputAdornment, TextField } from '@mui/material';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 
 function Login() {
-    return <div>Login</div>;
+    const [usernameOrEmail, setUsernameOrEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [rememberMe, setRememberMe] = useState(false);
+
+    const handleLogin = async () => {
+        try {
+            const response = await axios.post('/api/login', {
+                usernameOrEmail,
+                password,
+                rememberMe,
+            });
+            if (response.status === 200) {
+                window.location.href = '/'; // Redirect to the desired page
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    return (
+        <div>
+            <TextField
+                label='Username or Email'
+                value={usernameOrEmail}
+                onChange={(e) => setUsernameOrEmail(e.target.value)}
+            />
+            <TextField
+                label='Password'
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                InputProps={{
+                    endAdornment: (
+                        <InputAdornment position='end'>
+                            <IconButton
+                                onClick={() => setShowPassword(!showPassword)}
+                                onMouseDown={(e) => e.preventDefault()}
+                            >
+                                {showPassword ? (
+                                    <VisibilityOff />
+                                ) : (
+                                    <Visibility />
+                                )}
+                            </IconButton>
+                        </InputAdornment>
+                    ),
+                }}
+            />
+            <label>
+                <input
+                    type='checkbox'
+                    checked={rememberMe}
+                    onChange={(e) => setRememberMe(e.target.checked)}
+                />
+                Remember Me
+            </label>
+            <a href='/forgot-password'>Forgot Password</a>
+            <button onClick={handleLogin}>Log In</button>
+        </div>
+    );
 }
 
 export default Login;