Merge pull request #539 from rgarmsen2295/reformat_part_one

MM-2063 Cosmetic Refactoring

1 files changed, 93 insertions, 38 deletions

diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx
index 2080cc191..67e85d4de 100644
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -7,11 +7,31 @@ var UserStore = require('../stores/user_store.jsx');
 var BrowserStore = require('../stores/browser_store.jsx');
 var Constants = require('../utils/constants.jsx');
 
-module.exports = React.createClass({
-    handleSubmit: function(e) {
+export default class SignupUserComplete extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.handleSubmit = this.handleSubmit.bind(this);
+
+        var initialState = BrowserStore.getGlobalItem(this.props.hash);
+
+        if (!initialState) {
+            initialState = {};
+            initialState.wizard = 'welcome';
+            initialState.user = {};
+            initialState.user.team_id = this.props.teamId;
+            initialState.user.email = this.props.email;
+            initialState.hash = this.props.hash;
+            initialState.data = this.props.data;
+            initialState.original_email = this.props.email;
+        }
+
+        this.state = initialState;
+    }
+    handleSubmit(e) {
         e.preventDefault();
 
-        this.state.user.username = this.refs.name.getDOMNode().value.trim();
+        this.state.user.username = React.findDOMNode(this.refs.name).value.trim();
         if (!this.state.user.username) {
             this.setState({nameError: 'This field is required', emailError: '', passwordError: '', serverError: ''});
             return;
@@ -31,14 +51,14 @@ module.exports = React.createClass({
             return;
         }
 
-        this.state.user.email = this.refs.email.getDOMNode().value.trim();
+        this.state.user.email = React.findDOMNode(this.refs.email).value.trim();
         if (!this.state.user.email) {
             this.setState({nameError: '', emailError: 'This field is required', passwordError: ''});
             return;
         }
 
-        this.state.user.password = this.refs.password.getDOMNode().value.trim();
-        if (!this.state.user.password  || this.state.user.password .length < 5) {
+        this.state.user.password = React.findDOMNode(this.refs.password).value.trim();
+        if (!this.state.user.password || this.state.user.password .length < 5) {
             this.setState({nameError: '', emailError: '', passwordError: 'Please enter at least 5 characters', serverError: ''});
             return;
         }
@@ -48,11 +68,11 @@ module.exports = React.createClass({
         this.state.user.allow_marketing = true;
 
         client.createUser(this.state.user, this.state.data, this.state.hash,
-            function(data) {
+            function createUserSuccess() {
                 client.track('signup', 'signup_user_02_complete');
 
                 client.loginByEmail(this.props.teamName, this.state.user.email, this.state.user.password,
-                    function(data) {
+                    function emailLoginSuccess(data) {
                         UserStore.setLastEmail(this.state.user.email);
                         UserStore.setCurrentUser(data);
                         if (this.props.hash > 0) {
@@ -60,7 +80,7 @@ module.exports = React.createClass({
                         }
                         window.location.href = '/';
                     }.bind(this),
-                    function(err) {
+                    function emailLoginFailure(err) {
                         if (err.message === 'Login failed because email address has not been verified') {
                             window.location.href = '/verify_email?email=' + encodeURIComponent(this.state.user.email) + '&teamname=' + encodeURIComponent(this.props.teamName);
                         } else {
@@ -69,28 +89,12 @@ module.exports = React.createClass({
                     }.bind(this)
                 );
             }.bind(this),
-            function(err) {
+            function createUserFailure(err) {
                 this.setState({serverError: err.message});
             }.bind(this)
         );
-    },
-    getInitialState: function() {
-        var state = BrowserStore.getGlobalItem(this.props.hash);
-
-        if (!state) {
-            state = {};
-            state.wizard = 'welcome';
-            state.user = {};
-            state.user.team_id = this.props.teamId;
-            state.user.email = this.props.email;
-            state.hash = this.props.hash;
-            state.data = this.props.data;
-            state.original_email = this.props.email;
-        }
-
-        return state;
-    },
-    render: function() {
+    }
+    render() {
         client.track('signup', 'signup_user_01_welcome');
 
         if (this.state.wizard === 'finished') {
@@ -134,16 +138,24 @@ module.exports = React.createClass({
             yourEmailIs = <span>Your email address is {this.state.user.email}. You'll use this address to sign in to {config.SiteName}.</span>;
         }
 
-        var emailContainerStyle = "margin--extra";
+        var emailContainerStyle = 'margin--extra';
         if (this.state.original_email) {
-            emailContainerStyle = "hidden";
+            emailContainerStyle = 'hidden';
         }
 
         var email = (
             <div className={emailContainerStyle}>
                 <h5><strong>What's your email address?</strong></h5>
                 <div className={emailDivStyle}>
-                    <input type='email' ref='email' className='form-control' defaultValue={this.state.user.email} placeholder='' maxLength='128' autoFocus={true} />
+                    <input
+                        type='email'
+                        ref='email'
+                        className='form-control'
+                        defaultValue={this.state.user.email}
+                        placeholder=''
+                        maxLength='128'
+                        autoFocus={true}
+                    />
                     {emailError}
                 </div>
             </div>
@@ -155,7 +167,10 @@ module.exports = React.createClass({
         var signupMessage = [];
         if (authServices.indexOf(Constants.GITLAB_SERVICE) >= 0) {
             signupMessage.push(
-                    <a className='btn btn-custom-login gitlab' href={'/' + this.props.teamName + '/signup/gitlab' + window.location.search}>
+                    <a
+                        className='btn btn-custom-login gitlab'
+                        href={'/' + this.props.teamName + '/signup/gitlab' + window.location.search}
+                    >
                         <span className='icon' />
                         <span>with GitLab</span>
                     </a>
@@ -172,7 +187,13 @@ module.exports = React.createClass({
                         <div className='margin--extra'>
                             <h5><strong>Choose your username</strong></h5>
                             <div className={nameDivStyle}>
-                                <input type='text' ref='name' className='form-control' placeholder='' maxLength='128' />
+                                <input
+                                    type='text'
+                                    ref='name'
+                                    className='form-control'
+                                    placeholder=''
+                                    maxLength='128'
+                                />
                                 {nameError}
                                 <p className='form__hint'>Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'</p>
                             </div>
@@ -180,12 +201,26 @@ module.exports = React.createClass({
                         <div className='margin--extra'>
                             <h5><strong>Choose your password</strong></h5>
                             <div className={passwordDivStyle}>
-                            <input type='password' ref='password' className='form-control' placeholder='' maxLength='128' />
+                            <input
+                                type='password'
+                                ref='password'
+                                className='form-control'
+                                placeholder=''
+                                maxLength='128'
+                            />
                             {passwordError}
                         </div>
                         </div>
                     </div>
-                    <p className='margin--extra'><button type='submit' onClick={this.handleSubmit} className='btn-primary btn'>Create Account</button></p>
+                    <p className='margin--extra'>
+                        <button
+                            type='submit'
+                            onClick={this.handleSubmit}
+                            className='btn-primary btn'
+                        >
+                            Create Account
+                        </button>
+                    </p>
                 </div>
             );
         }
@@ -209,7 +244,10 @@ module.exports = React.createClass({
         return (
             <div>
                 <form>
-                    <img className='signup-team-logo' src='/static/images/logo.png' />
+                    <img
+                        className='signup-team-logo'
+                        src='/static/images/logo.png'
+                    />
                     <h5 className='margin--less'>Welcome to:</h5>
                     <h2 className='signup-team__name'>{this.props.teamDisplayName}</h2>
                     <h2 className='signup-team__subdomain'>on {config.SiteName}</h2>
@@ -222,6 +260,23 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
-
+}
 
+SignupUserComplete.defaultProps = {
+    teamName: '',
+    hash: '',
+    teamId: '',
+    email: '',
+    data: null,
+    authServices: '',
+    teamDisplayName: ''
+};
+SignupUserComplete.propTypes = {
+    teamName: React.PropTypes.string,
+    hash: React.PropTypes.string,
+    teamId: React.PropTypes.string,
+    email: React.PropTypes.string,
+    data: React.PropTypes.string,
+    authServices: React.PropTypes.string,
+    teamDisplayName: React.PropTypes.string
+};