toast message added for reset passowrd functionality

ipi-survey-platform/src/pages/ChangePassword/ChangePassword.jsx

@@ -4,6 +4,52 @@ import apiClient from '@/services/api/apiClient';
 
 const logoSrc = '/assets/images/FCSCLogo.svg';
 
+const ToggleableInput = ({ label, type = "password", value, onChange, show, toggleShow, placeholder }) => (
+  <div>
+    <label className="block text-sm font-medium text-gray-700 mb-1">
+      {label}
+    </label>
+    <div className="relative">
+      <input
+        type={show ? "text" : type}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        className="block w-full h-10 rounded-md border-2 border-[#92722A] focus:border-[#92722A] focus:ring-0 px-4 pr-11 text-sm bg-white"
+        required
+      />
+      <button
+        type="button"
+        className="absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer"
+        onClick={toggleShow}
+        aria-label="Toggle visibility"
+      >
+        {show ? (
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#92722A]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M13.875 18.825A10.05 10.05 0 0 1 12 19c-5.523 0-10-4.477-10-10a9.96 9.96 0 0 1 2.122-6.21m3.086-1.955A9.953 9.953 0 0 1 12 3c5.523 0 10 4.477 10 10 0 1.591-.372 3.093-1.034 4.432M9.88 9.88a3 3 0 1 0 4.24 4.24"
+            />
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="m3 3 18 18"
+            />
+          </svg>
+        ) : (
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#92722A]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z" />
+            <circle cx="12" cy="12" r="3" strokeWidth="2" />
+          </svg>
+        )}
+      </button>
+    </div>
+  </div>
+);
+
 const ChangePassword = () => {
   const navigate = useNavigate();
   const location = useLocation();
@@ -53,7 +99,14 @@ const ChangePassword = () => {
 
       if (response?.data) {
         setSuccess("Password changed successfully. Redirecting to login...");
-        setTimeout(() => navigate("/login"), 1500);
+        setTimeout(() => {
+          navigate("/login", {
+            state: { 
+              showSuccessToast: true, 
+              successMessage: "Password reset successful. Please login with your new password." 
+            }
+          });
+        }, 1500);
       } else {
         setError("Something went wrong. Please try again.");
       }
@@ -68,52 +121,6 @@ const ChangePassword = () => {
     }
   };
 
-  const ToggleableInput = ({ label, type = "password", value, onChange, show, toggleShow, placeholder }) => (
-    <div>
-      <label className="block text-sm font-medium text-gray-700 mb-1">
-        {label}
-      </label>
-      <div className="relative">
-        <input
-          type={show ? "text" : type}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          className="block w-full h-10 rounded-md border-2 border-[#92722A] focus:border-[#92722A] focus:ring-0 px-4 pr-11 text-sm bg-white"
-          required
-        />
-        <button
-          type="button"
-          className="absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer"
-          onClick={toggleShow}
-          aria-label="Toggle visibility"
-        >
-          {show ? (
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#92722A]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M13.875 18.825A10.05 10.05 0 0 1 12 19c-5.523 0-10-4.477-10-10a9.96 9.96 0 0 1 2.122-6.21m3.086-1.955A9.953 9.953 0 0 1 12 3c5.523 0 10 4.477 10 10 0 1.591-.372 3.093-1.034 4.432M9.88 9.88a3 3 0 1 0 4.24 4.24"
-              />
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="m3 3 18 18"
-              />
-            </svg>
-          ) : (
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#92722A]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z" />
-              <circle cx="12" cy="12" r="3" strokeWidth="2" />
-            </svg>
-          )}
-        </button>
-      </div>
-    </div>
-  );
-
   return (
     <div className="min-h-screen bg-[#F7F7F7] flex items-center justify-center px-4">
       <div className="w-full max-w-md">
@@ -195,7 +202,7 @@ const ChangePassword = () => {
               onClick={() => navigate(-1)}
               className="w-full h-10 rounded-md border border-[#92722A] text-[#92722A] hover:bg-[#92722A]/10 text-sm"
             >
-              Cancel
+              Back
             </button>
           </form>
         </div>

ipi-survey-platform/src/pages/Login/Login.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { login } from '@/services/auth/authService.js';
 import { RefreshCw } from "lucide-react"; 
 const logoSrc = '/assets/images/FCSCLogo.svg';
 
 const Login = () => {
   const navigate = useNavigate();
+  const location = useLocation();
   const [email, setEmail] = React.useState('');
   const [password, setPassword] = React.useState('');
   const [showPassword, setShowPassword] = React.useState(false);
@@ -30,10 +31,6 @@ const Login = () => {
     setCaptcha(code);
   }, []);
 
-  React.useEffect(() => {
-    generateCaptcha();
-  }, [generateCaptcha]);
-
   const closeToast = React.useCallback(() => {
     if (toastTimeoutRef.current) {
       window.clearTimeout(toastTimeoutRef.current);
@@ -70,6 +67,18 @@ const Login = () => {
     [navigate]
   );
 
+  React.useEffect(() => {
+    generateCaptcha();
+  }, [generateCaptcha]);
+
+  React.useEffect(() => {
+    if (location.state?.showSuccessToast && location.state?.successMessage) {
+      showToast('success', location.state.successMessage);
+      
+      window.history.replaceState({}, document.title);
+    }
+  }, [location.state, showToast]);
+
   React.useEffect(
     () => () => {
       if (toastTimeoutRef.current) {

ipi-survey-platform/src/pages/PublicContactForm.jsx

@@ -11,9 +11,6 @@ const PublicContactForm = () => {
     establishmentName: "",
     establishmentId: "",
     email: "",
-    // contactName: "",
-    // contactPhone: "",
-    // notes: "",
   });
 
   const [errors, setErrors] = useState({});
@@ -28,6 +25,9 @@ const PublicContactForm = () => {
   const [otp, setOtp] = useState(""); 
   const [otpMsg, setOtpMsg] = useState(""); 
   const [otpError, setOtpError] = useState("");
+  const [toast, setToast] = useState(null);
+
+  const toastTimeoutRef = React.useRef(null);
 
   const generateCaptcha = () => {
     const chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
@@ -42,6 +42,35 @@ const PublicContactForm = () => {
     generateCaptcha();
   }, []);
 
+  useEffect(() => {
+    return () => {
+      if (toastTimeoutRef.current) {
+        window.clearTimeout(toastTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const showToast = (type, message) => {
+    if (!message) return;
+    if (toastTimeoutRef.current) {
+      window.clearTimeout(toastTimeoutRef.current);
+      toastTimeoutRef.current = null;
+    }
+    setToast({ type, message });
+    toastTimeoutRef.current = window.setTimeout(() => {
+      setToast(null);
+      toastTimeoutRef.current = null;
+    }, 4000);
+  };
+
+  const closeToast = () => {
+    if (toastTimeoutRef.current) {
+      window.clearTimeout(toastTimeoutRef.current);
+      toastTimeoutRef.current = null;
+    }
+    setToast(null);
+  };
+
   const validate = (data = formData) => {
     const newErrors = {};
 
@@ -49,33 +78,12 @@ const PublicContactForm = () => {
     if (!data.email.trim()) newErrors.email = "Registered Email is required.";
     else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email))
       newErrors.email = "Enter a valid email address.";
-    // if (!data.contactName.trim()) newErrors.contactName = "Contact Person Name is required.";
-    // if (!data.contactPhone.trim()) {
-    //   newErrors.contactPhone = "Contact Phone is required.";
-    // } else if (!/^\d{10,12}$/.test(data.contactPhone)) {
-    //   newErrors.contactPhone = "Enter a valid phone number (10–12 digits).";
-    // }
 
     setErrors(newErrors);
     setIsValid(Object.keys(newErrors).length === 0);
     return newErrors;
   };
 
-//   const handleNameChange = (e) => {
-//     const { value } = e.target;
-//     const filtered = value.replace(/[^A-Za-z\s]/g, "");
-//     setFormData((prev) => ({ ...prev, contactName: filtered }));
-//     validate({ ...formData, contactName: filtered });
-//   };
-
-//   const handlePhoneChange = (e) => {
-//     let { value } = e.target;
-//     value = value.replace(/\D/g, "");
-//     if (value.length > 12) value = value.slice(0, 12);
-//     setFormData((prev) => ({ ...prev, contactPhone: value }));
-//     validate({ ...formData, contactPhone: value });
-//   };
-
   const handleChange = (e) => {
     const { name, value } = e.target;
     const updated = { ...formData, [name]: value };
@@ -113,9 +121,12 @@ const PublicContactForm = () => {
       const response = await apiClient.post("/forgot-password/request-otp", payload);
   
       if (response?.data) {
+        showToast('success', 'OTP sent to your registered email successfully!');
+        setTimeout(() => {
           navigate("/change-password", {
             state: { email: formData.email.trim() },
           });
+        }, 1500);
       } else {
         setErrorMsg("Something went wrong. Please try again.");
       }      
@@ -166,7 +177,6 @@ const PublicContactForm = () => {
     }
   };
 
-
   const handleResendOtp = () => {
     setOtpMsg("A new OTP has been sent to your registered email.");
     setOtp("");
@@ -174,6 +184,29 @@ const PublicContactForm = () => {
 
   return (
     <div className="min-h-screen bg-[#F7F7F7] flex items-center justify-center px-4">
+      {toast && (
+        <div className="fixed top-6 inset-x-0 z-50 flex justify-center px-4">
+          <div
+            className={`text-sm rounded px-3 py-2 border flex items-start justify-between gap-3 shadow ${
+              toast.type === 'success'
+                ? 'bg-[#F3FAF4] border-[#C6E7D8] text-[#2F663C]'
+                : 'bg-[#FEF2F2] border-[#FECACA] text-[#B91C1C]'
+            }`}
+          >
+            <div className="flex items-start gap-2">
+              <span>{toast.message}</span>
+            </div>
+            <button
+              type="button"
+              className="flex h-6 w-6 items-center justify-center rounded hover:bg-black/5"
+              onClick={closeToast}
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+      )}
+
       <div className="w-full max-w-md">
         <div className="bg-white rounded-lg shadow-sm ring-1 ring-gray-200 overflow-hidden">
           <div className="px-7 py-8 border-b border-gray-200 bg-[#F2ECCF] text-center">
@@ -210,8 +243,9 @@ const PublicContactForm = () => {
                 error={errors.establishmentName}
               />
               <InputField
-                label="Establishment ID (if known)"
+                label="Establishment ID"
                 name="establishmentId"
+                required
                 value={formData.establishmentId}
                 onChange={handleChange}
               />
@@ -224,35 +258,6 @@ const PublicContactForm = () => {
                 onChange={handleChange}
                 error={errors.email}
               />
-              {/* <InputField
-                label="Contact Person Name"
-                name="contactName"
-                required
-                value={formData.contactName}
-                onChange={handleNameChange}
-                error={errors.contactName}
-              />
-              <InputField
-                label="Contact Phone"
-                name="contactPhone"
-                value={formData.contactPhone}
-                onChange={handlePhoneChange}
-                error={errors.contactPhone}
-                placeholder="Enter phone number"
-                maxLength={12}
-              />
-              <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">
-                  Additional Notes
-                </label>
-                <textarea
-                  name="notes"
-                  rows="3"
-                  value={formData.notes}
-                  onChange={handleChange}
-                  className="block w-full rounded-md border-2 border-[#92722A] focus:border-[#92722A] focus:ring-0 px-4 py-2 text-sm bg-white"
-                ></textarea>
-              </div> */}
 
               <div className="mt-4">
                 <label className="block text-sm font-medium text-gray-700 mb-1">