From f01f807787de4d42a7e7007d14360f309d1da16a Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Wed, 17 Apr 2024 00:38:41 +0530 Subject: [PATCH 01/14] Improved the change password handling in profile edit page successfully --- src/Components/Form/FormFields/FormField.tsx | 18 +++- src/Components/Users/UserProfile.tsx | 94 ++++++++++++++++---- 2 files changed, 91 insertions(+), 21 deletions(-) diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx index d3e77aabf52..58666630cdb 100644 --- a/src/Components/Form/FormFields/FormField.tsx +++ b/src/Components/Form/FormFields/FormField.tsx @@ -18,7 +18,7 @@ export const FieldLabel = (props: LabelProps) => { className={classNames( "block text-base font-normal text-gray-900", !props.noPadding && "mb-2", - props.className, + props.className )} htmlFor={props.htmlFor} > @@ -38,7 +38,7 @@ export const FieldErrorText = ({ error, className }: ErrorProps) => { className={classNames( "error-text ml-1 mt-2 text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300", error ? "opacity-100" : "opacity-0", - className, + className )} > {error} @@ -71,7 +71,19 @@ const FormField = ({ )}
{children}
- + {field?.error && field?.error?.split("\n").length > 1 ? ( + field?.error?.split("\n").map((err) => ( + <> + +
+ + )) + ) : ( + + )} ); }; diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index 7f18eba8a9f..e659c6e297a 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -83,7 +83,7 @@ const initForm: EditForm = { const initError: ErrorForm = Object.assign( {}, - ...Object.keys(initForm).map((k) => ({ [k]: "" })), + ...Object.keys(initForm).map((k) => ({ [k]: "" })) ); const initialState: State = { @@ -130,7 +130,7 @@ export default function UserProfile() { new_password_2: "", }); - const [changePasswordErrors] = useState<{ + const [changePasswordErrors, setChangePasswordErrors] = useState<{ old_password: string; password_confirmation: string; }>({ @@ -138,6 +138,8 @@ export default function UserProfile() { password_confirmation: "", }); + const [newPasswordError, setNewPasswordError] = useState(""); + const [showEdit, setShowEdit] = useState(false); const { @@ -161,7 +163,7 @@ export default function UserProfile() { doctor_qualification: result.data.doctor_qualification, doctor_experience_commenced_on: dayjs().diff( dayjs(result.data.doctor_experience_commenced_on), - "years", + "years" ), doctor_medical_council_registration: result.data.doctor_medical_council_registration, @@ -178,9 +180,48 @@ export default function UserProfile() { routes.userListSkill, { pathParams: { username: authUser.username }, - }, + } ); + const setNewPasswordErrorCallFun = (value: string) => { + if (value == "") { + setNewPasswordError(""); + return; + } + setNewPasswordError( + [ + value?.length >= 8 + ? "" + : "Password should be at least 8 characters long", + value !== value.toUpperCase() + ? "" + : "Password should contain at least 1 lowercase letter", + value !== value.toLowerCase() + ? "" + : "Password should contain at least 1 uppercase letter", + /\d/.test(value) ? "" : "Password should contain at least 1 number", + ] + .filter(Boolean) + .join("\n") // Join only the non-empty error messages + ); + }; + + const changePasswordErrorsCallFun = (value: string) => { + if (value === "" || value === changePasswordForm.new_password_1) { + setChangePasswordErrors((prev) => ({ + ...prev, + password_confirmation: "", + })); + return; + } else { + setChangePasswordErrors((prev) => ({ + ...prev, + password_confirmation: + "Confirm password should match the new password!", + })); + } + }; + const validateForm = () => { const errors = { ...initError }; let invalidForm = false; @@ -341,9 +382,9 @@ export default function UserProfile() { .subtract( parseInt( (states.form.doctor_experience_commenced_on as string) ?? - "0", + "0" ), - "years", + "years" ) .format("YYYY-MM-DD") : undefined, @@ -403,7 +444,13 @@ export default function UserProfile() { changePasswordForm.new_password_1 != changePasswordForm.new_password_2 ) { Notification.Error({ - msg: "Passwords are different in the new and the confirmation column.", + msg: "Passwords are different in new password and confirmation password column.", + }); + } else if ( + changePasswordForm.new_password_1 == changePasswordForm.old_password + ) { + Notification.Error({ + msg: "New password is same as old password, Please enter a different new password.", }); } else { const form: UpdatePasswordForm = { @@ -411,14 +458,23 @@ export default function UserProfile() { username: authUser.username, new_password: changePasswordForm.new_password_1, }; - const { res, data } = await request(routes.updatePassword, { + const { res, data, error } = await request(routes.updatePassword, { body: form, }); if (res?.ok && data?.message === "Password updated successfully") { Notification.Success({ msg: "Password changed!", }); - } else { + } else if ( + !( + Array.isArray(error?.old_password) && + error.old_password.some((password: string) => + password.includes( + "Wrong password entered. Please check your password." + ) + ) + ) + ) { Notification.Error({ msg: "There was some error. Please try again in some time.", }); @@ -726,7 +782,7 @@ export default function UserProfile() { /> + onChange={(e) => { setChangePasswordForm({ ...changePasswordForm, new_password_1: e.value, - }) - } - error="" + }); + setNewPasswordErrorCallFun(e.value); + }} + error={newPasswordError} required /> + onChange={(e) => { setChangePasswordForm({ ...changePasswordForm, new_password_2: e.value, - }) - } + }); + changePasswordErrorsCallFun(e.value); + }} error={changePasswordErrors.password_confirmation} /> @@ -867,7 +925,7 @@ export default function UserProfile() { icon="l-sync" className={classNames( "text-2xl", - updateStatus.isChecking && "animate-spin", + updateStatus.isChecking && "animate-spin" )} /> {updateStatus.isChecking From 6dd23bc7512aed290cd262998b2535fccec2e122 Mon Sep 17 00:00:00 2001 From: Nikhil Kumar <91010142+r-nikhilkumar@users.noreply.github.com> Date: Wed, 17 Apr 2024 00:53:12 +0530 Subject: [PATCH 02/14] lint checks --- src/Components/Form/FormFields/FormField.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx index 58666630cdb..21bb6482634 100644 --- a/src/Components/Form/FormFields/FormField.tsx +++ b/src/Components/Form/FormFields/FormField.tsx @@ -18,7 +18,7 @@ export const FieldLabel = (props: LabelProps) => { className={classNames( "block text-base font-normal text-gray-900", !props.noPadding && "mb-2", - props.className + props.className, )} htmlFor={props.htmlFor} > @@ -38,7 +38,7 @@ export const FieldErrorText = ({ error, className }: ErrorProps) => { className={classNames( "error-text ml-1 mt-2 text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300", error ? "opacity-100" : "opacity-0", - className + className, )} > {error} From 9dbbb91d385b4196e86641e0243a6980fdb10d75 Mon Sep 17 00:00:00 2001 From: Nikhil Kumar <91010142+r-nikhilkumar@users.noreply.github.com> Date: Wed, 17 Apr 2024 00:57:48 +0530 Subject: [PATCH 03/14] lint checks --- src/Components/Users/UserProfile.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index e659c6e297a..025f6223dd6 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -83,7 +83,7 @@ const initForm: EditForm = { const initError: ErrorForm = Object.assign( {}, - ...Object.keys(initForm).map((k) => ({ [k]: "" })) + ...Object.keys(initForm).map((k) => ({ [k]: "" })), ); const initialState: State = { @@ -163,7 +163,7 @@ export default function UserProfile() { doctor_qualification: result.data.doctor_qualification, doctor_experience_commenced_on: dayjs().diff( dayjs(result.data.doctor_experience_commenced_on), - "years" + "years", ), doctor_medical_council_registration: result.data.doctor_medical_council_registration, @@ -180,7 +180,7 @@ export default function UserProfile() { routes.userListSkill, { pathParams: { username: authUser.username }, - } + }, ); const setNewPasswordErrorCallFun = (value: string) => { @@ -382,9 +382,9 @@ export default function UserProfile() { .subtract( parseInt( (states.form.doctor_experience_commenced_on as string) ?? - "0" + "0", ), - "years" + "years", ) .format("YYYY-MM-DD") : undefined, @@ -782,7 +782,7 @@ export default function UserProfile() { /> {updateStatus.isChecking From e94ee50e3a2446178ad5b8434c523ec47af2fb40 Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Wed, 17 Apr 2024 01:33:17 +0530 Subject: [PATCH 04/14] done --- src/Components/Form/FormFields/FormField.tsx | 8 ++--- src/Components/Users/UserProfile.tsx | 38 ++++++++++---------- 2 files changed, 22 insertions(+), 24 deletions(-) diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx index 21bb6482634..04710f69c09 100644 --- a/src/Components/Form/FormFields/FormField.tsx +++ b/src/Components/Form/FormFields/FormField.tsx @@ -18,7 +18,7 @@ export const FieldLabel = (props: LabelProps) => { className={classNames( "block text-base font-normal text-gray-900", !props.noPadding && "mb-2", - props.className, + props.className )} htmlFor={props.htmlFor} > @@ -38,7 +38,7 @@ export const FieldErrorText = ({ error, className }: ErrorProps) => { className={classNames( "error-text ml-1 mt-2 text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300", error ? "opacity-100" : "opacity-0", - className, + className )} > {error} @@ -73,10 +73,10 @@ const FormField = ({
{children}
{field?.error && field?.error?.split("\n").length > 1 ? ( field?.error?.split("\n").map((err) => ( - <> +

- +
)) ) : ( ({ [k]: "" })), + ...Object.keys(initForm).map((k) => ({ [k]: "" })) ); const initialState: State = { @@ -163,7 +163,7 @@ export default function UserProfile() { doctor_qualification: result.data.doctor_qualification, doctor_experience_commenced_on: dayjs().diff( dayjs(result.data.doctor_experience_commenced_on), - "years", + "years" ), doctor_medical_council_registration: result.data.doctor_medical_council_registration, @@ -180,7 +180,7 @@ export default function UserProfile() { routes.userListSkill, { pathParams: { username: authUser.username }, - }, + } ); const setNewPasswordErrorCallFun = (value: string) => { @@ -190,7 +190,7 @@ export default function UserProfile() { } setNewPasswordError( [ - value?.length >= 8 + value.length >= 8 ? "" : "Password should be at least 8 characters long", value !== value.toUpperCase() @@ -382,9 +382,9 @@ export default function UserProfile() { .subtract( parseInt( (states.form.doctor_experience_commenced_on as string) ?? - "0", + "0" ), - "years", + "years" ) .format("YYYY-MM-DD") : undefined, @@ -441,13 +441,20 @@ export default function UserProfile() { e.preventDefault(); //validating form if ( - changePasswordForm.new_password_1 != changePasswordForm.new_password_2 + changePasswordForm.new_password_1 !== changePasswordForm.new_password_2 ) { Notification.Error({ msg: "Passwords are different in new password and confirmation password column.", }); } else if ( - changePasswordForm.new_password_1 == changePasswordForm.old_password + newPasswordError !== "" || + changePasswordErrors.password_confirmation !== "" + ) { + Notification.Error({ + msg: "Entered Password is not valid, please check!", + }); + } else if ( + changePasswordForm.new_password_1 === changePasswordForm.old_password ) { Notification.Error({ msg: "New password is same as old password, Please enter a different new password.", @@ -465,16 +472,7 @@ export default function UserProfile() { Notification.Success({ msg: "Password changed!", }); - } else if ( - !( - Array.isArray(error?.old_password) && - error.old_password.some((password: string) => - password.includes( - "Wrong password entered. Please check your password." - ) - ) - ) - ) { + } else if (!error) { Notification.Error({ msg: "There was some error. Please try again in some time.", }); @@ -782,7 +780,7 @@ export default function UserProfile() { /> {updateStatus.isChecking From 71a5f85c0cf4a38191f4b6cacef533c52005158c Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Wed, 17 Apr 2024 02:02:50 +0530 Subject: [PATCH 05/14] lint error solved --- src/Components/Form/FormFields/FormField.tsx | 4 ++-- src/Components/Users/UserProfile.tsx | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx index 04710f69c09..7e0382a6e26 100644 --- a/src/Components/Form/FormFields/FormField.tsx +++ b/src/Components/Form/FormFields/FormField.tsx @@ -18,7 +18,7 @@ export const FieldLabel = (props: LabelProps) => { className={classNames( "block text-base font-normal text-gray-900", !props.noPadding && "mb-2", - props.className + props.className, )} htmlFor={props.htmlFor} > @@ -38,7 +38,7 @@ export const FieldErrorText = ({ error, className }: ErrorProps) => { className={classNames( "error-text ml-1 mt-2 text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300", error ? "opacity-100" : "opacity-0", - className + className, )} > {error} diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index 0729bc0c557..b4753db3c5a 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -83,7 +83,7 @@ const initForm: EditForm = { const initError: ErrorForm = Object.assign( {}, - ...Object.keys(initForm).map((k) => ({ [k]: "" })) + ...Object.keys(initForm).map((k) => ({ [k]: "" })), ); const initialState: State = { @@ -163,7 +163,7 @@ export default function UserProfile() { doctor_qualification: result.data.doctor_qualification, doctor_experience_commenced_on: dayjs().diff( dayjs(result.data.doctor_experience_commenced_on), - "years" + "years", ), doctor_medical_council_registration: result.data.doctor_medical_council_registration, @@ -180,7 +180,7 @@ export default function UserProfile() { routes.userListSkill, { pathParams: { username: authUser.username }, - } + }, ); const setNewPasswordErrorCallFun = (value: string) => { @@ -202,7 +202,7 @@ export default function UserProfile() { /\d/.test(value) ? "" : "Password should contain at least 1 number", ] .filter(Boolean) - .join("\n") // Join only the non-empty error messages + .join("\n"), // Join only the non-empty error messages ); }; @@ -382,9 +382,9 @@ export default function UserProfile() { .subtract( parseInt( (states.form.doctor_experience_commenced_on as string) ?? - "0" + "0", ), - "years" + "years", ) .format("YYYY-MM-DD") : undefined, @@ -780,7 +780,7 @@ export default function UserProfile() { /> {updateStatus.isChecking From fd5b5a097fc8ba69e594b6aa6c064494f98b4630 Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Mon, 22 Apr 2024 23:02:42 +0530 Subject: [PATCH 06/14] change request done --- src/Components/Form/FormFields/FormField.tsx | 23 +++--- src/Components/Users/UserProfile.tsx | 74 +++++++++----------- 2 files changed, 43 insertions(+), 54 deletions(-) diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx index 7e0382a6e26..212fdb11b9e 100644 --- a/src/Components/Form/FormFields/FormField.tsx +++ b/src/Components/Form/FormFields/FormField.tsx @@ -71,19 +71,16 @@ const FormField = ({ )}
{children}
- {field?.error && field?.error?.split("\n").length > 1 ? ( - field?.error?.split("\n").map((err) => ( -
- -
-
- )) - ) : ( - - )} +
    + {field?.error && + field?.error?.split("\n").length && + field?.error?.split("\n").map((err) => ( +
  • + +
    +
    • + ))} +
); }; diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index b4753db3c5a..d4991a58b2e 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -138,8 +138,6 @@ export default function UserProfile() { password_confirmation: "", }); - const [newPasswordError, setNewPasswordError] = useState(""); - const [showEdit, setShowEdit] = useState(false); const { @@ -183,43 +181,26 @@ export default function UserProfile() { }, ); - const setNewPasswordErrorCallFun = (value: string) => { - if (value == "") { - setNewPasswordError(""); - return; + const validateNewPassword = (password: string) => { + const errors = []; + + if (password.length < 8) { + errors.push("Password should be at least 8 characters long"); } - setNewPasswordError( - [ - value.length >= 8 - ? "" - : "Password should be at least 8 characters long", - value !== value.toUpperCase() - ? "" - : "Password should contain at least 1 lowercase letter", - value !== value.toLowerCase() - ? "" - : "Password should contain at least 1 uppercase letter", - /\d/.test(value) ? "" : "Password should contain at least 1 number", - ] - .filter(Boolean) - .join("\n"), // Join only the non-empty error messages - ); - }; - const changePasswordErrorsCallFun = (value: string) => { - if (value === "" || value === changePasswordForm.new_password_1) { - setChangePasswordErrors((prev) => ({ - ...prev, - password_confirmation: "", - })); - return; - } else { - setChangePasswordErrors((prev) => ({ - ...prev, - password_confirmation: - "Confirm password should match the new password!", - })); + if (password === password.toUpperCase()) { + errors.push("Password should contain at least 1 lowercase letter"); + } + + if (password === password.toLowerCase()) { + errors.push("Password should contain at least 1 uppercase letter"); + } + + if (!/\d/.test(password)) { + errors.push("Password should contain at least 1 number"); } + + return errors.join("\n"); }; const validateForm = () => { @@ -447,11 +428,11 @@ export default function UserProfile() { msg: "Passwords are different in new password and confirmation password column.", }); } else if ( - newPasswordError !== "" || + validateNewPassword(changePasswordForm.new_password_1).length || changePasswordErrors.password_confirmation !== "" ) { Notification.Error({ - msg: "Entered Password is not valid, please check!", + msg: "Entered New Password is not valid, please check!", }); } else if ( changePasswordForm.new_password_1 === changePasswordForm.old_password @@ -840,9 +821,10 @@ export default function UserProfile() { ...changePasswordForm, new_password_1: e.value, }); - setNewPasswordErrorCallFun(e.value); }} - error={newPasswordError} + error={validateNewPassword( + changePasswordForm.new_password_1, + )} required /> ({ + ...prev, + password_confirmation: "", + })) + : setChangePasswordErrors((prev) => ({ + ...prev, + password_confirmation: + "Confirm password should match the new password!", + })); }} error={changePasswordErrors.password_confirmation} /> From c8e8a1b2fe14e1c77f5f1ba80801b094d548df3d Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Wed, 24 Apr 2024 17:48:17 +0530 Subject: [PATCH 07/14] change req done --- src/Components/Form/FormFields/FormField.tsx | 22 +++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx index 212fdb11b9e..4de160876af 100644 --- a/src/Components/Form/FormFields/FormField.tsx +++ b/src/Components/Form/FormFields/FormField.tsx @@ -71,16 +71,18 @@ const FormField = ({ )}
{children}
-
    - {field?.error && - field?.error?.split("\n").length && - field?.error?.split("\n").map((err) => ( -
  • - -
    -
    • - ))} -
+ + {field?.error && ( +
    + {field?.error?.split("\n").length && + field?.error?.split("\n").map((err) => ( +
  • + +
    +
    • + ))} +
+ )} ); }; From 018b56cf1b085669e0362659a89c2ed5c219d638 Mon Sep 17 00:00:00 2001 From: Nikhil Kumar <91010142+r-nikhilkumar@users.noreply.github.com> Date: Wed, 24 Apr 2024 17:48:54 +0530 Subject: [PATCH 08/14] Update src/Components/Users/UserProfile.tsx Co-authored-by: Rithvik Nishad --- src/Components/Users/UserProfile.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index d4991a58b2e..4b88cac8ed4 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -449,10 +449,8 @@ export default function UserProfile() { const { res, data, error } = await request(routes.updatePassword, { body: form, }); - if (res?.ok && data?.message === "Password updated successfully") { - Notification.Success({ - msg: "Password changed!", - }); + if (res?.ok) { + Notification.Success({ msg: data?.message }); } else if (!error) { Notification.Error({ msg: "There was some error. Please try again in some time.", From e81920c5075bf0e0015334d5c9238b3721cbdd7f Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Fri, 26 Apr 2024 19:37:57 +0530 Subject: [PATCH 09/14] cypress test updated --- src/Components/Form/FormFields/FormField.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx index 4de160876af..e97fd67469f 100644 --- a/src/Components/Form/FormFields/FormField.tsx +++ b/src/Components/Form/FormFields/FormField.tsx @@ -74,11 +74,11 @@ const FormField = ({ {field?.error && (
    - {field?.error?.split("\n").length && - field?.error?.split("\n").map((err) => ( -
  • + {(typeof field.error === "string" ? field.error : String(field.error)) + .split("\n") + .map((err, index) => ( +
  • -
    • ))}
From acd203d0f5789aba89f561ca8d0b3b74ebf8440e Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Sat, 27 Apr 2024 15:15:32 +0530 Subject: [PATCH 10/14] removed precondition check to resolve spacing issue occured --- src/Components/Form/FormFields/FormField.tsx | 24 ++++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx index e97fd67469f..85c0a3cb60a 100644 --- a/src/Components/Form/FormFields/FormField.tsx +++ b/src/Components/Form/FormFields/FormField.tsx @@ -71,18 +71,18 @@ const FormField = ({ )}
{children}
- - {field?.error && ( -
    - {(typeof field.error === "string" ? field.error : String(field.error)) - .split("\n") - .map((err, index) => ( -
  • - -
    • - ))} -
- )} +
    + {(typeof field?.error === "string" + ? field.error + : String(field?.error ?? "") + ) + .split("\n") + .map((err, index) => ( +
  • + +
    • + ))} +
); }; From ddfd72bd5fe9e80734263dfb9fabe7b13fa73a2e Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Tue, 30 Apr 2024 16:13:10 +0530 Subject: [PATCH 11/14] change request | test failed done --- src/Components/Form/FormFields/FormField.tsx | 13 +- src/Components/Users/UserProfile.tsx | 154 +++++++++++-------- 2 files changed, 91 insertions(+), 76 deletions(-) diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx index 85c0a3cb60a..d3e77aabf52 100644 --- a/src/Components/Form/FormFields/FormField.tsx +++ b/src/Components/Form/FormFields/FormField.tsx @@ -71,18 +71,7 @@ const FormField = ({ )}
{children}
-
    - {(typeof field?.error === "string" - ? field.error - : String(field?.error ?? "") - ) - .split("\n") - .map((err, index) => ( -
  • - -
    • - ))} -
+ ); }; diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index f7a38167511..9c86dc567a3 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -25,6 +25,7 @@ import useQuery from "../../Utils/request/useQuery"; import routes from "../../Redux/api"; import request from "../../Utils/request/request"; import DateFormField from "../Form/FormFields/DateFormField"; +import { validateRule } from "./UserAdd"; const Loading = lazy(() => import("../Common/Loading")); type EditForm = { @@ -130,7 +131,7 @@ export default function UserProfile() { new_password_2: "", }); - const [changePasswordErrors, setChangePasswordErrors] = useState<{ + const [changePasswordErrors] = useState<{ old_password: string; password_confirmation: string; }>({ @@ -139,6 +140,13 @@ export default function UserProfile() { }); const [showEdit, setShowEdit] = useState(false); + const [newPasswordInputInFocus, setNewPasswordInputInFocus] = + useState(false); + + const [ + newConfirmedPasswordInputInFocus, + setNewConfirmedPasswordInputInFocus, + ] = useState(false); const { data: userData, @@ -181,25 +189,15 @@ export default function UserProfile() { ); const validateNewPassword = (password: string) => { - const errors = []; - - if (password.length < 8) { - errors.push("Password should be at least 8 characters long"); - } - - if (password === password.toUpperCase()) { - errors.push("Password should contain at least 1 lowercase letter"); - } - - if (password === password.toLowerCase()) { - errors.push("Password should contain at least 1 uppercase letter"); - } - - if (!/\d/.test(password)) { - errors.push("Password should contain at least 1 number"); + if ( + password.length < 8 || + !/\d/.test(password) || + password === password.toUpperCase() || + password === password.toLowerCase() + ) { + return false; } - - return errors.join("\n"); + return true; }; const validateForm = () => { @@ -426,10 +424,7 @@ export default function UserProfile() { Notification.Error({ msg: "Passwords are different in new password and confirmation password column.", }); - } else if ( - validateNewPassword(changePasswordForm.new_password_1).length || - changePasswordErrors.password_confirmation !== "" - ) { + } else if (!validateNewPassword(changePasswordForm.new_password_1)) { Notification.Error({ msg: "Entered New Password is not valid, please check!", }); @@ -807,48 +802,79 @@ export default function UserProfile() { error={changePasswordErrors.old_password} required /> - { - setChangePasswordForm({ - ...changePasswordForm, - new_password_1: e.value, - }); - }} - error={validateNewPassword( - changePasswordForm.new_password_1, +
+ { + setChangePasswordForm({ + ...changePasswordForm, + new_password_1: e.value, + }); + }} + // error={validateNewPassword( + // changePasswordForm.new_password_1, + // )} + required + onFocus={() => setNewPasswordInputInFocus(true)} + onBlur={() => setNewPasswordInputInFocus(false)} + /> + {newPasswordInputInFocus && ( +
+ {validateRule( + changePasswordForm.new_password_1?.length >= 8, + "Password should be atleast 8 characters long", + )} + {validateRule( + changePasswordForm.new_password_1 !== + changePasswordForm.new_password_1.toUpperCase(), + "Password should contain at least 1 lowercase letter", + )} + {validateRule( + changePasswordForm.new_password_1 !== + changePasswordForm.new_password_1.toLowerCase(), + "Password should contain at least 1 uppercase letter", + )} + {validateRule( + /\d/.test(changePasswordForm.new_password_1), + "Password should contain at least 1 number", + )} +
)} - required - /> - { - setChangePasswordForm({ - ...changePasswordForm, - new_password_2: e.value, - }); - e.value === "" || - e.value === changePasswordForm.new_password_1 - ? setChangePasswordErrors((prev) => ({ - ...prev, - password_confirmation: "", - })) - : setChangePasswordErrors((prev) => ({ - ...prev, - password_confirmation: - "Confirm password should match the new password!", - })); - }} - error={changePasswordErrors.password_confirmation} - /> +
+
+ { + setChangePasswordForm({ + ...changePasswordForm, + new_password_2: e.value, + }); + }} + onFocus={() => + setNewConfirmedPasswordInputInFocus(true) + } + onBlur={() => + setNewConfirmedPasswordInputInFocus(false) + } + /> + {newConfirmedPasswordInputInFocus && ( +
+ {validateRule( + changePasswordForm.new_password_1 === + changePasswordForm.new_password_2, + "Confirm password should match the new password", + )} +
+ )} +
From 9635f85e4104c224132b5b29cefc9eaa7eeb292a Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Tue, 30 Apr 2024 16:18:09 +0530 Subject: [PATCH 12/14] done --- src/Components/Users/UserProfile.tsx | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index 9c86dc567a3..f82ee9163b0 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -815,9 +815,6 @@ export default function UserProfile() { new_password_1: e.value, }); }} - // error={validateNewPassword( - // changePasswordForm.new_password_1, - // )} required onFocus={() => setNewPasswordInputInFocus(true)} onBlur={() => setNewPasswordInputInFocus(false)} @@ -865,15 +862,13 @@ export default function UserProfile() { setNewConfirmedPasswordInputInFocus(false) } /> - {newConfirmedPasswordInputInFocus && ( -
- {validateRule( - changePasswordForm.new_password_1 === - changePasswordForm.new_password_2, - "Confirm password should match the new password", - )} -
- )} + {newConfirmedPasswordInputInFocus && + changePasswordForm.new_password_2.length > 0 && + validateRule( + changePasswordForm.new_password_1 === + changePasswordForm.new_password_2, + "Confirm password should match the new password", + )}
From 2afada7e6e52a19ead89dfe4da74078daa2e876a Mon Sep 17 00:00:00 2001 From: Nikhil Kumar Date: Wed, 8 May 2024 13:47:17 +0530 Subject: [PATCH 13/14] onfocus onblur property controlled by css now, usestate removed for that --- src/Components/Users/UserProfile.tsx | 78 +++++++++++----------------- 1 file changed, 31 insertions(+), 47 deletions(-) diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index f82ee9163b0..a70e770a16e 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -140,14 +140,6 @@ export default function UserProfile() { }); const [showEdit, setShowEdit] = useState(false); - const [newPasswordInputInFocus, setNewPasswordInputInFocus] = - useState(false); - - const [ - newConfirmedPasswordInputInFocus, - setNewConfirmedPasswordInputInFocus, - ] = useState(false); - const { data: userData, loading: isUserLoading, @@ -808,7 +800,7 @@ export default function UserProfile() { label="New Password" type="password" value={changePasswordForm.new_password_1} - className="col-span-6 sm:col-span-3" + className="peer col-span-6 sm:col-span-3" onChange={(e) => { setChangePasswordForm({ ...changePasswordForm, @@ -816,37 +808,33 @@ export default function UserProfile() { }); }} required - onFocus={() => setNewPasswordInputInFocus(true)} - onBlur={() => setNewPasswordInputInFocus(false)} /> - {newPasswordInputInFocus && ( -
- {validateRule( - changePasswordForm.new_password_1?.length >= 8, - "Password should be atleast 8 characters long", - )} - {validateRule( - changePasswordForm.new_password_1 !== - changePasswordForm.new_password_1.toUpperCase(), - "Password should contain at least 1 lowercase letter", - )} - {validateRule( - changePasswordForm.new_password_1 !== - changePasswordForm.new_password_1.toLowerCase(), - "Password should contain at least 1 uppercase letter", - )} - {validateRule( - /\d/.test(changePasswordForm.new_password_1), - "Password should contain at least 1 number", - )} -
- )} +
+ {validateRule( + changePasswordForm.new_password_1?.length >= 8, + "Password should be atleast 8 characters long", + )} + {validateRule( + changePasswordForm.new_password_1 !== + changePasswordForm.new_password_1.toUpperCase(), + "Password should contain at least 1 lowercase letter", + )} + {validateRule( + changePasswordForm.new_password_1 !== + changePasswordForm.new_password_1.toLowerCase(), + "Password should contain at least 1 uppercase letter", + )} + {validateRule( + /\d/.test(changePasswordForm.new_password_1), + "Password should contain at least 1 number", + )} +
{ @@ -855,20 +843,16 @@ export default function UserProfile() { new_password_2: e.value, }); }} - onFocus={() => - setNewConfirmedPasswordInputInFocus(true) - } - onBlur={() => - setNewConfirmedPasswordInputInFocus(false) - } /> - {newConfirmedPasswordInputInFocus && - changePasswordForm.new_password_2.length > 0 && - validateRule( - changePasswordForm.new_password_1 === - changePasswordForm.new_password_2, - "Confirm password should match the new password", - )} + {changePasswordForm.new_password_2.length > 0 && ( +
+ {validateRule( + changePasswordForm.new_password_1 === + changePasswordForm.new_password_2, + "Confirm password should match the new password", + )} +
+ )}
From 72fd3c268815cc2f056355caf5585f85b1d0486d Mon Sep 17 00:00:00 2001 From: Khavin Shankar Date: Wed, 15 May 2024 04:27:46 +0530 Subject: [PATCH 14/14] minor type fix --- src/Components/Users/UserProfile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx index a70e770a16e..50dbc5890c2 100644 --- a/src/Components/Users/UserProfile.tsx +++ b/src/Components/Users/UserProfile.tsx @@ -139,7 +139,7 @@ export default function UserProfile() { password_confirmation: "", }); - const [showEdit, setShowEdit] = useState(false); + const [showEdit, setShowEdit] = useState(false); const { data: userData, loading: isUserLoading,