Add Dark Mode, Password Hashing for better security , Settings Page, Policy PDF in Policy section,UI Changes

2026-01-10 19:39:40 +05:30
parent 933c0741ab
commit 9b605279e6
35 changed files with 1344 additions and 659 deletions
--- a/frontend/src/pages/Settings/Settings.jsx
+++ b/frontend/src/pages/Settings/Settings.jsx
@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import { toast } from "react-toastify";
+import axios from "axios";
+
+// Settings Change Password Component
+const Settings = () => {
+  const [passwords, setPasswords] = useState({
+    oldPassword: "",
+    newPassword: "",
+    confirmPassword: "",
+  });
+
+  // Handle input changes
+  const handleChange = (e) => {
+    setPasswords({ ...passwords, [e.target.name]: e.target.value });
+  };
+
+  // Submit the form to the backend
+  const handleSubmit = async (e) => {
+    // Step 1: Prevent the page from reloading
+    e.preventDefault();
+
+    // Step 2: Check if the new password and confirm password are the same
+    if (passwords.newPassword !== passwords.confirmPassword) {
+      toast.error("New passwords do not match!");
+      return;
+    }
+
+    try {
+      // Step 3: Send the old and new password to the server
+      const res = await axios.post(
+        `${import.meta.env.VITE_APP_API_URL}/general/changePassword`,
+        {
+          oldPassword: passwords.oldPassword,
+          newPassword: passwords.newPassword,
+        },
+        { withCredentials: true }
+      );
+
+      // Step 4: If everything is good, show success message
+      if (res.status === 200) {
+        toast.success("Password updated successfully!");
+        // Clear the form inputs
+        setPasswords({ oldPassword: "", newPassword: "", confirmPassword: "" });
+      }
+    } catch (error) {
+      // Step 5: If there is an error (like wrong old password), show it
+      console.log(error);
+      toast.error(error.response?.data?.message || "Failed to update password");
+    }
+  };
+
+  return (
+    <div className="p-8 bg-gray-50 dark:bg-google-dark min-h-screen transition-colors duration-200">
+      <h1 className="text-3xl font-bold text-gray-800 dark:text-google-text mb-6 border-b-2 border-red-700 pb-2 inline-block">
+        Account Settings
+      </h1>
+
+      <div className="bg-white dark:bg-google-gray p-8 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 max-w-lg mt-4 mx-auto transition-colors duration-200">
+        <h2 className="text-2xl font-semibold mb-6 text-red-700 dark:text-red-500 flex items-center">
+          Change Password
+        </h2>
+
+        <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+          <div>
+            <label className="block text-gray-700 dark:text-google-text mb-2 font-medium">
+              Current Password
+            </label>
+            <input
+              type="password"
+              name="oldPassword"
+              value={passwords.oldPassword}
+              onChange={handleChange}
+              placeholder="Enter your current password"
+              className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all dark:bg-[#3c4043] dark:text-white"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-gray-700 dark:text-google-text mb-2 font-medium">
+              New Password
+            </label>
+            <input
+              type="password"
+              name="newPassword"
+              value={passwords.newPassword}
+              onChange={handleChange}
+              placeholder="Enter new password"
+              className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all dark:bg-[#3c4043] dark:text-white"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-gray-700 dark:text-google-text mb-2 font-medium">
+              Confirm New Password
+            </label>
+            <input
+              type="password"
+              name="confirmPassword"
+              value={passwords.confirmPassword}
+              onChange={handleChange}
+              placeholder="Confirm new password"
+              className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent transition-all dark:bg-[#3c4043] dark:text-white"
+              required
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="mt-2 bg-red-700 text-white font-bold py-3 px-6 rounded-lg hover:bg-red-800 transition-colors shadow-md hover:shadow-lg transform active:scale-95 duration-200"
+          >
+            Update Password
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Settings;