{{#*inline "main"}}
<p>
  Connect in the ATmosphere
</p>

<p id="error-message" class="hidden"></p>

<p id="prompt" class="detail">
  <span class="parent-host">{{ parent_host }}</span> wants to confirm your handle
</p>

<div id="loader" {{#unless did}}class="hidden"{{/unless}}>
  <span class="spinner"></span>
</div>

<div id="user-info">
  <form id="form-action" action="/auth" method="GET" target="_blank" class="action {{#if did}}hidden{{/if}}">
    <label>
      @<input id="handle-input" class="handle" name="handle" placeholder="example.bsky.social" />
    </label>
    <button id="connect" type="submit">connect</button>
  </form>

  <div id="handle-action" class="action">
    <span id="handle-view" class="handle"></span>
    <button id="allow">Allow</button>
  </div>
</div>

<div id="need-storage" class="hidden">
  <p class="problem">Sorry, your browser is blocking access.</p>
  <p>
    Try <a href="/" target="_blank">connecting directly</a> first (but no promises).
    Clicking <button id="desperation">this button</button> might also help.
  </p>
</div>



<script>
const errorEl = document.getElementById('error-message');
const promptEl = document.getElementById('prompt');
const loaderEl = document.getElementById('loader');
const infoEl = document.getElementById('user-info');
const handleInputEl = document.getElementById('handle-input');
const handleViewEl = document.getElementById('handle-view');
const formEl = document.getElementById('form-action'); // for anon
const allowEl = document.getElementById('handle-action'); // for known-did
const connectEl = document.getElementById('connect'); // for anon
const needStorageEl = document.getElementById('need-storage'); // for safari/frame isolation
const desperationEl = document.getElementById('desperation');

function err(e, msg) {
  loaderEl.classList.add('hidden');
  errorEl.classList.remove('hidden');
  errorEl.textContent = msg || e;
  throw new Error(e);
}

// already-known user
({{{json did}}}) && (async () => {
  const handle = await lookUp({{{json fetch_key}}});
  loaderEl.classList.add('hidden');
  handleViewEl.textContent = `@${handle}`;
  allowEl.addEventListener('click', () => shareAllow(handle, {{{json token}}}));
})();

// anon user
formEl.onsubmit = e => {
  e.preventDefault();
  loaderEl.classList.remove('hidden');
  // TODO: include expected referer! (..this system is probably bad)
  // maybe a random localstorage key that we specifically listen for?
  const url = new URL('/auth', window.location);
  url.searchParams.set('handle', handleInputEl.value);
  window.open(url, '_blank');
};

// check if we may be partitioned, preventing access after auth completion
// this should only happen if on a browser that implements storage access api
if ('hasStorageAccess' in document) {
  document.hasStorageAccess().then((hasAccess) => {
    if (!hasAccess) {
      promptEl.classList.add('hidden');
      infoEl.classList.add('hidden');
      needStorageEl.classList.remove('hidden');
      desperation.addEventListener('click', () => {
        document.requestStorageAccess({
          cookies: true,
          localStorage: true,
        }).then(
          () => {
            desperation.textContent = "(maybe helped?)";
            setTimeout(() => location.reload(), 350);
          },
          () => desperation.textContent = "(doubtful)",
        );
      })
    }
  });
}

window.addEventListener('storage', async e => {
  // here's a fun minor vuln: we can't tell which flow triggers the storage event.
  // so if you have two flows going, it grants for both (or the first responder?) if you grant for either.
  // (letting this slide while parent pages are allowlisted to microcosm only)

  if (e.key !== 'who-am-i') return;
  if (e.newValue === null) return;

  const details = e.newValue;
  if (!details) {
    console.error("hmm, heard from localstorage but did not get DID", details, e);
    err('sorry, something went wrong getting your details');
  }

  let parsed;
  try {
    parsed = JSON.parse(details);
  } catch (e) {
    err(e, "something went wrong getting the details back");
  }

  const fail = (e, msg) => {
    loaderEl.classList.add('hidden');
    formEl.classList.remove('hidden');
    handleInputEl.focus();
    handleInputEl.select();
    err(e, msg);
  }

  if (parsed.result === "fail") {
    fail(`uh oh: ${parsed.reason}`);
  }

  if (parsed.result === "deny") {
    fail(parsed.reason);
  }

  infoEl.classList.add('hidden');

  const handle = await lookUp(parsed.fetch_key);

  shareAllow(handle, parsed.token);
});

async function lookUp(fetch_key) {
  let info;
  try {
    const resp = await fetch('/user-info', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ fetch_key }),
    });
    if (!resp.ok) throw resp;
    info = await resp.json();
  } catch (e) {
    err(e, `failed to resolve handle from DID with ${fetch_key}`);
  }
  return info.handle;
}

const parentTarget = {{{json parent_target}}} ?? {{{json parent_origin}}};

const shareAllow = (handle, token) => {
  try {
    top.postMessage(
      { action: "allow", handle, token },
      parentTarget,
    );
  } catch (e) {
    err(e, 'Identity verified but failed to connect with app');
  };
  promptEl.textContent = '✔️ shared';
}

const shareDeny = reason => {
  top.postMessage(
    { action: "deny", reason },
    parentTarget,
  );
}
</script>

{{/inline}}

{{#> base-framed}}{{/base-framed}}