From 47c5618fb6279f8d1fe7ab874b73878668620a97 Mon Sep 17 00:00:00 2001
From: SteveGT96 <steve.tsala@intesys.it>
Date: Fri, 29 Nov 2024 11:04:29 +0100
Subject: [PATCH] update(OH2-443): Refactor user / group reset/cancel
 operations

---
 .../admin/users/editGroup/EditGroup.tsx       | 78 +++++++++++++++----
 .../admin/users/editGroup/styles.scss         | 33 +++++++-
 .../admin/users/editUser/EditUserForm.tsx     | 65 +++++++++++++---
 .../admin/users/editUser/styles.scss          | 27 +++++++
 .../admin/users/newGroup/NewGroup.tsx         | 65 +++++++++++++---
 .../admin/users/newGroup/styles.scss          | 27 +++++++
 .../admin/users/newUser/NewUser.tsx           | 65 +++++++++++++---
 .../admin/users/newUser/styles.scss           | 27 +++++++
 src/resources/i18n/en.json                    |  4 +-
 9 files changed, 344 insertions(+), 47 deletions(-)

diff --git a/src/components/accessories/admin/users/editGroup/EditGroup.tsx b/src/components/accessories/admin/users/editGroup/EditGroup.tsx
index 8563e118e..e71f18c8f 100644
--- a/src/components/accessories/admin/users/editGroup/EditGroup.tsx
+++ b/src/components/accessories/admin/users/editGroup/EditGroup.tsx
@@ -15,6 +15,7 @@ import TextField from "../../../textField/TextField";
 import { PATHS } from "../../../../../consts";
 import { usePermission } from "../../../../../libraries/permissionUtils/usePermission";
 
+import { Cancel } from "@mui/icons-material";
 import { CircularProgress } from "@mui/material";
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
 import { PermissionDTO } from "generated/models/PermissionDTO";
@@ -45,6 +46,8 @@ export const EditGroup = () => {
 
   const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
 
+  const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false);
+
   const update = useAppSelector((state) => state.usergroups.update);
   const permissions = useAppSelector((state) => state.permissions.getAll);
   const group = useAppSelector((state) => state.usergroups.currentGroup);
@@ -133,10 +136,29 @@ export const EditGroup = () => {
     };
   }, []);
 
-  const handleResetConfirmation = () => {
+  const handleResetConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenResetConfirmation(value);
+    },
+    [setOpenResetConfirmation]
+  );
+
+  const handleCancelConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenCancelConfirmation(value);
+    },
+    [setOpenCancelConfirmation]
+  );
+
+  const handleResetConfirmation = useCallback(() => {
     setOpenResetConfirmation(false);
+    resetForm();
+  }, [navigate, resetForm, setOpenResetConfirmation]);
+
+  const handleCancelConfirmation = useCallback(() => {
+    setOpenCancelConfirmation(false);
     navigate(-1);
-  };
+  }, [navigate, setOpenCancelConfirmation]);
 
   const handleCheckboxChange = useCallback(
     (fieldName: string) => (value: boolean) => {
@@ -168,10 +190,24 @@ export const EditGroup = () => {
       permissions.isLoading ? (
         <CircularProgress style={{ marginLeft: "50%", position: "relative" }} />
       ) : (
-        <div className="newGroupForm">
-          <form className="newGroupForm__form" onSubmit={handleSubmit}>
+        <div className="editGroupForm">
+          <div className="editGroupForm__header">
+            <div className="editGroupForm__actions">
+              <Button
+                dataCy="cancel-form"
+                onClick={handleCancelConfirmationDialog(true)}
+                type="button"
+                variant="contained"
+                color="primary"
+              >
+                <Cancel fontSize="small" />
+                {t("common.discard")}
+              </Button>
+            </div>
+          </div>
+          <form className="editGroupForm__form" onSubmit={handleSubmit}>
             <div className="row start-sm center-xs">
-              <div className="newGroupForm__item fullWidth">
+              <div className="editGroupForm__item fullWidth">
                 <TextField
                   field={getFieldProps("code")}
                   theme="regular"
@@ -183,7 +219,7 @@ export const EditGroup = () => {
                   disabled
                 />
               </div>
-              <div className="newGroupForm__item fullWidth">
+              <div className="editGroupForm__item fullWidth">
                 <TextField
                   field={getFieldProps("desc")}
                   theme="regular"
@@ -194,7 +230,7 @@ export const EditGroup = () => {
                 />
               </div>
             </div>
-            <div className="newGroupForm__item fullWidth">
+            <div className="editGroupForm__item fullWidth">
               <CheckboxField
                 fieldName={"deleted"}
                 checked={!!values.deleted}
@@ -212,7 +248,7 @@ export const EditGroup = () => {
               />
             )}
 
-            <div className="newGroupForm__item fullWidth">
+            <div className="editGroupForm__item fullWidth">
               {isPermissionEditorAvailable &&
                 updatedPermissionsStack.length > 0 && (
                   <p>
@@ -249,7 +285,7 @@ export const EditGroup = () => {
               )}
             </div>
 
-            <div className="newGroupForm__buttonSet">
+            <div className="editGroupForm__buttonSet">
               <div className="submit_button">
                 <Button
                   type="submit"
@@ -265,26 +301,36 @@ export const EditGroup = () => {
               </div>
               <div className="reset_button">
                 <Button
-                  dataCy="cancel-form"
+                  dataCy="reset-form"
                   type="reset"
                   variant="text"
-                  disabled={update.isLoading}
-                  onClick={() => setOpenResetConfirmation(true)}
+                  disabled={update.isLoading || !dirty}
+                  onClick={handleResetConfirmationDialog(true)}
                 >
-                  {t("common.cancel")}
+                  {t("common.reset")}
                 </Button>
               </div>
             </div>
           </form>
           <ConfirmationDialog
-            isOpen={openResetConfirmation}
+            isOpen={openCancelConfirmation}
             title={t("common.cancel")}
-            info={t("common.resetform")}
+            info={t("common.cancelMessage")}
             icon={warningIcon}
             primaryButtonLabel={t("common.ok")}
             secondaryButtonLabel={t("common.discard")}
+            handlePrimaryButtonClick={handleCancelConfirmation}
+            handleSecondaryButtonClick={handleCancelConfirmationDialog(false)}
+          />
+          <ConfirmationDialog
+            isOpen={openResetConfirmation}
+            title={t("common.reset")}
+            info={t("common.resetform")}
+            icon={warningIcon}
+            primaryButtonLabel={t("common.ok")}
+            secondaryButtonLabel={t("common.back")}
             handlePrimaryButtonClick={handleResetConfirmation}
-            handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+            handleSecondaryButtonClick={handleResetConfirmationDialog(false)}
           />
           <ConfirmationDialog
             isOpen={update.hasSucceeded}
diff --git a/src/components/accessories/admin/users/editGroup/styles.scss b/src/components/accessories/admin/users/editGroup/styles.scss
index d80d731e0..e8855b1c6 100644
--- a/src/components/accessories/admin/users/editGroup/styles.scss
+++ b/src/components/accessories/admin/users/editGroup/styles.scss
@@ -1,7 +1,7 @@
 @import "../../../../../styles/variables";
 @import "../../../../../../node_modules/susy/sass/susy";
 
-.newGroupForm {
+.editGroupForm {
   display: inline-block;
   flex-direction: column;
   align-items: center;
@@ -15,7 +15,7 @@
     justify-content: space-between;
   }
 
-  .newGroupForm__item {
+  .editGroupForm__item {
     margin: 7px 0px;
     padding: 0px 15px;
     width: 50%;
@@ -57,7 +57,34 @@
     }
   }
 
-  .newGroupForm__buttonSet {
+  .editGroupForm__header {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 25px;
+    .editGroupForm__actions {
+      @include susy-media($smartphone_small) {
+        display: block;
+      }
+      & {
+        .MuiButton-label {
+          font-size: smaller;
+          letter-spacing: 1px;
+          font-weight: 600;
+        }
+        button {
+          @include susy-media($smartphone_small) {
+            width: 100%;
+            margin-top: 0px;
+          }
+        }
+      }
+    }
+  }
+
+  .editGroupForm__buttonSet {
     display: flex;
     margin-top: 25px;
     padding: 0px 15px;
diff --git a/src/components/accessories/admin/users/editUser/EditUserForm.tsx b/src/components/accessories/admin/users/editUser/EditUserForm.tsx
index 8d078b24f..262396d6f 100644
--- a/src/components/accessories/admin/users/editUser/EditUserForm.tsx
+++ b/src/components/accessories/admin/users/editUser/EditUserForm.tsx
@@ -18,6 +18,7 @@ import ConfirmationDialog from "../../../confirmationDialog/ConfirmationDialog";
 import InfoBox from "../../../infoBox/InfoBox";
 import TextField from "../../../textField/TextField";
 
+import { Cancel } from "@mui/icons-material";
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
 import { PATHS } from "../../../../../consts";
 import "./styles.scss";
@@ -47,6 +48,8 @@ export const EditUserForm = ({
 
   const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
 
+  const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false);
+
   const handleFormSubmit = (values: UserDTO & { passwd2: string }) => {
     const { passwd2, ...userDTO } = values;
     if (userDTO.passwd === undefined) {
@@ -65,6 +68,7 @@ export const EditUserForm = ({
     errors,
     touched,
     values,
+    resetForm,
     setFieldTouched,
     setFieldValue,
   } = useFormik<UserDTO & { passwd2: string }>({
@@ -73,10 +77,29 @@ export const EditUserForm = ({
     onSubmit: handleFormSubmit,
   });
 
-  const handleResetConfirmation = () => {
+  const handleResetConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenResetConfirmation(value);
+    },
+    [setOpenResetConfirmation]
+  );
+
+  const handleCancelConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenCancelConfirmation(value);
+    },
+    [setOpenCancelConfirmation]
+  );
+
+  const handleResetConfirmation = useCallback(() => {
     setOpenResetConfirmation(false);
+    resetForm();
+  }, [navigate, resetForm, setOpenResetConfirmation]);
+
+  const handleCancelConfirmation = useCallback(() => {
+    setOpenCancelConfirmation(false);
     navigate(-1);
-  };
+  }, [navigate, setOpenCancelConfirmation]);
 
   const handleCheckboxChange = useCallback(
     (fieldName: string) => (value: boolean) => {
@@ -87,6 +110,20 @@ export const EditUserForm = ({
 
   return (
     <div className="editUserForm">
+      <div className="editUserForm__header">
+        <div className="editUserForm__actions">
+          <Button
+            dataCy="cancel-form"
+            onClick={handleCancelConfirmationDialog(true)}
+            type="button"
+            variant="contained"
+            color="primary"
+          >
+            <Cancel fontSize="small" />
+            {t("common.discard")}
+          </Button>
+        </div>
+      </div>
       <form className="editUserForm__form" onSubmit={handleSubmit}>
         <div className="row start-sm center-xs">
           <div className="editUserForm__item fullWidth">
@@ -199,26 +236,36 @@ export const EditUserForm = ({
           </div>
           <div className="reset_button">
             <Button
-              dataCy="cancel-form"
+              dataCy="reset-form"
               type="reset"
               variant="text"
-              disabled={isLoading}
-              onClick={() => setOpenResetConfirmation(true)}
+              disabled={isLoading || !dirty}
+              onClick={handleResetConfirmationDialog(true)}
             >
-              {t("common.cancel")}
+              {t("common.reset")}
             </Button>
           </div>
         </div>
       </form>
       <ConfirmationDialog
-        isOpen={openResetConfirmation}
+        isOpen={openCancelConfirmation}
         title={t("common.cancel")}
-        info={t("common.resetform")}
+        info={t("common.cancelMessage")}
         icon={warningIcon}
         primaryButtonLabel={t("common.ok")}
         secondaryButtonLabel={t("common.discard")}
+        handlePrimaryButtonClick={handleCancelConfirmation}
+        handleSecondaryButtonClick={handleCancelConfirmationDialog(false)}
+      />
+      <ConfirmationDialog
+        isOpen={openResetConfirmation}
+        title={t("common.reset")}
+        info={t("common.resetform")}
+        icon={warningIcon}
+        primaryButtonLabel={t("common.ok")}
+        secondaryButtonLabel={t("common.back")}
         handlePrimaryButtonClick={handleResetConfirmation}
-        handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+        handleSecondaryButtonClick={handleResetConfirmationDialog(false)}
       />
       <ConfirmationDialog
         isOpen={hasSucceeded}
diff --git a/src/components/accessories/admin/users/editUser/styles.scss b/src/components/accessories/admin/users/editUser/styles.scss
index 6e957caac..ff3ec0f77 100644
--- a/src/components/accessories/admin/users/editUser/styles.scss
+++ b/src/components/accessories/admin/users/editUser/styles.scss
@@ -57,6 +57,33 @@
     }
   }
 
+  .editUserForm__header {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 25px;
+    .editUserForm__actions {
+      @include susy-media($smartphone_small) {
+        display: block;
+      }
+      & {
+        .MuiButton-label {
+          font-size: smaller;
+          letter-spacing: 1px;
+          font-weight: 600;
+        }
+        button {
+          @include susy-media($smartphone_small) {
+            width: 100%;
+            margin-top: 0px;
+          }
+        }
+      }
+    }
+  }
+
   .editUserForm__buttonSet {
     display: flex;
     margin-top: 25px;
diff --git a/src/components/accessories/admin/users/newGroup/NewGroup.tsx b/src/components/accessories/admin/users/newGroup/NewGroup.tsx
index b279ae533..f5385e2a9 100644
--- a/src/components/accessories/admin/users/newGroup/NewGroup.tsx
+++ b/src/components/accessories/admin/users/newGroup/NewGroup.tsx
@@ -14,6 +14,7 @@ import TextField from "../../../textField/TextField";
 import { PATHS } from "../../../../../consts";
 import { UserGroupDTO } from "../../../../../generated";
 
+import { Cancel } from "@mui/icons-material";
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
 import {
   createUserGroup,
@@ -35,6 +36,8 @@ export const NewGroup = () => {
 
   const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
 
+  const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false);
+
   const create = useAppSelector((state) => state.usergroups.create);
 
   const {
@@ -46,6 +49,7 @@ export const NewGroup = () => {
     errors,
     touched,
     values,
+    resetForm,
     setFieldValue,
   } = useFormik({
     initialValues,
@@ -61,10 +65,29 @@ export const NewGroup = () => {
     };
   }, [dispatch]);
 
-  const handleResetConfirmation = () => {
+  const handleResetConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenResetConfirmation(value);
+    },
+    [setOpenResetConfirmation]
+  );
+
+  const handleCancelConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenCancelConfirmation(value);
+    },
+    [setOpenCancelConfirmation]
+  );
+
+  const handleResetConfirmation = useCallback(() => {
     setOpenResetConfirmation(false);
+    resetForm();
+  }, [navigate, resetForm, setOpenResetConfirmation]);
+
+  const handleCancelConfirmation = useCallback(() => {
+    setOpenCancelConfirmation(false);
     navigate(-1);
-  };
+  }, [navigate, setOpenCancelConfirmation]);
 
   const handleCheckboxChange = useCallback(
     (fieldName: string) => (value: boolean) => {
@@ -75,6 +98,20 @@ export const NewGroup = () => {
 
   return (
     <div className="newGroupForm">
+      <div className="newGroupForm__header">
+        <div className="newGroupForm__actions">
+          <Button
+            dataCy="cancel-form"
+            onClick={handleCancelConfirmationDialog(true)}
+            type="button"
+            variant="contained"
+            color="primary"
+          >
+            <Cancel fontSize="small" />
+            {t("common.discard")}
+          </Button>
+        </div>
+      </div>
       <form className="newGroupForm__form" onSubmit={handleSubmit}>
         <div className="row start-sm center-xs">
           <div className="newGroupForm__item fullWidth">
@@ -130,26 +167,36 @@ export const NewGroup = () => {
           </div>
           <div className="reset_button">
             <Button
-              dataCy="cancel-form"
+              dataCy="reset-form"
               type="reset"
               variant="text"
-              disabled={create.isLoading}
-              onClick={() => setOpenResetConfirmation(true)}
+              disabled={create.isLoading || !dirty}
+              onClick={handleResetConfirmationDialog(true)}
             >
-              {t("common.cancel")}
+              {t("common.reset")}
             </Button>
           </div>
         </div>
       </form>
       <ConfirmationDialog
-        isOpen={openResetConfirmation}
+        isOpen={openCancelConfirmation}
         title={t("common.cancel")}
-        info={t("common.resetform")}
+        info={t("common.cancelMessage")}
         icon={warningIcon}
         primaryButtonLabel={t("common.ok")}
         secondaryButtonLabel={t("common.discard")}
+        handlePrimaryButtonClick={handleCancelConfirmation}
+        handleSecondaryButtonClick={handleCancelConfirmationDialog(false)}
+      />
+      <ConfirmationDialog
+        isOpen={openResetConfirmation}
+        title={t("common.reset")}
+        info={t("common.resetform")}
+        icon={warningIcon}
+        primaryButtonLabel={t("common.ok")}
+        secondaryButtonLabel={t("common.back")}
         handlePrimaryButtonClick={handleResetConfirmation}
-        handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+        handleSecondaryButtonClick={handleResetConfirmationDialog(false)}
       />
       <ConfirmationDialog
         isOpen={create.hasSucceeded}
diff --git a/src/components/accessories/admin/users/newGroup/styles.scss b/src/components/accessories/admin/users/newGroup/styles.scss
index 2acc97cbd..ecf30252f 100644
--- a/src/components/accessories/admin/users/newGroup/styles.scss
+++ b/src/components/accessories/admin/users/newGroup/styles.scss
@@ -57,6 +57,33 @@
     }
   }
 
+  .newGroupForm__header {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 25px;
+    .newGroupForm__actions {
+      @include susy-media($smartphone_small) {
+        display: block;
+      }
+      & {
+        .MuiButton-label {
+          font-size: smaller;
+          letter-spacing: 1px;
+          font-weight: 600;
+        }
+        button {
+          @include susy-media($smartphone_small) {
+            width: 100%;
+            margin-top: 0px;
+          }
+        }
+      }
+    }
+  }
+
   .newGroupForm__buttonSet {
     display: flex;
     margin-top: 25px;
diff --git a/src/components/accessories/admin/users/newUser/NewUser.tsx b/src/components/accessories/admin/users/newUser/NewUser.tsx
index 53a5c0564..634f06b9e 100644
--- a/src/components/accessories/admin/users/newUser/NewUser.tsx
+++ b/src/components/accessories/admin/users/newUser/NewUser.tsx
@@ -17,6 +17,7 @@ import TextField from "../../../textField/TextField";
 
 import { IState } from "../../../../../types";
 
+import { Cancel } from "@mui/icons-material";
 import CheckboxField from "components/accessories/checkboxField/CheckboxField";
 import { UserDTO } from "generated/models/UserDTO";
 import { UserGroupDTO } from "generated/models/UserGroupDTO";
@@ -43,6 +44,8 @@ export const NewUser = () => {
 
   const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
 
+  const [openCancelConfirmation, setOpenCancelConfirmation] = useState(false);
+
   const create = useAppSelector((state) => state.users.create);
 
   const userGroupsTypeState = useAppSelector(
@@ -60,6 +63,7 @@ export const NewUser = () => {
     errors,
     touched,
     values,
+    resetForm,
   } = useFormik<FormProps>({
     initialValues,
     validationSchema: userSchema(t),
@@ -80,10 +84,29 @@ export const NewUser = () => {
     };
   }, [create.hasSucceeded, dispatch, navigate]);
 
-  const handleResetConfirmation = () => {
+  const handleResetConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenResetConfirmation(value);
+    },
+    [setOpenResetConfirmation]
+  );
+
+  const handleCancelConfirmationDialog = useCallback(
+    (value: boolean) => () => {
+      setOpenCancelConfirmation(value);
+    },
+    [setOpenCancelConfirmation]
+  );
+
+  const handleResetConfirmation = useCallback(() => {
     setOpenResetConfirmation(false);
+    resetForm();
+  }, [navigate, resetForm, setOpenResetConfirmation]);
+
+  const handleCancelConfirmation = useCallback(() => {
+    setOpenCancelConfirmation(false);
     navigate(-1);
-  };
+  }, [navigate, setOpenCancelConfirmation]);
 
   const handleCheckboxChange = useCallback(
     (fieldName: string) => (value: boolean) => {
@@ -94,6 +117,20 @@ export const NewUser = () => {
 
   return (
     <div className="newUserForm">
+      <div className="newUserForm__header">
+        <div className="newUserForm__actions">
+          <Button
+            dataCy="cancel-form"
+            onClick={handleCancelConfirmationDialog(true)}
+            type="button"
+            variant="contained"
+            color="primary"
+          >
+            <Cancel fontSize="small" />
+            {t("common.discard")}
+          </Button>
+        </div>
+      </div>
       <form className="newUserForm__form" onSubmit={handleSubmit}>
         <div className="row start-sm center-xs">
           <div className="newUserForm__item fullWidth">
@@ -207,13 +244,13 @@ export const NewUser = () => {
           </div>
           <div className="reset_button">
             <Button
-              dataCy="cancel-form"
+              dataCy="reset-form"
               type="reset"
               variant="text"
-              disabled={create.isLoading}
-              onClick={() => setOpenResetConfirmation(true)}
+              disabled={create.isLoading || !dirty}
+              onClick={handleResetConfirmationDialog(true)}
             >
-              {t("common.cancel")}
+              {t("common.reset")}
             </Button>
           </div>
         </div>
@@ -229,14 +266,24 @@ export const NewUser = () => {
           handleSecondaryButtonClick={() => ({})}
         />
         <ConfirmationDialog
-          isOpen={openResetConfirmation}
+          isOpen={openCancelConfirmation}
           title={t("common.cancel")}
-          info={t("common.resetform")}
+          info={t("common.cancelMessage")}
           icon={warningIcon}
           primaryButtonLabel={t("common.ok")}
           secondaryButtonLabel={t("common.discard")}
+          handlePrimaryButtonClick={handleCancelConfirmation}
+          handleSecondaryButtonClick={handleCancelConfirmationDialog(false)}
+        />
+        <ConfirmationDialog
+          isOpen={openResetConfirmation}
+          title={t("common.reset")}
+          info={t("common.resetform")}
+          icon={warningIcon}
+          primaryButtonLabel={t("common.ok")}
+          secondaryButtonLabel={t("common.back")}
           handlePrimaryButtonClick={handleResetConfirmation}
-          handleSecondaryButtonClick={() => setOpenResetConfirmation(false)}
+          handleSecondaryButtonClick={handleResetConfirmationDialog(false)}
         />
         <ConfirmationDialog
           isOpen={create.hasFailed}
diff --git a/src/components/accessories/admin/users/newUser/styles.scss b/src/components/accessories/admin/users/newUser/styles.scss
index 0e248abf9..c37ce93a9 100644
--- a/src/components/accessories/admin/users/newUser/styles.scss
+++ b/src/components/accessories/admin/users/newUser/styles.scss
@@ -57,6 +57,33 @@
     }
   }
 
+  .newUserForm__header {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    margin-bottom: 25px;
+    .newUserForm__actions {
+      @include susy-media($smartphone_small) {
+        display: block;
+      }
+      & {
+        .MuiButton-label {
+          font-size: smaller;
+          letter-spacing: 1px;
+          font-weight: 600;
+        }
+        button {
+          @include susy-media($smartphone_small) {
+            width: 100%;
+            margin-top: 0px;
+          }
+        }
+      }
+    }
+  }
+
   .newUserForm__buttonSet {
     display: flex;
     margin-top: 25px;
diff --git a/src/resources/i18n/en.json b/src/resources/i18n/en.json
index eb1f69cea..4edc22d4a 100644
--- a/src/resources/i18n/en.json
+++ b/src/resources/i18n/en.json
@@ -573,7 +573,9 @@
     "restore": "Restore",
     "restoreConfirmation": "Are you sure to restore this item ?",
     "softDelete": "Mark as deleted",
-    "softDeleteConfirmation": "Are you sure to mark this item as deleted ?"
+    "softDeleteConfirmation": "Are you sure to mark this item as deleted ?",
+    "cancelMessage": "Are you sure to cancel this operation ? All unsaved data will be lost.",
+    "back": "Back"
   },
   "permission": {
     "denied": "Permission denied",