index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>FamilySearch API Explorer</title>
    <link rel="stylesheet" type="text/css" href="index.css">
  </head>
  <body>
    <div class="container">
      
      <h1>API Explorer <small>- FamilySearch Lite JavaScript SDK</small></h1>
      
      <h2>Request</h2>
      
      <div class="url-row">
        <select id="method">
          <option>GET</option>
          <option>POST</option>
          <option>HEAD</option>
          <option>DELETE</option>
        </select>
        <input id="url" type="text" value="/platform/users/current">
        <button id="load-button">Send</button>
      </div>
      
      <div id="headers">
      
        <div class="header-row">
          <span class="label">Accept:</span>
          <select id="accept">
            <option>application/x-fs-v1+json</option>
            <option>application/x-gedcomx-atom+json</option>
          </select>
        </div>
        
        <div class="header-row">
          <span class="label">Redirects:</span>
          <label>
            <input type="checkbox" id="expectRedirect"> expectRedirect
          </label>
          <label>
            <input type="checkbox" id="followRedirect"> followRedirect
          </label>
        </div>
        
        <div class="header-row">
          <span class="label">Authorization:</span>
          <input id="access-token-display"/>
          <div id="auth-status">
            <button id="login-btn">Login</button>
            <button id="logout-btn">Logout</button>
          </div>
        </div>
      
      </div>
      
      <textarea id="request-body" placeholder="Request Body"></textarea>
      
      <h2>Response</h2>
      <pre id="output"></pre>
      
      <h2>Pro Tips</h2>
      
      <ul id="pro-tips">
        
        <li>Login with a sandbox account. Visit the <a href="https://familysearch.org/developers/">FamilySearch Developers</a>
        website to learn about how to get one.</li>
        
        <li>Links in the response body are clickable and will automatically
        populate the URL when clicked.</li>
        
        <li>XMLHttpRequest hides some information. View the full request and 
        response in the developer console of your browser.</li>
        
        <li>If you get a 406 Not Acceptable response it means the Accept header
        was set to a value that the current endpoint does not support so try
        changing the Accept header value.</li>
        
        <li>Review the list of <a href="https://familysearch.org/developers/docs/guides/http-status-codes">HTTP Status Codes</a>
        and their meaning if you don't understand the response.</li>
        
      </ul>
    </div>
    
    <script src="https://unpkg.com/fs-js-lite@2.0.0-beta.1/dist/FamilySearch.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>