caseylmanus · April 18, 2015 13:49 · calbertts · May 28, 2015
diff --git a/Index.html b/Index.html
 <!DOCTYPE html />
 <html>
 <head>
    <link href="css/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>Login Sample</title>
 </head>
 <body>
    
 </body>
 <script type="text/javascript" src="js/libs/react-with-addons-0.13.1.js"></script>
 <script type="text/javascript" src="js/libs/jquery-1.11.0.min.js"></script>
 <script type="text/javascript" src="js/libs/jquery.mobile-1.4.2.min.js"></script>
 <script>

 var LoginPage = React.createClass({
    getInitialState: function () {
        return { 
            error: false,
            error_text: null,
            user_name: null,
            password: null,
            activity: false
        };
    },
    getTree: function(){
        return {
            type: 'div',
            props: {
                'data-role':'page',
                'data-theme' : 'd',
                'id': 'myPage'
            },
            children: [{
                type: 'div',
                props : {'data-role': 'content'},
                children : [{type: 'img',props: {src:"css/images/cirlogo.png"}, children: []}, this.getLoginTree()]
            }]
        };
    },
    getLoginTree: function(){
        var tree = {
            type: 'div',
            props: {},
            children: []
        };
        if(!this.state.activity){
            tree.type = 'ul';
            tree.props = {"data-role": "listview", "data-inset": "true", id:'myList', className: "loginBox"};
            tree.children.push({
                type: 'li',
                props: {
                    'data-role': 'list-divider',
                    'data-theme': 'a',
                },
                children: ['Login']
            });
            if(this.state.error){
                tree.children.push({
                    type: 'li',
                    props: {style: {color:'red', backgroundColor: '#FFDD00', fontSize:'small'}},
                    children: [this.state.error_text]
                });
            }
            tree.children.push({
                type: 'li',
                props: {},
                children: [{
                    type: 'input',
                    props: {type:'text', onChange: this.userNameChange, 'data-mini': true, placeholder:'Username'},
                    children: []

                }]
            });
            tree.children.push({
                type: 'li',
                props: {},
                children: [{
                    type: 'input',
                    props: {type:'password', onChange: this.passwordChange, 'data-mini': true, placeholder:'Password'},
                    children: []

                }]
            });
            tree.children.push({
                type: 'li',
                props: {},
                children: [{
                    type: 'button',
                    props: {onClick: this.login, "data-role":"button","data-icon": 'check', 'data-mini':true, 'data-corners': 'false', 'data-theme':'a'},
                    children: ['SIGN IN']

                }]
            })


        }
        return tree;
    },
    userNameChange: function(evt){
        this.setState({user_name: evt.target.value});
    },
    passwordChange: function  (evt) {
        this.setState({password: evt.target.value});
    },
    renderTree : function(tree){
        var children = [];
        var self = this;
        tree.children.forEach(function(child){
            if(typeof child === 'string'){
                children.push(child)
            } else {
                children.push(self.renderTree(child));
            }
        });
        return React.createElement(tree.type, tree.props, children);
    },
    login: function(){
        if(!this.state.password || !this.state.user_name){
            this.setState({error: true, error_text: 'Username and password are required.'});
        } else {
            this.setState({activity: true, error: false});
            //do login logic here
        }
    },
    loginFailed: function(){
        this.setState({activity:false, error: true, error_text: 'Login Failed.'});
    },
    componentDidUpdate: function(prevProps, prevState){
        $('#myPage').trigger('create');
        $("#myList").listview('refresh');
    },
    render: function(){
        return this.renderTree(this.getTree());
    }
 });
 React.render(React.createElement(LoginPage, null), document.body);


 window.onerror = function(err, url, line){
    alert('Error: ' + err); 
 };
 </script>

 </html>
	<!DOCTYPE html />
	<html>
	<head>
	<link href="css/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
	<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />
	<title>Login Sample</title>
	</head>
	<body>

	</body>
	<script type="text/javascript" src="js/libs/react-with-addons-0.13.1.js"></script>
	<script type="text/javascript" src="js/libs/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="js/libs/jquery.mobile-1.4.2.min.js"></script>
	<script>

	var LoginPage = React.createClass({
	getInitialState: function () {
	return {
	error: false,
	error_text: null,
	user_name: null,
	password: null,
	activity: false
	};
	},
	getTree: function(){
	return {
	type: 'div',
	props: {
	'data-role':'page',
	'data-theme' : 'd',
	'id': 'myPage'
	},
	children: [{
	type: 'div',
	props : {'data-role': 'content'},
	children : [{type: 'img',props: {src:"css/images/cirlogo.png"}, children: []}, this.getLoginTree()]
	}]
	};
	},
	getLoginTree: function(){
	var tree = {
	type: 'div',
	props: {},
	children: []
	};
	if(!this.state.activity){
	tree.type = 'ul';
	tree.props = {"data-role": "listview", "data-inset": "true", id:'myList', className: "loginBox"};
	tree.children.push({
	type: 'li',
	props: {
	'data-role': 'list-divider',
	'data-theme': 'a',
	},
	children: ['Login']
	});
	if(this.state.error){
	tree.children.push({
	type: 'li',
	props: {style: {color:'red', backgroundColor: '#FFDD00', fontSize:'small'}},
	children: [this.state.error_text]
	});
	}
	tree.children.push({
	type: 'li',
	props: {},
	children: [{
	type: 'input',
	props: {type:'text', onChange: this.userNameChange, 'data-mini': true, placeholder:'Username'},
	children: []

	}]
	});
	tree.children.push({
	type: 'li',
	props: {},
	children: [{
	type: 'input',
	props: {type:'password', onChange: this.passwordChange, 'data-mini': true, placeholder:'Password'},
	children: []

	}]
	});
	tree.children.push({
	type: 'li',
	props: {},
	children: [{
	type: 'button',
	props: {onClick: this.login, "data-role":"button","data-icon": 'check', 'data-mini':true, 'data-corners': 'false', 'data-theme':'a'},
	children: ['SIGN IN']

	}]
	})


	}
	return tree;
	},
	userNameChange: function(evt){
	this.setState({user_name: evt.target.value});
	},
	passwordChange: function (evt) {
	this.setState({password: evt.target.value});
	},
	renderTree : function(tree){
	var children = [];
	var self = this;
	tree.children.forEach(function(child){
	if(typeof child === 'string'){
	children.push(child)
	} else {
	children.push(self.renderTree(child));
	}
	});
	return React.createElement(tree.type, tree.props, children);
	},
	login: function(){
	if(!this.state.password \|\| !this.state.user_name){
	this.setState({error: true, error_text: 'Username and password are required.'});
	} else {
	this.setState({activity: true, error: false});
	//do login logic here
	}
	},
	loginFailed: function(){
	this.setState({activity:false, error: true, error_text: 'Login Failed.'});
	},
	componentDidUpdate: function(prevProps, prevState){
	$('#myPage').trigger('create');
	$("#myList").listview('refresh');
	},
	render: function(){
	return this.renderTree(this.getTree());
	}
	});
	React.render(React.createElement(LoginPage, null), document.body);


	window.onerror = function(err, url, line){
	alert('Error: ' + err);
	};
	</script>

	</html>