change password

src/App.js

@@ -16,6 +16,7 @@ import ReadyQuestionPaperDashboard from './ReadyQuestionPaperDashboard/ReadyQues
 import EditReadyQuestion from './edit_ready_question/EditReadyQuestion';
 import Error404 from './error/error404';
 import EditQuestion from './edit_question/EditQuestion';
+import ChangePassword from './ChangePassword/ChangePassword';
 
 
 
@@ -76,11 +77,10 @@ const App = () => {
           <Route path="/questionPaperDashboard/:paperId" element={<QuestionPaperDashboard />}/>
           <Route path="/ready_papers" element={<ReadyPaperDashboard />}/>
           <Route path="/ready_questions/:paperId" element={<ReadyQuestionPaperDashboard />} />
+          <Route path="/change-password" element={<ChangePassword />}/>
         </>
       )}
 
-
-
       {/* Error404 Route */}
       <Route path="/*" element={<Error404/>}/> 
     </Routes>

src/ChangePassword/ChangePassword.css

@@ -0,0 +1,95 @@
+.change-container-main{
+    background-color: #1a1a1a;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+}
+.change-container
+{
+    width: 100%;
+    max-width: 400px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    border: 1px solid #ccc;
+    box-shadow: 0px 0px 10px white;
+    border-radius: 8px;
+    background-color: #282828; 
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+}
+.change-container img
+{
+    width: 100px;
+    height: 100px;
+    margin-bottom: 20px;
+}
+.change-container h2
+{
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    text-align: center;
+    color: #fffcfc;
+}
+.change-container form
+{   
+    width: 75%;
+    display: flex;
+    flex-direction: column;
+}
+.change-container label
+{
+
+    color: #fffcfc;
+}
+
+.change-container input
+{
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-top: 10px;
+    font-size: 16px;
+    width: 93%;
+    background-color: #4d4d4d;
+    color: white;
+}
+.change-container button
+{
+    padding: 10px;
+    border: none;
+    border-radius: 4px;
+    background-color: #4CAF50;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+}
+.input-password
+{
+    position: relative;
+}
+.eye-icon,.eye-icon-slash
+{   color: #ccc;
+    position: absolute;
+    right: 10px;
+    top: 22px;
+}
+.eye-icon:hover,.eye-icon-slash:hover
+{
+    cursor: pointer;
+}
+@media (max-width:720px)
+{
+    .change-container
+    {
+        width: 270px;
+    }
+}

src/ChangePassword/ChangePassword.jsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from "react";
+import "./ChangePassword.css";
+import Logo from "../Assets/iips_logo2.png";
+import { FaEye, FaEyeSlash } from "react-icons/fa";
+import AlertModal from "../AlertModal/AlertModal";
+import Loader from "../Loader/Loader";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+const ChangePassword = () => {
+  const [display1, setDisplay1] = useState(false);
+  const [display2, setDisplay2] = useState(false);
+  const [message, setMessage] = useState("");
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(true);
+  const navigate=useNavigate();
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  }, []);
+
+    const handleSubmit= async(e)=>
+    {
+        e.preventDefault();
+        if(password !== confirmPassword)
+        {
+            setModalIsOpen(true);
+            setMessage("Passwords do not match!!!");
+            setIsError(true);
+            return;
+        }
+        try
+        {
+            const teacherID=localStorage.getItem("teacherId");
+            const response=await axios.post("http://localhost:5000/teacher/change-password",{
+                newPassword: password,
+                teacherId: teacherID,
+            });
+            setMessage(response.data.message);
+            setIsError(false);
+            setModalIsOpen(true);
+            setTimeout(() => {
+                setModalIsOpen(false);
+                navigate("/teacherDashboard");
+            }, 2000);
+        }
+        catch(error)
+        {
+            setMessage(
+                error.response?.data?.error || "Something went wrong. Please try again."
+            );
+            setIsError(true);
+            setModalIsOpen(true);
+        }
+    }
+
+  return (
+    <>
+      <div className="change-container-main">
+        {loading ? (
+          <Loader />
+        ) : (
+          <>
+            <div className="change-container">
+              <img src={Logo} alt="Logo" />
+              <h2>Teacher: Change Password</h2>
+              <form onSubmit={handleSubmit}>
+                <label>Password:</label>
+                <div className="input-password">
+                  <input
+                    type={display1 ? "text" : "password"}
+                    placeholder="Enter your New Password:"
+                    onChange={(e) => {
+                      setPassword(e.target.value);
+                    }}
+                    value={password}
+                    required
+                  />
+                  {display1 ? (
+                    <FaEye
+                      className="eye-icon"
+                      onClick={() => {
+                        setDisplay1(false);
+                      }}
+                    />
+                  ) : (
+                    <FaEyeSlash
+                      className="eye-icon"
+                      onClick={() => {
+                        setDisplay1(true);
+                      }}
+                    />
+                  )}
+                </div>
+                <label>Confirm Password:</label>
+                <div className="input-password">
+                  <input
+                    type={display2 ? "text" : "password"}
+                    placeholder="Confirm your New Password:"
+                    onChange={(e) => {
+                      setConfirmPassword(e.target.value);
+                    }}
+                    value={confirmPassword}
+                    required
+                  />
+                  {display2 ? (
+                    <FaEye
+                      className="eye-icon"
+                      onClick={() => {
+                        setDisplay2(false);
+                      }}
+                    />
+                  ) : (
+                    <FaEyeSlash
+                      className="eye-icon"
+                      onClick={() => {
+                        setDisplay2(true);
+                      }}
+                    />
+                  )}
+                </div>
+                <button type="submit">Change Password</button>
+              </form>
+              <AlertModal
+                isOpen={modalIsOpen}
+                onClose={() => setModalIsOpen(false)}
+                message={message}
+                iserror={isError}
+              />
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ChangePassword;