added enter code instead ui

src/components/TwoFactorModal.tsx

@@ -4,13 +4,16 @@ import constants from 'utils/strings/constants';
 import MessageDialog from './MessageDialog';
 import { DeadCenter } from 'pages/gallery';
 import { Button } from 'react-bootstrap';
-import { setupTwoFactor, TwoFactorSector } from 'services/userService';
+import { setupTwoFactor, TwoFactorSecret } from 'services/userService';
 import styled from 'styled-components';
 import EnteSpinner from './EnteSpinner';
+import { CodeBlock, FreeFlowText } from './RecoveryKeyModal';
+import OtpInput from 'react-otp-input';
 
 const QRCode = styled.img`
 height:200px;
 width:200px;
+margin:20px;
 `;
 
 interface Props {
@@ -25,9 +28,9 @@ enum SetupMode {
 }
 function TwoFactorModal({ somethingWentWrong, ...props }: Props) {
     const [setupMode, setSetupMode] = useState<SetupMode>(SetupMode.QR_CODE);
-    const [twoFactorSecret, setTwoFactorSecret] = useState<TwoFactorSector>(null);
+    const [twoFactorSecret, setTwoFactorSecret] = useState<TwoFactorSecret>(null);
     useEffect(() => {
-        if (!props.show) {
+        if (!props.show || twoFactorSecret) {
             return;
         }
         const main = async () => {
@@ -41,14 +44,14 @@ function TwoFactorModal({ somethingWentWrong, ...props }: Props) {
         <MessageDialog
             {...props}
             attributes={{
-                title: constants.DOWNLOAD_RECOVERY_KEY,
+                title: constants.TWO_FACTOR_AUTHENTICATION,
                 close: {
-                    text: constants.SAVE_LATER,
+                    text: constants.CANCEL,
                     variant: 'danger',
                 },
                 staticBackdrop: true,
                 proceed: {
-                    text: constants.SAVE,
+                    text: constants.CONTINUE,
                     action: () => null,
                     disabled: false,
                     variant: 'success',
@@ -69,16 +72,25 @@ function TwoFactorModal({ somethingWentWrong, ...props }: Props) {
                 </>
             ) : (<>
                 <p>{constants.TWO_FACTOR_AUTHENTICATION_MANUAL_CODE_INSTRUCTION}</p>
-                <DeadCenter>
-                    <div style={{ width: '300px', height: '30px', backgroundColor: 'red', marginBottom: '10px' }}>
-                    </div>
+                <CodeBlock height={100}>
+                    {!twoFactorSecret ? <EnteSpinner /> : (
+                        <FreeFlowText>
+                            {twoFactorSecret.secretCode}
+                        </FreeFlowText>
+
+                    )}
+                </CodeBlock>
                 <Button block variant="link" onClick={() => setSetupMode(SetupMode.QR_CODE)}>
-                        {constants.ENTER_CODE_MANUALLY}
+                    {constants.SCAN_QR_CODE}
                 </Button>
-                </DeadCenter>
             </>
-            )
-            }
+            )}
+            {setupMode && <OtpInput
+                value={this.state.otp}
+                onChange={this.handleChange}
+                numInputs={6}
+                separator={<span>-</span>}
+            />}
         </MessageDialog >
     );
 }

src/utils/strings/englishConstants.tsx

@@ -402,6 +402,8 @@ const englishConstants = {
     TWO_FACTOR_AUTHENTICATION_QR_INSTRUCTION: 'please scan QR code below with your favorite authenticator app',
     ENTER_CODE_MANUALLY: 'enter the code manually',
     TWO_FACTOR_AUTHENTICATION_MANUAL_CODE_INSTRUCTION: 'please enter this code in your favorite authenticator app',
+    SCAN_QR_CODE: 'scan QR code instead',
+    CONTINUE: 'continue',
 
 };