{{ define "content" }}
<p>welcome to penguins.lan, penguin! by joining, you promise to be a good penguin &lt;3</p>

{{ with .Portal }}
  {{ if .Taken }}
  <div class="info">
    <form action="/portal" method="post">
      <p><strong>{{ .RequestedName }}</strong> is already taken, last seen <strong>{{ .LastSeen }}</strong>. is that you?</p>
      <input type="hidden" name="username" value="{{ .RequestedName }}">
      <input type="hidden" name="reclaim" value="1">
      <button>yes, i am {{ .RequestedName }}</button>
    </form>
  </div>
  {{ end }}
  <br>
  <form action="/portal" method="post" id="loginForm">
    <label for="username">{{ if .Taken }} no? {{ end }} i want to be called</label>
    <input id="username" name="username" placeholder="{{ .SuggestedName }}" maxlength="24" autofocus>
    <button type="submit">enter</button>
  </form>

  {{ if .DetectedMAC }}
  <p class="muted"><small>this device: <code>{{ .DetectedMAC }}</code>.</small></p>
  {{ end }}
{{ end }}
{{ end }}

<script>
  const urlParamsText = window.location.href.split('?')[1];
  const urlParams = new URLSearchParams(urlParamsText);
  const paramsObj = Object.fromEntries(urlParams.entries());
  if (paramsObject['_token'] && paramsObject['_authaction']) {
    const form = document.getElementById("loginForm");
    const isEmpty = (formData, keys) => {
      const obj = Object.fromEntries(formData.entries());
      if (keys === undefined) keys = Object.keys(obj);
      return keys.every(key => !obj[key]);
    }
    const send = async () => {
      await fetch(paramsObject['_authaction'] + '?tok=' + paramsObject['_token'], {
        mode: "no-cors"
      });
      const data = new FormData(form);
      await fetch(form.action, {
        method: form.method,
        body: data
      });
    };
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      send().then(() => { window.location.href = "/"; });
    })
  }
</script>