Merge pull request #965 from OpenSignLabs/multiuser_issue

fix: change send email hint, email validation, remove underline from stamp and image modal

Author: prafull-opensignlabs

apps/OpenSign/public/static/js/public-template.bundle.js

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { saveAs } from "file-saver";
 import axios from "axios";
 import { getBase64FromUrl } from "../../constant/Utils";
-import { themeColor } from "../../constant/const";
+import { themeColor, emailRegex } from "../../constant/const";
 import printModule from "print-js";
 import Loader from "../../primitives/Loader";
 import ModalUi from "../../primitives/ModalUi";
@@ -19,8 +19,9 @@ function EmailComponent({
   activeMailAdapter
 }) {
   const [emailList, setEmailList] = useState([]);
-  const [emailValue, setEmailValue] = useState();
+  const [emailValue, setEmailValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [emailErr, setEmailErr] = useState(false);
   //function for send email
   const sendEmail = async () => {
     setIsLoading(true);
@@ -111,17 +112,30 @@ function EmailComponent({
   //function for get email value
   const handleEmailValue = (e) => {
     const value = e.target.value;
+    setEmailErr(false);
     setEmailValue(value);
   };
 
   //function for save email in array after press enter
   const handleEnterPress = (e) => {
+    const pattern = emailRegex;
+    const validate = emailValue?.match(pattern);
     if (e.key === "Enter" && emailValue) {
-      setEmailList((prev) => [...prev, emailValue]);
-      setEmailValue("");
+      if (validate) {
+        const emailLowerCase = emailValue?.toLowerCase();
+        setEmailList((prev) => [...prev, emailLowerCase]);
+        setEmailValue("");
+      } else {
+        setEmailErr(true);
+      }
     } else if (e === "add" && emailValue) {
-      setEmailList((prev) => [...prev, emailValue]);
-      setEmailValue("");
+      if (validate) {
+        const emailLowerCase = emailValue?.toLowerCase();
+        setEmailList((prev) => [...prev, emailLowerCase]);
+        setEmailValue("");
+      } else {
+        setEmailErr(true);
+      }
     }
   };
 
@@ -179,7 +193,6 @@ function EmailComponent({
               Successfully signed!
             </span>
             <div className="flex flex-row">
-              <div></div>
               {!isAndroid && (
                 <button
                   onClick={handleToPrint}
@@ -203,72 +216,63 @@ function EmailComponent({
               Recipients added here will get a copy of the signed document.
             </p>
             {emailList.length > 0 ? (
-              <>
-                <div className="p-0 border-[1.5px] op-border-primary rounded w-full text-[15px]">
-                  <div className="flex flex-row flex-wrap">
-                    {emailList.map((data, ind) => {
-                      return (
-                        <div
-                          className="flex flex-row items-center op-bg-primary m-[4px] rounded-md py-[5px] px-[10px]"
-                          key={ind}
+              <div className="p-0 border-[1.5px] op-border-primary rounded w-full text-[15px]">
+                <div className="flex flex-row flex-wrap">
+                  {emailList.map((data, ind) => {
+                    return (
+                      <div
+                        className="flex flex-row items-center op-bg-primary m-[4px] rounded-md py-[5px] px-[10px]"
+                        key={ind}
+                      >
+                        <span className="text-base-100 text-[13px]">
+                          {data}
+                        </span>
+                        <span
+                          className="text-base-100 text-[13px] font-semibold ml-[7px] cursor-pointer"
+                          onClick={() => removeChip(ind)}
                         >
-                          <span className="text-base-100 text-[13px]">
-                            {data}
-                          </span>
-                          <span
-                            className="text-base-100 text-[13px] font-semibold ml-[7px] cursor-pointer"
-                            onClick={() => removeChip(ind)}
-                          >
-                            <i className="fa-light fa-xmark"></i>
-                          </span>
-                        </div>
-                      );
-                    })}
-                  </div>
-                  {emailList.length <= 9 && (
-                    <input
-                      type="text"
-                      value={emailValue}
-                      className="p-[10px] pb-[20px] rounded w-full text-[15px] bg-transparent outline-none"
-                      onChange={handleEmailValue}
-                      onKeyDown={handleEnterPress}
-                      onBlur={() => {
-                        if (emailValue) {
-                          handleEnterPress("add");
-                        }
-                      }}
-                      required
-                    />
-                  )}
+                          <i className="fa-light fa-xmark"></i>
+                        </span>
+                      </div>
+                    );
+                  })}
                 </div>
-              </>
+                {emailList.length <= 9 && (
+                  <input
+                    type="email"
+                    value={emailValue}
+                    className="p-[10px] pb-[20px] rounded w-full text-[15px] bg-transparent outline-none"
+                    onChange={handleEmailValue}
+                    onKeyDown={handleEnterPress}
+                    onBlur={() => emailValue && handleEnterPress("add")}
+                    required
+                  />
+                )}
+              </div>
             ) : (
               <div>
                 <input
-                  type="text"
+                  type="email"
                   value={emailValue}
                   className="p-[10px] pb-[20px] rounded w-full text-[15px] outline-none bg-transparent border-[1.5px] op-border-primary"
                   onChange={handleEmailValue}
                   onKeyDown={handleEnterPress}
-                  placeholder="Add the email addresses"
-                  onBlur={() => {
-                    if (emailValue) {
-                      handleEnterPress("add");
-                    }
-                  }}
+                  placeholder="Add an email address and hit enter"
+                  onBlur={() => emailValue && handleEnterPress("add")}
                   required
                 />
               </div>
             )}
+            {emailErr && (
+              <p className="text-xs text-[red] ml-1.5 mt-0.5">
+                please provide correct email address
+              </p>
+            )}
             <button
               className={`${
                 emailValue ? "cursor-pointer" : "cursor-default"
               } op-btn op-btn-primary op-btn-sm m-2 shadow-md`}
-              onClick={() => {
-                if (emailValue) {
-                  handleEnterPress("add");
-                }
-              }}
+              onClick={() => emailValue && handleEnterPress("add")}
             >
               <i className="fa-light fa-plus" aria-hidden="true"></i>
             </button>

apps/OpenSign/src/components/pdf/EmailComponent.js

@@ -13,6 +13,7 @@ import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import "../../styles/signature.css";
 import RegexParser from "regex-parser";
+import { emailRegex } from "../../constant/const";
 const textWidgetCls =
   "w-full h-full md:min-w-full md:min-h-full z-[999] text-[12px] rounded-[2px] border-[1px] border-[#007bff] overflow-hidden resize-none outline-none text-base-content item-center whitespace-pre-wrap";
 const selectWidgetCls =
@@ -61,7 +62,7 @@ function PlaceholderType(props) {
     if (validateType && validateType !== "text") {
       switch (validateType) {
         case "email":
-          regexValidation = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+          regexValidation = emailRegex;
           validateExpression(regexValidation);
           break;
         case "number":

apps/OpenSign/src/components/pdf/PlaceholderType.js

@@ -149,7 +149,6 @@ function SignPad({
       const isWidgetType = currWidgetsDetails?.type;
       const signatureType = currWidgetsDetails?.signatureType;
       const url = currWidgetsDetails?.SignUrl;
-
       //checking widget type and draw type signature url
       if (isInitial) {
         if (isWidgetType === "initials" && signatureType === "draw" && url) {
@@ -299,8 +298,9 @@ function SignPad({
                 <div className="flex flex-row justify-between mt-[3px]">
                   <div className="flex flex-row justify-between gap-[5px] md:gap-[8px] text-[11px] md:text-base">
                     {isStamp ? (
-                      <span className="op-link-primary op-link">
-                        {widgetType === "image"
+                      <span className="text-base-content font-bold text-lg">
+                        {widgetType === "image" ||
+                        currWidgetsDetails?.type === "image"
                           ? "Upload image"
                           : "Upload stamp image"}
                       </span>

apps/OpenSign/src/components/pdf/SignPad.js

@@ -3,6 +3,7 @@ export const templateCls = "contracts_Template";
 export const documentCls = "contracts_Document";
 export const themeColor = "#47a3ad";
 export const iconColor = "#686968";
+export const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
 export const isEnableSubscription = true;
 // process.env.REACT_APP_ENABLE_SUBSCRIPTION &&
 // process.env.REACT_APP_ENABLE_SUBSCRIPTION?.toLowerCase() === "true"