60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
// @flow
|
|
import * as PAGES from 'constants/pages';
|
|
import React from 'react';
|
|
import Button from 'component/button';
|
|
import { FormField } from 'component/common/form';
|
|
import { withRouter } from 'react-router';
|
|
|
|
type Props = {
|
|
setSyncEnabled: boolean => void,
|
|
syncEnabled: boolean,
|
|
verifiedEmail: ?string,
|
|
history: { push: string => void },
|
|
location: UrlLocation,
|
|
getSyncError: ?string,
|
|
disabled: boolean,
|
|
};
|
|
|
|
function SyncToggle(props: Props) {
|
|
const {
|
|
setSyncEnabled,
|
|
syncEnabled,
|
|
verifiedEmail,
|
|
getSyncError,
|
|
history,
|
|
location: { pathname },
|
|
disabled = false,
|
|
} = props;
|
|
|
|
function handleChange() {
|
|
setSyncEnabled(!syncEnabled);
|
|
}
|
|
|
|
if (getSyncError) {
|
|
history.push(`/$/${PAGES.AUTH}?redirect=${pathname}&immediate=true`);
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{!verifiedEmail ? (
|
|
<div>
|
|
<Button requiresAuth button="primary" label={__('Add Email')} />
|
|
<p className="help">{__('An email address is required to sync your account.')}</p>
|
|
</div>
|
|
) : (
|
|
<FormField
|
|
type="checkbox"
|
|
name="sync_toggle"
|
|
label={__('Sync your balance and preferences across devices.')}
|
|
checked={syncEnabled}
|
|
onChange={handleChange}
|
|
disabled={disabled}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default withRouter(SyncToggle);
|