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

91 lines
2.4 KiB
React
Raw Normal View History

2019-03-18 06:09:50 +01:00
// @flow
import * as React from 'react';
2018-03-26 23:32:43 +02:00
import Button from 'component/button';
2019-02-13 17:27:20 +01:00
import { Form, FormField, Submit } from 'component/common/form';
2020-01-09 20:03:47 +01:00
import I18nMessage from 'component/i18nMessage';
2020-08-26 22:28:33 +02:00
import Card from 'component/common/card';
import { SITE_HELP_EMAIL } from 'config';
2017-06-03 01:09:52 +02:00
2019-03-18 06:09:50 +01:00
type Props = {
verifyUserPhone: (string) => void,
2019-03-18 06:09:50 +01:00
resetPhone: () => void,
phoneErrorMessage: string,
phone: string,
countryCode: string,
};
type State = {
code: string,
};
class UserPhoneVerify extends React.PureComponent<Props, State> {
constructor(props: Props) {
2017-06-03 01:09:52 +02:00
super(props);
this.state = {
code: '',
2017-06-03 01:09:52 +02:00
};
}
2019-03-18 06:09:50 +01:00
handleCodeChanged(event: SyntheticInputEvent<*>) {
2017-06-03 01:09:52 +02:00
this.setState({
2017-07-19 01:00:13 +02:00
code: String(event.target.value).trim(),
2017-06-03 01:09:52 +02:00
});
}
handleSubmit() {
const { code } = this.state;
this.props.verifyUserPhone(code);
2017-06-03 01:09:52 +02:00
}
reset() {
const { resetPhone } = this.props;
resetPhone();
}
2017-06-03 01:09:52 +02:00
render() {
2020-08-26 22:28:33 +02:00
const { phoneErrorMessage, phone, countryCode } = this.props;
2017-06-08 23:15:34 +02:00
return (
2020-08-26 22:28:33 +02:00
<Card
title={__('Enter the verification code')}
subtitle={
<>
{__(`Please enter the verification code sent to +${countryCode}${phone}. Didn't receive it? `)}
<Button button="link" onClick={this.reset.bind(this)} label={__('Go back.')} />
</>
}
actions={
<>
<Form onSubmit={this.handleSubmit.bind(this)}>
<FormField
type="text"
name="code"
placeholder="1234"
value={this.state.code}
onChange={(event) => {
2020-08-26 22:28:33 +02:00
this.handleCodeChanged(event);
}}
label={__('Verification Code')}
error={phoneErrorMessage}
inputButton={<Submit label={__('Verify')} />}
/>
</Form>
<p className="help">
<I18nMessage
tokens={{
help_link: <Button button="link" href={`mailto:${SITE_HELP_EMAIL}`} label={`${SITE_HELP_EMAIL}`} />,
2022-01-17 17:19:01 +01:00
chat_link: <Button button="link" href="https://chat.odysee.com" label={__('chat')} />,
2020-08-26 22:28:33 +02:00
}}
>
Email %help_link% or join our %chat_link% if you encounter any trouble with your code.
</I18nMessage>
</p>
</>
}
/>
2017-06-08 23:15:34 +02:00
);
2017-06-03 01:09:52 +02:00
}
}
export default UserPhoneVerify;