summaryrefslogtreecommitdiffstats
path: root/web/react/components/team_signup_allowed_domains_page.jsx
blob: 721fa142a294e5e1899e53b099187ac79764118c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.

var Client = require('../utils/client.jsx');
import {strings} from '../utils/config.js';

export default class TeamSignupAllowedDomainsPage extends React.Component {
    constructor(props) {
        super(props);

        this.submitBack = this.submitBack.bind(this);
        this.submitNext = this.submitNext.bind(this);

        this.state = {};
    }
    submitBack(e) {
        e.preventDefault();
        this.props.state.wizard = 'team_url';
        this.props.updateParent(this.props.state);
    }
    submitNext(e) {
        e.preventDefault();

        if (React.findDOMNode(this.refs.open_network).checked) {
            this.props.state.wizard = 'send_invites';
            this.props.state.team.type = 'O';
            this.props.updateParent(this.props.state);
            return;
        }

        if (React.findDOMNode(this.refs.allow).checked) {
            var name = React.findDOMNode(this.refs.name).value.trim();
            var domainRegex = /^\w+\.\w+$/;
            if (!name) {
                this.setState({nameError: 'This field is required'});
                return;
            }

            if (!name.trim().match(domainRegex)) {
                this.setState({nameError: 'The domain doesn\'t appear valid'});
                return;
            }

            this.props.state.wizard = 'send_invites';
            this.props.state.team.allowed_domains = name;
            this.props.state.team.type = 'I';
            this.props.updateParent(this.props.state);
        } else {
            this.props.state.wizard = 'send_invites';
            this.props.state.team.type = 'I';
            this.props.updateParent(this.props.state);
        }
    }
    render() {
        Client.track('signup', 'signup_team_04_allow_domains');

        var nameError = null;
        var nameDivClass = 'form-group';
        if (this.state.nameError) {
            nameError = <label className='control-label'>{this.state.nameError}</label>;
            nameDivClass += ' has-error';
        }

        return (
            <div>
                <form>
                    <img
                        className='signup-team-logo'
                        src='/static/images/logo.png'
                    />
                    <h2>Email Domain</h2>
                    <p>
                        <div className='checkbox'>
                            <label>
                                <input
                                    type='checkbox'
                                    ref='allow'
                                    defaultChecked={true}
                                />
                                {' Allow sign up and ' + strings.Team + ' discovery with a ' + strings.Company + ' email address.'}
                            </label>
                        </div>
                    </p>
                    <p>{'Check this box to allow your ' + strings.Team + ' members to sign up using their ' + strings.Company + ' email addresses if you share the same domain--otherwise, you need to invite everyone yourself.'}</p>
                    <h4>{'Your ' + strings.Team + '\'s domain for emails'}</h4>
                    <div className={nameDivClass}>
                        <div className='row'>
                            <div className='col-sm-9'>
                                <div className='input-group'>
                                    <span className='input-group-addon'>@</span>
                                    <input
                                        type='text'
                                        ref='name'
                                        className='form-control'
                                        placeholder=''
                                        maxLength='128'
                                        defaultValue={this.props.state.team.allowed_domains}
                                        autoFocus={true}
                                        onFocus={this.handleFocus}
                                    />
                                </div>
                            </div>
                        </div>
                        {nameError}
                    </div>
                    <p>To allow signups from multiple domains, separate each with a comma.</p>
                    <p>
                        <div className='checkbox'>
                            <label>
                                <input
                                    type='checkbox'
                                    ref='open_network'
                                    defaultChecked={this.props.state.team.type === 'O'}
                                /> Allow anyone to signup to this domain without an invitation.</label>
                        </div>
                    </p>
                    <button
                        type='button'
                        className='btn btn-default'
                        onClick={this.submitBack}
                    >
                        <i className='glyphicon glyphicon-chevron-left'></i> Back
                    </button>&nbsp;
                    <button
                        type='submit'
                        className='btn-primary btn'
                        onClick={this.submitNext}
                    >
                        Next<i className='glyphicon glyphicon-chevron-right'></i>
                    </button>
                </form>
            </div>
        );
    }
}

TeamSignupAllowedDomainsPage.defaultProps = {
    state: {}
};
TeamSignupAllowedDomainsPage.propTypes = {
    state: React.PropTypes.object,
    updateParent: React.PropTypes.func
};