123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- import {Component} from 'react';
- import {browserHistory} from 'react-router';
- import {ClassNames} from '@emotion/react';
- import styled from '@emotion/styled';
- import {Client} from 'sentry/api';
- import Form from 'sentry/components/deprecatedforms/form';
- import PasswordField from 'sentry/components/deprecatedforms/passwordField';
- import RadioBooleanField from 'sentry/components/deprecatedforms/radioBooleanField';
- import TextField from 'sentry/components/deprecatedforms/textField';
- import ExternalLink from 'sentry/components/links/externalLink';
- import {t, tct} from 'sentry/locale';
- import ConfigStore from 'sentry/stores/configStore';
- import {AuthConfig} from 'sentry/types';
- import {formFooterClass} from 'sentry/views/auth/login';
- const SubscribeField = () => (
- <RadioBooleanField
- name="subscribe"
- yesLabel={t('Yes, I would like to receive updates via email')}
- noLabel={t("No, I'd prefer not to receive these updates")}
- help={tct(
- `We'd love to keep you updated via email with product and feature
- announcements, promotions, educational materials, and events. Our
- updates focus on relevant information, and we'll never sell your data
- to third parties. See our [link] for more details.`,
- {
- link: <a href="https://sentry.io/privacy/">Privacy Policy</a>,
- }
- )}
- />
- );
- type Props = {
- api: Client;
- authConfig: AuthConfig;
- };
- type State = {
- errorMessage: null | string;
- errors: Record<string, string>;
- };
- class RegisterForm extends Component<Props, State> {
- state: State = {
- errorMessage: null,
- errors: {},
- };
- handleSubmit: Form['props']['onSubmit'] = async (data, onSuccess, onError) => {
- const {api} = this.props;
- try {
- const response = await api.requestPromise('/auth/register/', {
- method: 'POST',
- data,
- });
- onSuccess(data);
- // TODO(epurkhiser): There is more we need to do to setup the user. but
- // definitely primarily we need to init our user.
- ConfigStore.set('user', response.user);
- browserHistory.push({pathname: response.nextUri});
- } catch (e) {
- if (!e.responseJSON || !e.responseJSON.errors) {
- onError(e);
- return;
- }
- let message = e.responseJSON.detail;
- if (e.responseJSON.errors.__all__) {
- message = e.responseJSON.errors.__all__;
- }
- this.setState({
- errorMessage: message,
- errors: e.responseJSON.errors || {},
- });
- onError(e);
- }
- };
- render() {
- const {hasNewsletter} = this.props.authConfig;
- const {errorMessage, errors} = this.state;
- return (
- <ClassNames>
- {({css}) => (
- <Form
- initialData={{subscribe: true}}
- submitLabel={t('Continue')}
- onSubmit={this.handleSubmit}
- footerClass={css`
- ${formFooterClass}
- `}
- errorMessage={errorMessage}
- extraButton={
- <PrivacyPolicyLink href="https://sentry.io/privacy/">
- {t('Privacy Policy')}
- </PrivacyPolicyLink>
- }
- >
- <TextField
- name="name"
- placeholder={t('Jane Bloggs')}
- label={t('Name')}
- error={errors.name}
- required
- />
- <TextField
- name="username"
- placeholder={t('you@example.com')}
- label={t('Email')}
- error={errors.username}
- required
- />
- <PasswordField
- name="password"
- placeholder={t('something super secret')}
- label={t('Password')}
- error={errors.password}
- required
- />
- {hasNewsletter && <SubscribeField />}
- </Form>
- )}
- </ClassNames>
- );
- }
- }
- const PrivacyPolicyLink = styled(ExternalLink)`
- color: ${p => p.theme.gray300};
- &:hover {
- color: ${p => p.theme.textColor};
- }
- `;
- export default RegisterForm;
|