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 constants from 'utils/strings/constants';
|
||||
import MessageDialog from './MessageDialog';
|
||||
import EnteSpinner from './EnteSpinner';
|
||||
import styled from 'styled-components';
|
||||
import { CodeBlock } from './CodeBlock';
|
||||
const bip39 = require('bip39');
|
||||
// mobile client library only supports 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 {
|
||||
show: boolean;
|
||||
onHide: () => void;
|
||||
|
@ -76,13 +57,7 @@ function RecoveryKeyModal({ somethingWentWrong, ...props }: Props) {
|
|||
},
|
||||
}}>
|
||||
<p>{constants.RECOVERY_KEY_DESCRIPTION}</p>
|
||||
<CodeBlock height={150}>
|
||||
{recoveryKey ? (
|
||||
<FreeFlowText>{recoveryKey}</FreeFlowText>
|
||||
) : (
|
||||
<EnteSpinner />
|
||||
)}
|
||||
</CodeBlock>
|
||||
<CodeBlock height={'150px'} code={recoveryKey} />
|
||||
<p>{constants.KEY_NOT_STORED_DISCLAIMER}</p>
|
||||
</MessageDialog>
|
||||
);
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import EnteSpinner from 'components/EnteSpinner';
|
||||
import LogoImg from 'components/LogoImg';
|
||||
import { CodeBlock, FreeFlowText } from 'components/RecoveryKeyModal';
|
||||
import { DeadCenter } from 'pages/gallery';
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
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 { PAGES } from 'constants/pages';
|
||||
import { TwoFactorSecret } from 'types/user';
|
||||
import { CodeBlock } from 'components/CodeBlock';
|
||||
|
||||
enum SetupMode {
|
||||
QR_CODE,
|
||||
|
@ -121,15 +121,10 @@ export default function SetupTwoFactor() {
|
|||
constants.TWO_FACTOR_MANUAL_CODE_INSTRUCTION
|
||||
}
|
||||
</p>
|
||||
<CodeBlock height={100}>
|
||||
{!twoFactorSecret ? (
|
||||
<EnteSpinner />
|
||||
) : (
|
||||
<FreeFlowText>
|
||||
{twoFactorSecret.secretCode}
|
||||
</FreeFlowText>
|
||||
)}
|
||||
</CodeBlock>
|
||||
<CodeBlock
|
||||
height={'100px'}
|
||||
code={twoFactorSecret.secretCode}
|
||||
/>
|
||||
<Button
|
||||
block
|
||||
variant="link"
|
||||
|
|
Loading…
Reference in a new issue