Stop the signup screen redrawing when it opens

The signup screen showed its email form, then looked up the identity
providers and folded the form away behind "Sign up with email" once they
arrived, a round trip later. Every screen made its own lookup, so moving
from login to signup redrew the card each time.

The provider lookup now happens once per auth flow, so moving between
login and signup draws the providers before the next paint. When signup
is the first screen, its email form stays hidden until the lookup
answers, or for 1.5 seconds if it is slow, and shows when no providers
are offered or the form was opened prefilled.

src/gui/src/UI/Auth/UIAuthLogin.js

@@ -153,6 +153,7 @@ export function pushLoginScreen (flow, options = {}) {
 
     renderProviderButtons($screen.find('.auth-provider-list'), {
         kind: 'login',
+        flow,
         referrer: () => flow.options.referrer ?? window.referrerStr ?? window.openerOrigin,
     }).then((offered) => {
         if ( offered ) $screen.find('.auth-providers').prop('hidden', false);

src/gui/src/UI/Auth/UIAuthSignup.js

@@ -36,11 +36,13 @@ import openAuthFlow, {
     submitButtonHtml,
     wireAuthHead,
 } from './authFlow.js';
-import { renderProviderButtons } from './authProviders.js';
+import { mayOfferProviders, renderProviderButtons } from './authProviders.js';
 import { pushLoginScreen } from './UIAuthLogin.js';
 
 const SIGNUP_TIMEOUT_MS = 30000;
 const TURNSTILE_POLL_MS = 100;
+// How long the email form waits for the provider lookup before showing anyway.
+const PROVIDERS_WAIT_MS = 1500;
 
 /**
  * @typedef {object} SignupScreenOptions
@@ -187,6 +189,9 @@ export const signupRedirectUrl = (redirect_url) => {
 export function pushSignupScreen (flow, options = {}) {
     const id = `auth-signup-${window.uuidv4?.() ?? Date.now()}`;
     const turnstile_key = window.gui_params?.turnstileSiteKey;
+    // The email form stays hidden until the providers are known, so it
+    // doesn't show and then fold away behind "Sign up with email".
+    let awaiting_providers = mayOfferProviders() && ! options.username && ! options.email;
 
     let h = '<div class="dashboard-dialog-body auth-body">';
     h += authHeadHtml(flow, i18n('create_free_account', [], false));
@@ -200,7 +205,7 @@ export function pushSignupScreen (flow, options = {}) {
     h += '<div class="signup-with-email-wrapper" hidden>';
     h += `<button type="button" class="dashboard-dialog-btn auth-provider-btn signup-with-email-btn">${i18n('sign_up_with_email')}</button>`;
     h += '</div>';
-    h += '<form class="auth-form signup-form" novalidate>';
+    h += `<form class="auth-form signup-form" novalidate${awaiting_providers ? ' hidden' : ''}>`;
     h += formFieldHtml({
         name: 'username',
         label: i18n('username'),
@@ -307,11 +312,32 @@ export function pushSignupScreen (flow, options = {}) {
         })();
     }
 
+    // With focus on the card itself, nothing on the screen was focusable yet.
+    const focusWasParked = () => document.activeElement === flow.$dialog.get(0);
+    const stopAwaitingProviders = () => {
+        const was_awaiting = awaiting_providers;
+        awaiting_providers = false;
+        clearTimeout(form_fallback);
+        return was_awaiting;
+    };
+    const revealForm = () => {
+        if ( ! stopAwaitingProviders() || flow.isClosed() ) return;
+        showForm();
+        if ( focusWasParked() ) flow.focus();
+    };
+    const form_fallback = awaiting_providers ? setTimeout(revealForm, PROVIDERS_WAIT_MS) : undefined;
+
     renderProviderButtons($screen.find('.auth-provider-list'), {
         kind: 'signup',
+        flow,
         referrer: () => flow.options.referrer ?? window.referrerStr,
     }).then((offered) => {
-        if ( ! offered || flow.isClosed() ) return;
+        if ( ! offered ) {
+            revealForm();
+            return;
+        }
+        stopAwaitingProviders();
+        if ( flow.isClosed() ) return;
         offers_providers = true;
         $screen.find('.oidc-providers-wrapper').prop('hidden', false);
         if ( offered.signupOidcOnly ) {
@@ -327,7 +353,7 @@ export function pushSignupScreen (flow, options = {}) {
         const had_focus = $form.get(0).contains(document.activeElement);
         $form.prop('hidden', true);
         $screen.find('.signup-with-email-wrapper').prop('hidden', false);
-        if ( had_focus ) flow.focus();
+        if ( had_focus || focusWasParked() ) flow.focus();
     });
 
     $screen.find('.signup-with-email-btn').on('click', () => {

src/gui/src/UI/Auth/UIAuthSignup.test.js

@@ -29,6 +29,7 @@ const { activeAuthFlow } = await import('./authFlow.js');
 const { default: UIAuthSignup, signupRedirectUrl } = await import('./UIAuthSignup.js');
 const { default: UIAuthAccountPicker } = await import('./UIAuthAccountPicker.js');
 const { default: UIAuthRecoverPassword } = await import('./UIAuthRecoverPassword.js');
+const { default: UIAuthLogin } = await import('./UIAuthLogin.js');
 
 const providers = (body) => {
     globalThis.fetch = vi.fn(async () => reply(200, body));
@@ -110,7 +111,12 @@ describe('signup when only OIDC signups are open', () => {
         globalThis.fetch = vi.fn(() => new Promise((resolve) => {
             answer = resolve;
         }));
+        vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
         void UIAuthSignup();
+        // A slow lookup gives up the wait and shows the form.
+        vi.advanceTimersByTime(1500);
+        vi.useRealTimers();
+        expect($('.signup-form').prop('hidden')).toBe(false);
         $('[name="username"]').val('started');
         answer(reply(200, { providers: ['google'] }));
         await vi.waitFor(() => expect($('.oidc-google-btn')).toHaveLength(1));
@@ -118,6 +124,50 @@ describe('signup when only OIDC signups are open', () => {
     });
 });
 
+describe('signup while the providers are looked up', () => {
+    /** Lets promise callbacks run, but no timer, so nothing a paint could show in between. */
+    const settlePromises = async () => {
+        for ( let i = 0; i < 10; i++ ) await Promise.resolve();
+    };
+
+    it('keeps the email form hidden until the providers are known', async () => {
+        let answer;
+        globalThis.fetch = vi.fn(() => new Promise((resolve) => {
+            answer = resolve;
+        }));
+        void UIAuthSignup();
+        expect($('.signup-form').prop('hidden')).toBe(true);
+        answer(reply(200, { providers: ['google'] }));
+        await vi.waitFor(() => expect($('.oidc-google-btn')).toHaveLength(1));
+        expect($('.signup-form').prop('hidden')).toBe(true);
+        expect($('.signup-with-email-wrapper').prop('hidden')).toBe(false);
+    });
+
+    it('shows the email form when no providers are offered', async () => {
+        void UIAuthSignup();
+        await vi.waitFor(() => expect($('.signup-form').prop('hidden')).toBe(false));
+        expect($('.signup-with-email-wrapper').prop('hidden')).toBe(true);
+    });
+
+    it('shows a prefilled email form straight away', () => {
+        globalThis.fetch = vi.fn(() => new Promise(() => {}));
+        void UIAuthSignup({ email: '[email protected]' });
+        expect($('.signup-form').prop('hidden')).toBe(false);
+    });
+
+    it('reuses the login screen\'s lookup, drawing the providers before any paint', async () => {
+        providers({ providers: ['google'], signupOidcOnly: false });
+        void UIAuthLogin({ reload_on_success: false });
+        await vi.waitFor(() => expect(screen().find('.oidc-google-btn')).toHaveLength(1));
+        screen().find('.auth-to-signup').trigger('click');
+        await settlePromises();
+        expect(screen().attr('data-screen')).toBe('signup');
+        expect(screen().find('.oidc-google-btn')).toHaveLength(1);
+        expect(screen().find('.signup-with-email-wrapper').prop('hidden')).toBe(false);
+        expect(fetch).toHaveBeenCalledOnce();
+    });
+});
+
 describe('signup form', () => {
     it.each([
         [{}, 'username_required', 'username'],

src/gui/src/UI/Auth/authProviders.js

@@ -75,27 +75,46 @@ export const providerStartUrl = (provider, kind, referrer) => {
     return url;
 };
 
+/** @type {WeakMap<import('./authFlow.js').AuthFlow, Promise<{ providers?: string[], signupOidcOnly?: boolean } | null>>} */
+const lookups = new WeakMap();
+
 /**
- * Fetches the configured providers and fills `$list` with a button for each.
- * A self-hosted instance's own provider gets a generic button.
+ * The configured providers, looked up once per auth flow so moving between
+ * its screens draws them straight away instead of after another round trip.
+ *
+ * @param {import('./authFlow.js').AuthFlow} flow
+ */
+const lookUpProviders = (flow) => {
+    let lookup = lookups.get(flow);
+    if ( ! lookup ) {
+        lookup = (async () => {
+            try {
+                const res = await fetch(`${window.api_origin}/auth/oidc/providers`);
+                return res.ok ? await res.json() : null;
+            } catch {
+                return null;
+            }
+        })();
+        lookups.set(flow, lookup);
+    }
+    return lookup;
+};
+
+/**
+ * Fills `$list` with a button for each configured provider. A self-hosted
+ * instance's own provider gets a generic button.
  *
  * @param {jQuery} $list Where the buttons go.
  * @param {object} opts
  * @param {'login'|'signup'} opts.kind
  * @param {() => string | undefined} opts.referrer Read when a button is pressed.
+ * @param {import('./authFlow.js').AuthFlow} opts.flow The flow showing `$list`.
  * @returns {Promise<{ providers: string[], signupOidcOnly: boolean } | null>}
  *   Null when none are offered here or the lookup failed.
  */
-export async function renderProviderButtons ($list, { kind, referrer }) {
+export async function renderProviderButtons ($list, { kind, referrer, flow }) {
     if ( ! mayOfferProviders() ) return null;
-    let data;
-    try {
-        const res = await fetch(`${window.api_origin}/auth/oidc/providers`);
-        if ( ! res.ok ) return null;
-        data = await res.json();
-    } catch {
-        return null;
-    }
+    const data = await lookUpProviders(flow);
     if ( ! Array.isArray(data?.providers) || ! data.providers.length ) return null;
 
     const ordered = [