Web: Client: create MainContent component

packages/client/src/pages/PortalSettings/categories/security/audit-trail/index.js

@@ -1,57 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
-import Text from "@docspace/components/text";
 import { inject } from "mobx-react";
-import styled from "styled-components";
-import TextInput from "@docspace/components/text-input";
-import Button from "@docspace/components/button";
 import { Consumer } from "@docspace/components/utils/context";
-import StyledSaveCancelButtons from "@docspace/components/save-cancel-buttons";
 import { Table } from "./TableView/TableView";
 import AuditRowContainer from "./RowView/AuditRowContainer";
+import HistoryMainContent from "../sub-components/HistoryMainContent";
 
-const MainContainer = styled.div`
-  width: 100%;
-
-  .audit-content {
-    max-width: 700px;
-  }
-
-  .save-cancel {
-    padding: 0;
-    position: static;
-    display: block;
-  }
-
-  .login-subheader {
-    font-size: 13px;
-    color: #657077;
-  }
-
-  .latest-text {
-    font-size: 13px;
-    padding: 20px 0;
-  }
-
-  .storage-label {
-    font-weight: 600;
-  }
-
-  .audit-wrapper {
-    margin-top: 16px;
-    margin-bottom: 24px;
-    .table-container_header {
-      position: absolute;
-    }
-  }
-`;
-
-const StyledTextInput = styled(TextInput)`
-  margin-top: 4px;
-  margin-bottom: 24px;
-`;
 const AuditTrail = (props) => {
   const {
     t,
@@ -62,14 +18,9 @@ const AuditTrail = (props) => {
     setLifetimeAuditSettings,
     getLifetimeAuditSettings,
     getAuditTrailReport,
+    securityLifetime,
   } = props;
 
-  const [value, setValue] = useState("180");
-
-  const inputHandler = (e) => {
-    setValue(e.target.value);
-  };
-
   useEffect(() => {
     setDocumentTitle(t("AuditTrailNav"));
 
@@ -77,34 +28,10 @@ const AuditTrail = (props) => {
 
     getLifetimeAuditSettings();
   }, []);
-  return (
-    <MainContainer>
-      <div className="audit-content">
-        <Text fontSize="13px" color="#657077">
-          {t("AuditSubheader")}
-        </Text>
-        <Text className="latest-text">{t("LoginLatestText")} </Text>
-        <label className="storage-label" htmlFor="storage-period">
-          {t("StoragePeriod")}
-        </label>
-        <StyledTextInput
-          onChange={inputHandler}
-          value={value}
-          size="big"
-          id="storage-period"
-          type="text"
-        />
-        <div>
-          <StyledSaveCancelButtons
-            saveButtonLabel={t("Common:SaveButton")}
-            cancelButtonLabel={t("Common:CancelButton")}
-            className="save-cancel"
-            showReminder={true}
-          />
-        </div>
-        <Text className="latest-text">{t("AuditDownloadText")}</Text>
-      </div>
-      <div className="audit-wrapper">
+
+  const getContent = () => {
+    return (
+      <div className="content-wrapper">
         <Consumer>
           {(context) =>
             viewAs === "table" ? (
@@ -123,14 +50,27 @@ const AuditTrail = (props) => {
           }
         </Consumer>
       </div>
-      <Button
-        primary
-        isHovered
-        label="DownloadReport"
-        size="normal"
-        onClick={() => getAuditTrailReport()}
-      />
-    </MainContainer>
+    );
+  };
+  return (
+    <>
+      {securityLifetime && securityLifetime.auditTrailLifeTime && (
+        <HistoryMainContent
+          subHeader={t("AuditSubheader")}
+          latestText={t("LoginLatestText")}
+          storagePeriod={t("StoragePeriod")}
+          saveButtonLabel={t("Common:SaveButton")}
+          cancelButtonLabel={t("Common:CancelButton")}
+          downloadText={t("AuditDownloadText")}
+          securityLifetime={securityLifetime}
+          lifetime={securityLifetime.auditTrailLifeTime}
+          setLifetimeAuditSettings={setLifetimeAuditSettings}
+          content={getContent()}
+          downloadReport={t("DownloadReportBtn")}
+          getReport={getAuditTrailReport}
+        />
+      )}
+    </>
   );
 };
 
@@ -142,6 +82,7 @@ export default inject(({ setup, auth }) => {
     getLifetimeAuditSettings,
     setLifetimeAuditSettings,
     getAuditTrailReport,
+    securityLifetime,
   } = setup;
   const { theme } = auth.settingsStore;
 
@@ -153,5 +94,6 @@ export default inject(({ setup, auth }) => {
     getLifetimeAuditSettings,
     setLifetimeAuditSettings,
     getAuditTrailReport,
+    securityLifetime,
   };
 })(withTranslation("Settings")(withRouter(AuditTrail)));

packages/client/src/pages/PortalSettings/categories/security/login-history/index.js

@@ -1,57 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
 import { setDocumentTitle } from "SRC_DIR/helpers/utils";
-import Text from "@docspace/components/text";
 import { inject } from "mobx-react";
-import TextInput from "@docspace/components/text-input";
-import StyledSaveCancelButtons from "@docspace/components/save-cancel-buttons";
 import styled from "styled-components";
-import Button from "@docspace/components/button";
 import { Consumer } from "@docspace/components/utils/context";
 import { Table } from "./TableView/TableView";
 import HistoryRowContainer from "./RowView/HistoryRowContainer";
-
-const MainContainer = styled.div`
-  width: 100%;
-
-  .history-content {
-    max-width: 700px;
-  }
-
-  .save-cancel {
-    padding: 0;
-    position: static;
-    display: block;
-  }
-
-  .login-subheader {
-    font-size: 13px;
-    color: #657077;
-  }
-
-  .latest-text {
-    font-size: 13px;
-    padding: 20px 0;
-  }
-
-  .storage-label {
-    font-weight: 600;
-  }
-
-  .history-wrapper {
-    margin-top: 16px;
-    margin-bottom: 24px;
-    .table-container_header {
-      position: absolute;
-    }
-  }
-`;
-
-const StyledTextInput = styled(TextInput)`
-  margin-top: 4px;
-  margin-bottom: 24px;
-`;
+import HistoryMainContent from "../sub-components/HistoryMainContent";
 
 const LoginHistory = (props) => {
   const {
@@ -66,12 +22,6 @@ const LoginHistory = (props) => {
     securityLifetime,
   } = props;
 
-  const [loginLifeTime, setLoginLifeTime] = useState("180");
-
-  const inputHandler = (e) => {
-    setLoginLifeTime(e.target.value);
-  };
-
   useEffect(() => {
     setDocumentTitle(t("LoginHistoryTitle"));
 
@@ -79,73 +29,52 @@ const LoginHistory = (props) => {
     getLifetimeAuditSettings();
   }, []);
 
-  const setLifeTimeHandler = () => {
-    const data = {
-      settings: {
-        loginHistoryLifeTime: loginLifeTime,
-        auditTrailLifeTime: securityLifetime.auditTrailLifeTime,
-      },
-    };
-    setLifetimeAuditSettings(data);
+  const getContent = () => {
+    return (
+      <>
+        <div className="content-wrapper">
+          <Consumer>
+            {(context) =>
+              viewAs === "table" ? (
+                <>
+                  <Table
+                    theme={theme}
+                    historyUsers={historyUsers}
+                    sectionWidth={context.sectionWidth}
+                  />
+                </>
+              ) : (
+                <>
+                  <HistoryRowContainer sectionWidth={context.sectionWidth} />
+                </>
+              )
+            }
+          </Consumer>
+        </div>
+      </>
+    );
   };
 
   return (
-    <MainContainer>
-      <div className="history-content">
-        <Text fontSize="13px" color="#657077">
-          {t("LoginSubheaderTitle")}{" "}
-        </Text>
-        <Text className="latest-text">{t("LoginLatestText")} </Text>
-
-        <label className="storage-label" htmlFor="storage-period">
-          {t("StoragePeriod")}
-        </label>
-        <StyledTextInput
-          onChange={inputHandler}
-          value={loginLifeTime}
-          size="big"
-          id="storage-period"
-          type="text"
+    <>
+      {securityLifetime && securityLifetime.loginHistoryLifeTime && (
+        <HistoryMainContent
+          loginHistory={true}
+          subHeader={t("LoginSubheaderTitle")}
+          latestText={t("LoginLatestText")}
+          storagePeriod={t("StoragePeriod")}
+          saveButtonLabel={t("Common:SaveButton")}
+          cancelButtonLabel={t("Common:CancelButton")}
+          downloadText={t("LoginDownloadText")}
+          lifetime={securityLifetime.loginHistoryLifeTime}
+          securityLifetime={securityLifetime}
+          setLifetimeAuditSettings={setLifetimeAuditSettings}
+          content={getContent()}
+          downloadReport={t("DownloadReportBtn")}
+          getReport={getLoginHistoryReport}
         />
-        <div>
-          <StyledSaveCancelButtons
-            onSaveClick={setLifeTimeHandler}
-            saveButtonLabel={t("Common:SaveButton")}
-            cancelButtonLabel={t("Common:CancelButton")}
-            className="save-cancel"
-            showReminder={true}
-          />
-        </div>
-        <Text className="latest-text">{t("LoginDownloadText")}</Text>
-      </div>
-
-      <div className="history-wrapper">
-        <Consumer>
-          {(context) =>
-            viewAs === "table" ? (
-              <>
-                <Table
-                  theme={theme}
-                  historyUsers={historyUsers}
-                  sectionWidth={context.sectionWidth}
-                />
-              </>
-            ) : (
-              <>
-                <HistoryRowContainer sectionWidth={context.sectionWidth} />
-              </>
-            )
-          }
-        </Consumer>
-      </div>
-      <Button
-        primary
-        isHovered
-        label={t("DownloadReportBtn")}
-        size="normal"
-        onClick={() => getLoginHistoryReport()}
-      />
-    </MainContainer>
+      )}
+    </>
   );
 };
 

packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js

@@ -0,0 +1,140 @@
+import React, { useEffect, useState } from "react";
+import Text from "@docspace/components/text";
+
+import TextInput from "@docspace/components/text-input";
+import StyledSaveCancelButtons from "@docspace/components/save-cancel-buttons";
+import styled from "styled-components";
+import Button from "@docspace/components/button";
+
+const StyledTextInput = styled(TextInput)`
+  margin-top: 4px;
+  margin-bottom: 24px;
+`;
+
+const MainContainer = styled.div`
+  width: 100%;
+
+  .main-wrapper {
+    max-width: 700px;
+  }
+
+  .save-cancel {
+    padding: 0;
+    position: static;
+    display: block;
+  }
+
+  .login-subheader {
+    font-size: 13px;
+    color: #657077;
+  }
+
+  .latest-text {
+    font-size: 13px;
+    padding: 20px 0;
+  }
+
+  .storage-label {
+    font-weight: 600;
+  }
+
+  .content-wrapper {
+    margin-top: 16px;
+    margin-bottom: 24px;
+    .table-container_header {
+      position: absolute;
+      z-index: 1 !important;
+    }
+  }
+`;
+
+const HistoryMainContent = (props) => {
+  const {
+    loginHistory,
+    latestText,
+    subHeader,
+    storagePeriod,
+    lifetime,
+    saveButtonLabel,
+    cancelButtonLabel,
+    downloadText,
+    setLifetimeAuditSettings,
+    securityLifetime,
+    content,
+    downloadReport,
+    getReport,
+  } = props;
+
+  const [lifeTime, setLifeTime] = useState(String(lifetime) || "180");
+
+  const lifeTimeHandler = (e) => {
+    const reg = new RegExp(/^(\d){1,3}$/g);
+    const condition = e.target.value === "";
+    if ((e.target.value.match(reg) && e.target.value <= 180) || condition) {
+      setLifeTime(e.target.value);
+    }
+  };
+
+  const setLifeTimeSettings = () => {
+    if (loginHistory) {
+      const data = {
+        settings: {
+          loginHistoryLifeTime: lifeTime,
+          auditTrailLifeTime: securityLifetime.auditTrailLifeTime,
+        },
+      };
+      return setLifetimeAuditSettings(data);
+    }
+    const data = {
+      settings: {
+        loginHistoryLifeTime: securityLifetime.loginHistoryLifeTime,
+        auditTrailLifeTime: lifeTime,
+      },
+    };
+
+    return setLifetimeAuditSettings(data);
+  };
+
+  return (
+    <MainContainer>
+      <div className="main-wrapper">
+        <Text fontSize="13px" color="#657077">
+          {subHeader}
+        </Text>
+        <Text className="latest-text">{latestText} </Text>
+
+        <label className="storage-label" htmlFor="storage-period">
+          {storagePeriod}
+        </label>
+        <StyledTextInput
+          onChange={lifeTimeHandler}
+          value={lifeTime}
+          size="big"
+          id="storage-period"
+          type="text"
+        />
+        <div>
+          <StyledSaveCancelButtons
+            onSaveClick={setLifeTimeSettings}
+            onCancelClick={() => setLifeTime(lifetime)}
+            saveButtonLabel={saveButtonLabel}
+            cancelButtonLabel={cancelButtonLabel}
+            className="save-cancel"
+            showReminder={true}
+          />
+        </div>
+        <Text className="latest-text">{downloadText}</Text>
+      </div>
+      {content}
+      <Button
+        primary
+        isHovered
+        label={downloadReport}
+        size="normal"
+        onClick={() => getReport()}
+      />
+    </MainContainer>
+  );
+};
+
+export default HistoryMainContent;