Removed files and replaced textfields from forgot-password and set-new-password pages

Client/src/Pages/CreateNewMonitor/index.jsx

@@ -11,7 +11,7 @@ import { createMonitor } from "../../Features/Monitors/monitorsSlice";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
-import Field from "../../Components/TextFields/Field";
+import Field from "../../Components/Inputs/Field";
 
 const CreateNewMonitor = () => {
   const MS_PER_MINUTE = 60000;

Client/src/Pages/Demo/Demo.jsx

@@ -37,11 +37,11 @@ import { useSelector } from "react-redux";
 import { useDispatch } from "react-redux";
 import { getMonitors } from "../../Features/Monitors/monitorsSlice";
 import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
-import ImageField from "../../Components/TextFields/Image";
+import ImageField from "../../Components/Inputs/Image";
 import ProgressUpload from "../../Components/ProgressBars";
 import Alert from "../../Components/Alert";
 import { createToast } from "../../Utils/toastUtils";
-import Field from "../../Components/TextFields/Field";
+import Field from "../../Components/Inputs/Field";
 
 const cols = [
   {

Client/src/Pages/ForgotPassword/index.jsx

@@ -2,13 +2,13 @@ import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPatt
 import "./index.css";
 import React from "react";
 import Logomark from "../../assets/Images/key-password.png";
-import EmailTextField from "../../Components/TextFields/Email/EmailTextField";
 import Button from "../../Components/Button";
 import LeftArrow from "../../assets/Images/arrow-left.png";
 import { useState, useEffect } from "react";
 import { recoveryValidation } from "../../Validation/validation";
 import axiosInstance from "../../Utils/axiosConfig";
 import { useNavigate } from "react-router-dom";
+import Field from "../../Components/Inputs/Field";
 
 const ForgotPassword = () => {
   const navigate = useNavigate();
@@ -76,12 +76,14 @@ const ForgotPassword = () => {
         </div>
         <div className="forgot-password-v-gap-large"></div>
         <div className="forgot-password-body">
-          <EmailTextField
-            onChange={handleInput}
-            error={errors.email !== undefined ? true : false}
-            helperText={errors.email !== undefined ? errors.email : ""}
-            placeholder="Enter your email"
+          <Field
+            type="email"
             id="forgot-password-email-input"
+            label="Email"
+            isRequired={true}
+            placeholder="Enter your email"
+            onChange={handleInput}
+            error={errors.email}
           />
           <div className="forgot-password-v-gap-medium"></div>
           <Button

Client/src/Pages/Login/index.jsx

@@ -12,7 +12,7 @@ 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";
+import Field from "../../Components/Inputs/Field";
 
 const Login = () => {
   const dispatch = useDispatch();

Client/src/Pages/Monitors/index.jsx

@@ -6,7 +6,7 @@ import { getMonitorsByUserId } from "../../Features/Monitors/monitorsSlice";
 import { useNavigate } from "react-router-dom";
 import Button from "../../Components/Button";
 import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
-import SearchTextField from "../../Components/TextFields/Search/SearchTextField";
+import SearchTextField from "../../Components/Inputs/Search/SearchTextField";
 import MonitorTable from "../../Components/MonitorTable";
 import { useTheme } from "@emotion/react";
 

Client/src/Pages/PlayGround/PlayGround.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import PlayGroundCharts from "./PlayGround-Charts";
 import PlayGroundPopupModals from "./PlayGround-Popup-Modals";
 import PlayGroundTooltips from "./PlayGround-Tooltips";
-import Field from "../../Components/TextFields/Field";
+import Field from "../../Components/Inputs/Field";
 
 // This Component is just for the development and test
 // purposes and just to see what my components look like while development

Client/src/Pages/Register/index.jsx

@@ -12,7 +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";
+import Field from "../../Components/Inputs/Field";
 
 const Register = () => {
   const dispatch = useDispatch();

Client/src/Pages/SetNewPassword/index.jsx

@@ -1,7 +1,6 @@
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import "./index.css";
 import LockIcon from "../../assets/Images/lock-icon.png";
-import PasswordTextField from "../../Components/TextFields/Password/PasswordTextField";
 import Check from "../../Components/Check/Check";
 import Button from "../../Components/Button";
 import LeftArrow from "../../assets/Images/arrow-left.png";
@@ -10,6 +9,7 @@ import { useState, useEffect } from "react";
 import { newPasswordValidation } from "../../Validation/validation";
 import axiosInstance from "../../Utils/axiosConfig";
 import { useNavigate } from "react-router-dom";
+import Field from "../../Components/Inputs/Field";
 
 const SetNewPassword = () => {
   const navigate = useNavigate();
@@ -63,6 +63,8 @@ const SetNewPassword = () => {
     }
   }, [form]);
 
+  const [visibility, setVisibility] = useState(false);
+
   const { token } = useParams();
   return (
     <div className="set-new-password-page">
@@ -83,22 +85,28 @@ const SetNewPassword = () => {
         </div>
         <div className="set-new-password-form-gap-large"></div>
         <div className="set-new-password-form-content">
-          <PasswordTextField
-            label="Password"
-            onChange={handleInput}
-            error={errors.password !== undefined ? true : false}
-            helperText={errors.password !== undefined ? errors.password : ""}
-            placeholder="••••••••"
+          <Field
+            type="password"
             id="register-password-input"
+            label="Password"
+            isRequired={true}
+            isVisible={visibility}
+            setVisibility={setVisibility}
+            placeholder="••••••••"
+            onChange={handleInput}
+            error={errors.password}
           />
           <div className="set-new-password-form-gap-medium"></div>
-          <PasswordTextField
-            label="Confirm password"
-            onChange={handleInput}
-            error={errors.confirm !== undefined ? true : false}
-            helperText={errors.confirm !== undefined ? errors.confirm : ""}
-            placeholder="••••••••"
+          <Field
+            type="password"
             id="confirm-password-input"
+            label="Confirm password"
+            isRequired={true}
+            isVisible={visibility}
+            setVisibility={setVisibility}
+            placeholder="••••••••"
+            onChange={handleInput}
+            error={errors.confirm}
           />
           <div className="set-new-password-form-gap-medium"></div>
           <div className="set-new-password-form-checks">