remove eval funciton in form for CSP fix
This commit is contained in:
+130
-14
@@ -37,6 +37,7 @@ const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });
|
||||
|
||||
import { useStore as store, useSelector } from "react-redux";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { validateField } from "./validationUtils"; // Import the validation function
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
@@ -223,7 +224,9 @@ export function Textfield(props) {
|
||||
// console.log(parentField, formProps, form);
|
||||
|
||||
//console.log("validation props:", validation);
|
||||
|
||||
const requiredMessage = t("account:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
{parentField != false ? (
|
||||
@@ -234,7 +237,15 @@ export function Textfield(props) {
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
label={props.label}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
@@ -246,7 +257,15 @@ export function Textfield(props) {
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
label={props.label}
|
||||
errorMsg={t("newappeal:is-required-label")}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
@@ -356,6 +375,9 @@ export function MultiLinefield(props) {
|
||||
//console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
|
||||
let { t } = useTranslation();
|
||||
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
@@ -383,7 +405,15 @@ export function MultiLinefield(props) {
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
</div>
|
||||
@@ -412,7 +442,15 @@ export function MultiLinefield(props) {
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
</div>
|
||||
@@ -517,6 +555,9 @@ export function RichMultiLinefield(props) {
|
||||
|
||||
//console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
|
||||
let { t } = useTranslation();
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
@@ -543,7 +584,15 @@ export function RichMultiLinefield(props) {
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
</div>
|
||||
@@ -572,7 +621,15 @@ export function RichMultiLinefield(props) {
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
</div>
|
||||
@@ -738,6 +795,9 @@ export function DateFieldPicker(props) {
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
formProps[form].values[parentField]) == parentFieldShowOnValue;
|
||||
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
{parentField != false ? (
|
||||
@@ -747,7 +807,15 @@ export function DateFieldPicker(props) {
|
||||
id={name}
|
||||
label={label}
|
||||
component={RenderDatePicker}
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
errorMsg={t("newappeal:select-a-date-label")}
|
||||
dateStart={dateStart}
|
||||
dateEnd={dateEnd}
|
||||
@@ -760,7 +828,15 @@ export function DateFieldPicker(props) {
|
||||
id={name}
|
||||
label={label}
|
||||
component={RenderDatePicker}
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
errorMsg={t("newappeal:select-a-date-label")}
|
||||
dateStart={dateStart}
|
||||
dateEnd={dateEnd}
|
||||
@@ -1187,6 +1263,9 @@ export function Radiofield(props) {
|
||||
(showIfHasParentShowValue == parentField) != false &&
|
||||
showIfHasParentShowValue;
|
||||
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
@@ -1202,7 +1281,15 @@ export function Radiofield(props) {
|
||||
component={RenderRadio}
|
||||
inline={props.inline}
|
||||
hint={props.hint}
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
@@ -1221,7 +1308,15 @@ export function Radiofield(props) {
|
||||
component={RenderRadio}
|
||||
inline={props.inline}
|
||||
hint={props.hint}
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
@@ -1458,7 +1553,9 @@ export function NumericField(props) {
|
||||
showIfHasParentShowValue;
|
||||
|
||||
//console.log("parentField:", parentField, showIfHasParentShowValue);
|
||||
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
@@ -1474,7 +1571,15 @@ export function NumericField(props) {
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
parse={Number}
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
component={RenderTextfield}
|
||||
label={label}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
@@ -1586,6 +1691,9 @@ export function DecimalField(props) {
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const requiredMessage = t("newappeal:is-required-label");
|
||||
const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
|
||||
const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
@@ -1602,7 +1710,15 @@ export function DecimalField(props) {
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
parse={Number}
|
||||
validate={eval(validation)}
|
||||
validate={(value) =>
|
||||
validateField(
|
||||
value,
|
||||
validation,
|
||||
requiredMessage,
|
||||
emojiNotAllowedMessage,
|
||||
invalidPostcodeMessage
|
||||
)
|
||||
} // Use the external validate function
|
||||
component={RenderTextfield}
|
||||
label={props.label}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
|
||||
Reference in New Issue
Block a user