forms

2024-12-08 05:41:11 +05:30
parent 587dacdaf1
commit 655eadc068
4 changed files with 175 additions and 103 deletions
--- 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;
-`;
+`;
--- 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>
  );
 };

--- 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} />} />
--- 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