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

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

@@ -0,0 +1,89 @@
+.field {
+  min-width: 250px;
+}
+.field h3.MuiTypography-root,
+.field h5.MuiTypography-root,
+.field input,
+.field textarea,
+.field .input-error {
+  font-size: var(--env-var-font-size-medium);
+}
+.field h3.MuiTypography-root,
+.field h5.MuiTypography-root,
+.field input,
+.field textarea {
+  color: var(--env-var-color-5);
+}
+.field h3.MuiTypography-root {
+  font-weight: 500;
+}
+.field h3.MuiTypography-root span.field-required {
+  color: var(--env-var-color-19);
+  margin-left: 2px;
+}
+.field h3.MuiTypography-root span.field-optional {
+  opacity: 0.6;
+  margin-left: 4px;
+}
+.field h5.MuiTypography-root {
+  position: relative;
+  opacity: 0.8;
+  padding-right: var(--env-var-spacing-1-minus);
+}
+.field .MuiInputBase-root:has(input) {
+  height: 34px;
+}
+.field .MuiInputBase-root:has(.MuiInputAdornment-root) {
+  padding-right: var(--env-var-spacing-1-minus);
+}
+.field .MuiInputBase-root:has(.MuiInputAdornment-root > .MuiButtonBase-root) {
+  padding-right: 0;
+}
+.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root {
+  padding: 0 var(--env-var-spacing-1-minus);
+  font-size: var(--env-var-font-size-medium);
+  border-radius: 0;
+  height: 34px;
+}
+.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root:hover {
+  border-color: var(--env-var-color-29);
+}
+.field input {
+  height: 100%;
+  padding: 0 var(--env-var-spacing-1-minus);
+}
+.field .MuiInputBase-root:has(textarea) {
+  padding: var(--env-var-spacing-1-minus);
+}
+.field .MuiOutlinedInput-root fieldset {
+  border-color: var(--env-var-color-29);
+  border-radius: var(--env-var-radius-1);
+}
+.field:not(:has(.input-error))
+  .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus))
+  fieldset {
+  border-color: var(--env-var-color-29);
+}
+.field .input-error {
+  color: var(--env-var-color-24);
+  opacity: 0.8;
+}
+.field:has(.input-error) .MuiOutlinedInput-root fieldset {
+  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,
+.forgot-password-page .field .MuiOutlinedInput-root fieldset,
+.forgot-password-page .field input,
+.set-new-password-page .field .MuiOutlinedInput-root fieldset,
+.set-new-password-page .field input {
+  border-radius: var(--env-var-radius-2);
+}

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

@@ -0,0 +1,126 @@
+import { useTheme } from "@emotion/react";
+import {
+  IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import Visibility from "@mui/icons-material/Visibility";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import Button from "../../Button";
+import "./index.css";
+import { useState } from "react";
+
+const Field = ({
+  type = "text",
+  id,
+  label,
+  isRequired,
+  isOptional,
+  isVisible,
+  setVisibility,
+  hasCopy,
+  autoComplete,
+  placeholder,
+  value,
+  onChange,
+  error,
+  disabled,
+}) => {
+  const theme = useTheme();
+
+  // TODO - are we using this feature anywhere ?
+  const [copy, setCopy] = useState(false);
+  const handleCopy = () => {
+    setCopy(true);
+    setTimeout(() => setCopy(false), 1000);
+  };
+
+  return (
+    <Stack gap={theme.gap.xs} className={`field field-${type}`}>
+      {label && (
+        <Typography component="h3">
+          {label}
+          {isRequired ? <span className="field-required">*</span> : ""}
+          {isOptional ? <span className="field-optional">(optional)</span> : ""}
+        </Typography>
+      )}
+      <TextField
+        type={type === "password" ? (isVisible ? "text" : type) : type}
+        id={id}
+        autoComplete={autoComplete}
+        placeholder={placeholder}
+        multiline={type === "description"}
+        rows={type === "description" ? 4 : 1}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        InputProps={{
+          startAdornment: type === "url" && (
+            <Stack
+              direction="row"
+              alignItems="center"
+              height="100%"
+              sx={{
+                borderRight: `solid 1px ${theme.palette.section.borderColor}`,
+              }}
+            >
+              <Typography component="h5">https://</Typography>
+            </Stack>
+          ),
+          endAdornment:
+            type === "password" ? (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={() => setVisibility((show) => !show)}
+                  tabIndex={-1}
+                  sx={{
+                    color: theme.palette.section.borderColor,
+                    padding: `calc(${theme.gap.xs} / 2)`,
+                    "&:focus": {
+                      outline: "none",
+                    },
+                    "& .MuiTouchRipple-root": {
+                      pointerEvents: "none",
+                      display: "none",
+                    },
+                  }}
+                >
+                  {!isVisible ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ) : (
+              hasCopy && (
+                <InputAdornment position="end">
+                  <Button
+                    level="tertiary"
+                    label={copy ? "Copied" : "Copy"}
+                    img={<ContentCopyIcon />}
+                    onClick={handleCopy}
+                    sx={{
+                      borderLeft: `solid 1px ${theme.palette.section.borderColor}`,
+                      lineHeight: 0,
+                      "& .MuiTouchRipple-root": {
+                        pointerEvents: "none",
+                        display: "none",
+                      },
+                    }}
+                  />
+                </InputAdornment>
+              )
+            ),
+        }}
+      />
+      {error && (
+        <Typography component="span" className="input-error" mt={theme.gap.xs}>
+          {error}
+        </Typography>
+      )}
+    </Stack>
+  );
+};
+
+export default Field;

Client/src/Components/Inputs/Image/index.css

@@ -0,0 +1,29 @@
+.image-field-wrapper h2.MuiTypography-root,
+.image-field-wrapper p.MuiTypography-root,
+.image-field-wrapper + p.MuiTypography-root,
+.MuiStack-root:has(#modal-update-picture) h1.MuiTypography-root {
+  color: var(--env-var-color-2);
+}
+.MuiStack-root:has(#modal-update-picture) h1.MuiTypography-root {
+  font-weight: 600;
+}
+.image-field-wrapper h2.MuiTypography-root,
+.MuiStack-root:has(#modal-update-picture) button,
+.MuiStack-root:has(#modal-update-picture) h1.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+}
+.image-field-wrapper h2.MuiTypography-root {
+  margin-top: 10px;
+}
+.image-field-wrapper + p.MuiTypography-root {
+  margin-top: 8px;
+}
+.image-field-wrapper + p.MuiTypography-root,
+.image-field-wrapper p.MuiTypography-root {
+  opacity: 0.6;
+  font-size: var(--env-var-font-size-small-plus);
+}
+.image-field-wrapper h2.MuiTypography-root span {
+  color: var(--env-var-color-3);
+  font-weight: 500;
+}

Client/src/Components/Inputs/Image/index.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Box, IconButton, Stack, TextField, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import "./index.css";
+import { checkImage } from "../../../Utils/fileUtils";
+
+/**
+ * @param {Object} props - The component props.
+ * @param {string} props.id - The unique identifier for the input field.
+ * @param {string} props.src - The URL of the image to display.
+ * @param {function} props.onChange - The function to handle file input change.
+ * @returns {JSX.Element} The rendered component.
+ */
+
+const ImageField = ({ id, src, loading, onChange }) => {
+  const theme = useTheme();
+
+  const [isDragging, setIsDragging] = useState(false);
+  const handleDragEnter = () => {
+    setIsDragging(true);
+  };
+  const handleDragLeave = () => {
+    setIsDragging(false);
+  };
+
+  return (
+    <>
+      {!checkImage(src) || loading ? (
+        <>
+          <Box
+            className="image-field-wrapper"
+            mt="20px"
+            sx={{
+              position: "relative",
+              height: "fit-content",
+              border: "dashed",
+              borderRadius: `${theme.shape.borderRadius}px`,
+              borderColor: isDragging
+                ? theme.palette.primary.main
+                : theme.palette.otherColors.graishWhite,
+              borderWidth: "2px",
+              transition: "0.2s",
+              "&:hover": {
+                borderColor: theme.palette.primary.main,
+                backgroundColor: "hsl(215, 87%, 51%, 0.05)",
+              },
+            }}
+            onDragEnter={handleDragEnter}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDragLeave}
+          >
+            <TextField
+              id={id}
+              type="file"
+              onChange={onChange}
+              sx={{
+                width: "100%",
+                "& .MuiInputBase-input[type='file']": {
+                  opacity: 0,
+                  cursor: "pointer",
+                  maxWidth: "500px",
+                  minHeight: "175px",
+                },
+                "& fieldset": {
+                  padding: 0,
+                  border: "none",
+                },
+              }}
+            />
+            <Stack
+              className="custom-file-text"
+              alignItems="center"
+              gap="4px"
+              sx={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                zIndex: "-1",
+                width: "100%",
+              }}
+            >
+              <IconButton
+                sx={{
+                  pointerEvents: "none",
+                  borderRadius: `${theme.shape.borderRadius}px`,
+                  border: `solid ${theme.shape.borderThick}px ${theme.palette.otherColors.graishWhite}`,
+                  boxShadow: theme.shape.boxShadow,
+                }}
+              >
+                <CloudUploadIcon />
+              </IconButton>
+              <Typography component="h2">
+                <span>Click to upload</span> or drag and drop
+              </Typography>
+              <Typography component="p">(maximum size: 3MB)</Typography>
+            </Stack>
+          </Box>
+          <Typography component="p">Supported formats: JPG, PNG</Typography>
+        </>
+      ) : (
+        <Stack direction="row" justifyContent="center">
+          <Box
+            sx={{
+              width: "250px",
+              height: "250px",
+              borderRadius: "50%",
+              overflow: "hidden",
+              backgroundImage: `url(${src})`,
+              backgroundSize: "cover",
+            }}
+          ></Box>
+        </Stack>
+      )}
+    </>
+  );
+};
+
+ImageField.propTypes = {
+  id: PropTypes.string.isRequired,
+  src: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default ImageField;

Client/src/Components/Inputs/Search/SearchTextField.jsx

@@ -0,0 +1,14 @@
+import "./searchTextField.css";
+import React from "react";
+import SearchSvg from "../../../assets/icons/search.svg?react";
+
+const SearchTextField = () => {
+  return (
+    <div className="search-field-holder">
+      <SearchSvg style={{ marginRight: "5px" }} />
+      <input className="search-field" type="text" placeholder="Search" />
+    </div>
+  );
+};
+
+export default SearchTextField;

Client/src/Components/Inputs/Search/searchTextField.css

@@ -0,0 +1,26 @@
+.search-field-holder {
+  display: flex;
+  align-items: center;
+  width: 180px;
+  height: 9px;
+  padding: var(--env-var-spacing-1);
+  border: 1px solid var(--env-var-color-4);
+  border-radius: var(--env-var-radius-1);
+}
+
+.search-field-icon {
+  width: var(--env-var-img-width-2);
+  height: var(--env-var-img-width-2);
+  margin-right: calc(var(--env-var-img-width-2) / 2);
+}
+
+.search-field {
+  width: 150px;
+  border: none;
+  outline: none;
+  font-size: var(--env-var-font-size-medium);
+}
+
+.search-field::placeholder {
+  color: var(--env-var-color-14);
+}