diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
index 838804ce..0e81b26a 100644
--- a/frontend/src/pages/Profile.jsx
+++ b/frontend/src/pages/Profile.jsx
@@ -51,6 +51,40 @@ function ChangePasswordCard({ onUpdatePassword, onClearError, apiError }) {
const [confirmTouched, setConfirmTouched] = useState(false);
const [submitAttempted, setSubmitAttempted] = useState(false);
+ const getPasswordStrength = (password) => {
+ let score = 0;
+
+ if (password.length >= 8) score++;
+ if (/[A-Z]/.test(password)) score++;
+ if (/[a-z]/.test(password)) score++;
+ if (/\d/.test(password)) score++;
+ if (/[^A-Za-z0-9]/.test(password)) score++;
+
+ if (score <= 2) {
+ return {
+ text: "Weak",
+ width: "w-1/3",
+ color: "bg-red-500",
+ textColor: "text-red-500",
+ };
+ }
+
+ if (score <= 4) {
+ return {
+ text: "Medium",
+ width: "w-2/3",
+ color: "bg-yellow-500",
+ textColor: "text-yellow-500",
+ };
+ }
+
+ return {
+ text: "Strong",
+ width: "w-full",
+ color: "bg-green-500",
+ textColor: "text-green-500",
+ };
+ };
const timerCurrent = useRef(null);
const timerNew = useRef(null);
@@ -74,6 +108,7 @@ function ChangePasswordCard({ onUpdatePassword, onClearError, apiError }) {
const passwordsMatch = newPassword === confirmPassword;
const showMatchError = (confirmTouched || submitAttempted) && !passwordsMatch;
+ const passwordStrength = getPasswordStrength(newPassword);
function handleSubmit() {
setSubmitAttempted(true);
@@ -113,6 +148,7 @@ function ChangePasswordCard({ onUpdatePassword, onClearError, apiError }) {
{apiError}
)} @@ -129,6 +165,31 @@ function ChangePasswordCard({ onUpdatePassword, onClearError, apiError }) { />+ Use at least 8 characters with uppercase, lowercase, numbers, and special characters. +
+Manage your account details and security