From 5c75787e74d0115c97efc417da3657344cc03621 Mon Sep 17 00:00:00 2001
From: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Date: Mon, 7 Mar 2022 17:29:13 +0200
Subject: [PATCH 1/3] Allow using inline placeholders instead of labels

---
 src/components/Field.jsx    | 13 +++++++++----
 src/components/FormView.jsx |  2 ++
 src/components/View.jsx     |  2 +-
 src/formSchema.js           |  5 +++++
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/Field.jsx b/src/components/Field.jsx
index 978f124..e48cb5e 100644
--- a/src/components/Field.jsx
+++ b/src/components/Field.jsx
@@ -44,6 +44,7 @@ const Field = ({
   disabled = false,
   formHasErrors = false,
   id,
+  labelsAsPlaceholders,
 }) => {
   const intl = useIntl();
 
@@ -57,13 +58,15 @@ const Field = ({
         <TextWidget
           id={name}
           name={name}
-          title={label}
+          title={labelsAsPlaceholders ? '' : label}
+          placeholder={labelsAsPlaceholders ? label : ''}
           description={description}
           required={required}
           onChange={onChange}
           value={value}
           isDisabled={disabled}
           invalid={isInvalid().toString()}
+          columns={labelsAsPlaceholders ? 1 : undefined}
           {...(isInvalid() ? { className: 'is-invalid' } : {})}
         />
       )}
@@ -71,7 +74,8 @@ const Field = ({
         <TextareaWidget
           id={name}
           name={name}
-          title={label}
+          title={labelsAsPlaceholders ? '' : label}
+          placeholder={labelsAsPlaceholders ? label : ''}
           description={description}
           required={required}
           onChange={onChange}
@@ -86,7 +90,7 @@ const Field = ({
         <SelectWidget
           id={name}
           name={name}
-          title={label}
+          title={labelsAsPlaceholders ? '' : label}
           description={description}
           getVocabulary={() => {}}
           getVocabularyTokenTitle={() => {}}
@@ -183,7 +187,8 @@ const Field = ({
         <EmailWidget
           id={name}
           name={name}
-          title={label}
+          title={labelsAsPlaceholders ? '' : label}
+          placeholder={labelsAsPlaceholders ? label : ''}
           description={description}
           required={required}
           onChange={onChange}
diff --git a/src/components/FormView.jsx b/src/components/FormView.jsx
index 17def56..c3e5172 100644
--- a/src/components/FormView.jsx
+++ b/src/components/FormView.jsx
@@ -123,6 +123,7 @@ const FormView = ({
                         disabled
                         valid
                         formHasErrors={formErrors?.length > 0}
+                        labelsAsPlaceholders={data.labelsAsPlaceholders}
                       />
                     </Grid.Column>
                   </Grid.Row>
@@ -159,6 +160,7 @@ const FormView = ({
                           }
                           valid={isValidField(name)}
                           formHasErrors={formErrors?.length > 0}
+                          labelsAsPlaceholders={data.labelsAsPlaceholders}
                         />
                       </Grid.Column>
                     </Grid.Row>
diff --git a/src/components/View.jsx b/src/components/View.jsx
index d57a956..62a4467 100644
--- a/src/components/View.jsx
+++ b/src/components/View.jsx
@@ -148,7 +148,7 @@ const View = ({ data, id, path }) => {
           path,
           id,
           Object.keys(formData).map((name) => ({
-            ...formData[name]
+            ...formData[name],
           })),
           attachments,
         ),
diff --git a/src/formSchema.js b/src/formSchema.js
index d8e738f..71c763a 100644
--- a/src/formSchema.js
+++ b/src/formSchema.js
@@ -74,6 +74,7 @@ export default () => {
           ...invisibleHCaptcha,
           'store',
           'send',
+          'labelsAsPlaceholders',
         ],
       },
     ],
@@ -111,6 +112,10 @@ export default () => {
         type: 'boolean',
         title: intl.formatMessage(messages.send),
       },
+      labelsAsPlaceholders: {
+        type: 'boolean',
+        title: 'Use labels as placeholders',
+      },
     },
     required: ['default_to', 'default_from', 'default_subject'],
   };

From 28513a43dee542a7f21eb855795c793076b08a12 Mon Sep 17 00:00:00 2001
From: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Date: Sat, 13 Aug 2022 14:58:26 +0300
Subject: [PATCH 2/3] Use state to force the update of disabled flag on captcha
 validation

---
 src/components/FormView.jsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/FormView.jsx b/src/components/FormView.jsx
index 3725b8d..1455900 100644
--- a/src/components/FormView.jsx
+++ b/src/components/FormView.jsx
@@ -55,13 +55,10 @@ const FormView = ({
     ? 'GoogleReCaptcha'
     : null;
 
-  let validToken = useRef('');
-  const onVerifyCaptcha = useCallback(
-    (token) => {
-      validToken.current = token;
-    },
-    [validToken],
-  );
+  let [validToken, setValidToken] = React.useState();
+  const onVerifyCaptcha = useCallback((token) => {
+    setValidToken(token);
+  }, []);
 
   const isValidField = (field) => {
     return formErrors?.indexOf(field) < 0;
@@ -195,9 +192,7 @@ const FormView = ({
                     <Button
                       primary
                       type="submit"
-                      disabled={
-                        (captcha && !validToken?.current) || formState.loading
-                      }
+                      disabled={(captcha && !validToken) || formState.loading}
                     >
                       {data.submit_label ||
                         intl.formatMessage(messages.default_submit_label)}

From 50a3cea9fb0420d24a0e555b64839a13268c9233 Mon Sep 17 00:00:00 2001
From: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Date: Sat, 13 Aug 2022 15:13:14 +0300
Subject: [PATCH 3/3] Also show explicit message in submit button

---
 src/components/FormView.jsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/FormView.jsx b/src/components/FormView.jsx
index 1455900..4d6eaa5 100644
--- a/src/components/FormView.jsx
+++ b/src/components/FormView.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import {
   Segment,
@@ -8,13 +8,17 @@ import {
   Progress,
   Button,
 } from 'semantic-ui-react';
-import { getFieldName } from './utils';
+
 import Field from 'volto-form-block/components/Field';
 import GoogleReCaptchaWidget from 'volto-form-block/components/Widget/GoogleReCaptchaWidget';
 import HCaptchaWidget from 'volto-form-block/components/Widget/HCaptchaWidget';
-import './FormView.css';
+
 import config from '@plone/volto/registry';
 
+import { getFieldName } from './utils';
+
+import './FormView.css';
+
 const messages = defineMessages({
   default_submit_label: {
     id: 'form_default_submit_label',
@@ -36,6 +40,10 @@ const messages = defineMessages({
     id: 'form_reset',
     defaultMessage: 'Clear',
   },
+  captchaInvalid: {
+    id: 'captchaInvalid',
+    defaultMessage: 'Waiting for captcha',
+  },
 });
 
 const FormView = ({
@@ -194,8 +202,10 @@ const FormView = ({
                       type="submit"
                       disabled={(captcha && !validToken) || formState.loading}
                     >
-                      {data.submit_label ||
-                        intl.formatMessage(messages.default_submit_label)}
+                      {captcha && !validToken
+                        ? intl.formatMessage(messages.captchaInvalid)
+                        : data.submit_label ||
+                          intl.formatMessage(messages.default_submit_label)}
 
                       {formState.loading && (
                         <Progress