<commit_before>
import reactMixin from 'react-mixin';
import ValidationMixin from 'react-validation-mixin';
import Joi from 'joi';
import GroupSelect from './group-select.jsx';
import TemplateSelect from './template-select.jsx';


export class Form extends React.Component {

    constructor (args) {
        super(args);

        this.state = this.initialState();
        this.validatorTypes = this.getValidatorTypes();

        _.bindAll(this, 'onSubmit', 'render', 'onCancel');
    }

    getValidatorTypes () {
        return {
            name: Joi.string().required().max(6).label('Name')
//        lastName: Joi.string().allow(null).label('Last Name'),
//        email: Joi.string().email().label('Email Address'),
//        username:  Joi.string().alphanum().min(3).max(30).required().label('Username'),
//        password: Joi.string().regex(/[a-zA-Z0-9]{3,30}/).label('Password'),
//        verifyPassword: Joi.any().valid(Joi.ref('password')).required().label('Password Confirmation')
        };
    }

    initialState() {
        return { type: 'STANDARD', dataCenter: this.props.dataCenter };
    }

    onSubmit(e) {
        e.preventDefault();

        this.validate((e) => !e && this.props.onSubmit(this.state));
    }

    onCancel() {
        this.setState(this.state = this.initialState());
    }

    render () {
        return (
            <form onSubmit={this.onSubmit}>
                <div className={this.classesFor('name')}>
                    <label htmlFor="nameField">Name</label>
                    <input type="text" className="form-control" id="nameField" placeholder="Server Name..."
                        valueLink={this.linkState('name')} onBlur={this.handleValidation('name')}  />
                    {this.getValidationMessages('name').map(this.renderHelpText)}
                </div>

                <div className="form-group">
                    <label htmlFor="typeField">Type</label>
                    <select className="form-control" id="typeField" valueLink={this.linkState('type')}>
                        <option value="STANDARD">Standard</option>
                        <option value="HYPERSCALE">Hyperscale</option>
                    </select>
                </div>

                <GroupSelect model={this.state} />

                <div className="form-group">
                    <label htmlFor="cpuField">CPU Count</label>
                    <input type="text" className="form-control" id="cpuField" placeholder="CPU..."
                        valueLink={this.linkState('cpu')} />
                </div>

                <div className="form-group">
                    <label htmlFor="ramField">RAM</label>
                    <input type="text" className="form-control" id="ramField" placeholder="RAM (GB)..."
                        valueLink={this.linkState('ram')} />
                </div>

                <TemplateSelect model={this.state} />

                <div className="pull-right">
                    <button type="submit" className="btn btn-primary">Submit</button>
                    <button type="button" style={{marginLeft: 3}} className="btn btn-default" onClick={this.onCancel}>
                        Cancel
                    </button>
                </div>
            </form>
        );<commit_msg>#44 Prepare Sample Web App to Production<commit_after>
import reactMixin from 'react-mixin';
import ValidationMixin from 'react-validation-mixin';
import Joi from 'joi';
import GroupSelect from './group-select.jsx';
import TemplateSelect from './template-select.jsx';


export class Form extends React.Component {

    constructor (args) {
        super(args);

        this.state = this.initialState();
        this.validatorTypes = this.getValidatorTypes();

        _.bindAll(this, 'onSubmit', 'render', 'onCancel');
    }

    getValidatorTypes () {
        return {
            name: Joi.string().required().max(6).label('Name'),
            cpu: Joi.number().required().min(1).max(1000).label('CPU'),
            ram: Joi.number().required().min(1).max(1000).label("RAM")
//        lastName: Joi.string().allow(null).label('Last Name'),
//        email: Joi.string().email().label('Email Address'),
//        username:  Joi.string().alphanum().min(3).max(30).required().label('Username'),
//        password: Joi.string().regex(/[a-zA-Z0-9]{3,30}/).label('Password'),
//        verifyPassword: Joi.any().valid(Joi.ref('password')).required().label('Password Confirmation')
        };
    }

    initialState() {
        return { type: 'STANDARD', dataCenter: this.props.dataCenter };
    }

    onSubmit(e) {
        e.preventDefault();

        this.validate((e) => !e && this.props.onSubmit(this.state));
    }

    onCancel() {
        this.setState(this.state = this.initialState());
    }

    render () {
        return (
            <form onSubmit={this.onSubmit}>
                <div className={this.classesFor('name')}>
                    <label htmlFor="nameField">Name</label>
                    <input type="text" className="form-control" id="nameField" placeholder="Server Name..."
                        valueLink={this.linkState('name')} onBlur={this.handleValidation('name')}  />
                    {this.getValidationMessages('name').map(this.renderHelpText)}
                </div>

                <div className="form-group">
                    <label htmlFor="typeField">Type</label>
                    <select className="form-control" id="typeField" valueLink={this.linkState('type')}>
                        <option value="STANDARD">Standard</option>
                        <option value="HYPERSCALE">Hyperscale</option>
                    </select>
                </div>

                <GroupSelect model={this.state} />

                <div className={this.classesFor('cpu')}>
                    <label htmlFor="cpuField">CPU Count</label>
                    <input type="text" className="form-control" id="cpuField" placeholder="CPU..."
                           valueLink={this.linkState('cpu')} onBlur={this.handleValidation('cpu')} />
                    {this.getValidationMessages('cpu').map(this.renderHelpText)}
                </div>

                <div className={this.classesFor('ram')}>
                    <label htmlFor="ramField">RAM</label>
                    <input type="text" className="form-control" id="ramField" placeholder="RAM (GB)..."
                        valueLink={this.linkState('ram')} onBlur={this.handleValidation('ram')} />
                    {this.getValidationMessages('ram').map(this.renderHelpText)}
                </div>

                <TemplateSelect model={this.state} />

                <div className="pull-right">
                    <button type="submit" className="btn btn-primary">Submit</button>
                    <button type="button" style={{marginLeft: 3}} className="btn btn-default" onClick={this.onCancel}>
                        Cancel
                    </button>
                </div>
            </form>
        );
{'fraction_non_alphanumeric': 0.15969852104664392, 'fraction_numerical': 0.004550625711035267, 'mean_word_length': 1.9978687127024723, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 75, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3139059', 'n_tokens_mistral': 1945, 'n_tokens_neox': 1833, 'n_words': 304}