From 655eadc068820b34504226ba51d32b012f5760a0 Mon Sep 17 00:00:00 2001
From: AmitChauhan63390 <amit63390@gmail.com>
Date: Sun, 8 Dec 2024 05:41:11 +0530
Subject: [PATCH] forms

---
 src/components/molecules/NavBar.tsx |   2 +-
 src/pages/Login.tsx                 | 186 +++++++++++++++++-----------
 src/pages/PageWrappper.tsx          |   3 +
 src/pages/Register.tsx              |  87 +++++++++----
 4 files changed, 175 insertions(+), 103 deletions(-)

diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index d8831ea6..d7cb726c 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -258,4 +258,4 @@ const ControlsContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
-`;
\ No newline at end of file
+`;
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index de5f4838..12f49e57 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,22 +1,21 @@
 import axios from "axios";
-import { useState, useContext, useEffect, FormEvent } from "react";
+import { useState, useContext, useEffect } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { AuthContext } from "../context/auth";
-import { Box, Typography, TextField, Button, CircularProgress, Grid } from "@mui/material";
+import { Box, Typography, TextField, Button, CircularProgress } from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
+import { useThemeMode } from "../context/theme-provider";
 
 const Login = () => {
-  const [form, setForm] = useState({
-    email: "",
-    password: "",
-  });
+  const [form, setForm] = useState({ email: "", password: "" });
   const [loading, setLoading] = useState(false);
   const { notify } = useGlobalInfoStore();
   const { email, password } = form;
 
   const { state, dispatch } = useContext(AuthContext);
   const { user } = state;
+  const { darkMode } = useThemeMode();
 
   const navigate = useNavigate();
 
@@ -35,10 +34,11 @@ const Login = () => {
     e.preventDefault();
     setLoading(true);
     try {
-      const { data } = await axios.post(`${apiUrl}/auth/login`, {
-        email,
-        password,
-      }, { withCredentials: true });
+      const { data } = await axios.post(
+        `${apiUrl}/auth/login`,
+        { email, password },
+        { withCredentials: true }
+      );
       dispatch({ type: "LOGIN", payload: data });
       notify("success", "Welcome to Maxun!");
       window.localStorage.setItem("user", JSON.stringify(data));
@@ -58,76 +58,112 @@ const Login = () => {
         maxHeight: "100vh",
         mt: 6,
         padding: 4,
+        backgroundColor: darkMode ? "#121212" : "#ffffff",
+        
       }}
     >
-    
-        <Box
-          component="form"
-          onSubmit={submitForm}
-          sx={{
-            textAlign: "center",
-            backgroundColor: "#ffffff",
-            padding: 6,
-            borderRadius: 5,
-            boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2), 0px -5px 10px rgba(0, 0, 0, 0.15)",
-            display: "flex",
-            flexDirection: "column",
+      <Box
+        component="form"
+        onSubmit={submitForm}
+        sx={{
+          textAlign: "center",
+          backgroundColor: darkMode ? "#1e1e1e" : "#ffffff",
+          color: darkMode ? "#ffffff" : "#333333",
+          padding: 6,
+          borderRadius: 5,
+          boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2), 0px -5px 10px rgba(0, 0, 0, 0.15)",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          maxWidth: 400,
+          width: "100%",
+        }}
+      >
+        <img
+          src="../src/assets/maxunlogo.png"
+          alt="logo"
+          height={55}
+          width={60}
+          style={{
+            marginBottom: 20,
+            borderRadius: "20%",
             alignItems: "center",
-            maxWidth: 400,
-            width: "100%",
           }}
+        />
+        <Typography variant="h4" gutterBottom>
+          Welcome Back!
+        </Typography>
+        <TextField
+          fullWidth
+          label="Email"
+          name="email"
+          value={email}
+          onChange={handleChange}
+          margin="normal"
+          variant="outlined"
+          required
+          sx={{
+            input: { color: darkMode ? "#ffffff" : "#000000" },
+            label: { color: darkMode ? "#bbbbbb" : "#000000" },
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": { borderColor: darkMode ? "#555555" : "#cccccc" },
+              "&:hover fieldset": { borderColor: darkMode ? "#ffffff" : "#000000" },
+              "&.Mui-focused fieldset": { borderColor: "#ff33cc" },
+            },
+          }}
+        />
+        <TextField
+          fullWidth
+          label="Password"
+          name="password"
+          type="password"
+          value={password}
+          onChange={handleChange}
+          margin="normal"
+          variant="outlined"
+          required
+          sx={{
+            input: { color: darkMode ? "#ffffff" : "#000000" },
+            label: { color: darkMode ? "#bbbbbb" : "#000000" },
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": { borderColor: darkMode ? "#555555" : "#cccccc" },
+              "&:hover fieldset": { borderColor: darkMode ? "#ffffff" : "#000000" },
+              "&.Mui-focused fieldset": { borderColor: "#ff33cc" },
+            },
+          }}
+        />
+        <Button
+          type="submit"
+          fullWidth
+          variant="contained"
+          color="primary"
+          sx={{
+            mt: 2,
+            mb: 2,
+            backgroundColor: "#ff33cc" ,
+            "&:hover": {
+              backgroundColor: "#e6009e" ,
+            },
+          }}
+          disabled={loading || !email || !password}
         >
-          <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
-          <Typography variant="h4" gutterBottom>
-            Welcome Back!
-          </Typography>
-          <TextField
-            fullWidth
-            label="Email"
-            name="email"
-            value={email}
-            onChange={handleChange}
-            margin="normal"
-            variant="outlined"
-            required
-          />
-          <TextField
-            fullWidth
-            label="Password"
-            name="password"
-            type="password"
-            value={password}
-            onChange={handleChange}
-            margin="normal"
-            variant="outlined"
-            required
-          />
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            sx={{ mt: 2, mb: 2 }}
-            disabled={loading || !email || !password}
-          >
-            {loading ? (
-              <>
-                <CircularProgress size={20} sx={{ mr: 2 }} />
-                Loading
-              </>
-            ) : (
-              "Login"
-            )}
-          </Button>
-          <Typography variant="body2" align="center">
-            Don’t have an account?{" "}
-            <Link to="/register" style={{ textDecoration: "none", color: "#ff33cc" }}>
-              Register
-            </Link>
-          </Typography>
-        </Box>
-        </Box>
-     
+          {loading ? (
+            <>
+              <CircularProgress size={20} sx={{ mr: 2, color: "#ffffff" }} />
+              Loading
+            </>
+          ) : (
+            "Login"
+          )}
+        </Button>
+        <Typography variant="body2" align="center" sx={{ color: darkMode ? "#ffffff" : "#333333" }}>
+          Don’t have an account?{" "}
+          <Link to="/register" style={{ textDecoration: "none", color: "#ff33cc" }}>
+            Register
+          </Link>
+        </Typography>
+      </Box>
+    </Box>
   );
 };
 
diff --git a/src/pages/PageWrappper.tsx b/src/pages/PageWrappper.tsx
index 87157349..5a00cc4a 100644
--- a/src/pages/PageWrappper.tsx
+++ b/src/pages/PageWrappper.tsx
@@ -12,6 +12,7 @@ import Login from './Login';
 import Register from './Register';
 import UserRoute from '../routes/userRoute';
 import { Routes, Route, useNavigate } from 'react-router-dom';
+import { AppBar } from '@mui/material';
 
 export const PageWrapper = () => {
   const [open, setOpen] = useState(false);
@@ -50,7 +51,9 @@ export const PageWrapper = () => {
       <AuthProvider>
         <SocketProvider>
           <React.Fragment>
+         
             {!browserId && <NavBar recordingName={recordingName} isRecording={!!browserId} />}
+           
             <Routes>
               <Route element={<UserRoute />}>
                 <Route path="/" element={<MainPage handleEditRecording={handleEditRecording} />} />
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index ad7fb89f..474f0182 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -5,18 +5,17 @@ import { AuthContext } from "../context/auth";
 import { Box, Typography, TextField, Button, CircularProgress } from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
+import { useThemeMode } from "../context/theme-provider";
 
 const Register = () => {
-  const [form, setForm] = useState({
-    email: "",
-    password: "",
-  });
+  const [form, setForm] = useState({ email: "", password: "" });
   const [loading, setLoading] = useState(false);
   const { notify } = useGlobalInfoStore();
   const { email, password } = form;
 
   const { state, dispatch } = useContext(AuthContext);
   const { user } = state;
+  const { darkMode } = useThemeMode();
 
   const navigate = useNavigate();
 
@@ -35,18 +34,14 @@ const Register = () => {
     e.preventDefault();
     setLoading(true);
     try {
-      const { data } = await axios.post(`${apiUrl}/auth/register`, {
-        email,
-        password,
-      });
-
-      console.log(data)
+      const { data } = await axios.post(`${apiUrl}/auth/register`, { email, password });
+      console.log(data);
       dispatch({ type: "LOGIN", payload: data });
       notify("success", "Registration Successful!");
       window.localStorage.setItem("user", JSON.stringify(data));
       navigate("/");
-    } catch (error:any) {
-      notify("error", error.response.data || "Registration Failed. Please try again.");
+    } catch (error: any) {
+      notify("error", error.response?.data || "Registration Failed. Please try again.");
       setLoading(false);
     }
   };
@@ -60,25 +55,38 @@ const Register = () => {
         maxHeight: "100vh",
         mt: 6,
         padding: 4,
+        backgroundColor: darkMode ? "#121212" : "#ffffff",
+       
       }}
     >
       <Box
         component="form"
         onSubmit={submitForm}
         sx={{
-            textAlign: "center",
-            backgroundColor: "#ffffff",
-            padding: 6,
-            borderRadius: 5,
-            boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2), 0px -5px 10px rgba(0, 0, 0, 0.15)",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            maxWidth: 400,
-            width: "100%",
-          }}
+          textAlign: "center",
+          backgroundColor: darkMode ? "#1e1e1e" : "#ffffff",
+          color: darkMode ? "#ffffff" : "#333333",
+          padding: 6,
+          borderRadius: 5,
+          boxShadow: "0px 20px 40px rgba(0, 0, 0, 0.2), 0px -5px 10px rgba(0, 0, 0, 0.15)",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          maxWidth: 400,
+          width: "100%",
+        }}
       >
-        <img src="../src/assets/maxunlogo.png" alt="logo" height={55} width={60} style={{ marginBottom: 20, borderRadius: "20%", alignItems: "center" }} />
+        <img
+          src="../src/assets/maxunlogo.png"
+          alt="logo"
+          height={55}
+          width={60}
+          style={{
+            marginBottom: 20,
+            borderRadius: "20%",
+            alignItems: "center",
+          }}
+        />
         <Typography variant="h4" gutterBottom>
           Create an Account
         </Typography>
@@ -91,6 +99,15 @@ const Register = () => {
           margin="normal"
           variant="outlined"
           required
+          sx={{
+            input: { color: darkMode ? "#ffffff" : "#000000" },
+            label: { color: darkMode ? "#bbbbbb" : "#000000" },
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": { borderColor: darkMode ? "#555555" : "#cccccc" },
+              "&:hover fieldset": { borderColor: darkMode ? "#ffffff" : "#000000" },
+              "&.Mui-focused fieldset": { borderColor: "#ff33cc" },
+            },
+          }}
         />
         <TextField
           fullWidth
@@ -102,25 +119,41 @@ const Register = () => {
           margin="normal"
           variant="outlined"
           required
+          sx={{
+            input: { color: darkMode ? "#ffffff" : "#000000" },
+            label: { color: darkMode ? "#bbbbbb" : "#000000" },
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": { borderColor: darkMode ? "#555555" : "#cccccc" },
+              "&:hover fieldset": { borderColor: darkMode ? "#ffffff" : "#000000" },
+              "&.Mui-focused fieldset": { borderColor: "#ff33cc" },
+            },
+          }}
         />
         <Button
           type="submit"
           fullWidth
           variant="contained"
           color="primary"
-          sx={{ mt: 2, mb: 2 }}
+          sx={{
+            mt: 2,
+            mb: 2,
+            backgroundColor: "#ff33cc",
+            "&:hover": {
+              backgroundColor:"#e6009e", 
+            },
+          }}
           disabled={loading || !email || !password}
         >
           {loading ? (
             <>
-              <CircularProgress size={20} sx={{ mr: 2 }} />
+              <CircularProgress size={20} sx={{ mr: 2, color: "#ffffff" }} />
               Loading
             </>
           ) : (
             "Register"
           )}
         </Button>
-        <Typography variant="body2" align="center">
+        <Typography variant="body2" align="center" sx={{ color: darkMode ? "#ffffff" : "#333333" }}>
           Already have an account?{" "}
           <Link to="/login" style={{ textDecoration: "none", color: "#ff33cc" }}>
             Login