bigbuffet-rw/app/soapbox/features/landing_page/components/registration_form.js

177 lines
5.9 KiB
JavaScript
Raw Normal View History

2020-04-22 17:55:23 -07:00
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
2020-06-06 12:57:05 -07:00
import PropTypes from 'prop-types';
2020-04-22 17:55:23 -07:00
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
2020-06-06 12:57:05 -07:00
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
2020-04-22 17:55:23 -07:00
import { Link } from 'react-router-dom';
import {
SimpleForm,
SimpleInput,
TextInput,
Checkbox,
2020-05-28 15:52:07 -07:00
} from 'soapbox/features/forms';
import { register } from 'soapbox/actions/auth';
import CaptchaField from 'soapbox/features/auth_login/components/captcha';
2020-04-23 18:48:25 -07:00
import { Map as ImmutableMap } from 'immutable';
import { v4 as uuidv4 } from 'uuid';
2020-06-06 12:57:05 -07:00
import { getSettings } from 'soapbox/actions/settings';
const messages = defineMessages({
username: { id: 'registration.fields.username_placeholder', defaultMessage: 'Username' },
email: { id: 'registration.fields.email_placeholder', defaultMessage: 'E-Mail address' },
password: { id: 'registration.fields.password_placeholder', defaultMessage: 'Password' },
confirm: { id: 'registration.fields.confirm_placeholder', defaultMessage: 'Password (again)' },
agreement: { id: 'registration.agreement', defaultMessage: 'I agree to the {tos}.' },
tos: { id: 'registration.tos', defaultMessage: 'Terms of Service' },
reason: { id: 'registration.reason', defaultMessage: 'Reason for Joining' },
2020-06-06 12:57:05 -07:00
});
2020-04-22 17:55:23 -07:00
const mapStateToProps = (state, props) => ({
instance: state.get('instance'),
2020-06-06 12:57:05 -07:00
locale: getSettings(state).get('locale'),
2020-04-22 17:55:23 -07:00
});
export default @connect(mapStateToProps)
2020-06-06 12:57:05 -07:00
@injectIntl
2020-04-22 17:55:23 -07:00
class RegistrationForm extends ImmutablePureComponent {
static propTypes = {
instance: ImmutablePropTypes.map,
2020-06-06 12:57:05 -07:00
locale: PropTypes.string,
2020-06-07 15:18:26 -07:00
intl: PropTypes.object.isRequired,
2020-04-22 17:55:23 -07:00
}
2020-04-23 18:48:25 -07:00
state = {
captchaLoading: true,
submissionLoading: false,
params: ImmutableMap(),
captchaIdempotencyKey: uuidv4(),
2020-04-23 18:48:25 -07:00
}
setParams = map => {
this.setState({ params: this.state.params.merge(ImmutableMap(map)) });
}
2020-04-23 16:41:20 -07:00
onInputChange = e => {
2020-04-23 18:48:25 -07:00
this.setParams({ [e.target.name]: e.target.value });
2020-04-23 16:41:20 -07:00
}
onCheckboxChange = e => {
2020-04-23 18:48:25 -07:00
this.setParams({ [e.target.name]: e.target.checked });
2020-04-23 16:41:20 -07:00
}
onSubmit = e => {
2020-06-06 12:57:05 -07:00
const params = this.state.params.set('locale', this.props.locale);
this.setState({ submissionLoading: true });
2020-06-06 12:57:05 -07:00
this.props.dispatch(register(params.toJS())).catch(error => {
2020-04-29 18:00:01 -07:00
this.setState({ submissionLoading: false });
this.refreshCaptcha();
2020-04-29 18:00:01 -07:00
});
2020-04-23 18:48:25 -07:00
}
2020-06-28 13:42:38 -07:00
onCaptchaClick = e => {
this.refreshCaptcha();
}
2020-04-28 09:57:40 -07:00
onFetchCaptcha = captcha => {
this.setState({ captchaLoading: false });
this.setParams({
captcha_token: captcha.get('token'),
captcha_answer_data: captcha.get('answer_data'),
});
}
2020-04-28 09:57:40 -07:00
onFetchCaptchaFail = error => {
this.setState({ captchaLoading: false });
}
refreshCaptcha = () => {
this.setState({ captchaIdempotencyKey: uuidv4() });
}
2020-04-22 17:55:23 -07:00
render() {
2020-06-06 12:57:05 -07:00
const { instance, intl } = this.props;
2020-04-23 18:48:25 -07:00
const isLoading = this.state.captchaLoading || this.state.submissionLoading;
2020-04-22 17:55:23 -07:00
return (
2020-05-31 17:22:08 -07:00
<SimpleForm onSubmit={this.onSubmit}>
<fieldset disabled={isLoading}>
<div className='simple_form__overlay-area'>
2020-06-06 12:57:05 -07:00
<p className='lead'>
<FormattedMessage
id='registration.lead'
defaultMessage="With an account on {instance} you'll be able to follow people on any server in the fediverse."
values={{ instance: <strong>{instance.get('title')}</strong> }}
/>
</p>
2020-05-31 17:22:08 -07:00
<div className='fields-group'>
<TextInput
2020-06-06 12:57:05 -07:00
placeholder={intl.formatMessage(messages.username)}
2020-05-31 17:22:08 -07:00
name='username'
autoComplete='off'
2020-04-28 09:57:40 -07:00
onChange={this.onInputChange}
2020-05-31 17:22:08 -07:00
required
2020-04-28 09:57:40 -07:00
/>
2020-05-31 17:22:08 -07:00
<SimpleInput
2020-06-06 12:57:05 -07:00
placeholder={intl.formatMessage(messages.email)}
2020-05-31 17:22:08 -07:00
name='email'
type='email'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
2020-06-06 12:57:05 -07:00
placeholder={intl.formatMessage(messages.password)}
2020-05-31 17:22:08 -07:00
name='password'
type='password'
autoComplete='off'
onChange={this.onInputChange}
required
/>
<SimpleInput
2020-06-06 12:57:05 -07:00
placeholder={intl.formatMessage(messages.confirm)}
2020-05-31 17:22:08 -07:00
name='confirm'
type='password'
autoComplete='off'
onChange={this.onInputChange}
required
/>
{instance.get('approval_required') &&
<TextInput
placeholder={intl.formatMessage(messages.reason)}
name='reason'
maxLength={500}
autoComplete='off'
onChange={this.onInputChange}
required
/>}
2020-05-31 17:22:08 -07:00
</div>
<CaptchaField
onFetch={this.onFetchCaptcha}
onFetchFail={this.onFetchCaptchaFail}
onChange={this.onInputChange}
2020-06-28 13:42:38 -07:00
onClick={this.onCaptchaClick}
2020-05-31 17:22:08 -07:00
idempotencyKey={this.state.captchaIdempotencyKey}
/>
<div className='fields-group'>
<Checkbox
2020-06-07 15:18:26 -07:00
label={intl.formatMessage(messages.agreement, { tos: <Link to='/about/tos' target='_blank' key={0}>{intl.formatMessage(messages.tos)}</Link> })}
2020-05-31 17:22:08 -07:00
name='agreement'
onChange={this.onCheckboxChange}
required
/>
</div>
<div className='actions'>
2020-06-06 12:57:05 -07:00
<button name='button' type='submit' className='btn button button-primary'>
<FormattedMessage id='registration.sign_up' defaultMessage='Sign up' />
</button>
2020-04-22 17:55:23 -07:00
</div>
2020-05-31 17:22:08 -07:00
</div>
</fieldset>
</SimpleForm>
2020-04-22 17:55:23 -07:00
);
}
}