web: fix turnstile types after update (#7854)

* web: fix turnstile types after update

After running 'npm update' on the dev tree, the build started to
fail with these options and types no longer being set correctly in
the source tree.

I have explicitly included the Turnstile object as a sub-component
of Window, and modified the CaptchaStage to understand the
TurnstileObject and TurnstileOptions, and the build now completes.

* eslint says to prefer this format

* Google recaptcha (aka Turnstile) doesn't understand the "invisible" setting; that's purely
an HCaptcha thing.

* web: removing the typecast means I no longer need the type.

* Locking pyright to 1.1.338 and maintaining it.

* web: locking down hard

After reading [this
guide](https://medium.com/@anjusha.khandavalli/decoding-commonly-used-symbols-in-package-json-file-e08f3939c9e4),
I've locked down the version of pyright to a specific and immovable
version until we can get a better read on how the Pyright upgrade
breaks things.

* Update is specific to package-lock.json.

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

web/package-lock.json

@@ -87,7 +87,7 @@
                 "npm-run-all": "^4.1.5",
                 "prettier": "^3.1.1",
                 "pseudolocale": "^2.0.0",
-                "pyright": "^1.1.338",
+                "pyright": "=1.1.338",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
                 "rollup": "^4.8.0",
@@ -98,7 +98,7 @@
                 "storybook-addon-mock": "^4.3.0",
                 "ts-lit-plugin": "^2.0.1",
                 "tslib": "^2.6.2",
-                "turnstile-types": "^1.1.3",
+                "turnstile-types": "^1.2.0",
                 "typescript": "^5.3.3",
                 "vite-tsconfig-paths": "^4.2.2"
             },
@@ -18195,9 +18195,9 @@
             }
         },
         "node_modules/turnstile-types": {
-            "version": "1.1.3",
-            "resolved": "https://registry.npmjs.org/turnstile-types/-/turnstile-types-1.1.3.tgz",
-            "integrity": "sha512-hurCjOLYMYU9OmUY2JX/ewHBcadUfOhHX1XgLx9A9Ig5TFl2NGqoyM4EyfaaClsROr95cT868rkgzxCvSCcY6A==",
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/turnstile-types/-/turnstile-types-1.2.0.tgz",
+            "integrity": "sha512-cTtNEtCYpcXeXR5AOD0YR0xZpXk1iZeTOuXT5vAGNowGGdgapC+k6m/lOVSkmDOUopZmPtmu311XeULIro4gUA==",
             "dev": true
         },
         "node_modules/type-check": {

web/package.json

@@ -88,8 +88,8 @@
         "@storybook/api": "^7.6.4",
         "@storybook/blocks": "^7.6.4",
         "@storybook/manager-api": "^7.6.4",
-        "@storybook/web-components-vite": "^7.6.4",
         "@storybook/web-components": "^7.6.4",
+        "@storybook/web-components-vite": "^7.6.4",
         "@trivago/prettier-plugin-sort-imports": "^4.3.0",
         "@types/chart.js": "^2.9.41",
         "@types/codemirror": "5.60.15",
@@ -109,7 +109,7 @@
         "npm-run-all": "^4.1.5",
         "prettier": "^3.1.1",
         "pseudolocale": "^2.0.0",
-        "pyright": "^1.1.338",
+        "pyright": "=1.1.338",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rollup": "^4.8.0",
@@ -120,7 +120,7 @@
         "storybook-addon-mock": "^4.3.0",
         "ts-lit-plugin": "^2.0.1",
         "tslib": "^2.6.2",
-        "turnstile-types": "^1.1.3",
+        "turnstile-types": "^1.2.0",
         "typescript": "^5.3.3",
         "vite-tsconfig-paths": "^4.2.2"
     },

web/src/flow/stages/captcha/CaptchaStage.ts

@@ -1,11 +1,11 @@
 ///<reference types="@hcaptcha/types"/>
-///<reference types="turnstile-types"/>
 import "@goauthentik/elements/EmptyState";
 import { PFSize } from "@goauthentik/elements/Spinner";
 import "@goauthentik/elements/forms/FormElement";
 import "@goauthentik/flow/FormStatic";
 import "@goauthentik/flow/stages/access_denied/AccessDeniedStage";
 import { BaseStage } from "@goauthentik/flow/stages/base";
+import type { TurnstileObject } from "turnstile-types";
 
 import { msg } from "@lit/localize";
 import { CSSResult, TemplateResult, html } from "lit";
@@ -21,6 +21,10 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
 import { CaptchaChallenge, CaptchaChallengeResponseRequest } from "@goauthentik/api";
 
+interface TurnstileWindow extends Window {
+    turnstile: TurnstileObject;
+}
+
 @customElement("ak-stage-captcha")
 export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeResponseRequest> {
     static get styles(): CSSResult[] {
@@ -110,9 +114,8 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
         if (!Object.hasOwn(window, "turnstile")) {
             return false;
         }
-        window.turnstile.render(container, {
+        (window as unknown as TurnstileWindow).turnstile.render(container, {
             sitekey: this.challenge.siteKey,
-            size: "invisible",
             callback: (token) => {
                 this.host?.submit({
                     token: token,

web/src/global.d.ts

@@ -1,4 +1,5 @@
 declare module "*.css";
+
 declare module "*.md" {
     const html: string;
     const metadata: { [key: string]: string };