From b35d8406a304826c149f497ff6de28525a8e1dbd Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 13 Feb 2024 20:04:22 +0530 Subject: [PATCH] fix: input text validation issue --- .../src/Component/PdfRequestFiles.js | 4 +- .../src/Component/SignYourselfPdf.js | 6 +- .../src/Component/TemplatePlaceholder.js | 87 +++------------- .../WidgetComponent/inputValidation.js | 84 ++++++++++++++++ .../Component/WidgetComponent/placeholder.js | 39 +++----- .../WidgetComponent/placeholderType.js | 99 ++++++++++++++----- .../Component/component/PlaceholderCopy.js | 1 + .../Component/component/fieldsComponent.js | 11 ++- .../src/Component/placeHolderSign.js | 83 +++------------- .../SignDocuments/src/css/signature.css | 33 +++++-- .../SignDocuments/src/utils/Utils.js | 3 +- 11 files changed, 241 insertions(+), 209 deletions(-) create mode 100644 microfrontends/SignDocuments/src/Component/WidgetComponent/inputValidation.js diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 9b42adc29..14bcae234 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -1059,7 +1059,9 @@ function PdfRequestFiles() { }} >
-

Please input a properly validated input value.

+

+ The input does not meet the criteria set by the regular expression. +

data.pageNumber === pageNumber ); - const dragTypeValue = item?.text ? item.text : monitor.type; - const widgetValue = getWidgetValue(dragTypeValue); const widgetWidth = defaultWidthHeight(dragTypeValue).width; const widgetHeight = defaultWidthHeight(dragTypeValue).height; @@ -437,9 +435,7 @@ function SignYourSelf() { dragTypeValue === "job title" || dragTypeValue === "email" ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight - : dragTypeValue === "initials" - ? defaultWidthHeight(dragTypeValue).height - : "" + : defaultWidthHeight(dragTypeValue).height }; dropData.push(dropObj); diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 7f7db0941..891ad4938 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -35,6 +35,7 @@ import PlaceholderCopy from "./component/PlaceholderCopy"; import ModalComponent from "./component/modalComponent"; import TourContentWithBtn from "../premitives/TourContentWithBtn"; import DropdownWidgetOption from "./WidgetComponent/dropdownWidgetOption"; +import InputValidation from "./WidgetComponent/inputValidation"; const TemplatePlaceholder = () => { const navigate = useNavigate(); const { templateId } = useParams(); @@ -1028,7 +1029,7 @@ const TemplatePlaceholder = () => { const getXYdata = getPageNumer[0].pos; const getPosData = getXYdata; - const addSignPos = getPosData.map((position, ind) => { + const addSignPos = getPosData.map((position) => { if (position.key === signKey) { if (widgetType === "checkbox") { if (selectRequiredType === "Read only") { @@ -1053,13 +1054,13 @@ const TemplatePlaceholder = () => { return position; }); - const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + const newUpdateSignPos = getPlaceHolder.map((obj) => { if (obj.pageNumber === pageNumber) { return { ...obj, pos: addSignPos }; } return obj; }); - const newUpdateSigner = signerPos.map((obj, ind) => { + const newUpdateSigner = signerPos.map((obj) => { if (obj.Id === uniqueId) { return { ...obj, placeHolder: newUpdateSignPos }; } @@ -1147,19 +1148,8 @@ const TemplatePlaceholder = () => { }; const handleValidateInput = (e) => { - if ( - textValidate === "email" || - textValidate === "number" || - textValidate === "text" - ) { - handleApplyWidgetsStatus(textValidate); - setIsValidate(false); - } else { - setValidateError("please enter accurate validation."); - setTimeout(() => { - setValidateError(""); - }, 1500); - } + handleApplyWidgetsStatus(textValidate); + setIsValidate(false); }; return (
@@ -1331,62 +1321,13 @@ const TemplatePlaceholder = () => {
- { - setIsValidate(false); - }} - title={"Validation"} - > -
-
- - - setTextValidate(e.target.value)} - /> - {validateError && ( -

- {validateError} -

- )} -
- -
- -
- + { initial={true} setIsDraggingEnable={setIsDraggingEnable} isdraggingEnable={isdraggingEnable} + isTemplateFlow={true} />
) : ( @@ -1554,6 +1496,7 @@ const TemplatePlaceholder = () => { initial={true} setIsDraggingEnable={setIsDraggingEnable} isdraggingEnable={isdraggingEnable} + isTemplateFlow={true} />
diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/inputValidation.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/inputValidation.js new file mode 100644 index 000000000..4ab12db1a --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/inputValidation.js @@ -0,0 +1,84 @@ +import React from "react"; +import { themeColor } from "../../utils/ThemeColor/backColor"; +import ModalUi from "../../premitives/ModalUi"; + +function InputValidation(props) { + const options = ["email", "number", "text"]; + return ( + { + props.setIsValidate(false); + }} + title={"Validation"} + > +
+
+ + +
+ props.setTextValidate(e.target.value)} + /> + +
+ {/* {validateError && ( +

{validateError}

+ )} */} + + {/* */} +
+ +
+ +
+ + ); +} + +export default InputValidation; diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js index ba28a59d7..18e13a144 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js @@ -169,16 +169,9 @@ function Placeholder(props) { <> {props.isPlaceholder && ( <> - {[ - "checkbox", - "text", - "email", - "name", - "company", - "job title", - "dropdown", - "radio" - ].includes(props.pos.type) && ( + {["checkbox", "text", "dropdown", "radio"].includes( + props.pos.type + ) && ( { e.stopPropagation(); @@ -217,21 +210,11 @@ function Placeholder(props) { style={{ color: "#188ae2", right: - props.pos.type === "text" || - props.pos.type === "email" || - props.pos.type === "name" || - props.pos.type === "company" || - props.pos.type === "job title" || - props.pos.type === "dropdown" + props.pos.type === "text" || props.pos.type === "dropdown" ? "49px" : "23px", top: - props.pos.type === "text" || - props.pos.type === "email" || - props.pos.type === "name" || - props.pos.type === "company" || - props.pos.type === "job title" || - props.pos.type === "dropdown" + props.pos.type === "text" || props.pos.type === "dropdown" ? "-17px" : "-28px" }} @@ -334,6 +317,7 @@ function Placeholder(props) { onClick={(e) => { if (props.data) { props.setSignerObjId(props.data.signerObjId); + props.setUniqueId(props.data.Id); } e.stopPropagation(); props.setIsPageCopy(true); @@ -342,6 +326,7 @@ function Placeholder(props) { onTouchEnd={(e) => { if (props.data) { props.setSignerObjId(props.data.signerObjId); + props.setUniqueId(props.data.Id); } e.stopPropagation(); props.setIsPageCopy(true); @@ -430,9 +415,6 @@ function Placeholder(props) { bounds="parent" className="signYourselfBlock" style={{ - // borderRadius:"50%", - // display:"flex", - // alignItem:"center", border: "1px solid #007bff", borderRadius: "2px", textAlign: @@ -446,7 +428,12 @@ function Placeholder(props) { ? "pointer" : "not-allowed" : "all-scroll", - zIndex: "1", + zIndex: + props.pos.type === "date" + ? "99" + : props?.pos?.zIndex + ? props.pos.zIndex + : "5", background: props.data ? props.data.blockColor : "rgb(203 233 237)" }} onDrag={() => { diff --git a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js index 1830eba27..c579bbd60 100644 --- a/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js +++ b/microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js @@ -10,6 +10,7 @@ function PlaceholderType(props) { const [startDate, setStartDate] = useState(new Date()); const [validatePlaceholder, setValidatePlaceholder] = useState(""); const inputRef = useRef(null); + const [textValue, setTextValue] = useState(""); const [inputValue, setInputValue] = useState(""); const [isCheckedRadio, setIsCheckedRadio] = useState({ isChecked: false, @@ -17,7 +18,8 @@ function PlaceholderType(props) { }); const validateExpression = (regexValidation) => { - let isValidate = regexValidation.test(inputValue); + const regexObject = new RegExp(regexValidation); + let isValidate = regexObject.test(inputValue); if (!isValidate) { props.setValidateAlert(true); inputRef.current.focus(); @@ -42,10 +44,18 @@ function PlaceholderType(props) { regexValidation = /^[a-zA-Z\s]+$/; validateExpression(regexValidation); break; + default: + regexValidation = validateType; + validateExpression(regexValidation); } } }; + const handleTextValid = (e, regx) => { + const textInput = e.target.value; + const sanitizedValue = textInput.replace(regx, ""); + setTextValue(sanitizedValue); + }; function checkRegularExpress(validateType) { switch (validateType) { case "email": @@ -56,6 +66,8 @@ function PlaceholderType(props) { break; case "text": setValidatePlaceholder("enter text"); + default: + setValidatePlaceholder(validateType); } } useEffect(() => { @@ -125,7 +137,7 @@ function PlaceholderType(props) { const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
@@ -153,6 +165,11 @@ function PlaceholderType(props) { } }, [type]); + const calculateFontSize = () => { + const fontSize = 10 + Math.min(props.pos.Width, props.pos.Height) * 0.1; + const size = fontSize ? fontSize : 12; + return size + "px"; + }; switch (props.pos.type) { case "signature": return props.pos.SignUrl ? ( @@ -169,6 +186,7 @@ function PlaceholderType(props) {
{ + // props.pos?.validation && handleTextValid(e, props.pos?.validation); setInputValue(e.target.value); onChangeInput( e.target.value, @@ -292,7 +317,10 @@ function PlaceholderType(props) { })} ) : ( -
+
{props.pos.widgetName ? props.pos.widgetName : props.pos.type}
); @@ -329,11 +357,17 @@ function PlaceholderType(props) { tabIndex="0" ref={inputRef} placeholder={"name"} + style={{ fontSize: calculateFontSize() }} className="inputPlaceholder" type="text" - value={props.pos.widgetValue} + value={ + textValue + ? textValue + : props.pos.widgetValue && props.pos.widgetValue + } onBlur={handleInputBlur} - onChange={(e) => + onChange={(e) => { + handleTextValid(e, /[^a-zA-Z\s]/g); onChangeInput( e.target.value, props.pos.key, @@ -342,14 +376,14 @@ function PlaceholderType(props) { props.setXyPostion, props.data && props.data?.Id, false - ) - } + ); + }} /> ) : (
{props.pos.type} @@ -364,9 +398,15 @@ function PlaceholderType(props) { type="text" ref={inputRef} placeholder={"company"} - value={props.pos.widgetValue && props.pos.widgetValue} + style={{ fontSize: calculateFontSize() }} + value={ + textValue + ? textValue + : props.pos.widgetValue && props.pos.widgetValue + } onBlur={handleInputBlur} - onChange={(e) => + onChange={(e) => { + handleTextValid(e, /[^a-zA-Z\s]/g); onChangeInput( e.target.value, props.pos.key, @@ -375,14 +415,14 @@ function PlaceholderType(props) { props.setXyPostion, props.data && props.data?.Id, false - ) - } + ); + }} /> ) : (
{props.pos.type} @@ -397,9 +437,15 @@ function PlaceholderType(props) { type="text" ref={inputRef} placeholder={"job title"} - value={props.pos.widgetValue && props.pos.widgetValue} + style={{ fontSize: calculateFontSize() }} + value={ + textValue + ? textValue + : props.pos.widgetValue && props.pos.widgetValue + } onBlur={handleInputBlur} - onChange={(e) => + onChange={(e) => { + handleTextValid(e, /[^a-zA-Z\s]/g); onChangeInput( e.target.value, props.pos.key, @@ -408,14 +454,14 @@ function PlaceholderType(props) { props.setXyPostion, props.data && props.data?.Id, false - ) - } + ); + }} /> ) : (
{props.pos.type} @@ -452,7 +498,6 @@ function PlaceholderType(props) { : "dd MMMM, YYYY" } /> - {/*
{props.selectDate}
*/}
); @@ -489,9 +534,15 @@ function PlaceholderType(props) { type="text" ref={inputRef} placeholder={"email"} - value={props.pos.widgetValue && props.pos.widgetValue} + style={{ fontSize: calculateFontSize() }} + value={ + textValue + ? textValue + : props.pos.widgetValue && props.pos.widgetValue + } onBlur={handleInputBlur} - onChange={(e) => + onChange={(e) => { + handleTextValid(e, /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/); onChangeInput( e.target.value, props.pos.key, @@ -500,14 +551,14 @@ function PlaceholderType(props) { props.setXyPostion, props.data && props.data?.Id, false - ) - } + ); + }} /> ) : (
{props.pos.type} diff --git a/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js b/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js index 3a9049ade..d952ea0a6 100644 --- a/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js +++ b/microfrontends/SignDocuments/src/Component/component/PlaceholderCopy.js @@ -66,6 +66,7 @@ function PlaceholderCopy(props) { let newPageNumber = 1; const signerPosition = props.xyPostion; const signerId = props.signerObjId ? props.signerObjId : props.Id; + //handle placeholder array and copy for multiple signers placeholder at requested location if (signerId) { //get current signers data diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index e8fc48f03..da91713b2 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -21,7 +21,6 @@ function FieldsComponent({ setContractName, isSigners, dataTut, - dataTut2, isMailSend, handleAddSigner, setUniqueId, @@ -31,7 +30,8 @@ function FieldsComponent({ handleRoleChange, handleOnBlur, title, - isdraggingEnable + isdraggingEnable, + isTemplateFlow }) { const [isSignersModal, setIsSignersModal] = useState(false); @@ -230,7 +230,12 @@ function FieldsComponent({ (data) => data.type !== "dropdown" && data.type !== "radio" && data.type !== "label" ); - const updateWidgets = isSignYourself ? filterWidgets : widget; + const labelWidget = widget.filter((data) => data.type !== "label"); + const updateWidgets = isSignYourself + ? filterWidgets + : isTemplateFlow + ? labelWidget + : widget; return ( <> diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 284902836..b7c83aa10 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -36,6 +36,7 @@ import Title from "./component/Title"; import TourContentWithBtn from "../premitives/TourContentWithBtn"; import ModalUi from "../premitives/ModalUi"; import DropdownWidgetOption from "../Component/WidgetComponent/dropdownWidgetOption"; +import InputValidation from "./WidgetComponent/inputValidation"; function PlaceHolderSign() { const navigate = useNavigate(); @@ -1176,6 +1177,7 @@ function PlaceHolderSign() { //function for base on condition to add checkbox widget status and input text validation in signerPos array const handleApplyWidgetsStatus = (textValidate) => { let regularExpression = textValidate; + const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); if (filterSignerPos.length > 0) { const getPlaceHolder = filterSignerPos[0].placeHolder; @@ -1228,25 +1230,14 @@ function PlaceHolderSign() { setSignerPos(newUpdateSigner); setIsCheckboxRequired(false); - + setTextValidate(""); setSelectRequiredType("Optional"); } } }; const handleValidateInput = (e) => { - if ( - textValidate === "email" || - textValidate === "number" || - textValidate === "text" - ) { - handleApplyWidgetsStatus(textValidate); - setIsValidate(false); - } else { - setValidateError("please enter accurate validation."); - setTimeout(() => { - setValidateError(""); - }, 1500); - } + handleApplyWidgetsStatus(textValidate); + setIsValidate(false); }; return ( @@ -1523,63 +1514,13 @@ function PlaceHolderSign() {
- { - setIsValidate(false); - }} - title={"Validation"} - > -
-
- - - setTextValidate(e.target.value)} - /> - {validateError && ( -

- {validateError} -

- )} -
- -
- -
- - + { return obj; case "date": obj = { - width: 120, + width: 100, height: 20 }; return obj; @@ -939,6 +939,7 @@ export const multiSignEmbed = async ( imgData.type === "initials" || imgData.type === "image" ) { + console.log(images[id]); if ( (imgData.ImageType && imgData.ImageType === "image/png") || imgData.ImageType === "image/jpeg"