@sphoro/bugcatch-web-sdk 0.16.0 → 0.18.0

package/src/panel/signin.js

@@ -0,0 +1,228 @@
+// Who is reporting.
+//
+// Three states, and the project picks which: 'off' is every project that has
+// not asked for this and draws nothing at all; 'optional' offers a sign-in
+// above the form that the reporter may ignore; 'required' replaces the form
+// with it until they have.
+//
+// Asked on every open rather than remembered for the page, because the answer
+// includes whether this browser's session is still live — and it can end
+// somewhere else, when the same address signs in on another device. A widget
+// holding a cached "signed in as you" would find out at the moment the report
+// failed, which is the worst moment to discover it.
+
+import { escapeHtml } from './render.js';
+
+export function mountSignIn(ctx) {
+  const {
+    client, say, compose, sendBtn, historyBtn, callBtn, whoami,
+  } = ctx;
+
+  let login = { mode: client.lastLoginMode || 'off', signedIn: null };
+  // 'idle' — showing who they are; 'email' / 'code' — the two steps of getting there.
+  let step = 'idle';
+  let pendingEmail = client.config.user?.email || '';
+  let pendingCode = '';
+  let signInBusy = false;
+  let signInError = '';
+
+  const mustSignIn = () => login.mode === 'required' && !login.signedIn;
+
+  /** Show or hide everything that only makes sense once we know who is filing. */
+  function applyGate() {
+    const shut = mustSignIn();
+    compose.hidden = shut;
+    sendBtn.hidden = shut;
+    if (historyBtn) historyBtn.hidden = shut;
+    // The call offer is the same errand as the form, so it goes with it — and
+    // comes back only if the API had already said this project can take one.
+    if (shut) callBtn.hidden = true;
+    else if (ctx.callOffered()) callBtn.hidden = false;
+  }
+
+  function drawWhoami() {
+    if (login.mode === 'off') {
+      whoami.hidden = true;
+      whoami.innerHTML = '';
+      return;
+    }
+    whoami.hidden = false;
+    whoami.classList.toggle('asking', step !== 'idle');
+
+    const problem = signInError ? `<div class="after err">${escapeHtml(signInError)}</div>` : '';
+
+    if (step === 'idle') {
+      if (login.signedIn) {
+        whoami.innerHTML = `<span class="who">Signed in as <strong>${escapeHtml(login.signedIn.email)}</strong></span>`
+          + '<button type="button" class="link" data-act="signout">Sign out</button>';
+        return;
+      }
+      // An address the host application passed for its own signed-in user is
+      // not nothing — the report will carry it — so saying "anonymously" over
+      // the top of one would be untrue. It is simply not proved, which is what
+      // the offer beside it is for.
+      const claimed = client.config.user?.email;
+      whoami.innerHTML = `<span class="who">${login.mode === 'required'
+        ? 'Sign in to report a bug here.'
+        : claimed
+          ? `Reporting as <strong>${escapeHtml(claimed)}</strong>.`
+          : 'Reporting anonymously — sign in and we can tell you what happens next.'}</span>`
+        + '<button type="button" class="link" data-act="signin">Sign in</button>';
+      return;
+    }
+
+    if (step === 'email') {
+      whoami.innerHTML = `
+        <p class="why">Sign in with any email address — we'll send you a code.
+          It's how you hear back about this report${login.mode === 'required' ? ', and this project asks for it' : ''}.</p>
+        <div class="row">
+          <input type="email" data-fld="email" value="${escapeHtml(pendingEmail)}"
+            placeholder="you@example.com" autocomplete="email" spellcheck="false"
+            aria-label="Your email address" ${signInBusy ? 'disabled' : ''} />
+          <button type="button" class="primary" data-act="code" ${signInBusy ? 'disabled' : ''}>
+            ${signInBusy ? 'Sending…' : 'Send code'}
+          </button>
+        </div>
+        ${problem}
+        ${login.mode === 'optional'
+          ? '<div class="after"><button type="button" class="link" data-act="skip">Not now</button></div>'
+          : ''}`;
+      return;
+    }
+
+    whoami.innerHTML = `
+      <p class="why">We sent a code to <strong>${escapeHtml(pendingEmail)}</strong>. It expires in ten minutes.</p>
+      <div class="row">
+        <input type="text" class="code" data-fld="code" value="${escapeHtml(pendingCode)}"
+          placeholder="123456" inputmode="numeric" autocomplete="one-time-code"
+          maxlength="8" aria-label="The code we emailed you" ${signInBusy ? 'disabled' : ''} />
+        <button type="button" class="primary" data-act="confirm" ${signInBusy ? 'disabled' : ''}>
+          ${signInBusy ? 'Checking…' : 'Sign in'}
+        </button>
+      </div>
+      ${problem}
+      <div class="after">
+        <button type="button" class="link" data-act="resend" ${signInBusy ? 'disabled' : ''}>Send it again</button>
+        <button type="button" class="link" data-act="signin-back" ${signInBusy ? 'disabled' : ''}>Use another address</button>
+      </div>`;
+  }
+
+  /** Redraw, and put the cursor where the reporter is being asked to type. */
+  function drawSignIn({ focus = false } = {}) {
+    drawWhoami();
+    applyGate();
+    if (!focus || signInBusy) return;
+    const field = whoami.querySelector('[data-fld]');
+    if (field) { field.focus(); field.setSelectionRange?.(field.value.length, field.value.length); }
+  }
+
+  // Typed values survive a redraw because they are held here, not read back off
+  // a node that the next render replaces.
+  whoami.addEventListener('input', (e) => {
+    const field = e.target.closest('[data-fld]');
+    if (!field) return;
+    if (field.dataset.fld === 'email') pendingEmail = field.value;
+    else pendingCode = field.value;
+  });
+
+  whoami.addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter' || !e.target.closest('[data-fld]')) return;
+    e.preventDefault();
+    if (step === 'email') requestCode();
+    else confirmCode();
+  });
+
+  async function requestCode({ resent = false } = {}) {
+    const email = pendingEmail.trim();
+    if (!email) { signInError = 'Enter the address to send the code to.'; drawSignIn({ focus: true }); return; }
+
+    signInBusy = true; signInError = ''; drawSignIn();
+    try {
+      await client.signIn(email);
+      pendingEmail = email;
+      if (!resent) pendingCode = '';
+      step = 'code';
+    } catch (err) {
+      signInError = err.message;
+    } finally {
+      signInBusy = false;
+      drawSignIn({ focus: true });
+    }
+  }
+
+  async function confirmCode() {
+    const code = pendingCode.trim();
+    if (!code) { signInError = 'Enter the code we emailed you.'; drawSignIn({ focus: true }); return; }
+
+    signInBusy = true; signInError = ''; drawSignIn();
+    try {
+      const who = await client.confirmSignIn(pendingEmail.trim(), code);
+      login.signedIn = who;
+      step = 'idle';
+      pendingCode = '';
+      say('');
+      // Signing in is what makes a call possible on most projects — there is
+      // now somebody to attribute it to — so the offer is asked for again
+      // rather than staying hidden until the panel is reopened.
+      ctx.offerCall();
+    } catch (err) {
+      signInError = err.message;
+    } finally {
+      signInBusy = false;
+      drawSignIn({ focus: step !== 'idle' });
+    }
+  }
+
+  whoami.addEventListener('click', async (e) => {
+    const btn = e.target.closest('button[data-act]');
+    if (!btn) return;
+    const act = btn.dataset.act;
+
+    if (act === 'signin') { step = 'email'; signInError = ''; drawSignIn({ focus: true }); return; }
+    if (act === 'skip') { step = 'idle'; signInError = ''; drawSignIn(); return; }
+    // Namespaced: the report screen has a back button of its own, and the two
+    // must not be one selector away from each other.
+    if (act === 'signin-back') { step = 'email'; signInError = ''; pendingCode = ''; drawSignIn({ focus: true }); return; }
+    if (act === 'code') { requestCode(); return; }
+    if (act === 'resend') { requestCode({ resent: true }); return; }
+    if (act === 'confirm') { confirmCode(); return; }
+    if (act === 'signout') {
+      signInBusy = true; drawSignIn();
+      try {
+        await client.signOut();
+      } finally {
+        login.signedIn = null;
+        signInBusy = false;
+        // On a project that requires it, signing out puts the form away again
+        // and asks — which is what applyGate does off the back of this.
+        step = login.mode === 'required' ? 'email' : 'idle';
+        drawSignIn({ focus: step !== 'idle' });
+      }
+    }
+  });
+
+  /** Re-read the project's setting and this browser's session, and redraw. */
+  async function refreshLogin({ announce = false } = {}) {
+    const state = await client.loginState();
+    login = { mode: state.mode, signedIn: state.signedIn };
+    client.lastLoginMode = state.mode;
+    // Nothing to type on a project that requires sign-in and has nobody in it.
+    if (mustSignIn() && step === 'idle') step = 'email';
+    if (login.signedIn) step = 'idle';
+    if (announce && state.signedOutReason) say(state.signedOutReason, 'info');
+    drawSignIn();
+  }
+
+  refreshLogin({ announce: true }).catch(() => { /* a widget that can't ask stays open */ });
+
+  /**
+   * Put the panel back in step after a send or a call was refused: the reason
+   * may be that this browser was signed out while the panel sat open.
+   */
+  function recheckSignIn() {
+    if (login.mode !== 'off') refreshLogin().catch(() => {});
+  }
+
+  ctx.mustSignIn = mustSignIn;
+  ctx.recheckSignIn = recheckSignIn;
+}