Web: People: get tfa backup codes

products/ASC.People/Client/src/components/dialogs/BackupCodesDialog/index.js

@@ -9,8 +9,15 @@ import ModalDialogContainer from "../ModalDialogContainer";
 class BackupCodesDialogComponent extends React.Component {
   constructor(props) {
     super(props);
+    this.state = { backupCodes: this.props.getBackupCodes() };
   }
 
+  getNewBackupCodes = () => {
+    const { getBackupCodes } = this.props;
+    const newCodes = getBackupCodes();
+    this.setState({ backupCodes: newCodes });
+  };
+
   printPage = () => {
     const { t } = this.props;
     const printContent = document.getElementById("backup-codes-print-content");
@@ -29,9 +36,10 @@ class BackupCodesDialogComponent extends React.Component {
 
   render() {
     console.log("Render BackupCodesDialog");
+    const { backupCodes } = this.state;
     const { t, visible, onClose } = this.props;
     const count = 5; //TODO: get count from api
-    const codes = ["qdf45g", "fg56dfg", "ugi8fm", "gfuti8f", "fkuidop"]; //TODO: get codes from api
+    //const codes = ["qdf45g", "fg56dfg", "ugi8fm", "gfuti8f", "fkuidop"]; //TODO: get codes from api
 
     return (
       <ModalDialogContainer>
@@ -55,7 +63,7 @@ class BackupCodesDialogComponent extends React.Component {
                 </Text>
               </Trans>
               <Text className="text-dialog" isBold={true}>
-                {codes.map((item) => {
+                {backupCodes.map((item) => {
                   return (
                     <strong key={item}>
                       {item} <br />
@@ -79,6 +87,7 @@ class BackupCodesDialogComponent extends React.Component {
               label={t("RequestNewButton")}
               size="medium"
               primary={false}
+              onClick={this.getNewBackupCodes}
             />
           </ModalDialog.Footer>
         </ModalDialog>
@@ -94,6 +103,7 @@ const BackupCodesDialog = withTranslation("BackupCodesDialog")(
 BackupCodesDialog.propTypes = {
   visible: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
+  getBackupCodes: PropTypes.func.isRequired,
 };
 
 export default BackupCodesDialog;

products/ASC.People/Client/src/pages/Profile/Section/Body/index.js

@@ -443,6 +443,7 @@ class SectionBodyContent extends React.PureComponent {
           <BackupCodesDialog
             visible={backupCodesDialogVisible}
             onClose={this.toggleBackupCodesDialogVisible}
+            getBackupCodes={this.props.getBackupCodes}
           />
         )}
       </ProfileWrapper>
@@ -466,5 +467,6 @@ export default withRouter(
     setProviders: peopleStore.usersStore.setProviders,
     getOAuthToken: auth.settingsStore.getOAuthToken,
     getLoginLink: auth.settingsStore.getLoginLink,
+    getBackupCodes: auth.tfaStore.getTfaNewBackupCodes,
   }))(observer(withTranslation("Profile")(SectionBodyContent)))
 );