Merge pull request #1100 from Bonymol-aot/FWF-5971-FWF-5985/reset-password-integration/unsaved-changes-warning

arun-s-aot · web-flow · commit a637c4ebeaee · 2026-01-30T14:40:34.000+05:30
FWF-5971 : [Feature] Added reset password integration, FWF-5985:[Feature] Added unsaved changes prompt
diff --git a/forms-flow-nav/src/endpoints/index.js b/forms-flow-nav/src/endpoints/index.js
@@ -2,6 +2,7 @@ import { WEB_BASE_URL, MT_ADMIN_BASE_URL, MT_ADMIN_BASE_URL_VERSION } from "./co
 
 const API = {
     LANG_UPDATE: `${WEB_BASE_URL}/user/locale`,
+    RESET_PASSWORD: (userId) => `${WEB_BASE_URL}/user/${userId}/reset-password`,
     GET_TENANT_DATA: `${MT_ADMIN_BASE_URL}/${MT_ADMIN_BASE_URL_VERSION}/tenant`,
     INTEGRATION_ENABLE_DETAILS: `${WEB_BASE_URL}/integrations/embed/display`
 }
diff --git a/forms-flow-nav/src/services/user/index.js b/forms-flow-nav/src/services/user/index.js
@@ -0,0 +1,45 @@
+import { RequestService, StorageService } from "@formsflow/service";
+import API from "../../endpoints/index";
+import { WEB_BASE_CUSTOM_URL } from "../../constants/constants";
+
+/**
+ * Trigger a reset password email/link for the current user.
+ */
+const extractUserIdFromToken = (token) => {
+  if (!token) return "";
+  const raw = String(token).replace(/^Bearer\s+/i, "").trim();
+  const parts = raw.split(".");
+  if (parts.length < 2) return "";
+  try {
+    const base64Url = parts[1];
+    const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+    const padded = base64.padEnd(base64.length + ((4 - (base64.length % 4)) % 4), "=");
+    const atobFn = typeof atob === "function" ? atob : (typeof window !== "undefined" ? window.atob : null);
+    if (!atobFn) return "";
+    const json = JSON.parse(atobFn(padded));
+    return json?.sub || "";
+  } catch (e) {
+    return "";
+  }
+};
+
+export const requestResetPassword = () => {
+  const token = StorageService.get(StorageService.User.AUTH_TOKEN);
+  const userId = extractUserIdFromToken(token);
+  if (!userId) {
+    return Promise.reject(new Error("User id not found in token"));
+  }
+  const redirectUri =
+    (WEB_BASE_CUSTOM_URL && String(WEB_BASE_CUSTOM_URL).trim()) ||
+    (typeof window !== "undefined" ? window.location.origin : "");
+  const urlWithRedirect = `${API.RESET_PASSWORD(userId)}?redirect_uri=${encodeURIComponent(
+    redirectUri
+  )}`;
+  return RequestService.httpPUTRequest(
+    urlWithRedirect,
+    {},
+    token
+  );
+};
+
+
diff --git a/forms-flow-nav/src/sidenav/ProfileSettingsModal.jsx b/forms-flow-nav/src/sidenav/ProfileSettingsModal.jsx
@@ -2,12 +2,13 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types'; 
 import Modal from 'react-bootstrap/Modal';
 import { Tabs, Tab } from 'react-bootstrap';
-import { CloseIcon, V8CustomButton, CustomInfo, SelectDropdown, CustomTextInput, ApplicationLogo } from "@formsflow/components";
-import { fetchSelectLanguages, updateUserlang } from '../services/language';
+import { CloseIcon, V8CustomButton, CustomInfo, SelectDropdown, CustomTextInput, ApplicationLogo, PromptModal } from "@formsflow/components";
+import { fetchSelectLanguages } from '../services/language';
+import { requestResetPassword } from "../services/user";
 import { useTranslation } from "react-i18next";
 import i18n from '../resourceBundles/i18n';
 import { StorageService } from "@formsflow/service";
-import { KEYCLOAK_AUTH_URL, KEYCLOAK_REALM, LANGUAGE, MULTITENANCY_ENABLED, USER_LANGUAGE_LIST } from '../constants/constants';
+import { LANGUAGE, MULTITENANCY_ENABLED, USER_LANGUAGE_LIST } from '../constants/constants';
 
 export const ProfileSettingsModal = ({ show, onClose, tenant, publish }) => {
   const [selectLanguages, setSelectLanguages] = useState([]);
@@ -16,18 +17,30 @@ export const ProfileSettingsModal = ({ show, onClose, tenant, publish }) => {
   const [daysDifference, setDaysDifference] = useState(null);
   const [activeTab, setActiveTab] = useState("Profile");
   const isSSO = false;
+  const [showUnsavedChangesPrompt, setShowUnsavedChangesPrompt] = useState(false);
   const [profileFields, setProfileFields] = useState({
     firstName: "",
     lastName: "",
     email: "",
     username: "",
   });
   const [initialProfileFields, setInitialProfileFields] = useState(null);
+  const [initialSelectedLang, setInitialSelectedLang] = useState(prevSelectedLang || LANGUAGE);
+  const [emailTouched, setEmailTouched] = useState(false);
+  const [usernameTouched, setUsernameTouched] = useState(false);
+  const [resetPasswordState, setResetPasswordState] = useState("default"); // default | success | error
+  const [resetPasswordLoading, setResetPasswordLoading] = useState(false);
+  const [lastResetPasswordError, setLastResetPasswordError] = useState(null);
   const { t } = useTranslation(); 
   
   useEffect(() => {
     if (!show) return;
     try {
+      // Reset language selection to current app language when modal opens
+      const currentLang = localStorage.getItem("i18nextLng") || LANGUAGE;
+      setSelectedLang(currentLang);
+      setInitialSelectedLang(currentLang);
+
       const userDetail = JSON.parse(StorageService.get(StorageService.User.USER_DETAILS)) || {};
       const fullName = userDetail?.name || "";
       const [firstFromName = "", ...rest] = String(fullName).trim().split(/\s+/);
@@ -41,9 +54,16 @@ export const ProfileSettingsModal = ({ show, onClose, tenant, publish }) => {
       };
       setProfileFields(nextFields);
       setInitialProfileFields(nextFields);
+      setEmailTouched(false);
+      setUsernameTouched(false);
+      setResetPasswordState("default");
+      setResetPasswordLoading(false);
+      setLastResetPasswordError(null);
     } catch (e) {
       setProfileFields({ firstName: "", lastName: "", email: "", username: "" });
       setInitialProfileFields({ firstName: "", lastName: "", email: "", username: "" });
+      setSelectedLang(prevSelectedLang || LANGUAGE);
+      setInitialSelectedLang(prevSelectedLang || LANGUAGE);
     }
   }, [show]);
 
@@ -87,6 +107,52 @@ export const ProfileSettingsModal = ({ show, onClose, tenant, publish }) => {
     setSelectedLang(newLang);
   };
 
+  const isValidEmail = (email) => {
+    // Simple, practical email validation (good UX, not overly strict)
+    const value = String(email || "").trim();
+    if (!value) return true; // allow empty if your system permits it
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+  };
+  const emailIsInvalid = emailTouched && !isValidEmail(profileFields.email);
+
+  const isValidUsername = (username) => {
+    const value = String(username || "");
+    if (!value) return true; // allow empty if your system permits it
+    return /^\S+$/.test(value); // no whitespace
+  };
+  const usernameIsInvalid =
+    usernameTouched && !isValidUsername(profileFields.username);
+
+  useEffect(() => {
+    setResetPasswordState("default");
+  }, [profileFields.email]);
+
+  const handleResetPassword = async () => {
+    setEmailTouched(true);
+    if (!profileFields.email || emailIsInvalid) return;
+
+    setResetPasswordLoading(true);
+    try {
+      await requestResetPassword();
+      setResetPasswordState("success");
+      setLastResetPasswordError(null);
+    } catch (e) {
+      setResetPasswordState("error");
+      const status = e?.response?.status;
+      const message = e?.response?.data?.message || e?.message;
+      const details = { status, message, data: e?.response?.data };
+      setLastResetPasswordError(details);
+      try {
+        StorageService.save("PROFILE_RESET_PASSWORD_LAST_ERROR", JSON.stringify(details));
+      } catch (_) {
+      }
+     
+      console.error("Reset password failed:", details);
+    } finally {
+      setResetPasswordLoading(false);
+    }
+  };
+
   const handleConfirmProfile = () => { 
     // Keep a copy for later integration; for now just save it locally and close the modal.
     const firstName = (profileFields.firstName || "").trim();
@@ -121,7 +187,32 @@ export const ProfileSettingsModal = ({ show, onClose, tenant, publish }) => {
       profileFields.lastName !== initialProfileFields.lastName ||
       profileFields.email !== initialProfileFields.email ||
       profileFields.username !== initialProfileFields.username);
-  const isAnythingChanged = isProfileChanged || !isSaveDisabled;
+  const isLangChanged = selectedLang !== initialSelectedLang;
+  const isAnythingChanged = isProfileChanged || isLangChanged;
+
+  const handleRequestClose = () => {
+    if (activeTab === "Profile" && isAnythingChanged) {
+      setShowUnsavedChangesPrompt(true);
+      return;
+    }
+    onClose();
+  };
+
+  const handleDiscardAndClose = () => {
+    setShowUnsavedChangesPrompt(false);
+    if (initialProfileFields) setProfileFields(initialProfileFields);
+    setSelectedLang(initialSelectedLang);
+    setEmailTouched(false);
+    setUsernameTouched(false);
+    setResetPasswordState("default");
+    setLastResetPasswordError(null);
+    onClose();
+  };
+
+  const handleSaveAndClose = () => {
+    setShowUnsavedChangesPrompt(false);
+    handleConfirmProfile();
+  };
 
   const selectedLangLabel = selectLanguages.find(lang => lang.name === selectedLang)?.value || selectedLang;
 
@@ -130,18 +221,14 @@ export const ProfileSettingsModal = ({ show, onClose, tenant, publish }) => {
     { key: "Permissions", label: t("Permissions") },
   ];
 
-  const resetPasswordUrl =
-    KEYCLOAK_AUTH_URL && KEYCLOAK_REALM
-      ? `${KEYCLOAK_AUTH_URL}/realms/${KEYCLOAK_REALM}/account`
-      : null;
-
   // Get tenantId from tenant prop or StorageService
   const tenantId = tenant?.tenantId || StorageService.get("tenantKey");
 
   return (
+    <>
     <Modal
       show={show}
-      onHide={onClose}
+      onHide={handleRequestClose}
       size="lg"
       dialogClassName="profile-settings-modal"
       data-testid="profile-settings-modal"
@@ -153,7 +240,7 @@ export const ProfileSettingsModal = ({ show, onClose, tenant, publish }) => {
         <div className="modal-header-content">
           <div className="modal-title pb-0">
             <p>{t("Personal Settings")}</p>        
-          <CloseIcon color="var(--gray-darkest)" onClick={onClose}/>
+          <CloseIcon color="var(--gray-darkest)" onClick={handleRequestClose}/>
           </div>
           <div className="modal-subtitle pb-0">
             <div className='secondary-controls'>
@@ -223,7 +310,14 @@ export const ProfileSettingsModal = ({ show, onClose, tenant, publish }) => {
                     dataTestId="profile-email"
                     ariaLabel={t("Email")}
                     disabled={isSSO}
+                    onBlur={() => setEmailTouched(true)}
                   />
+                  <div
+                    className="profile-settings-field-error text-danger mt-1"
+                    data-testid="profile-email-error"
+                  >
+                    {emailIsInvalid ? t("Email address is invalid") : ""}
+                  </div>
                 </div>
                 <div className="col-12 col-md-6">
                   <div className="input-label-text">{t("Username")}</div>
@@ -234,27 +328,50 @@ export const ProfileSettingsModal = ({ show, onClose, tenant, publish }) => {
                     dataTestId="profile-username"
                     ariaLabel={t("Username")}
                     disabled={isSSO}
+                    onBlur={() => setUsernameTouched(true)}
                   />
+                  <div
+                    className="profile-settings-field-error text-danger mt-1"
+                    data-testid="profile-username-error"
+                  >
+                    {usernameIsInvalid ? t("Username is invalid") : ""}
+                  </div>
                 </div>
                 <div className="col-12">
                   <V8CustomButton
-                    label={t("Reset Password")}
+                    label={resetPasswordLoading ? "Resetting password" : "Reset Password"}
                     variant="secondary"
                     dataTestId="profile-reset-password"
-                    ariaLabel={t("Reset Password")}
-                    disabled={!resetPasswordUrl}
-                    onClick={() => {
-                      if (!resetPasswordUrl) return;
-                      window.open(resetPasswordUrl, "_blank", "noopener,noreferrer");
-                    }}
+                    ariaLabel="Reset Password"
+                    disabled={
+                      isSSO ||
+                      resetPasswordLoading ||
+                      !profileFields.email ||
+                      emailIsInvalid
+                    }
+                    loading={resetPasswordLoading}
+                    onClick={handleResetPassword}
                   />
                 </div>
                 <div className="col-12">
                   <CustomInfo
-                    className="profile-settings-note-panel"
+                    className={[
+                      "profile-settings-note-panel",
+                      resetPasswordState === "error"
+                        ? "profile-settings-note-panel--danger-text"
+                        : "",
+                    ].join(" ")}
                     variant="secondary"
                     icon={<ApplicationLogo width="1.1875rem" height="1.4993rem" />}
-                    content={t("Success! Check your email inbox for next steps.")}
+                    content={
+                      resetPasswordState === "success"
+                        ? t("Success! Check your email inbox for next steps.")
+                        : resetPasswordState === "error"
+                          ? t("Uh-oh! Something went wrong. Please try again.")
+                          : t("Resetting your password sends a reset link to {{email}}.", {
+                              email: profileFields.email || "",
+                            })
+                    }
                   />
                 </div>
               </div>
@@ -296,13 +413,30 @@ export const ProfileSettingsModal = ({ show, onClose, tenant, publish }) => {
             onClick={handleConfirmProfile}
             dataTestId="save-profile-settings"
             ariaLabel={t("Save Profile Settings")}
-            disabled={activeTab !== "Profile" || !isAnythingChanged}
+             disabled={activeTab !== "Profile" || !isAnythingChanged || emailIsInvalid || usernameIsInvalid}
             variant="primary"
           />
          
         </div>
       </Modal.Footer>
     </Modal>
+
+    <PromptModal
+      show={showUnsavedChangesPrompt}
+      size="sm"
+      onClose={() => setShowUnsavedChangesPrompt(false)}
+      type="warning"
+      title={t("You have unsaved changes")}
+      message={t("Leaving will discard any unsaved changes. Are you sure you want to continue?")}
+      primaryBtnText={t("Save")}
+      secondaryBtnText={t("Discard Changes")}
+      primaryBtnAction={handleSaveAndClose}
+      secondaryBtnAction={handleDiscardAndClose}
+      primaryBtnDisable={emailIsInvalid || usernameIsInvalid}
+      primaryBtndataTestid="profile-settings-save-before-close"
+      secondoryBtndataTestid="profile-settings-discard-before-close"
+    />
+    </>
   );
 };
 
diff --git a/forms-flow-theme/scss/v8-scss/_modal.scss b/forms-flow-theme/scss/v8-scss/_modal.scss
@@ -637,12 +637,18 @@ $base: 1rem; // Cannot use var() in SCSS arithmetic
         overflow: auto;
     }
 
+    .profile-settings-field-error {
+        width: 100%;
+        min-height: 1.25rem;
+        overflow-wrap: anywhere;
+    }
+
     .profile-settings-note-panel {
-        width: 46rem; 
-        height: 3.688rem; 
-        max-width: 100%;
+        width: 100%;
+        max-width: 46rem;
+        min-height: 3.688rem;
         box-sizing: border-box;
-        overflow: hidden;
+        overflow: visible;
     }
 
     .profile-settings-note-panel.info-panel {
@@ -664,4 +670,10 @@ $base: 1rem; // Cannot use var() in SCSS arithmetic
             align-items: center;
         }
     }
+
+    .profile-settings-note-panel--danger-text {
+        .info-content {
+            color: var(--default-danger-color);
+        }
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import { WEB_BASE_URL, MT_ADMIN_BASE_URL, MT_ADMIN_BASE_URL_VERSION } from "./co`
`2`	`2`
`3`	`3`	`const API = {`
`4`	`4`	LANG_UPDATE: `${WEB_BASE_URL}/user/locale`,
	`5`	+ RESET_PASSWORD: (userId) => `${WEB_BASE_URL}/user/${userId}/reset-password`,
`5`	`6`	GET_TENANT_DATA: `${MT_ADMIN_BASE_URL}/${MT_ADMIN_BASE_URL_VERSION}/tenant`,
`6`	`7`	INTEGRATION_ENABLE_DETAILS: `${WEB_BASE_URL}/integrations/embed/display`
`7`	`8`	`}`