From 8498ae54c07b836f88aa837d5c68c2b6e5ba891a Mon Sep 17 00:00:00 2001
From: Abhinav
Date: Fri, 21 Jan 2022 13:59:46 +0530
Subject: [PATCH] update codeblock and move to new file
---
src/components/CodeBlock.tsx | 90 ++++++++++++++++++++++++++++
src/components/RecoveryKeyModal.tsx | 29 +--------
src/pages/two-factor/setup/index.tsx | 15 ++---
3 files changed, 97 insertions(+), 37 deletions(-)
create mode 100644 src/components/CodeBlock.tsx
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
new file mode 100644
index 000000000..f593f4d27
--- /dev/null
+++ b/src/components/CodeBlock.tsx
@@ -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(false);
+
+ const copyToClipboardHelper = (text: string) => () => {
+ navigator.clipboard.writeText(text);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 1000);
+ };
+ const RenderCopiedMessage = (props) => {
+ const { style, ...rest } = props;
+ return (
+
+ copied
+
+ );
+ };
+ return (
+
+
+ {props.code ? (
+ {props.code}
+ ) : (
+
+ )}
+
+ {props.code && (
+
+
+ {copied ? : }
+
+
+ )}
+
+ );
+};
diff --git a/src/components/RecoveryKeyModal.tsx b/src/components/RecoveryKeyModal.tsx
index 6a4afffb9..aaf6fa31a 100644
--- a/src/components/RecoveryKeyModal.tsx
+++ b/src/components/RecoveryKeyModal.tsx
@@ -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) {
},
}}>
{constants.RECOVERY_KEY_DESCRIPTION}
-
- {recoveryKey ? (
- {recoveryKey}
- ) : (
-
- )}
-
+
{constants.KEY_NOT_STORED_DISCLAIMER}
);
diff --git a/src/pages/two-factor/setup/index.tsx b/src/pages/two-factor/setup/index.tsx
index 8fe4d432e..85f367036 100644
--- a/src/pages/two-factor/setup/index.tsx
+++ b/src/pages/two-factor/setup/index.tsx
@@ -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
}
-
- {!twoFactorSecret ? (
-
- ) : (
-
- {twoFactorSecret.secretCode}
-
- )}
-
+