lbry-desktop/ui/modal/modalWalletEncrypt/view.jsx

182 lines
5.7 KiB
React
Raw Normal View History

2018-07-18 21:48:30 +02:00
// @flow
import React from 'react';
2019-07-22 23:20:08 +02:00
import { Form, FormField, Submit } from 'component/common/form';
2018-07-18 21:48:30 +02:00
import { Modal } from 'modal/modal';
import Button from 'component/button';
2019-08-28 04:35:07 +02:00
import { setSavedPassword } from 'util/saved-passwords';
2018-07-18 21:48:30 +02:00
type Props = {
closeModal: () => void,
walletEncryptSucceded: boolean,
updateWalletStatus: boolean,
2019-01-19 19:54:06 +01:00
encryptWallet: (?string) => void,
updateWalletStatus: () => void,
2018-07-18 21:48:30 +02:00
};
type State = {
newPassword: ?string,
newPasswordConfirm: ?string,
passwordMismatch: boolean,
understandConfirmed: boolean,
understandError: boolean,
submitted: boolean,
2019-01-19 19:54:06 +01:00
failMessage: ?string,
2019-08-20 14:29:59 +02:00
rememberPassword: boolean,
};
const acknowledgementText = __('I Understand');
class ModalWalletEncrypt extends React.PureComponent<Props, State> {
2018-07-18 21:48:30 +02:00
state = {
newPassword: null,
newPasswordConfirm: null,
passwordMismatch: false,
understandConfirmed: false,
understandError: false,
submitted: false, // Prior actions could be marked complete
2019-01-19 19:54:06 +01:00
failMessage: undefined,
2019-08-20 14:29:59 +02:00
rememberPassword: false,
2018-07-18 21:48:30 +02:00
};
componentDidUpdate() {
const { props, state } = this;
if (state.submitted) {
if (props.walletEncryptSucceded === true) {
props.closeModal();
props.updateWalletStatus();
} else if (props.walletEncryptSucceded === false) {
// See https://github.com/lbryio/lbry/issues/1307
this.setState({ failMessage: 'Unable to encrypt wallet.' });
}
}
}
onChangeNewPassword(event: SyntheticInputEvent<>) {
2018-07-18 21:48:30 +02:00
this.setState({ newPassword: event.target.value });
}
2019-08-20 14:29:59 +02:00
onChangeRememberPassword(event: SyntheticInputEvent<>) {
this.setState({ rememberPassword: event.target.checked });
}
onChangeNewPasswordConfirm(event: SyntheticInputEvent<>) {
2018-07-18 21:48:30 +02:00
this.setState({ newPasswordConfirm: event.target.value });
}
onChangeUnderstandConfirm(event: SyntheticInputEvent<>) {
const regex = new RegExp('^.?' + acknowledgementText + '.?$', 'i');
2018-07-18 21:48:30 +02:00
this.setState({
understandConfirmed: regex.test(event.target.value),
2018-07-18 21:48:30 +02:00
});
}
submitEncryptForm() {
const { state } = this;
if (!state.newPassword) {
return;
}
2018-07-18 21:48:30 +02:00
let invalidEntries = false;
if (state.newPassword !== state.newPasswordConfirm) {
this.setState({ passwordMismatch: true });
invalidEntries = true;
}
if (state.understandConfirmed === false) {
this.setState({ understandError: true });
invalidEntries = true;
}
if (invalidEntries === true) {
return;
}
setSavedPassword(state.newPassword, state.rememberPassword);
2018-07-18 21:48:30 +02:00
this.setState({ submitted: true });
this.props.encryptWallet(state.newPassword);
}
render() {
const { closeModal } = this.props;
const { passwordMismatch, understandError, failMessage } = this.state;
return (
<Modal
isOpen
2020-08-26 22:28:33 +02:00
title={__('Encrypt wallet')}
contentLabel={__('Encrypt wallet')}
2019-07-22 23:20:08 +02:00
type="custom"
2018-07-18 21:48:30 +02:00
onConfirmed={() => this.submitEncryptForm()}
onAborted={closeModal}
>
2019-07-21 23:31:22 +02:00
<Form onSubmit={() => this.submitEncryptForm()}>
2019-02-13 17:27:20 +01:00
<p>
{__(
'Encrypting your wallet will require a password to access your local wallet data when LBRY starts. Please enter a new password for your wallet.'
)}{' '}
2019-05-07 23:38:29 +02:00
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/wallet-encryption" />.
2019-02-13 17:27:20 +01:00
</p>
<fieldset-section>
<FormField
autoFocus
error={passwordMismatch === true ? 'Passwords do not match' : false}
label={__('Password')}
placeholder={__('Shh...')}
2019-03-20 22:43:00 +01:00
type="password"
name="wallet-new-password"
2021-04-30 17:42:18 +02:00
onChange={(event) => this.onChangeNewPassword(event)}
2019-02-13 17:27:20 +01:00
/>
</fieldset-section>
<fieldset-section>
<FormField
error={passwordMismatch === true ? 'Passwords do not match' : false}
label={__('Confirm Password')}
placeholder={__('Your eyes only')}
2019-03-20 22:43:00 +01:00
type="password"
name="wallet-new-password-confirm"
2021-04-30 17:42:18 +02:00
onChange={(event) => this.onChangeNewPasswordConfirm(event)}
2019-02-13 17:27:20 +01:00
/>
2019-08-20 14:29:59 +02:00
</fieldset-section>
<fieldset-section>
<FormField
label={__('Remember Password')}
type="checkbox"
name="wallet-remember-password"
2021-04-30 17:42:18 +02:00
onChange={(event) => this.onChangeRememberPassword(event)}
2019-08-20 14:29:59 +02:00
checked={this.state.rememberPassword}
/>
2019-02-13 17:27:20 +01:00
</fieldset-section>
2021-04-30 17:42:18 +02:00
<div className="help--warning">
2019-02-13 17:27:20 +01:00
{__(
'If your password is lost, it cannot be recovered. You will not be able to access your wallet without a password.'
)}
</div>
<FormField
2020-08-26 22:28:33 +02:00
inputButton={<Submit label={failMessage ? __('Encrypting Wallet') : __('Encrypt wallet')} />}
error={
understandError === true
? __('You must enter "%acknowledgement_text%"', { acknowledgement_text: acknowledgementText })
: false
}
label={__('Enter "%acknowledgement_text%"', { acknowledgement_text: acknowledgementText })}
placeholder={__('Type "%acknowledgement_text%"', { acknowledgement_text: acknowledgementText })}
2019-03-20 22:43:00 +01:00
type="text"
name="wallet-understand"
2021-04-30 17:42:18 +02:00
onChange={(event) => this.onChangeUnderstandConfirm(event)}
2019-02-13 17:27:20 +01:00
/>
{failMessage && <div className="error__text">{__(failMessage)}</div>}
</Form>
2019-07-22 23:20:08 +02:00
<div className="card__actions">
<Button button="link" label={__('Cancel')} onClick={closeModal} />
</div>
2018-07-18 21:48:30 +02:00
</Modal>
);
}
}
export default ModalWalletEncrypt;