CommunitySolidServer/templates/identity/email-password/register-partial.html.ejs

<%
  const isBlankForm = !('prefilled' in locals);
  prefilled = locals.prefilled || {};
%>

<fieldset>
  <legend>Your WebID</legend>
  <p>
    A <em>WebID</em> is a unique identifier for you
    in the form of a URL.
    <br>
    You WebID lets you log in to Solid apps
    and access non-public data in Pods.
  </p>
  <ol>
    <li class="radio">
      <label>
        <input type="radio" id="createWebIdOn" name="createWebId" value="on"<%
        if (isBlankForm || prefilled.createWebId) { %> checked<% } %>>
        Create a new WebID for my Pod.
      </label>
      <p id="createWebIdForm">
        Please also create a Pod below, since your WebID will be stored there.
      </p>
    </li>
    <li class="radio">
      <label>
        <input type="radio" id="createWebIdOff" name="createWebId" value=""<%
        if (!isBlankForm && !prefilled.createWebId) { %> checked<% } %>>
        Use my existing WebID to access my Pod.
      </label>
      <ol id="existingWebIdForm">
        <li>
          <label for="webId">Existing WebID:</label>
          <input id="webId" type="text" name="webId" value="<%= prefilled.webId || '' %>">
        </li>
        <li class="checkbox">
          <label>
            <input type="checkbox" id="register" name="register"<%
            if (isBlankForm || prefilled.register) { %> checked<% } %>>
            Use my new account to log in with this WebID.
          </label>
        </li>
      </ol>
    </li>
  </ol>
</fieldset>

<fieldset>
  <legend>Your Pod</legend>
  <p>
    A Pod is a storage place for your data.
  </p>
  <ol>
    <li class="checkbox">
      <label>
        <input type="checkbox" id="createPod" name="createPod"<%
        if (isBlankForm || prefilled.createPod) { %> checked<% } %>>
        Create a new Pod with my WebID as owner<% if (!locals.allowRoot) { %>.<% } %>
      </label>
      <ol id="createPodForm">
        <% if (locals.allowRoot) { %>
          <li class="radio">
            <label>
              <input type="radio" id="rootPodOn" name="rootPod" value="on"<%
              if (isBlankForm || prefilled.rootPod) { %> checked<% } %>>
              …in the root.
            </label>
          </li>
          <li class="radio">
            <label>
              <input type="radio" id="rootPodOff" name="rootPod" value=""<%
              if (!isBlankForm && !prefilled.rootPod) { %> checked<% } %>>
              …in its own namespace.
            </label>
          </li>
        <% } %>
        <li id="podNameForm">
          <label for="podName">Pod name:</label>
          <input id="podName" type="text" name="podName" value="<%= prefilled.podName || '' %>">
        </li>
      </ol>
    </li>
  </ol>
</fieldset>

<fieldset>
  <legend>Your account</legend>
  <div>
    <p>
      Choose the credentials you want to use to log in to this server in the future.
    </p>
    <ol>
      <li>
        <label for="email">Email:</label>
        <input id="email" type="text" name="email" value="<%= prefilled.email || '' %>" >
      </li>
    </ol>
    <ol id="passwordForm">
      <li>
        <label for="password">Password:</label>
        <input id="password" type="password" name="password">
      </li>
      <li>
        <label for="confirmPassword">Confirm password:</label>
        <input id="confirmPassword" type="password" name="confirmPassword">
      </li>
    </ol>
  </div>
</fieldset>

<!-- Assist the user with filling out the form by hiding irrelevant fields -->
<script>
  const elements = {};

  // Wires up the DOM element with the specified ID
  function registerElement(id) {
    const element = document.getElementById(id) || document.createElement('input');
    elements[id] = element;
    element.addEventListener('change', synchronizeInputFields);
  }

  // Wire up all elements
  [
    'mainForm',
    'createWebIdOn', 'createWebIdOff', 'createWebIdForm', 'existingWebIdForm', 'webId',
    'createPod', 'createPodForm', 'rootPodOn', 'rootPodOff', 'podNameForm', 'podName',
    'register', 'passwordForm',
  ].forEach(registerElement);

  // Conditions under which elements should be visible
  const visibilityConditions = {
    createWebIdForm: () => elements.createWebIdOn.checked,
    existingWebIdForm: () => elements.createWebIdOff.checked,
    createPodForm: () => elements.createPod.checked,
    podNameForm: () => !elements.rootPodOn.checked,
  };

  // Ensures that the only relevant input fields are visible and enabled
  function synchronizeInputFields({ srcElement } = {}) {
    // The user needs a Pod if they want to create a WebID
    if (elements.createWebIdOn.checked)
      elements.createPod.checked = true;

    // Hide irrelevant fields
    for (const [id, condition] of Object.entries(visibilityConditions))
      setVisibility(id, condition());

    // Lock pod creation if a WebID is requested
    elements.createPod.disabled = elements.createWebIdOn.checked;

    // If child elements have just been activated, focus on them
    if (srcElement?.checked) {
      switch(document.activeElement) {
      case elements.createWebIdOff:
        const { webId } = elements;
        webId.value = webId.value.startsWith('http') ? webId.value : 'https://';
        webId.focus();
        break;
      case elements.createPod:
      case elements.rootPodOff:
        elements.podName.focus();
        break;
      }
    }
  }

  // Prepare the form when the DOM is ready
  addEventListener('DOMContentLoaded', (event) => {
    synchronizeInputFields();
    elements.mainForm.classList.add('loaded');
  });

  // Enable all elements on form submission (otherwise their value is not submitted)
  elements.mainForm.addEventListener('submit', () => {
    for (const child of getDescendants(elements.mainForm)) {
      if (child.name)
        child.disabled = false;
    }
  });
  elements.mainForm.addEventListener('formdata', synchronizeInputFields);
</script>