@regioneer/volto-collective-rercaptcha 1.0.0-alpha.3

package/.changelog.draft

@@ -0,0 +1,7 @@
+## 1.0.0-alpha.3 (2026-03-30)
+
+### Feature
+
+- Implementation for customer satisfaction rercaptcha. @giulio-red-turtle [#3](https://github.com/collective/collective-rercaptcha/issue/3)
+
+

package/.release-it.json

@@ -0,0 +1,34 @@
+{
+  "plugins": {
+    "../../core/packages/scripts/prepublish.js": {}
+  },
+  "hooks": {
+    "after:bump": [
+      "pipx run towncrier build --draft --yes --version ${version} > .changelog.draft",
+      "pipx run towncrier build --yes --version ${version}",
+      "cp ../../README.md ./ && cp CHANGELOG.md ../../CHANGELOG.md",
+      "python3 -c 'import json; data = json.load(open(\"../../package.json\")); data[\"version\"] = \"${version}\"; json.dump(data, open(\"../../package.json\", \"w\"), indent=2)'",
+      "git add ../../CHANGELOG.md ../../package.json"
+    ],
+    "after:release": "rm .changelog.draft README.md"
+  },
+  "npm": {
+    "publish": false
+  },
+  "plonePrePublish": {
+    "publish": false
+  },
+  "git": {
+    "changelog": "pipx run towncrier build --draft --yes --version 0.0.0",
+    "requireUpstream": false,
+    "requireCleanWorkingDir": false,
+    "commitMessage": "Release ${version}",
+    "tagName": "${version}",
+    "tagAnnotation": "Release ${version}"
+  },
+  "github": {
+    "release": false,
+    "releaseName": "${version}",
+    "releaseNotes": "cat .changelog.draft"
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+<!-- You should *NOT* be adding new change log entries to this file.
+     You should create a file in the news directory instead.
+     For helpful instructions, please see:
+     https://6.docs.plone.org/contributing/index.html#contributing-change-log-label
+-->
+
+<!-- towncrier release notes start -->
+
+## 1.0.0-alpha.3 (2026-03-30)
+
+### Feature
+
+- Implementation for customer satisfaction rercaptcha. @giulio-red-turtle [#3](https://github.com/collective/collective-rercaptcha/issue/3)

package/README.md

@@ -0,0 +1,195 @@
+# collective-rercaptcha (volto-collective-rercaptcha)
+
+Integration with rercaptcha in Plone
+
+[![npm](https://img.shields.io/npm/v/volto-collective-rercaptcha)](https://www.npmjs.com/package/volto-collective-rercaptcha)
+[![](https://img.shields.io/badge/-Storybook-ff4785?logo=Storybook&logoColor=white&style=flat-square)](https://collective.github.io/volto-collective-rercaptcha/)
+[![CI](https://github.com/collective/collective-rercaptcha/actions/workflows/main.yml/badge.svg)](https://github.com/collective/collective-rercaptcha/actions/workflows/main.yml)
+
+
+## Features
+
+<!-- List your awesome features here -->
+
+## Installation
+
+To install your project, you must choose the method appropriate to your version of Volto.
+
+
+### Volto 18 and later
+
+Add `volto-collective-rercaptcha` to your `package.json`.
+
+```json
+"dependencies": {
+    "volto-collective-rercaptcha": "*"
+}
+```
+
+Add `volto-collective-rercaptcha` to your `volto.config.js`.
+
+```javascript
+const addons = ['volto-collective-rercaptcha'];
+```
+
+If this package provides a Volto theme, and you want to activate it, then add the following to your `volto.config.js`.
+
+```javascript
+const theme = 'volto-collective-rercaptcha';
+```
+
+### Volto 17 and earlier
+
+Create a new Volto project.
+You can skip this step if you already have one.
+
+```
+npm install -g yo @plone/generator-volto
+yo @plone/volto my-volto-project --addon volto-collective-rercaptcha
+cd my-volto-project
+```
+
+Add `volto-collective-rercaptcha` to your `package.json`.
+
+```JSON
+"addons": [
+    "volto-collective-rercaptcha"
+],
+
+"dependencies": {
+    "volto-collective-rercaptcha": "*"
+}
+```
+
+Download and install the new add-on.
+
+```
+yarn install
+```
+
+Start Volto.
+
+```
+yarn start
+```
+
+## Test installation
+
+Visit http://localhost:3000/ in a browser, login, and check the awesome new features.
+
+
+## Development
+
+The development of this add-on is done in isolation using pnpm workspaces, the latest `mrs-developer`, and other Volto core improvements.
+For these reasons, it only works with pnpm and Volto 18.
+
+
+### Prerequisites ✅
+
+-   An [operating system](https://6.docs.plone.org/install/create-project-cookieplone.html#prerequisites-for-installation) that runs all the requirements mentioned.
+-   [nvm](https://6.docs.plone.org/install/create-project-cookieplone.html#nvm)
+-   [Node.js and pnpm](https://6.docs.plone.org/install/create-project.html#node-js) 22
+-   [Make](https://6.docs.plone.org/install/create-project-cookieplone.html#make)
+-   [Git](https://6.docs.plone.org/install/create-project-cookieplone.html#git)
+-   [Docker](https://docs.docker.com/get-started/get-docker/) (optional)
+
+### Installation 🔧
+
+1.  Clone this repository, then change your working directory.
+
+    ```shell
+    git clone git@github.com:collective/collective-rercaptcha.git
+    cd collective-rercaptcha/frontend
+    ```
+
+2.  Install this code base.
+
+    ```shell
+    make install
+    ```
+
+
+### Make convenience commands
+
+Run `make help` to list the available Make commands.
+
+
+### Set up development environment
+
+Install package requirements.
+
+```shell
+make install
+```
+
+### Start developing
+
+Start the backend.
+
+```shell
+make backend-docker-start
+```
+
+In a separate terminal session, start the frontend.
+
+```shell
+make start
+```
+
+### Lint code
+
+Run ESlint, Prettier, and Stylelint in analyze mode.
+
+```shell
+make lint
+```
+
+### Format code
+
+Run ESlint, Prettier, and Stylelint in fix mode.
+
+```shell
+make format
+```
+
+### i18n
+
+Extract the i18n messages to locales.
+
+```shell
+make i18n
+```
+
+### Unit tests
+
+Run unit tests.
+
+```shell
+make test
+```
+
+### Run Cypress tests
+
+Run each of these steps in separate terminal sessions.
+
+In the first session, start the frontend in development mode.
+
+```shell
+make acceptance-frontend-dev-start
+```
+
+In the second session, start the backend acceptance server.
+
+```shell
+make acceptance-backend-start
+```
+
+In the third session, start the Cypress interactive test runner.
+
+```shell
+make acceptance-test
+```
+
+## License
+
+The project is licensed under the MIT license.

package/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = ['razzle'];
+  const plugins = [
+    [
+      'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
+      {
+        messagesDir: './build/messages/',
+      },
+    ],
+  ];
+
+  return {
+    plugins,
+    presets,
+  };
+};

package/locales/de/LC_MESSAGES/volto.po

@@ -0,0 +1,17 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: de\n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. Default: "Errore nella verifica del captcha"
+#: components/Widget/FormWidget/RerCaptchaWidget
+msgid "rercaptcha_error"
+msgstr ""

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,17 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: en\n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. Default: "Errore nella verifica del captcha"
+#: components/Widget/FormWidget/RerCaptchaWidget
+msgid "rercaptcha_error"
+msgstr ""

package/locales/es/LC_MESSAGES/volto.po

@@ -0,0 +1,24 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2023-05-09 11:45-0400\n"
+"PO-Revision-Date: 2023-05-10 11:34-0400\n"
+"Last-Translator: Leonardo J. Caballero G. <leonardocaballero@gmail.com>\n"
+"Language: es\n"
+"Language-Team: ES <LL@li.org>\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"Preferred-Encodings: utf-8\n"
+"MIME-Version: 1.0\n"
+"Language-Code: es\n"
+"Language-Name: Español\n"
+"Domain: volto\n"
+"X-Is-Fallback-For: es-ar es-bo es-cl es-co es-cr es-do es-ec es-es es-sv es-gt es-hn es-mx es-ni es-pa es-py es-pe es-pr es-us es-uy es-ve\n"
+"X-Generator: Poedit 2.2.1\n"
+
+#. Default: "Errore nella verifica del captcha"
+#: components/Widget/FormWidget/RerCaptchaWidget
+msgid "rercaptcha_error"
+msgstr ""

package/locales/pt_BR/LC_MESSAGES/volto.po

@@ -0,0 +1,22 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2023-04-06T16:01:32.969Z\n"
+"PO-Revision-Date: \n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language: \n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"MIME-Version: 1.0\n"
+"Language-Code: pt_BR\n"
+"Language-Name: Português do Brasil\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+#. Default: "Errore nella verifica del captcha"
+#: components/Widget/FormWidget/RerCaptchaWidget
+msgid "rercaptcha_error"
+msgstr ""

package/locales/volto.pot

@@ -0,0 +1,19 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2026-03-24T10:57:51.169Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"MIME-Version: 1.0\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+#. Default: "Errore nella verifica del captcha"
+#: components/Widget/FormWidget/RerCaptchaWidget
+msgid "rercaptcha_error"
+msgstr ""

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@regioneer/volto-collective-rercaptcha",
+  "version": "1.0.0-alpha.3",
+  "description": "Integration with rercaptcha in Plone",
+  "main": "src/index.ts",
+  "license": "MIT",
+  "keywords": [
+    "volto-addon",
+    "volto",
+    "plone",
+    "react"
+  ],
+  "author": "RedTurtle Technology",
+  "homepage": "https://github.com/collective/collective-rercaptcha#readme",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:collective/collective-rercaptcha"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "addons": [],
+  "theme": "",
+  "devDependencies": {
+    "@plone/scripts": "^3.6.2",
+    "release-it": "^19.0.6"
+  },
+  "peerDependencies": {
+    "design-react-kit": "5.0.0-1",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "reactstrap": "^9.1.4",
+    "volto-feedback": "0.7.2",
+    "volto-form-block": "3.17.1"
+  },
+  "dependencies": {
+    "@cap.js/widget": "^0.1.41"
+  },
+  "scripts": {
+    "i18n": "rm -rf build/messages && NODE_ENV=production i18n --addon",
+    "dry-release": "release-it --dry-run",
+    "release": "release-it",
+    "release-major-alpha": "release-it major --preRelease=alpha",
+    "release-alpha": "release-it --preRelease=alpha"
+  }
+}

package/src/components/Blocks/CaptchaTest/Edit.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import View from './View';
+
+/**
+ * Props per il componente Edit del blocco CaptchaTestBlock.
+ */
+interface CaptchaTestEditProps {
+  /** Stato interno del blocco in Volto */
+  data: {
+    endpoint?: string;
+    [key: string]: any;
+  };
+  /** Funzione per salvare le modifiche al blocco */
+  onChangeBlock: (blockId: string, newData: any) => void;
+  /** Identificativo univoco del blocco nella pagina */
+  block: string;
+  /** Indica se il blocco è attualmente selezionato dall'utente */
+  selected: boolean;
+  /** Proprietà extra di Volto */
+  [key: string]: any;
+}
+
+/**
+ * CaptchaTestEdit: Configurazione laterale (sidebar) del blocco di test.
+ *
+ * SCELTE TECNICHE:
+ * - Uso di SidebarPortal per inserire la configurazione nella barra laterale di Volto.
+ * - Sostituzione di Semantic UI con classi standard Volto (field, segment, group)
+ *   per evitare problemi di tipizzazione JSX complessi.
+ */
+const Edit: React.FC<CaptchaTestEditProps> = (props) => {
+  const { data, onChangeBlock, block, selected } = props;
+
+  /** Gestisce il cambiamento dell'endpoint nella sidebar */
+  const handleEndpointChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    onChangeBlock(block, {
+      ...data,
+      [name]: value,
+    });
+  };
+
+  return (
+    <>
+      {/* Visualizza l'anteprima del blocco nell'editor centrale */}
+      <View {...props} isEdit={true} />
+
+      {/* Pannello laterale per la configurazione dell'endpoint */}
+      <SidebarPortal selected={selected}>
+        <div className="ui segment-group" style={{ padding: '10px' }}>
+          <div className="ui segment">
+            <h4>Configurazione Test Captcha PoW</h4>
+            <div className="field">
+              <label htmlFor="endpoint">URL Endpoint API Captcha</label>
+              <input
+                id="endpoint"
+                name="endpoint"
+                type="text"
+                className="ui input"
+                value={data.endpoint || ''}
+                placeholder="https://captcha.gurl.eu.org/api/"
+                onChange={handleEndpointChange}
+              />
+              <p
+                className="help-text"
+                style={{ fontSize: '0.9em', color: '#666', marginTop: '5px' }}
+              >
+                Inserisci l'URL dell'API del servizio captcha che genera la
+                sfida SHA-256.
+              </p>
+            </div>
+          </div>
+        </div>
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

package/src/components/Blocks/CaptchaTest/View.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { RerCapWidget } from '../../index';
+
+/**
+ * Interfaccia per i dati salvati nel blocco CaptchaTest.
+ */
+interface CaptchaTestData {
+  /** URL dell'endpoint API configurato tramite la sidebar */
+  endpoint?: string;
+  /** Altri campi potenziali salvati nel blocco */
+  [key: string]: any;
+}
+
+/**
+ * Props ricevute dal componente View del blocco Volto.
+ */
+interface CaptchaTestViewProps {
+  /** Oggetto contenente la configurazione del blocco */
+  data: CaptchaTestData;
+  /** Identificativo univoco del blocco nella pagina */
+  id?: string;
+  /** Indica se il componente è renderizzato all'interno dell'editor */
+  isEdit?: boolean;
+  /** Proprietà della pagina corrente (metadata) */
+  properties?: any;
+  /** Percorso corrente della pagina */
+  path?: string;
+}
+
+/**
+ * CaptchaTestView: Componente di visualizzazione del blocco di test.
+ *
+ * Utilizza le props tipizzate per gestire la configurazione dell'endpoint
+ * e visualizzare il progresso del calcolo PoW.
+ */
+const View: React.FC<CaptchaTestViewProps> = (props) => {
+  const { data } = props;
+  const [status, setStatus] = useState<string>('In attesa di avvio...');
+  const [token, setToken] = useState<string>('');
+
+  /**
+   * Determinazione dell'endpoint:
+   * 1. Valore salvato nel blocco (data.endpoint)
+   * 2. Fallback su un endpoint di test pubblico se vuoto.
+   */
+  const endpoint = data?.endpoint || 'https://captcha.gurl.eu.org/api/';
+
+  return (
+    <div
+      className="captcha-test-block-view"
+      style={{
+        padding: '20px',
+        border: '1px solid #ccc',
+        margin: '10px 0',
+        borderRadius: '4px',
+      }}
+    >
+      <h4 style={{ marginTop: 0 }}>Test PoW Captcha (Invisibile)</h4>
+      <p style={{ fontSize: '0.95em' }}>
+        Questo blocco carica un componente <strong>RerCapWidget</strong> che
+        esegue un calcolo Proof of Work (SHA-256) in background tramite
+        WebWorkers.
+      </p>
+
+      <div
+        style={{
+          backgroundColor: '#f9f9f9',
+          padding: '10px',
+          borderRadius: '4px',
+        }}
+      >
+        <p style={{ margin: '0 0 10px 0' }}>
+          <strong>Stato Esecuzione:</strong>{' '}
+          <span style={{ color: token ? '#21ba45' : '#4183c4' }}>{status}</span>
+        </p>
+        {token && (
+          <p style={{ margin: 0 }}>
+            <strong>Token Ricevuto:</strong> <br />
+            <code
+              style={{
+                display: 'block',
+                padding: '8px',
+                backgroundColor: '#eee',
+                marginTop: '5px',
+                wordBreak: 'break-all',
+                fontSize: '0.85em',
+              }}
+            >
+              {token}
+            </code>
+          </p>
+        )}
+      </div>
+
+      {/* 
+          Integrazione del componente core invisibile.
+          Passiamo le callback per aggiornare lo stato locale di questa vista.
+      */}
+      <RerCapWidget
+        endpoint={endpoint}
+        onSolve={(t: string) => {
+          setStatus('Risolto con successo!');
+          setToken(t);
+          // eslint-disable-next-line no-console
+          console.log('RerCapWidget: Token generato e pronto.', t);
+        }}
+        onError={(err: string) => {
+          setStatus('Errore: ' + err);
+          // eslint-disable-next-line no-console
+          console.error('RerCapWidget: Errore durante il test:', err);
+        }}
+      />
+    </div>
+  );
+};
+
+export default View;

package/src/components/Blocks/index.ts

@@ -0,0 +1,4 @@
+import CaptchaTestView from './CaptchaTest/View';
+import CaptchaTestEdit from './CaptchaTest/Edit';
+
+export { CaptchaTestView, CaptchaTestEdit };