From 3a9183612eb0eb83dd6d0eac90f485b311db1331 Mon Sep 17 00:00:00 2001 From: Ananya Date: Thu, 30 May 2024 11:55:07 +0530 Subject: [PATCH 1/3] removed password constraints from Login Page --- package-lock.json | 89 +++++++++++++++++++++++++++++ src/pages/user/UserRegistration.jsx | 4 +- 2 files changed, 92 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 45a5ce30..63d1a2eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4967,6 +4967,95 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@testing-library/dom": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz", + "integrity": "sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "peer": true + }, + "node_modules/@testing-library/dom/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/dom/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", diff --git a/src/pages/user/UserRegistration.jsx b/src/pages/user/UserRegistration.jsx index d914d6c1..7706b6b3 100644 --- a/src/pages/user/UserRegistration.jsx +++ b/src/pages/user/UserRegistration.jsx @@ -178,13 +178,15 @@ function LoginRegisterForm() { isPassVisible?setIsPassVisible(false)} size={"40px"}/>:setIsPassVisible(true)} size={"40px"}/> } - {userTypingPassword &&
+ {!isLogin && <> + {userTypingPassword &&

• Minimum 8 characters

• At least one uppercase letter

• At least one lowercase letter

• At least one number

• At least one symbol

} + } {!isLogin && ( <> From cd8d2bb4ce28ff4e6f910b7b6d1015cf776cbdb1 Mon Sep 17 00:00:00 2001 From: Ananya Date: Thu, 30 May 2024 22:52:55 +0530 Subject: [PATCH 2/3] test --- src/pages/user/UserRegistration.jsx | 544 +++++++++++++++++----------- 1 file changed, 331 insertions(+), 213 deletions(-) diff --git a/src/pages/user/UserRegistration.jsx b/src/pages/user/UserRegistration.jsx index 7706b6b3..6e840073 100644 --- a/src/pages/user/UserRegistration.jsx +++ b/src/pages/user/UserRegistration.jsx @@ -3,256 +3,374 @@ import { useLocation } from "react-router-dom"; import InputField from "../../Components/shared/InputField"; import ReactiveButton from "reactive-button"; import custBackgroundImage from "../user/imgs/pngtree-blue-pastel-background-picture-image_1599663.jpg"; // Import your background image -import {FaEye,FaEyeSlash} from 'react-icons/fa6' -import i1 from '../user/imgs/white-dog-pastel-blue-background-3d_89917-269.jpg'; +import { FaEye, FaEyeSlash } from "react-icons/fa6"; +import i1 from "../user/imgs/white-dog-pastel-blue-background-3d_89917-269.jpg"; import { login, registration } from "../../utils/Functions/userAuthService"; import LoginTextLink from "../../Components/shared/LoginTextLink"; +import AlertDialog from "../../Components/shared/AlertDialog"; + // import Validator from 'validator'; function CustomBackground({ image }) { - const backgroundStyle = { - position: "fixed", - top: 0, - left: 0, - width: "100%", - height: "100%", - zIndex: -1, - backgroundImage: `url(${image})`, - backgroundSize: "cover", - backgroundPosition: "center", - }; + const backgroundStyle = { + position: "fixed", + top: 0, + left: 0, + width: "100%", + height: "100%", + zIndex: -1, + backgroundImage: `url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + }; - return
; + return
; } function LoginRegisterForm() { const location = useLocation(); - const [isPassVisible, setIsPassVisible] = useState(false) const [userTypingPassword, setUserTypingPassword] = useState(false); let isLogin = true; if (location.pathname === "/register") { isLogin = !isLogin; } - // const googleButtonStyle = { - // borderRadius: "40px", - // display: "flex", - // background: "#FFFFFF", // Google White - // color: "#3f3f3f", // Google Gray - // padding: "10px 10px", - // fontSize: "16px", - // fontWeight: "bold", - // boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 2px 0px", - // cursor: "pointer", - // border: "1px solid #dadce0", // Google Gray - // transition: "background-color 0.2s, box-shadow 0.2s", - // }; - const customButtonStyle = { - borderRadius: "20px", // Adjust the border radius as needed - background: "linear-gradient(to bottom, #b3d9ff, #3399ff)", // Adjust gradient colors - padding: "20px 40px", - marginTop: "0.675rem", - fontSize: "22px", - fontWeight: "800", - boxShadow: "rgb(38, 57, 77) 0px 15px 30px -10px", - letterSpacing: "0.2rem", - width: "fit-content", - margin: "auto", - }; + // const googleButtonStyle = { + // borderRadius: "40px", + // display: "flex", + // background: "#FFFFFF", // Google White + // color: "#3f3f3f", // Google Gray + // padding: "10px 10px", + // fontSize: "16px", + // fontWeight: "bold", + // boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 2px 0px", + // cursor: "pointer", + // border: "1px solid #dadce0", // Google Gray + // transition: "background-color 0.2s, box-shadow 0.2s", + // }; + + const customButtonStyle = { + borderRadius: "20px", // Adjust the border radius as needed + background: "linear-gradient(to bottom, #b3d9ff, #3399ff)", // Adjust gradient colors + padding: "20px 40px", + marginTop: "0.675rem", + fontSize: "22px", + fontWeight: "800", + boxShadow: "rgb(38, 57, 77) 0px 15px 30px -10px", + letterSpacing: "0.2rem", + width: "fit-content", + margin: "auto", + }; + + // const [errorMessage, setErrorMessage] = useState(""); + const [name, setname] = useState(""); + const [phone_number, setPhone_number] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(""); + const [state, setButtonState] = useState("idle"); + + + const [isMinLength, setIsMinLength] = useState(false); + const [hasUpperCase, setHasUpperCase] = useState(false); + const [hasLowerCase, setHasLowerCase] = useState(false); + const [hasNumber, setHasNumber] = useState(false); + const [hasSymbol, setHasSymbol] = useState(false); - // const [errorMessage, setErrorMessage] = useState(""); - const [name, setname] = useState(""); - const [phone_number, setPhone_number] = useState(""); - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [error, setError] = useState(""); - const [state, setButtonState] = useState("idle"); + const [isOpenConfirmBox , setIsOpenConfirmBox ] = useState(false); - const [isMinLength, setIsMinLength] = useState(false); - const [hasUpperCase, setHasUpperCase] = useState(false); - const [hasLowerCase, setHasLowerCase] = useState(false); - const [hasNumber, setHasNumber] = useState(false); - const [hasSymbol, setHasSymbol] = useState(false); + useEffect(() => { + setError(""); + }, [isLogin]); - useEffect(() => { - setError(""); - }, [isLogin]); + const validate = (value) => { + setIsMinLength(value.length >= 8); + setHasUpperCase(/[A-Z]/.test(value)); + setHasLowerCase(/[a-z]/.test(value)); + setHasNumber(/[0-9]/.test(value)); + setHasSymbol(/[^A-Za-z0-9]/.test(value)); + }; - const validate = (value) => { - setIsMinLength(value.length >= 8); - setHasUpperCase(/[A-Z]/.test(value)); - setHasLowerCase(/[a-z]/.test(value)); - setHasNumber(/[0-9]/.test(value)); - setHasSymbol(/[^A-Za-z0-9]/.test(value)); + + + + // user Registration + const handleRegistration = async () => { + const res = await registration( + name, + phone_number, + email, + password, + setError, + setButtonState + ); + + // when res is success then only show confirmation dialog + if (res) { + setTimeout(() => { + setIsOpenConfirmBox(() => true); + }, 3000); + } + }; + + // condition based rendering when resigration successful + const closeConfirmationDialog = (isUploadPhoto) => { + if (isUploadPhoto) { + window.location.href = "/"; + } else { + window.location.href = "/user?upload=true"; + } + + setIsOpenConfirmBox(false); }; return (
- - -
-
-
-
-
-
- {!isLogin && ( - <> -

Create Account

- { - setError(""); - setname(e.target.value); - }} - style={{ marginBottom: "-2px" }} // Adjust this value as needed - required - /> + +
+
+
+
+
+ + {!isLogin && ( + <> +

+ Create Account +

+ { + setError(""); + setname(e.target.value); + }} + style={{ marginBottom: "-2px" }} // Adjust this value as needed + required + /> + { + setError(""); + setPhone_number(e.target.value); + }} + required + /> + + )} + {isLogin && + <> +

Welcome Back

+ + } { setError(""); - setPhone_number(e.target.value); + setEmail(e.target.value); }} required /> - - )} - {isLogin && - <> -

Welcome Back

- - } - { - setError(""); - setEmail(e.target.value); - }} - required - /> -
- - { - setError(""); - setPassword(e.target.value); - validate(e.target.value); - setPassword(e.target.value); - if (e.target.value.length > 0) { - setUserTypingPassword(true); - } else { - setUserTypingPassword(false); - } - }} - required - /> - { - isPassVisible?setIsPassVisible(false)} size={"40px"}/>:setIsPassVisible(true)} size={"40px"}/> - } +
+ { + setError(""); + setPhone_number( + e.target.value + ); + }} + required + /> +
+ {isLogin && ( + <> +

+ {" "} + Welcome Back +

+ + )} + { + setError(""); + setEmail(e.target.value); + }} + required + /> +
+ { + setError(""); + setPassword(e.target.value); + validate(e.target.value); + setPassword(e.target.value); + }} + required + /> + {isPassVisible ? ( + + setIsPassVisible(false) + } + size={25} + /> + ) : ( + + setIsPassVisible(true) + } + size={25} + /> + )} +
+
+

+ • Minimum 8 characters +

+

+ • At least one uppercase letter +

+

+ • At least one lowercase letter +

+

+ • At least one number +

+

+ • At least one symbol +

+
+ {!isLogin && ( + <> +
+ + {error &&

{error}

} +
+ + )} + {!isLogin && ( + <> +
+ + +
+ + )} + {isLogin && ( +
+ + login(email, password, setError, setButtonState) + } + /> + {error &&

{error}

} +
+ )} +
- {!isLogin && <> - {userTypingPassword &&
-

• Minimum 8 characters

-

• At least one uppercase letter

-

• At least one lowercase letter

-

• At least one number

-

• At least one symbol

-
} - } - - {!isLogin && ( - <> -
- - registration( - name, - phone_number, - email, - password, - setError, - setButtonState - ) - } - /> - {error &&

{error}

} -
- - )} - {!isLogin && ( - <> -
- - -
- - )} - {isLogin && ( -
- - login(email, password, setError, setButtonState) - } - /> - {error &&

{error}

} -
- )} - +
+
+ Cute dog +
-
- Cute dog -
-
-
+ {/* Alert Dialog for profile */} +
); } From d899f92909cd805a286e82e79bb83d7e5009d507 Mon Sep 17 00:00:00 2001 From: Ananya Date: Fri, 31 May 2024 19:40:36 +0530 Subject: [PATCH 3/3] all errors resolved, Removed password constraints from login --- src/pages/user/UserRegistration.jsx | 444 +++++++++++----------------- 1 file changed, 172 insertions(+), 272 deletions(-) diff --git a/src/pages/user/UserRegistration.jsx b/src/pages/user/UserRegistration.jsx index 87246c41..f43d8eaa 100644 --- a/src/pages/user/UserRegistration.jsx +++ b/src/pages/user/UserRegistration.jsx @@ -9,93 +9,68 @@ import { login, registration } from "../../utils/Functions/userAuthService"; import LoginTextLink from "../../Components/shared/LoginTextLink"; import AlertDialog from "../../Components/shared/AlertDialog"; -// import Validator from 'validator'; - function CustomBackground({ image }) { - const backgroundStyle = { - position: "fixed", - top: 0, - left: 0, - width: "100%", - height: "100%", - zIndex: -1, - backgroundImage: `url(${image})`, - backgroundSize: "cover", - backgroundPosition: "center", - }; + const backgroundStyle = { + position: "fixed", + top: 0, + left: 0, + width: "100%", + height: "100%", + zIndex: -1, + backgroundImage: `url(${image})`, + backgroundSize: "cover", + backgroundPosition: "center", + }; - return
; + return
; } function LoginRegisterForm() { const location = useLocation(); const [userTypingPassword, setUserTypingPassword] = useState(false); - let isLogin = true; - if (location.pathname === "/register") { - isLogin = !isLogin; - } - - - // const googleButtonStyle = { - // borderRadius: "40px", - // display: "flex", - // background: "#FFFFFF", // Google White - // color: "#3f3f3f", // Google Gray - // padding: "10px 10px", - // fontSize: "16px", - // fontWeight: "bold", - // boxShadow: "rgba(0, 0, 0, 0.1) 0px 1px 2px 0px", - // cursor: "pointer", - // border: "1px solid #dadce0", // Google Gray - // transition: "background-color 0.2s, box-shadow 0.2s", - // }; - - const customButtonStyle = { - borderRadius: "20px", // Adjust the border radius as needed - background: "linear-gradient(to bottom, #b3d9ff, #3399ff)", // Adjust gradient colors - padding: "20px 40px", - marginTop: "0.675rem", - fontSize: "22px", - fontWeight: "800", - boxShadow: "rgb(38, 57, 77) 0px 15px 30px -10px", - letterSpacing: "0.2rem", - width: "fit-content", - margin: "auto", - }; + const isLogin = location.pathname !== "/register"; - // const [errorMessage, setErrorMessage] = useState(""); - const [name, setname] = useState(""); - const [phone_number, setPhone_number] = useState(""); - const [email, setEmail] = useState(""); - const [password, setPassword] = useState(""); - const [error, setError] = useState(""); - const [state, setButtonState] = useState("idle"); - - - const [isMinLength, setIsMinLength] = useState(false); - const [hasUpperCase, setHasUpperCase] = useState(false); - const [hasLowerCase, setHasLowerCase] = useState(false); - const [hasNumber, setHasNumber] = useState(false); - const [hasSymbol, setHasSymbol] = useState(false); + const customButtonStyle = { + borderRadius: "20px", + background: "linear-gradient(to bottom, #b3d9ff, #3399ff)", + padding: "20px 40px", + marginTop: "0.675rem", + fontSize: "22px", + fontWeight: "800", + boxShadow: "rgb(38, 57, 77) 0px 15px 30px -10px", + letterSpacing: "0.2rem", + width: "fit-content", + margin: "auto", + }; - const [isOpenConfirmBox , setIsOpenConfirmBox ] = useState(false); + const [name, setName] = useState(""); + const [phone_number, setPhoneNumber] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(""); + const [state, setButtonState] = useState("idle"); - useEffect(() => { - setError(""); - }, [isLogin]); + const [isMinLength, setIsMinLength] = useState(false); + const [hasUpperCase, setHasUpperCase] = useState(false); + const [hasLowerCase, setHasLowerCase] = useState(false); + const [hasNumber, setHasNumber] = useState(false); + const [hasSymbol, setHasSymbol] = useState(false); - const validate = (value) => { - setIsMinLength(value.length >= 8); - setHasUpperCase(/[A-Z]/.test(value)); - setHasLowerCase(/[a-z]/.test(value)); - setHasNumber(/[0-9]/.test(value)); - setHasSymbol(/[^A-Za-z0-9]/.test(value)); - }; + const [isOpenConfirmBox, setIsOpenConfirmBox] = useState(false); + const [isPassVisible, setIsPassVisible] = useState(false); + useEffect(() => { + setError(""); + }, [isLogin]); - + const validate = (value) => { + setIsMinLength(value.length >= 8); + setHasUpperCase(/[A-Z]/.test(value)); + setHasLowerCase(/[a-z]/.test(value)); + setHasNumber(/[0-9]/.test(value)); + setHasSymbol(/[^A-Za-z0-9]/.test(value)); + }; - // user Registration const handleRegistration = async () => { const res = await registration( name, @@ -106,15 +81,13 @@ function LoginRegisterForm() { setButtonState ); - // when res is success then only show confirmation dialog if (res) { setTimeout(() => { - setIsOpenConfirmBox(() => true); + setIsOpenConfirmBox(true); }, 3000); } }; - // condition based rendering when resigration successful const closeConfirmationDialog = (isUploadPhoto) => { if (isUploadPhoto) { window.location.href = "/"; @@ -127,38 +100,36 @@ function LoginRegisterForm() { return (
- -
-
-
-
-
-
- {!isLogin && ( - <> -

- Create Account -

- { - setError(""); - setname(e.target.value); - }} - style={{ marginBottom: "-2px" }} // Adjust this value as needed - required - /> - + +
+
+
+
+
+ + {!isLogin && ( + <> +

+ Create Account +

+ { + setError(""); + setName(e.target.value); + }} + required + /> { setError(""); - setPhone_number(e.target.value); + setPhoneNumber(e.target.value); }} required /> )} - {isLogin && + {isLogin && ( <> -

Welcome Back

+

+ Welcome Back +

- } + )}
- { - setError(""); - setPhone_number( - e.target.value - ); - }} - required - /> -<<<<<<< HEAD -
-======= - - )} ->>>>>>> 78c832406511468e13c8f020cf1ee1665e606171 - {isLogin && ( - <> -

- {" "} - Welcome Back -

- - )} - { - setError(""); - setEmail(e.target.value); - }} - required - /> -
- { - setError(""); - setPassword(e.target.value); - validate(e.target.value); - setPassword(e.target.value); - }} - required - /> - {isPassVisible ? ( - - setIsPassVisible(false) - } - size={25} - /> - ) : ( - - setIsPassVisible(true) - } - size={25} - /> - )} -
-
-

- • Minimum 8 characters -

-

- • At least one uppercase letter -

-

- • At least one lowercase letter -

-

- • At least one number -

-

- • At least one symbol -

-
+ { + setError(""); + setPassword(e.target.value); + validate(e.target.value); + }} + required + /> + {isPassVisible ? ( + setIsPassVisible(false)} + size={25} + /> + ) : ( + setIsPassVisible(true)} + size={25} + /> + )} +
+ {!isLogin && ( - <> -
- - {error &&

{error}

} -
- +
+

+ • Minimum 8 characters +

+

+ • At least one uppercase letter +

+

+ • At least one lowercase letter +

+

+ • At least one number +

+

+ • At least one symbol +

+
)} + {!isLogin && ( - <> -
- - -
- +
+ + {error && ( +

+ {error} +

+ )} +
)} + {isLogin && (
- {error &&

{error}

} + {error && ( +

+ {error} +

+ )}
)}
-
- Cute dog -
+
+ Cute dog +
- {/* Alert Dialog for profile */}