update recovery key dialog

apps/mobile/src/components/RecoveryKeyDialog/index.js

@@ -1,25 +1,26 @@
-import React, { createRef } from 'react';
-import { Clipboard, View } from 'react-native';
+import React, {createRef} from 'react';
+import {Clipboard, View} from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import RNFetchBlob from 'rn-fetch-blob';
-import { LOGO_BASE64 } from '../../assets/images/assets';
+import {LOGO_BASE64} from '../../assets/images/assets';
 import {
   eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent,
-  ToastEvent
+  ToastEvent,
 } from '../../services/EventManager';
-import { dWidth } from '../../utils';
-import { db } from '../../utils/DB';
-import { eOpenRecoveryKeyDialog, eOpenResultDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
+import {dWidth} from '../../utils';
+import {db} from '../../utils/DB';
+import {eOpenRecoveryKeyDialog, eOpenResultDialog} from '../../utils/Events';
+import {SIZE} from '../../utils/SizeUtils';
 import Storage from '../../utils/storage';
-import { sleep } from '../../utils/TimeUtils';
+import {sleep} from '../../utils/TimeUtils';
 import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
-import { Button } from '../Button';
+import {Button} from '../Button';
+import DialogHeader from '../Dialog/dialog-header';
 import Seperator from '../Seperator';
-import { Toast } from '../Toast';
+import {Toast} from '../Toast';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 class RecoveryKeyDialog extends React.Component {
@@ -33,6 +34,7 @@ class RecoveryKeyDialog extends React.Component {
     this.svg = createRef();
     this.user;
     this.signup = false;
+    this.tapCount = 0;
   }
 
   open = (signup) => {
@@ -50,6 +52,12 @@ class RecoveryKeyDialog extends React.Component {
   };
 
   close = () => {
+    if (this.tapCount === 0) {
+      ToastEvent.show('Tap one more time to confirm.', 'error', 'local');
+      this.tapCount++;
+      return;
+    }
+    this.tapCount = 0;
     this.actionSheetRef.current?.setModalVisible(false);
     sleep(200).then(() => {
       this.setState({
@@ -83,6 +91,7 @@ class RecoveryKeyDialog extends React.Component {
 
     this.svg.current?.toDataURL(async (data) => {
       let path = await Storage.checkAndCreateDir('/');
+
       let fileName = 'nn_' + this.user.email + '_recovery_key_qrcode.png';
       RNFetchBlob.fs.writeFile(path + fileName, data, 'base64').then((res) => {
         RNFetchBlob.fs
@@ -145,23 +154,18 @@ class RecoveryKeyDialog extends React.Component {
         fwdRef={this.actionSheetRef}>
         <View
           style={{
-            width: dWidth,
+            width: '100%',
             backgroundColor: colors.bg,
             justifyContent: 'space-between',
             paddingHorizontal: 12,
             borderRadius: 10,
             paddingTop: 10,
           }}>
-          <Heading
-            numberOfLines={2}
-            style={{
-              width: '85%',
-              maxWidth: '85%',
-              paddingRight: 10,
-              marginTop: 10,
-            }}>
-            Recovery Key
-          </Heading>
+          <DialogHeader
+            title="Your Data Recovery Key"
+            paragraph="If you forget your password, you can recover your
+            data and reset your password using your data recovery key."
+          />
 
           <View
             style={{
@@ -181,6 +185,19 @@ class RecoveryKeyDialog extends React.Component {
               }}>
               {this.state.key}
             </Paragraph>
+
+            <Button
+              onPress={() => {
+                Clipboard.setString(this.state.key);
+                ToastEvent.show('Copied!', 'success', 'local');
+              }}
+              icon="content-copy"
+              title="Copy to Clipboard"
+              width="100%"
+              type="gray"
+              fontSize={SIZE.md}
+              height={50}
+            />
           </View>
           <Seperator />
 
@@ -190,76 +207,45 @@ class RecoveryKeyDialog extends React.Component {
               marginBottom: 15,
               flexDirection: 'row',
               width: '100%',
-              justifyContent: 'space-between',
+              justifyContent: 'center',
+              position: 'absolute',
+              opacity: 0,
             }}>
             {this.state.key ? (
               <QRCode
                 getRef={this.svg}
-                size={dWidth / 2.2}
+                size={500}
                 value={this.state.key}
                 logo={{uri: LOGO_BASE64}}
                 logoBorderRadius={10}
               />
             ) : null}
-
-            <Seperator />
-            <View
-              style={{
-                alignItems: 'center',
-                width: dWidth / 2.2,
-                justifyContent: 'center',
-              }}>
-              <Button
-                title="Save to Gallery"
-                onPress={this.saveQRCODE}
-                width="100%"
-                height={40}
-              />
-              <Seperator />
-              <Button
-                onPress={this.saveToTextFile}
-                title="Save as Text File"
-                width="100%"
-                height={40}
-              />
-              <Seperator />
-              <Button
-                onPress={() => {
-                  Clipboard.setString(this.state.key);
-                  ToastEvent.show('Copied!', 'success', 'local');
-                }}
-                title="Copy Key"
-                width="100%"
-                height={40}
-              />
-            </View>
           </View>
 
-          <Seperator />
-          <View
-            style={{
-              flexDirection: 'row',
-              padding: 10,
-              borderRadius: 10,
-            }}>
-            <Icon color={colors.errorText} size={SIZE.lg} name="alert-circle" />
-            <Paragraph
-              color={colors.errorText}
-              style={{
-                marginLeft: 10,
-                width: '90%',
-              }}>
-              We request you to save your recovery key and keep it in multiple
-              places. If you forget your password, you can only recover your
-              data or reset your password using this recovery key.
-            </Paragraph>
-          </View>
+          <Button
+            title="Save QR-Code to Gallery"
+            onPress={this.saveQRCODE}
+            width="100%"
+            type="accent"
+            fontSize={SIZE.md}
+            height={50}
+          />
           <Seperator />
           <Button
-            title="I have saved the key."
+            onPress={this.saveToTextFile}
+            title="Save to Text File"
+            width="100%"
+            type="accent"
+            fontSize={SIZE.md}
+            height={50}
+          />
+          <Seperator />
+          <Button
+            title="I Have Saved the Key."
             width="100%"
             height={50}
-            type="accent"
+            type="error"
+            fontSize={SIZE.md}
             onPress={this.close}
           />
           <Toast context="local" />