docs/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Recipe App</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/gh/IdentityModel/oidc-client-js@1.10.1/dist/oidc-client.js"></script>
    <!-- #region snippet-oidc-init -->
    <script>
      function authRedirect() {
        Oidc.Log.logger = console;
        Oidc.Log.level = Oidc.Log.DEBUG;
        const oidcClient = new Oidc.UserManager({
          authority: 'https://auth.oasislabs.com',
          client_id: 'CNXmDjhYHpvxp8ufx67gRa1',
          redirect_uri: `https://oasislabs.github.io/parcel-static-example-login-with-oasis-frontend/callback`,
          response_type: 'code',
          scope: 'openid profile email parcel.public',
          filterProtocolClaims: false,
          loadUserInfo: false,
          extraQueryParams: {
            audience: 'https://api.oasislabs.com/parcel',
          },
          extraTokenParams: {
            audience: 'https://api.oasislabs.com/parcel',
          },
        });
        oidcClient.signinRedirect();
      }
    </script>
    <!-- #endregion snippet-oidc-init -->
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon.ico" />
  </head>
  <body>
    <div class="main">
      <div class="sign-up">
        <h1>Welcome to Rate your S@andwich</h1>
        <h3>The world's leading privacy-first recipe management tool</h3>
        <h4><i>Built by Acme Co.</i></h4>
        <br />
        <h2>Data Privacy</h2>
        <p>
          Here at Acme ltd., your privacy is very important to us. We've
          partnered with Oasis Labs so you can own your recipe data from our
          app.
        </p>
        <p>To set up your Oasis account, click Get Started</p>
        <button onclick="authRedirect()" data-cy="sign-up-oasis">
          Get started with Oasis
        </button>
      </div>
    </div>
    <div class="footer">
      <p class="credit">Photo by Brooke Lark on Unsplash</p>
    </div>
  </body>
</html>