improve Form validation for add-user and some minor style fixes

frontend/src/components/Style.css

@@ -40,7 +40,7 @@ li.clickableUserDetails:hover {
 }
 
 .adminPageContent {
-  margin-left: 21%;
+  margin-left: 18%;
   margin-right: 1%;
 }
 

frontend/src/components/admin/userManagement/UserAddModify.js

@@ -56,6 +56,14 @@ function UserAddModify() {
   const intl = useIntl();
 
   const [saveButton, setSaveButton] = useState(true);
+  const [validation, setValidation] = useState({
+    validatepassword: false,
+    password: false,
+    password2: false,
+    loginName: false,
+    firstName: false,
+    secondName: false,
+  });
   const [isLoading, setIsLoading] = useState(true);
   const [isLocked, setIsLocked] = useState("radio-2");
   const [isDisabled, setIsDisabled] = useState("radio-4");
@@ -110,6 +118,14 @@ function UserAddModify() {
       setIsLoading(true);
     } else {
       setUserData(res);
+      setValidation({
+        validatepassword: true,
+        password: true,
+        password2: true,
+        loginName: true,
+        firstName: true,
+        secondName: true,
+      });
       var KeyList = [];
       Object.keys(res.selectedTestSectionLabUnits).map((key) =>
         KeyList.push(key),
@@ -277,6 +293,14 @@ function UserAddModify() {
         userDataShow.accountDisabled === "Y" ? "radio-3" : "radio-4",
       );
       setIsActive(userDataShow.accountActive === "Y" ? "radio-5" : "radio-6");
+      if (
+        userDataShow.userPassword &&
+        userDataShow.userPassword === userDataShow.confirmPassword
+      ) {
+        setValidation({ ...validation, validatepassword: true });
+      } else {
+        setValidation({ ...validation, validatepassword: false });
+      }
     }
   }, [userDataShow]);
 
@@ -365,9 +389,11 @@ function UserAddModify() {
         });
       }
       setSaveButton(true);
+      setValidation({ ...validation, loginName: false });
     } else {
       setNotificationVisible(false);
       setSaveButton(false);
+      setValidation({ ...validation, loginName: true });
       setUserDataPost((prevUserDataPost) => ({
         ...prevUserDataPost,
         userLoginName: value,
@@ -400,9 +426,11 @@ function UserAddModify() {
         });
       }
       setSaveButton(true);
+      setValidation({ ...validation, password: false });
     } else {
       setNotificationVisible(false);
       setSaveButton(false);
+      setValidation({ ...validation, password: true });
       setUserDataPost((prevUserDataPost) => ({
         ...prevUserDataPost,
         userPassword: value,
@@ -435,9 +463,11 @@ function UserAddModify() {
         });
       }
       setSaveButton(true);
+      setValidation({ ...validation, password2: false });
     } else {
       setNotificationVisible(false);
       setSaveButton(false);
+      setValidation({ ...validation, password2: true });
       setUserDataPost((prevUserDataPost) => ({
         ...prevUserDataPost,
         confirmPassword: value,
@@ -466,9 +496,11 @@ function UserAddModify() {
         });
       }
       setSaveButton(true);
+      setValidation({ ...validation, firstName: false });
     } else {
       setNotificationVisible(false);
       setSaveButton(false);
+      setValidation({ ...validation, firstName: true });
       setUserDataPost((prevUserDataPost) => ({
         ...prevUserDataPost,
         userFirstName: value,
@@ -497,13 +529,15 @@ function UserAddModify() {
         });
       }
       setSaveButton(true);
+      setValidation({ ...validation, secondName: false });
     } else {
       setNotificationVisible(false);
       setUserDataPost((prevUserDataPost) => ({
         ...prevUserDataPost,
         userLastName: value,
       }));
       setSaveButton(false);
+      setValidation({ ...validation, secondName: true });
     }
 
     setUserDataShow((prevUserData) => ({
@@ -514,6 +548,7 @@ function UserAddModify() {
 
   function handleExpirationDateChange(e) {
     setSaveButton(false);
+    setValidation({ ...validation, expDate: true });
     setUserDataPost((prevUserDataPost) => ({
       ...prevUserDataPost,
       expirationDate: e.target.value,
@@ -526,6 +561,7 @@ function UserAddModify() {
 
   function handleTimeoutChange(e) {
     setSaveButton(false);
+    setValidation({ ...validation, timeout: true });
     setUserDataPost((prevUserDataPost) => ({
       ...prevUserDataPost,
       timeout: e.target.value,
@@ -538,6 +574,7 @@ function UserAddModify() {
 
   function handleAccountActiveChange(e) {
     setSaveButton(false);
+    setValidation({ ...validation, active: true });
     setUserDataPost((prevUserDataPost) => ({
       ...prevUserDataPost,
       accountActive: e.target.value,
@@ -550,6 +587,7 @@ function UserAddModify() {
 
   function handleAccountDisabledChange(e) {
     setSaveButton(false);
+    setValidation({ ...validation, disabled: true });
     setUserDataPost((prevUserDataPost) => ({
       ...prevUserDataPost,
       accountDisabled: e.target.value,
@@ -562,6 +600,7 @@ function UserAddModify() {
 
   function handleAccountLockedChange(e) {
     setSaveButton(false);
+    setValidation({ ...validation, locked: true });
     setUserDataPost((prevUserDataPost) => ({
       ...prevUserDataPost,
       accountLocked: e.target.value,
@@ -575,12 +614,14 @@ function UserAddModify() {
   function handleCopyUserPermissionsChange() {
     if (copyUserPermission.length > 0) {
       setSaveButton(false);
+      setValidation({ ...validation, copy: true });
     }
   }
 
   function handleAutoCompleteCopyUserPermissionsChange(selectedUserId) {
     setCopyUserPermission(selectedUserId);
     setSaveButton(false);
+    setValidation({ ...validation, autoCopy: true });
   }
 
   function handleCopyUserPermissionsChangeClick() {
@@ -625,6 +666,7 @@ function UserAddModify() {
       selectedRoles: updatedRoles,
     }));
     setSaveButton(false);
+    setValidation({ ...validation, checkBox: true });
   }
 
   function handleTestSectionsSelectChange(e, key) {
@@ -658,6 +700,7 @@ function UserAddModify() {
 
     setSelectedTestSectionLabUnits(updatedTestSectionLabUnits);
     setSaveButton(false);
+    setValidation({ ...validation, testSection: true });
   }
 
   const addRoleToSelectedUnits = (key, roleIdToAdd) => {
@@ -667,6 +710,7 @@ function UserAddModify() {
       if (!currentRoles.includes(roleIdToAdd)) {
         updatedUnits[key] = [...currentRoles, roleIdToAdd];
         setSaveButton(false);
+        setValidation({ ...validation, role: true });
       }
       return updatedUnits;
     });
@@ -680,6 +724,7 @@ function UserAddModify() {
           (roleId) => roleId !== roleIdToRemove,
         );
         setSaveButton(false);
+        setValidation({ ...validation, removeSelected: true });
       }
       return updatedUnits;
     });
@@ -1295,6 +1340,7 @@ function UserAddModify() {
                               [key]: updatedRoles,
                             }));
                             setSaveButton(false);
+                            setValidation({ ...validation, selectedLab: true });
                           }}
                         />
                         <FormGroup
@@ -1366,7 +1412,9 @@ function UserAddModify() {
                 <Grid fullWidth={true}>
                   <Column lg={16} md={8} sm={4}>
                     <Button
-                      disabled={saveButton}
+                      disabled={Object.values(validation).some(
+                        (value) => !value,
+                      )}
                       onClick={userSavePostCall}
                       type="button"
                     >

frontend/src/components/notifications/PushNotificationPage.jsx

@@ -81,7 +81,16 @@ export default function PushNotificationPage() {
   return (
     <div className="adminPageContent">
       {notificationVisible === true ? <AlertDialog /> : ""}
-      <PageBreadCrumb breadcrumbs={[{ label: "home.label", link: "/" }]} />
+      <PageBreadCrumb
+        breadcrumbs={[
+          { label: "home.label", link: "/" },
+          { label: "breadcrums.admin.managment", link: "/MasterListsPage" },
+          {
+            label: "notify.main.title",
+            link: "/MasterListsPage#NotifyUser",
+          },
+        ]}
+      />
       <Grid fullWidth={true}>
         <Column lg={16} md={8} sm={4}>
           <Section>