toast message added for reset passowrd functionality

2025-10-31 12:27:30 +05:30 · 2025-10-31 12:27:30 +05:30 · a47ce73b60
commit a47ce73b60
parent 1acadd835a
3 changed files with 189 additions and 168 deletions
--- a/ipi-survey-platform/src/pages/ChangePassword/ChangePassword.jsx
+++ b/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>
--- a/ipi-survey-platform/src/pages/Login/Login.jsx
+++ b/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) {
@ -224,46 +233,46 @@ const Login = () => {
            </div>

            <div>
-  <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
-  <div className="relative">
-    <input
-      type={showPassword ? 'text' : 'password'}
-      value={password}
-      onChange={(e) => setPassword(e.target.value)}
-      placeholder="Enter password"
-      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={() => setShowPassword((v) => !v)}
-      aria-label="Toggle password visibility"
-    >
-      {showPassword ? (
-        <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>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
+              <div className="relative">
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Enter password"
+                  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={() => setShowPassword((v) => !v)}
+                  aria-label="Toggle password visibility"
+                >
+                  {showPassword ? (
+                    <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>

            <div className="mt-4">
              <label className="block text-sm font-medium text-gray-700 mb-1">
@ -277,13 +286,13 @@ const Login = () => {
                  {captcha}
                </div>
                <button
-  type="button"
-  onClick={generateCaptcha}
-  className="flex items-center gap-1 text-sm text-[#92722A] hover:underline"
->
-  <RefreshCw size={14} className="text-[#92722A]" />
-  Refresh
-</button>
+                  type="button"
+                  onClick={generateCaptcha}
+                  className="flex items-center gap-1 text-sm text-[#92722A] hover:underline"
+                >
+                  <RefreshCw size={14} className="text-[#92722A]" />
+                  Refresh
+                </button>
              </div>
              <p className="text-xs text-gray-500 mt-1">
                If you cannot read the code, click "Refresh" or type:{" "}
--- a/ipi-survey-platform/src/pages/PublicContactForm.jsx
+++ b/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) {
-        navigate("/change-password", {
-          state: { email: formData.email.trim() },
-        });
+        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.");
      }      
@ -165,7 +176,6 @@ const PublicContactForm = () => {
      setLoading(false);
    }
  };
-  

  const handleResendOtp = () => {
    setOtpMsg("A new OTP has been sent to your registered email.");
@ -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">
@ -266,18 +271,18 @@ const PublicContactForm = () => {
                    {captcha}
                  </div>
                  <button
-  type="button"
-  onClick={generateCaptcha}
-  className="flex items-center gap-1 text-sm text-[#92722A] hover:underline"
->
-  <RefreshCw size={14} className="text-[#92722A]" />
-  Refresh
-</button>
+                    type="button"
+                    onClick={generateCaptcha}
+                    className="flex items-center gap-1 text-sm text-[#92722A] hover:underline"
+                  >
+                    <RefreshCw size={14} className="text-[#92722A]" />
+                    Refresh
+                  </button>
                </div>
                <p className="text-xs text-gray-500 mt-1">
-                If you cannot read the code, click "Refresh" or type:{" "}
-                <span className="font-mono">{captcha}</span>
-              </p>
+                  If you cannot read the code, click "Refresh" or type:{" "}
+                  <span className="font-mono">{captcha}</span>
+                </p>
                <input
                  type="text"
                  name="captcha"