From 3855d4e4d5a66aea6d263a6dec5e8896da676d74 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 12 Jul 2024 18:45:23 -0400 Subject: [PATCH 1/9] Refactored textfield component --- .../src/Components/TextFields/Field/index.css | 49 ++++++++++ .../src/Components/TextFields/Field/index.jsx | 93 +++++++++++++++++++ Client/src/Pages/Demo/Demo.jsx | 40 ++++++-- Client/src/Utils/Theme.js | 5 +- Client/src/index.css | 1 + 5 files changed, 179 insertions(+), 9 deletions(-) create mode 100644 Client/src/Components/TextFields/Field/index.css create mode 100644 Client/src/Components/TextFields/Field/index.jsx diff --git a/Client/src/Components/TextFields/Field/index.css b/Client/src/Components/TextFields/Field/index.css new file mode 100644 index 000000000..10d4c6720 --- /dev/null +++ b/Client/src/Components/TextFields/Field/index.css @@ -0,0 +1,49 @@ +.field { + min-width: 250px; +} +.field h1.MuiTypography-root, +.field h5.MuiTypography-root, +.field input, +.field .input-error { + font-size: var(--env-var-font-size-medium); +} +.field h1.MuiTypography-root, +.field h5.MuiTypography-root, +.field input { + color: var(--env-var-color-5); +} +.field h1.MuiTypography-root { + font-weight: 600; +} +.field h1.MuiTypography-root span { + color: var(--env-var-color-19); + margin-left: 1px; +} +.field h5.MuiTypography-root { + position: relative; + opacity: 0.8; + padding: var(--env-var-spacing-1-minus); + padding-left: 0; + border-right: solid 1px var(--env-var-color-29); +} +.field .MuiInputBase-root { + height: 39px; + padding-right: var(--env-var-spacing-1-minus); +} +.field input { + 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 .MuiOutlinedInput-root:hover fieldset { + border-color: var(--env-var-color-25); +} +.field .input-error { + color: var(--env-var-color-24); + opacity: 0.8; +} +.field:has(.input-error) .MuiOutlinedInput-root fieldset { + border-color: #fda29b; +} diff --git a/Client/src/Components/TextFields/Field/index.jsx b/Client/src/Components/TextFields/Field/index.jsx new file mode 100644 index 000000000..811146faa --- /dev/null +++ b/Client/src/Components/TextFields/Field/index.jsx @@ -0,0 +1,93 @@ +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 "./index.css"; + +const Field = ({ + type, + id, + label, + isRequired, + isVisible, + setVisibility, + autoComplete, + placeholder, + value, + onChange, + error, + disabled, +}) => { + const theme = useTheme(); + + return ( + + {label && ( + + {label} + {isRequired ? * : ""} + + )} + http://, + } + : type === "password" && { + endAdornment: ( + + setVisibility((show) => !show)} + tabIndex={-1} + sx={{ + color: theme.palette.section.borderColor, + padding: theme.gap.xs, + "&:focus": { + outline: "none", + }, + "& .MuiTouchRipple-root": { + pointerEvents: "none", + display: "none", + }, + }} + > + {!isVisible ? : } + + + ), + } + } + /> + {error && ( + + {error} + + )} + + ); +}; + +export default Field; diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index 6a7a07e11..9d3cea52d 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -41,7 +41,7 @@ import ImageField from "../../Components/TextFields/Image"; import ProgressUpload from "../../Components/ProgressBars"; import Alert from "../../Components/Alert"; import { createToast } from "../../Utils/toastUtils"; -import { ToastContainer } from "react-toastify"; +import Field from "../../Components/TextFields/Field"; const cols = [ { @@ -203,6 +203,9 @@ const Demo = () => { setIsLoading(false); }, 4000); }; + + //fields + const [visibility, setVisibility] = useState(false); return (
@@ -439,7 +442,7 @@ const Demo = () => { /> - + { body="Since you logged in via SSO, you cannot reset or modify your password." /> - + - + - + { isToast={true} /> - + { - + + + + + + +
); }; diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js index 4b345c9de..f3ed11fc3 100644 --- a/Client/src/Utils/Theme.js +++ b/Client/src/Utils/Theme.js @@ -91,6 +91,7 @@ const theme = createTheme({ pY: "40px", }, gap: { + xs: "4px", small: "8px", medium: "12px", ml: "16px", @@ -101,7 +102,7 @@ const theme = createTheme({ info: { color: secondaryMain, bg: otherColorsWhite, - border: "#d0d5dd", + border: sectionBorder, }, error: { color: "#d92d20", @@ -111,7 +112,7 @@ const theme = createTheme({ warning: { color: "#DC6803", bg: "#fffcf5", - border: "#fec84b" + border: "#fec84b", }, }, }); diff --git a/Client/src/index.css b/Client/src/index.css index 086692678..674acc13e 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -59,6 +59,7 @@ --env-var-spacing-1: 12px; --env-var-spacing-1-plus: 16px; + --env-var-spacing-1-minus: 10px; --env-var-spacing-2: 24px; --env-var-spacing-3: 32px; --env-var-spacing-4: 40px; From 3adb73fe9627537fdc6b592ac82d73e35c06500e Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 12 Jul 2024 19:27:47 -0400 Subject: [PATCH 2/9] Replaced textfield components in profile and password panels --- .../TabPanels/Account/PasswordPanel.jsx | 95 +++++++------------ .../TabPanels/Account/ProfilePanel.jsx | 83 +++++----------- .../src/Components/TextFields/Field/index.css | 20 ++-- .../src/Components/TextFields/Field/index.jsx | 73 ++++++-------- Client/src/Pages/Account/index.css | 8 +- Client/src/Pages/Demo/Demo.jsx | 2 +- 6 files changed, 105 insertions(+), 176 deletions(-) diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx index 0e035f5cf..1ef7a07e3 100644 --- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx +++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx @@ -3,7 +3,7 @@ import React, { useState } from "react"; import { useTheme } from "@emotion/react"; import { Box, Divider, Stack, Typography } from "@mui/material"; import ButtonSpinner from "../../ButtonSpinner"; -import PasswordTextField from "../../TextFields/Password/PasswordTextField"; +import Field from "../../TextFields/Field"; import { editPasswordValidation } from "../../../Validation/validation"; import Alert from "../../Alert"; import { update } from "../../../Features/Auth/authSlice"; @@ -120,76 +120,49 @@ const PasswordPanel = () => { Current password - - - {errors[idToName["edit-current-password"]] ? ( - - {errors[idToName["edit-current-password"]]} - - ) : ( - "" - )} - +
New password - - - {errors[idToName["edit-new-password"]] ? ( - - {errors[idToName["edit-new-password"]]} - - ) : ( - "" - )} - +
Confirm new password - - - {errors[idToName["edit-confirm-password"]] ? ( - - {errors[idToName["edit-confirm-password"]]} - - ) : ( - "" - )} - +
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx index e96f507d9..d56bd5f4e 100644 --- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx +++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx @@ -4,9 +4,8 @@ import TabPanel from "@mui/lab/TabPanel"; import { Box, Divider, Modal, Stack, Typography } from "@mui/material"; import ButtonSpinner from "../../ButtonSpinner"; import Button from "../../Button"; -import EmailTextField from "../../TextFields/Email/EmailTextField"; -import StringTextField from "../../TextFields/Text/TextField"; import Avatar from "../../Avatar"; +import Field from "../../TextFields/Field"; import { editProfileValidation, imageValidation, @@ -219,47 +218,27 @@ const ProfilePanel = () => { First name - - - {errors[idToName["edit-first-name"]] ? ( - - {errors[idToName["edit-first-name"]]} - - ) : ( - "" - )} - +
Last name - - - {errors[idToName["edit-last-name"]] ? ( - - {errors[idToName["edit-last-name"]]} - - ) : ( - "" - )} - +
@@ -268,25 +247,15 @@ const ProfilePanel = () => { This is your current email address — it cannot be changed. - - - {errors[idToName["edit-email"]] ? ( - - {errors[idToName["edit-email"]]} - - ) : ( - "" - )} - +
diff --git a/Client/src/Components/TextFields/Field/index.css b/Client/src/Components/TextFields/Field/index.css index 10d4c6720..8c51c81ee 100644 --- a/Client/src/Components/TextFields/Field/index.css +++ b/Client/src/Components/TextFields/Field/index.css @@ -1,21 +1,21 @@ .field { min-width: 250px; } -.field h1.MuiTypography-root, +.field h3.MuiTypography-root, .field h5.MuiTypography-root, .field input, .field .input-error { font-size: var(--env-var-font-size-medium); } -.field h1.MuiTypography-root, +.field h3.MuiTypography-root, .field h5.MuiTypography-root, .field input { color: var(--env-var-color-5); } -.field h1.MuiTypography-root { - font-weight: 600; +.field h3.MuiTypography-root { + font-weight: 500; } -.field h1.MuiTypography-root span { +.field h3.MuiTypography-root span { color: var(--env-var-color-19); margin-left: 1px; } @@ -27,19 +27,19 @@ border-right: solid 1px var(--env-var-color-29); } .field .MuiInputBase-root { - height: 39px; + height: 35px; + overflow: hidden; +} +.field .MuiInputBase-root:has(.MuiInputAdornment-root) { padding-right: var(--env-var-spacing-1-minus); } .field input { - padding: var(--env-var-spacing-1-minus); + padding: 0 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 .MuiOutlinedInput-root:hover fieldset { - border-color: var(--env-var-color-25); -} .field .input-error { color: var(--env-var-color-24); opacity: 0.8; diff --git a/Client/src/Components/TextFields/Field/index.jsx b/Client/src/Components/TextFields/Field/index.jsx index 811146faa..b02f9891b 100644 --- a/Client/src/Components/TextFields/Field/index.jsx +++ b/Client/src/Components/TextFields/Field/index.jsx @@ -11,7 +11,7 @@ import Visibility from "@mui/icons-material/Visibility"; import "./index.css"; const Field = ({ - type, + type = "text", id, label, isRequired, @@ -29,60 +29,49 @@ const Field = ({ return ( {label && ( - + {label} {isRequired ? * : ""} )} http://, - } - : type === "password" && { - endAdornment: ( - - setVisibility((show) => !show)} - tabIndex={-1} - sx={{ - color: theme.palette.section.borderColor, - padding: theme.gap.xs, - "&:focus": { - outline: "none", - }, - "& .MuiTouchRipple-root": { - pointerEvents: "none", - display: "none", - }, - }} - > - {!isVisible ? : } - - - ), - } - } + InputProps={{ + startAdornment: type === "url" && ( + https:// + ), + endAdornment: type === "password" && ( + + setVisibility((show) => !show)} + tabIndex={-1} + sx={{ + color: theme.palette.section.borderColor, + padding: theme.gap.xs, + "&:focus": { + outline: "none", + }, + "& .MuiTouchRipple-root": { + pointerEvents: "none", + display: "none", + }, + }} + > + {!isVisible ? : } + + + ), + }} /> {error && ( - + {error} )} diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css index acf71988b..608e08b94 100644 --- a/Client/src/Pages/Account/index.css +++ b/Client/src/Pages/Account/index.css @@ -139,7 +139,7 @@ } } -.account .MuiStack-root:has(p.MuiTypography-root.input-error) { +.account .MuiStack-root:has(span.MuiTypography-root.input-error) { position: relative; } .account .text-field-icon { @@ -150,11 +150,9 @@ height: 18px !important; opacity: 0.8; } -.account p.MuiTypography-root.input-error { - color: var(--env-var-color-24); - opacity: 0.8; +.account span.MuiTypography-root.input-error { position: absolute; - top: calc(100% + 5px); + top: 100%; } .account .email-text-field, .account .password-text-field { diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index 9d3cea52d..c95dcc7a1 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -512,7 +512,7 @@ const Demo = () => { placeholder="Create a password" /> From 20f04ab63e001dd34f244a0a68403f064964bc4a Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Fri, 12 Jul 2024 20:01:41 -0400 Subject: [PATCH 3/9] Replaced textfield components in new monitor page --- .../src/Components/TextFields/Field/index.css | 17 +++++++++----- .../src/Components/TextFields/Field/index.jsx | 15 +++++++++++-- Client/src/Pages/CreateNewMonitor/index.css | 7 ++++++ Client/src/Pages/CreateNewMonitor/index.jsx | 22 +++++++++---------- 4 files changed, 41 insertions(+), 20 deletions(-) diff --git a/Client/src/Components/TextFields/Field/index.css b/Client/src/Components/TextFields/Field/index.css index 8c51c81ee..ade346e30 100644 --- a/Client/src/Components/TextFields/Field/index.css +++ b/Client/src/Components/TextFields/Field/index.css @@ -15,31 +15,36 @@ .field h3.MuiTypography-root { font-weight: 500; } -.field h3.MuiTypography-root span { +.field h3.MuiTypography-root span.field-required { color: var(--env-var-color-19); margin-left: 1px; } +.field h3.MuiTypography-root span.field-optional { + opacity: 0.6; + margin-left: 4px; +} .field h5.MuiTypography-root { position: relative; opacity: 0.8; - padding: var(--env-var-spacing-1-minus); - padding-left: 0; - border-right: solid 1px var(--env-var-color-29); + padding-right: var(--env-var-spacing-1-minus); } .field .MuiInputBase-root { - height: 35px; - overflow: hidden; + height: 34px; } .field .MuiInputBase-root:has(.MuiInputAdornment-root) { padding-right: var(--env-var-spacing-1-minus); } .field input { + height: 100%; padding: 0 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 .MuiOutlinedInput-root:hover:not(:has(input:focus)) fieldset { + border-color: var(--env-var-color-29); +} .field .input-error { color: var(--env-var-color-24); opacity: 0.8; diff --git a/Client/src/Components/TextFields/Field/index.jsx b/Client/src/Components/TextFields/Field/index.jsx index b02f9891b..54cb5ee57 100644 --- a/Client/src/Components/TextFields/Field/index.jsx +++ b/Client/src/Components/TextFields/Field/index.jsx @@ -15,6 +15,7 @@ const Field = ({ id, label, isRequired, + isOptional, isVisible, setVisibility, autoComplete, @@ -31,7 +32,8 @@ const Field = ({ {label && ( {label} - {isRequired ? * : ""} + {isRequired ? * : ""} + {isOptional ? (optional) : ""} )} https:// + + https:// + ), endAdornment: type === "password" && ( diff --git a/Client/src/Pages/CreateNewMonitor/index.css b/Client/src/Pages/CreateNewMonitor/index.css index 4702127f5..8ea9b2529 100644 --- a/Client/src/Pages/CreateNewMonitor/index.css +++ b/Client/src/Pages/CreateNewMonitor/index.css @@ -55,6 +55,13 @@ outline: none; border: none; } +.create-monitor-form .MuiStack-root:has(span.MuiTypography-root.input-error) { + position: relative; +} +.create-monitor-form span.MuiTypography-root.input-error { + position: absolute; + top: 100%; +} .monitors-gaps-medium { height: var(--env-var-spacing-2); diff --git a/Client/src/Pages/CreateNewMonitor/index.jsx b/Client/src/Pages/CreateNewMonitor/index.jsx index 805aa6426..9860d879d 100644 --- a/Client/src/Pages/CreateNewMonitor/index.jsx +++ b/Client/src/Pages/CreateNewMonitor/index.jsx @@ -1,6 +1,5 @@ import "./index.css"; import ConfigBox from "../../Components/ConfigBox"; -import FlexibileTextField from "../../Components/TextFields/Flexibile/FlexibileTextField"; import React, { useState } from "react"; import RadioButton from "../../Components/RadioButton"; import CustomizableCheckBox from "../../Components/Checkbox/CustomizableCheckbox"; @@ -12,6 +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"; const CreateNewMonitor = () => { const MS_PER_MINUTE = 60000; @@ -86,6 +86,7 @@ const CreateNewMonitor = () => { //obj to submit let monitor = { ...generalSettings, + url: "https://" + generalSettings.url, ...checks, }; @@ -162,25 +163,22 @@ const CreateNewMonitor = () => { } rightLayout={ - handleChange(event, "url", setGeneralSettings) } error={errors["url"]} /> - - Friendly name (optional) - - } + From a84b340d6e4caccee6231ffa89b8684476c782ef Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sat, 13 Jul 2024 13:11:03 -0400 Subject: [PATCH 4/9] Replaced textfield components in login and register pages --- .../src/Components/TextFields/Field/index.css | 15 ++- .../src/Components/TextFields/Field/index.jsx | 2 +- Client/src/Pages/Login/index.css | 14 +-- Client/src/Pages/Login/index.jsx | 32 +++--- Client/src/Pages/Register/index.css | 11 -- Client/src/Pages/Register/index.jsx | 100 +++++++++++------- 6 files changed, 95 insertions(+), 79 deletions(-) diff --git a/Client/src/Components/TextFields/Field/index.css b/Client/src/Components/TextFields/Field/index.css index ade346e30..08a22a384 100644 --- a/Client/src/Components/TextFields/Field/index.css +++ b/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); } diff --git a/Client/src/Components/TextFields/Field/index.jsx b/Client/src/Components/TextFields/Field/index.jsx index 54cb5ee57..7b4ad77af 100644 --- a/Client/src/Components/TextFields/Field/index.jsx +++ b/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", }, diff --git a/Client/src/Pages/Login/index.css b/Client/src/Pages/Login/index.css index 195b87001..770f41134 100644 --- a/Client/src/Pages/Login/index.css +++ b/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; diff --git a/Client/src/Pages/Login/index.jsx b/Client/src/Pages/Login/index.jsx index 85d1c8664..6b8d93fc8 100644 --- a/Client/src/Pages/Login/index.jsx +++ b/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 (
@@ -125,23 +126,28 @@ const Login = () => {
Log in to your account
+
-
-
diff --git a/Client/src/Pages/Register/index.css b/Client/src/Pages/Register/index.css index 8d4b99f1b..948f0afd0 100644 --- a/Client/src/Pages/Register/index.css +++ b/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; } diff --git a/Client/src/Pages/Register/index.jsx b/Client/src/Pages/Register/index.jsx index 8bd026187..f7c346f69 100644 --- a/Client/src/Pages/Register/index.jsx +++ b/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 (
@@ -137,42 +137,62 @@ const Register = () => {
-
-
-
- +
+ {/* TODO - hook up to form state and run checks */} +
From 51ce98f5e91ae2c8afd20d035a63c40f92961fea Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Sat, 13 Jul 2024 14:17:04 -0400 Subject: [PATCH 5/9] Added copy button and description input type --- .../src/Components/TextFields/Field/index.css | 28 ++++- .../src/Components/TextFields/Field/index.jsx | 77 ++++++++++---- Client/src/Pages/PlayGround/PlayGround.jsx | 100 +++++++++++------- 3 files changed, 139 insertions(+), 66 deletions(-) diff --git a/Client/src/Components/TextFields/Field/index.css b/Client/src/Components/TextFields/Field/index.css index 08a22a384..802eff6b0 100644 --- a/Client/src/Components/TextFields/Field/index.css +++ b/Client/src/Components/TextFields/Field/index.css @@ -4,12 +4,14 @@ .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 input, +.field textarea { color: var(--env-var-color-5); } .field h3.MuiTypography-root { @@ -28,22 +30,42 @@ opacity: 0.8; padding-right: var(--env-var-spacing-1-minus); } -.field .MuiInputBase-root { +.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)) + .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus)) fieldset { border-color: var(--env-var-color-29); } diff --git a/Client/src/Components/TextFields/Field/index.jsx b/Client/src/Components/TextFields/Field/index.jsx index 7b4ad77af..8f84dbfec 100644 --- a/Client/src/Components/TextFields/Field/index.jsx +++ b/Client/src/Components/TextFields/Field/index.jsx @@ -8,7 +8,10 @@ import { } 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", @@ -18,6 +21,7 @@ const Field = ({ isOptional, isVisible, setVisibility, + hasCopy, autoComplete, placeholder, value, @@ -27,6 +31,13 @@ const Field = ({ }) => { const theme = useTheme(); + // TODO - are we using this feature anywhere ? + const [copy, setCopy] = useState(false); + const handleCopy = () => { + setCopy(true); + setTimeout(() => setCopy(false), 1000); + }; + return ( {label && ( @@ -41,6 +52,8 @@ const Field = ({ id={id} autoComplete={autoComplete} placeholder={placeholder} + multiline={type === "description"} + rows={type === "description" ? 4 : 1} value={value} onChange={onChange} disabled={disabled} @@ -57,28 +70,48 @@ const Field = ({ https:// ), - endAdornment: type === "password" && ( - - 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 ? : } - - - ), + endAdornment: + type === "password" ? ( + + 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 ? : } + + + ) : ( + hasCopy && ( + +