update codeblock and move to new file
This commit is contained in:
parent
3ca08bd4f6
commit
8498ae54c0
90
src/components/CodeBlock.tsx
Normal file
90
src/components/CodeBlock.tsx
Normal file
|
@ -0,0 +1,90 @@
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { IconButton } from './Container';
|
||||||
|
import CopyIcon from './icons/CopyIcon';
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Tooltip, OverlayTrigger } from 'react-bootstrap';
|
||||||
|
import TickIcon from './icons/TickIcon';
|
||||||
|
import EnteSpinner from './EnteSpinner';
|
||||||
|
|
||||||
|
const Wrapper = styled.div`
|
||||||
|
position: relative;
|
||||||
|
`;
|
||||||
|
const CopyButtonWrapper = styled(IconButton)`
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
background: none !important;
|
||||||
|
margin: 10px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const CodeWrapper = styled.div<{ height?: string }>`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #1a1919;
|
||||||
|
height: ${(props) => props.height};
|
||||||
|
padding: 37px 40px 20px 20px;
|
||||||
|
color: white;
|
||||||
|
margin: 20px 0;
|
||||||
|
width: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const FreeFlowText = styled.div`
|
||||||
|
word-wrap: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
min-width: 30%;
|
||||||
|
text-align: left;
|
||||||
|
`;
|
||||||
|
|
||||||
|
type Iprops = React.PropsWithChildren<{
|
||||||
|
code: string;
|
||||||
|
height?: string;
|
||||||
|
}>;
|
||||||
|
export const CodeBlock = (props: Iprops) => {
|
||||||
|
const [copied, setCopied] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const copyToClipboardHelper = (text: string) => () => {
|
||||||
|
navigator.clipboard.writeText(text);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 1000);
|
||||||
|
};
|
||||||
|
const RenderCopiedMessage = (props) => {
|
||||||
|
const { style, ...rest } = props;
|
||||||
|
return (
|
||||||
|
<Tooltip
|
||||||
|
{...rest}
|
||||||
|
style={{ ...style, zIndex: 2001 }}
|
||||||
|
id="button-tooltip">
|
||||||
|
copied
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Wrapper>
|
||||||
|
<CodeWrapper height={props?.height || 'auto'}>
|
||||||
|
{props.code ? (
|
||||||
|
<FreeFlowText>{props.code}</FreeFlowText>
|
||||||
|
) : (
|
||||||
|
<EnteSpinner />
|
||||||
|
)}
|
||||||
|
</CodeWrapper>
|
||||||
|
{props.code && (
|
||||||
|
<OverlayTrigger
|
||||||
|
show={copied}
|
||||||
|
placement="bottom"
|
||||||
|
trigger={'click'}
|
||||||
|
overlay={RenderCopiedMessage}
|
||||||
|
delay={{ show: 200, hide: 800 }}>
|
||||||
|
<CopyButtonWrapper
|
||||||
|
onClick={copyToClipboardHelper(props.code)}
|
||||||
|
style={{
|
||||||
|
background: 'none',
|
||||||
|
...(copied ? { color: '#51cd7c' } : {}),
|
||||||
|
}}>
|
||||||
|
{copied ? <TickIcon /> : <CopyIcon />}
|
||||||
|
</CopyButtonWrapper>
|
||||||
|
</OverlayTrigger>
|
||||||
|
)}
|
||||||
|
</Wrapper>
|
||||||
|
);
|
||||||
|
};
|
|
@ -3,30 +3,11 @@ import { downloadAsFile } from 'utils/file';
|
||||||
import { getRecoveryKey } from 'utils/crypto';
|
import { getRecoveryKey } from 'utils/crypto';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import MessageDialog from './MessageDialog';
|
import MessageDialog from './MessageDialog';
|
||||||
import EnteSpinner from './EnteSpinner';
|
import { CodeBlock } from './CodeBlock';
|
||||||
import styled from 'styled-components';
|
|
||||||
const bip39 = require('bip39');
|
const bip39 = require('bip39');
|
||||||
// mobile client library only supports english.
|
// mobile client library only supports english.
|
||||||
bip39.setDefaultWordlist('english');
|
bip39.setDefaultWordlist('english');
|
||||||
export const CodeBlock = styled.div<{ height: number }>`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: #1a1919;
|
|
||||||
height: ${(props) => props.height}px;
|
|
||||||
padding-left: 30px;
|
|
||||||
padding-right: 20px;
|
|
||||||
color: white;
|
|
||||||
margin: 20px 0;
|
|
||||||
width: 100%;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const FreeFlowText = styled.div`
|
|
||||||
word-wrap: break-word;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
min-width: 30%;
|
|
||||||
text-align: left;
|
|
||||||
`;
|
|
||||||
interface Props {
|
interface Props {
|
||||||
show: boolean;
|
show: boolean;
|
||||||
onHide: () => void;
|
onHide: () => void;
|
||||||
|
@ -76,13 +57,7 @@ function RecoveryKeyModal({ somethingWentWrong, ...props }: Props) {
|
||||||
},
|
},
|
||||||
}}>
|
}}>
|
||||||
<p>{constants.RECOVERY_KEY_DESCRIPTION}</p>
|
<p>{constants.RECOVERY_KEY_DESCRIPTION}</p>
|
||||||
<CodeBlock height={150}>
|
<CodeBlock height={'150px'} code={recoveryKey} />
|
||||||
{recoveryKey ? (
|
|
||||||
<FreeFlowText>{recoveryKey}</FreeFlowText>
|
|
||||||
) : (
|
|
||||||
<EnteSpinner />
|
|
||||||
)}
|
|
||||||
</CodeBlock>
|
|
||||||
<p>{constants.KEY_NOT_STORED_DISCLAIMER}</p>
|
<p>{constants.KEY_NOT_STORED_DISCLAIMER}</p>
|
||||||
</MessageDialog>
|
</MessageDialog>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import EnteSpinner from 'components/EnteSpinner';
|
import EnteSpinner from 'components/EnteSpinner';
|
||||||
import LogoImg from 'components/LogoImg';
|
import LogoImg from 'components/LogoImg';
|
||||||
import { CodeBlock, FreeFlowText } from 'components/RecoveryKeyModal';
|
|
||||||
import { DeadCenter } from 'pages/gallery';
|
import { DeadCenter } from 'pages/gallery';
|
||||||
import React, { useContext, useEffect, useState } from 'react';
|
import React, { useContext, useEffect, useState } from 'react';
|
||||||
import { Button, Card } from 'react-bootstrap';
|
import { Button, Card } from 'react-bootstrap';
|
||||||
|
@ -16,6 +15,7 @@ import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
|
||||||
import { AppContext, FLASH_MESSAGE_TYPE } from 'pages/_app';
|
import { AppContext, FLASH_MESSAGE_TYPE } from 'pages/_app';
|
||||||
import { PAGES } from 'constants/pages';
|
import { PAGES } from 'constants/pages';
|
||||||
import { TwoFactorSecret } from 'types/user';
|
import { TwoFactorSecret } from 'types/user';
|
||||||
|
import { CodeBlock } from 'components/CodeBlock';
|
||||||
|
|
||||||
enum SetupMode {
|
enum SetupMode {
|
||||||
QR_CODE,
|
QR_CODE,
|
||||||
|
@ -121,15 +121,10 @@ export default function SetupTwoFactor() {
|
||||||
constants.TWO_FACTOR_MANUAL_CODE_INSTRUCTION
|
constants.TWO_FACTOR_MANUAL_CODE_INSTRUCTION
|
||||||
}
|
}
|
||||||
</p>
|
</p>
|
||||||
<CodeBlock height={100}>
|
<CodeBlock
|
||||||
{!twoFactorSecret ? (
|
height={'100px'}
|
||||||
<EnteSpinner />
|
code={twoFactorSecret.secretCode}
|
||||||
) : (
|
/>
|
||||||
<FreeFlowText>
|
|
||||||
{twoFactorSecret.secretCode}
|
|
||||||
</FreeFlowText>
|
|
||||||
)}
|
|
||||||
</CodeBlock>
|
|
||||||
<Button
|
<Button
|
||||||
block
|
block
|
||||||
variant="link"
|
variant="link"
|
||||||
|
|
Loading…
Reference in a new issue