lbry-desktop/ui/component/userEmail/view.jsx
2020-09-29 17:12:32 -04:00

73 lines
1.9 KiB
JavaScript

// @flow
import * as PAGES from 'constants/pages';
import type { Node } from 'react';
import React, { useEffect } from 'react';
import Button from 'component/button';
import { FormField } from 'component/common/form';
import UserSignOutButton from 'component/userSignOutButton';
import Card from 'component/common/card';
type Props = {
cancelButton: Node,
email: string,
resendVerificationEmail: string => void,
checkEmailVerified: () => void,
user: {
has_verified_email: boolean,
},
fetchAccessToken: () => void,
accessToken: string,
};
function UserEmail(props: Props) {
const { email, user, accessToken, fetchAccessToken } = props;
let isVerified = false;
if (user) {
isVerified = user.has_verified_email;
}
useEffect(() => {
if (!accessToken) {
fetchAccessToken();
}
}, [accessToken, fetchAccessToken]);
return (
<Card
title={__('lbry.tv Account')}
subtitle={
isVerified
? undefined
: __(
'Creating a lbry.tv account will allow you to earn rewards, receive content and security updates, and optionally backup your data.'
)
}
actions={
isVerified ? (
<FormField
type="text"
className="form-field--copyable"
readOnly
label={
<React.Fragment>
{__('Your Email')}{' '}
<Button
button="link"
label={__('Update mailing preferences')}
href={`http://lbry.io/list/edit/${accessToken}`}
/>
</React.Fragment>
}
inputButton={<UserSignOutButton button="secondary" />}
value={email || ''}
/>
) : (
<Button button="primary" label={__('Log In')} navigate={`/$/${PAGES.AUTH}`} />
)
}
/>
);
}
export default UserEmail;