mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 04:04:06 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(n8n Form Trigger Node): Improvements (#10092)

Browse source 
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <netroy@users.noreply.github.com>
Co-authored-by: Shireen Missi <94372015+ShireenMissi@users.noreply.github.com>
This commit is contained in:
Michael Kret 2024-07-29 15:58:03 +03:00 committed by GitHub
parent 7a30d845e9
commit 711b667ebe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 1015 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

229
packages/cli/templates/form-trigger.handlebars
View file

@ -59,6 +59,9 @@
margin-bottom: 16px;
}
.n8n-link {
padding-bottom: 24px;
}
.n8n-link a {
color: #7e8186;
font-weight: 600;
@ -103,11 +106,12 @@
border-radius: 6px;
width: 100%;
font-size: 14px;
color: #909399;
color: #71747A;
font-weight: 400;
padding: 12px;
}
form textarea:focus,
form input:focus {
outline: none;
border-color: rgb(90, 76, 194);
@ -128,7 +132,7 @@
border-radius: 6px;
width: 100%;
font-size: 14px;
color: #909399;
color: #71747A;
font-weight: 400;
background-color: white;
padding: 12px;
@ -141,6 +145,10 @@
sans-serif;
}
::placeholder {
opacity: 0.5;
}
#submit-btn {
width: 100%;
height: 48px;
@ -225,9 +233,77 @@
height: 18px;
cursor: pointer;
}
/* required field ----------------------------- */
.form-required {
}
label.form-required::after {
content: ' *';
color: #ff6d5a;
}
hr {
border: 0;
height: 1px;
border-top: 1px solid #dbdfe7;
margin-top: 24px;
margin-bottom: 24px;
display: none;
}
.file-input-wrapper {
position: relative;
display: inline-block;
width: 100%;
}
input[type="file"] {
}
.clear-button {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-65%);
background-color: #7e8186;
border: none;
border-radius: 50%;
font-size: 14px;
font-weight: 600;
font-family:
Open Sans,
sans-serif;
color: white;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
cursor: pointer;
display: none;
}
input[type="file"]:not(:empty) + .clear-button {
display: inline-block;
}
@media only screen and (max-width: 400px) {
hr {
display: block;
}
.container {
width: 95%;
min-height: 100vh;
padding: 24px;
background-color: white;
border: 1px solid #dbdfe7;
border-radius: 8px;
box-shadow: 0px 4px 16px 0px #634dff0f;
}
.card {
padding: 0px;
background-color: white;
border: 0px solid #dbdfe7;
border-radius: 0px;
box-shadow: 0px 0px 10px 0px #634dff0f;
margin-bottom: 0px;
}
}
</style>
</head>
@ -238,20 +314,23 @@
<div class='test-notice'>
<p>This is test version of your form. Use it only for testing your Form Trigger.</p>
</div>
<hr>
{{/if}}
{{#if validForm}}
<form class='card' action='#' method='POST' name='n8n-form' id='n8n-form' novalidate>
<div class='form-header'>
<h1>{{formTitle}}</h1>
<p>{{formDescription}} </p>
<p style="white-space: pre-line">{{formDescription}} </p>
</div>
<div class='inputs-wrapper'>
{{#each formFields}}
{{#if isMultiSelect}}
<div>
<label class='form-label'>{{label}}</label>
<label class='form-label {{inputRequired}}'>{{label}}</label>
<div class='multiselect {{inputRequired}}' id='{{id}}'>
{{#each multiSelectOptions}}
<div class='multiselect-option'>
@ -268,7 +347,7 @@
{{#if isSelect}}
<div class='form-group'>
<label class='form-label' for='{{id}}'>{{label}}</label>
<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
<div class='select-input'>
<select id='{{id}}' name='{{id}}' class='{{inputRequired}}'>
<option value='' disabled selected>Select an option ...</option>
@ -285,12 +364,32 @@
{{#if isTextarea}}
<div class='form-group'>
<label class='form-label' for='{{id}}'>{{label}}</label>
<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
<textarea
class='form-input {{inputRequired}}'
id='{{id}}'
name='{{id}}'
></textarea>
placeholder="{{placeholder}}"
>{{defaultValue}}</textarea>
<p class='{{errorId}} error-hidden'>
This field is required
</p>
</div>
{{/if}}
{{#if isFileInput}}
<div class='form-group file-input-wrapper'>
<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
<input
class='form-input {{inputRequired}}'
type='file'
id='{{id}}'
name='{{id}}'
accept='{{acceptFileTypes}}'
{{multipleFiles}}
placeholder="{{placeholder}}"
/>
<button class="clear-button">&times;</button>
<p class='{{errorId}} error-hidden'>
This field is required
</p>
@ -299,12 +398,14 @@
{{#if isInput}}
<div class='form-group'>
<label class='form-label' for='{{id}}'>{{label}}</label>
<label class='form-label {{inputRequired}}' for='{{id}}'>{{label}}</label>
<input
class='form-input {{inputRequired}}'
type='{{type}}'
id='{{id}}'
name='{{id}}'
value="{{defaultValue}}"
placeholder="{{placeholder}}"
/>
<p class='{{errorId}} error-hidden'>
This field is required
@ -355,9 +456,13 @@
</div>
{{#if appendAttribution}}
<hr>
<div class='n8n-link'>
<a href={{n8nWebsiteLink}} target='_blank'>
Form automated with
{{#if customAttribution}}
{{{customAttribution}}}
{{else}}
<svg
width='73'
height='20'
@ -384,10 +489,13 @@
fill='#101330'
/>
</svg>
{{/if}}
</a>
</div>
{{/if}}
{{#if redirectUrl}}
<a id='redirectUrl' href='{{redirectUrl}}' style='display: none;'></a>
{{/if}}
@ -396,10 +504,13 @@
</div>
<script>
function validateInput(input, errorElement) {
if (input.type === 'number' && input.value !== '') {
const value = input.value.trim();
const type = input.type;
if (value === '' || isNaN(value)) {
if (type === 'email' && value !== '') {
return validateEmailInput(value, errorElement);
} else if (type === 'number' && value !== '') {
if (isNaN(value)) {
errorElement.textContent = 'Enter only numbers in this field';
errorElement.classList.add('error-show');
return false;
@ -407,7 +518,8 @@
errorElement.classList.remove('error-show');
return true;
}
} else if (input.value === '') {
} else if (value === '') {
errorElement.textContent = 'This field is required';
errorElement.classList.add('error-show');
return false;
} else {
@ -416,6 +528,21 @@
}
}
function validateEmailInput(value, errorElement) {
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const isValidEmail = regex.test(value);
if (!isValidEmail) {
errorElement.textContent = 'Enter a valid email address in this field';
errorElement.classList.add('error-show');
return false;
} else {
errorElement.textContent = 'This field is required';
errorElement.classList.remove('error-show');
return true;
}
}
function getSelectedValues(input) {
const selectedValues = [];
const checkboxes = input.querySelectorAll('.multiselect-checkbox');
@ -444,7 +571,44 @@
const form = document.querySelector('#n8n-form');
const requiredInputs = document.querySelectorAll('.form-required');
document.querySelectorAll("input[type=number]").forEach(function (element) {
element.addEventListener("wheel", function(event) {
if (document.activeElement === event.target) {
event.preventDefault();
}
});
});
document.querySelectorAll('input[type="file"]').forEach(fileInput => {
const clearButton = fileInput.nextElementSibling;
let previousFiles = [];
fileInput.addEventListener('change', () => {
const files = fileInput.files;
if (files.length > 0) {
previousFiles = Array.from(files);
clearButton.style.display = 'inline-block';
} else {
if (previousFiles.length > 0) {
const dataTransfer = new DataTransfer();
previousFiles.forEach(file => dataTransfer.items.add(file));
fileInput.files = dataTransfer.files;
clearButton.style.display = 'inline-block';
}
}
});
clearButton.addEventListener('click', (event) => {
event.preventDefault();
fileInput.value = '';
previousFiles = [];
clearButton.style.display = 'none';
});
});
const requiredInputs = document.querySelectorAll('.form-required:not(label)');
const emailInputs = document.querySelectorAll("input[type=email]");
requiredInputs.forEach((input) => {
const errorSelector = `.error-${input.id}`;
@ -464,10 +628,34 @@
}
});
emailInputs.forEach(function (input) {
const errorSelector = `.error-${input.id}`;
const error = document.querySelector(errorSelector);
input.addEventListener("input", function(event) {
const value = input.value.trim();
if (value === "") {
error.classList.remove('error-show');
} else {
validateEmailInput(value, error);
}
});
});
form.addEventListener('submit', (e) => {
const valid = [];
e.preventDefault();
emailInputs.forEach(function (input) {
const value = input.value.trim();
if(value === '') {
return;
}
const errorSelector = `.error-${input.id}`;
const error = document.querySelector(errorSelector);
valid.push(validateEmailInput(value, error));
});
requiredInputs.forEach((input) => {
const errorSelector = `.error-${input.id}`;
const error = document.querySelector(errorSelector);
@ -480,7 +668,20 @@
});
if (valid.every((v) => v)) {
var formData = new FormData(form);
var formData = new FormData();
for (const filed of form.elements) {
if(filed.type !== 'file') {
formData.append(filed.name, filed.value);
} else {
for (const file of filed.files) {
if(file.size === 0) {
continue;
}
formData.append(filed.name, file);
}
}
}
document.querySelectorAll('.multiselect').forEach((multiselect) => {
const selectedValues = getSelectedValues(multiselect);

2
packages/editor-ui/src/composables/useRunWorkflow.ts
View file

@ -310,7 +310,7 @@ export function useRunWorkflow(useRunWorkflowOpts: { router: ReturnType<typeof u
testUrl = `${rootStore.formWaitingUrl}/${runWorkflowApiResponse.executionId}${suffix}`;
}
if (testUrl) openPopUpWindow(testUrl);
if (testUrl && options.source !== 'RunData.ManualChatMessage') openPopUpWindow(testUrl);
}
}

1
packages/editor-ui/src/constants.ts
View file

@ -648,6 +648,7 @@ export const KEEP_AUTH_IN_NDV_FOR_NODES = [
WAIT_NODE_TYPE,
DISCORD_NODE_TYPE,
CHAT_TRIGGER_NODE_TYPE,
FORM_TRIGGER_NODE_TYPE,
];
export const MAIN_AUTH_FIELD_NAME = 'authentication';
export const NODE_RESOURCE_FIELD_NAME = 'resource';

3
packages/nodes-base/nodes/Form/FormTrigger.node.ts
View file

@ -11,12 +11,13 @@ export class FormTrigger extends VersionedNodeType {
icon: 'file:form.svg',
group: ['trigger'],
description: 'Runs the flow when an n8n generated webform is submitted',
defaultVersion: 2,
defaultVersion: 2.1,
};
const nodeVersions: IVersionedNodeType['nodeVersions'] = {
1: new FormTriggerV1(baseDescription),
2: new FormTriggerV2(baseDescription),
2.1: new FormTriggerV2(baseDescription),
};
super(nodeVersions, baseDescription);

64
packages/nodes-base/nodes/Form/common.descriptions.ts
View file

@ -28,6 +28,9 @@ export const formDescription: INodeProperties = {
placeholder: "e.g. We'll get back to you soon",
description:
'Shown underneath the Form Title. Can be used to prompt the user on how to complete the form.',
typeOptions: {
rows: 2,
},
};
export const formFields: INodeProperties = {
@ -69,6 +72,14 @@ export const formFields: INodeProperties = {
name: 'Dropdown List',
value: 'dropdown',
},
{
name: 'Email',
value: 'email',
},
{
name: 'File',
value: 'file',
},
{
name: 'Number',
value: 'number',
@ -88,6 +99,17 @@ export const formFields: INodeProperties = {
],
required: true,
},
{
displayName: 'Placeholder',
name: 'placeholder',
type: 'string',
default: '',
displayOptions: {
hide: {
fieldType: ['dropdown', 'date', 'file'],
},
},
},
{
displayName: 'Field Options',
name: 'fieldOptions',
@ -133,6 +155,48 @@ export const formFields: INodeProperties = {
},
},
},
{
displayName: 'Multiple Files',
name: 'multipleFiles',
type: 'boolean',
default: true,
description:
'Whether to allow the user to select multiple files from the file input or just one',
displayOptions: {
show: {
fieldType: ['file'],
},
},
},
{
displayName: 'Accept File Types',
name: 'acceptFileTypes',
type: 'string',
default: '',
description: 'List of file types that can be uploaded, separated by commas',
hint: 'Leave empty to allow all file types',
placeholder: 'e.g. .jpg, .png',
displayOptions: {
show: {
fieldType: ['file'],
},
},
},
{
displayName: 'Format Date As',
name: 'formatDate',
type: 'string',
default: '',
description:
'Returns a string representation of this field formatted according to the specified format string. For a table of tokens and their interpretations, see <a href="https://moment.github.io/luxon/#/formatting?ID=table-of-tokens" target="_blank">here</a>.',
placeholder: 'e.g. dd/mm/yyyy',
hint: 'Leave empty to use the default format',
displayOptions: {
show: {
fieldType: ['date'],
},
},
},
{
displayName: 'Required Field',
name: 'requiredField',

14
packages/nodes-base/nodes/Form/interfaces.ts
View file

@ -4,20 +4,29 @@ export type FormField = {
requiredField: boolean;
fieldOptions?: { values: Array<{ option: string }> };
multiselect?: boolean;
multipleFiles?: boolean;
acceptFileTypes?: string;
formatDate?: string;
placeholder?: string;
};
export type FormTriggerInput = {
isSelect?: boolean;
isMultiSelect?: boolean;
isTextarea?: boolean;
isFileInput?: boolean;
isInput?: boolean;
labbel: string;
label: string;
defaultValue?: string;
id: string;
errorId: string;
type?: 'text' | 'number' | 'date';
inputRequired: 'form-required' | '';
selectOptions?: string[];
multiSelectOptions?: Array<{ id: string; label: string }>;
acceptFileTypes?: string;
multipleFiles?: 'multiple' | '';
placeholder?: string;
};
export type FormTriggerData = {
@ -31,4 +40,7 @@ export type FormTriggerData = {
formFields: FormTriggerInput[];
useResponseData?: boolean;
appendAttribution?: boolean;
customAttribution?: string;
};
export const FORM_TRIGGER_AUTHENTICATION_PROPERTY = 'authentication';

370
packages/nodes-base/nodes/Form/test/utils.test.ts Normal file
View file

@ -0,0 +1,370 @@
import { mock } from 'jest-mock-extended';
import type { IWebhookFunctions } from 'n8n-workflow';
import type { FormField } from '../interfaces';
import { formWebhook, prepareFormData } from '../utils';
describe('FormTrigger, formWebhook', () => {
beforeEach(() => {
jest.clearAllMocks();
});
it('should call response render', async () => {
const executeFunctions = mock<IWebhookFunctions>();
const mockRender = jest.fn();
const formFields: FormField[] = [
{ fieldLabel: 'Name', fieldType: 'text', requiredField: true },
{ fieldLabel: 'Age', fieldType: 'number', requiredField: false },
{
fieldLabel: 'Gender',
fieldType: 'select',
requiredField: true,
fieldOptions: { values: [{ option: 'Male' }, { option: 'Female' }] },
},
{
fieldLabel: 'Resume',
fieldType: 'file',
requiredField: true,
acceptFileTypes: '.pdf,.doc',
multipleFiles: false,
},
];
executeFunctions.getNode.mockReturnValue({ typeVersion: 2.1 } as any);
executeFunctions.getNodeParameter.calledWith('options').mockReturnValue({});
executeFunctions.getNodeParameter.calledWith('formTitle').mockReturnValue('Test Form');
executeFunctions.getNodeParameter
.calledWith('formDescription')
.mockReturnValue('Test Description');
executeFunctions.getNodeParameter.calledWith('responseMode').mockReturnValue('onReceived');
executeFunctions.getNodeParameter.calledWith('formFields.values').mockReturnValue(formFields);
executeFunctions.getResponseObject.mockReturnValue({ render: mockRender } as any);
executeFunctions.getRequestObject.mockReturnValue({ method: 'GET', query: {} } as any);
executeFunctions.getMode.mockReturnValue('manual');
executeFunctions.getInstanceId.mockReturnValue('instanceId');
executeFunctions.getBodyData.mockReturnValue({ data: {}, files: {} });
executeFunctions.getChildNodes.mockReturnValue([]);
await formWebhook(executeFunctions);
expect(mockRender).toHaveBeenCalledWith('form-trigger', {
appendAttribution: true,
customAttribution: undefined,
formDescription: 'Test Description',
formFields: [
{
defaultValue: '',
errorId: 'error-field-0',
id: 'field-0',
inputRequired: 'form-required',
isInput: true,
label: 'Name',
placeholder: undefined,
type: 'text',
},
{
defaultValue: '',
errorId: 'error-field-1',
id: 'field-1',
inputRequired: '',
isInput: true,
label: 'Age',
placeholder: undefined,
type: 'number',
},
{
defaultValue: '',
errorId: 'error-field-2',
id: 'field-2',
inputRequired: 'form-required',
isInput: true,
label: 'Gender',
placeholder: undefined,
type: 'select',
},
{
acceptFileTypes: '.pdf,.doc',
defaultValue: '',
errorId: 'error-field-3',
id: 'field-3',
inputRequired: 'form-required',
isFileInput: true,
label: 'Resume',
multipleFiles: '',
placeholder: undefined,
},
],
formSubmittedText: 'Your response has been recorded',
formTitle: 'Test Form',
n8nWebsiteLink:
'https://n8n.io/?utm_source=n8n-internal&utm_medium=form-trigger&utm_campaign=instanceId',
testRun: true,
useResponseData: false,
validForm: true,
});
});
it('should return workflowData on POST request', async () => {
const executeFunctions = mock<IWebhookFunctions>();
const mockStatus = jest.fn();
const mockEnd = jest.fn();
const formFields: FormField[] = [
{ fieldLabel: 'Name', fieldType: 'text', requiredField: true },
{ fieldLabel: 'Age', fieldType: 'number', requiredField: false },
];
const bodyData = {
'field-0': 'John Doe',
'field-1': '30',
};
executeFunctions.getNode.mockReturnValue({ typeVersion: 2.1 } as any);
executeFunctions.getNodeParameter.calledWith('options').mockReturnValue({});
executeFunctions.getNodeParameter.calledWith('responseMode').mockReturnValue('onReceived');
executeFunctions.getChildNodes.mockReturnValue([]);
executeFunctions.getNodeParameter.calledWith('formFields.values').mockReturnValue(formFields);
executeFunctions.getResponseObject.mockReturnValue({ status: mockStatus, end: mockEnd } as any);
executeFunctions.getRequestObject.mockReturnValue({ method: 'POST' } as any);
executeFunctions.getMode.mockReturnValue('manual');
executeFunctions.getInstanceId.mockReturnValue('instanceId');
executeFunctions.getBodyData.mockReturnValue({ data: bodyData, files: {} });
const result = await formWebhook(executeFunctions);
expect(result).toEqual({
webhookResponse: { status: 200 },
workflowData: [
[
{
json: {
Name: 'John Doe',
Age: 30,
submittedAt: expect.any(String),
formMode: 'test',
},
},
],
],
});
});
});
describe('FormTrigger, prepareFormData', () => {
it('should return valid form data with given parameters', () => {
const formFields: FormField[] = [
{
fieldLabel: 'Name',
fieldType: 'text',
requiredField: true,
placeholder: 'Enter your name',
},
{
fieldLabel: 'Email',
fieldType: 'email',
requiredField: true,
placeholder: 'Enter your email',
},
{
fieldLabel: 'Gender',
fieldType: 'dropdown',
requiredField: false,
fieldOptions: { values: [{ option: 'Male' }, { option: 'Female' }] },
},
{
fieldLabel: 'Files',
fieldType: 'file',
requiredField: false,
acceptFileTypes: '.jpg,.png',
multipleFiles: true,
},
];
const query = { Name: 'John Doe', Email: 'john@example.com' };
const result = prepareFormData({
formTitle: 'Test Form',
formDescription: 'This is a test form',
formSubmittedText: 'Thank you for your submission',
redirectUrl: 'https://example.com/thank-you',
formFields,
testRun: false,
query,
instanceId: 'test-instance',
useResponseData: true,
});
expect(result).toEqual({
testRun: false,
validForm: true,
formTitle: 'Test Form',
formDescription: 'This is a test form',
formSubmittedText: 'Thank you for your submission',
n8nWebsiteLink:
'https://n8n.io/?utm_source=n8n-internal&utm_medium=form-trigger&utm_campaign=test-instance',
formFields: [
{
id: 'field-0',
errorId: 'error-field-0',
label: 'Name',
inputRequired: 'form-required',
defaultValue: 'John Doe',
placeholder: 'Enter your name',
isInput: true,
type: 'text',
},
{
id: 'field-1',
errorId: 'error-field-1',
label: 'Email',
inputRequired: 'form-required',
defaultValue: 'john@example.com',
placeholder: 'Enter your email',
isInput: true,
type: 'email',
},
{
id: 'field-2',
errorId: 'error-field-2',
label: 'Gender',
inputRequired: '',
defaultValue: '',
placeholder: undefined,
isSelect: true,
selectOptions: ['Male', 'Female'],
},
{
id: 'field-3',
errorId: 'error-field-3',
label: 'Files',
inputRequired: '',
defaultValue: '',
placeholder: undefined,
isFileInput: true,
acceptFileTypes: '.jpg,.png',
multipleFiles: 'multiple',
},
],
useResponseData: true,
appendAttribution: true,
customAttribution: undefined,
redirectUrl: 'https://example.com/thank-you',
});
});
it('should handle missing optional fields gracefully', () => {
const formFields: FormField[] = [
{
fieldLabel: 'Name',
fieldType: 'text',
requiredField: true,
placeholder: 'Enter your name',
},
];
const result = prepareFormData({
formTitle: 'Test Form',
formDescription: 'This is a test form',
formSubmittedText: undefined,
redirectUrl: undefined,
formFields,
testRun: true,
query: {},
});
expect(result).toEqual({
testRun: true,
validForm: true,
formTitle: 'Test Form',
formDescription: 'This is a test form',
formSubmittedText: 'Your response has been recorded',
n8nWebsiteLink: 'https://n8n.io/?utm_source=n8n-internal&utm_medium=form-trigger',
formFields: [
{
id: 'field-0',
errorId: 'error-field-0',
label: 'Name',
inputRequired: 'form-required',
defaultValue: '',
placeholder: 'Enter your name',
isInput: true,
type: 'text',
},
],
useResponseData: undefined,
appendAttribution: true,
customAttribution: undefined,
});
});
it('should set redirectUrl with http if protocol is missing', () => {
const formFields: FormField[] = [
{
fieldLabel: 'Name',
fieldType: 'text',
requiredField: true,
placeholder: 'Enter your name',
},
];
const query = { Name: 'John Doe' };
const result = prepareFormData({
formTitle: 'Test Form',
formDescription: 'This is a test form',
formSubmittedText: undefined,
redirectUrl: 'example.com/thank-you',
formFields,
testRun: true,
query,
});
expect(result.redirectUrl).toBe('http://example.com/thank-you');
});
it('should return invalid form data when formFields are empty', () => {
const result = prepareFormData({
formTitle: 'Test Form',
formDescription: 'This is a test form',
formSubmittedText: undefined,
redirectUrl: undefined,
formFields: [],
testRun: true,
query: {},
});
expect(result.validForm).toBe(false);
expect(result.formFields).toEqual([]);
});
it('should correctly handle multiselect fields', () => {
const formFields: FormField[] = [
{
fieldLabel: 'Favorite Colors',
fieldType: 'text',
requiredField: true,
multiselect: true,
fieldOptions: { values: [{ option: 'Red' }, { option: 'Blue' }, { option: 'Green' }] },
},
];
const query = { 'Favorite Colors': 'Red,Blue' };
const result = prepareFormData({
formTitle: 'Test Form',
formDescription: 'This is a test form',
formSubmittedText: 'Thank you',
redirectUrl: 'example.com',
formFields,
testRun: false,
query,
});
expect(result.formFields[0].isMultiSelect).toBe(true);
expect(result.formFields[0].multiSelectOptions).toEqual([
{ id: 'option0', label: 'Red' },
{ id: 'option1', label: 'Blue' },
{ id: 'option2', label: 'Green' },
]);
});
});

195
packages/nodes-base/nodes/Form/utils.ts
View file

@ -1,22 +1,45 @@
import {
NodeOperationError,
jsonParse,
type IDataObject,
type IWebhookFunctions,
import type {
INodeExecutionData,
MultiPartFormData,
IDataObject,
IWebhookFunctions,
} from 'n8n-workflow';
import type { FormField, FormTriggerData, FormTriggerInput } from './interfaces';
import { NodeOperationError, jsonParse } from 'n8n-workflow';
export const prepareFormData = (
formTitle: string,
formDescription: string,
formSubmittedText: string | undefined,
redirectUrl: string | undefined,
formFields: FormField[],
testRun: boolean,
instanceId?: string,
useResponseData?: boolean,
import type { FormField, FormTriggerData, FormTriggerInput } from './interfaces';
import { FORM_TRIGGER_AUTHENTICATION_PROPERTY } from './interfaces';
import { WebhookAuthorizationError } from '../Webhook/error';
import { validateWebhookAuthentication } from '../Webhook/utils';
import { DateTime } from 'luxon';
import isbot from 'isbot';
export function prepareFormData({
formTitle,
formDescription,
formSubmittedText,
redirectUrl,
formFields,
testRun,
query,
instanceId,
useResponseData,
appendAttribution = true,
) => {
customAttribution,
}: {
formTitle: string;
formDescription: string;
formSubmittedText: string | undefined;
redirectUrl: string | undefined;
formFields: FormField[];
testRun: boolean;
query: IDataObject;
instanceId?: string;
useResponseData?: boolean;
appendAttribution?: boolean;
customAttribution?: string;
}) {
const validForm = formFields.length > 0;
const utm_campaign = instanceId ? `&utm_campaign=${instanceId}` : '';
const n8nWebsiteLink = `https://n8n.io/?utm_source=n8n-internal&utm_medium=form-trigger${utm_campaign}`;
@ -35,6 +58,7 @@ export const prepareFormData = (
formFields: [],
useResponseData,
appendAttribution,
customAttribution,
};
if (redirectUrl) {
@ -49,13 +73,15 @@ export const prepareFormData = (
}
for (const [index, field] of formFields.entries()) {
const { fieldType, requiredField, multiselect } = field;
const { fieldType, requiredField, multiselect, placeholder } = field;
const input: IDataObject = {
id: `field-${index}`,
errorId: `error-field-${index}`,
label: field.fieldLabel,
inputRequired: requiredField ? 'form-required' : '',
defaultValue: query[field.fieldLabel] ?? '',
placeholder,
};
if (multiselect) {
@ -65,6 +91,10 @@ export const prepareFormData = (
id: `option${i}`,
label: e.option,
})) ?? [];
} else if (fieldType === 'file') {
input.isFileInput = true;
input.acceptFileTypes = field.acceptFileTypes;
input.multipleFiles = field.multipleFiles ? 'multiple' : '';
} else if (fieldType === 'dropdown') {
input.isSelect = true;
const fieldOptions = field.fieldOptions?.values ?? [];
@ -73,14 +103,14 @@ export const prepareFormData = (
input.isTextarea = true;
} else {
input.isInput = true;
input.type = fieldType as 'text' | 'number' | 'date';
input.type = fieldType as 'text' | 'number' | 'date' | 'email';
}
formData.formFields.push(input as FormTriggerInput);
}
return formData;
};
}
const checkResponseModeConfiguration = (context: IWebhookFunctions) => {
const responseMode = context.getNodeParameter('responseMode', 'onReceived') as string;
@ -114,6 +144,37 @@ const checkResponseModeConfiguration = (context: IWebhookFunctions) => {
};
export async function formWebhook(context: IWebhookFunctions) {
const nodeVersion = context.getNode().typeVersion;
const options = context.getNodeParameter('options', {}) as {
ignoreBots?: boolean;
respondWithOptions?: {
values: {
respondWith: 'text' | 'redirect';
formSubmittedText: string;
redirectUrl: string;
};
};
formSubmittedText?: string;
useWorkflowTimezone?: boolean;
appendAttribution?: boolean;
customAttribution?: string;
};
const res = context.getResponseObject();
const req = context.getRequestObject();
try {
if (options.ignoreBots && isbot(req.headers['user-agent']))
throw new WebhookAuthorizationError(403);
await validateWebhookAuthentication(context, FORM_TRIGGER_AUTHENTICATION_PROPERTY);
} catch (error) {
if (error instanceof WebhookAuthorizationError) {
res.writeHead(error.responseCode, { 'WWW-Authenticate': 'Basic realm="Webhook"' });
res.end(error.message);
return { noWebhookResponse: true };
}
throw error;
}
const mode = context.getMode() === 'manual' ? 'test' : 'production';
const formFields = context.getNodeParameter('formFields.values', []) as FormField[];
const method = context.getRequestObject().method;
@ -123,10 +184,11 @@ export async function formWebhook(context: IWebhookFunctions) {
//Show the form on GET request
if (method === 'GET') {
const formTitle = context.getNodeParameter('formTitle', '') as string;
const formDescription = context.getNodeParameter('formDescription', '') as string;
const formDescription = (context.getNodeParameter('formDescription', '') as string)
.replace(/\\n/g, '\n')
.replace(/<br>/g, '\n');
const instanceId = context.getInstanceId();
const responseMode = context.getNodeParameter('responseMode', '') as string;
const options = context.getNodeParameter('options', {}) as IDataObject;
let formSubmittedText;
let redirectUrl;
@ -150,19 +212,22 @@ export async function formWebhook(context: IWebhookFunctions) {
const useResponseData = responseMode === 'responseNode';
const data = prepareFormData(
const query = context.getRequestObject().query as IDataObject;
const data = prepareFormData({
formTitle,
formDescription,
formSubmittedText,
redirectUrl,
formFields,
mode === 'test',
testRun: mode === 'test',
query,
instanceId,
useResponseData,
appendAttribution,
);
customAttribution: options.customAttribution as string,
});
const res = context.getResponseObject();
res.render('form-trigger', data);
return {
noWebhookResponse: true,
@ -170,13 +235,64 @@ export async function formWebhook(context: IWebhookFunctions) {
}
const bodyData = (context.getBodyData().data as IDataObject) ?? {};
const files = (context.getBodyData().files as IDataObject) ?? {};
const returnItem: INodeExecutionData = {
json: {},
};
if (files && Object.keys(files).length) {
returnItem.binary = {};
}
for (const key of Object.keys(files)) {
const processFiles: MultiPartFormData.File[] = [];
let multiFile = false;
const filesInput = files[key] as MultiPartFormData.File[] | MultiPartFormData.File;
if (Array.isArray(filesInput)) {
bodyData[key] = filesInput.map((file) => ({
filename: file.originalFilename,
mimetype: file.mimetype,
size: file.size,
}));
processFiles.push(...filesInput);
multiFile = true;
} else {
bodyData[key] = {
filename: filesInput.originalFilename,
mimetype: filesInput.mimetype,
size: filesInput.size,
};
processFiles.push(filesInput);
}
const entryIndex = Number(key.replace(/field-/g, ''));
const fieldLabel = isNaN(entryIndex) ? key : formFields[entryIndex].fieldLabel;
let fileCount = 0;
for (const file of processFiles) {
let binaryPropertyName = fieldLabel.replace(/\W/g, '_');
if (multiFile) {
binaryPropertyName += `_${fileCount++}`;
}
returnItem.binary![binaryPropertyName] = await context.nodeHelpers.copyBinaryFile(
file.filepath,
file.originalFilename ?? file.newFilename,
file.mimetype,
);
}
}
const returnData: IDataObject = {};
for (const [index, field] of formFields.entries()) {
const key = `field-${index}`;
let value = bodyData[key] ?? null;
if (value === null) returnData[field.fieldLabel] = null;
if (value === null) {
returnItem.json[field.fieldLabel] = null;
continue;
}
if (field.fieldType === 'number') {
value = Number(value);
@ -187,16 +303,31 @@ export async function formWebhook(context: IWebhookFunctions) {
if (field.multiselect && typeof value === 'string') {
value = jsonParse(value);
}
returnData[field.fieldLabel] = value;
if (field.fieldType === 'date' && value && field.formatDate !== '') {
value = DateTime.fromFormat(String(value), 'yyyy-mm-dd').toFormat(field.formatDate as string);
}
returnData.submittedAt = new Date().toISOString();
returnData.formMode = mode;
if (field.fieldType === 'file' && field.multipleFiles && !Array.isArray(value)) {
value = [value];
}
returnItem.json[field.fieldLabel] = value;
}
let { useWorkflowTimezone } = options;
if (useWorkflowTimezone === undefined && nodeVersion > 2) {
useWorkflowTimezone = true;
}
const timezone = useWorkflowTimezone ? context.getTimezone() : 'UTC';
returnItem.json.submittedAt = DateTime.now().setZone(timezone).toISO();
returnItem.json.formMode = mode;
const webhookResponse: IDataObject = { status: 200 };
return {
webhookResponse,
workflowData: [context.helpers.returnJsonArray(returnData)],
workflowData: [[returnItem]],
};
}

86
packages/nodes-base/nodes/Form/v2/FormTriggerV2.node.ts
View file

@ -1,9 +1,10 @@
/* eslint-disable n8n-nodes-base/node-filename-against-convention */
import {
type INodeType,
type INodeTypeBaseDescription,
type INodeTypeDescription,
type IWebhookFunctions,
import type {
INodeProperties,
INodeType,
INodeTypeBaseDescription,
INodeTypeDescription,
IWebhookFunctions,
} from 'n8n-workflow';
import { formWebhook } from '../utils';
@ -16,13 +17,22 @@ import {
respondWithOptions,
webhookPath,
} from '../common.descriptions';
import { FORM_TRIGGER_AUTHENTICATION_PROPERTY } from '../interfaces';
const useWorkflowTimezone: INodeProperties = {
displayName: 'Use Workflow Timezone',
name: 'useWorkflowTimezone',
type: 'boolean',
default: false,
description: "Whether to use the workflow timezone set in node's settings rather than UTC",
};
const descriptionV2: INodeTypeDescription = {
displayName: 'n8n Form Trigger',
name: 'formTrigger',
icon: 'file:form.svg',
group: ['trigger'],
version: 2,
version: [2, 2.1],
description: 'Runs the flow when an n8n generated webform is submitted',
defaults: {
name: 'n8n Form Trigger',
@ -54,7 +64,35 @@ const descriptionV2: INodeTypeDescription = {
eventTriggerDescription: 'Waiting for you to submit the form',
activationMessage: 'You can now make calls to your production Form URL.',
triggerPanel: formTriggerPanel,
credentials: [
{
// eslint-disable-next-line n8n-nodes-base/node-class-description-credentials-name-unsuffixed
name: 'httpBasicAuth',
required: true,
displayOptions: {
show: {
[FORM_TRIGGER_AUTHENTICATION_PROPERTY]: ['basicAuth'],
},
},
},
],
properties: [
{
displayName: 'Authentication',
name: FORM_TRIGGER_AUTHENTICATION_PROPERTY,
type: 'options',
options: [
{
name: 'Basic Auth',
value: 'basicAuth',
},
{
name: 'None',
value: 'none',
},
],
default: 'none',
},
webhookPath,
formTitle,
formDescription,
@ -77,6 +115,17 @@ const descriptionV2: INodeTypeDescription = {
placeholder: 'Add option',
default: {},
options: [
{
displayName: 'Custom Attribution',
name: 'customAttribution',
type: 'string',
placeholder: 'e.g. <svg> ...</svg>',
description: "HTML code that will be shown at the bottom of the form instead n8n's logo",
default: '',
typeOptions: {
rows: 2,
},
},
{
// eslint-disable-next-line n8n-nodes-base/node-param-display-name-miscased
displayName: 'Append n8n Attribution',
@ -94,6 +143,31 @@ const descriptionV2: INodeTypeDescription = {
},
},
},
{
displayName: 'Ignore Bots',
name: 'ignoreBots',
type: 'boolean',
default: false,
description: 'Whether to ignore requests from bots like link previewers and web crawlers',
},
{
...useWorkflowTimezone,
default: false,
displayOptions: {
show: {
'@version': [2],
},
},
},
{
...useWorkflowTimezone,
default: true,
displayOptions: {
show: {
'@version': [{ _cnd: { gt: 2 } }],
},
},
},
],
},
],

93
packages/nodes-base/nodes/Webhook/Webhook.node.ts
View file

@ -4,7 +4,6 @@ import { createWriteStream } from 'fs';
import { stat } from 'fs/promises';
import type {
IWebhookFunctions,
ICredentialDataDecryptedObject,
IDataObject,
INodeExecutionData,
INodeTypeDescription,
@ -15,12 +14,9 @@ import type {
import { BINARY_ENCODING, NodeOperationError, Node } from 'n8n-workflow';
import { v4 as uuid } from 'uuid';
import basicAuth from 'basic-auth';
import isbot from 'isbot';
import { file as tmpFile } from 'tmp-promise';
import jwt from 'jsonwebtoken';
import { formatPrivateKey } from '../../utils/utilities';
import {
authenticationProperty,
credentialsProperty,
@ -39,6 +35,7 @@ import {
configuredOutputs,
isIpWhitelisted,
setupOutputConnection,
validateWebhookAuthentication,
} from './utils';
export class Webhook extends Node {
@ -265,93 +262,7 @@ export class Webhook extends Node {
}
private async validateAuth(context: IWebhookFunctions) {
const authentication = context.getNodeParameter(this.authPropertyName) as string;
if (authentication === 'none') return;
const req = context.getRequestObject();
const headers = context.getHeaderData();
if (authentication === 'basicAuth') {
// Basic authorization is needed to call webhook
let expectedAuth: ICredentialDataDecryptedObject | undefined;
try {
expectedAuth = await context.getCredentials('httpBasicAuth');
} catch {}
if (expectedAuth === undefined || !expectedAuth.user || !expectedAuth.password) {
// Data is not defined on node so can not authenticate
throw new WebhookAuthorizationError(500, 'No authentication data defined on node!');
}
const providedAuth = basicAuth(req);
// Authorization data is missing
if (!providedAuth) throw new WebhookAuthorizationError(401);
if (providedAuth.name !== expectedAuth.user || providedAuth.pass !== expectedAuth.password) {
// Provided authentication data is wrong
throw new WebhookAuthorizationError(403);
}
} else if (authentication === 'headerAuth') {
// Special header with value is needed to call webhook
let expectedAuth: ICredentialDataDecryptedObject | undefined;
try {
expectedAuth = await context.getCredentials('httpHeaderAuth');
} catch {}
if (expectedAuth === undefined || !expectedAuth.name || !expectedAuth.value) {
// Data is not defined on node so can not authenticate
throw new WebhookAuthorizationError(500, 'No authentication data defined on node!');
}
const headerName = (expectedAuth.name as string).toLowerCase();
const expectedValue = expectedAuth.value as string;
if (
!headers.hasOwnProperty(headerName) ||
(headers as IDataObject)[headerName] !== expectedValue
) {
// Provided authentication data is wrong
throw new WebhookAuthorizationError(403);
}
} else if (authentication === 'jwtAuth') {
let expectedAuth;
try {
expectedAuth = (await context.getCredentials('jwtAuth')) as {
keyType: 'passphrase' | 'pemKey';
publicKey: string;
secret: string;
algorithm: jwt.Algorithm;
};
} catch {}
if (expectedAuth === undefined) {
// Data is not defined on node so can not authenticate
throw new WebhookAuthorizationError(500, 'No authentication data defined on node!');
}
const authHeader = req.headers.authorization;
const token = authHeader?.split(' ')[1];
if (!token) {
throw new WebhookAuthorizationError(401, 'No token provided');
}
let secretOrPublicKey;
if (expectedAuth.keyType === 'passphrase') {
secretOrPublicKey = expectedAuth.secret;
} else {
secretOrPublicKey = formatPrivateKey(expectedAuth.publicKey, true);
}
try {
return jwt.verify(token, secretOrPublicKey, {
algorithms: [expectedAuth.algorithm],
}) as IDataObject;
} catch (error) {
throw new WebhookAuthorizationError(403, error.message);
}
}
return await validateWebhookAuthentication(context, this.authPropertyName);
}
private async handleFormData(

104
packages/nodes-base/nodes/Webhook/utils.ts
View file

@ -1,5 +1,14 @@
import { NodeConnectionType, NodeOperationError } from 'n8n-workflow';
import type { IWebhookFunctions, INodeExecutionData, IDataObject } from 'n8n-workflow';
import type {
IWebhookFunctions,
INodeExecutionData,
IDataObject,
ICredentialDataDecryptedObject,
} from 'n8n-workflow';
import { WebhookAuthorizationError } from './error';
import basicAuth from 'basic-auth';
import jwt from 'jsonwebtoken';
import { formatPrivateKey } from '../../utils/utilities';
type WebhookParameters = {
httpMethod: string;
@ -167,3 +176,96 @@ export const checkResponseModeConfiguration = (context: IWebhookFunctions) => {
);
}
};
export async function validateWebhookAuthentication(
ctx: IWebhookFunctions,
authPropertyName: string,
) {
const authentication = ctx.getNodeParameter(authPropertyName) as string;
if (authentication === 'none') return;
const req = ctx.getRequestObject();
const headers = ctx.getHeaderData();
if (authentication === 'basicAuth') {
// Basic authorization is needed to call webhook
let expectedAuth: ICredentialDataDecryptedObject | undefined;
try {
expectedAuth = await ctx.getCredentials('httpBasicAuth');
} catch {}
if (expectedAuth === undefined || !expectedAuth.user || !expectedAuth.password) {
// Data is not defined on node so can not authenticate
throw new WebhookAuthorizationError(500, 'No authentication data defined on node!');
}
const providedAuth = basicAuth(req);
// Authorization data is missing
if (!providedAuth) throw new WebhookAuthorizationError(401);
if (providedAuth.name !== expectedAuth.user || providedAuth.pass !== expectedAuth.password) {
// Provided authentication data is wrong
throw new WebhookAuthorizationError(403);
}
} else if (authentication === 'headerAuth') {
// Special header with value is needed to call webhook
let expectedAuth: ICredentialDataDecryptedObject | undefined;
try {
expectedAuth = await ctx.getCredentials('httpHeaderAuth');
} catch {}
if (expectedAuth === undefined || !expectedAuth.name || !expectedAuth.value) {
// Data is not defined on node so can not authenticate
throw new WebhookAuthorizationError(500, 'No authentication data defined on node!');
}
const headerName = (expectedAuth.name as string).toLowerCase();
const expectedValue = expectedAuth.value as string;
if (
!headers.hasOwnProperty(headerName) ||
(headers as IDataObject)[headerName] !== expectedValue
) {
// Provided authentication data is wrong
throw new WebhookAuthorizationError(403);
}
} else if (authentication === 'jwtAuth') {
let expectedAuth;
try {
expectedAuth = (await ctx.getCredentials('jwtAuth')) as {
keyType: 'passphrase' | 'pemKey';
publicKey: string;
secret: string;
algorithm: jwt.Algorithm;
};
} catch {}
if (expectedAuth === undefined) {
// Data is not defined on node so can not authenticate
throw new WebhookAuthorizationError(500, 'No authentication data defined on node!');
}
const authHeader = req.headers.authorization;
const token = authHeader?.split(' ')[1];
if (!token) {
throw new WebhookAuthorizationError(401, 'No token provided');
}
let secretOrPublicKey;
if (expectedAuth.keyType === 'passphrase') {
secretOrPublicKey = expectedAuth.secret;
} else {
secretOrPublicKey = formatPrivateKey(expectedAuth.publicKey, true);
}
try {
return jwt.verify(token, secretOrPublicKey, {
algorithms: [expectedAuth.algorithm],
}) as IDataObject;
} catch (error) {
throw new WebhookAuthorizationError(403, error.message);
}
}
}

1
packages/workflow/src/Interfaces.ts
View file

@ -1464,6 +1464,7 @@ export namespace MultiPartFormData {
mimetype?: string;
originalFilename?: string;
newFilename: string;
size?: number;
}
export type Request = express.Request<