Merge pull request #12 from OpenSignLabs/staging

Update

Author: raktima-opensignlabs

.env.example

@@ -47,3 +47,6 @@ [email protected]
 
 # Base64 encoded PFX or p12 document signing certificate file *********************************************************************************************************************
 PFX_BASE64=
+
+# Provide Pass pharse of above PFX or p12 document
+PASS_PHRASE= 

.env.local_dev

@@ -51,3 +51,6 @@ [email protected]
 
 # Base64 encoded PFX or p12 document signing certificate file *********************************************************************************************************************
 PFX_BASE64=
+
+# Provide Pass pharse of above PFX or p12 document
+PASS_PHRASE= 

apps/OpenSign/package.json

@@ -40,8 +40,8 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "mf-cra start",
-    "start-prod": "serve -s build",
+    "start": "serve -s build",
+    "start-dev": "mf-cra start",
     "build": "rm -rf public/mfbuild && npm run micro && CI=false && mf-cra build",
     "micro": "cd ../../microfrontends/SignDocuments && npm install && npm run build",
     "test": "react-scripts test",

apps/OpenSign/src/App.js

@@ -14,6 +14,7 @@ import PageNotFound from "./routes/PageNotFound";
 import ForgetPassword from "./routes/ForgetPassword";
 import ChangePassword from "./routes/ChangePassword";
 import ReportMicroapp from "./components/ReportMicroapp";
+import LoadMf from "./routes/LoadMf";
 
 function App() {
   const [isloading, setIsLoading] = useState(true);
@@ -59,6 +60,7 @@ function App() {
           <Routes>
             <Route exact path="/" element={<Login />} />
             <Route exact path="/signup" element={<Signup />} />
+            <Route exact path="/loadmf/:remoteApp/*" element={<LoadMf />} />
             <Route exact path="/forgetpassword" element={<ForgetPassword />} />
             {process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
               <>

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -93,7 +93,7 @@ const ReportTable = ({
           {List?.length > 0 ? (
             <>
               {currentLists.map((item, index) => (
-                <tr className="border-t-[1px]" key={index}>
+                <tr className="border-y-[1px]" key={index}>
                   <td className="px-4 py-2">{index + 1}</td>
                   <td className="px-4 py-2 font-semibold">{item?.Name} </td>
                   <td className="px-4 py-2">{item?.Note || "-"}</td>
@@ -153,7 +153,7 @@ const ReportTable = ({
           )}
         </tbody>
       </table>
-      <div className="flex flex-wrap items-center gap-2 p-2 border-t-[1px]">
+      <div className="flex flex-wrap items-center gap-2 p-2 ">
         {List.length > 10 && (
           <>
             {currentPage > 1 && (

apps/OpenSign/src/routes/LoadMf.js

@@ -0,0 +1,84 @@
+import { Suspense } from "react";
+import { useParams } from "react-router-dom";
+import useFederatedComponent from "mf-cra";
+import React from "react";
+import Title from "../components/Title";
+function RemoteApp({ app }) {
+  // console.log("app ", app);
+  const { Component: RemoteComponent } = useFederatedComponent(app);
+  // console.log("RemoteComponent ", RemoteComponent);
+  return (
+    <>
+      <Title title={app.remoteName} />
+      <Suspense
+        fallback={
+          <div style={{ height: "300px" }}>
+            <div
+              style={{
+                marginLeft: "45%",
+                marginTop: "150px",
+                fontSize: "45px",
+                color: "#3dd3e0"
+              }}
+              className="loader-37"
+            ></div>
+          </div>
+        }
+      >
+        <div
+          style={{
+            boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.33)",
+            backgroundColor: "#ffffff",
+            width: "100%",
+            overflow: "hidden",
+            borderRadius: 3,
+            minHeight: "70vh"
+          }}
+        >
+          {RemoteComponent && <RemoteComponent />}
+        </div>
+      </Suspense>
+    </>
+  );
+}
+function checkObjectProperties(obj) {
+  // Check if all three properties exist in the object
+  if (
+    obj &&
+    obj.remoteName !== undefined &&
+    obj.remoteUrl !== undefined &&
+    obj.moduleToLoad !== undefined
+  ) {
+    return true; // All properties are present
+  } else {
+    return false; // At least one property is missing
+  }
+}
+export default function RemoteAppContainer() {
+  const { remoteApp } = useParams();
+
+  const obj = {
+    remoteUrl: window.location.origin + "/mfbuild/remoteEntry.js",
+    moduleToLoad: "./AppRoutes",
+    remoteName: remoteApp
+  };
+  // console.log("obj ", obj);
+  const isMf = checkObjectProperties(obj);
+  if (isMf) {
+    const appToLoad = obj;
+    return <RemoteApp app={appToLoad} />;
+  } else {
+    return (
+      <div className="flex items-center justify-center h-screen w-full bg-white rounded">
+        <div className="text-center">
+          <h1 className="text-[60px] lg:text-[120px] font-semibold text-black">
+            404
+          </h1>
+          <p className="text-[30px] lg:text-[50px] text-black">
+            Page Not Found
+          </p>
+        </div>
+      </div>
+    );
+  }
+}

apps/OpenSign/src/routes/Login.js

@@ -744,7 +744,7 @@ function Login(props) {
   };
 
   const GetLoginData = async () => {
-    setState({...state, loading: true})
+    setState({ ...state, loading: true })
     try {
       Parse.serverURL = localStorage.getItem("baseUrl");
       Parse.initialize(localStorage.getItem("parseAppId"));
@@ -925,6 +925,7 @@ function Login(props) {
       <Title title={"Login Page"} />
       {state.loading && (
         <div
+          aria-live="assertive"
           style={{
             position: "fixed",
             width: "100vw",
@@ -936,63 +937,66 @@ function Login(props) {
           }}
         >
           <div
+            role="status"
             style={{
               position: "fixed",
               fontSize: "50px",
               color: "#3ac9d6",
               top: "50%",
-              left: "45%"
+              left: "50%",
+              transform: 'translate(-50%, -50%)'
             }}
             className="loader-37"
-          ></div>
+          >
+            <span className="sr-only">Loading...</span>
+          </div>
         </div>
       )}
       {props.isloginVisible && props.isloginVisible ? (
-        <div>
+        <div aria-labelledby="loginHeading" role="region">
           <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
             <div className="w-[250px] h-[66px] inline-block">
               {state.hideNav ? (
-                <img src={image} width="100%" alt="" />
+                <img src={image} width="100%" alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly." />
               ) : (
-                <img src={image} width="100%" alt="" />
+                <img src={image} width="100%" alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly." />
               )}
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
-              <div className="">
+              <div>
                 <div>
-                  <form onSubmit={handleSubmit}>
-                    <h2 className="text-[30px] mt-6">Welcome Back !</h2>
-                    <span className="text-[12px] text-[#878787]">
-                      Login to your account
-                    </span>
-                    <div className="shadow-md rounded my-4">
+                  <form onSubmit={handleSubmit} aria-label="Login Form">
+                    <h1 className="text-[30px] mt-6">Welcome Back!</h1>
+                    <fieldset className="outline outline-1 outline-slate-300/50 my-4">
+                      <legend className="text-xs font-bold px-6 mt-4">Login to your account</legend>
                       <div className="px-6 py-4">
-                        <label className="block text-xs">Username</label>
+                        <label className="block text-xs" htmlFor="email">Username</label>
                         <input
+                          id="email"
                           type="text"
-                          className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                          className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
                           name="email"
                           value={state.email}
                           onChange={handleChange}
                           required
                         />
                         <hr className="my-2 border-none" />
-                        <label className="block text-xs">Password</label>
+                        <label className="block text-xs" htmlFor="password">Password</label>
                         <div className="relative">
                           <input
+                            id="password"
                             type={state.passwordVisible ? "text" : "password"}
-                            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
                             name="password"
                             value={state.password}
                             onChange={handleChange}
                             required
                           />
                           <span
-                            className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${
-                              state.passwordVisible
-                                ? "text-[#007bff]"
-                                : "text-black"
-                            }`}
+                            className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${state.passwordVisible
+                              ? "text-[#007bff]"
+                              : "text-black"
+                              }`}
                             onClick={togglePasswordVisibility}
                           >
                             {state.passwordVisible ? (
@@ -1003,32 +1007,32 @@ function Login(props) {
                           </span>
                         </div>
                       </div>
-                    </div>
-                    <div className="flex flex-row justify-between items-center text-xs px-4 py-2">
+                    </fieldset>
+                    <div className="flex flex-row justify-between items-center px-4 py-2">
                       <div>
-                        <label className="form-check-label">
+                        <label className="form-check-label inline-block cursor-pointer" htmlFor="rememberpassword">
                           <input
                             type="checkbox"
-                            className="form-check-input"
+                            className="form-check-input mr-2"
                             value=""
+                            id="rememberpassword"
                           />
-                          <span className="text-center pl-1">
-                            Remember Password
-                          </span>
+                          <span className="text-[13px] pl-1">Remember Password</span>
                         </label>
                       </div>
                       <div>
-                        <span className="text-[13px]">
-                          <NavLink to={`/forgetpassword`}>
-                            Forgot Password ?
-                          </NavLink>
-                        </span>
+                        <NavLink
+                          to="/forgetpassword"
+                          className="text-[13px] underline focus:outline-none focus:ring-2 focus:ring-blue-600"
+                        >
+                          Forgot Password?
+                        </NavLink>
                       </div>
                     </div>
                     <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
                       <button
                         type="submit"
-                        className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow uppercase"
+                        className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow outline-none uppercase focus:ring-2 focus:ring-blue-600"
                         disabled={state.loading}
                       >
                         {state.loading ? "Loading..." : "Login"}
@@ -1093,7 +1097,7 @@ function Login(props) {
                     }}
                   >
                     {props.appInfo.googleClietId &&
-                    props.appInfo.googleClietId !== "" ? (
+                      props.appInfo.googleClietId !== "" ? (
                       <GoogleSignInBtn
                         GoogleCred={props.appInfo.googleClietId}
                         thirdpartyLoginfn={thirdpartyLoginfn}
@@ -1107,14 +1111,18 @@ function Login(props) {
               {!state.hideNav && (
                 <div className="self-center">
                   <div className="mx-auto md:w-[300px] lg:w-[500px]">
-                    <img src={login_img} alt="bisec" width="100%" />
+                    <img src={login_img} alt="The image illustrates a person from behind, seated at a desk with a four-monitor computer setup, in an environment with a light blue and white color scheme, featuring a potted plant to the right." width="100%" />
                   </div>
                 </div>
               )}
             </div>
           </div>
 
-          <div id="snackbar" style={{ backgroundColor: state.toastColor }}>
+          <div
+            id="snackbar"
+            role="alert"
+            style={{ backgroundColor: state.toastColor }}
+          >
             {state.toastDescription}
           </div>
         </div>

apps/OpenSign/src/routes/PlanSubscriptions.js

@@ -64,7 +64,7 @@ const PlanSubscriptions = () => {
           style={{
             backgroundColor: "white",
             overflowY: "auto",
-            maxHeight: "600px",
+            maxHeight: "100%",
             "--theme-color": "#7952b3",
             "--plan-width": 30
           }}

apps/OpenSignServer/cloud/parsefunction/pdf/SignPDF.min.cjs

@@ -1 +1 @@
-const signer=require("node-signpdf").default;class SignPDF{constructor(e,t){this.pdfDoc=e,this.certificate=t}async signPDF(){return signer.sign(this.pdfDoc,this.certificate,{passphrase:"emudhra"})}static unit8ToBuffer(e){var t=Buffer.alloc(e.byteLength),r=new Uint8Array(e);for(let e=0;e<t.length;++e)t[e]=r[e];return t}}module.exports=SignPDF;
+const signer=require("node-signpdf").default;class SignPDF{constructor(e,t){this.pdfDoc=e,this.certificate=t}async signPDF(){return signer.sign(this.pdfDoc,this.certificate, process.env.PASS_PHRASE ? {passphrase : process.env.PASS_PHRASE}:  null)}static unit8ToBuffer(e){var t=Buffer.alloc(e.byteLength),r=new Uint8Array(e);for(let e=0;e<t.length;++e)t[e]=r[e];return t}}module.exports=SignPDF;

microfrontends/SignDocuments/src/Component/PageNotFound.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+const PageNotFound = () => {
+  return (
+    <div className="flex items-center justify-center h-screen w-full bg-white rounded">
+      <div className="text-center">
+        <h1 className="text-[60px] lg:text-[120px] font-semibold text-black">
+          404
+        </h1>
+        <p className="text-[30px] lg:text-[50px] text-black">Page Not Found</p>
+      </div>
+    </div>
+  );
+};
+
+export default PageNotFound;