From 3e5f15904ed91aa588db9f2b8d8f659929c729cc Mon Sep 17 00:00:00 2001
From: ShaneKianCastillo <castillogohan609@gmail.com>
Date: Sun, 12 Oct 2025 13:42:33 +0800
Subject: [PATCH] added the changes in forgot password and new password

---
 src/components/Instructor/ForgotPassword.jsx |  32 ++--
 src/components/Instructor/newPassword.jsx    | 177 +++++++++++++------
 2 files changed, 138 insertions(+), 71 deletions(-)

diff --git a/src/components/Instructor/ForgotPassword.jsx b/src/components/Instructor/ForgotPassword.jsx
index 53ff047..d488510 100644
--- a/src/components/Instructor/ForgotPassword.jsx
+++ b/src/components/Instructor/ForgotPassword.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import Logo1 from "../../assets/img/Dct-Logo.png";
+import Logo1 from "../../assets/img/TaskSphereLogo.png";
 
 import Swal from "sweetalert2";
 import { showOTP, fetchAdminEmail } from "../../assets/scripts/forgotPassword";
@@ -25,7 +25,7 @@ const ForgotPassword = () => {
         icon: "warning",
         title: "Enter your email",
         text: "Please provide the email you registered with.",
-        confirmButtonColor: "#3B0304",
+        confirmButtonColor: "#611A11",
       });
       return;
     }
@@ -40,7 +40,7 @@ const ForgotPassword = () => {
           icon: "error",
           title: "Not an admin email",
           text: "Only admin accounts can reset a password here.",
-          confirmButtonColor: "#3B0304",
+          confirmButtonColor: "#611A11",
         });
         return;
       }
@@ -57,7 +57,7 @@ const ForgotPassword = () => {
         icon: "success",
         title: "OTP sent",
         html: `We've sent a 6-digit code to <b>${entered}</b>.`,
-        confirmButtonColor: "#3B0304",
+        confirmButtonColor: "#611A11",
         allowOutsideClick: false,
         allowEscapeKey: false,
       });
@@ -68,7 +68,6 @@ const ForgotPassword = () => {
         expectedOtp: otp,
         onConfirm: async (code, { expected }) => {
           if (String(code) === String(expected)) {
-            //alert("success");
             navigate("/NewPassword", { state: { email: entered } });
             return true; // ✅ close the Swal
           }
@@ -87,7 +86,7 @@ const ForgotPassword = () => {
         icon: "error",
         title: "Something went wrong",
         text: err?.message || "Please try again in a moment.",
-        confirmButtonColor: "#3B0304",
+        confirmButtonColor: "#611A11",
       });
     } finally {
       setSending(false);
@@ -95,18 +94,19 @@ const ForgotPassword = () => {
   };
 
   return (
-    <div className="min-h-screen flex flex-col justify-center items-center bg-[#f8f8f8] px-4">
-      <div className="bg-white border-4 border-[#3B0304] rounded-2xl shadow-md p-8 w-full max-w-md text-center">
+    <div className="min-h-screen flex flex-col justify-center items-center bg-[#f8f8f8] px-4 select-none">
+      <div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md text-center border border-neutral-200">
         <img
           src={Logo1}
           alt="DCT Logo"
-          className="w-24 h-24 mx-auto mb-4 object-contain"
+          className="w-24 h-24 mx-auto mb-4 object-contain pointer-events-none"
+          draggable="false"
         />
-        <h1 className="text-2xl font-bold text-[#3B0304] mb-2">
+        <h1 className="text-2xl font-bold text-[#611A11] mb-2">
           Forgot Password?
         </h1>
         <p className="text-gray-700 text-sm mb-6 leading-relaxed">
-          No worries! To reset your password, we’ll send a one-time password
+          No worries! To reset your password, we'll send a one-time password
           (OTP) to your registered email address. Please check your inbox and
           follow the instructions to continue.
         </p>
@@ -115,7 +115,7 @@ const ForgotPassword = () => {
           <div className="text-left">
             <label
               htmlFor="email"
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className="block text-sm font-medium text-gray-700 mb-1 select-none"
             >
               Email
             </label>
@@ -125,17 +125,17 @@ const ForgotPassword = () => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="admin1@gmail.com"
-              className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-[#3B0304] focus:outline-none"
+              className="w-full p-3 bg-white border border-gray-300 rounded-md focus:ring-2 focus:ring-[#611A11] focus:border-[#611A11] focus:outline-none"
             />
           </div>
 
           <button
             type="submit"
             disabled={sending}
-            className={`w-full py-2 text-white font-medium rounded-md transition-all ${
+            className={`w-full py-3 text-white font-medium rounded-md transition-all select-none ${
               sending
                 ? "bg-gray-400 cursor-not-allowed"
-                : "bg-[#3B0304] hover:bg-[#2a0203]"
+                : "bg-[#611A11] hover:bg-[#7a2218]"
             }`}
           >
             {sending ? "Sending OTP..." : "Reset Password"}
@@ -146,4 +146,4 @@ const ForgotPassword = () => {
   );
 };
 
-export default ForgotPassword;
+export default ForgotPassword;
\ No newline at end of file
diff --git a/src/components/Instructor/newPassword.jsx b/src/components/Instructor/newPassword.jsx
index 7d2c1ca..e6f9246 100644
--- a/src/components/Instructor/newPassword.jsx
+++ b/src/components/Instructor/newPassword.jsx
@@ -1,14 +1,13 @@
 import React, { useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import Swal from "sweetalert2";
-import Logo1 from "../../assets/img/Dct-Logo.png";
+import Logo1 from "../../assets/img/TaskSphereLogo.png";
 import { updateUserPassword } from "../../assets/scripts/forgotPassword";
 
 const NewPassword = () => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  // Email comes from the previous step via router state
   const verifiedEmail = useMemo(
     () => location.state?.email || "",
     [location.state]
@@ -19,6 +18,55 @@ const NewPassword = () => {
   const [newPw, setNewPw] = useState("");
   const [confirmPw, setConfirmPw] = useState("");
   const [saving, setSaving] = useState(false);
+  const [passwordError, setPasswordError] = useState("");
+
+  // Password validation function
+  const validatePassword = (pass) => {
+    const errors = [];
+    
+    if (/\s/.test(pass)) {
+      errors.push("Password cannot contain spaces");
+    }
+    
+    if (pass.length < 8) {
+      errors.push("Password must be at least 8 characters");
+    }
+    
+    if (!/[A-Z]/.test(pass)) {
+      errors.push("Password must contain at least one uppercase letter");
+    }
+    
+    if (!/[a-z]/.test(pass)) {
+      errors.push("Password must contain at least one lowercase letter");
+    }
+    
+    if (!/[0-9]/.test(pass)) {
+      errors.push("Password must contain at least one number");
+    }
+    
+    if (!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(pass)) {
+      errors.push("Password must contain at least one special character");
+    }
+    
+    return errors;
+  };
+
+  // Handle password change with validation
+  const handlePasswordChange = (e) => {
+    const newPassword = e.target.value;
+    setNewPw(newPassword);
+    
+    if (newPassword) {
+      const errors = validatePassword(newPassword);
+      if (errors.length > 0) {
+        setPasswordError(errors[0]);
+      } else {
+        setPasswordError("");
+      }
+    } else {
+      setPasswordError("");
+    }
+  };
 
   const handleConfirm = async () => {
     if (!verifiedEmail) {
@@ -26,35 +74,40 @@ const NewPassword = () => {
         icon: "error",
         title: "Missing email",
         text: "This page needs the verified email from the previous step.",
-        confirmButtonColor: "#3B0304",
+        confirmButtonColor: "#611A11",
       });
-      navigate("/forgot-password"); // send them back to start the flow correctly
+      navigate("/forgot-password");
       return;
     }
+    
     if (!newPw || !confirmPw) {
       Swal.fire({
         icon: "warning",
         title: "Enter both fields",
         text: "Please enter and confirm your new password.",
-        confirmButtonColor: "#3B0304",
+        confirmButtonColor: "#611A11",
       });
       return;
     }
-    if (newPw !== confirmPw) {
+
+    // Validate password format
+    const passwordErrors = validatePassword(newPw);
+    if (passwordErrors.length > 0) {
       Swal.fire({
         icon: "error",
-        title: "Passwords don’t match",
-        text: "Please make sure both passwords are identical.",
-        confirmButtonColor: "#3B0304",
+        title: "Invalid Password Format",
+        html: passwordErrors.map(err => `• ${err}`).join('<br>'),
+        confirmButtonColor: "#611A11",
       });
       return;
     }
-    if (newPw.length < 8) {
+    
+    if (newPw !== confirmPw) {
       Swal.fire({
-        icon: "warning",
-        title: "Weak password",
-        text: "Use at least 8 characters.",
-        confirmButtonColor: "#3B0304",
+        icon: "error",
+        title: "Passwords don't match",
+        text: "Please make sure both passwords are identical.",
+        confirmButtonColor: "#611A11",
       });
       return;
     }
@@ -66,7 +119,7 @@ const NewPassword = () => {
         icon: "success",
         title: "Password updated",
         text: "Your password has been changed successfully.",
-        confirmButtonColor: "#3B0304",
+        confirmButtonColor: "#611A11",
       });
       navigate("/login");
     } catch (e) {
@@ -75,7 +128,7 @@ const NewPassword = () => {
         icon: "error",
         title: "Update failed",
         text: e?.message || "Please try again.",
-        confirmButtonColor: "#3B0304",
+        confirmButtonColor: "#611A11",
       });
     } finally {
       setSaving(false);
@@ -83,57 +136,57 @@ const NewPassword = () => {
   };
 
   return (
-    <div className="min-h-screen flex flex-col justify-center items-center bg-[#f8f8f8] px-4">
-      <div className="bg-white border-4 border-[#3B0304] rounded-2xl shadow-md p-8 w-full max-w-md text-center">
+    <div className="min-h-screen flex flex-col justify-center items-center bg-[#f8f8f8] px-4 select-none">
+      <div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-md text-center border border-neutral-200">
         <img
           src={Logo1}
           alt="DCT Logo"
-          className="w-24 h-24 mx-auto mb-4 object-contain"
+          className="w-24 h-24 mx-auto mb-4 object-contain pointer-events-none"
+          draggable="false"
         />
-        <h1 className="text-2xl font-bold text-[#3B0304] mb-2">
+        <h1 className="text-2xl font-bold text-[#611A11] mb-2">
           TaskSphere IT
         </h1>
         <div className="border-t border-gray-300 my-4"></div>
-        <h2 className="text-xl font-semibold text-[#3B0304] mb-6">
+        <h2 className="text-xl font-semibold text-[#611A11] mb-6">
           Set your New Password
         </h2>
 
         <form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
           {/* New Password */}
           <div className="text-left">
-            <label className="block text-sm font-medium text-[#3B0304] mb-3">
+            <label className="block text-sm font-medium text-[#611A11] mb-2 select-none">
               New Password
             </label>
-            <div className="relative flex justify-center">
+            <div className="relative">
               <input
                 type={showNew ? "text" : "password"}
-                className="w-full h-12 px-4 pr-12 text-lg border-2 border-[#3B0304] rounded-md focus:ring-2 focus:ring-[#3B0304] focus:border-[#3B0304] focus:outline-none"
-                style={{
-                  boxShadow: "inset 0 1px 3px rgba(59, 3, 4, 0.1)",
-                  backgroundColor: "white",
-                }}
+                className={`w-full h-12 px-4 pr-12 text-base bg-white border ${
+                  passwordError ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : 'border-gray-300 focus:border-[#611A11] focus:ring-[#611A11]'
+                } rounded-md focus:ring-2 focus:outline-none`}
                 placeholder="Enter new password"
                 aria-label="New password"
                 value={newPw}
-                onChange={(e) => setNewPw(e.target.value)}
+                onChange={handlePasswordChange}
               />
               <button
                 type="button"
                 onClick={() => setShowNew((s) => !s)}
                 aria-label={showNew ? "Hide password" : "Show password"}
-                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-md bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-[#3B0304]"
+                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-md bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-[#611A11]"
               >
                 {showNew ? (
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="22"
-                    height="22"
+                    width="20"
+                    height="20"
                     viewBox="0 0 24 24"
                     fill="none"
-                    stroke="#3B0304"
+                    stroke="#611A11"
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
+                    className="pointer-events-none"
                   >
                     <path d="M3 3l18 18" />
                     <path d="M10.58 10.58a2 2 0 0 0 2.84 2.84" />
@@ -143,14 +196,15 @@ const NewPassword = () => {
                 ) : (
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="22"
-                    height="22"
+                    width="20"
+                    height="20"
                     viewBox="0 0 24 24"
                     fill="none"
-                    stroke="#3B0304"
+                    stroke="#611A11"
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
+                    className="pointer-events-none"
                   >
                     <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z" />
                     <circle cx="12" cy="12" r="3" />
@@ -158,21 +212,32 @@ const NewPassword = () => {
                 )}
               </button>
             </div>
+            {passwordError && (
+              <p className="mt-1 text-xs text-red-600 select-none">{passwordError}</p>
+            )}
+            {/* Password Requirements */}
+            <div className="mt-2 text-xs text-gray-600 space-y-0.5">
+              <p className="font-medium text-gray-700 select-none">Password must contain:</p>
+              <ul className="list-disc list-inside space-y-0.5 ml-1 select-none">
+                <li className={newPw.length >= 8 ? "text-green-600" : ""}>At least 8 characters</li>
+                <li className={/[A-Z]/.test(newPw) ? "text-green-600" : ""}>One uppercase letter</li>
+                <li className={/[a-z]/.test(newPw) ? "text-green-600" : ""}>One lowercase letter</li>
+                <li className={/[0-9]/.test(newPw) ? "text-green-600" : ""}>One number</li>
+                <li className={/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(newPw) ? "text-green-600" : ""}>One special character</li>
+                <li className={!/\s/.test(newPw) && newPw ? "text-green-600" : ""}>No spaces</li>
+              </ul>
+            </div>
           </div>
 
           {/* Confirm Password */}
           <div className="text-left">
-            <label className="block text-sm font-medium text-[#3B0304] mb-3">
+            <label className="block text-sm font-medium text-[#611A11] mb-2 select-none">
               Confirm Password
             </label>
-            <div className="relative flex justify-center">
+            <div className="relative">
               <input
                 type={showConfirm ? "text" : "password"}
-                className="w-full h-12 px-4 pr-12 text-lg border-2 border-[#3B0304] rounded-md focus:ring-2 focus:ring-[#3B0304] focus:border-[#3B0304] focus:outline-none"
-                style={{
-                  boxShadow: "inset 0 1px 3px rgba(59, 3, 4, 0.1)",
-                  backgroundColor: "white",
-                }}
+                className="w-full h-12 px-4 pr-12 text-base bg-white border border-gray-300 rounded-md focus:ring-2 focus:ring-[#611A11] focus:border-[#611A11] focus:outline-none"
                 placeholder="Confirm new password"
                 aria-label="Confirm new password"
                 value={confirmPw}
@@ -182,19 +247,20 @@ const NewPassword = () => {
                 type="button"
                 onClick={() => setShowConfirm((s) => !s)}
                 aria-label={showConfirm ? "Hide password" : "Show password"}
-                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-md bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-[#3B0304]"
+                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-md bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-[#611A11]"
               >
                 {showConfirm ? (
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="22"
-                    height="22"
+                    width="20"
+                    height="20"
                     viewBox="0 0 24 24"
                     fill="none"
-                    stroke="#3B0304"
+                    stroke="#611A11"
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
+                    className="pointer-events-none"
                   >
                     <path d="M3 3l18 18" />
                     <path d="M10.58 10.58a2 2 0 0 0 2.84 2.84" />
@@ -204,14 +270,15 @@ const NewPassword = () => {
                 ) : (
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="22"
-                    height="22"
+                    width="20"
+                    height="20"
                     viewBox="0 0 24 24"
                     fill="none"
-                    stroke="#3B0304"
+                    stroke="#611A11"
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
+                    className="pointer-events-none"
                   >
                     <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z" />
                     <circle cx="12" cy="12" r="3" />
@@ -224,12 +291,12 @@ const NewPassword = () => {
           {/* Submit Button */}
           <button
             type="button"
-            disabled={saving}
+            disabled={saving || passwordError}
             onClick={handleConfirm}
-            className={`w-full py-3 text-white font-medium rounded-md transition-all text-lg ${
-              saving
+            className={`w-full py-3 text-white font-medium rounded-md transition-all text-base select-none ${
+              saving || passwordError
                 ? "bg-gray-400 cursor-not-allowed"
-                : "bg-[#3B0304] hover:bg-[#2a0203]"
+                : "bg-[#611A11] hover:bg-[#7a2218]"
             }`}
           >
             {saving ? "Saving..." : "Confirm"}
@@ -240,4 +307,4 @@ const NewPassword = () => {
   );
 };
 
-export default NewPassword;
+export default NewPassword;
\ No newline at end of file