onboarding/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link rel="stylesheet" type="text/css" href="https://api.pryv.com/style/pryv2.min.css">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400">
  <title>Pryv onboarding</title>
  <script src="https://api.pryv.com/lib-js/pryv.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <h1>Pryv.io onboarding</h1>

    <div class="card">
      <div class="card-body">
          <h2 class="card-title" id="service-name">PLATFORM NAME</h2>
          Welcome ! <br>
          You can sign in or create an account on this Pryv.io platform to save your crawl stroke performance. <br><br>

          Here are the links for:<br>
          <ul>
            <li>Terms and conditions: <a href="" id="service-terms">PLATFORM TERMS</a></li>
            <li>Support: <a href="" id="service-support">SERVICE-SUPPORT</a></li>
            <li>Homepage: <a href="" id="service-home">SERVICE-HOMEPAGE</a></li>
          </ul>

          Click on the button below to authenticate with your app or create a new account (it will appear after making an authentication request below).<br>
          <br>
          <span id="pryv-button"></span>
          <br><br>
          <div id="api-endpoint-div" style="visibility: hidden">You have now been authenticated and can obtain your apiEndpoint: <label id="api-endpoint-text"></label></div>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
        <h2 class="card-title">Service information</h2>
        <br>
        Enter the <a href="https://api.pryv.com/reference/#service-info">service information URL</a> to fetch the required information to customize your welcome message and fetch the URL for the authentication process.<br>
        You can use the selector to initialize the URL depending on your deployment type:
        <br>
        <select name="service-info-select" id="service-info-select">
          <optgroup label="Open Pryv.io">
            <option value="https://my-computer.rec.la:4443/reg/service/info">Dev rec-la SSL</option>
            <option value="http://localhost:3000/reg/service/info">Dev localhost</option>
            <option value="https://{HOSTNAME}/reg/service/info">Your own hostname</option>
          </optgroup>
          <optgroup label="Pryv.io">
            <option value="https://reg.pryv.me/service/info" selected="selected">Pryv Lab</option>
            <option value="https://reg.{DOMAIN}/service/info">Your own domain</option>
          </optgroup>
        </select>
        <div class="form-group">
          <label for="service-info">Service Information URL:</label>
          <input type="text" class="form-control" id="service-info-text" value="https://reg.pryv.me/service/info" />
        </div>
        <button 
          type="button" 
          id="fetch-service-info-button"
          class="btn btn-primary mb-2">Fetch service info</button>
        <br>
        Service information content:

        <pre id="service-info-display"></pre>
      </div>
    </div>

    <div class="card">
      <div class="card-body">
          <h2 class="card-title">Authentication request</h2>
          <br>
          Now that you have fetched the service information, you can get the URL to perform the auth request.<br>
          Access URL: <label id="access-url"></label><br>

          <button 
          type="button" 
          id="auth-request-button"
          class="btn btn-primary mb-2"
          disabled=true
          >Auth request</button>

          <br>
          After clicking, go back to the welcome message on top of the page and press the Login button.

      </div>
    </div>

    <div class="next-example">
      Next example: <a href="../collect-survey-data/index.html">Collect survey data</a>
    </div>
  </div>

</body>

</html>