Replaced textfield components in login and register pages

Client/src/Components/TextFields/Field/index.css

@@ -17,7 +17,7 @@
 }
 .field h3.MuiTypography-root span.field-required {
   color: var(--env-var-color-19);
-  margin-left: 1px;
+  margin-left: 2px;
 }
 .field h3.MuiTypography-root span.field-optional {
   opacity: 0.6;
@@ -42,7 +42,9 @@
   border-color: var(--env-var-color-29);
   border-radius: var(--env-var-radius-1);
 }
-.field .MuiOutlinedInput-root:hover:not(:has(input:focus)) fieldset {
+.field:not(:has(.input-error))
+  .MuiOutlinedInput-root:hover:not(:has(input:focus))
+  fieldset {
   border-color: var(--env-var-color-29);
 }
 .field .input-error {
@@ -50,5 +52,12 @@
   opacity: 0.8;
 }
 .field:has(.input-error) .MuiOutlinedInput-root fieldset {
-  border-color: #fda29b;
+  border-color: var(--env-var-color-19);
+}
+
+.register-page .field .MuiOutlinedInput-root fieldset,
+.register-page .field input,
+.login-page .field .MuiOutlinedInput-root fieldset,
+.login-page .field input {
+  border-radius: var(--env-var-radius-2);
 }

Client/src/Components/TextFields/Field/index.jsx

@@ -65,7 +65,7 @@ const Field = ({
                 tabIndex={-1}
                 sx={{
                   color: theme.palette.section.borderColor,
-                  padding: theme.gap.xs,
+                  padding: `calc(${theme.gap.xs} / 2)`,
                   "&:focus": {
                     outline: "none",
                   },

Client/src/Pages/Login/index.css

@@ -39,17 +39,9 @@
   color: var(--env-var-color-1);
 }
 
-#login-email-input {
-  width: 308px;
-  height: 1px;
-  font-size: var(--env-var-font-size-medium);
-}
-
-#login-password-input {
-  width: 308px;
-  height: 1px;
-  font-size: var(--env-var-font-size-medium);
-}
+/* .login-form-inputs .field h3.MuiTypography-root{
+  font-weight: 600;
+} */
 
 .login-form-password-options {
   display: flex;

Client/src/Pages/Login/index.jsx

@@ -4,16 +4,15 @@ import { useNavigate } from "react-router-dom";
 import "./index.css";
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import Logomark from "../../assets/Images/Logomark.png";
-import EmailTextField from "../../Components/TextFields/Email/EmailTextField";
 import CheckBox from "../../Components/Checkbox/Checkbox";
 import Button from "../../Components/Button";
 import Google from "../../assets/Images/Google.png";
-import PasswordTextField from "../../Components/TextFields/Password/PasswordTextField";
 import axiosInstance from "../../Utils/axiosConfig";
 import { loginValidation } from "../../Validation/validation";
 import { login } from "../../Features/Auth/authSlice";
 import { useDispatch } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
+import Field from "../../Components/TextFields/Field";
 
 const Login = () => {
   const dispatch = useDispatch();
@@ -111,6 +110,8 @@ const Login = () => {
     navigate("/register");
   };
 
+  const [visibility, setVisibility] = useState(false);
+
   return (
     <div className="login-page">
       <BackgroundPattern></BackgroundPattern>
@@ -125,23 +126,28 @@ const Login = () => {
           <div className="login-form-heading">Log in to your account</div>
         </div>
         <div className="login-form-v3-spacing" />
+
         <div className="login-form-inputs">
-          <EmailTextField
-            onChange={handleInput}
-            error={errors.email ? true : false}
-            helperText={errors.email ? errors.email : ""}
+          <Field
+            type="email"
+            id="login-email-input"
+            label="Email"
             placeholder="Enter your email"
             autoComplete="email"
-            id="login-email-input"
+            onChange={handleInput}
+            error={errors.email}
           />
           <div className="login-form-v2-spacing" />
-          <PasswordTextField
-            onChange={handleInput}
-            error={errors.password ? true : false}
-            helperText={errors.password ? errors.password : ""}
-            placeholder="Password"
-            autoComplete="current-password"
+          <Field
+            type="password"
             id="login-password-input"
+            label="Password"
+            isVisible={visibility}
+            setVisibility={setVisibility}
+            placeholder="Enter your password"
+            autoComplete="current-password"
+            onChange={handleInput}
+            error={errors.password}
           />
         </div>
         <div className="login-form-v3-spacing" />

Client/src/Pages/Register/index.css

@@ -1,5 +1,4 @@
 .register-page {
-  width: var(--env-var-width-1);
   display: flex;
   justify-content: center;
   min-height: var(--env-var-height-1);
@@ -40,16 +39,6 @@
   font-weight: 600;
 }
 
-#register-firstname-input,
-#register-lastname-input,
-#register-email-input,
-#register-password-input {
-  font-size: var(--env-var-font-size-medium);
-  width: 294px;
-  height: 11px;
-  padding: 12px 14px;
-}
-
 .register-bottom-spacing {
   height: 50px;
 }

Client/src/Pages/Register/index.jsx

@@ -4,9 +4,6 @@ import { useNavigate } from "react-router-dom";
 import "./index.css";
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import Logomark from "../../assets/Images/Logomark.png";
-import EmailTextField from "../../Components/TextFields/Email/EmailTextField";
-import PasswordTextField from "../../Components/TextFields/Password/PasswordTextField";
-import StringTextField from "../../Components/TextFields/Text/TextField";
 import Check from "../../Components/Check/Check";
 import Button from "../../Components/Button";
 import Google from "../../assets/Images/Google.png";
@@ -15,6 +12,7 @@ import axiosInstance from "../../Utils/axiosConfig";
 import { useDispatch } from "react-redux";
 import { register } from "../../Features/Auth/authSlice";
 import { createToast } from "../../Utils/toastUtils";
+import Field from "../../Components/TextFields/Field";
 
 const Register = () => {
   const dispatch = useDispatch();
@@ -38,18 +36,18 @@ const Register = () => {
     role: "",
   });
 
-  useEffect(() => {
-    axiosInstance
-      .get("/auth/users/admin")
-      .then((response) => {
-        if (response.data.data === true) {
-          navigate("/login");
-        }
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  }, [form, navigate]);
+  // useEffect(() => {
+  //   axiosInstance
+  //     .get("/auth/users/admin")
+  //     .then((response) => {
+  //       if (response.data.data === true) {
+  //         navigate("/login");
+  //       }
+  //     })
+  //     .catch((error) => {
+  //       console.log(error);
+  //     });
+  // }, [form, navigate]);
 
   useEffect(() => {
     const { error } = registerValidation.validate(form, {
@@ -119,6 +117,8 @@ const Register = () => {
     }
   };
 
+  const [visibility, setVisibility] = useState(false);
+
   return (
     <div className="register-page">
       <BackgroundPattern></BackgroundPattern>
@@ -137,42 +137,62 @@ const Register = () => {
         </div>
         <div className="register-form-v-spacing-40px" />
         <div className="register-form-inputs">
-          <StringTextField
-            onChange={handleInput}
-            error={errors.firstname ? true : false}
-            helperText={errors.firstname ? errors.firstname : ""}
-            label="First name*"
-            placeholder="Enter your first name"
+          <Field
             id="register-firstname-input"
+            label="Name"
+            isRequired={true}
+            placeholder="Talha"
+            autoComplete="given-name"
+            onChange={handleInput}
+            error={errors.firstname}
           />
           <div className="login-form-v2-spacing" />
-          <StringTextField
-            onChange={handleInput}
-            error={errors.lastname ? true : false}
-            helperText={errors.lastname ? errors.lastname : ""}
-            label="Last name*"
-            placeholder="Enter your last name"
+          <Field
             id="register-lastname-input"
+            label="Surname"
+            isRequired={true}
+            placeholder="Bolat"
+            autoComplete="family-name"
+            onChange={handleInput}
+            error={errors.lastname}
           />
           <div className="login-form-v2-spacing" />
-          <EmailTextField
-            onChange={handleInput}
-            label="Email*"
-            error={errors.email ? true : false}
-            helperText={errors.email ? errors.email : ""}
-            placeholder="Enter your email"
-            autoComplete="email"
+          <Field
+            type="email"
             id="register-email-input"
+            label="Email"
+            isRequired={true}
+            placeholder="name.surname@companyname.com"
+            autoComplete="email"
+            onChange={handleInput}
+            error={errors.email}
           />
           <div className="login-form-v2-spacing" />
-          <PasswordTextField
-            onChange={handleInput}
-            label="Password*"
-            error={errors.password ? true : false}
-            helperText={errors.password ? errors.password : ""}
+          <Field
+            type="password"
+            id="register-password-input"
+            label="Password"
+            isRequired={true}
+            isVisible={visibility}
+            setVisibility={setVisibility}
             placeholder="Create a password"
             autoComplete="current-password"
-            id="register-password-input"
+            error={errors.password}
+            onChange={handleInput}
+          />
+          <div className="login-form-v2-spacing" />
+          {/* TODO - hook up to form state and run checks */}
+          <Field
+            type="password"
+            id="register-confirm-input"
+            label="Confirm password"
+            isRequired={true}
+            isVisible={visibility}
+            setVisibility={setVisibility}
+            placeholder="Confirm your password"
+            autoComplete="current-password"
+            error={errors.confirm}
+            onChange={handleInput}
           />
         </div>
         <div className="login-form-v2-spacing" />