1 files changed, 121 insertions, 0 deletions
diff --git a/web/react/components/team_signup_send_invites_page.jsx b/web/react/components/team_signup_send_invites_page.jsx
new file mode 100644
index 000000000..4bc03798b
--- /dev/null
+++ b/web/react/components/team_signup_send_invites_page.jsx
@@ -0,0 +1,121 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var EmailItem = require('./team_signup_email_item.jsx');
+var utils = require('../utils/utils.jsx');
+var ConfigStore = require('../stores/config_store.jsx');
+var client = require('../utils/client.jsx');
+
+module.exports = React.createClass({
+    displayName: 'TeamSignupSendInivtesPage',
+    propTypes: {
+        state: React.PropTypes.object,
+        updateParent: React.PropTypes.func
+    },
+    submitBack: function(e) {
+        e.preventDefault();
+
+        if (config.AllowSignupDomainsWizard) {
+            this.props.state.wizard = 'allowed_domains';
+        } else {
+            this.props.state.wizard = 'team_url';
+        }
+
+        this.props.updateParent(this.props.state);
+    },
+    submitNext: function(e) {
+        e.preventDefault();
+
+        var valid = true;
+
+        if (this.state.emailEnabled) {
+            var emails = [];
+
+            for (var i = 0; i < this.props.state.invites.length; i++) {
+                if (!this.refs['email_' + i].validate(this.props.state.team.email)) {
+                    valid = false;
+                } else {
+                    emails.push(this.refs['email_' + i].getValue());
+                }
+            }
+
+            if (valid) {
+                this.props.state.invites = emails;
+            }
+        }
+
+        if (valid) {
+            this.props.state.wizard = 'username';
+            this.props.updateParent(this.props.state);
+        }
+    },
+    submitAddInvite: function(e) {
+        e.preventDefault();
+        this.props.state.wizard = 'send_invites';
+        if (!this.props.state.invites) {
+            this.props.state.invites = [];
+        }
+        this.props.state.invites.push('');
+        this.props.updateParent(this.props.state);
+    },
+    submitSkip: function(e) {
+        e.preventDefault();
+        this.props.state.wizard = 'username';
+        this.props.updateParent(this.props.state);
+    },
+    getInitialState: function() {
+        return {
+            emailEnabled: !ConfigStore.getSettingAsBoolean('ByPassEmail', false)
+        };
+    },
+    render: function() {
+        client.track('signup', 'signup_team_05_send_invites');
+
+        var content = null;
+        var bottomContent = null;
+
+        if (this.state.emailEnabled) {
+            var emails = [];
+
+            for (var i = 0; i < this.props.state.invites.length; i++) {
+                if (i === 0) {
+                    emails.push(<EmailItem focus={true} key={i} ref={'email_' + i} email={this.props.state.invites[i]} />);
+                } else {
+                    emails.push(<EmailItem focus={false} key={i} ref={'email_' + i} email={this.props.state.invites[i]} />);
+                }
+            }
+
+            content = (
+                <div>
+                    {emails}
+                    <div className='form-group text-right'><a href='#' onClick={this.submitAddInvite}>Add Invitation</a></div>
+                </div>
+            );
+
+            bottomContent = (
+                <p className='color--light'>{'if you prefer, you can invite ' + strings.Team + ' members later'}<br /> and <a href='#' onClick={this.submitSkip}>skip this step</a> for now.</p>
+            );
+        } else {
+            content = (
+                <div className='form-group color--light'>{'Email is currently disabled for your ' + strings.Team + ', and emails cannot be sent. Contact your system administrator to enable email and email invitations.'}</div>
+            );
+        }
+
+        return (
+            <div>
+                <form>
+                    <img className='signup-team-logo' src='/static/images/logo.png' />
+                    <h2>{'Invite ' + utils.toTitleCase(strings.Team) + ' Members'}</h2>
+                    {content}
+                    <div className='form-group'>
+                        <button type='submit' className='btn-primary btn' onClick={this.submitNext}>Next<i className='glyphicon glyphicon-chevron-right'></i></button>
+                    </div>
+                </form>
+                {bottomContent}
+                <div className='margin--extra'>
+                    <a href='#' onClick={this.submitBack}>Back to previous step</a>
+                </div>
+            </div>
+        );
+    }
+});