jona7o/index.html

## index.html
<!--
 * LICENSE AGREEMENT For GraphiQL software
 *
 * Facebook, Inc. (“Facebook”) owns all right, title and interest, including all
 * intellectual property and other proprietary rights, in and to the GraphiQL
 * software. Subject to your compliance with these terms, you are hereby granted a
 * non-exclusive, worldwide, royalty-free copyright license to (1) use and copy the
 * GraphiQL software; and (2) reproduce and distribute the GraphiQL software as
 * part of your own software (“Your Software”). Facebook reserves all rights not
 * expressly granted to you in this license agreement.
 *
 * THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS OR
 * IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. IN NO
 * EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICES, DIRECTORS OR EMPLOYEES BE
 * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
 * HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
 * LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 * THE USE OF THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 * You will include in Your Software (e.g., in the file(s), documentation or other
 * materials accompanying your software): (1) the disclaimer set forth above; (2)
 * this sentence; and (3) the following copyright notice:
 *
 * Copyright (c) 2015, Facebook, Inc. All rights reserved.
-->
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        height: 100%;
        margin: 0;
        width: 100%;
        overflow: hidden;
      }

      #graphiql {
        height: 100vh;
      }
      .jwt-token {
        background: linear-gradient(#f7f7f7, #e2e2e2);
        border-bottom: 1px solid #d0d0d0;
        font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
        padding: 7px 14px 6px;
        font-size: 14px;
      }
    </style>

    <link rel="stylesheet" href="//cdn.jsdelivr.net/graphiql/0.8.0/graphiql.css" />
    <script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
    <script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
    <script src="//cdn.jsdelivr.net/react/15.3.2/react.min.js"></script>
    <script src="//cdn.jsdelivr.net/react/15.3.2/react-dom.min.js"></script>
    <script src="//cdn.jsdelivr.net/graphiql/0.8.0/graphiql.min.js"></script>
  </head>
  <body>
  <div class="jwt-token">JWT Token <input id="jwt-token" placeholder="JWT Token goes here"></div>
    <div id="graphiql">Loading...</div>

    <script>

      /**
       * This GraphiQL example illustrates how to use some of GraphiQL's props
       * in order to enable reading and updating the URL parameters, making
       * link sharing of queries a little bit easier.
       *
       * This is only one example of this kind of feature, GraphiQL exposes
       * various React params to enable interesting integrations.
       */

      // cookie for jwt
      function setCookie(cname, cvalue, exdays) {
          var d = new Date();
          d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
          var expires = "expires="+d.toUTCString();
          document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
      }

      function getCookie(cname) {
          var name = cname + "=";
          var ca = document.cookie.split(';');
          for(var i = 0; i < ca.length; i++) {
              var c = ca[i];
              while (c.charAt(0) == ' ') {
                  c = c.substring(1);
              }
              if (c.indexOf(name) == 0) {
                  return c.substring(name.length, c.length);
              }
          }
          return "";
      }
      document.getElementById('jwt-token').value = getCookie("jwt")

      // Parse the search string to get url parameters.
      var search = window.location.search;
      var parameters = {};
      search.substr(1).split('&').forEach(function (entry) {
        var eq = entry.indexOf('=');
        if (eq >= 0) {
          parameters[decodeURIComponent(entry.slice(0, eq))] =
            decodeURIComponent(entry.slice(eq + 1));
        }
      });

      // if variables was provided, try to format it.
      if (parameters.variables) {
        try {
          parameters.variables =
            JSON.stringify(JSON.parse(parameters.variables), null, 2);
        } catch (e) {
          // Do nothing, we want to display the invalid JSON as a string, rather
          // than present an error.
        }
      }

      // When the query and variables string is edited, update the URL bar so
      // that it can be easily shared
      function onEditQuery(newQuery) {
        parameters.query = newQuery;
        updateURL();
      }

      function onEditVariables(newVariables) {
        parameters.variables = newVariables;
        updateURL();
      }

      function onEditOperationName(newOperationName) {
        parameters.operationName = newOperationName;
        updateURL();
      }

      function updateURL() {
        var newSearch = '?' + Object.keys(parameters).filter(function (key) {
          return Boolean(parameters[key]);
        }).map(function (key) {
          return encodeURIComponent(key) + '=' +
            encodeURIComponent(parameters[key]);
        }).join('&');
        history.replaceState(null, null, newSearch);
      }

      // Defines a GraphQL fetcher using the fetch API.
      function graphQLFetcher(graphQLParams) {
          const jwtToken = document.getElementById('jwt-token').value;
          setCookie("jwt", jwtToken, 2);
        return fetch('/graphql', {
          method: 'post',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
             'Authorization': jwtToken,
          },
          body: JSON.stringify(graphQLParams),
          credentials: 'include',
        }).then(function (response) {
          return response.text();
        }).then(function (responseBody) {
          try {
            return JSON.parse(responseBody);
          } catch (error) {
            return responseBody;
          }
        });
      }

      // Render <GraphiQL /> into the body.
      ReactDOM.render(
        React.createElement(GraphiQL, {
          fetcher: graphQLFetcher,
          query: parameters.query,
          variables: parameters.variables,
          operationName: parameters.operationName,
          onEditQuery: onEditQuery,
          onEditVariables: onEditVariables,
          onEditOperationName: onEditOperationName
        }),
        document.getElementById('graphiql')
      );
    </script>
  </body>
</html>
	<!--
	* LICENSE AGREEMENT For GraphiQL software
	*
	* Facebook, Inc. (“Facebook”) owns all right, title and interest, including all
	* intellectual property and other proprietary rights, in and to the GraphiQL
	* software. Subject to your compliance with these terms, you are hereby granted a
	* non-exclusive, worldwide, royalty-free copyright license to (1) use and copy the
	* GraphiQL software; and (2) reproduce and distribute the GraphiQL software as
	* part of your own software (“Your Software”). Facebook reserves all rights not
	* expressly granted to you in this license agreement.
	*
	* THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS OR
	* IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
	* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED. IN NO
	* EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICES, DIRECTORS OR EMPLOYEES BE
	* LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
	* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
	* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
	* HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
	* LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
	* THE USE OF THE SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
	*
	* You will include in Your Software (e.g., in the file(s), documentation or other
	* materials accompanying your software): (1) the disclaimer set forth above; (2)
	* this sentence; and (3) the following copyright notice:
	*
	* Copyright (c) 2015, Facebook, Inc. All rights reserved.
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	height: 100%;
	margin: 0;
	width: 100%;
	overflow: hidden;
	}

	#graphiql {
	height: 100vh;
	}
	.jwt-token {
	background: linear-gradient(#f7f7f7, #e2e2e2);
	border-bottom: 1px solid #d0d0d0;
	font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
	padding: 7px 14px 6px;
	font-size: 14px;
	}
	</style>

	<link rel="stylesheet" href="//cdn.jsdelivr.net/graphiql/0.8.0/graphiql.css" />
	<script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
	<script src="//cdn.jsdelivr.net/fetch/0.9.0/fetch.min.js"></script>
	<script src="//cdn.jsdelivr.net/react/15.3.2/react.min.js"></script>
	<script src="//cdn.jsdelivr.net/react/15.3.2/react-dom.min.js"></script>
	<script src="//cdn.jsdelivr.net/graphiql/0.8.0/graphiql.min.js"></script>
	</head>
	<body>
	<div class="jwt-token">JWT Token <input id="jwt-token" placeholder="JWT Token goes here"></div>
	<div id="graphiql">Loading...</div>

	<script>

	/**
	* This GraphiQL example illustrates how to use some of GraphiQL's props
	* in order to enable reading and updating the URL parameters, making
	* link sharing of queries a little bit easier.
	*
	* This is only one example of this kind of feature, GraphiQL exposes
	* various React params to enable interesting integrations.
	*/

	// cookie for jwt
	function setCookie(cname, cvalue, exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
	var expires = "expires="+d.toUTCString();
	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
	}

	function getCookie(cname) {
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i = 0; i < ca.length; i++) {
	var c = ca[i];
	while (c.charAt(0) == ' ') {
	c = c.substring(1);
	}
	if (c.indexOf(name) == 0) {
	return c.substring(name.length, c.length);
	}
	}
	return "";
	}
	document.getElementById('jwt-token').value = getCookie("jwt")

	// Parse the search string to get url parameters.
	var search = window.location.search;
	var parameters = {};
	search.substr(1).split('&').forEach(function (entry) {
	var eq = entry.indexOf('=');
	if (eq >= 0) {
	parameters[decodeURIComponent(entry.slice(0, eq))] =
	decodeURIComponent(entry.slice(eq + 1));
	}
	});

	// if variables was provided, try to format it.
	if (parameters.variables) {
	try {
	parameters.variables =
	JSON.stringify(JSON.parse(parameters.variables), null, 2);
	} catch (e) {
	// Do nothing, we want to display the invalid JSON as a string, rather
	// than present an error.
	}
	}

	// When the query and variables string is edited, update the URL bar so
	// that it can be easily shared
	function onEditQuery(newQuery) {
	parameters.query = newQuery;
	updateURL();
	}

	function onEditVariables(newVariables) {
	parameters.variables = newVariables;
	updateURL();
	}

	function onEditOperationName(newOperationName) {
	parameters.operationName = newOperationName;
	updateURL();
	}

	function updateURL() {
	var newSearch = '?' + Object.keys(parameters).filter(function (key) {
	return Boolean(parameters[key]);
	}).map(function (key) {
	return encodeURIComponent(key) + '=' +
	encodeURIComponent(parameters[key]);
	}).join('&');
	history.replaceState(null, null, newSearch);
	}

	// Defines a GraphQL fetcher using the fetch API.
	function graphQLFetcher(graphQLParams) {
	const jwtToken = document.getElementById('jwt-token').value;
	setCookie("jwt", jwtToken, 2);
	return fetch('/graphql', {
	method: 'post',
	headers: {
	'Accept': 'application/json',
	'Content-Type': 'application/json',
	'Authorization': jwtToken,
	},
	body: JSON.stringify(graphQLParams),
	credentials: 'include',
	}).then(function (response) {
	return response.text();
	}).then(function (responseBody) {
	try {
	return JSON.parse(responseBody);
	} catch (error) {
	return responseBody;
	}
	});
	}

	// Render <GraphiQL /> into the body.
	ReactDOM.render(
	React.createElement(GraphiQL, {
	fetcher: graphQLFetcher,
	query: parameters.query,
	variables: parameters.variables,
	operationName: parameters.operationName,
	onEditQuery: onEditQuery,
	onEditVariables: onEditVariables,
	onEditOperationName: onEditOperationName
	}),
	document.getElementById('graphiql')
	);
	</script>
	</body>
	</html>