#fixes 549 Feature/social icons to bootom

backend/package.json

@@ -18,6 +18,7 @@
     "deploy": "npm ci --only=production && pm2 restart ecosystem.config.js"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "bcrypt": "^6.0.0",
     "connect-mongo": "^5.1.0",
     "cors": "^2.8.5",
@@ -33,15 +34,19 @@
     "passport-jwt": "^4.0.1"
   },
   "devDependencies": {
-    "nodemon": "^3.1.10",
+    "@jest/globals": "^29.7.0",
     "jest": "^29.7.0",
-    "supertest": "^6.3.4",
-    "@jest/globals": "^29.7.0"
+    "nodemon": "^3.1.10",
+    "supertest": "^6.3.4"
   },
   "jest": {
     "testEnvironment": "node",
-    "setupFilesAfterEnv": ["<rootDir>/__tests__/setup.js"],
-    "testMatch": ["**/__tests__/**/*.test.js"],
+    "setupFilesAfterEnv": [
+      "<rootDir>/__tests__/setup.js"
+    ],
+    "testMatch": [
+      "**/__tests__/**/*.test.js"
+    ],
     "collectCoverageFrom": [
       "routes/**/*.js",
       "models/**/*.js",

package.json

@@ -13,6 +13,7 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.26.3",
     "@dotlottie/react-player": "^1.6.19",
+    "@emailjs/browser": "^4.4.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@eslint/config-array": "^0.19.1",
@@ -54,7 +55,7 @@
     "react": "^18.3.1",
     "react-animated-cursor": "^2.11.2",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.4.0",
+    "react-icons": "^5.5.0",
     "react-locomotive-scroll": "^0.2.2",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.2",

src/Pages/PasswordChecklist.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { FaCheckCircle, FaTimesCircle } from "react-icons/fa"; // install react-icons if not already
+
+// Validation rules
+const passwordRules = {
+  length: (pw) => pw.length >= 6,
+  uppercase: (pw) => /[A-Z]/.test(pw),
+  lowercase: (pw) => /[a-z]/.test(pw),
+  number: (pw) => /\d/.test(pw),
+  specialChar: (pw) => /[@$!%*?&]/.test(pw),
+};
+
+const PasswordChecklist = ({ password }) => {
+  const rules = [
+    { label: "At least 6 characters", valid: passwordRules.length(password) },
+    { label: "At least one uppercase letter", valid: passwordRules.uppercase(password) },
+    { label: "At least one lowercase letter", valid: passwordRules.lowercase(password) },
+    { label: "At least one number", valid: passwordRules.number(password) },
+    { label: "At least one special character (@$!%*?&)", valid: passwordRules.specialChar(password) },
+  ];
+
+  return (
+    <div style={{
+      background: "#f9f9f9",
+      padding: "10px",
+      borderRadius: "8px",
+      marginTop: "10px",
+      boxShadow: "0px 2px 6px rgba(0,0,0,0.1)"
+    }}>
+      <ul style={{ listStyle: "none", margin: 0, padding: 0, fontSize: "0.9rem" }}>
+        {rules.map((rule, i) => (
+          <li key={i} style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "4px" }}>
+            {rule.valid ? (
+              <FaCheckCircle color="green" />
+            ) : (
+              <FaTimesCircle color="red" />
+            )}
+            <span style={{ color: rule.valid ? "green" : "red" }}>{rule.label}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default PasswordChecklist;