@marsaude/devtools-shell 0.1.0 → 0.1.2

package/fesm2022/marsaude-devtools-shell.mjs

@@ -1138,6 +1138,11 @@ class DevtoolsApiService {
         this.config = inject(DEVTOOLS_CONFIG);
         this.utils = inject(DevtoolsUtils);
         this.typeform = inject(DevtoolsTypeform);
+        // ---- reCAPTCHA (v2 Invisible) -----------------------------------------
+        /** Cached invisible-widget id: rendered once, re-executed per request. */
+        this.recaptchaWidgetId = null;
+        /** Resolver for the in-flight execute() — the widget callback fires this. */
+        this.recaptchaResolver = null;
     }
     get api() {
         return this.config.apiBaseUrl;
@@ -1296,14 +1301,43 @@ class DevtoolsApiService {
             return of([]);
         return forkJoin(valid.map((id) => this.deleteAuthStatement(id)));
     }
-    // ---- reCAPTCHA --------------------------------------------------------
     recaptcha() {
         const key = this.config.recaptchaSiteKey;
-        const grecaptcha = window.grecaptcha;
-        if (!key || !grecaptcha?.execute)
+        if (!key) {
+            console.warn('[devtools] recaptchaSiteKey not configured — request will be sent without a reCAPTCHA token');
             return of('');
-        return from(new Promise((resolve) => {
-            grecaptcha.ready(() => grecaptcha.execute(key, { action: 'login' }).then(resolve).catch(() => resolve('')));
+        }
+        return from(ensureRecaptchaScript()
+            .then((grecaptcha) => new Promise((resolve) => {
+            // v2 Invisible delivers the token via callback, not a promise.
+            // Point the shared resolver at THIS request before executing.
+            this.recaptchaResolver = (token) => {
+                this.recaptchaResolver = null;
+                try {
+                    grecaptcha.reset(this.recaptchaWidgetId);
+                }
+                catch {
+                    /* ignore */
+                }
+                resolve(token || '');
+            };
+            if (this.recaptchaWidgetId == null) {
+                const host = document.createElement('div');
+                host.style.display = 'none';
+                document.body.appendChild(host);
+                this.recaptchaWidgetId = grecaptcha.render(host, {
+                    sitekey: key,
+                    size: 'invisible',
+                    callback: (token) => this.recaptchaResolver?.(token),
+                    'error-callback': () => this.recaptchaResolver?.(''),
+                    'expired-callback': () => this.recaptchaResolver?.(''),
+                });
+            }
+            grecaptcha.execute(this.recaptchaWidgetId);
+        }))
+            .catch((e) => {
+            console.error('[devtools] failed to load reCAPTCHA', e);
+            return '';
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DevtoolsApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1312,6 +1346,42 @@ class DevtoolsApiService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DevtoolsApiService, decorators: [{
             type: Injectable
         }] });
+const RECAPTCHA_SCRIPT_ID = 'dc-recaptcha-v2-invisible';
+/**
+ * Lazy-load the reCAPTCHA v2 (explicit render) script (once) and resolve with
+ * the `grecaptcha` API. The host only passes `recaptchaSiteKey`; the package
+ * injects the script itself so nothing depends on the host having it loaded.
+ */
+function ensureRecaptchaScript() {
+    const w = window;
+    if (w.grecaptcha?.render)
+        return Promise.resolve(w.grecaptcha);
+    return new Promise((resolve, reject) => {
+        const onReady = () => {
+            if (w.grecaptcha?.render)
+                resolve(w.grecaptcha);
+            else
+                reject(new Error('grecaptcha unavailable after script load'));
+        };
+        const existing = document.getElementById(RECAPTCHA_SCRIPT_ID);
+        if (existing) {
+            if (w.grecaptcha?.render)
+                return resolve(w.grecaptcha);
+            existing.addEventListener('load', onReady, { once: true });
+            existing.addEventListener('error', () => reject(new Error('reCAPTCHA script failed to load')), { once: true });
+            return;
+        }
+        const script = document.createElement('script');
+        script.id = RECAPTCHA_SCRIPT_ID;
+        // `render=explicit` so we control the (invisible) widget creation ourselves.
+        script.src = 'https://www.google.com/recaptcha/api.js?render=explicit';
+        script.async = true;
+        script.defer = true;
+        script.onload = onReady;
+        script.onerror = () => reject(new Error('reCAPTCHA script failed to load'));
+        document.head.appendChild(script);
+    });
+}
 function onlyDigits(v) {
     return (v ?? '').replace(/\D/g, '');
 }
@@ -1348,11 +1418,15 @@ class DevtoolsAuthService {
     /** Begin Google OAuth for the admin (full-page redirect). */
     loginGoogleRedirect() {
         const clientId = this.config.googleClientId;
-        const redirect = this.config.googleRedirectUri || window.location.origin;
+        const redirect = this.config.googleRedirectUri;
         if (!clientId) {
             console.error('[devtools] googleClientId not configured');
             return;
         }
+        if (!redirect) {
+            console.error('[devtools] googleRedirectUri not configured — set it to a URI whitelisted in the Google OAuth client');
+            return;
+        }
         try {
             sessionStorage.setItem(OAUTH_FLAG, '1');
         }
@@ -1377,11 +1451,17 @@ class DevtoolsAuthService {
         catch {
             /* ignore */
         }
-        if (!pending || !window.location.hash)
+        if (!pending)
             return;
-        const params = new URLSearchParams(window.location.hash.replace(/^#/, ''));
+        // Implicit flow returns everything in the URL fragment. We read the query
+        // too so a misconfigured response_type still surfaces an error instead of
+        // failing silently.
+        const params = new URLSearchParams(window.location.hash.replace(/^#/, '') || window.location.search.replace(/^\?/, ''));
         const googleToken = params.get('access_token');
-        if (!googleToken)
+        const error = params.get('error');
+        // Neither token nor error here => this isn't our OAuth landing yet; keep the
+        // flag so the real return (the whitelisted redirect_uri) can consume it.
+        if (!googleToken && !error)
             return;
         try {
             sessionStorage.removeItem(OAUTH_FLAG);
@@ -1389,18 +1469,25 @@ class DevtoolsAuthService {
         catch {
             /* ignore */
         }
+        if (error) {
+            console.error('[devtools] google oauth returned an error:', error, params.get('error_description') ?? '');
+            this.cleanOAuthUrl();
+            return;
+        }
         this.exchangeGoogle(googleToken).subscribe({
-            next: () => {
-                try {
-                    history.replaceState(null, '', window.location.pathname + window.location.search);
-                }
-                catch {
-                    /* ignore */
-                }
-            },
+            next: () => this.cleanOAuthUrl(),
             error: (e) => console.error('[devtools] admin google login failed', e),
         });
     }
+    /** Strip the OAuth fragment/query so a reload doesn't re-trigger the return. */
+    cleanOAuthUrl() {
+        try {
+            history.replaceState(null, '', window.location.pathname + window.location.search);
+        }
+        catch {
+            /* ignore */
+        }
+    }
     exchangeGoogle(googleToken) {
         return this.api.exchangeGoogle(googleToken).pipe(tap((tokens) => this.setTokens(tokens)), tap(() => this.api.self(this._token() ?? undefined).subscribe((p) => this.storage.set(ADMIN_USER, p))));
     }