craigmit · February 18, 2021 00:42
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8"/>
  <meta name="robots" content="noindex"/>
  <meta name="referrer" content="origin"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>GraphiQL With JWT</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
    }
    .main {
      display: flex;
      flex-flow: column;
      height: 100%;
    }
    .main .row.header {
      flex: 0 1 auto;
    }
    .main .row.content {
      flex: 1 1 auto;
    }
    .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;
    }
    .jwt-token input {
      display: inline-block;
      width: 250px;
      padding: 5px;
      border: 0;
      margin-left: 5px;
      font-size: 12px;
      color: #777;
      border-radius: 3px;
    }
    .jwt-token button#remove-token{
      background: linear-gradient(#f9f9f9,#ececec);
      border-radius: 3px;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.7), inset 0 1px #fff;
      color: #555;
      border: 0;
      margin: 0 5px;
      padding: 5px;
      cursor: pointer;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.10.2/graphiql.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.10.2/graphiql.js"></script>
 </head>
 <body>
 <div class="main">
  <div class="row header jwt-token">JWT Token <input id="jwt-token" placeholder="JWT Token goes here"><button id="remove-token">X</button></div>
  <div id="graphiql" class="row content">Loading...</div>
 </div>
 <script>
  document.getElementById('remove-token').onclick = function() {
    document.getElementById('jwt-token').value = "";
  }

  function graphQLFetcher(graphQLParams) {
    const jwtToken = document.getElementById('jwt-token').value;
    let headers = {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    };
    if (jwtToken) {
      headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': jwtToken ? `Bearer ${jwtToken}` : null
      };
    }
    return fetch('/query', {
      method: 'post',
      headers,
      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.
  // See the README in the top level of this module to learn more about
  // how you can customize GraphiQL by providing different values or
  // additional child elements.
  ReactDOM.render(
    React.createElement(GraphiQL, {
      fetcher: graphQLFetcher,
    }),
    document.getElementById('graphiql')
  );
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<meta name="robots" content="noindex"/>
	<meta name="referrer" content="origin"/>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<title>GraphiQL With JWT</title>
	<style>
	html, body {
	height: 100%;
	margin: 0;
	}
	.main {
	display: flex;
	flex-flow: column;
	height: 100%;
	}
	.main .row.header {
	flex: 0 1 auto;
	}
	.main .row.content {
	flex: 1 1 auto;
	}
	.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;
	}
	.jwt-token input {
	display: inline-block;
	width: 250px;
	padding: 5px;
	border: 0;
	margin-left: 5px;
	font-size: 12px;
	color: #777;
	border-radius: 3px;
	}
	.jwt-token button#remove-token{
	background: linear-gradient(#f9f9f9,#ececec);
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.7), inset 0 1px #fff;
	color: #555;
	border: 0;
	margin: 0 5px;
	padding: 5px;
	cursor: pointer;
	}
	</style>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.10.2/graphiql.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.10.2/graphiql.js"></script>
	</head>
	<body>
	<div class="main">
	<div class="row header jwt-token">JWT Token <input id="jwt-token" placeholder="JWT Token goes here"><button id="remove-token">X</button></div>
	<div id="graphiql" class="row content">Loading...</div>
	</div>
	<script>
	document.getElementById('remove-token').onclick = function() {
	document.getElementById('jwt-token').value = "";
	}

	function graphQLFetcher(graphQLParams) {
	const jwtToken = document.getElementById('jwt-token').value;
	let headers = {
	'Accept': 'application/json',
	'Content-Type': 'application/json'
	};
	if (jwtToken) {
	headers = {
	'Accept': 'application/json',
	'Content-Type': 'application/json',
	'Authorization': jwtToken ? `Bearer ${jwtToken}` : null
	};
	}
	return fetch('/query', {
	method: 'post',
	headers,
	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.
	// See the README in the top level of this module to learn more about
	// how you can customize GraphiQL by providing different values or
	// additional child elements.
	ReactDOM.render(
	React.createElement(GraphiQL, {
	fetcher: graphQLFetcher,
	}),
	document.getElementById('graphiql')
	);
	</script>
	</body>
	</html>