<div id="response-createPod">
  <h2>Your new Pod</h2>
  <p>
    Your new Pod is located at <a id="response-podBaseUrl" href="" class="link"></a>.
    <br>
    You can store your documents and data there.
  </p>
</div>

<div id="response-createWebId">
  <h2>Your new WebID</h2>
  <p>
    Your new WebID is <a id="response-createdWebId" href="" class="link"></a>.
    <br>
    You can use this identifier to interact with Solid pods and apps.
  </p>
</div>

<div id="response-register">
  <h2>Your new account</h2>
  <p>
    Via your email address <em id="response-email"></em>,
    this server lets you log in to Solid apps
    with your WebID <a id="response-registeredWebId" href="" class="link"></a>
  </p>
  <div id="response-registerWebId">
    <p>
      You will need to add the triple
      <code id="response-oidcIssuerTriple"></code>
      to your existing WebID document <em id="response-existingWebId"></em>
      to indicate that you trust this server as a login provider.
    </p>
  </div>
  <p>
    You can now <a id="response-login-link" href="">log in</a>.
  </p>
</div>

<script>
  function updateResponseFields(json) {
    updateElement('response-podBaseUrl', json.podBaseUrl, { innerText: true, href: true });
    updateElement('response-createdWebId', json.webId, { innerText: true, href: true });
    updateElement('response-registeredWebId', json.webId, { innerText: true, href: true });
    const triple = `<${json.webId}> <http://www.w3.org/ns/solid/terms#oidcIssuer> <${json.oidcIssuer}>.`;
    updateElement('response-oidcIssuerTriple', triple, { innerText: true });
    updateElement('response-existingWebId', json.webId, { innerText: true });
    updateElement('response-email', json.email, { innerText: true });
    setVisibility('response-createPod', json.createPod);
    setVisibility('response-createWebId', json.createWebId);
    setVisibility('response-registerWebId', !json.createWebId);
    setVisibility('response-register', json.register);
    updateElement('response-login-link', json.controls.login, { href: true });
  }
</script>
