Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FIXED] Improved the change password handling in profile edit page #7639

Merged
merged 23 commits into from
May 14, 2024
Merged

[FIXED] Improved the change password handling in profile edit page #7639

Changes from 19 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
f01f807
Improved the change password handling in profile edit page successfully
r-nikhilkumar Apr 16, 2024
6dd23bc
lint checks
r-nikhilkumar Apr 16, 2024
9dbbb91
lint checks
r-nikhilkumar Apr 16, 2024
e94ee50
done
r-nikhilkumar Apr 16, 2024
c5c7836
Merge branch 'coronasafe:develop' into Fixes#7605_Improve_change_pass…
r-nikhilkumar Apr 16, 2024
71a5f85
lint error solved
r-nikhilkumar Apr 16, 2024
fd5b5a0
change request done
r-nikhilkumar Apr 22, 2024
224ee4b
Merge branch 'coronasafe:develop' into Fixes#7605_Improve_change_pass…
r-nikhilkumar Apr 22, 2024
c8e8a1b
change req done
r-nikhilkumar Apr 24, 2024
caf3126
Merge branch 'Fixes#7605_Improve_change_password_handling' of https:/…
r-nikhilkumar Apr 24, 2024
018b56c
Update src/Components/Users/UserProfile.tsx
r-nikhilkumar Apr 24, 2024
05e9ec8
Merge branch 'develop' into Fixes#7605_Improve_change_password_handling
r-nikhilkumar Apr 24, 2024
6cac1fd
Merge branch 'develop' into Fixes#7605_Improve_change_password_handling
r-nikhilkumar Apr 26, 2024
e81920c
cypress test updated
r-nikhilkumar Apr 26, 2024
acd203d
removed precondition check to resolve spacing issue occured
r-nikhilkumar Apr 27, 2024
ddfd72b
change request | test failed done
r-nikhilkumar Apr 30, 2024
9635f85
done
r-nikhilkumar Apr 30, 2024
ae62231
Merge branch 'develop' into Fixes#7605_Improve_change_password_handling
r-nikhilkumar Apr 30, 2024
c540d1d
Merge branch 'coronasafe:develop' into Fixes#7605_Improve_change_pass…
r-nikhilkumar May 8, 2024
2afada7
onfocus onblur property controlled by css now, usestate removed for that
r-nikhilkumar May 8, 2024
0794468
Merge branch 'develop' into Fixes#7605_Improve_change_password_handling
r-nikhilkumar May 8, 2024
3c21073
Merge branch 'develop' into Fixes#7605_Improve_change_password_handling
r-nikhilkumar May 8, 2024
72fd3c2
minor type fix
khavinshankar May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 104 additions & 37 deletions src/Components/Users/UserProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -139,6 +140,13 @@ export default function UserProfile() {
});

const [showEdit, setShowEdit] = useState<boolean | false>(false);
khavinshankar marked this conversation as resolved.
Show resolved Hide resolved
const [newPasswordInputInFocus, setNewPasswordInputInFocus] =
useState<boolean>(false);

const [
newConfirmedPasswordInputInFocus,
setNewConfirmedPasswordInputInFocus,
] = useState<boolean>(false);

const {
data: userData,
Expand Down Expand Up @@ -180,6 +188,18 @@ export default function UserProfile() {
},
);

const validateNewPassword = (password: string) => {
if (
password.length < 8 ||
!/\d/.test(password) ||
password === password.toUpperCase() ||
password === password.toLowerCase()
) {
return false;
}
return true;
};

const validateForm = () => {
const errors = { ...initError };
let invalidForm = false;
Expand Down Expand Up @@ -399,25 +419,33 @@ 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 the new and the confirmation column.",
msg: "Passwords are different in new password and confirmation password column.",
});
} else if (!validateNewPassword(changePasswordForm.new_password_1)) {
Notification.Error({
msg: "Entered New 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.",
});
} else {
const form: UpdatePasswordForm = {
old_password: changePasswordForm.old_password,
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 {
if (res?.ok) {
Notification.Success({ msg: data?.message });
} else if (!error) {
Notification.Error({
msg: "There was some error. Please try again in some time.",
});
Expand Down Expand Up @@ -774,35 +802,74 @@ export default function UserProfile() {
error={changePasswordErrors.old_password}
required
/>
<TextFormField
name="new_password_1"
label="New Password"
type="password"
value={changePasswordForm.new_password_1}
className="col-span-6 sm:col-span-3"
onChange={(e) =>
setChangePasswordForm({
...changePasswordForm,
new_password_1: e.value,
})
}
error=""
required
/>
<TextFormField
name="new_password_2"
label="New Password Confirmation"
className="col-span-6 sm:col-span-3"
type="password"
value={changePasswordForm.new_password_2}
onChange={(e) =>
setChangePasswordForm({
...changePasswordForm,
new_password_2: e.value,
})
}
error={changePasswordErrors.password_confirmation}
/>
<div className="col-span-6 sm:col-span-3">
<TextFormField
name="new_password_1"
label="New Password"
type="password"
value={changePasswordForm.new_password_1}
className="col-span-6 sm:col-span-3"
onChange={(e) => {
setChangePasswordForm({
...changePasswordForm,
new_password_1: e.value,
});
}}
required
onFocus={() => setNewPasswordInputInFocus(true)}
onBlur={() => setNewPasswordInputInFocus(false)}
/>
{newPasswordInputInFocus && (
r-nikhilkumar marked this conversation as resolved.
Show resolved Hide resolved
<div className="text-small mb-2 pl-2 text-gray-500">
{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",
)}
</div>
)}
</div>
<div className="col-span-6 sm:col-span-3">
<TextFormField
name="new_password_2"
label="New Password Confirmation"
className="col-span-6 sm:col-span-3"
type="password"
value={changePasswordForm.new_password_2}
onChange={(e) => {
setChangePasswordForm({
...changePasswordForm,
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",
)}
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 text-right sm:px-6">
Expand Down
Loading