<commit_before>/* eslint-disable react/no-multi-comp */
const bindAll = require('lodash.bindall');
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const omit = require('lodash.omit');
const PropTypes = require('prop-types');
const React = require('react');

const api = require('../../lib/api');
const countryData = require('../../lib/country-data');
const intl = require('../../lib/intl.jsx');

const Avatar = require('../../components/avatar/avatar.jsx');
const Button = require('../../components/forms/button.jsx');
const Card = require('../../components/card/card.jsx');
const CharCount = require('../../components/forms/charcount.jsx');
const Checkbox = require('../../components/forms/checkbox.jsx');
const CheckboxGroup = require('../../components/forms/checkbox-group.jsx');
const Form = require('../../components/forms/form.jsx');
const GeneralError = require('../../components/forms/general-error.jsx');
const Input = require('../../components/forms/input.jsx');
const PhoneInput = require('../../components/forms/phone-input.jsx');
const RadioGroup = require('../../components/forms/radio-group.jsx');
const Select = require('../../components/forms/select.jsx');
const Slide = require('../../components/slide/slide.jsx');
const Spinner = require('../../components/spinner/spinner.jsx');
const StepNavigation = require('../../components/stepnavigation/stepnavigation.jsx');
const TextArea = require('../../components/forms/textarea.jsx');
const Tooltip = require('../../components/tooltip/tooltip.jsx');

require('./steps.scss');

const DEFAULT_COUNTRY = 'us';

/**
 * Return a list of options to give to frc select
 * @param  {object} reactIntl      react-intl, used to localize strings
 * @param  {string} defaultCountry optional string of default country to put at top of list
 * @return {object}                ordered set of county options formatted for frc select
 */
const getCountryOptions = (reactIntl, defaultCountry) => {
    const options = countryData.countryOptions.concat({
        label: reactIntl.formatMessage({id: 'registration.selectCountry'}),
        disabled: true,
        value: ''
    });

    if (typeof defaultCountry !== 'undefined') {
        return options.sort((a, b) => {
            if (a.disabled) return -1;
            if (b.disabled) return 1;
            if (a.value === defaultCountry) return -1;
            if (b.value === defaultCountry) return 1;
            return 0;
        });
    }
    return options;
};

const NextStepButton = props => (
    <Button
        className="card-button"
        disabled={props.waiting}
        type="submit"
        {...omit(props, ['text', 'waiting'])}
    >
        {props.waiting ?
            <Spinner /> :
            props.text
        }
    </Button>
);

NextStepButton.propTypes = {
    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    waiting: PropTypes.bool
};

NextStepButton.defaultProps = {
    waiting: false,
    text: 'Next Step'
};


/*
 * USERNAME STEP
 */
class UsernameStep extends React.Component {
    constructor (props) {
        super(props);
        bindAll(this, [
            'handleChangeShowPassword',
            'handleUsernameBlur',
            'handleValidSubmit',
            'validateUsername'
        ]);
        this.state = {
            showPassword: props.showPassword,
            waiting: false,
            validUsername: ''
        };
    }
    handleChangeShowPassword (field, value) {
        this.setState({showPassword: value});
    }
    validateUsername (username, callback) {
        callback = callback || function () {};

        if (!username) {
            this.form.formsy.updateInputsWithError({
                'user.username': this.props.intl.formatMessage({id: 'form.validationRequired'})
            });
            return callback(false);
        }

        api({
            host: '',
            uri: `/accounts/check_username/${username}/`
        }, (err, body, res) => {
            if (err || res.statusCode !== 200) {
                err = err || this.props.intl.formatMessage({id: 'general.error'});
                this.form.formsy.updateInputsWithError({all: err});
                return callback(false);
            }
            body = body[0];

            switch (body.msg) {
            case 'valid username':
                this.setState({
                    validUsername: 'pass'
                });
                return callback(true);
            case 'username exists':
                this.form.formsy.updateInputsWithError({
                    'user.username': this.props.intl.formatMessage({
                        id: 'registration.validationUsernameExists'
                    })
                });
                return callback(false);
            case 'bad username':
                this.form.formsy.updateInputsWithError({
                    'user.username': this.props.intl.formatMessage({
                        id: 'registration.validationUsernameVulgar'
                    })
                });
                return callback(false);
            case 'invalid username':
            default:
                this.form.formsy.updateInputsWithError({
                    'user.username': this.props.intl.formatMessage({
                        id: 'registration.validationUsernameInvalid'
                    })
                });
                return callback(false);
            }
        });
    }
    handleUsernameBlur (name, value) {
        if (this.form.formsy.inputs[0].isValidValue(value)) {
            this.validateUsername(value);
        }
    }
    handleValidSubmit (formData) {
        this.setState({waiting: true});
        this.validateUsername(formData.user.username, isValid => {
            this.setState({waiting: false});
            if (isValid) return this.props.onNextStep(formData);
        });
    }
    render () {
        return (
            <Slide className="registration-step username-step">
                <h2>
                    {this.props.title ? (
                        this.props.title
                    ) : (
                        <intl.FormattedMessage id="registration.usernameStepTitle" />
                    )}
                </h2>
                <p className="description">
                    {this.props.description ? (
                        this.props.description
                    ) : (
                        <span>
                            <intl.FormattedMessage id="registration.usernameStepDescription" />
                            <b>
                                <intl.FormattedMessage id="registration.usernameStepRealName" />
                            </b>
                        </span>
                    )}
                    {this.props.tooltip ? (
                        <Tooltip
                            tipContent={this.props.tooltip}
                            title={'?'}
                        />
                    ) : (
                        null
                    )}
                </p>
                <Card>
                    <Form
                        ref={form => {
                            this.form = form;
                        }}
                        onValidSubmit={this.handleValidSubmit}
                    >
                        <div>
                            <div className="username-label">
                                <b>
                                    {this.props.intl.formatMessage({id: 'registration.createUsername'})}
                                </b>
                                {this.props.usernameHelp ? (
                                    <p className="help-text">{this.props.usernameHelp}</p>
                                ) : (
                                    null
                                )}
                            </div>
                            <Input
                                required
                                className={this.state.validUsername}
                                name="user.username"
                                type="text"
                                validationErrors={{
                                    matchRegexp: this.props.intl.formatMessage({
                                        id: 'registration.validationUsernameRegexp'
                                    }),
                                    minLength: this.props.intl.formatMessage({
                                        id: 'registration.validationUsernameMinLength'
                                    }),
                                    maxLength: this.props.intl.formatMessage({
                                        id: 'registration.validationUsernameMaxLength'
                                    })
                                }}
                                validations={{
                                    matchRegexp: /^[\w-]*$/,
                                    minLength: 3,
                                    maxLength: 20
                                }}
                                onBlur={this.handleUsernameBlur}
                            />
                        </div>
                        <Input
                            required
                            label={
                                this.props.intl.formatMessage({id: 'general.password'})
                            }
                            name="user.password"
                            type={this.state.showPassword ? 'text' : 'password'}
                            validationErrors={{
                                minLength: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordLength'
                                }),
                                notEquals: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordNotEquals'
                                }),
                                notEqualsField: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordNotUsername'
                                })
                            }}
                            validations={{
                                minLength: 6,
                                notEquals: 'password',
                                notEqualsField: 'user.username'
                            }}
                        />
                        <Checkbox
                            help={null}
                            name="showPassword"
                            value={this.state.showPassword}
                            valueLabel={
                                this.props.intl.formatMessage({id: 'registration.showPassword'})
                            }
                            onChange={this.handleChangeShowPassword}
                        />
                        <GeneralError name="all" />
                        <NextStepButton
                            text={<intl.FormattedMessage id="registration.nextStep" />}
                            waiting={this.props.waiting || this.state.waiting}
                        />
                    </Form>
                </Card>
                <StepNavigation
                    active={this.props.activeStep}
                    steps={this.props.totalSteps - 1}
                />
            </Slide>
        );
    }
}

UsernameStep.propTypes = {
    activeStep: PropTypes.number,
    description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    intl: intl.intlShape,
    onNextStep: PropTypes.func,
    showPassword: PropTypes.bool,
    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    totalSteps: PropTypes.number,
    usernameHelp: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    waiting: PropTypes.bool
};

UsernameStep.defaultProps = {
    showPassword: false,
    waiting: false
};

const IntlUsernameStep = injectIntl(UsernameStep);


/*
 * PASSWORD STEP
 */
class ChoosePasswordStep extends React.Component {
    constructor (props) {
        super(props);
        bindAll(this, [
            'handleChangeShowPassword'
        ]);
        this.state = {
            showPassword: props.showPassword
        };
    }
    handleChangeShowPassword (field, value) {
        this.setState({showPassword: value});
    }
    render () {
        return (
            <Slide className="registration-step choose-password-step">
                <h2>
                    {this.props.intl.formatMessage({id: 'registration.choosePasswordStepTitle'})}
                </h2>
                <p className="description">
                    <intl.FormattedMessage id="registration.choosePasswordStepDescription" />
                    <Tooltip
                        tipContent={
                            this.props.intl.formatMessage({id: 'registration.choosePasswordStepTooltip'})
                        }
                        title={'?'}
                    />
                </p>

                <Card>
                    <Form onValidSubmit={this.props.onNextStep}>
                        <Input
                            required
                            label={
                                this.props.intl.formatMessage({id: 'registration.newPassword'})
                            }
                            name="user.password"
                            type={this.state.showPassword ? 'text' : 'password'}
                            validationErrors={{
                                minLength: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordLength'
                                }),
                                notEquals: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordNotEquals'
                                }),
                                notEqualsUsername: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordNotUsername'
                                })
                            }}
                            validations={{
                                minLength: 6,
                                notEquals: 'password',
                                notEqualsUsername: this.props.username
                            }}
                        />
                        <Checkbox
                            help={null}
                            name="showPassword"
                            value={this.state.showPassword}
                            valueLabel={
                                this.props.intl.formatMessage({id: 'registration.showPassword'})
                            }
                            onChange={this.handleChangeShowPassword}
                        />
                        <NextStepButton
                            text={<intl.FormattedMessage id="registration.nextStep" />}
                            waiting={this.props.waiting || this.state.waiting}
                        />
                    </Form>
                </Card>
                <StepNavigation
                    active={this.props.activeStep}
                    steps={this.props.totalSteps - 1}
                />
            </Slide>
        );
    }
}

ChoosePasswordStep.propTypes = {
    activeStep: PropTypes.number,
    intl: intlShape,
    onNextStep: PropTypes.func,
    showPassword: PropTypes.bool,
    totalSteps: PropTypes.number,
    username: PropTypes.string,
    waiting: PropTypes.bool
};

ChoosePasswordStep.defaultProps = {
    showPassword: false,
    username: null,
    waiting: false
};

const IntlChoosePasswordStep = injectIntl(ChoosePasswordStep);


/*
 * DEMOGRAPHICS STEP
 */
class DemographicsStep extends React.Component {
    constructor (props) {
        super(props);
        bindAll(this, [
            'getMonthOptions',
            'getYearOptions',
            'handleChooseGender',
            'handleValidSubmit'
        ]);
        this.state = {
            otherDisabled: true
        };
    }
    getMonthOptions () {
        return [
            'January', 'February', 'March', 'April', 'May', 'June', 'July',
            'August', 'September', 'October', 'November', 'December'
        ].map((label, id) => ({
            value: (id + 1).toString(),
            label: this.props.intl.formatMessage({id: `general.month${label}`})
        }));
    }
    getYearOptions () {
        return Array.apply(null, Array(100)).map((v, id) => {
            const year = (new Date().getFullYear() - (id + this.props.birthOffset)).toString();
            return {value: year, label: year};
        });
    }
    handleChooseGender (name, gender) {
        this.setState({otherDisabled: gender !== 'other'});
    }
    handleValidSubmit (formData, reset, invalidate) {
        const birthdate = new Date(
            formData.user.birth.year,
            formData.user.birth.month - 1,
            1
        );
        if (((Date.now() - birthdate) / (24 * 3600 * 1000 * 365.25)) < this.props.birthOffset) {
            return invalidate({
                'user.birth.year': this.props.intl.formatMessage({id: 'teacherRegistration.validationAge'})
            });
        }
        return this.props.onNextStep(formData);
    }
    render () {
        const countryOptions = getCountryOptions(this.props.intl, DEFAULT_COUNTRY);
        return (
            <Slide className="registration-step demographics-step">
                <h2>
                    <intl.FormattedMessage id="registration.personalStepTitle" />
                </h2>
                <p className="description">
                    {this.props.description ?
                        this.props.description :
                        <intl.FormattedMessage id="registration.personalStepDescription" />
                    }
                    <Tooltip
                        tipContent={
                            this.props.intl.formatMessage({id: 'registration.nameStepTooltip'})
                        }
                        title={'?'}
                    />
                </p>
                <Card>
                    <Form onValidSubmit={this.handleValidSubmit}>
                        <Select
                            required
                            label={
                                this.props.intl.formatMessage({id: 'general.birthMonth'})
                            }
                            name="user.birth.month"
                            options={this.getMonthOptions()}
                        />
                        <Select<commit_msg>Fixed Issue 1930<commit_after>/* eslint-disable react/no-multi-comp */
const bindAll = require('lodash.bindall');
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const omit = require('lodash.omit');
const PropTypes = require('prop-types');
const React = require('react');

const api = require('../../lib/api');
const countryData = require('../../lib/country-data');
const intl = require('../../lib/intl.jsx');

const Avatar = require('../../components/avatar/avatar.jsx');
const Button = require('../../components/forms/button.jsx');
const Card = require('../../components/card/card.jsx');
const CharCount = require('../../components/forms/charcount.jsx');
const Checkbox = require('../../components/forms/checkbox.jsx');
const CheckboxGroup = require('../../components/forms/checkbox-group.jsx');
const Form = require('../../components/forms/form.jsx');
const GeneralError = require('../../components/forms/general-error.jsx');
const Input = require('../../components/forms/input.jsx');
const PhoneInput = require('../../components/forms/phone-input.jsx');
const RadioGroup = require('../../components/forms/radio-group.jsx');
const Select = require('../../components/forms/select.jsx');
const Slide = require('../../components/slide/slide.jsx');
const Spinner = require('../../components/spinner/spinner.jsx');
const StepNavigation = require('../../components/stepnavigation/stepnavigation.jsx');
const TextArea = require('../../components/forms/textarea.jsx');
const Tooltip = require('../../components/tooltip/tooltip.jsx');

require('./steps.scss');

const DEFAULT_COUNTRY = 'us';

/**
 * Return a list of options to give to frc select
 * @param  {object} reactIntl      react-intl, used to localize strings
 * @param  {string} defaultCountry optional string of default country to put at top of list
 * @return {object}                ordered set of county options formatted for frc select
 */
const getCountryOptions = (reactIntl, defaultCountry) => {
    const options = countryData.countryOptions.concat({
        label: reactIntl.formatMessage({id: 'registration.selectCountry'}),
        disabled: true,
        value: ''
    });

    if (typeof defaultCountry !== 'undefined') {
        return options.sort((a, b) => {
            if (a.disabled) return -1;
            if (b.disabled) return 1;
            if (a.value === defaultCountry) return -1;
            if (b.value === defaultCountry) return 1;
            return 0;
        });
    }
    return options;
};

const NextStepButton = props => (
    <Button
        className="card-button"
        disabled={props.waiting}
        type="submit"
        {...omit(props, ['text', 'waiting'])}
    >
        {props.waiting ?
            <Spinner /> :
            props.text
        }
    </Button>
);

NextStepButton.propTypes = {
    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    waiting: PropTypes.bool
};

NextStepButton.defaultProps = {
    waiting: false,
    text: 'Next Step'
};


/*
 * USERNAME STEP
 */
class UsernameStep extends React.Component {
    constructor (props) {
        super(props);
        bindAll(this, [
            'handleChangeShowPassword',
            'handleUsernameBlur',
            'handleValidSubmit',
            'validateUsername'
        ]);
        this.state = {
            showPassword: props.showPassword,
            waiting: false,
            validUsername: ''
        };
    }
    handleChangeShowPassword (field, value) {
        this.setState({showPassword: value});
    }
    validateUsername (username, callback) {
        callback = callback || function () {};

        if (!username) {
            this.form.formsy.updateInputsWithError({
                'user.username': this.props.intl.formatMessage({id: 'form.validationRequired'})
            });
            return callback(false);
        }

        api({
            host: '',
            uri: `/accounts/check_username/${username}/`
        }, (err, body, res) => {
            if (err || res.statusCode !== 200) {
                err = err || this.props.intl.formatMessage({id: 'general.error'});
                this.form.formsy.updateInputsWithError({all: err});
                return callback(false);
            }
            body = body[0];

            switch (body.msg) {
            case 'valid username':
                this.setState({
                    validUsername: 'pass'
                });
                return callback(true);
            case 'username exists':
                this.form.formsy.updateInputsWithError({
                    'user.username': this.props.intl.formatMessage({
                        id: 'registration.validationUsernameExists'
                    })
                });
                return callback(false);
            case 'bad username':
                this.form.formsy.updateInputsWithError({
                    'user.username': this.props.intl.formatMessage({
                        id: 'registration.validationUsernameVulgar'
                    })
                });
                return callback(false);
            case 'invalid username':
            default:
                this.form.formsy.updateInputsWithError({
                    'user.username': this.props.intl.formatMessage({
                        id: 'registration.validationUsernameInvalid'
                    })
                });
                return callback(false);
            }
        });
    }
    handleUsernameBlur (name, value) {
        if (this.form.formsy.inputs[0].isValidValue(value)) {
            this.validateUsername(value);
        }
    }
    handleValidSubmit (formData) {
        this.setState({waiting: true});
        this.validateUsername(formData.user.username, isValid => {
            this.setState({waiting: false});
            if (isValid) return this.props.onNextStep(formData);
        });
    }
    render () {
        return (
            <Slide className="registration-step username-step">
                <h2>
                    {this.props.title ? (
                        this.props.title
                    ) : (
                        <intl.FormattedMessage id="registration.usernameStepTitle" />
                    )}
                </h2>
                <p className="description">
                    {this.props.description ? (
                        this.props.description
                    ) : (
                        <span>
                            <intl.FormattedMessage id="registration.usernameStepDescription" />
                            <b>
                                <intl.FormattedMessage id="registration.usernameStepRealName" />
                            </b>
                        </span>
                    )}
                    {this.props.tooltip ? (
                        <Tooltip
                            tipContent={this.props.tooltip}
                            title={'?'}
                        />
                    ) : (
                        null
                    )}
                </p>
                <Card>
                    <Form
                        ref={form => {
                            this.form = form;
                        }}
                        onValidSubmit={this.handleValidSubmit}
                    >
                        <div>
                            <div className="username-label">
                                <b>
                                    {this.props.intl.formatMessage({id: 'registration.createUsername'})}
                                </b>
                                {this.props.usernameHelp ? (
                                    <p className="help-text">{this.props.usernameHelp}</p>
                                ) : (
                                    null
                                )}
                            </div>
                            <Input
                                required
                                className={this.state.validUsername}
                                name="user.username"
                                type="text"
                                validationErrors={{
                                    matchRegexp: this.props.intl.formatMessage({
                                        id: 'registration.validationUsernameRegexp'
                                    }),
                                    minLength: this.props.intl.formatMessage({
                                        id: 'registration.validationUsernameMinLength'
                                    }),
                                    maxLength: this.props.intl.formatMessage({
                                        id: 'registration.validationUsernameMaxLength'
                                    })
                                }}
                                validations={{
                                    matchRegexp: /^[\w-]*$/,
                                    minLength: 3,
                                    maxLength: 20
                                }}
                                onBlur={this.handleUsernameBlur}
                            />
                        </div>
                        <Input
                            required
                            label={
                                this.props.intl.formatMessage({id: 'general.password'})
                            }
                            name="user.password"
                            type={this.state.showPassword ? 'text' : 'password'}
                            validationErrors={{
                                minLength: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordLength'
                                }),
                                notEquals: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordNotEquals'
                                }),
                                notEqualsField: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordNotUsername'
                                })
                            }}
                            validations={{
                                minLength: 6,
                                notEquals: 'password',
                                notEqualsField: 'user.username'
                            }}
                        />
                        <Checkbox
                            help={null}
                            name="showPassword"
                            value={this.state.showPassword}
                            valueLabel={
                                this.props.intl.formatMessage({id: 'registration.showPassword'})
                            }
                            onChange={this.handleChangeShowPassword}
                        />
                        <GeneralError name="all" />
                        <NextStepButton
                            text={<intl.FormattedMessage id="registration.nextStep" />}
                            waiting={this.props.waiting || this.state.waiting}
                        />
                    </Form>
                </Card>
                <StepNavigation
                    active={this.props.activeStep}
                    steps={this.props.totalSteps - 1}
                />
            </Slide>
        );
    }
}

UsernameStep.propTypes = {
    activeStep: PropTypes.number,
    description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    intl: intl.intlShape,
    onNextStep: PropTypes.func,
    showPassword: PropTypes.bool,
    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    totalSteps: PropTypes.number,
    usernameHelp: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    waiting: PropTypes.bool
};

UsernameStep.defaultProps = {
    showPassword: false,
    waiting: false
};

const IntlUsernameStep = injectIntl(UsernameStep);


/*
 * PASSWORD STEP
 */
class ChoosePasswordStep extends React.Component {
    constructor (props) {
        super(props);
        bindAll(this, [
            'handleChangeShowPassword'
        ]);
        this.state = {
            showPassword: props.showPassword
        };
    }
    handleChangeShowPassword (field, value) {
        this.setState({showPassword: value});
    }
    render () {
        return (
            <Slide className="registration-step choose-password-step">
                <h2>
                    {this.props.intl.formatMessage({id: 'registration.choosePasswordStepTitle'})}
                </h2>
                <p className="description">
                    <intl.FormattedMessage id="registration.choosePasswordStepDescription" />
                    <Tooltip
                        tipContent={
                            this.props.intl.formatMessage({id: 'registration.choosePasswordStepTooltip'})
                        }
                        title={'?'}
                    />
                </p>

                <Card>
                    <Form onValidSubmit={this.props.onNextStep}>
                        <Input
                            required
                            label={
                                this.props.intl.formatMessage({id: 'registration.newPassword'})
                            }
                            name="user.password"
                            type={this.state.showPassword ? 'text' : 'password'}
                            validationErrors={{
                                minLength: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordLength'
                                }),
                                notEquals: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordNotEquals'
                                }),
                                notEqualsUsername: this.props.intl.formatMessage({
                                    id: 'registration.validationPasswordNotUsername'
                                })
                            }}
                            validations={{
                                minLength: 6,
                                notEquals: 'password',
                                notEqualsUsername: this.props.username
                            }}
                        />
                        <Checkbox
                            help={null}
                            name="showPassword"
                            value={this.state.showPassword}
                            valueLabel={
                                this.props.intl.formatMessage({id: 'registration.showPassword'})
                            }
                            onChange={this.handleChangeShowPassword}
                        />
                        <NextStepButton
                            text={<intl.FormattedMessage id="registration.nextStep" />}
                            waiting={this.props.waiting || this.state.waiting}
                        />
                    </Form>
                </Card>
                <StepNavigation
                    active={this.props.activeStep}
                    steps={this.props.totalSteps - 1}
                />
            </Slide>
        );
    }
}

ChoosePasswordStep.propTypes = {
    activeStep: PropTypes.number,
    intl: intlShape,
    onNextStep: PropTypes.func,
    showPassword: PropTypes.bool,
    totalSteps: PropTypes.number,
    username: PropTypes.string,
    waiting: PropTypes.bool
};

ChoosePasswordStep.defaultProps = {
    showPassword: false,
    username: null,
    waiting: false
};

const IntlChoosePasswordStep = injectIntl(ChoosePasswordStep);


/*
 * DEMOGRAPHICS STEP
 */
class DemographicsStep extends React.Component {
    constructor (props) {
        super(props);
        bindAll(this, [
            'getMonthOptions',
            'getYearOptions',
            'handleChooseGender',
            'handleValidSubmit'
        ]);
        this.state = {
            otherDisabled: true
        };
    }
    getMonthOptions () {
        return [
            'January', 'February', 'March', 'April', 'May', 'June', 'July',
            'August', 'September', 'October', 'November', 'December'
        ].map((label, id) => ({
            value: (id + 1).toString(),
            label: this.props.intl.formatMessage({id: `general.month${label}`})
        }));
    }
    getYearOptions () {
        return Array.apply(null, Array(100)).map((v, id) => {
            const year = (new Date().getFullYear() - (id + this.props.birthOffset)).toString();
            return {value: year, label: year};
        });
    }
    handleChooseGender (name, gender) {
        this.setState({otherDisabled: gender !== 'other'});
    }
    handleValidSubmit (formData) {
        return this.props.onNextStep(formData);
    }
    isValidBirthdate (year, month) {
        const birthdate = new Date(
            year,
            month - 1,
            1
        );
        return (((Date.now() - birthdate) / (24 * 3600 * 1000 * 365.25)) >= this.props.birthOffset);
    }
    birthDateValidator (values) {
        const isValid = this.isValidBirthdate(values['user.birth.year'], values['user.birth.month']);
        return isValid ? true : this.props.intl.formatMessage({id: 'teacherRegistration.validationAge'});
    }
    render () {
        const countryOptions = getCountryOptions(this.props.intl, DEFAULT_COUNTRY);
        return (
            <Slide className="registration-step demographics-step">
                <h2>
                    <intl.FormattedMessage id="registration.personalStepTitle" />
                </h2>
                <p className="description">
                    {this.props.description ?
                        this.props.description :
                        <intl.FormattedMessage id="registration.personalStepDescription" />
                    }
                    <Tooltip
                        tipContent={
                            this.props.intl.formatMessage({id: 'registration.nameStepTooltip'})
                        }
                        title={'?'}
                    />
                </p>
                <Card>
                    <Form onValidSubmit={this.handleValidSubmit}>
                        <Select
                            required
                            label={
                                this.props.intl.formatMessage({id: 'general.birthMonth'})
                            }
                            name="user.birth.month"
                            options={this.getMonthOptions()}
                            validations={{
                                birthDateVal: values => this.birthDateValidator(values)
                            }}
                        />
                        <Select
{'fraction_non_alphanumeric': 0.11003039513677812, 'fraction_numerical': 0.0024316109422492403, 'mean_word_length': 1.171238379433031, 'pattern_counts': {'":': 0, '<': 134, '<?xml version=': 0, '>': 149, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 50, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1672757', 'n_tokens_mistral': 9020, 'n_tokens_neox': 8579, 'n_words': 1436}