From 805588b7bb1bf42656e6a0c43fc1d729911f2460 Mon Sep 17 00:00:00 2001
From: Dhaval Rajpara <dhavalrajpara@apache.org>
Date: Tue, 30 Dec 2025 00:59:55 +0530
Subject: [PATCH] RANGER-5303 : Implement White-space Input Validation Across
 Ranger UI Forms

---
 .../src/components/CommonComponents.jsx       |  9 +++
 .../src/components/CreatableField.jsx         |  4 +-
 .../react-webapp/src/components/Editable.jsx  | 35 +++++++++--
 .../webapp/react-webapp/src/utils/XAEnums.js  |  4 +-
 .../react-webapp/src/utils/XAMessages.js      |  6 +-
 .../src/views/Encryption/KeyCreate.jsx        | 47 +++++++++-----
 .../PolicyListing/AddUpdatePolicyForm.jsx     | 27 ++++----
 .../PolicyListing/PolicyConditionsComp.jsx    | 32 +++++++++-
 .../src/views/Resources/ResourceComp.jsx      |  6 +-
 .../views/Resources/ResourceSelectComp.jsx    |  2 +-
 .../views/SecurityZone/SecurityZoneForm.jsx   | 47 +++++++-------
 .../src/views/ServiceManager/ServiceForm.jsx  | 62 ++++++++++++-------
 .../groups_details/GroupForm.jsx              |  9 ++-
 .../role_details/RoleForm.jsx                 | 17 ++---
 .../users_details/UserForm.jsx                | 39 ++++++------
 .../react-webapp/src/views/UserProfile.jsx    | 16 +++--
 16 files changed, 239 insertions(+), 123 deletions(-)

diff --git a/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx b/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx
index 15b8569f83..053ced0e21 100644
--- a/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/components/CommonComponents.jsx
@@ -568,3 +568,12 @@ export const ModalLoader = () => {
     </h4>
   );
 };
+
+export const trimInputValue = (e, input) => {
+  const value = e.target.value;
+  const trimmed = value.trim();
+  if (value !== trimmed) {
+    input.onChange(trimmed);
+  }
+  input.onBlur(e); // Always call onBlur to trigger validation
+};
diff --git a/security-admin/src/main/webapp/react-webapp/src/components/CreatableField.jsx b/security-admin/src/main/webapp/react-webapp/src/components/CreatableField.jsx
index 4433044303..f9974ae882 100644
--- a/security-admin/src/main/webapp/react-webapp/src/components/CreatableField.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/components/CreatableField.jsx
@@ -52,8 +52,8 @@ const CreatableField = (props) => {
   };
 
   const createOption = (label) => ({
-    value: label,
-    label: label
+    value: label.trim(),
+    label: label.trim()
   });
 
   const handleInputChange = (value) => {
diff --git a/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx b/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx
index 9d1234d2b0..c5754ac958 100644
--- a/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/components/Editable.jsx
@@ -231,7 +231,7 @@ const CustomCondition = (props) => {
               const expressionVal = (val) => {
                 let value = null;
                 if (val != "" && typeof val != "object") {
-                  valRef.current[m.name] = val;
+                  valRef.current[m.name] = val.trim();
                   return (value = val);
                 }
                 return value !== null ? value : "";
@@ -264,6 +264,12 @@ const CustomCondition = (props) => {
                           key={m.name}
                           value={expressionVal(selectedJSCondVal)}
                           onChange={(e) => textAreaHandleChange(e, m.name)}
+                          onBlur={(e) => {
+                            textAreaHandleChange(
+                              { target: { value: e.target.value.trim() } },
+                              m.name
+                            );
+                          }}
                           isInvalid={validExpression.state}
                         />
                         {validExpression.state && (
@@ -295,14 +301,33 @@ const CustomCondition = (props) => {
                     <b>{m.label}:</b>
                     <CreatableSelect
                       {...selectProps}
-                      defaultValue={
-                        selectedInputVal == "" ? null : selectedInputVal
-                      }
-                      onChange={(e) => handleChange(e, m.name)}
+                      value={selectedInputVal || null}
+                      onChange={(e) => {
+                        setSelectVal(e);
+                        handleChange(e, m.name);
+                      }}
                       placeholder=""
                       width="500px"
                       isClearable={false}
                       styles={selectInputCustomStyles}
+                      formatCreateLabel={(inputValue) =>
+                        `Create "${inputValue.trim()}"`
+                      }
+                      onCreateOption={(inputValue) => {
+                        const trimmedValue = inputValue.trim();
+                        if (trimmedValue) {
+                          const newOption = {
+                            label: trimmedValue,
+                            value: trimmedValue
+                          };
+                          const currentValues = selectedInputVal || [];
+                          const newValues = Array.isArray(currentValues)
+                            ? [...currentValues, newOption]
+                            : [newOption];
+                          setSelectVal(newValues);
+                          tagAccessData(newValues, m.name);
+                        }
+                      }}
                     />
                   </Form.Group>
                 </div>
diff --git a/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js b/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
index ac9bdfb30a..4e08f3a061 100755
--- a/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
+++ b/security-admin/src/main/webapp/react-webapp/src/utils/XAEnums.js
@@ -586,7 +586,7 @@ export const RegexValidation = {
       /^([A-Za-z0-9_]|[\u00C0-\u017F])([a-z0-9,._\-+/@= ]|[\u00C0-\u017F])+$/i,
     regexExpressionForFirstAndLastName:
       /^([A-Za-z0-9_]|[\u00C0-\u017F])([a-zA-Z0-9\s_. -@]|[\u00C0-\u017F])+$/i,
-    regexforNameValidation: /^[a-zA-Z0-9_-][a-zA-Z0-9\s_-]{0,254}$/,
+    regexForNameValidation: /^[a-zA-Z0-9_-][a-zA-Z0-9\s_-]{0,254}$/,
     regexExpressionForSecondaryName:
       /^([A-Za-z0-9_]|[\u00C0-\u017F])([a-zA-Z0-9\s_. -@]|[\u00C0-\u017F])+$/i,
     regexforServiceNameValidation: /^[a-zA-Z0-9_-][a-zA-Z0-9_-]{0,254}$/,
@@ -601,7 +601,7 @@ export const RegexValidation = {
         3. Name length should be greater than one."
       </>
     ),
-    regexforNameValidationMessage:
+    regexForNameValidationMessage:
       "Name should not start with space, it should be less than 256 characters and special characters are not allowed(except _ - and space).",
     secondaryNameValidationMessage: (
       <>
diff --git a/security-admin/src/main/webapp/react-webapp/src/utils/XAMessages.js b/security-admin/src/main/webapp/react-webapp/src/utils/XAMessages.js
index ee7b010ea4..75b0647580 100644
--- a/security-admin/src/main/webapp/react-webapp/src/utils/XAMessages.js
+++ b/security-admin/src/main/webapp/react-webapp/src/utils/XAMessages.js
@@ -36,9 +36,9 @@ export const RegexMessage = {
         </p>
       </>
     ),
-    passwordvalidationinfomessage:
-      "Password should be minimum 8 characters ,atleast one uppercase letter, one lowercase letter and one numeric. For FIPS environment password should be minimum 14 characters with atleast one uppercase letter, one special characters, one lowercase letter and one numeric.",
-    emailvalidationinfomessage: (
+    passwordValidationInfoMessage:
+      "Password should be minimum 8 characters ,at least one uppercase letter, one lowercase letter and one numeric. For FIPS environment password should be minimum 14 characters with atleast one uppercase letter, one special characters, one lowercase letter and one numeric.",
+    emailValidationInfoMessage: (
       <>
         <p className="pd-10 mb-0" style={{ fontSize: "small" }}>
           1. Email address should be start with alphabet / numeric / underscore
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx
index fcb8a95524..6ad5343656 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/Encryption/KeyCreate.jsx
@@ -24,7 +24,12 @@ import { toast } from "react-toastify";
 import { FieldArray } from "react-final-form-arrays";
 import arrayMutators from "final-form-arrays";
 import { fetchApi } from "Utils/fetchAPI";
-import { BlockUi, Loader, scrollToError } from "Components/CommonComponents";
+import {
+  BlockUi,
+  Loader,
+  scrollToError,
+  trimInputValue
+} from "Components/CommonComponents";
 import { commonBreadcrumb, serverError } from "Utils/XAUtils";
 import { cloneDeep, find, isEmpty, values } from "lodash";
 import withRouter from "Hooks/withRouter";
@@ -69,7 +74,7 @@ const reducer = (state, action) => {
   }
 };
 
-const PromtDialog = (props) => {
+const PromptDialog = (props) => {
   const { isDirtyField, isUnblock } = props;
   usePrompt("Are you sure you want to leave", isDirtyField && !isUnblock);
   return null;
@@ -120,7 +125,7 @@ function KeyCreate(props) {
     serviceJson.name = values.name;
     serviceJson.cipher = values.cipher;
     serviceJson.length = values.length;
-    serviceJson.description = values.description;
+    serviceJson.description = values?.description?.trim();
     serviceJson.attributes = {};
 
     for (let key of Object.keys(values.attributes)) {
@@ -128,8 +133,8 @@ function KeyCreate(props) {
         !isEmpty(values?.attributes[key]?.name) &&
         !isEmpty(values?.attributes[key]?.value)
       ) {
-        serviceJson.attributes[values.attributes[key].name] =
-          values.attributes[key].value;
+        serviceJson.attributes[values.attributes[key].name.trim()] =
+          values.attributes[key].value.trim();
       }
     }
 
@@ -251,7 +256,7 @@ function KeyCreate(props) {
           }
         }) => (
           <div className="wrap">
-            <PromtDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
+            <PromptDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
             <form
               onSubmit={(event) => {
                 handleSubmit(event);
@@ -268,6 +273,7 @@ function KeyCreate(props) {
                         {...input}
                         name="name"
                         type="text"
+                        onBlur={(e) => trimInputValue(e, input)}
                         id={meta.error && meta.touched ? "isError" : "name"}
                         className={
                           meta.error && meta.touched
@@ -335,6 +341,7 @@ function KeyCreate(props) {
                         {...input}
                         className="form-control"
                         data-cy="description"
+                        onBlur={(e) => trimInputValue(e, input)}
                       />
                     </Col>
                   </Row>
@@ -361,18 +368,26 @@ function KeyCreate(props) {
                           fields.map((name, index) => (
                             <tr key={name}>
                               <td className="text-center">
-                                <Field
-                                  name={`${name}.name`}
-                                  component="input"
-                                  className="form-control"
-                                />
+                                <Field name={`${name}.name`}>
+                                  {({ input }) => (
+                                    <input
+                                      {...input}
+                                      className="form-control"
+                                      onBlur={(e) => trimInputValue(e, input)}
+                                    />
+                                  )}
+                                </Field>
                               </td>
                               <td className="text-center">
-                                <Field
-                                  name={`${name}.value`}
-                                  component="input"
-                                  className="form-control"
-                                />
+                                <Field name={`${name}.value`}>
+                                  {({ input }) => (
+                                    <input
+                                      {...input}
+                                      className="form-control"
+                                      onBlur={(e) => trimInputValue(e, input)}
+                                    />
+                                  )}
+                                </Field>
                               </td>
                               <td className="text-center">
                                 <Button
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx
index 515c2b0d0b..4ae7ce5bb4 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/AddUpdatePolicyForm.jsx
@@ -53,7 +53,8 @@ import {
   BlockUi,
   Loader,
   scrollToError,
-  selectInputCustomStyles
+  selectInputCustomStyles,
+  trimInputValue
 } from "Components/CommonComponents";
 import { fetchApi } from "Utils/fetchAPI";
 import { RangerPolicyType, getEnumElementByValue } from "Utils/XAEnums";
@@ -291,7 +292,7 @@ export default function AddUpdatePolicyForm() {
   const fetchPolicyLabel = async (inputValue) => {
     let params = {};
     if (inputValue) {
-      params["policyLabel"] = inputValue || "";
+      params["policyLabel"] = inputValue.trim() || "";
     }
     const policyLabelResp = await fetchApi({
       url: "plugins/policyLabels",
@@ -299,8 +300,8 @@ export default function AddUpdatePolicyForm() {
     });
 
     return policyLabelResp.data.map((name) => ({
-      label: name,
-      value: name
+      label: name.trim(),
+      value: name.trim()
     }));
   };
 
@@ -391,12 +392,12 @@ export default function AddUpdatePolicyForm() {
       data.policyName = policyData?.name;
       data.isEnabled = policyData?.isEnabled;
       data.policyPriority = policyData?.policyPriority == 0 ? false : true;
-      data.description = policyData?.description;
+      data.description = policyData?.description?.trim();
       data.isAuditEnabled = policyData?.isAuditEnabled;
       data.policyLabel =
         policyData &&
         policyData?.policyLabels?.map((val) => {
-          return { label: val, value: val };
+          return { label: val?.trim(), value: val?.trim() };
         });
       if (policyData?.resources) {
         if (!isMultiResources) {
@@ -405,7 +406,7 @@ export default function AddUpdatePolicyForm() {
             let setResources = find(serviceCompResourcesDetails, ["name", key]);
             data[`resourceName-${setResources?.level}`] = setResources;
             data[`value-${setResources?.level}`] = value.values.map((m) => {
-              return { label: m, value: m };
+              return { label: m?.trim(), value: m?.trim() };
             });
             if (setResources?.excludesSupported) {
               data[`isExcludesSupport-${setResources?.level}`] =
@@ -450,7 +451,7 @@ export default function AddUpdatePolicyForm() {
                   setResources;
                 additionalResourcesObj[`value-${setResources?.level}`] =
                   value.values.map((m) => {
-                    return { label: m, value: m };
+                    return { label: m?.trim(), value: m?.trim() };
                   });
                 if (setResources?.excludesSupported) {
                   additionalResourcesObj[
@@ -521,7 +522,7 @@ export default function AddUpdatePolicyForm() {
             data.conditions[val?.type] = JSON.parse(conditionObj.uiHint)
               .isMultiValue
               ? val?.values
-              : val?.values.toString();
+              : val?.values.toString().trim();
           }
         }
       }
@@ -711,9 +712,9 @@ export default function AddUpdatePolicyForm() {
             obj.conditions[data?.type] = JSON.parse(conditionObj.uiHint)
               .isMultiValue
               ? data?.values.map((m) => {
-                  return { value: m, label: m };
+                  return { value: m.trim(), label: m.trim() };
                 })
-              : data?.values.toString();
+              : data?.values.toString().trim();
           }
         }
       }
@@ -889,7 +890,7 @@ export default function AddUpdatePolicyForm() {
       data["conditions"] = [];
     }
 
-    /* For create zoen policy*/
+    /* For create zone policy*/
     if (localStorage.getItem("zoneDetails") != null) {
       data["zoneName"] = JSON.parse(localStorage.getItem("zoneDetails")).label;
     }
@@ -1303,6 +1304,7 @@ export default function AddUpdatePolicyForm() {
                                           : "form-control"
                                       }
                                       data-cy="policyName"
+                                      onBlur={(e) => trimInputValue(e, input)}
                                     />
                                     <InfoIcon
                                       css="input-box-info-icon"
@@ -1425,6 +1427,7 @@ export default function AddUpdatePolicyForm() {
                                   as="textarea"
                                   rows={3}
                                   data-cy="description"
+                                  onBlur={(e) => trimInputValue(e, input)}
                                 />
                               </Col>
                             </FormB.Group>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyConditionsComp.jsx b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyConditionsComp.jsx
index 7c8aba953a..8b2240e2e0 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyConditionsComp.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/PolicyListing/PolicyConditionsComp.jsx
@@ -25,7 +25,10 @@ import CreatableSelect from "react-select/creatable";
 import { find, isEmpty } from "lodash";
 import { InfoIcon } from "Utils/XAUtils";
 import { RegexMessage } from "Utils/XAMessages";
-import { selectInputCustomStyles } from "Components/CommonComponents";
+import {
+  selectInputCustomStyles,
+  trimInputValue
+} from "Components/CommonComponents";
 const esprima = require("esprima");
 
 export default function PolicyConditionsComp(props) {
@@ -90,7 +93,11 @@ export default function PolicyConditionsComp(props) {
   const ipRangeVal = (val) => {
     let value = [];
     if (!isEmpty(val)) {
-      value = val.map((m) => ({ label: m, value: m }));
+      // Trim existing values when displaying
+      value = val.map((m) => ({
+        label: m.trim(),
+        value: m.trim()
+      }));
     }
     return value;
   };
@@ -193,6 +200,9 @@ export default function PolicyConditionsComp(props) {
                                           }
                                           as="textarea"
                                           rows={3}
+                                          onBlur={(e) =>
+                                            trimInputValue(e, input)
+                                          }
                                         />
                                         {meta.error && (
                                           <span className="invalid-field">
@@ -227,6 +237,24 @@ export default function PolicyConditionsComp(props) {
                                     value={ipRangeVal(input.value)}
                                     onChange={(e) => handleChange(e, input)}
                                     styles={selectInputCustomStyles}
+                                    formatCreateLabel={(inputValue) =>
+                                      `Create "${inputValue.trim()}"`
+                                    }
+                                    onCreateOption={(inputValue) => {
+                                      const trimmedValue = inputValue.trim();
+                                      if (trimmedValue) {
+                                        const newOption = {
+                                          label: trimmedValue,
+                                          value: trimmedValue
+                                        };
+                                        const currentValues = input.value || [];
+                                        const newValues = [
+                                          ...currentValues,
+                                          trimmedValue
+                                        ];
+                                        input.onChange(newValues);
+                                      }
+                                    }}
                                   />
                                 )}
                               />
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx
index 661e8237dd..373d83b8fa 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceComp.jsx
@@ -134,17 +134,17 @@ export default function ResourceComp(props) {
       delete formValues[`isRecursiveSupport-${levelKey}`];
     }
     delete formValues[`value-${grpResourcesKeys[index]}`];
-    let CurrentSelectedResourcs = selectedVal.name;
+    let currentSelectedResources = selectedVal.name;
     for (let j = index + 1; j < grpResourcesKeys.length; j++) {
       let level = grpResourcesKeys[j];
       let nextResource = resources.find((m) => {
         if (m?.parent) {
-          return m.parent === CurrentSelectedResourcs;
+          return m.parent === currentSelectedResources;
         }
       });
       if (nextResource) {
         formValues[`resourceName-${level}`] = nextResource;
-        CurrentSelectedResourcs = nextResource.name;
+        currentSelectedResources = nextResource.name;
       }
     }
 
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx
index 128796f559..c99fc21069 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/Resources/ResourceSelectComp.jsx
@@ -93,7 +93,7 @@ export default function ResourceSelectComp(props) {
         toastId.current = toast.error(error.response.data.msgDesc);
       } else {
         toastId.current = toast.error(
-          "Resouce lookup failed for current resource"
+          "Resource lookup failed for current resource"
         );
       }
     }
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx
index 12a3764582..3370059825 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/SecurityZone/SecurityZoneForm.jsx
@@ -48,7 +48,8 @@ import {
   Loader,
   scrollToError,
   selectInputCustomStyles,
-  selectInputCustomErrorStyles
+  selectInputCustomErrorStyles,
+  trimInputValue
 } from "Components/CommonComponents";
 import usePrompt from "Hooks/usePrompt";
 import { getServiceDef } from "Utils/appState";
@@ -58,7 +59,7 @@ const noneOptions = {
   value: "none"
 };
 
-const PromtDialog = (props) => {
+const PromptDialog = (props) => {
   const { isDirtyField, isUnblock } = props;
   usePrompt("Are you sure you want to leave", isDirtyField && !isUnblock);
   return null;
@@ -75,10 +76,10 @@ const SecurityZoneForm = () => {
   const [resourceService, setResourceService] = useState({});
   const [resourceServicesOpt, setResourceServicesOpt] = useState([]);
   const [loader, setLoader] = useState(true);
-  const [modelState, setModalstate] = useState({
+  const [modelState, setModalState] = useState({
     showModalResource: false,
     data: null,
-    inputval: null,
+    inputVal: null,
     index: 0
   });
   const [preventUnBlock, setPreventUnblock] = useState(false);
@@ -93,7 +94,7 @@ const SecurityZoneForm = () => {
   const [defaultTagServiceOptions, setDefaultTagServiceOptions] = useState([]);
 
   useEffect(() => {
-    fetchInitalData();
+    fetchInitialData();
   }, [params.zoneId]);
 
   const validate = (values) => {
@@ -105,12 +106,12 @@ const SecurityZoneForm = () => {
       };
     } else {
       if (
-        !RegexValidation.NAME_VALIDATION.regexforNameValidation.test(
+        !RegexValidation.NAME_VALIDATION.regexForNameValidation.test(
           values.name
         )
       ) {
         errors.name = {
-          text: RegexValidation.NAME_VALIDATION.regexforNameValidationMessage
+          text: RegexValidation.NAME_VALIDATION.regexForNameValidationMessage
         };
       }
     }
@@ -122,7 +123,7 @@ const SecurityZoneForm = () => {
     ) {
       errors.adminRoles = {
         required: true,
-        text: "Please provide atleast one admin user or group or role !"
+        text: "Please provide at least one admin user or group or role !"
       };
       errors.adminUserGroups = {
         required: true,
@@ -156,15 +157,15 @@ const SecurityZoneForm = () => {
   };
 
   const handleClose = () => {
-    setModalstate({
+    setModalState({
       showModalResource: false,
       data: null,
-      inputval: null,
+      inputVal: null,
       index: 0
     });
   };
 
-  const fetchInitalData = async () => {
+  const fetchInitialData = async () => {
     await fetchResourceServices();
     await fetchZones();
   };
@@ -236,10 +237,10 @@ const SecurityZoneForm = () => {
       }
     }
 
-    setModalstate({
+    setModalState({
       showModalResource: true,
       data: {},
-      inputval: resourceInput,
+      inputVal: resourceInput,
       index: -1
     });
 
@@ -263,10 +264,10 @@ const SecurityZoneForm = () => {
       }
     }
 
-    setModalstate({
+    setModalState({
       showModalResource: true,
       data: editData,
-      inputval: resourceInput,
+      inputVal: resourceInput,
       index: resourceIndex
     });
 
@@ -407,8 +408,8 @@ const SecurityZoneForm = () => {
   const EditFormData = () => {
     const zoneData = {};
 
-    zoneData.name = zone.name;
-    zoneData.description = zone.description;
+    zoneData.name = zone?.name?.trim();
+    zoneData.description = zone?.description?.trim();
 
     zoneData.adminUserGroups = [];
     if (zone.adminUserGroups) {
@@ -633,14 +634,14 @@ const SecurityZoneForm = () => {
   const handleSave = () => {
     if (modelState.index === -1) {
       let add = [];
-      add = modelState.inputval.input.value;
+      add = modelState.inputVal.input.value;
       add.push(modelState.data);
-      modelState.inputval.input.onChange(add);
+      modelState.inputVal.input.onChange(add);
       handleClose();
     } else {
-      let edit = modelState.inputval.input.value;
+      let edit = modelState.inputVal.input.value;
       edit[modelState.index] = modelState.data;
-      modelState.inputval.input.onChange(edit);
+      modelState.inputVal.input.onChange(edit);
       handleClose();
     }
   };
@@ -776,7 +777,7 @@ const SecurityZoneForm = () => {
               submitting
             }) => (
               <Row>
-                <PromtDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
+                <PromptDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
                 <Col sm={12}>
                   <form
                     onSubmit={(event) => {
@@ -805,6 +806,7 @@ const SecurityZoneForm = () => {
                                   : "form-control"
                               }
                               data-cy="name"
+                              onBlur={(e) => trimInputValue(e, input)}
                             />
                             {meta.error && meta.touched && (
                               <span className="invalid-field">
@@ -829,6 +831,7 @@ const SecurityZoneForm = () => {
                               {...input}
                               className="form-control"
                               data-cy="description"
+                              onBlur={(e) => trimInputValue(e, input)}
                             />
                           </Col>
                         </Row>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx
index 40d871904f..d8be11ea48 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/ServiceManager/ServiceForm.jsx
@@ -23,7 +23,6 @@ import { Form, Field } from "react-final-form";
 import { toast } from "react-toastify";
 import arrayMutators from "final-form-arrays";
 import { FieldArray } from "react-final-form-arrays";
-import Select from "react-select";
 import AsyncSelect from "react-select/async";
 import AsyncCreatableSelect from "react-select/async-creatable";
 import { RegexValidation, additionalServiceConfigs } from "Utils/XAEnums";
@@ -42,7 +41,8 @@ import {
   CustomPopover,
   Loader,
   scrollToError,
-  selectInputCustomStyles
+  selectInputCustomStyles,
+  trimInputValue
 } from "Components/CommonComponents";
 import {
   difference,
@@ -387,8 +387,8 @@ class ServiceForm extends Component {
 
     const serviceJson = {};
     serviceJson["name"] = serviceResp?.data?.name;
-    serviceJson["displayName"] = serviceResp?.data?.displayName;
-    serviceJson["description"] = serviceResp?.data?.description;
+    serviceJson["displayName"] = serviceResp?.data?.displayName?.trim();
+    serviceJson["description"] = serviceResp?.data?.description?.trim();
     serviceJson["isEnabled"] = JSON.stringify(serviceResp?.data?.isEnabled);
 
     serviceJson["tagService"] =
@@ -409,7 +409,7 @@ class ServiceForm extends Component {
 
     serviceDefConfigs.map((config) => {
       serviceJson["configs"][config.replaceAll(".", "_").replaceAll("-", "_")] =
-        serviceResp?.data?.configs?.[config];
+        serviceResp?.data?.configs?.[config]?.trim();
     });
 
     const additionalConfigs = intersection(
@@ -435,7 +435,10 @@ class ServiceForm extends Component {
 
     let editCustomConfigs = sortBy(
       difference(serviceCustomConfigs, additionalConfigs)?.map((config) => {
-        return { name: config, value: serviceResp?.data?.configs[config] };
+        return {
+          name: config?.trim(),
+          value: serviceResp?.data?.configs[config]?.trim()
+        };
       }),
       "name"
     );
@@ -762,6 +765,7 @@ class ServiceForm extends Component {
                         data-cy={
                           "configs." + this.configsJson[configParam.name]
                         }
+                        onBlur={(e) => trimInputValue(e, input)}
                       />
                     </Col>
                     {configInfo.length === 1 && (
@@ -972,8 +976,8 @@ class ServiceForm extends Component {
       : undefined;
 
   validateDisplayName = (value) =>
-    !RegexValidation.NAME_VALIDATION.regexforNameValidation.test(value)
-      ? RegexValidation.NAME_VALIDATION.regexforNameValidationMessage
+    !RegexValidation.NAME_VALIDATION.regexForNameValidation.test(value)
+      ? RegexValidation.NAME_VALIDATION.regexForNameValidationMessage
       : undefined;
 
   composeValidators =
@@ -1209,6 +1213,7 @@ class ServiceForm extends Component {
                                         : "form-control"
                                     }
                                     data-cy="displayName"
+                                    onBlur={(e) => trimInputValue(e, input)}
                                   />
                                 </Col>
                                 {meta.error && meta.touched && (
@@ -1236,6 +1241,7 @@ class ServiceForm extends Component {
                                         : "form-control"
                                     }
                                     data-cy="description"
+                                    onBlur={(e) => trimInputValue(e, input)}
                                   />
                                 </Col>
                                 {meta.error && meta.touched && (
@@ -1334,22 +1340,34 @@ class ServiceForm extends Component {
                                       fields.map((name, index) => (
                                         <tr key={name}>
                                           <td className="text-center">
-                                            <Field
-                                              name={`${name}.name`}
-                                              component="input"
-                                              className="form-control"
-                                              data-js="name"
-                                              data-cy="name"
-                                            />
+                                            <Field name={`${name}.name`}>
+                                              {({ input }) => (
+                                                <input
+                                                  {...input}
+                                                  className="form-control"
+                                                  data-js="name"
+                                                  data-cy="name"
+                                                  onBlur={(e) =>
+                                                    trimInputValue(e, input)
+                                                  }
+                                                />
+                                              )}
+                                            </Field>
                                           </td>
                                           <td className="text-center">
-                                            <Field
-                                              name={`${name}.value`}
-                                              component="input"
-                                              className="form-control"
-                                              data-js="value"
-                                              data-cy="value"
-                                            />
+                                            <Field name={`${name}.value`}>
+                                              {({ input }) => (
+                                                <input
+                                                  {...input}
+                                                  className="form-control"
+                                                  data-js="value"
+                                                  data-cy="value"
+                                                  onBlur={(e) =>
+                                                    trimInputValue(e, input)
+                                                  }
+                                                />
+                                              )}
+                                            </Field>
                                           </td>
                                           <td className="text-center">
                                             <Button
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupForm.jsx
index 3082873c94..a540249e01 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/groups_details/GroupForm.jsx
@@ -27,6 +27,7 @@ import {
   Loader,
   scrollToError,
   CustomTooltip,
+  trimInputValue,
   BlockUi
 } from "Components/CommonComponents";
 import { useParams, useLocation, useNavigate } from "react-router-dom";
@@ -42,7 +43,7 @@ const INITIAL_STATE = {
   blockUI: false
 };
 
-const PromtDialog = (props) => {
+const PromptDialog = (props) => {
   const { isDirtyField, isUnblock } = props;
   usePrompt("Are you sure you want to leave", isDirtyField && !isUnblock);
   return null;
@@ -210,7 +211,7 @@ function GroupForm() {
     if (params?.groupID) {
       if (Object.keys(groupInfo).length > 0) {
         formValueObj.name = groupInfo.name;
-        formValueObj.description = groupInfo.description;
+        formValueObj.description = groupInfo?.description?.trim();
       }
     }
     return formValueObj;
@@ -263,7 +264,7 @@ function GroupForm() {
             dirty
           }) => (
             <div className="wrap user-role-grp-form">
-              <PromtDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
+              <PromptDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
               <form
                 onSubmit={(event) => {
                   handleSubmit(event);
@@ -300,6 +301,7 @@ function GroupForm() {
                               : false
                           }
                           data-cy="name"
+                          onBlur={(e) => trimInputValue(e, input)}
                         />
                         <span className="input-box-info-icon">
                           <CustomTooltip
@@ -349,6 +351,7 @@ function GroupForm() {
                           }
                           id="description"
                           data-cy="description"
+                          onBlur={(e) => trimInputValue(e, input)}
                         />
                       </Col>
                     </Row>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx
index 222d901f5d..ec01753636 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/role_details/RoleForm.jsx
@@ -25,7 +25,8 @@ import {
   BlockUi,
   Loader,
   CustomTooltip,
-  selectInputCustomStyles
+  selectInputCustomStyles,
+  trimInputValue
 } from "Components/CommonComponents";
 import { FieldArray } from "react-final-form-arrays";
 import arrayMutators from "final-form-arrays";
@@ -48,7 +49,7 @@ const INITIAL_STATE = {
   blockUI: false
 };
 
-const PromtDialog = (props) => {
+const PromptDialog = (props) => {
   const { isDirtyField, isUnblock } = props;
   usePrompt("Are you sure you want to leave", isDirtyField && !isUnblock);
   return null;
@@ -302,7 +303,7 @@ function RoleForm() {
   const handleUserAdd = (push) => {
     if (selectedUser.length == 0) {
       toast.dismiss(toastId.current);
-      toastId.current = toast.warning("Please select atleast one user!!");
+      toastId.current = toast.warning("Please select at least one user!!");
     } else {
       let usr = selectedUser.map(({ value }) => ({
         name: value,
@@ -322,7 +323,7 @@ function RoleForm() {
   const handleGroupAdd = (push) => {
     if (selectedGroup.length == 0) {
       toast.dismiss(toastId.current);
-      toastId.current = toast.warning("Please select atleast one group!!");
+      toastId.current = toast.warning("Please select at least one group!!");
     } else {
       let grp = selectedGroup.map(({ value }) => ({
         name: value,
@@ -362,7 +363,7 @@ function RoleForm() {
   const handleRoleAdd = (push) => {
     if (selectedRole.length == 0) {
       toast.dismiss(toastId.current);
-      toastId.current = toast.warning("Please select atleast one role!!");
+      toastId.current = toast.warning("Please select at least one role!!");
     } else {
       let rol = selectedRole.map(({ value }) => ({
         name: value,
@@ -415,7 +416,7 @@ function RoleForm() {
     if (params?.roleID) {
       if (Object.keys(roleInfo).length > 0) {
         formValueObj.name = roleInfo.name;
-        formValueObj.description = roleInfo.description;
+        formValueObj.description = roleInfo?.description?.trim();
         formValueObj.users = roleInfo.users;
         formValueObj.groups = roleInfo.groups;
         formValueObj.roles = roleInfo.roles;
@@ -473,7 +474,7 @@ function RoleForm() {
             dirty
           }) => (
             <div className="wrap user-role-grp-form">
-              <PromtDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
+              <PromptDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
 
               <form
                 onSubmit={(event) => {
@@ -502,6 +503,7 @@ function RoleForm() {
                           }
                           disabled={params.roleID ? true : false}
                           data-cy="name"
+                          onBlur={(e) => trimInputValue(e, input)}
                         />
                         <span className="input-box-info-icon">
                           <CustomTooltip
@@ -543,6 +545,7 @@ function RoleForm() {
                           placeholder="Description"
                           className="form-control"
                           data-cy="description"
+                          onBlur={(e) => trimInputValue(e, input)}
                         />
                       </Col>
                     </Row>
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx
index 2eb9e5a858..ef67e4cdb9 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/UserGroupRoleListing/users_details/UserForm.jsx
@@ -23,7 +23,8 @@ import { Form, Field } from "react-final-form";
 import {
   BlockUi,
   scrollToError,
-  selectInputCustomStyles
+  selectInputCustomStyles,
+  trimInputValue
 } from "Components/CommonComponents";
 import AsyncSelect from "react-select/async";
 import Select from "react-select";
@@ -48,7 +49,7 @@ const INITIAL_STATE = {
   preventUnBlock: false
 };
 
-const PromtDialog = (props) => {
+const PromptDialog = (props) => {
   const { isDirtyField, isUnblock } = props;
   usePrompt("Are you sure you want to leave", isDirtyField && !isUnblock);
   return null;
@@ -247,13 +248,13 @@ function UserForm(props) {
 
   const disabledUserRoleField = () => {
     const userProps = getUserProfile();
-    let disabledUserRolefield;
+    let disabledUserRoleField;
     if (isEditView && userInfo) {
       if (userInfo.userSource == UserTypes.USER_EXTERNAL.value) {
-        disabledUserRolefield = true;
+        disabledUserRoleField = true;
       }
       if (userInfo.userSource == UserTypes.USER_FEDERATED.value) {
-        return (disabledUserRolefield = true);
+        return (disabledUserRoleField = true);
       }
       if (userProps.loginId != "admin") {
         if (userInfo.name != "admin") {
@@ -261,21 +262,21 @@ function UserForm(props) {
             userProps.userRoleList[0] == "ROLE_SYS_ADMIN" ||
             userProps.userRoleList[0] == "ROLE_KEY_ADMIN"
           ) {
-            disabledUserRolefield = false;
+            disabledUserRoleField = false;
           } else {
-            disabledUserRolefield = true;
+            disabledUserRoleField = true;
           }
         } else {
-          disabledUserRolefield = true;
+          disabledUserRoleField = true;
         }
       } else {
-        disabledUserRolefield = false;
+        disabledUserRoleField = false;
       }
       if (userInfo.name == userProps.loginId) {
-        disabledUserRolefield = true;
+        disabledUserRoleField = true;
       }
     }
-    return disabledUserRolefield;
+    return disabledUserRoleField;
   };
 
   const userRoleListData = () => {
@@ -294,10 +295,9 @@ function UserForm(props) {
     let formValueObj = {};
     if (isEditView && userInfo) {
       formValueObj.name = userInfo.name;
-      formValueObj.firstName = userInfo.firstName;
-      formValueObj.lastName = userInfo.lastName;
+      formValueObj.firstName = userInfo?.firstName?.trim();
+      formValueObj.lastName = userInfo?.lastName?.trim();
       formValueObj.emailAddress = userInfo.emailAddress;
-      formValueObj.firstName = userInfo.firstName;
     }
     if (userInfo && userInfo.userRoleList) {
       formValueObj.userRoleList = {
@@ -427,7 +427,7 @@ function UserForm(props) {
           dirty
         }) => (
           <div className="wrap user-role-grp-form">
-            <PromtDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
+            <PromptDialog isDirtyField={dirty} isUnblock={preventUnBlock} />
             <form
               onSubmit={(event) => {
                 handleSubmit(event);
@@ -455,6 +455,7 @@ function UserForm(props) {
                         }
                         disabled={isEditView ? true : false}
                         data-cy="name"
+                        onBlur={(e) => trimInputValue(e, input)}
                       />
                       <InfoIcon
                         css="input-box-info-icon"
@@ -505,7 +506,7 @@ function UserForm(props) {
                             >
                               {
                                 RegexMessage.MESSAGE
-                                  .passwordvalidationinfomessage
+                                  .passwordValidationInfoMessage
                               }
                             </p>
                           }
@@ -557,7 +558,7 @@ function UserForm(props) {
                             >
                               {
                                 RegexMessage.MESSAGE
-                                  .passwordvalidationinfomessage
+                                  .passwordValidationInfoMessage
                               }
                             </p>
                           }
@@ -598,6 +599,7 @@ function UserForm(props) {
                             : false
                         }
                         data-cy="firstName"
+                        onBlur={(e) => trimInputValue(e, input)}
                       />
                       <InfoIcon
                         css="input-box-info-icon"
@@ -635,6 +637,7 @@ function UserForm(props) {
                             : false
                         }
                         data-cy="lastName"
+                        onBlur={(e) => trimInputValue(e, input)}
                       />
                       <InfoIcon
                         css="input-box-info-icon"
@@ -683,7 +686,7 @@ function UserForm(props) {
                         css="input-box-info-icon"
                         position="right"
                         message={
-                          RegexMessage.MESSAGE.emailvalidationinfomessage
+                          RegexMessage.MESSAGE.emailValidationInfoMessage
                         }
                       />
 
diff --git a/security-admin/src/main/webapp/react-webapp/src/views/UserProfile.jsx b/security-admin/src/main/webapp/react-webapp/src/views/UserProfile.jsx
index a1c3df29a0..ff8267271c 100644
--- a/security-admin/src/main/webapp/react-webapp/src/views/UserProfile.jsx
+++ b/security-admin/src/main/webapp/react-webapp/src/views/UserProfile.jsx
@@ -23,7 +23,11 @@ import { Form, Field } from "react-final-form";
 import { toast } from "react-toastify";
 import { getUserProfile, setUserProfile } from "Utils/appState";
 import { isSystemAdmin, isKeyAdmin, InfoIcon } from "Utils/XAUtils";
-import { BlockUi, scrollToError } from "../components/CommonComponents";
+import {
+  BlockUi,
+  scrollToError,
+  trimInputValue
+} from "Components/CommonComponents";
 import withRouter from "Hooks/withRouter";
 import { UserTypes, RegexValidation } from "Utils/XAEnums";
 import { cloneDeep, has, isEmpty } from "lodash";
@@ -102,7 +106,7 @@ class UserProfile extends Component {
         (error?.response?.data?.msgDesc == "serverMsg.userMgrOldPassword" ||
           error?.response?.data?.msgDesc == "serverMsg.userMgrNewPassword")
       ) {
-        toast.error("Error occured while updating user password!");
+        toast.error("Error occurred while updating user password!");
       }
       console.error(`Error occurred while updating user password! ${error}`);
     }
@@ -218,8 +222,8 @@ class UserProfile extends Component {
                     onSubmit={this.updateUserInfo}
                     validate={this.validateUserForm}
                     initialValues={{
-                      firstName: userProps.firstName,
-                      lastName: userProps.lastName,
+                      firstName: userProps?.firstName?.trim(),
+                      lastName: userProps?.lastName?.trim(),
                       emailAddress: userProps.emailAddress,
                       userRoleList: userProps.userRoleList[0]
                     }}
@@ -263,6 +267,7 @@ class UserProfile extends Component {
                                   }
                                   disabled={isUserAllowed}
                                   data-cy="firstName"
+                                  onBlur={(e) => trimInputValue(e, input)}
                                 />
                                 <InfoIcon
                                   css="input-box-info-icon"
@@ -306,6 +311,7 @@ class UserProfile extends Component {
                                   }
                                   disabled={isUserAllowed}
                                   data-cy="lastName"
+                                  onBlur={(e) => trimInputValue(e, input)}
                                 />
                                 <InfoIcon
                                   css="input-box-info-icon"
@@ -355,7 +361,7 @@ class UserProfile extends Component {
                                   position="right"
                                   message={
                                     RegexMessage.MESSAGE
-                                      .emailvalidationinfomessage
+                                      .emailValidationInfoMessage
                                   }
                                 />
                                 {meta.error && meta.touched && (