<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="New Judge Form">
    <meta name="author" content="Team Summer 2015">
    <title>Mobile Judge: Password Recovery</title>
    <!-- Bootstrap core CSS -->
    <link href="/thirdparty/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/thirdparty/font-awesome/css/font-awesome.css" rel="stylesheet">
    <!-- Add custom CSS here -->
    <link href="/css/custom.css" rel="stylesheet">
    <script src="/scripts/console-polyfill.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-sham.min.js"></script>
    <script src="/thirdparty/jquery/jquery-1.11.3.min.js"></script>
    <script src="/thirdparty/react/react-with-addons.min.js"></script>
    <script src="/thirdparty/react/JSXTransformer.js"></script>
    <script src="/scripts/bootstrap.min.js"></script>
    <script src="/modelsjs/users.js"></script>
    <noscript>Mobile Judge requires javascript enabled for each one of its functions, please use a browser capable of executing javascript.</noscript>
</head>

<body>
<script type="text/jsx">

    //Header used in all of the pages
    var Header = React.createClass({
        render: function () {
            console.log("handleClick HEADER", this);
            return (
                <header>
                    <nav className="navbar navbar-default navbar-fixed-top custom-navbar no-border-radius" role="navigation">
                        <div className="wrapper">
                            <div className="badge">
                                <i className="left"></i>
                                <i className="right"></i>
                                BETA
                            </div>
                        </div>
                        <div className="container">
                            <div className="navbar-header">
                                <button type="button" className="navbar-toggle collapsed navbar-header-btn"
                                        data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                    <span className="sr-only">Toggle navigation</span>
                                    <span className="icon-bar custom-bar"></span>
                                    <span className="icon-bar custom-bar"></span>
                                    <span className="icon-bar custom-bar"></span>
                                </button>
                                <a href="#" className="navbar-btn" role="button">
                                    <i className="back-icon glyphicon2 glyphicon-circle-arrow-left"></i>
                                    <span className="hidden-xs">Back</span>
                                </a>
                            </div>

                            <div className="navbar-brand-center">
                                <span className="bar-title">Mobile Judge</span>
                            </div>
                        </div>
                    </nav>
                </header>
            );
        }
    });

    var Alert = React.createClass({
        getInitialState: function () {
            return ({
                show: false,
                type: "info",
                messages: []
            })
        },
        render: function (){
            if(this.props.show != true)
            {
                return (false);
            }
            return(
                <div className={'alert alert-' + this.props.type}>
                    {
                        this.props.messages.map(function(m){
                            return (<p>{m}</p>)
                        })
                    }
                </div>
            )
        }
    })
    
    var UserForm = React.createClass({
        getInitialState: function () {
            return ({
                judge: {
                    Email: '',
                },
                formErrors: []
            })

        },
        componentWillMount: function () {
            console.log("COMPONENT WILL MOUNT");
            $(UserEntity).on('JudgesHasChanged', function () {
                this.setState({judge: UserEntity.getJudge()});
            }.bind(this))
        },

        handleClick: function (event) {
            event.preventDefault();
            var errors= [];
            var options = {};

            password1 = this.refs.Password1.getDOMNode().value;
            password2 = this.refs.Password2.getDOMNode().value;

            if(password2 != password1)
            {
                errors.push("Passwords don't match, please try again");
            }

            if(password1.length < 1)
            {
                errors.push("Password can not be empty");
            }

            this.setState({formErrors: errors})
            if(errors.length == 0)
            {
                options.pass = this.refs.Password1.getDOMNode().value;
                UserEntity.updateJudge(options, this.props.judgeData.id);
                this.props.onViewChange("UserConfirmation");
            }
        },

        render: function () {
            console.log("JUDGEDATA", this.props.judgeData);
            return (
                <div className='row'>
                    <div className="page-header">
                        <h1>Password Recovery</h1>
                    </div>
                    <Alert show={this.state.formErrors.length > 0} type="danger" messages={this.state.formErrors}/>
                    <div className='form-group'>
                        <input type='text' className='form-control' placeholder={this.props.judgeData.email} readOnly/>
                    </div>
                    <Alert show={true} type="info" messages={["Password can not be left empty."]}/>
                    <div className='form-group'>
                        <div className='input-group full-width'>
                            <span className='input-group-addon form-custom-addon-long' id=''>* Password</span>
                            <input ref="Password1" type='password' className='form-control' placeholder='' aria-describedby=''/>
                        </div>
                    </div>
                    <div className='form-group'>
                        <div className='input-group full-width'>
                            <span className='input-group-addon form-custom-addon-long' id=''>* Retry Password</span>
                            <input ref="Password2" type='password' className='form-control' placeholder='' aria-describedby=''/>
                        </div>
                    </div>
                    <div className='form-group'>
                        <div className='input-group full-width'>
                            <button type='submit' id='loginme' className='btn btn-lightblue btn-block' onClick={this.handleClick}>
                                Next
                            </button>
                        </div>
                    </div>
                </div>
            )
        }
    })

    var UserConfirmation = React.createClass({
        render: function () {
            console.log("JUDGEDATA", this.props.judgeData);
            return (
                <div className='row'>
                    <div className="page-header">
                        <h1>Your Password has been Updated Successfully</h1>
                    </div>
                    <div className="alert alert-info">
                        You can now log login at
                        <a href="/"> Mobile Judge Summer 2015</a> 
                    </div>
                </div>

            )
        }
    })


    var Footer = React.createClass({
        render: function () {
            return (
                <nav className='navbar navbar-default navbar-fixed-bottom'>
                    <div className='container-fluid no-padding text-center' style={{padding:"15px"}}>
                        <b>Mobile Judge: Summer 2015</b>
                    </div>
                </nav>
            )
        }
    })

    var Content = React.createClass({
        render: function () {
            {console.log(this,"You got here Reder Content")}
            return this.props.view
        }
    });

    var App = React.createClass({
        getInitialState: function () {
            return ({
                currView: "UserForm",
                judge: {
                    Email: '',
                    termid: '',
                    judgeid: ''
                }
            })

        },
        changeView: function (view) {
            this.setState({currView: view});
        },

        componentWillMount: function () {
            console.log("COMPONENT WILL MOUNT APP");
            $(UserEntity).on('JudgesHasChanged', function () {
                this.setState({judge: UserEntity.getJudge()});
            }.bind(this))
        },

        render: function() {
            {console.log("You got here Reder APP")};
            var result = '';
            if(this.state.currView == "UserForm")
                result = <UserForm onViewChange={this.changeView} judgeData={judge} />;
            if(this.state.currView == "UserConfirmation")
                result = <UserConfirmation onViewChange={this.changeView} judgeData={judge}/>;
            return (
                <div className="container">
                    <Header onViewChange={this.changeView}/>
                    <Content judgeData={judge} view={result} onViewChange={this.changeView} />
                    <Footer />
                </div>
            )
        }
    })

    React.render(<App />, document.body);
    UserEntity.loadJudgeInvite(<?=$userid?>);
</script>

<!-- JavaScript -->
</body>
</html>

