Adding Register UI

src/App.js

@@ -4,13 +4,15 @@ import { Route, Routes } from 'react-router-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
 import Login from './pages/Login/Login';
 import Profile from './pages/Profile/Profile';
+import Register from './components/Register/Register';
 
 export default function App() {
     return (
         <Router>
             <Routes>
                 <Route path='/' element={<Home />} />
                 <Route path='/login' element={<Login />} />
+                <Route path='/register' element={<Register />} />
                 <Route path='/profile/:uid' element={<Profile />} />
             </Routes>
         </Router>

src/components/Register/Register.css

@@ -0,0 +1,8 @@
+.register-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    padding: 16px;
+}

src/components/Register/Register.jsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import {
+    TextField,
+    FormControlLabel,
+    Checkbox,
+    Link,
+    Button,
+    Typography,
+    Container,
+    IconButton,
+} from '@mui/material';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import axios from 'axios';
+import './Register.css';
+
+const Register = () => {
+    const [username, setUsername] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+    const handleTogglePasswordVisibility = () => {
+        setShowPassword((prevShowPassword) => !prevShowPassword);
+    };
+
+    const handleToggleConfirmPasswordVisibility = () => {
+        setShowConfirmPassword(
+            (prevShowConfirmPassword) => !prevShowConfirmPassword
+        );
+    };
+
+    const handleRegister = async () => {
+        try {
+            const response = await axios.post('/api/register', {
+                username,
+                email,
+                password,
+            });
+            if (response.status === 200) {
+                // Registration successful, redirect to login page or desired location
+                window.location.href = '/login';
+            }
+        } catch (error) {
+            console.error(error);
+            // Handle registration error, display error message to the user
+        }
+    };
+
+    return (
+        <Container maxWidth='xs' className='register-container'>
+            <TextField
+                label='Username'
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+            />
+            <TextField
+                label='Email'
+                type='email'
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+            />
+            <TextField
+                label='Password'
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                InputProps={{
+                    endAdornment: (
+                        <IconButton onClick={handleTogglePasswordVisibility}>
+                            {showPassword ? <VisibilityOff /> : <Visibility />}
+                        </IconButton>
+                    ),
+                }}
+            />
+            <TextField
+                label='Confirm Password'
+                type={showConfirmPassword ? 'text' : 'password'}
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                InputProps={{
+                    endAdornment: (
+                        <IconButton
+                            onClick={handleToggleConfirmPasswordVisibility}
+                        >
+                            {showConfirmPassword ? (
+                                <VisibilityOff />
+                            ) : (
+                                <Visibility />
+                            )}
+                        </IconButton>
+                    ),
+                }}
+            />
+            {/* Add optional fields here */}
+            <FormControlLabel
+                control={<Checkbox />}
+                label='I agree to the Terms and Conditions'
+            />
+            <Typography variant='body2'>
+                Read our{' '}
+                <Link href='/privacy-policy' target='_blank'>
+                    Privacy Policy
+                </Link>
+                .
+            </Typography>
+            <Button variant='contained' onClick={handleRegister}>
+                Sign Up
+            </Button>
+        </Container>
+    );
+};
+
+export default Register;

src/pages/Login/Login.css

@@ -0,0 +1,42 @@
+.login-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    font-family: 'Roboto', 'Open Sans', sans-serif;
+}
+
+.MuiFormControl-root {
+    margin-bottom: 15px;
+    /* Adjust margin between the fields */
+}
+
+.MuiInputBase-input {
+    font-family: 'Roboto', 'Open Sans', sans-serif;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+.checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+    /* Adjust margin between the checkbox and the label */
+}
+
+.forgot-password {
+    margin-bottom: 5px;
+    /* Adjust margin below the "Forgot Password" link */
+}
+
+.login-button {
+    /* Adjust margin above the login button */
+    background-color: #1976d2;
+    /* Set primary color */
+    color: #fff;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}

src/pages/Login/Login.jsx

@@ -1,7 +1,14 @@
 import React, { useState } from 'react';
 import axios from 'axios';
-import { IconButton, InputAdornment, TextField } from '@mui/material';
+import {
+    IconButton,
+    InputAdornment,
+    TextField,
+    Typography,
+} from '@mui/material';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
+import { Link } from 'react-router-dom';
+import './Login.css';
 
 function Login() {
     const [usernameOrEmail, setUsernameOrEmail] = useState('');
@@ -17,15 +24,15 @@ function Login() {
                 rememberMe,
             });
             if (response.status === 200) {
-                window.location.href = '/'; // Redirect to the desired page
+                window.location.href = 'http://localhost:3000/home'; // Redirect to the desired page
             }
         } catch (error) {
             console.error(error);
         }
     };
 
     return (
-        <div>
+        <div className='login-wrapper'>
             <TextField
                 label='Username or Email'
                 value={usernameOrEmail}
@@ -53,16 +60,24 @@ function Login() {
                     ),
                 }}
             />
-            <label>
+            <div className='checkbox-wrapper'>
                 <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>
+                <label>Remember Me</label>
+            </div>
+            <a href='/forgot-password' className='forgot-password'>
+                Forgot Password
+            </a>
+            <button onClick={handleLogin} className='login-button'>
+                Log In
+            </button>
+            <Typography variant='body2'>
+                Don&apos;t have an account? Please{' '}
+                <Link to='/register'>register here</Link>
+            </Typography>
         </div>
     );
 }