setShowColorPicker(true)}
diff --git a/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx b/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx
index 848de076ae..6be9d65bc7 100644
--- a/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx
+++ b/frontend/src/Editor/Components/DropdownV2/CustomMenuList.jsx
@@ -1,87 +1,118 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
import { components } from 'react-select';
import SolidIcon from '@/_ui/Icon/SolidIcons';
import Loader from '@/ToolJetUI/Loader/Loader';
import './dropdownV2.scss';
-import { FormCheck } from 'react-bootstrap';
+// eslint-disable-next-line import/no-unresolved
+import { useVirtualizer } from '@tanstack/react-virtual';
import cx from 'classnames';
const { MenuList } = components;
// This Menulist also used in MultiselectV2
const CustomMenuList = ({ selectProps, ...props }) => {
- const {
- onInputChange,
- onMenuInputFocus,
- showAllOption,
- isSelectAllSelected,
- optionsLoadingState,
- darkMode,
- setSelected,
- setIsSelectAllSelected,
- fireEvent,
- inputValue,
- menuId,
- } = selectProps;
+ const { onInputChange, onMenuInputFocus, optionsLoadingState, darkMode, inputValue, menuId, showSearchInput } =
+ selectProps;
- const handleSelectAll = (e) => {
- e.target.checked && fireEvent();
- if (e.target.checked) {
- setSelected(props.options);
- } else {
- setSelected([]);
+ const parentRef = useRef(null);
+ const virtualizer = useVirtualizer({
+ count: props?.children?.length || 0,
+ getScrollElement: () => parentRef.current,
+ estimateSize: () => 40,
+ overscan: 15,
+ });
+
+ useEffect(() => {
+ const searchInput = document.querySelector('.dropdown-multiselect-widget-search-box');
+ if (searchInput) {
+ searchInput.focus();
}
- setIsSelectAllSelected(e.target.checked);
- };
+ }, []);
+
return (
) : (
{
event.stopPropagation();
fireEvent('onHover');
@@ -97,7 +97,7 @@ export const Icon = ({
color={color}
style={{
width: height < width ? 'auto' : width,
- height: height < width ? height : 'auto',
+ height: height < width ? '100%' : 'auto',
color: iconColor,
}}
onClick={(event) => {
diff --git a/frontend/src/Editor/Components/Link/Link.jsx b/frontend/src/Editor/Components/Link/Link.jsx
index 0b33686278..3a5744df8e 100644
--- a/frontend/src/Editor/Components/Link/Link.jsx
+++ b/frontend/src/Editor/Components/Link/Link.jsx
@@ -19,8 +19,7 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
const computedStyles = {
display: 'flex',
alignItems: verticalAlignment === 'top' ? 'flex-start' : verticalAlignment === 'center' ? 'center' : 'flex-end',
- justifyContent:
- horizontalAlignment === 'left' ? 'flex-start' : horizontalAlignment === 'center' ? 'center' : 'flex-end',
+ textAlign: horizontalAlignment === 'left' ? 'left' : horizontalAlignment === 'center' ? 'center' : 'right',
height: '100%',
width: '100%',
boxShadow,
@@ -113,10 +112,20 @@ export const Link = ({ height, properties, styles, fireEvent, setExposedVariable
onMouseOver={() => {
fireEvent('onHover');
}}
- style={{ color: textColor, fontSize: textSize, cursor: isDisabled ? 'not-allowed' : 'pointer' }}
+ style={{ width: '100%' }}
ref={clickRef}
>
-
+
{iconVisibility && (
)}
- {linkTextState}
+ {linkTextState}
diff --git a/frontend/src/Editor/Components/Link/link.scss b/frontend/src/Editor/Components/Link/link.scss
index a92f19829f..20b375025f 100644
--- a/frontend/src/Editor/Components/Link/link.scss
+++ b/frontend/src/Editor/Components/Link/link.scss
@@ -1,8 +1,18 @@
.link-widget {
a {
- text-underline-offset: 32%; // Adds space between text and underline
- &:hover {
- color: var(--link-hover-color) !important;
- }
+ text-decoration: none !important;
+ pointer-events: none;
+ cursor: none !important;
+
+ .link-text {
+ pointer-events: all;
+ text-underline-offset: 32%; // Adds space between text and underline
+ cursor: pointer;
+ &:hover {
+ text-decoration: underline;
+ text-decoration-color: var(--link-hover-color) !important;
+ color: var(--link-hover-color) !important;
+ }
}
+ }
}
diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
index 56b38b2edb..e187cf1292 100644
--- a/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/CustomOption.jsx
@@ -7,11 +7,23 @@ import { highlightText } from '../DropdownV2/utils';
const CustomOption = (props) => {
return (
-
diff --git a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
index 2901abc106..d167818036 100644
--- a/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/CustomValueContainer.jsx
@@ -6,7 +6,11 @@ import './multiselectV2.scss';
const CustomValueContainer = ({ children, ...props }) => {
const selectProps = props.selectProps;
- const values = Array.isArray(selectProps?.value) && selectProps?.value?.map((option) => option.label);
+ const values =
+ Array.isArray(selectProps?.value) &&
+ selectProps?.value
+ ?.filter((option) => option.value !== 'multiselect-custom-menulist-select-all') //Remove the Select all option if selected
+ ?.map((option) => option.label);
const isAllOptionsSelected = selectProps?.value.length === selectProps.options.length;
const valueContainerWidth = selectProps?.containerRef?.current?.offsetWidth;
// eslint-disable-next-line import/namespace
@@ -36,13 +40,13 @@ const CustomValueContainer = ({ children, ...props }) => {
) : (
)}
{/* Rendering children except Placeholder component to preserve the default behavior of react-select like focus
handling */}
{React.Children.map(children, (child) => {
- if (child.type !== Placeholder) {
+ if (child?.type !== Placeholder) {
return child;
}
})}
diff --git a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
index 7d5109edee..78b7c79552 100644
--- a/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
+++ b/frontend/src/Editor/Components/MultiselectV2/MultiselectV2.jsx
@@ -12,7 +12,6 @@ import Label from '@/_ui/Label';
const tinycolor = require('tinycolor2');
import { CustomDropdownIndicator, CustomClearIndicator } from '../DropdownV2/DropdownV2';
import { getInputBackgroundColor, getInputBorderColor, getInputFocusedColor, sortArray } from '../DropdownV2/utils';
-import useStore from '@/AppBuilder/_stores/store';
export const MultiselectV2 = ({
id,
@@ -38,6 +37,9 @@ export const MultiselectV2 = ({
loadingState: multiSelectLoadingState,
optionsLoadingState,
sort,
+ showAllSelectedLabel,
+ showClearBtn,
+ showSearchInput,
} = properties;
const {
selectedTextColor,
@@ -73,12 +75,9 @@ export const MultiselectV2 = ({
const [visibility, setVisibility] = useState(properties.visibility);
const [isMultiSelectLoading, setIsMultiSelectLoading] = useState(multiSelectLoadingState);
const [isMultiSelectDisabled, setIsMultiSelectDisabled] = useState(disabledState);
- const [isSelectAllSelected, setIsSelectAllSelected] = useState(false);
const [searchInputValue, setSearchInputValue] = useState('');
const _height = padding === 'default' ? `${height}px` : `${height + 4}px`;
const [userInteracted, setUserInteracted] = useState(false);
- const currentMode = useStore((state) => state.currentMode);
- const isEditor = currentMode === 'edit';
const [isMultiselectOpen, setIsMultiselectOpen] = useState(false);
useEffect(() => {
@@ -93,18 +92,29 @@ export const MultiselectV2 = ({
const _options = advanced ? schema : options;
let _selectOptions = Array.isArray(_options)
? _options
- .filter((data) => data?.visible ?? true)
- .map((data) => ({
- ...data,
- label: data?.label,
- value: data?.value,
- isDisabled: data?.disable ?? false,
- }))
+ .filter((data) => data?.visible ?? true)
+ .map((data) => ({
+ ...data,
+ label: data?.label,
+ value: data?.value,
+ isDisabled: data?.disable ?? false,
+ }))
: [];
return sortArray(_selectOptions, sort);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [advanced, JSON.stringify(schema), JSON.stringify(options), sort]);
+ const modifiedSelectOptions = useMemo(() => {
+ // Adding select all option dynamically to the options
+ if (showAllOption && !optionsLoadingState) {
+ return [
+ // Appended search input value so that it is always visible
+ { label: `Select all ${searchInputValue}`, value: 'multiselect-custom-menulist-select-all' },
+ ...selectOptions,
+ ];
+ } else return selectOptions;
+ }, [showAllOption, JSON.stringify(selectOptions), optionsLoadingState, searchInputValue]);
+
function findDefaultItem(value, isAdvanced, isDefault) {
if (isAdvanced) {
const foundItem = Array.isArray(schema) ? schema.filter((item) => item?.visible && item?.default) : [];
@@ -129,8 +139,28 @@ export const MultiselectV2 = ({
}
return false;
}
+
const onChangeHandler = (items, action) => {
- setInputValue(items);
+ const SELECT_ALL = 'multiselect-custom-menulist-select-all';
+
+ if (action.option?.value === SELECT_ALL) {
+ // Case 1 - If select all is selected
+ if (action.action === 'select-option') {
+ setInputValue(selectOptions);
+ } else {
+ setInputValue([]);
+ }
+ } else if (items?.some((item) => item.value === SELECT_ALL)) {
+ // Case 2 - If select all is not selected but selected options include select all
+ setInputValue(items.filter((item) => item.value !== SELECT_ALL));
+ } else if (selectOptions?.length === items?.length) {
+ // Case 3 - If all options are selected except select all
+ setInputValue(selectOptions);
+ } else {
+ // Case 4 - Normal selection
+ setInputValue(items);
+ }
+
fireEvent('onSelect');
setUserInteracted(true);
};
@@ -270,26 +300,34 @@ export const MultiselectV2 = ({
fireEvent('onSearchTextChanged');
}
};
- const handleClickOutside = (event) => {
+ const handleClickOutsideSelect = (event) => {
let menu = document.getElementById(`dropdown-multiselect-widget-custom-menu-list-${id}`);
if (
+ isMultiselectOpen &&
multiselectRef.current &&
!multiselectRef.current.contains(event.target) &&
menu &&
!menu.contains(event.target)
) {
- if (isMultiselectOpen) {
- fireEvent('onBlur');
- setIsMultiselectOpen(false);
- setSearchInputValue('');
- }
+ setIsMultiselectOpen(false);
+ fireEvent('onBlur');
+ setSearchInputValue('');
}
};
- const handleClickInEditor = (e) => {
- if (e.target.className.includes('clear-indicator') || isMultiselectOpen) return;
- e.stopPropagation();
- selectRef.current?.onControlMouseDown(e);
+ const handleClickInsideSelect = () => {
+ if (isMultiSelectDisabled || isMultiSelectLoading) return;
+ if (isMultiselectOpen) {
+ setIsMultiselectOpen(false);
+ fireEvent('onBlur');
+ setSearchInputValue('');
+ } else {
+ setIsMultiselectOpen(true);
+ fireEvent('onFocus');
+ if (!showSearchInput) {
+ selectRef.current.focus();
+ }
+ }
};
const setInputValue = (values) => {
@@ -304,20 +342,11 @@ export const MultiselectV2 = ({
};
useEffect(() => {
- document.addEventListener('mousedown', handleClickOutside, { capture: true });
+ document.addEventListener('mousedown', handleClickOutsideSelect, { capture: true });
return () => {
- document.removeEventListener('mousedown', handleClickOutside, { capture: true });
+ document.removeEventListener('mousedown', handleClickOutsideSelect, { capture: true });
};
- }, [isMultiselectOpen]);
-
- // Handle Select all logic
- useEffect(() => {
- if (selectOptions?.length === selected?.length) {
- setIsSelectAllSelected(true);
- } else {
- setIsSelectAllSelected(false);
- }
- }, [selectOptions, selected]);
+ }, [isMultiselectOpen, componentName]);
const customStyles = {
container: (base) => ({
@@ -365,8 +394,8 @@ export const MultiselectV2 = ({
selectedTextColor !== '#1B1F24'
? selectedTextColor
: isMultiSelectLoading || isMultiSelectDisabled
- ? 'var(--text-disabled)'
- : 'var(--text-primary)',
+ ? 'var(--text-disabled)'
+ : 'var(--text-primary)',
}),
input: (provided, _state) => ({
@@ -401,10 +430,10 @@ export const MultiselectV2 = ({
color: _state.isDisabled
? 'var(_--text-disbled)'
: selectedTextColor !== '#1B1F24'
- ? selectedTextColor
- : isMultiSelectDisabled || isMultiSelectLoading
- ? 'var(--text-disabled)'
- : 'var(--text-primary)',
+ ? selectedTextColor
+ : isMultiSelectDisabled || isMultiSelectLoading
+ ? 'var(--text-disabled)'
+ : 'var(--text-primary)',
borderRadius: _state.isFocused && '8px',
padding: '8px 6px 8px 12px',
'&:hover': {
@@ -415,7 +444,7 @@ export const MultiselectV2 = ({
}),
menuList: (provided) => ({
...provided,
- padding: '4px',
+ padding: '0 4px',
// this is needed otherwise :active state doesn't look nice, gap is required
display: 'flex',
flexDirection: 'column',
@@ -426,6 +455,7 @@ export const MultiselectV2 = ({
menu: (provided) => ({
...provided,
marginTop: '5px',
+ borderRadius: '8px',
}),
};
const _width = (labelWidth / 100) * 70; // Max width which label can go is 70% for better UX calculate width based on this value
@@ -436,7 +466,7 @@ export const MultiselectV2 = ({
data-cy={`label-${String(componentName).toLowerCase()} `}
className={cx('multiselect-widget', 'd-flex', {
[alignment === 'top' &&
- ((labelWidth != 0 && label?.length != 0) || (auto && labelWidth == 0 && label && label?.length != 0))
+ ((labelWidth != 0 && label?.length != 0) || (auto && labelWidth == 0 && label && label?.length != 0))
? 'flex-column'
: 'align-items-center']: true,
'flex-row-reverse': direction === 'right' && alignment === 'side',
@@ -468,17 +498,18 @@ export const MultiselectV2 = ({
_width={_width}
top={'1px'}
/>
-
diff --git a/frontend/src/Editor/Viewer/TooljetBanner.jsx b/frontend/src/Editor/Viewer/TooljetBanner.jsx
index 604c9968cd..5243a6c680 100644
--- a/frontend/src/Editor/Viewer/TooljetBanner.jsx
+++ b/frontend/src/Editor/Viewer/TooljetBanner.jsx
@@ -16,7 +16,7 @@ const TooljetBanner = ({ isDarkMode }) => {
{
- const url = `https://tooljet.com/?utm_source=powered_by_banner&utm_medium=${instanceId}&utm_campaign=self_hosted`;
+ const url = `https://tooljet.com`;
window.open(url, '_blank');
}}
>
diff --git a/frontend/src/Editor/WidgetManager/configs/buttonGroup.js b/frontend/src/Editor/WidgetManager/configs/buttonGroup.js
index 65b7e77807..4a1d5ff218 100644
--- a/frontend/src/Editor/WidgetManager/configs/buttonGroup.js
+++ b/frontend/src/Editor/WidgetManager/configs/buttonGroup.js
@@ -123,6 +123,19 @@ export const buttonGroupConfig = {
defaultValue: '#007bff',
},
},
+ 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' },
+ ],
+ },
},
exposedVariables: {
selected: [1],
@@ -148,6 +161,7 @@ export const buttonGroupConfig = {
disabledState: { value: '{{false}}' },
selectedTextColor: { value: '' },
selectedBackgroundColor: { value: '' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/checkbox.js b/frontend/src/Editor/WidgetManager/configs/checkbox.js
index c9b6424020..9f991be251 100644
--- a/frontend/src/Editor/WidgetManager/configs/checkbox.js
+++ b/frontend/src/Editor/WidgetManager/configs/checkbox.js
@@ -126,6 +126,20 @@ export const checkboxConfig = {
],
accordian: 'label',
},
+ 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: 'switch',
+ },
},
exposedVariables: {
value: false,
@@ -189,6 +203,7 @@ export const checkboxConfig = {
handleColor: { value: '#FFFFFF' },
alignment: { value: 'right' },
boxShadow: { value: '0px 0px 0px 0px #00000090' },
+ padding: { value: 'default' },
},
validation: {
mandatory: { value: '{{false}}' },
diff --git a/frontend/src/Editor/WidgetManager/configs/colorPicker.js b/frontend/src/Editor/WidgetManager/configs/colorPicker.js
index b2fddd7e4c..6d93508891 100644
--- a/frontend/src/Editor/WidgetManager/configs/colorPicker.js
+++ b/frontend/src/Editor/WidgetManager/configs/colorPicker.js
@@ -26,6 +26,19 @@ export const colorPickerConfig = {
},
styles: {
visibility: { type: 'toggle', displayName: 'Visibility' },
+ 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' },
+ ],
+ },
},
exposedVariables: {
selectedColorHex: '#000000',
@@ -45,6 +58,7 @@ export const colorPickerConfig = {
events: [],
styles: {
visibility: { value: '{{true}}' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/container.js b/frontend/src/Editor/WidgetManager/configs/container.js
index 424b9a801d..6dc9a679a4 100644
--- a/frontend/src/Editor/WidgetManager/configs/container.js
+++ b/frontend/src/Editor/WidgetManager/configs/container.js
@@ -3,7 +3,7 @@ export const containerConfig = {
displayName: 'Container',
description: 'Group components',
defaultSize: {
- width: 5,
+ width: 10,
height: 200,
},
component: 'Container',
@@ -44,13 +44,19 @@ export const containerConfig = {
displayName: 'Show header',
validation: {
schema: { type: 'boolean' },
- defaultValue: false,
+ defaultValue: true,
},
},
+ headerHeight: {
+ type: 'numberInput',
+ displayName: 'Header height',
+ validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+ },
},
defaultChildren: [
{
componentName: 'Text',
+ slotName: 'header',
layout: {
top: 20,
left: 1,
@@ -98,15 +104,6 @@ export const containerConfig = {
},
accordian: 'container',
},
- headerHeight: {
- type: 'numberInput',
- displayName: 'Height',
- validation: {
- schema: { type: 'number' },
- defaultValue: 80,
- },
- accordian: 'header',
- },
borderRadius: {
type: 'numberInput',
displayName: 'Border',
@@ -154,10 +151,11 @@ export const containerConfig = {
showOnMobile: { value: '{{false}}' },
},
properties: {
- showHeader: { value: `{{false}}` },
+ showHeader: { value: `{{true}}` },
loadingState: { value: `{{false}}` },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
+ headerHeight: { value: `{{80}}` },
},
events: [],
styles: {
diff --git a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
index 308aff1f36..6b011fd082 100644
--- a/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
+++ b/frontend/src/Editor/WidgetManager/configs/dropdownV2.js
@@ -75,6 +75,18 @@ export const dropdownV2Config = {
accordian: 'Options',
isFxNotRequired: true,
},
+ showClearBtn: {
+ type: 'toggle',
+ displayName: 'Show clear selection button',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
+ showSearchInput: {
+ type: 'toggle',
+ displayName: 'Show search in options',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@@ -314,6 +326,8 @@ export const dropdownV2Config = {
optionsLoadingState: { value: '{{false}}' },
sort: { value: 'asc' },
placeholder: { value: 'Select an option' },
+ showClearBtn: { value: '{{true}}' },
+ showSearchInput: { value: '{{true}}' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
loadingState: { value: '{{false}}' },
diff --git a/frontend/src/Editor/WidgetManager/configs/form.js b/frontend/src/Editor/WidgetManager/configs/form.js
index 2d8eb7f0a8..7c558a73e8 100644
--- a/frontend/src/Editor/WidgetManager/configs/form.js
+++ b/frontend/src/Editor/WidgetManager/configs/form.js
@@ -4,7 +4,7 @@ export const formConfig = {
description: 'Wrapper for multiple components',
defaultSize: {
width: 13,
- height: 480,
+ height: 450,
},
defaultChildren: [
{
@@ -20,8 +20,9 @@ export const formConfig = {
styles: ['fontWeight', 'textSize', 'textColor'],
defaultValue: {
text: 'Form title',
- textSize: 20,
+ textSize: 16,
textColor: '#000',
+ fontWeight: 'bold',
},
},
{
@@ -29,208 +30,54 @@ export const formConfig = {
slotName: 'footer',
layout: {
top: 12,
- left: 32,
+ left: 29,
height: 36,
+ width: 13,
},
properties: ['text'],
defaultValue: {
- text: 'Button2',
+ text: 'Submit',
padding: 'none',
},
},
- {
- componentName: 'Text',
- layout: {
- top: 40,
- left: 10,
- height: 30,
- width: 17,
- },
- properties: ['text'],
- styles: [
- 'textSize',
- 'fontWeight',
- 'fontStyle',
- 'textColor',
- 'isScrollRequired',
- 'lineHeight',
- 'textIndent',
- 'textAlign',
- 'verticalAlignment',
- 'decoration',
- 'transformation',
- 'letterSpacing',
- 'wordSpacing',
- 'fontVariant',
- 'backgroundColor',
- 'borderColor',
- 'borderRadius',
- 'boxShadow',
- 'padding',
- ],
- defaultValue: {
- text: 'User Details',
- fontWeight: 'bold',
- textSize: 18,
- textColor: '#000',
- backgroundColor: '#fff00000',
- textAlign: 'left',
- decoration: 'none',
- transformation: 'none',
- fontStyle: 'normal',
- lineHeight: 1.5,
- textIndent: '0',
- letterSpacing: '0',
- wordSpacing: '0',
- fontVariant: 'normal',
- verticalAlignment: 'top',
- padding: 'default',
- boxShadow: '0px 0px 0px 0px #00000090',
- borderRadius: '0',
- isScrollRequired: 'enabled',
- },
- },
- {
- componentName: 'Text',
- layout: {
- top: 90,
- left: 10,
- height: 30,
- },
- properties: ['text'],
- styles: [
- 'textSize',
- 'fontWeight',
- 'fontStyle',
- 'textColor',
- 'isScrollRequired',
- 'lineHeight',
- 'textIndent',
- 'textAlign',
- 'verticalAlignment',
- 'decoration',
- 'transformation',
- 'letterSpacing',
- 'wordSpacing',
- 'fontVariant',
- 'backgroundColor',
- 'borderColor',
- 'borderRadius',
- 'boxShadow',
- 'padding',
- ],
- defaultValue: {
- text: 'Name',
- fontWeight: 'normal',
- textSize: 14,
- textColor: '#000',
- backgroundColor: '#fff00000',
- textAlign: 'left',
- decoration: 'none',
- transformation: 'none',
- fontStyle: 'normal',
- lineHeight: 1.5,
- textIndent: '0',
- letterSpacing: '0',
- wordSpacing: '0',
- fontVariant: 'normal',
- verticalAlignment: 'top',
- padding: 'default',
- boxShadow: '0px 0px 0px 0px #00000090',
- borderRadius: '0',
- isScrollRequired: 'enabled',
- },
- },
- {
- componentName: 'Text',
- layout: {
- top: 160,
- left: 10,
- height: 30,
- },
- properties: ['text'],
- styles: [
- 'textSize',
- 'fontWeight',
- 'fontStyle',
- 'textColor',
- 'isScrollRequired',
- 'lineHeight',
- 'textIndent',
- 'textAlign',
- 'verticalAlignment',
- 'decoration',
- 'transformation',
- 'letterSpacing',
- 'wordSpacing',
- 'fontVariant',
- 'backgroundColor',
- 'borderColor',
- 'borderRadius',
- 'boxShadow',
- 'padding',
- ],
- defaultValue: {
- text: 'Age',
- fontWeight: 'normal',
- textSize: 14,
- textColor: '#000',
- backgroundColor: '#fff00000',
- textAlign: 'left',
- decoration: 'none',
- transformation: 'none',
- fontStyle: 'normal',
- lineHeight: 1.5,
- textIndent: '0',
- letterSpacing: '0',
- wordSpacing: '0',
- fontVariant: 'normal',
- verticalAlignment: 'top',
- padding: 'default',
- boxShadow: '0px 0px 0px 0px #00000090',
- borderRadius: '0',
- isScrollRequired: 'enabled',
- },
- },
{
componentName: 'TextInput',
layout: {
- top: 120,
- left: 10,
- height: 30,
- width: 25,
+ top: 20,
+ left: 1,
+ height: 40,
+ width: 41,
},
properties: ['placeholder', 'label'],
+ styles: ['alignment', 'width', 'auto', 'padding', 'direction'],
defaultValue: {
placeholder: 'Enter your name',
- label: '',
+ label: 'Name',
+ width: '{{60}}',
+ direction: 'left',
+ alignment: 'side',
+ auto: '{{false}}',
+ padding: 'default',
},
},
{
componentName: 'NumberInput',
layout: {
- top: 190,
- left: 10,
- height: 30,
- width: 25,
+ top: 80,
+ left: 1,
+ height: 40,
+ width: 41,
},
- properties: ['value', 'label'],
+ properties: ['placeholder', 'label'],
+ styles: ['alignment', 'width', 'auto', 'padding', 'direction'],
defaultValue: {
- value: 24,
- label: '',
- },
- },
- {
- componentName: 'Button',
- layout: {
- top: 240,
- left: 10,
- height: 30,
- width: 10,
- },
- properties: ['text'],
- defaultValue: {
- text: 'Submit',
+ placeholder: 'Age',
+ label: 'Age',
+ width: '{{60}}',
+ direction: 'left',
+ alignment: 'side',
+ auto: '{{false}}',
+ padding: 'default',
},
},
],
@@ -276,6 +123,24 @@ export const formConfig = {
},
showHeader: { type: 'toggle', displayName: 'Header' },
showFooter: { type: 'toggle', displayName: 'Footer' },
+ headerHeight: {
+ type: 'numberInput',
+ displayName: 'Header height',
+ isHidden: true,
+ validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+ },
+ canvasHeight: {
+ type: 'numberInput',
+ displayName: 'Canvas height',
+ isHidden: true,
+ validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+ },
+ footerHeight: {
+ type: 'numberInput',
+ displayName: 'Footer height',
+ isHidden: true,
+ validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] }, defaultValue: 80 },
+ },
visibility: {
type: 'toggle',
displayName: 'Visibility',
@@ -294,6 +159,13 @@ export const formConfig = {
defaultValue: false,
},
},
+ tooltip: {
+ type: 'code',
+ displayName: 'Tooltip',
+ validation: { schema: { type: 'string' } },
+ section: 'additionalActions',
+ placeholder: 'Enter tooltip text',
+ },
},
events: {
onSubmit: { displayName: 'On submit' },
@@ -316,24 +188,8 @@ export const formConfig = {
defaultValue: '#ffffffff',
},
},
- headerHeight: {
- type: 'code',
- displayName: 'Header height',
- validation: {
- schema: { type: 'string' },
- defaultValue: '80px',
- },
- },
- footerHeight: {
- type: 'code',
- displayName: 'Footer height',
- validation: {
- schema: { type: 'string' },
- defaultValue: '80px',
- },
- },
backgroundColor: {
- type: 'color',
+ type: 'colorSwatches',
displayName: 'Background color',
validation: {
schema: { type: 'string' },
@@ -351,7 +207,7 @@ export const formConfig = {
},
},
borderColor: {
- type: 'color',
+ type: 'colorSwatches',
displayName: 'Border color',
validation: {
schema: { type: 'string' },
@@ -403,18 +259,20 @@ export const formConfig = {
value:
"{{ {title: 'User registration form', properties: {firstname: {type: 'textinput',value: 'Maria',label:'First name', validation:{maxLength:6}, styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},lastname:{type: 'textinput',value: 'Doe', label:'Last name', styles: {backgroundColor: '#f6f5ff',textColor: 'black'},},age:{type:'number', label:'Age'},}, submitButton: {value: 'Submit', styles: {backgroundColor: '#3a433b',borderColor:'#595959'}}} }}",
},
- showHeader: { value: '{{false}}' },
- showFooter: { value: '{{false}}' },
+ showHeader: { value: '{{true}}' },
+ showFooter: { value: '{{true}}' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
+ headerHeight: { value: 60 },
+ footerHeight: { value: 60 },
},
events: [],
styles: {
backgroundColor: { value: '#fff' },
borderRadius: { value: '0' },
borderColor: { value: '#fff' },
- headerHeight: { value: '60px' },
- footerHeight: { value: '60px' },
+ headerBackgroundColor: { value: '#fff' },
+ footerBackgroundColor: { value: '#fff' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/icon.js b/frontend/src/Editor/WidgetManager/configs/icon.js
index aea06c976c..40dc8185dd 100644
--- a/frontend/src/Editor/WidgetManager/configs/icon.js
+++ b/frontend/src/Editor/WidgetManager/configs/icon.js
@@ -78,6 +78,29 @@ export const iconConfig = {
},
accordian: 'Icon',
},
+ 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: 'Icon',
+ },
+ boxShadow: {
+ type: 'boxShadow',
+ displayName: 'Box shadow',
+ validation: {
+ schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
+ defaultValue: '0px 0px 0px 0px #00000040',
+ },
+ accordian: 'Icon',
+ },
},
exposedVariables: {},
actions: [
@@ -116,6 +139,8 @@ export const iconConfig = {
styles: {
iconColor: { value: '#000' },
iconAlign: { value: 'center' },
+ padding: { value: 'default' },
+ boxShadow: { value: '0px 0px 0px 0px #00000040' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/modalV2.js b/frontend/src/Editor/WidgetManager/configs/modalV2.js
index e7e96c4398..a3c89acf93 100644
--- a/frontend/src/Editor/WidgetManager/configs/modalV2.js
+++ b/frontend/src/Editor/WidgetManager/configs/modalV2.js
@@ -5,7 +5,7 @@ export const modalV2Config = {
component: 'ModalV2',
defaultSize: {
width: 10,
- height: 34,
+ height: 40,
},
others: {
showOnDesktop: { type: 'toggle', displayName: 'Show on desktop' },
@@ -137,7 +137,7 @@ export const modalV2Config = {
layout: {
top: 24,
left: 22,
- height: 36,
+ height: 40,
},
displayName: 'ModalFooterCancel',
properties: ['text'],
@@ -154,7 +154,7 @@ export const modalV2Config = {
layout: {
top: 24,
left: 32,
- height: 36,
+ height: 40,
},
displayName: 'ModalFooterConfirm',
properties: ['text'],
diff --git a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js
index b603db9c4a..23618382df 100644
--- a/frontend/src/Editor/WidgetManager/configs/multiselectV2.js
+++ b/frontend/src/Editor/WidgetManager/configs/multiselectV2.js
@@ -121,6 +121,12 @@ export const multiselectV2Config = {
},
accordian: 'Options',
},
+ showAllSelectedLabel: {
+ type: 'toggle',
+ displayName: 'Show "All items are selected"',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ accordian: 'Options',
+ },
optionsLoadingState: {
type: 'toggle',
displayName: 'Options loading state',
@@ -142,6 +148,18 @@ export const multiselectV2Config = {
accordian: 'Options',
isFxNotRequired: true,
},
+ showClearBtn: {
+ type: 'toggle',
+ displayName: 'Show clear selection button',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
+ showSearchInput: {
+ type: 'toggle',
+ displayName: 'Show search in options',
+ validation: { schema: { type: 'boolean' }, defaultValue: true },
+ section: 'additionalActions',
+ },
loadingState: {
type: 'toggle',
displayName: 'Loading state',
@@ -327,6 +345,9 @@ export const multiselectV2Config = {
optionsLoadingState: { value: '{{false}}' },
sort: { value: 'asc' },
placeholder: { value: 'Select the options' },
+ showAllSelectedLabel: { value: '{{true}}' },
+ showClearBtn: { value: '{{true}}' },
+ showSearchInput: { value: '{{true}}' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
loadingState: { value: '{{false}}' },
diff --git a/frontend/src/Editor/WidgetManager/configs/rangeslider.js b/frontend/src/Editor/WidgetManager/configs/rangeslider.js
index 151dca3384..541ed95209 100644
--- a/frontend/src/Editor/WidgetManager/configs/rangeslider.js
+++ b/frontend/src/Editor/WidgetManager/configs/rangeslider.js
@@ -84,6 +84,19 @@ export const rangeSliderConfig = {
defaultValue: true,
},
},
+ 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' },
+ ],
+ },
},
exposedVariables: {
value: null,
@@ -111,6 +124,7 @@ export const rangeSliderConfig = {
handleColor: { value: '' },
trackColor: { value: '' },
visibility: { value: '{{true}}' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/starrating.js b/frontend/src/Editor/WidgetManager/configs/starrating.js
index 01240d0369..d6caf8013c 100644
--- a/frontend/src/Editor/WidgetManager/configs/starrating.js
+++ b/frontend/src/Editor/WidgetManager/configs/starrating.js
@@ -89,6 +89,19 @@ export const starratingConfig = {
defaultValue: false,
},
},
+ 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' },
+ ],
+ },
},
exposedVariables: {
value: 0,
@@ -112,6 +125,7 @@ export const starratingConfig = {
labelColor: { value: '' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/tags.js b/frontend/src/Editor/WidgetManager/configs/tags.js
index 8af289b23a..6479eeaad0 100644
--- a/frontend/src/Editor/WidgetManager/configs/tags.js
+++ b/frontend/src/Editor/WidgetManager/configs/tags.js
@@ -38,6 +38,19 @@ export const tagsConfig = {
defaultValue: true,
},
},
+ 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' },
+ ],
+ },
},
exposedVariables: {},
definition: {
@@ -54,6 +67,7 @@ export const tagsConfig = {
events: [],
styles: {
visibility: { value: '{{true}}' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/Editor/WidgetManager/configs/toggleswitchv2.js b/frontend/src/Editor/WidgetManager/configs/toggleswitchv2.js
index 6753fbb50d..6f61a7645d 100644
--- a/frontend/src/Editor/WidgetManager/configs/toggleswitchv2.js
+++ b/frontend/src/Editor/WidgetManager/configs/toggleswitchv2.js
@@ -126,6 +126,20 @@ export const toggleSwitchV2Config = {
validation: { schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] } },
accordian: 'switch',
},
+ 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: 'switch',
+ },
},
exposedVariables: {
value: false,
@@ -187,6 +201,7 @@ export const toggleSwitchV2Config = {
handleColor: { value: '#FFFFFF' },
alignment: { value: 'right' },
boxShadow: { value: '0px 0px 0px 0px #00000090' },
+ padding: { value: 'default' },
},
},
};
diff --git a/frontend/src/HomePage/BasicPlanMigrationBanner/BasicPlanMigrationBanner.jsx b/frontend/src/HomePage/BasicPlanMigrationBanner/BasicPlanMigrationBanner.jsx
new file mode 100644
index 0000000000..3fc2ca6d00
--- /dev/null
+++ b/frontend/src/HomePage/BasicPlanMigrationBanner/BasicPlanMigrationBanner.jsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import './BasicPlanMigrationBanner.scss';
+import CloseIcon from '@/_ui/Icon/bulkIcons/CloseIcon';
+
+export const BasicPlanMigrationBanner = ({ closeBanner, darkMode }) => {
+ return (
+
+ );
+};
diff --git a/frontend/src/HomePage/BasicPlanMigrationBanner/BasicPlanMigrationBanner.scss b/frontend/src/HomePage/BasicPlanMigrationBanner/BasicPlanMigrationBanner.scss
new file mode 100644
index 0000000000..86188f2c37
--- /dev/null
+++ b/frontend/src/HomePage/BasicPlanMigrationBanner/BasicPlanMigrationBanner.scss
@@ -0,0 +1,44 @@
+.basic-plan-migration-banner {
+ background-color: var(--background-accent-weak);
+ padding: 12px 16px;
+ width: 100%;
+ height: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .banner-text {
+ color: var(--text-accent, #4368E3);
+ font-size: 12px;
+ line-height: 18px;
+ font-weight: 400;
+ }
+
+ .banner-text{
+ margin-bottom: 0;
+ }
+
+ .banner-link {
+ color: var(--primary-brand);
+ text-decoration: underline;
+ font-weight: 500;
+
+ &:hover {
+ color: var(--indigo-100);
+ }
+ }
+
+ div[type="button"] {
+ margin-left: auto;
+ }
+ }
+
+// banner css changes
+.banner-layout-wrapper {
+ height: 100vh !important;
+ overflow: hidden;
+ /* prevents scrolling beyond this height */
+ position: relative;
+ background-color: var(--background-accent-weak);
+ /* content background */
+}
\ No newline at end of file
diff --git a/frontend/src/HomePage/BlankPage.jsx b/frontend/src/HomePage/BlankPage.jsx
index a7f1d50a0f..631608dfef 100644
--- a/frontend/src/HomePage/BlankPage.jsx
+++ b/frontend/src/HomePage/BlankPage.jsx
@@ -21,6 +21,7 @@ export const BlankPage = function BlankPage({
viewTemplateLibraryModal,
appType,
canCreateApp,
+ workflowsLimit,
}) {
const { t } = useTranslation();
const whiteLabelText = retrieveWhiteLabelText();
@@ -43,6 +44,8 @@ export const BlankPage = function BlankPage({
}
const appCreationDisabled = !canCreateApp() || (!appsLimit?.canAddUnlimited && appsLimit?.percentage >= 100);
+ const workflowsCreationDisabled =
+ !canCreateApp() || (!workflowsLimit?.canAddUnlimited && workflowsLimit?.percentage >= 100);
const templateOptionsView = (
<>
@@ -133,12 +136,12 @@ export const BlankPage = function BlankPage({
Create new {appType !== 'workflow' ? 'application' : 'workflow'}
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 8ee5ab3cc8..0e04b4b2a3 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -511,7 +511,12 @@ class HomePageComponent extends React.Component {
this.state.currentFolder.id
);
this.fetchFolders();
- this.fetchAppsLimit();
+ if (this.props.appType === 'workflow') {
+ this.fetchWorkflowsInstanceLimit();
+ this.fetchWorkflowsWorkspaceLimit();
+ } else {
+ this.fetchAppsLimit();
+ }
})
.catch(({ error }) => {
toast.error('Could not delete the app.');
@@ -522,6 +527,10 @@ class HomePageComponent extends React.Component {
});
};
+ isExistingPlanUser = (date) => {
+ return new Date(date) < new Date('2025-04-01');
+ };
+
pageCount = () => {
return this.state.currentFolder.id ? this.state.meta.folder_count : this.state.meta.total_count;
};
@@ -928,6 +937,8 @@ class HomePageComponent extends React.Component {
dependentPlugins: dependentPlugins,
},
};
+ const isAdmin = authenticationService?.currentSessionValue?.admin;
+ const isBuilder = authenticationService?.currentSessionValue?.is_builder;
return (
@@ -1231,31 +1242,6 @@ class HomePageComponent extends React.Component {
- {this.props.appType === 'front-end' && (
-
- )}
- {this.props.appType === 'workflow' &&
- (workflowInstanceLevelLimit.current >= workflowInstanceLevelLimit.total ||
- 100 > workflowInstanceLevelLimit.percentage >= 90 ||
- workflowInstanceLevelLimit.current === workflowInstanceLevelLimit.total - 1 ||
- workflowWorkspaceLevelLimit.current >= workflowWorkspaceLevelLimit.total ||
- 100 > workflowWorkspaceLevelLimit.percentage >= 90 ||
- workflowWorkspaceLevelLimit.current === workflowWorkspaceLevelLimit.total - 1) && (
- <>
- = workflowInstanceLevelLimit.total ||
- 100 > workflowInstanceLevelLimit.percentage >= 90 ||
- workflowInstanceLevelLimit.current === workflowInstanceLevelLimit.total - 1
- ? workflowInstanceLevelLimit
- : workflowWorkspaceLevelLimit
- }
- type="workflow"
- size="small"
- />
-
- )}
)}
+ {this.props.appType === 'front-end' && (
+
+ )}
+ {this.props.appType === 'workflow' &&
+ (workflowInstanceLevelLimit.current >= workflowInstanceLevelLimit.total ||
+ 100 > workflowInstanceLevelLimit.percentage >= 90 ||
+ workflowInstanceLevelLimit.current === workflowInstanceLevelLimit.total - 1 ||
+ workflowWorkspaceLevelLimit.current >= workflowWorkspaceLevelLimit.total ||
+ 100 > workflowWorkspaceLevelLimit.percentage >= 90 ||
+ workflowWorkspaceLevelLimit.current === workflowWorkspaceLevelLimit.total - 1) && (
+ <>
+
= workflowInstanceLevelLimit.total ||
+ 100 > workflowInstanceLevelLimit.percentage >= 90 ||
+ workflowInstanceLevelLimit.current === workflowInstanceLevelLimit.total - 1
+ ? workflowInstanceLevelLimit
+ : workflowWorkspaceLevelLimit
+ }
+ type="workflow"
+ size="small"
+ />
+
+ )}
{authenticationService.currentSessionValue?.super_admin &&
this.isWithinSevenDaysOfSignUp(authenticationService.currentSessionValue?.consultation_banner_date) && (
)}
-
+
= workflowInstanceLevelLimit.total ||
+ 100 > workflowInstanceLevelLimit.percentage >= 90 ||
+ workflowInstanceLevelLimit.current === workflowInstanceLevelLimit.total - 1
+ ? workflowInstanceLevelLimit
+ : workflowWorkspaceLevelLimit
+ }
/>
)}
{!isLoading && apps?.length === 0 && appSearchKey && (
diff --git a/frontend/src/SettingsPage/SettingsPage.jsx b/frontend/src/SettingsPage/SettingsPage.jsx
index fefeccb51a..53dfcad2d8 100644
--- a/frontend/src/SettingsPage/SettingsPage.jsx
+++ b/frontend/src/SettingsPage/SettingsPage.jsx
@@ -88,10 +88,11 @@ function SettingsPage(props) {
const handlePasswordInput = (input) => {
setNewPassword(input);
- if (input.length > 100) {
+ const trimmedInput = input.trim();
+ if (trimmedInput.length > 100) {
setHelperText('Password should be Max 100 characters');
setValidPassword(false);
- } else if (input.length < 5 && input.length > 0) {
+ } else if (trimmedInput.length < 5 && trimmedInput.length > 0) {
setHelperText('Password should be at least 5 characters');
setValidPassword(false);
} else {
@@ -100,11 +101,19 @@ function SettingsPage(props) {
}
};
+ const handleConfirmPasswordInput = (input) => {
+ setConfirmPassword(input);
+ };
+
const changePassword = async () => {
+ const trimmedCurrentPassword = currentpassword.trim();
+ const trimmedNewPassword = newPassword.trim();
+ const trimmedConfirmPassword = confirmPassword.trim();
+
const errorMsg =
- (currentpassword.match(/^ *$/) !== null && 'Current password') ||
- (newPassword.match(/^ *$/) !== null && 'New password') ||
- (confirmPassword.match(/^ *$/) !== null && 'Confirm new password');
+ (trimmedCurrentPassword.length === 0 && 'Current password') ||
+ (trimmedNewPassword.length === 0 && 'New password') ||
+ (trimmedConfirmPassword.length === 0 && 'Confirm new password');
if (errorMsg) {
toast.error(errorMsg + " can't be empty!", {
@@ -112,13 +121,13 @@ function SettingsPage(props) {
});
return;
}
- if (currentpassword === newPassword) {
+ if (trimmedCurrentPassword === trimmedNewPassword) {
toast.error("New password can't be the same as the current one!", {
duration: 3000,
});
return;
}
- if (newPassword !== confirmPassword) {
+ if (trimmedNewPassword !== trimmedConfirmPassword) {
toast.error('New password and confirm new password should be same', {
duration: 3000,
});
@@ -127,7 +136,7 @@ function SettingsPage(props) {
setPasswordChangeInProgress(true);
try {
- await userService.changePassword(currentpassword, newPassword);
+ await userService.changePassword(trimmedCurrentPassword, trimmedNewPassword);
toast.success('Password updated successfully', {
duration: 3000,
});
@@ -293,7 +302,7 @@ function SettingsPage(props) {
placeholder={t('header.profileSettingPage.confirmNewPassword', 'Confirm new password')}
value={confirmPassword}
ref={focusRef}
- onChange={(event) => setConfirmPassword(event.target.value)}
+ onChange={(event) => handleConfirmPasswordInput(event.target.value)}
onKeyPress={confirmPasswordKeyPressHandler}
data-cy="confirm-password-input"
/>
@@ -301,7 +310,7 @@ function SettingsPage(props) {
diff --git a/frontend/src/_components/LegalReasonsErrorModal.jsx b/frontend/src/_components/LegalReasonsErrorModal.jsx
index 8ffec61204..95dc0aead8 100644
--- a/frontend/src/_components/LegalReasonsErrorModal.jsx
+++ b/frontend/src/_components/LegalReasonsErrorModal.jsx
@@ -67,7 +67,7 @@ const LegalReasonsErrorModal = ({