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

89 lines
2.7 KiB
React
Raw Normal View History

2018-03-30 02:43:47 +02:00
// @flow
2019-08-27 16:43:42 +02:00
import React, { useState } from 'react';
import { FormField, Form } from 'component/common/form';
import Button from 'component/button';
import analytics from 'analytics';
import { EMAIL_REGEX } from 'constants/email';
2019-10-03 23:40:54 +02:00
import I18nMessage from 'component/i18nMessage';
2018-03-30 02:43:47 +02:00
type Props = {
errorMessage: ?string,
isPending: boolean,
addUserEmail: string => void,
syncEnabled: boolean,
setSync: boolean => void,
balance: number,
2018-03-30 02:43:47 +02:00
};
2019-08-27 16:43:42 +02:00
function UserEmailNew(props: Props) {
2019-10-15 23:23:51 +02:00
const { errorMessage, isPending, addUserEmail, setSync } = props;
2019-08-27 16:43:42 +02:00
const [newEmail, setEmail] = useState('');
2019-10-15 23:23:51 +02:00
const [formSyncEnabled, setFormSyncEnabled] = useState(true);
2019-09-26 18:07:11 +02:00
const valid = newEmail.match(EMAIL_REGEX);
2019-08-27 16:43:42 +02:00
function handleSubmit() {
2019-10-15 23:23:51 +02:00
setSync(formSyncEnabled);
2019-08-27 16:43:42 +02:00
addUserEmail(newEmail);
analytics.emailProvidedEvent();
}
2019-08-27 16:43:42 +02:00
return (
2019-10-15 23:23:51 +02:00
<React.Fragment>
2019-11-13 19:14:19 +01:00
<h1 className="section__title--large">{__('Sign In to lbry.tv')}</h1>
<p className="section__subtitle">
{/* @if TARGET='web' */}
{__('Create a new account or sign in.')}
{/* @endif */}
{/* @if TARGET='app' */}
{__('An account with lbry.tv allows you to earn rewards and backup your data.')}
{/* @endif */}
</p>
2019-09-26 18:07:11 +02:00
<Form onSubmit={handleSubmit} className="section__body">
<FormField
autoFocus
placeholder={__('hotstuff_96@hotmail.com')}
type="email"
name="sign_up_email"
2019-09-26 18:07:11 +02:00
label={__('Email')}
value={newEmail}
error={errorMessage}
onChange={e => setEmail(e.target.value)}
/>
2019-10-15 23:23:51 +02:00
{!IS_WEB && (
2019-09-30 21:52:53 +02:00
<FormField
type="checkbox"
2019-10-15 23:23:51 +02:00
name="sync_checkbox"
2019-10-03 23:40:54 +02:00
label={
2019-10-15 23:23:51 +02:00
<React.Fragment>
2019-11-13 19:14:19 +01:00
{__('Backup your account and wallet data.')}{' '}
2019-10-15 23:23:51 +02:00
<Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
</React.Fragment>
}
checked={formSyncEnabled}
onChange={() => setFormSyncEnabled(!formSyncEnabled)}
2019-09-30 21:52:53 +02:00
/>
2019-10-15 23:23:51 +02:00
)}
<div className="card__actions">
<Button button="primary" type="submit" label={__('Continue')} disabled={!newEmail || !valid || isPending} />
2019-09-26 18:07:11 +02:00
</div>
2019-10-28 15:04:37 +01:00
<p className="help">
<React.Fragment>
<I18nMessage
tokens={{
terms: (
<Button button="link" href="https://www.lbry.com/termsofservice" label={__('Terms of Service')} />
),
}}
>
By continuing, I agree to the %terms% and confirm I am over the age of 13.
</I18nMessage>
</React.Fragment>
</p>
2019-09-26 18:07:11 +02:00
</Form>
2019-10-15 23:23:51 +02:00
</React.Fragment>
2019-08-27 16:43:42 +02:00
);
}
2017-06-08 23:15:34 +02:00
export default UserEmailNew;