Client: Profile: init login settings

packages/client/src/pages/Profile/Section/Body/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import { withRouter } from "react-router";
 import { withTranslation } from "react-i18next";
@@ -8,31 +8,87 @@ import Loaders from "@docspace/common/components/Loaders";
 import withPeopleLoader from "../../../../HOCs/withPeopleLoader";
 
 import MainProfile from "./sub-components/main-profile";
+import LoginSettings from "./sub-components/login-settings";
 
 const Wrapper = styled.div`
   max-width: 660px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
 `;
 
 const SectionBodyContent = (props) => {
-  const { t, profile, culture } = props;
+  const {
+    t,
+    profile,
+    culture,
+    resetTfaApp,
+    getNewBackupCodes,
+    backupCodes,
+    backupCodesCount,
+    setBackupCodes,
+    getTfaType,
+    getBackupCodes,
+  } = props;
+  const [tfa, setTfa] = useState(false);
+
+  const fetchData = async () => {
+    const type = await getTfaType();
+    setTfa(type);
+    if (type && type !== "none") {
+      const codes = await getBackupCodes();
+      setBackupCodes(codes);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   return (
     <Wrapper>
       <MainProfile t={t} profile={profile} culture={culture} />
+      {tfa && tfa !== "none" && (
+        <LoginSettings
+          t={t}
+          profile={profile}
+          resetTfaApp={resetTfaApp}
+          getNewBackupCodes={getNewBackupCodes}
+          backupCodes={backupCodes}
+          backupCodesCount={backupCodesCount}
+          setBackupCodes={setBackupCodes}
+        />
+      )}
     </Wrapper>
   );
 };
 
 export default withRouter(
   inject(({ auth, peopleStore }) => {
-    const { settingsStore } = auth;
+    const { settingsStore, tfaStore } = auth;
     const { culture } = settingsStore;
 
     const { targetUserStore } = peopleStore;
     const { targetUser: profile } = targetUserStore;
 
+    const {
+      getBackupCodes,
+      getNewBackupCodes,
+      unlinkApp: resetTfaApp,
+      getTfaType,
+      backupCodes,
+      setBackupCodes,
+    } = tfaStore;
+
     return {
       profile,
       culture,
+      getBackupCodes,
+      getNewBackupCodes,
+      resetTfaApp,
+      getTfaType,
+      backupCodes,
+      setBackupCodes,
     };
   })(
     observer(

packages/client/src/pages/Profile/Section/Body/sub-components/login-settings/index.js

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+import Text from "@docspace/components/text";
+import Button from "@docspace/components/button";
+import Link from "@docspace/components/link";
+
+import {
+  ResetApplicationDialog,
+  BackupCodesDialog,
+} from "../../../../../../components/dialogs";
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .actions {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+`;
+
+const LoginSettings = (props) => {
+  const {
+    t,
+    profile,
+    resetTfaApp,
+    getNewBackupCodes,
+    backupCodes,
+    backupCodesCount,
+    setBackupCodes,
+  } = props;
+  const [resetAppDialogVisible, setResetAppDialogVisible] = useState(false);
+  const [backupCodesDialogVisible, setBackupCodesDialogVisible] = useState(
+    false
+  );
+
+  return (
+    <StyledWrapper>
+      <div className="header">
+        <Text fontSize="16px" fontWeight={700}>
+          {t("LoginSettings")}
+        </Text>
+        <Text color="#A3A9AE">{t("TwoFactorDescription")}</Text>
+      </div>
+      <div className="actions">
+        <Button
+          label={t("ShowBackupCodes")}
+          onClick={() => setBackupCodesDialogVisible(true)}
+          size="small"
+        />
+        <Link
+          fontWeight="600"
+          isHovered
+          type="action"
+          onClick={() => setResetAppDialogVisible(true)}
+        >
+          {t("Common:ResetApplication")}
+        </Link>
+      </div>
+
+      {resetAppDialogVisible && (
+        <ResetApplicationDialog
+          visible={resetAppDialogVisible}
+          onClose={() => setResetAppDialogVisible(false)}
+          resetTfaApp={resetTfaApp}
+          id={profile.id}
+        />
+      )}
+      {backupCodesDialogVisible && (
+        <BackupCodesDialog
+          visible={backupCodesDialogVisible}
+          onClose={() => setBackupCodesDialogVisible(false)}
+          getNewBackupCodes={getNewBackupCodes}
+          backupCodes={backupCodes}
+          backupCodesCount={backupCodesCount}
+          setBackupCodes={setBackupCodes}
+        />
+      )}
+    </StyledWrapper>
+  );
+};
+
+export default LoginSettings;