lbry-desktop/ui/component/syncPassword/view.jsx

92 lines
3 KiB
React
Raw Normal View History

// @flow
import React from 'react';
import { Form, FormField } from 'component/common/form';
import Button from 'component/button';
import Card from 'component/common/card';
import { setSavedPassword } from 'util/saved-passwords';
import usePersistedState from 'effects/use-persisted-state';
2019-10-28 15:04:37 +01:00
import I18nMessage from 'component/i18nMessage';
2020-09-18 17:16:49 +02:00
import { useHistory } from 'react-router';
type Props = {
2020-09-04 17:02:30 +02:00
getSync: ((any, boolean) => void, ?string) => void,
getSyncIsPending: boolean,
email: string,
passwordError: boolean,
2019-10-28 15:04:37 +01:00
signOut: () => void,
handleSyncComplete: (any, boolean) => void,
};
function SyncPassword(props: Props) {
const { getSync, getSyncIsPending, email, signOut, passwordError, handleSyncComplete } = props;
2020-09-18 17:16:49 +02:00
const {
push,
location: { search },
} = useHistory();
const urlParams = new URLSearchParams(search);
const redirect = urlParams.get('redirect');
const [password, setPassword] = React.useState('');
const [rememberPassword, setRememberPassword] = usePersistedState(true);
function handleSubmit() {
2020-09-04 17:02:30 +02:00
getSync((error, hasDataChanged) => {
handleSyncComplete(error, hasDataChanged);
2020-01-03 21:43:49 +01:00
if (!error) {
2020-09-18 17:16:49 +02:00
push(redirect || '/');
2020-01-03 21:43:49 +01:00
setSavedPassword(password, rememberPassword);
}
2020-09-04 17:02:30 +02:00
}, password);
}
return (
<Form onSubmit={handleSubmit}>
<Card
2020-08-26 22:28:33 +02:00
title={__('Enter your wallet password')}
subtitle={__(
'You set your wallet password when you previously installed LBRY. This may have been on different device.'
)}
actions={
<div>
<FormField
type="password"
error={passwordError && __('Wrong password for %email%', { email })}
label={__('Password for %email%', { email })}
value={password}
onChange={e => setPassword(e.target.value)}
/>
<FormField
name="remember-password"
type="checkbox"
label={__('Remember My Password')}
checked={rememberPassword}
onChange={() => setRememberPassword(!rememberPassword)}
/>
<div className="card__actions">
2020-09-18 17:16:49 +02:00
<Button
type="submit"
button="primary"
label={getSyncIsPending ? __('Continue...') : __('Continue')}
disabled={getSyncIsPending}
/>
2019-10-28 15:04:37 +01:00
<Button button="link" label={__('Cancel')} onClick={signOut} />
</div>
2019-10-28 15:04:37 +01:00
<p className="help">
<I18nMessage
tokens={{
2019-10-28 18:03:24 +01:00
help: <Button button="link" label={__('help guide')} href="https://lbry.com/faq/account-sync" />,
2019-10-28 15:04:37 +01:00
email: <Button button="link" label={'help@lbry.com'} href="mailto:help@lbry.com" />,
}}
>
If you are having issues, checkout our %help% or email us at %email%.
</I18nMessage>
</p>
</div>
}
/>
</Form>
);
}
export default SyncPassword;