diff --git a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx index 4ab850082f..e7c2f8c61c 100644 --- a/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx +++ b/frontend/src/AppBuilder/AppCanvas/RenderWidget.jsx @@ -12,6 +12,7 @@ const shouldAddBoxShadowAndVisibility = [ 'TextInput', 'TextArea', 'PasswordInput', + 'EmailInput', 'NumberInput', 'Text', 'Checkbox', @@ -87,6 +88,7 @@ const RenderWidget = ({ ...{ widgetValue: value }, ...{ validationObject: unResolvedValidation }, customResolveObjects: customResolvables, + componentType, }), // eslint-disable-next-line react-hooks/exhaustive-deps [validateWidget, customResolvables, unResolvedValidation, resolvedValidation] diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx index 6c915a650e..e51a25a7da 100644 --- a/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx +++ b/frontend/src/AppBuilder/RightSideBar/ComponentsManagerTab/ComponentsManagerTab.jsx @@ -119,6 +119,7 @@ export const ComponentsManagerTab = ({ darkMode }) => { 'NumberInput', 'PasswordInput', 'TextArea', + 'EmailInput', 'ToggleSwitchV2', 'DropdownV2', 'MultiselectV2', diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx index 7033933aa2..b0032e1197 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Components/DefaultComponent.jsx @@ -17,6 +17,7 @@ const SHOW_ADDITIONAL_ACTIONS = [ 'TextArea', 'NumberInput', 'PasswordInput', + 'EmailInput', 'ToggleSwitchV2', 'Checkbox', 'DropdownV2', @@ -123,6 +124,7 @@ export const baseComponentProperties = ( 'TextInput', 'PasswordInput', 'TextArea', + 'EmailInput', 'NumberInput', 'Text', 'Table', diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx index c37881c687..60325ef372 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Inspector.jsx @@ -36,6 +36,7 @@ import { EMPTY_ARRAY } from '@/_stores/editorStore'; import { Select } from './Components/Select'; import { deepClone } from '@/_helpers/utilities/utils.helpers'; import useStore from '@/AppBuilder/_stores/store'; +// import { componentTypes } from '@/Editor/WidgetManager/components'; import { componentTypes } from '@/AppBuilder/WidgetManager/componentTypes'; import { copyComponents } from '@/AppBuilder/AppCanvas/appCanvasUtils.js'; import DatetimePickerV2 from './Components/DatetimePickerV2.jsx'; @@ -68,6 +69,7 @@ const NEW_REVAMPED_COMPONENTS = [ 'TextInput', 'TextArea', 'PasswordInput', + 'EmailInput', 'NumberInput', 'Table', 'ToggleSwitchV2', diff --git a/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js b/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js index 62ee032172..67d3581231 100644 --- a/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js +++ b/frontend/src/AppBuilder/RightSideBar/Inspector/Utils.js @@ -43,6 +43,7 @@ export function renderCustomStyles( componentConfig.component == 'TextInput' || componentConfig.component == 'NumberInput' || componentConfig.component == 'PasswordInput' || + componentConfig.component == 'EmailInput' || componentConfig.component == 'ToggleSwitchV2' || componentConfig.component == 'Checkbox' || componentConfig.component == 'Table' || diff --git a/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js b/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js index be2855c476..901538bfc2 100644 --- a/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js +++ b/frontend/src/AppBuilder/WidgetManager/configs/widgetConfig.js @@ -58,6 +58,7 @@ import { linkConfig, iconConfig, boundedBoxConfig, + emailinputConfig, } from '../widgets'; export const widgets = [ @@ -70,6 +71,7 @@ export const widgets = [ textinputConfig, numberinputConfig, passinputConfig, + emailinputConfig, datepickerConfig, datetimePickerV2Config, datePickerV2Config, diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/emailinput.js b/frontend/src/AppBuilder/WidgetManager/widgets/emailinput.js new file mode 100644 index 0000000000..825340616f --- /dev/null +++ b/frontend/src/AppBuilder/WidgetManager/widgets/emailinput.js @@ -0,0 +1,292 @@ +export const emailinputConfig = { + name: 'EmailInput', + displayName: 'Email Input', + description: 'Email input field', + component: 'EmailInput', + defaultSize: { + width: 10, + height: 40, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { schema: { type: 'string' }, defaultValue: 'Label' }, + }, + placeholder: { + type: 'code', + displayName: 'Placeholder', + validation: { + schema: { type: 'string' }, + defaultValue: 'Enter email', + }, + }, + value: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { + type: 'string', + }, + defaultValue: 'Default value', + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + section: 'additionalActions', + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + validation: { + mandatory: { type: 'toggle', displayName: 'Make this field mandatory' }, + regex: { type: 'code', displayName: 'Regex', placeholder: '^[a-zA-Z0-9_ -]{3,16}$' }, + minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' }, + maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' }, + customRule: { + type: 'code', + displayName: 'Custom validation', + placeholder: `{{components.text2.text=='yes'&&'valid'}}`, + }, + }, + events: { + onChange: { displayName: 'On change' }, + onEnterPressed: { displayName: 'On enter pressed' }, + onFocus: { displayName: 'On focus' }, + onBlur: { displayName: 'On blur' }, + }, + styles: { + color: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'label', + }, + alignment: { + type: 'switch', + displayName: 'Alignment', + validation: { schema: { type: 'string' }, defaultValue: 'side' }, + options: [ + { displayName: 'Side', value: 'side' }, + { displayName: 'Top', value: 'top' }, + ], + accordian: 'label', + }, + direction: { + type: 'switch', + displayName: '', + validation: { schema: { type: 'string' }, defaultValue: 'left' }, + showLabel: false, + isIcon: true, + options: [ + { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' }, + { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' }, + ], + accordian: 'label', + isFxNotRequired: true, + }, + width: { + type: 'slider', + displayName: 'Width', + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + auto: { + type: 'checkbox', + displayName: 'auto', + showLabel: false, + validation: { schema: { type: 'boolean' }, defaultValue: true }, + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + + backgroundColor: { + type: 'color', + displayName: 'Background', + validation: { schema: { type: 'string' }, defaultValue: '#fff' }, + accordian: 'field', + }, + borderColor: { + type: 'color', + displayName: 'Border', + validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, + accordian: 'field', + }, + accentColor: { + type: 'color', + displayName: 'Accent', + validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, + accordian: 'field', + }, + textColor: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'field', + }, + errTextColor: { + type: 'color', + displayName: 'Error text', + validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, + accordian: 'field', + }, + icon: { + type: 'icon', + displayName: 'Icon', + validation: { schema: { type: 'string' }, defaultValue: 'IconMailFilled' }, + accordian: 'field', + visibility: true, + }, + iconColor: { + type: 'color', + displayName: 'Icon color', + validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, + accordian: 'field', + visibility: false, + showLabel: false, + }, + borderRadius: { + type: 'numberInput', + displayName: 'Border radius', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 }, + accordian: 'field', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'field', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + isFxNotRequired: true, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', + }, + }, + exposedVariables: { + value: '', + isMandatory: false, + isVisible: true, + isDisabled: false, + isLoading: false, + }, + actions: [ + { + handle: 'setText', + displayName: 'Set text', + params: [{ handle: 'text', displayName: 'text', defaultValue: 'New text' }], + }, + { + handle: 'clear', + displayName: 'Clear', + }, + { + handle: 'setFocus', + displayName: 'Set focus', + }, + { + handle: 'setBlur', + displayName: 'Set blur', + }, + { + handle: 'setVisibility', + displayName: 'Set visibility', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setDisable', + displayName: 'Set disable', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setLoading', + displayName: 'Set loading', + params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + ], + definition: { + validation: { + mandatory: { value: '{{false}}' }, + regex: { value: '' }, + minLength: { value: '' }, + maxLength: { value: '' }, + customRule: { value: '' }, + }, + + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + value: { value: '' }, + label: { value: 'Label' }, + placeholder: { value: 'Enter email' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + loadingState: { value: '{{false}}' }, + tooltip: { value: '' }, + }, + events: [], + styles: { + textColor: { value: '#1B1F24' }, + borderColor: { value: '#CCD1D5' }, + accentColor: { value: '#4368E3' }, + errTextColor: { value: '#D72D39' }, + borderRadius: { value: '{{6}}' }, + backgroundColor: { value: '#fff' }, + iconColor: { value: '#CCD1D5' }, + direction: { value: 'left' }, + width: { value: '{{33}}' }, + alignment: { value: 'side' }, + color: { value: '#1B1F24' }, + auto: { value: '{{true}}' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000040' }, + icon: { value: 'IconMailFilled' }, + iconVisibility: { value: true }, + }, + }, +}; diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/index.js b/frontend/src/AppBuilder/WidgetManager/widgets/index.js index ce0e73fdf5..f916541b8f 100644 --- a/frontend/src/AppBuilder/WidgetManager/widgets/index.js +++ b/frontend/src/AppBuilder/WidgetManager/widgets/index.js @@ -58,6 +58,7 @@ import { kanbanBoardConfig } from './kanbanBoard'; import { datetimePickerV2Config } from './datetimepickerV2'; import { datePickerV2Config } from './datepickerV2'; import { timePickerConfig } from './timepicker'; +import { emailinputConfig } from './emailinput'; export { buttonConfig, @@ -73,6 +74,7 @@ export { datetimePickerV2Config, datePickerV2Config, timePickerConfig, + emailinputConfig, checkboxConfig, radiobuttonConfig, //!Depreciated radiobuttonV2Config, diff --git a/frontend/src/AppBuilder/Widgets/EmailInput.jsx b/frontend/src/AppBuilder/Widgets/EmailInput.jsx new file mode 100644 index 0000000000..90061b0a66 --- /dev/null +++ b/frontend/src/AppBuilder/Widgets/EmailInput.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { BaseInput } from './BaseComponents/BaseInput'; +import { useInput } from './BaseComponents/hooks/useInput'; + +export const EmailInput = (props) => { + const inputLogic = useInput(props); + const additionalInputProps = { + autocomplete: 'email', + name: 'email', + }; + return ; +}; diff --git a/frontend/src/AppBuilder/_helpers/editorHelpers.js b/frontend/src/AppBuilder/_helpers/editorHelpers.js index 4665ed21ad..7a69d09ce9 100644 --- a/frontend/src/AppBuilder/_helpers/editorHelpers.js +++ b/frontend/src/AppBuilder/_helpers/editorHelpers.js @@ -30,6 +30,7 @@ import { StarRating } from '@/Editor/Components/StarRating'; import { Divider } from '@/Editor/Components/Divider'; import { FilePicker } from '@/Editor/Components/FilePicker'; import { PasswordInput } from '@/AppBuilder/Widgets/PasswordInput'; +import { EmailInput } from '@/Editor/Components/EmailInput'; // import { Calendar } from '@/Editor/Components/Calendar'; // import { Listview } from '@/Editor/Components/Listview'; import { IFrame } from '@/Editor/Components/IFrame'; @@ -118,6 +119,7 @@ export const AllComponents = { Divider, FilePicker, PasswordInput, + EmailInput, Calendar, IFrame, CodeEditor, diff --git a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js index d2fbddf442..57ee6b842f 100644 --- a/frontend/src/AppBuilder/_stores/slices/componentsSlice.js +++ b/frontend/src/AppBuilder/_stores/slices/componentsSlice.js @@ -439,7 +439,7 @@ export const createComponentsSlice = (set, get) => ({ } }, - validateWidget: ({ validationObject, widgetValue, customResolveObjects }) => { + validateWidget: ({ validationObject, widgetValue, customResolveObjects, componentType }) => { const { getResolvedValue } = get(); let isValid = true; let validationError = null; @@ -455,6 +455,17 @@ export const createComponentsSlice = (set, get) => ({ validationRegex = typeof validationRegex === 'string' ? validationRegex : ''; const re = new RegExp(validationRegex, 'g'); + if (componentType === 'EmailInput' && widgetValue) { + const validationRegex = '^(?!.*\\.\\.)([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,})$'; + const emailRegex = new RegExp(validationRegex, 'g'); + if (!emailRegex.test(widgetValue)) { + return { + isValid: false, + validationError: 'Input should be a valid email', + }; + } + } + if (!re.test(widgetValue)) { return { isValid: false, @@ -1833,6 +1844,7 @@ export const createComponentsSlice = (set, get) => ({ ![ 'TextInput', 'PasswordInput', + 'EmailInput', 'NumberInput', 'DropdownV2', 'MultiselectV2', diff --git a/server/src/modules/apps/services/widget-config/emailinput.js b/server/src/modules/apps/services/widget-config/emailinput.js new file mode 100644 index 0000000000..825340616f --- /dev/null +++ b/server/src/modules/apps/services/widget-config/emailinput.js @@ -0,0 +1,292 @@ +export const emailinputConfig = { + name: 'EmailInput', + displayName: 'Email Input', + description: 'Email input field', + component: 'EmailInput', + defaultSize: { + width: 10, + height: 40, + }, + others: { + showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' }, + showOnMobile: { type: 'toggle', displayName: 'Show on mobile' }, + }, + properties: { + label: { + type: 'code', + displayName: 'Label', + validation: { schema: { type: 'string' }, defaultValue: 'Label' }, + }, + placeholder: { + type: 'code', + displayName: 'Placeholder', + validation: { + schema: { type: 'string' }, + defaultValue: 'Enter email', + }, + }, + value: { + type: 'code', + displayName: 'Default value', + validation: { + schema: { + type: 'string', + }, + defaultValue: 'Default value', + }, + }, + loadingState: { + type: 'toggle', + displayName: 'Loading state', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + section: 'additionalActions', + }, + visibility: { + type: 'toggle', + displayName: 'Visibility', + validation: { schema: { type: 'boolean' }, defaultValue: true }, + section: 'additionalActions', + }, + disabledState: { + type: 'toggle', + displayName: 'Disable', + validation: { schema: { type: 'boolean' }, defaultValue: false }, + section: 'additionalActions', + }, + tooltip: { + type: 'code', + displayName: 'Tooltip', + validation: { schema: { type: 'string' }, defaultValue: 'Tooltip text' }, + section: 'additionalActions', + placeholder: 'Enter tooltip text', + }, + }, + validation: { + mandatory: { type: 'toggle', displayName: 'Make this field mandatory' }, + regex: { type: 'code', displayName: 'Regex', placeholder: '^[a-zA-Z0-9_ -]{3,16}$' }, + minLength: { type: 'code', displayName: 'Min length', placeholder: 'Enter min length' }, + maxLength: { type: 'code', displayName: 'Max length', placeholder: 'Enter max length' }, + customRule: { + type: 'code', + displayName: 'Custom validation', + placeholder: `{{components.text2.text=='yes'&&'valid'}}`, + }, + }, + events: { + onChange: { displayName: 'On change' }, + onEnterPressed: { displayName: 'On enter pressed' }, + onFocus: { displayName: 'On focus' }, + onBlur: { displayName: 'On blur' }, + }, + styles: { + color: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'label', + }, + alignment: { + type: 'switch', + displayName: 'Alignment', + validation: { schema: { type: 'string' }, defaultValue: 'side' }, + options: [ + { displayName: 'Side', value: 'side' }, + { displayName: 'Top', value: 'top' }, + ], + accordian: 'label', + }, + direction: { + type: 'switch', + displayName: '', + validation: { schema: { type: 'string' }, defaultValue: 'left' }, + showLabel: false, + isIcon: true, + options: [ + { displayName: 'alignleftinspector', value: 'left', iconName: 'alignleftinspector' }, + { displayName: 'alignrightinspector', value: 'right', iconName: 'alignrightinspector' }, + ], + accordian: 'label', + isFxNotRequired: true, + }, + width: { + type: 'slider', + displayName: 'Width', + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + auto: { + type: 'checkbox', + displayName: 'auto', + showLabel: false, + validation: { schema: { type: 'boolean' }, defaultValue: true }, + accordian: 'label', + conditionallyRender: { + key: 'alignment', + value: 'side', + }, + isFxNotRequired: true, + }, + + backgroundColor: { + type: 'color', + displayName: 'Background', + validation: { schema: { type: 'string' }, defaultValue: '#fff' }, + accordian: 'field', + }, + borderColor: { + type: 'color', + displayName: 'Border', + validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, + accordian: 'field', + }, + accentColor: { + type: 'color', + displayName: 'Accent', + validation: { schema: { type: 'string' }, defaultValue: '#4368E3' }, + accordian: 'field', + }, + textColor: { + type: 'color', + displayName: 'Text', + validation: { schema: { type: 'string' }, defaultValue: '#1B1F24' }, + accordian: 'field', + }, + errTextColor: { + type: 'color', + displayName: 'Error text', + validation: { schema: { type: 'string' }, defaultValue: '#D72D39' }, + accordian: 'field', + }, + icon: { + type: 'icon', + displayName: 'Icon', + validation: { schema: { type: 'string' }, defaultValue: 'IconMailFilled' }, + accordian: 'field', + visibility: true, + }, + iconColor: { + type: 'color', + displayName: 'Icon color', + validation: { schema: { type: 'string' }, defaultValue: '#CCD1D5' }, + accordian: 'field', + visibility: false, + showLabel: false, + }, + borderRadius: { + type: 'numberInput', + displayName: 'Border radius', + validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 6 }, + accordian: 'field', + }, + boxShadow: { + type: 'boxShadow', + displayName: 'Box Shadow', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: '0px 0px 0px 0px #00000040', + }, + accordian: 'field', + }, + padding: { + type: 'switch', + displayName: 'Padding', + validation: { + schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, + defaultValue: 'default', + }, + isFxNotRequired: true, + options: [ + { displayName: 'Default', value: 'default' }, + { displayName: 'None', value: 'none' }, + ], + accordian: 'container', + }, + }, + exposedVariables: { + value: '', + isMandatory: false, + isVisible: true, + isDisabled: false, + isLoading: false, + }, + actions: [ + { + handle: 'setText', + displayName: 'Set text', + params: [{ handle: 'text', displayName: 'text', defaultValue: 'New text' }], + }, + { + handle: 'clear', + displayName: 'Clear', + }, + { + handle: 'setFocus', + displayName: 'Set focus', + }, + { + handle: 'setBlur', + displayName: 'Set blur', + }, + { + handle: 'setVisibility', + displayName: 'Set visibility', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setDisable', + displayName: 'Set disable', + params: [{ handle: 'disable', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + { + handle: 'setLoading', + displayName: 'Set loading', + params: [{ handle: 'loading', displayName: 'Value', defaultValue: '{{false}}', type: 'toggle' }], + }, + ], + definition: { + validation: { + mandatory: { value: '{{false}}' }, + regex: { value: '' }, + minLength: { value: '' }, + maxLength: { value: '' }, + customRule: { value: '' }, + }, + + others: { + showOnDesktop: { value: '{{true}}' }, + showOnMobile: { value: '{{false}}' }, + }, + properties: { + value: { value: '' }, + label: { value: 'Label' }, + placeholder: { value: 'Enter email' }, + visibility: { value: '{{true}}' }, + disabledState: { value: '{{false}}' }, + loadingState: { value: '{{false}}' }, + tooltip: { value: '' }, + }, + events: [], + styles: { + textColor: { value: '#1B1F24' }, + borderColor: { value: '#CCD1D5' }, + accentColor: { value: '#4368E3' }, + errTextColor: { value: '#D72D39' }, + borderRadius: { value: '{{6}}' }, + backgroundColor: { value: '#fff' }, + iconColor: { value: '#CCD1D5' }, + direction: { value: 'left' }, + width: { value: '{{33}}' }, + alignment: { value: 'side' }, + color: { value: '#1B1F24' }, + auto: { value: '{{true}}' }, + padding: { value: 'default' }, + boxShadow: { value: '0px 0px 0px 0px #00000040' }, + icon: { value: 'IconMailFilled' }, + iconVisibility: { value: true }, + }, + }, +}; diff --git a/server/src/modules/apps/services/widget-config/index.js b/server/src/modules/apps/services/widget-config/index.js index 34826885e0..968fafac40 100644 --- a/server/src/modules/apps/services/widget-config/index.js +++ b/server/src/modules/apps/services/widget-config/index.js @@ -58,6 +58,7 @@ import { kanbanBoardConfig } from './kanbanBoard'; import { datetimePickerV2Config } from './datetimepickerV2'; import { datePickerV2Config } from './datepickerV2'; import { timePickerConfig } from './timepicker'; +import { emailinputConfig } from './emailinput'; const widgets = { buttonConfig, @@ -73,6 +74,7 @@ const widgets = { datetimePickerV2Config, datePickerV2Config, timePickerConfig, + emailinputConfig, checkboxConfig, radiobuttonConfig, //!Depreciated radiobuttonV2Config,