beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

added enter code instead ui

Browse source
This commit is contained in:
Abhinav-grd 2021-06-18 10:22:24 +05:30
parent 38e0c05f44
commit 6d0e60e60b
2 changed files with 30 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/components/TwoFactorModal.tsx
View file

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

2
src/utils/strings/englishConstants.tsx
View file

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