mirror of
https://github.com/streetwriters/notesnook.git
synced 2025-12-23 06:59:31 +01:00
add a RecoveryKeyDialog
This commit is contained in:
ammarahm-ed
221
apps/mobile/src/components/RecoveryKeyDialog/index.js
Normal file
221
apps/mobile/src/components/RecoveryKeyDialog/index.js
Normal file
@@ -0,0 +1,221 @@
|
||||
import React, {createRef} from 'react';
|
||||
import {Clipboard, Text, 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 {SIZE, WEIGHT} from '../../common/common';
|
||||
import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
|
||||
import {eOpenRecoveryKeyDialog} from '../../services/events';
|
||||
import {ToastEvent, w} from '../../utils/utils';
|
||||
import ActionSheet from '../ActionSheet';
|
||||
import {Button} from '../Button';
|
||||
import Seperator from '../Seperator';
|
||||
import {Toast} from '../Toast';
|
||||
class RecoveryKeyDialog extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
key: '',
|
||||
};
|
||||
this.actionSheetRef = createRef();
|
||||
this.svg = createRef();
|
||||
}
|
||||
|
||||
open = () => {
|
||||
this.actionSheetRef.current?._setModalVisible(true);
|
||||
};
|
||||
|
||||
close = () => {
|
||||
this.actionSheetRef.current?._setModalVisible(false);
|
||||
};
|
||||
async componentDidMount() {
|
||||
eSubscribeEvent(eOpenRecoveryKeyDialog, this.open);
|
||||
}
|
||||
|
||||
async componentWillUnmount() {
|
||||
eUnSubscribeEvent(eOpenRecoveryKeyDialog, this.open);
|
||||
}
|
||||
|
||||
componentDidUpdate() {}
|
||||
|
||||
saveQRCODE = () => {
|
||||
this.svg.current?.toDataURL((data) => {
|
||||
console.log(data);
|
||||
RNFetchBlob.fs
|
||||
.writeFile(
|
||||
RNFetchBlob.fs.dirs.SDCardDir +
|
||||
'/Notesnook/nn_recovery_key_qrcode.png',
|
||||
data,
|
||||
'base64',
|
||||
)
|
||||
.then((res) => {
|
||||
RNFetchBlob.fs
|
||||
.scanFile([
|
||||
{
|
||||
path:
|
||||
RNFetchBlob.fs.dirs.SDCardDir +
|
||||
'/Notesnook/nn_recovery_key_qrcode.png',
|
||||
mime: 'image/png',
|
||||
},
|
||||
])
|
||||
.then((r) => {
|
||||
ToastEvent.show(
|
||||
'Recovery key saved to Gallery as ' +
|
||||
RNFetchBlob.fs.dirs.SDCardDir +
|
||||
'/Notesnook/nn_recovery_key_qrcode.png',
|
||||
'success',
|
||||
'local',
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const {colors} = this.props;
|
||||
return (
|
||||
<ActionSheet
|
||||
containerStyle={{
|
||||
backgroundColor: colors.bg,
|
||||
width: '100%',
|
||||
alignSelf: 'center',
|
||||
borderRadius: 10,
|
||||
}}
|
||||
ref={this.actionSheetRef}
|
||||
initialOffsetFromBottom={1}>
|
||||
<View
|
||||
style={{
|
||||
width: w,
|
||||
backgroundColor: colors.bg,
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 10,
|
||||
paddingTop: 10,
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
borderRadius: 5,
|
||||
marginBottom: 15,
|
||||
paddingTop: 10,
|
||||
}}>
|
||||
<Text
|
||||
numberOfLines={2}
|
||||
style={{
|
||||
fontFamily: WEIGHT.bold,
|
||||
fontSize: SIZE.xl,
|
||||
width: '85%',
|
||||
maxWidth: '85%',
|
||||
paddingRight: 10,
|
||||
color: colors.heading,
|
||||
}}>
|
||||
Your Recovery Key
|
||||
</Text>
|
||||
<Text
|
||||
numberOfLines={2}
|
||||
style={{
|
||||
fontFamily: WEIGHT.regular,
|
||||
fontSize: SIZE.md,
|
||||
width: '100%',
|
||||
maxWidth: '100%',
|
||||
paddingRight: 10,
|
||||
color: colors.icon,
|
||||
}}>
|
||||
{this.state.key}
|
||||
</Text>
|
||||
<Seperator />
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
}}>
|
||||
<Button
|
||||
onPress={() => {
|
||||
RNFetchBlob.fs.writeFile(
|
||||
RNFetchBlob.fs.dirs.SDCardDir +
|
||||
'/Notesnook/nn_recovery_key.txt',
|
||||
this.state.key,
|
||||
'utf8',
|
||||
);
|
||||
}}
|
||||
title="Save as Text"
|
||||
width="48%"
|
||||
height={50}
|
||||
/>
|
||||
<Button
|
||||
onPress={() => {
|
||||
Clipboard.setString(this.state.key);
|
||||
ToastEvent.show('Recovery key copied');
|
||||
}}
|
||||
title="Copy"
|
||||
width="48%"
|
||||
height={50}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
marginBottom: 15,
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
}}>
|
||||
<QRCode
|
||||
getRef={this.svg}
|
||||
size={w / 2.2}
|
||||
value={this.state.key}
|
||||
logo={{uri: LOGO_BASE64}}
|
||||
logoBorderRadius={10}
|
||||
/>
|
||||
|
||||
<Text
|
||||
style={{
|
||||
paddingHorizontal: 10,
|
||||
fontSize: SIZE.md,
|
||||
maxWidth: '50%',
|
||||
fontFamily: WEIGHT.regular,
|
||||
}}>
|
||||
This is the QR-Code of your recovery key. You can use any QR-Code
|
||||
Scanner to scan this image and get your key and recover your data.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Button
|
||||
title="Save QR-Code to Gallery"
|
||||
onPress={this.saveQRCODE}
|
||||
width="100%"
|
||||
height={50}
|
||||
/>
|
||||
|
||||
<Seperator />
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
backgroundColor: colors.errorBg,
|
||||
padding: 10,
|
||||
borderRadius: 10,
|
||||
}}>
|
||||
<Icon color={colors.errorText} size={SIZE.lg} name="alert-circle" />
|
||||
<Text
|
||||
style={{
|
||||
color: colors.errorText,
|
||||
fontFamily: WEIGHT.regular,
|
||||
marginLeft: 10,
|
||||
fontSize: SIZE.sm,
|
||||
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.
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Toast context="local" />
|
||||
</View>
|
||||
</ActionSheet>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RecoveryKeyDialog;
|
||||
Reference in New Issue
Block a user