@bigbinary/neeto-form-frontend 3.1.0 → 3.2.1

package/README.md

@@ -107,6 +107,41 @@ The engine adds setup for form on backend and allows us to attach forms to any m
   3. `additional_create_submission_actions`: You can use this method to specify any additional logic that needs to be executed after creating submissions.
   4. `additional_create_response_actions`: If you want to perform some additional actions on each of the responses, you can specify them using this method. This method receives `question` and `response_param` passed from the front-end as arguments.
 
+  ### Set up Google reCAPTCHA
+
+  1. Sign up for an API key pair from the
+    [official website](http://www.google.com/recaptcha/admin).
+  2. Configure the following `environment variables` and `secrets` with suitable
+    values
+
+      - Under `.env` file:
+
+        ```yaml
+        FORM_NANO_RECAPTCHA_V2_SITE_KEY=# Value from Google cloud console
+        FORM_NANO_RECAPTCHA_V2_SECRET_KEY=# Value from Google cloud console
+        ```
+
+      - Under `secrets.yml` file:
+
+        ```yaml
+        form_nano:
+          recaptcha_v2:
+            site_key: <%= ENV["FORM_NANO_RECAPTCHA_V2_SITE_KEY"] %>
+            secret_key: <%= ENV["FORM_NANO_RECAPTCHA_V2_SECRET_KEY"] %>
+        ```
+    3. Include the site key in `global_props`
+        ```ruby
+        module ApplicationHelper
+          def get_client_props
+            # other variables
+            custom_props = {
+              # other props
+              form_nano_recaptcha_v2_site_key: Rails.application.secrets.form_nano.dig(:recaptcha_v2, :site_key)
+            }
+          end
+        end
+        ```
+
 ## Frontend package
 The frontend package allows us to create forms across neeto products.
 
@@ -122,7 +157,7 @@ the proper functioning of the package. Install all the peer dependencies using
 the below command:
 
    ```zsh
-   yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.28.0 classnames@^2.3.1 formik@2.2.9 @bigbinary/neeto-commons-frontend
+   yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.28.0 classnames@^2.3.1 formik@2.2.9 @bigbinary/neeto-commons-frontend react-google-recaptcha
    ```
 
 3. Import stylesheet from the following location:

package/app/javascript/src/translations/ar.json

@@ -12,7 +12,9 @@
       "invalidField": "يرجى إدخال {{label}} صالح",
       "invalidType": "{{label}} يجب أن يكون {{type}} صالحًا",
       "requiredField": "يرجى إدخال {{label}}",
-      "selectMin": "يرجى اختيار {{entity}}"
+      "selectMin": "يرجى اختيار {{min}} {{entity}}",
+      "incompleteCaptcha": "يرجى إكمال كلمة التحقق",
+      "captchaVerificationFailed": "فشل التحقق من كلمة التحقق. حاول مرة اخرى."
     },
     "fileUpload": {
       "validations": {

package/app/javascript/src/translations/de.json

@@ -12,7 +12,9 @@
       "invalidField": "Bitte geben Sie ein gültiges {{label}} ein",
       "invalidType": "{{label}} sollte ein gültiger {{type}} sein",
       "requiredField": "Bitte geben Sie {{label}} ein",
-      "selectMin": "Bitte wählen Sie {{entity}} aus"
+      "selectMin": "Bitte wählen Sie {{min}} {{entity}} aus",
+      "incompleteCaptcha": "Bitte füllen Sie das Captcha aus",
+      "captchaVerificationFailed": "Die Captcha-Überprüfung ist fehlgeschlagen. Bitte versuche es erneut."
     },
     "fileUpload": {
       "validations": {

package/app/javascript/src/translations/en.json

@@ -50,7 +50,10 @@
       "advancedProperties": "Advanced properties",
       "clonedElementLabel": "Copy of {{label, anyCase}}",
       "option": "Option",
-      "rating": "Rating"
+      "rating": "Rating",
+      "captchaType": "Captcha type",
+      "reCaptchaV2": "reCaptcha v2",
+      "mathCaptcha": "Match captcha"
     },
     "fields": {
       "mcf": "Multiple choice",
@@ -71,7 +74,8 @@
       "cf": "Condition",
       "iif": "Integer",
       "dif": "Decimal",
-      "fileUpload": "File upload"
+      "fileUpload": "File upload",
+      "captcha": "Captcha"
     },
     "toasts": {
       "formSubmitted": "Form has been submitted successfully!"
@@ -132,7 +136,9 @@
       "requiredField": "Please enter {{label}}",
       "selectMin": "Please select {{min}} {{entity}}",
       "invalidType": "{{label}} should be a valid {{type}}",
-      "fieldCantBeEmpty": "{{field, anyCase}} can't be empty"
+      "fieldCantBeEmpty": "{{field, anyCase}} can't be empty",
+      "incompleteCaptcha": "Please complete captcha",
+      "captchaVerificationFailed": "Captcha verification failed. Please try again."
     },
     "fileTypes": {
       "documents": "Documents",

package/app/javascript/src/translations/es.json

@@ -12,7 +12,9 @@
       "invalidField": "Introduzca una {{label}} válida",
       "invalidType": "{{label}} debe ser un {{type}} válido",
       "requiredField": "Por favor ingrese {{label}}",
-      "selectMin": "Por favor seleccione {{entity}}"
+      "selectMin": "Por favor seleccione {{min}} {{entity}}",
+      "incompleteCaptcha": "Por favor completa el captcha",
+      "captchaVerificationFailed": "La verificación del captcha falló. Inténtalo de nuevo."
     },
     "fileUpload": {
       "validations": {

package/app/javascript/src/translations/fr.json

@@ -12,7 +12,9 @@
       "invalidField": "Veuillez saisir un {{label}} valide",
       "invalidType": "{{label}} doit être un {{type}} valide",
       "requiredField": "Veuillez saisir {{label}}",
-      "selectMin": "Veuillez sélectionner {{entity}}"
+      "selectMin": "Veuillez sélectionner {{min}} {{entity}}",
+      "incompleteCaptcha": "Veuillez compléter le captcha",
+      "captchaVerificationFailed": "La vérification du Captcha a échoué. Veuillez réessayer."
     },
     "fileUpload": {
       "validations": {

package/app/javascript/src/translations/nl.json

@@ -12,7 +12,9 @@
       "invalidField": "Voer een geldige {{label}} in",
       "invalidType": "{{label}} moet een geldige {{type}} zijn",
       "requiredField": "Voer {{label}} in",
-      "selectMin": "Selecteer {{entity}}"
+      "selectMin": "Selecteer {{min}} {{entity}}",
+      "incompleteCaptcha": "Vul de captcha in",
+      "captchaVerificationFailed": "Captcha-verificatie mislukt. Probeer het opnieuw."
     },
     "fileUpload": {
       "validations": {

package/app/javascript/src/translations/pl.json

@@ -12,7 +12,9 @@
       "invalidField": "Proszę wprowadzić poprawną etykietę {{label}}",
       "invalidType": "{{label}} powinien być prawidłowym {{type}}",
       "requiredField": "Proszę wpisać {{label}}",
-      "selectMin": "Proszę wybrać {{entity}}"
+      "selectMin": "Proszę wybrać {{min}} {{entity}}",
+      "incompleteCaptcha": "Proszę uzupełnić captcha",
+      "captchaVerificationFailed": "Weryfikacja Captcha nie powiodła się. Proszę spróbuj ponownie."
     },
     "fileUpload": {
       "validations": {

package/app/javascript/src/translations/pt.json

@@ -12,7 +12,9 @@
       "invalidField": "Insira um {{label}} válido",
       "invalidType": "{{label}} deve ser um {{type}} válido",
       "requiredField": "Insira {{label}}",
-      "selectMin": "Selecione {{entity}}"
+      "selectMin": "Selecione {{min}} {{entity}}",
+      "incompleteCaptcha": "Por favor complete o captcha",
+      "captchaVerificationFailed": "A verificação do Captcha falhou. Por favor, tente novamente."
     },
     "fileUpload": {
       "validations": {