From 100473a4dbf613fb9b8fe96378d3d0aee1fc62dc Mon Sep 17 00:00:00 2001
From: Apoorva <rajputapoorva1103@gmail.com>
Date: Sat, 18 May 2024 23:16:47 +0530
Subject: [PATCH] Settings page improvment

---
 client/src/components/Settings/Setting.jsx | 219 +++++++++++++--------
 server/package-lock.json                   |  16 +-
 2 files changed, 152 insertions(+), 83 deletions(-)

diff --git a/client/src/components/Settings/Setting.jsx b/client/src/components/Settings/Setting.jsx
index d26b630..0f47a01 100644
--- a/client/src/components/Settings/Setting.jsx
+++ b/client/src/components/Settings/Setting.jsx
@@ -1,20 +1,21 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
+import Navbar from "../Navbar/Navbar";
 
 const Settings = () => {
   const [settings, setSettings] = useState({
-    theme: 'light',
-    email: '',
-    password: '',
-    language: 'English',
+    theme: "light",
+    email: "",
+    password: "",
+    language: "English",
     notifications: true,
-    privacy: 'Public',
-    accessibility: 'Default',
-    security: 'Standard',
+    privacy: "Public",
+    accessibility: "Default",
+    security: "Standard",
   });
 
   const handleInputChange = (event) => {
     const { name, value } = event.target;
-    setSettings(prevSettings => ({
+    setSettings((prevSettings) => ({
       ...prevSettings,
       [name]: value,
     }));
@@ -22,7 +23,7 @@ const Settings = () => {
 
   const handleToggleChange = (event) => {
     const { name, checked } = event.target;
-    setSettings(prevSettings => ({
+    setSettings((prevSettings) => ({
       ...prevSettings,
       [name]: checked,
     }));
@@ -31,35 +32,37 @@ const Settings = () => {
   // Add more handler functions as needed
 
   const containerStyle = {
-    maxWidth: '600px',
-    margin: '0 auto',
-    padding: '20px',
-    paddingBottom: '60px', // Adjust this value so the content doesn't overlap with the footer
-    border: '1px solid #ccc',
-    borderRadius: '8px',
-    backgroundColor: settings.theme === 'light' ? '#f9f9f9' : '#333',
-    color: settings.theme === 'light' ? '#333' : '#f9f9f9',
-    marginBottom: '100px', // This should be at least as tall as your footer to prevent overlap
+    maxWidth: "600px",
+    margin: "0 auto",
+    padding: "20px",
+    paddingBottom: "60px", // Adjust this value so the content doesn't overlap with the footer
+    border: "1px solid #ccc",
+    borderRadius: "8px",
+    backgroundColor: settings.theme === "light" ? "#f9f9f9" : "#333",
+    color: settings.theme === "#333",
+    marginBottom: "100px", // This should be at least as tall as your footer to prevent overlap
   };
 
   const titleStyle = {
-    textAlign: 'center',
+    textAlign: "center",
+    color: settings.theme === "light" ? "#333" : "#f9f9f9",
   };
 
   const itemStyle = {
-    marginBottom: '20px',
+    marginBottom: "20px",
   };
 
   const labelStyle = {
-    display: 'block',
-    marginBottom: '5px',
+    display: "block",
+    marginBottom: "5px",
+    color: settings.theme === "light" ? "#333" : "#f9f9f9",
   };
 
   const inputStyle = {
-    width: '100%',
-    padding: '10px',
-    border: '1px solid #ddd',
-    borderRadius: '4px',
+    width: "100%",
+    padding: "10px",
+    border: "1px solid #ddd",
+    borderRadius: "4px",
   };
 
   const selectStyle = {
@@ -67,70 +70,122 @@ const Settings = () => {
   };
 
   const checkboxStyle = {
-    marginRight: '10px',
+    marginRight: "10px",
   };
 
   // Add more styles as needed
 
-
   return (
-    <div className={`settings-container ${settings.theme}-theme`} style={containerStyle}>
-      <h1 style={titleStyle}>Settings</h1>
-      <form>
-        {/* Theme Selector */}
-        <div className="setting-item" style={itemStyle}>
-          <label htmlFor="theme" style={labelStyle}>Theme:</label>
-          <select name="theme" id="theme" value={settings.theme} onChange={handleInputChange} style={selectStyle}>
-            <option value="light">Light</option>
-            <option value="dark">Dark</option>
-          </select>
-        </div>
-
-        {/* Email Address */}
-        <div className="setting-item" style={itemStyle}>
-          <label htmlFor="email" style={labelStyle}>Email Address:</label>
-          <input type="email" name="email" id="email" value={settings.email} onChange={handleInputChange} />
-        </div>
-
-        {/* Password */}
-        <div className="setting-item" style={itemStyle}>
-          <label htmlFor="password" style={labelStyle}>Password:</label>
-          <input type="password" name="password" id="password" value={settings.password} onChange={handleInputChange} />
-        </div>
-
-        {/* Language */}
-        <div className="setting-item" style={itemStyle}>
-          <label htmlFor="language" style={labelStyle}>Language:</label>
-          <select name="language" id="language" value={settings.language} onChange={handleInputChange}>
-            <option value="English">English</option>
-            <option value="Hindi">Hindi</option>
-            {/* Add more languages */}
-          </select>
-        </div>
-
-        {/* Notifications */}
-        <div className="setting-item">
-          <label htmlFor="notifications">Notifications:</label>
-          <input type="checkbox" name="notifications" id="notifications" checked={settings.notifications} onChange={handleToggleChange} />
-        </div>
-
-        {/* Privacy */}
-        <div className="setting-item">
-          <label htmlFor="privacy">Profile Privacy:</label>
-          <select name="privacy" id="privacy" value={settings.privacy} onChange={handleInputChange}>
-            <option value="Public">Public</option>
-            <option value="Private">Private</option>
-          </select>
-        </div>
-
-        {/* Accessibility */}
-        {/* <div className="setting-item">
+    <div>
+      <Navbar />
+      <div
+        className={`settings-container ${settings.theme}-theme`}
+        style={containerStyle}
+      >
+        <h1 style={titleStyle}>Settings</h1>
+        <form>
+          {/* Theme Selector */}
+          <div className="setting-item" style={itemStyle}>
+            <label htmlFor="theme" style={labelStyle}>
+              Theme:
+            </label>
+            <select
+              name="theme"
+              id="theme"
+              value={settings.theme}
+              onChange={handleInputChange}
+              style={selectStyle}
+            >
+              <option value="light">Light</option>
+              <option value="dark">Dark</option>
+            </select>
+          </div>
+
+          {/* Email Address */}
+          <div className="setting-item" style={itemStyle}>
+            <label htmlFor="email" style={labelStyle}>
+              Email Address:
+            </label>
+            <input
+              type="email"
+              name="email"
+              id="email"
+              value={settings.email}
+              onChange={handleInputChange}
+            />
+          </div>
+
+          {/* Password */}
+          <div className="setting-item" style={itemStyle}>
+            <label htmlFor="password" style={labelStyle}>
+              Password:
+            </label>
+            <input
+              type="password"
+              name="password"
+              id="password"
+              value={settings.password}
+              onChange={handleInputChange}
+            />
+          </div>
+
+          {/* Language */}
+          <div className="setting-item" style={itemStyle}>
+            <label htmlFor="language" style={labelStyle}>
+              Language:
+            </label>
+            <select
+              name="language"
+              id="language"
+              value={settings.language}
+              onChange={handleInputChange}
+            >
+              <option value="English">English</option>
+              <option value="Hindi">Hindi</option>
+              {/* Add more languages */}
+            </select>
+          </div>
+
+          {/* Notifications */}
+          <div className="setting-item">
+            <label htmlFor="notifications" style={labelStyle}>
+              Notifications:
+            </label>
+            <input
+              type="checkbox"
+              name="notifications"
+              id="notifications"
+              checked={settings.notifications}
+              onChange={handleToggleChange}
+            />
+          </div>
+
+          {/* Privacy */}
+          <div className="setting-item">
+            <label htmlFor="privacy" style={labelStyle}>
+              Profile Privacy:
+            </label>
+            <select
+              name="privacy"
+              id="privacy"
+              value={settings.privacy}
+              onChange={handleInputChange}
+            >
+              <option value="Public">Public</option>
+              <option value="Private">Private</option>
+            </select>
+          </div>
+
+          {/* Accessibility */}
+          {/* <div className="setting-item">
           <label htmlFor="accessibility">Accessibility:</label>
           <select name="accessibility" id="accessibility" value={settings.accessibility} onChange={handleInputChange}>
           </select>
         </div> */}
         </form>
-        </div>
-)}
+      </div>
+    </div>
+  );
+};
 
 export default Settings;
diff --git a/server/package-lock.json b/server/package-lock.json
index 7b366f6..8615823 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -25,6 +25,7 @@
         "method-override": "^3.0.0",
         "mongoose": "^8.0.3",
         "multer": "^1.4.5-lts.1",
+        "nodemailer": "^6.9.13",
         "passport": "^0.7.0",
         "passport-local-mongoose": "^8.0.0",
         "sharp": "^0.33.1",
@@ -3491,6 +3492,14 @@
         "node": ">= 6.13.0"
       }
     },
+    "node_modules/nodemailer": {
+      "version": "6.9.13",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.13.tgz",
+      "integrity": "sha512-7o38Yogx6krdoBf3jCAqnIN4oSQFx+fMa0I7dK1D+me9kBxx12D+/33wSb+fhOCtIxvYJ+4x4IMEhmhCKfAiOA==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/nodemon": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.0.tgz",
@@ -7191,6 +7200,11 @@
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
       "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA=="
     },
+    "nodemailer": {
+      "version": "6.9.13",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.9.13.tgz",
+      "integrity": "sha512-7o38Yogx6krdoBf3jCAqnIN4oSQFx+fMa0I7dK1D+me9kBxx12D+/33wSb+fhOCtIxvYJ+4x4IMEhmhCKfAiOA=="
+    },
     "nodemon": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.0.tgz",
@@ -8054,4 +8068,4 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
     }
   }
-}
\ No newline at end of file
+}