glib-web 4.44.0 → 4.44.2

package/.claude/settings.local.json

@@ -16,7 +16,17 @@
       "Bash(readlink:*)",
       "WebFetch(domain:github.com)",
       "Bash(npm run dev)",
-      "Bash(npm run)"
+      "Bash(npm run)",
+      "Bash(npx eslint:*)",
+      "Bash(npm install:*)",
+      "Bash(yarn lint:*)",
+      "Bash(bin/rails db:migrate:*)",
+      "Bash(bin/rails server:*)",
+      "Bash(dpkg -S:*)",
+      "Bash(source:*)",
+      "Bash(node --version:*)",
+      "Bash(nvm ls:*)",
+      "Bash(nvm use:*)"
     ],
     "deny": [],
     "ask": []

package/AGENTS.md

@@ -12,6 +12,9 @@
 - For working examples on how to use `glib` UI components, see all the jbuilder
   files located in `doc/garage/`.
 
+## Testing
+- Read [TESTING.md](doc/TESTING.md) before writing or running Cypress tests.
+
 ## Agent commands
 - Available agent command definitions live in `agent/commands/` (see the `.yaml` files there).
 

package/components/component.vue

@@ -97,6 +97,7 @@ import TimerField from "./fields/timer.vue";
 import OtpField from "./fields/otpField.vue";
 import ChipGroup from "./fields/chipGroup.vue";
 import UrlFragmentField from "./fields/urlFragment.vue";
+import CaptchaField from "./fields/captcha.vue";
 
 import ScrollPanel from "./panels/scroll.vue";
 import VerticalPanel from "./panels/vertical.vue";
@@ -202,6 +203,7 @@ export default {
     "fields-otp": OtpField,
     "fields-chipGroup": ChipGroup,
     "fields-urlFragment": UrlFragmentField,
+    "fields-captcha": CaptchaField,
 
     "panels-scroll": ScrollPanel,
     "panels-vertical": VerticalPanel,

package/components/fields/captcha.vue

@@ -0,0 +1,90 @@
+<template>
+  <div v-if="loadIf" :class="$classes()" :style="$styles()">
+    <input type="hidden" :name="fieldName" :value="fieldModel" :disabled="inputDisabled" />
+
+    <div v-if="spec.siteKey">
+      <v-progress-circular v-if="loading" indeterminate color="primary" size="24" width="3" />
+      <p v-if="error" class="mt-2 text-sm text-red-600">{{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import GlibBase from "../base/glibBase.js";
+import { getCurrentInstance, onMounted, ref } from "vue";
+import { useGlibInput } from "../composable/form";
+
+export default {
+  extends: GlibBase,
+  props: {
+    spec: { type: Object, required: true },
+  },
+  setup(props) {
+    useGlibInput({ props });
+
+    const instance = getCurrentInstance();
+    const loading = ref(true);
+    const error = ref(null);
+
+    const loadRecaptchaEnterprise = () => {
+      return new Promise(function (resolve) {
+        if (window.grecaptcha && window.grecaptcha.enterprise) {
+          resolve(window.grecaptcha.enterprise);
+          return;
+        }
+
+        window.onRecaptchaEnterpriseLoad = function () {
+          resolve(window.grecaptcha.enterprise);
+        };
+
+        var script = document.createElement('script');
+        script.src = 'https://www.google.com/recaptcha/enterprise.js?render=' + props.spec.siteKey + '&onload=onRecaptchaEnterpriseLoad';
+        script.async = true;
+        script.defer = true;
+        document.head.appendChild(script);
+      });
+    };
+
+    const initRecaptcha = async () => {
+      try {
+        var enterprise = await loadRecaptchaEnterprise();
+
+        enterprise.ready(function () {
+          enterprise.execute(props.spec.siteKey, { action: 'VERIFY' }).then(function (token) {
+            if (!token) {
+              error.value = 'Verification failed. Please refresh and try again.';
+              loading.value = false;
+              return;
+            }
+
+            loading.value = false;
+            instance.proxy.fieldModel = token;
+
+            GLib.action.execute(props.spec.onSolve, instance.proxy);
+          }).catch(function (err) {
+            console.error('reCAPTCHA execute failed:', err);
+            error.value = 'Verification failed. Please refresh and try again.';
+            loading.value = false;
+          });
+        });
+      } catch (e) {
+        console.error('Failed to load reCAPTCHA:', e);
+        error.value = 'Failed to load verification. Please refresh and try again.';
+        loading.value = false;
+      }
+    };
+
+    onMounted(() => {
+      if (!props.spec.siteKey) {
+        console.error('fields/captcha: siteKey is not configured');
+        return;
+      }
+      initRecaptcha();
+    });
+
+    return { loading, error };
+  },
+};
+</script>
+
+<style scoped></style>

package/components/fields/textarea.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="loadIf" :style="styles()" :class="$classes()">
     <v-textarea ref="field" v-model="fieldModel" :color="gcolor" :label="spec.label" :name="fieldName" :hint="spec.hint"
-      :placeholder="spec.placeholder" :maxlength="spec.maxLength || 255" :readonly="spec.readOnly" :height="height"
+      :placeholder="spec.placeholder" :maxlength="maxLength" :readonly="spec.readOnly" :height="height"
       :rules="$validation()" counter :outlined="$classes().includes('outlined')" :disabled="inputDisabled"
       :no-resize="$classes().includes('no-resize')" validate-on="blur" :variant="variant" :density="density"
       persistent-placeholder :clearable="spec.clearable" @update:modelValue="onChange()">
@@ -40,6 +40,10 @@ export default {
   computed: {
     density() {
       return determineDensity(this.spec.styleClasses);
+    },
+    maxLength() {
+      if (this.spec.maxLength < 0) return undefined;
+      return this.spec.maxLength || 255;
     }
   },
   methods: {

package/components/fields/urlFragment.vue

@@ -1,28 +1,35 @@
 <template>
-  <input type="hidden" :name="fieldName" :value="fieldModel" :disabled="inputDisabled" v-if="loadIf" />
+  <input v-if="loadIf" type="hidden" :name="fieldName" :disabled="inputDisabled" :value="fieldModel" />
 </template>
 
 <script>
+import GlibBase from "../base/glibBase.js";
+import { getCurrentInstance, onMounted, nextTick } from "vue";
 import { useGlibInput } from "../composable/form";
 import { isRerender } from "../../store";
 
 let hasPopulated = false;
 
 export default {
+  extends: GlibBase,
   props: {
     spec: { type: Object, required: true },
   },
   setup(props) {
     useGlibInput({ props });
-  },
-  methods: {
-    $ready() {
+
+    const instance = getCurrentInstance();
+
+    onMounted(() => {
       if (hasPopulated && !isRerender()) return;
       hasPopulated = true;
 
       const hash = window.location.hash.substring(1);
-      this.fieldModel = hash;
-    },
+      instance.proxy.fieldModel = hash;
+      nextTick(() => {
+        GLib.action.executeWithFormData(props.spec.onResolveValue, instance.proxy, hash);
+      });
+    });
   },
 };
 </script>

package/cypress/e2e/glib-web/fieldsCaptcha.cy.ts

@@ -0,0 +1,52 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('fields_captcha')
+
+const visitWithCaptcha = (executeResult: () => Promise<string>) => {
+  cy.visit(url, {
+    onBeforeLoad(win) {
+      (win as any).grecaptcha = {
+        enterprise: {
+          ready: function(cb: Function) { cb(); },
+          execute: function() { return executeResult(); }
+        }
+      }
+    }
+  })
+}
+
+describe('fieldsCaptcha', () => {
+  it('renders and shows verifying state', () => {
+    cy.intercept('GET', '**/recaptcha/enterprise.js*', { body: '' }).as('recaptchaScript')
+
+    cy.visit(url)
+
+    cy.get('input[type="hidden"][name="user[captcha_token]"]').should('exist')
+    cy.get('.v-progress-circular').should('exist')
+  })
+
+  it('populates token when reCAPTCHA resolves', () => {
+    visitWithCaptcha(() => Promise.resolve('fake-captcha-token'))
+
+    cy.get('input[type="hidden"][name="user[captcha_token]"]').should('have.value', 'fake-captcha-token')
+    cy.get('#captcha_status').should('contain.text', 'Status: solved')
+    cy.get('.v-progress-circular').should('not.exist')
+  })
+
+  it('submits the captcha token with the form', () => {
+    visitWithCaptcha(() => Promise.resolve('fake-captcha-token'))
+
+    cy.get('input[type="hidden"][name="user[captcha_token]"]').should('have.value', 'fake-captcha-token')
+
+    cy.contains('Submit form').click()
+
+    cy.get('.unformatted').should('contain.text', 'fake-captcha-token')
+  })
+
+  it('shows error when reCAPTCHA fails', () => {
+    visitWithCaptcha(() => Promise.reject(new Error('reCAPTCHA unavailable')))
+
+    cy.contains('Verification failed. Please refresh and try again.').should('exist')
+    cy.get('.v-progress-circular').should('not.exist')
+  })
+})

package/cypress/e2e/glib-web/fieldsUrlFragment.cy.ts

@@ -0,0 +1,29 @@
+import { testPageUrl } from "../../helper"
+
+const url = testPageUrl('fields_url_fragment')
+
+describe('fieldsUrlFragment', () => {
+  it('captures URL hash and populates hidden field', () => {
+    cy.visit(url + '#my-test-value')
+
+    cy.get('input[type="hidden"][name="user[fragment]"]').should('have.value', 'my-test-value')
+    cy.get('#fragment_status').should('contain.text', 'Status: resolved')
+  })
+
+  it('submits the captured fragment with the form', () => {
+    cy.visit(url + '#submitted-value')
+
+    cy.get('input[type="hidden"][name="user[fragment]"]').should('have.value', 'submitted-value')
+
+    cy.contains('Submit form').click()
+
+    cy.get('.unformatted').should('contain.text', 'submitted-value')
+  })
+
+  it('handles empty hash', () => {
+    cy.visit(url)
+
+    cy.get('input[type="hidden"][name="user[fragment]"]').should('have.value', '')
+    cy.get('#fragment_status').should('contain.text', 'Status: resolved')
+  })
+})

package/cypress/helper.ts

@@ -1,7 +1,7 @@
-const DEV_TEST_PAGE = 'http://localhost:3000/glib/json_ui_garage?path=test_page%2F{{testPage}}'
-
-function testPageUrl(testPage) {
-  return DEV_TEST_PAGE.replace('{{testPage}}', testPage);
+function testPageUrl(testPage: string) {
+  const port = Cypress.env('BACKEND_PORT') || '3000';
+  const baseUrl = `http://localhost:${port}/glib/json_ui_garage?path=test_page%2F${testPage}`;
+  return baseUrl;
 }
 
 export { testPageUrl }

package/doc/TESTING.md

@@ -13,9 +13,8 @@ The tests hit: `http://localhost:3000/glib/json_ui_garage?path=test_page/{name}`
 
 ### 2. **Integration Testing Philosophy**
 Tests are **full-stack integration tests**, not unit tests:
-- No HTTP mocking/stubbing
-- Backend must be running (`localhost:3000`)
-- Tests verify the entire request-response cycle
+- No mocking/stubbing of glib API requests — the backend must be running and tests verify the entire request-response cycle
+- Stubbing external third-party services (e.g., reCAPTCHA) is acceptable since they cannot run in a test environment
 - Form submissions are verified by backend rendering the data back
 
 This is fundamentally different from typical frontend testing (Jest/Vitest with mocks).
@@ -55,6 +54,9 @@ You **cannot write frontend tests in isolation**.
 
 These 6 concepts explain **why the test structure exists** and **what you need to get started**. Everything else (selectors, assertions, etc.) is standard Cypress mechanics.
 
+### 7. **Do Not Run `bin/vite dev` Separately During Cypress Tests**
+Running the Vite dev server separately (`bin/vite dev`) while running Cypress tests causes blank pages (Vue app fails to mount). Just use the Rails server alone — it handles Vite compilation internally.
+
 ## Cypress Coverage Workflow
 
 - **Prerequisites**: Keep the backend `glib-web` server running with the matching `test_page/*` fixtures (same as normal Cypress runs) and make sure the frontend package is linked into that app: `yarn link glib-web` (run from the backend repo).

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "glib-web",
-  "version": "4.44.0",
+  "version": "4.44.2",
   "description": "",
   "main": "index.js",
   "scripts": {