<commit_before>'use strict';
var React = require('react');
var Modal = require('react-bootstrap/lib/Modal');
var OverlayMixin = require('react-bootstrap/lib/OverlayMixin');

var Footer = React.createClass({
    contextTypes: {
        session: React.PropTypes.object
    },

    propTypes: {
        version: React.PropTypes.string // App version number
    },

    render: function() {
        var session = this.context.session;
        var disabled = !session;
        var userActionRender;

        // first case is if user is not logged in
        if (!(session && session['auth.userid'])) {
						userActionRender = <LoginBoxes/>
        } else { //if logged in give them a logout link
            userActionRender = <a href="#" data-trigger="logout">Submitter sign out</a>;
        }
        return (
            <footer id="page-footer">
                <div className="container">
                    <div className="row">
                        <div className="app-version">{this.props.version}</div>
                    </div>
                </div>
                <div className="page-footer">
                    <div className="container">
                        <div className="row">
                            <div className="col-sm-6 col-sm-push-6">
                                <ul className="footer-links">
                                    <li><a href="mailto:<EMAIL>">Contact</a></li>
                                    <li><a href="http://www.stanford.edu/site/terms.html">Terms of Use</a></li>
                                    <li id="user-actions-footer">{userActionRender}</li>
                                </ul>
                                <p className="copy-notice">&copy;{new Date().getFullYear()} Harvard University.</p>
                            </div>

                            <div className="col-sm-6 col-sm-pull-6">
                                <ul className="footer-logos">
									<li><a href="https://commonfund.nih.gov/4dnucleome/index"><img src="/static/img/4DN-logo.png" alt="4DN" id="encode-logo" height="60px" width="106px" /></a></li>
									<li><a href="http://hms.harvard.edu"><img src="/static/img/Harvard-logo.png" alt="Harvard" id="ucsc-logo" width="160px" height="40px" /></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        );
    }
});

// LoginBox Popup
var LoginBoxes = React.createClass({
	contextTypes: {
			fetch: React.PropTypes.func,
			session: React.PropTypes.object,
      navigate: React.PropTypes.func
	},
  mixins: [OverlayMixin],
  getInitialState: function() {
  	return {username: '', password: '', isOpen: false, errormsg: ''};
  },
  usernameFill: function(v) {
  	this.setState({username: v});
  },
  passwordFill: function(v) {
  	this.setState({password: v});
  },
  handleToggle: function () {
	  this.setState({
		  isOpen: !this.state.isOpen
	  });
  },
	loginToServer: function(data) {
			console.log(data);
			// clear any error messages
			this.setState({errormsg : ""});

			// update error msg from fetch
			var updateError = function(msg) {
				console.log("updating error to " + msg);
				this.setState({errormsg : msg});
			}

			fetch('/login', {
				method: "POST",
				body: JSON.stringify(data),
				headers: {
					"Content-Type": "application/json",
				},
				credentials: "same-origin"
      })
      .then(response => {
				console.log("got response" + response.ok);
        if (!response.ok){
					console.log("we got an error during login");
					this.setState({errormsg : "Invalid Login"});
					throw response;
				}
				return response.json();

      })
      .then(session_properties => {
          console.log("got session props as", session_properties);
          this.context.session['auth.userid'] = data.username; 
          var next_url = window.location.href;
          if (window.location.hash == '#logged-out') {
              next_url = window.location.pathname + window.location.search;
          }
          this.context.navigate(next_url, {replace: true});
        },function(error) {
					console.log("got an error" + error);
      })
	},
  handleSubmit: function(e){
    e.preventDefault();
    var username = this.state.username.trim();
	var password = this.state.password.trim();
  	if (username === '' || password === '') {
    	return;
    }
		this.loginToServer({username: username, password: password});
    this.setState({username: '', password: ''});
  },
  render: function () {
	return (
	  <div>
		  <a id="loginbtn" href onClick={this.handleToggle}>Log in</a>
	 </div>
 );
 },

	 renderOverlay: function () {
         if (!this.state.isOpen) {
             return <span/>;
         }<commit_msg>ensure href is present and empty for login link, fixes #38<commit_after>'use strict';
var React = require('react');
var Modal = require('react-bootstrap/lib/Modal');
var OverlayMixin = require('react-bootstrap/lib/OverlayMixin');

var Footer = React.createClass({
    contextTypes: {
        session: React.PropTypes.object
    },

    propTypes: {
        version: React.PropTypes.string // App version number
    },

    render: function() {
        var session = this.context.session;
        var disabled = !session;
        var userActionRender;

        // first case is if user is not logged in
        if (!(session && session['auth.userid'])) {
						userActionRender = <LoginBoxes/>
        } else { //if logged in give them a logout link
            userActionRender = <a href="#" data-trigger="logout">Submitter sign out</a>;
        }
        return (
            <footer id="page-footer">
                <div className="container">
                    <div className="row">
                        <div className="app-version">{this.props.version}</div>
                    </div>
                </div>
                <div className="page-footer">
                    <div className="container">
                        <div className="row">
                            <div className="col-sm-6 col-sm-push-6">
                                <ul className="footer-links">
                                    <li><a href="mailto:<EMAIL>">Contact</a></li>
                                    <li><a href="http://www.stanford.edu/site/terms.html">Terms of Use</a></li>
                                    <li id="user-actions-footer">{userActionRender}</li>
                                </ul>
                                <p className="copy-notice">&copy;{new Date().getFullYear()} Harvard University.</p>
                            </div>

                            <div className="col-sm-6 col-sm-pull-6">
                                <ul className="footer-logos">
									<li><a href="https://commonfund.nih.gov/4dnucleome/index"><img src="/static/img/4DN-logo.png" alt="4DN" id="encode-logo" height="60px" width="106px" /></a></li>
									<li><a href="http://hms.harvard.edu"><img src="/static/img/Harvard-logo.png" alt="Harvard" id="ucsc-logo" width="160px" height="40px" /></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        );
    }
});

// LoginBox Popup
var LoginBoxes = React.createClass({
	contextTypes: {
			fetch: React.PropTypes.func,
			session: React.PropTypes.object,
      navigate: React.PropTypes.func
	},
  mixins: [OverlayMixin],
  getInitialState: function() {
  	return {username: '', password: '', isOpen: false, errormsg: ''};
  },
  usernameFill: function(v) {
  	this.setState({username: v});
  },
  passwordFill: function(v) {
  	this.setState({password: v});
  },
  handleToggle: function () {
	  this.setState({
		  isOpen: !this.state.isOpen
	  });
  },
	loginToServer: function(data) {
			console.log(data);
			// clear any error messages
			this.setState({errormsg : ""});

			// update error msg from fetch
			var updateError = function(msg) {
				this.setState({errormsg : msg});
			}

			fetch('/login', {
				method: "POST",
				body: JSON.stringify(data),
				headers: {
					"Content-Type": "application/json",
				},
				credentials: "same-origin"
      })
      .then(response => {
				console.log("got response" + response.ok);
        if (!response.ok){
					console.log("we got an error during login");
					this.setState({errormsg : "Invalid Login"});
					throw response;
				}
				return response.json();

      })
      .then(session_properties => {
          console.log("got session props as", session_properties);
          this.context.session['auth.userid'] = data.username; 
          var next_url = window.location.href;
          if (window.location.hash == '#logged-out') {
              next_url = window.location.pathname + window.location.search;
          }
          this.context.navigate(next_url, {replace: true});
        },function(error) {
					console.log("got an error" + error);
      })
	},
  handleSubmit: function(e){
    e.preventDefault();
    var username = this.state.username.trim();
		var password = this.state.password.trim();
  	if (username === '' || password === '') {
    	return;
    }
		this.loginToServer({username: username, password: password});
    this.setState({username: '', password: ''});
  },
  render: function () {
		/* href="" will cause mouse pointer to change to the finger on hover */
	return (
	  <div>
		  <a id="loginbtn" href="" onClick={this.handleToggle}>Log in</a>
	 </div>
 );
 },

	 renderOverlay: function () {
         if (!this.state.isOpen) {
             return <span/>;
         }
{'fraction_non_alphanumeric': 0.15493686607327675, 'fraction_numerical': 0.0037259366590767957, 'mean_word_length': 1.916691820102626, 'pattern_counts': {'":': 2, '<': 109, '<?xml version=': 0, '>': 113, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5615146', 'n_tokens_mistral': 3002, 'n_tokens_neox': 2749, 'n_words': 562}