<commit_before>import React from 'react';
import Modal from 'react-modal';
import {connectToStores} from 'fluxible-addons-react';
import userSignIn from '../../actions/user/userSignIn';
import userSignOut from '../../actions/user/userSignOut';
import UserProfileStore from '../../stores/UserProfileStore';
import ReactDOM from 'react-dom';

const customStyles = {
    content : {
        top                   : '15%',
        left                  : '25%',
        right                 : 'auto',
        bottom                : 'auto',
        marginRight           : '-50%'

    }
};



class LoginModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {openModal: false};
        this.handleLoginButton = this.handleLoginButton.bind(this);
        this.handleExitButton = this.handleExitButton.bind(this);

    }

    componentDidUpdate(prevProps, prevState) {//Workaround to set focus
        if (prevState.openModal !== this.state.openModal && this.state.openModal === true) {
            setTimeout(() => {
                ReactDOM.findDOMNode(this.refs.username1).focus();
            }, 0);
        }
    }

    handleLoginButton(){
        this.setState({openModal: true});

    }

    handleSignoutButton() {
        this.context.executeAction(userSignOut, {});
    }

    signin() {
        this.context.executeAction(userSignIn, {
          //email: this.refs.emailsignin.value,
            username: this.refs.username1.value,
            password: <PASSWORD>
        });

        this.refs.username1.value = '';
        this.refs.password1.value = '';
    }

    handleExitButton(){
        this.setState({openModal: false});

    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.UserProfileStore.errorMessage !== '') {
            $('.ui.form.signin').form('add errors', [nextProps.UserProfileStore.errorMessage]);
        } else if (nextProps.UserProfileStore.userid !== ''){
            this.handleExitButton();
        }
    }
    componentDidMount(){
        if(typeof window !== 'undefined') {
            Modal.setAppElement('#app');
        }
    }

    render() {
        let loginButton = (
            <button ref="signoutButton" className="ui inverted button" onClick={this.handleSignoutButton.bind(this)}>Sign Out</button>
        );
        if (this.props.UserProfileStore.username === '') {
            loginButton = (
                <button ref="loginButton" className="ui inverted button" onClick={this.handleLoginButton}>Sign In</button>
            );
        }

        return(
          <div className="item right" >
            {loginButton}
            <Modal id='signinModal' isOpen={this.state.openModal}  style={customStyles}>
              <div className="ui container">
                  <div className="ui right">
                    <button type="cancel" className="ui basic button" onClick={this.handleExitButton}>
                      <i className="remove icon"></i>Close
                    </button>
                  </div>
                  <div className="ui blue padded center aligned segment">
                    <h1 className="ui dividing header">Sign In</h1>
                    <form className="ui form signin" onSubmit={(e) => {e.preventDefault();}}>
                      <div className="ui five wide icon input field">
                        <div><label htmlFor="username1" hidden>Username</label></div>
                        <input type="username1" id="username1" name="username1" ref="username1" placeholder="Username" autoFocus tabIndex="0"  aria-required="true"/><i className="user icon"></i>
                      </div>
                        <br/>
                      <div className="ui five wide icon input field">
                        <div><label htmlFor="<PASSWORD>" hidden>Password</label></div>
                        <input type="password" id="<PASSWORD>" name="<PASSWORD>" ref="<PASSWORD>" placeholder="Password" tabIndex="0"  aria-required="true"/><i className="lock icon"></i>
                      </div>
                      <br/>
                      <div className="ui error message"></div>
                      <button type="submit" className="ui blue labeled submit icon button" onClick={ this.signin.bind(this)}><i className="icon sign in"></i> Sign In</button>
                    </form>
                    <br/>
                    <div className="ui floated right">
                      <a href="">I can not access my account</a>
                      <br/><br/>
                      <a href="/signup">Don't have an account? Sign up here.</a>
                    </div>
                  </div>
              </div>

            </Modal>
          </div>
      );
    }
}

LoginModal.contextTypes = {
    executeAction: React.PropTypes.func.isRequired
};

LoginModal = connectToStores(LoginModal, [UserProfileStore], (context, props) => {
    return {
        UserProfileStore: context.getStore(UserProfileStore).getState()
    };
});
export default LoginModal;<commit_msg>SWIK-283 redirect to signup using navigateAction<commit_after>import React from 'react';
import Modal from 'react-modal';
import {connectToStores} from 'fluxible-addons-react';
import {navigateAction} from 'fluxible-router';
import userSignIn from '../../actions/user/userSignIn';
import userSignOut from '../../actions/user/userSignOut';
import UserProfileStore from '../../stores/UserProfileStore';
import ReactDOM from 'react-dom';

const customStyles = {
    content : {
        top                   : '15%',
        left                  : '25%',
        right                 : 'auto',
        bottom                : 'auto',
        marginRight           : '-50%'

    }
};



class LoginModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {openModal: false};
        this.handleLoginButton = this.handleLoginButton.bind(this);
        this.handleExitButton = this.handleExitButton.bind(this);

    }

    componentDidUpdate(prevProps, prevState) {//Workaround to set focus
        if (prevState.openModal !== this.state.openModal && this.state.openModal === true) {
            setTimeout(() => {
                ReactDOM.findDOMNode(this.refs.username1).focus();
            }, 0);
        }
    }

    handleLoginButton(){
        this.setState({openModal: true});

    }

    handleSignoutButton() {
        this.context.executeAction(userSignOut, {});
    }

    signin() {
        this.context.executeAction(userSignIn, {
          //email: this.refs.emailsignin.value,
            username: this.refs.username1.value,
            password: this.refs.password1.value
        });

        this.refs.username1.value = '';
        this.refs.password1.value = '';
    }

    handleExitButton(){
        this.setState({openModal: false});

    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.UserProfileStore.errorMessage !== '') {
            $('.ui.form.signin').form('add errors', [nextProps.UserProfileStore.errorMessage]);
        } else if (nextProps.UserProfileStore.userid !== ''){
            this.handleExitButton();
        }
    }
    componentDidMount(){
        if(typeof window !== 'undefined') {
            Modal.setAppElement('#app');
        }
    }

    handleSignupClick() {
        this.setState({openModal: false});
        this.context.executeAction(navigateAction, {
            url: '/signup'
        });
    }

    render() {
        let loginButton = (
            <button ref="signoutButton" className="ui inverted button" onClick={this.handleSignoutButton.bind(this)}>Sign Out</button>
        );
        if (this.props.UserProfileStore.username === '') {
            loginButton = (
                <button ref="loginButton" className="ui inverted button" onClick={this.handleLoginButton}>Sign In</button>
            );
        }

        return(
          <div className="item right" >
            {loginButton}
            <Modal id='signinModal' isOpen={this.state.openModal}  style={customStyles}>
              <div className="ui container">
                  <div className="ui right">
                    <button type="cancel" className="ui basic button" onClick={this.handleExitButton}>
                      <i className="remove icon"></i>Close
                    </button>
                  </div>
                  <div className="ui blue padded center aligned segment">
                    <h1 className="ui dividing header">Sign In</h1>
                    <form className="ui form signin" onSubmit={(e) => {e.preventDefault();}}>
                      <div className="ui five wide icon input field">
                        <div><label htmlFor="username1" hidden>Username</label></div>
                        <input type="username1" id="username1" name="username1" ref="username1" placeholder="Username" autoFocus tabIndex="0"  aria-required="true"/><i className="user icon"></i>
                      </div>
                        <br/>
                      <div className="ui five wide icon input field">
                        <div><label htmlFor="password1" hidden>Password</label></div>
                        <input type="password" id="<PASSWORD>" name="<PASSWORD>" ref="<PASSWORD>" placeholder="Password" tabIndex="0"  aria-required="true"/><i className="lock icon"></i>
                      </div>
                      <br/>
                      <div className="ui error message"></div>
                      <button type="submit" className="ui blue labeled submit icon button" onClick={ this.signin.bind(this)}><i className="icon sign in"></i> Sign In</button>
                    </form>
                    <br/>
                    <div className="ui floated right">
                      <a href="">I can not access my account</a>
                      <br/><br/>
                      <div onClick={this.handleSignupClick.bind(this)}>
                          <a href="#">Don't have an account? Sign up here.</a>
                      </div>
                    </div>
                  </div>
              </div>

            </Modal>
          </div>
      );
    }
}

LoginModal.contextTypes = {
    executeAction: React.PropTypes.func.isRequired
};

LoginModal = connectToStores(LoginModal, [UserProfileStore], (context, props) => {
    return {
        UserProfileStore: context.getStore(UserProfileStore).getState()
    };
});
export default LoginModal;
{'fraction_non_alphanumeric': 0.13600689127105667, 'fraction_numerical': 0.004307044410413476, 'mean_word_length': 1.8856669428334714, 'pattern_counts': {'":': 0, '<': 127, '<?xml version=': 0, '>': 133, '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': '901666', 'n_tokens_mistral': 2796, 'n_tokens_neox': 2671, 'n_words': 557}