Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: switchable OTP in volto-form-block #783

Merged
merged 4 commits into from
Oct 3, 2024
Merged

fix: switchable OTP in volto-form-block #783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
310a3f8
chore: updated volto-form-block to 3.9.3
giuliaghisini Oct 2, 2024
46c1662
feat: switchable email otp validation per form
giuliaghisini Oct 2, 2024
4f46135
chore: updated volto-form-block
giuliaghisini Oct 2, 2024
44939a3
Merge branch 'main' into fix_otp_volto_form_block
giuliaghisini Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@
"volto-dropdownmenu": "4.1.3",
"volto-editablefooter": "5.1.7",
"volto-feedback": "0.3.2",
"volto-form-block": "3.9.2",
"volto-form-block": "3.10.0",
"volto-gdpr-privacy": "2.2.7",
"volto-google-analytics": "2.0.0",
"volto-multilingual-widget": "3.2.1",
Expand Down
84 changes: 44 additions & 40 deletions src/customizations/volto-form-block/components/FormView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,47 +209,51 @@ const FormView = ({
})}

{/*OTP*/}
{data.subblocks
.filter((subblock) => subblock.use_as_bcc)
.map((subblock, index) => {
const fieldName = getFieldName(
subblock.label,
subblock.id,
);
const name = fieldName + OTP_FIELDNAME_EXTENDER;
const fieldValue = formData[fieldName]?.value;
const value = formData[fieldName]?.otp;
const fields_to_send_with_value =
getFieldsToSendWithValue(subblock);
{data.email_otp_verification ? (
data.subblocks
.filter((subblock) => subblock.use_as_bcc)
.map((subblock, index) => {
const fieldName = getFieldName(
subblock.label,
subblock.id,
);
const name = fieldName + OTP_FIELDNAME_EXTENDER;
const fieldValue = formData[fieldName]?.value;
const value = formData[fieldName]?.otp;
const fields_to_send_with_value =
getFieldsToSendWithValue(subblock);

return (
<Row key={'row_otp' + index}>
<Col className="py-2">
<OTPWidget
{...subblock}
fieldValue={fieldValue}
onChange={(field, value) => {
onChangeFormData(
subblock.id,
fieldName,
fieldValue,
{
...fields_to_send_with_value,
otp: value,
},
);
}}
value={value}
valid={isValidField(name)}
errorMessage={getErrorMessage(name)}
formHasErrors={formErrors?.length > 0}
path={path}
block_id={block_id}
/>
</Col>
</Row>
);
})}
return (
<Row key={'row_otp' + index}>
<Col className="py-2">
<OTPWidget
{...subblock}
fieldValue={fieldValue}
onChange={(field, value) => {
onChangeFormData(
subblock.id,
fieldName,
fieldValue,
{
...fields_to_send_with_value,
otp: value,
},
);
}}
value={value}
valid={isValidField(name)}
errorMessage={getErrorMessage(name)}
formHasErrors={formErrors?.length > 0}
path={path}
block_id={block_id}
/>
</Col>
</Row>
);
})
) : (
<></>
)}

{enableCaptcha && <>{captcha.render()}</>}

Expand Down
11 changes: 9 additions & 2 deletions src/customizations/volto-form-block/components/View.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import React, { useState, useEffect, useReducer, useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import PropTypes from 'prop-types';
import { useIntl, defineMessages } from 'react-intl';
import { submitForm } from 'volto-form-block/actions';
import { submitForm, resetOTP } from 'volto-form-block/actions';
import { getFieldName } from 'volto-form-block/components/utils';
import FormView from 'volto-form-block/components/FormView';
import { formatDate } from '@plone/volto/helpers/Utils/Date';
Expand Down Expand Up @@ -127,6 +127,9 @@ const View = ({ data, id, path }) => {

const [formData, setFormData] = useReducer((state, action) => {
if (action.reset) {
if (data.email_otp_verification) {
dispatch(resetOTP(id));
}
return getInitialData(data);
}

Expand Down Expand Up @@ -209,7 +212,11 @@ const View = ({ data, id, path }) => {
field: name,
message: intl.formatMessage(messages.invalidEmailMessage),
});
} else if (isBCC && !formData[name].otp) {
} else if (
data.email_otp_verification &&
isBCC &&
!formData[name].otp
pnicolli marked this conversation as resolved.
Show resolved Hide resolved
) {
v.push({
field: name + OTP_FIELDNAME_EXTENDER,
message: intl.formatMessage(messages.insertOtp),
Expand Down
18 changes: 18 additions & 0 deletions src/customizations/volto-form-block/formSchema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,15 @@ const messages = defineMessages({
id: 'mail_footer_label',
defaultMessage: 'Text at the end of the email',
},
email_otp_verification: {
id: 'form_email_otp_verification',
defaultMessage: 'Validate BCC emails with OTP verification',
},
email_otp_verification_description: {
id: 'form_email_otp_verification_description',
defaultMessage:
"Prevent spam from your website. By enabling this option, you do not allow malicious users to send emails to other email addresses through your website. The OTP will be requested for all email-type fields for which the 'Send a copy of the email to this address' option is checked.",
},
});

const Schema = (data) => {
Expand Down Expand Up @@ -130,6 +139,7 @@ const Schema = (data) => {
...(data?.show_cancel ? ['cancel_label'] : []),
'set_limit',
...(data?.set_limit ? ['limit'] : []),
'email_otp_verification',
'mail_header',
'mail_footer',
'captcha',
Expand Down Expand Up @@ -202,6 +212,14 @@ const Schema = (data) => {
'@id': 'collective.volto.formsupport.captcha.providers',
},
},
email_otp_verification: {
type: 'boolean',
title: intl.formatMessage(messages.email_otp_verification),
description: intl.formatMessage(
messages.email_otp_verification_description,
),
default: false,
},
store: {
type: 'boolean',
title: intl.formatMessage(messages.store),
Expand Down
10 changes: 5 additions & 5 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8251,7 +8251,7 @@ __metadata:
volto-dropdownmenu: 4.1.3
volto-editablefooter: 5.1.7
volto-feedback: 0.3.2
volto-form-block: 3.9.2
volto-form-block: 3.10.0
volto-gdpr-privacy: 2.2.7
volto-google-analytics: 2.0.0
volto-multilingual-widget: 3.2.1
Expand Down Expand Up @@ -16171,9 +16171,9 @@ __metadata:
languageName: node
linkType: hard

"volto-form-block@npm:3.9.2":
version: 3.9.2
resolution: "volto-form-block@npm:3.9.2"
"volto-form-block@npm:3.10.0":
version: 3.10.0
resolution: "volto-form-block@npm:3.10.0"
dependencies:
"@hcaptcha/react-hcaptcha": ^0.3.6
file-saver: ^2.0.5
Expand All @@ -16182,7 +16182,7 @@ __metadata:
peerDependencies:
"@plone/volto": ">=16.0.0-alpha.38"
volto-subblocks: ^2.1.0
checksum: a47c5241bed9e5959241ccadd3992753718b0b1fae5f3104089600c5f0d2b71193d9c0a41235e7e9f3fadce9691a5c0bc14722d667cbcf8a1a5793a381c4a746
checksum: 8ddce2c624cf329f446a63772ce8dd643aed957b8d967463e76f3f83383704ca9b3d1fe0669390c5a965d9a2568123fdbb3408cf831cadb9e5cebfd164ca0aa9
languageName: node
linkType: hard

Expand Down
Loading