@wtfalch/desktop 0.0.0-stage → 0.1.1

package/welcome/welcome.js

@@ -0,0 +1,176 @@
+// The first-launch screen. Four phases: ask (type something), checking, found
+// ("Sign in to <name>") and waiting (the browser has opened). Main answers
+// resolveEmail/resolveAddress(input, start) with { name, host, code } for an app that
+// exists, or { notFound: true }; start=true also opens the browser. Cancel is
+// the #cancel-* fragment, which main watches for. Main reloads this page with a
+// notice in the fragment (#failed, #ended, #offline:<name>); #retry-* asks main
+// to try the company again. For a fixed origin (config.fixed) there is no email
+// screen: the page starts in "found" with the app's own name, #signin-* asks main
+// to start (or restart) the sign-in, and main reloads the page as #waiting:<code>
+// once the browser has opened. Server text is only ever textContent.
+const config = window.shellWelcome.config;
+const fixed = config.fixed === true;
+document.title = config.appName;
+for (const mark of document.querySelectorAll('.wm')) mark.firstChild.textContent = config.appName;
+const $ = (id) => document.getElementById(id);
+const els = {
+  title: $('title'),
+  sub: $('sub'),
+  form: $('form'),
+  label: $('label'),
+  field: $('field'),
+  error: $('error'),
+  pair: $('pair'),
+  code: $('code'),
+  go: $('go'),
+  goText: $('go-text'),
+  back: $('back'),
+  cancel: $('cancel'),
+};
+const modes = {
+  email: {
+    label: 'Email',
+    placeholder: 'you@company.com',
+    type: 'email',
+    call: (...args) => window.shellWelcome.resolveEmail(...args),
+  },
+  address: {
+    label: `Your company's ${config.appName} address`,
+    placeholder: `${config.hostPrefix}.company.com`,
+    type: 'text',
+    call: (...args) => window.shellWelcome.resolveAddress(...args),
+  },
+};
+let mode = 'email';
+const idle = fixed ? 'found' : 'ask';
+let phase = idle;
+let name = fixed ? config.appName : '';
+let host = fixed ? config.host : '';
+let code = '';
+const notice = location.hash.slice(1);
+if (notice.startsWith('waiting:')) {
+  phase = 'waiting';
+  code = notice.slice(8);
+}
+let error =
+  notice === 'failed'
+    ? 'Sign-in did not finish. Try again.'
+    : notice === 'ended'
+      ? 'Your session ended. Sign in again.'
+      : '';
+if (notice.startsWith('offline:')) {
+  try {
+    name = decodeURIComponent(notice.slice(8));
+  } catch {
+    name = 'your company';
+  }
+  phase = 'offline';
+  error = `Could not reach ${name}. Check your connection.`;
+}
+
+function render() {
+  const asking = phase === 'ask' || phase === 'checking';
+  const showsError = phase === 'ask' || phase === 'offline' || (fixed && phase === 'found');
+  const m = modes[mode];
+  els.title.textContent =
+    phase === 'found'
+      ? `Sign in to ${name}`
+      : phase === 'waiting'
+        ? 'Finish signing in in your browser'
+        : 'Sign in';
+  els.sub.textContent =
+    phase === 'checking'
+      ? 'Looking for your company…'
+      : phase === 'found'
+        ? host
+        : phase === 'waiting'
+          ? host
+          : phase === 'offline'
+            ? ''
+            : 'Use the address your account was set up with.';
+  els.label.textContent = m.label;
+  els.field.type = m.type;
+  els.field.placeholder = m.placeholder;
+  els.field.autocomplete = mode === 'email' ? 'email' : 'url';
+  els.field.hidden = els.label.hidden = !asking;
+  els.field.readOnly = phase === 'checking';
+  els.error.hidden = !error || !showsError;
+  els.error.textContent = error;
+  els.go.hidden = phase === 'waiting';
+  els.go.disabled = phase === 'checking';
+  els.goText.textContent =
+    phase === 'found' ? 'Continue in browser' : phase === 'offline' ? 'Try again' : 'Continue';
+  els.pair.hidden = phase !== 'waiting' || !code;
+  els.code.textContent = code;
+  els.back.hidden = phase !== 'found' || fixed;
+  els.cancel.hidden = phase !== 'waiting';
+  if (phase === 'ask') els.field.focus();
+}
+
+els.form.addEventListener('submit', async (event) => {
+  event.preventDefault();
+  if (phase === 'offline') {
+    location.hash = `#retry-${Date.now()}`;
+    return;
+  }
+  const call = modes[mode].call;
+  const value = els.field.value.trim();
+  if (fixed && phase === 'found') {
+    error = '';
+    location.hash = `#signin-${Date.now()}`;
+    phase = 'waiting';
+    render();
+    return;
+  }
+  if (phase === 'found') {
+    phase = 'waiting';
+    render();
+    try {
+      code = (await call(value, true)).code ?? '';
+      render();
+    } catch {
+      phase = 'ask';
+      error = 'Sign-in could not start. Try again.';
+      render();
+    }
+    return;
+  }
+  if (phase !== 'ask' || !value) return;
+  phase = 'checking';
+  error = '';
+  render();
+  try {
+    const result = await call(value, false);
+    if (result.name) {
+      name = result.name;
+      host = result.host;
+      phase = 'found';
+    } else {
+      phase = 'ask';
+      error =
+        mode === 'email'
+          ? `We could not find ${config.appName} for ${value.split('@').pop()}.`
+          : `We could not find ${config.appName} at that address.`;
+      mode = 'address';
+      els.field.value = '';
+    }
+  } catch {
+    phase = 'ask';
+    error = 'That did not work. Check what you typed.';
+  }
+  render();
+});
+els.back.addEventListener('click', () => {
+  phase = 'ask';
+  mode = 'email';
+  error = '';
+  els.field.value = '';
+  render();
+});
+els.cancel.addEventListener('click', () => {
+  location.hash = `#cancel-${Date.now()}`;
+  phase = idle;
+  error = '';
+  render();
+});
+render();