diff --git a/src/common/components/mock-components/front-components/input-shape.tsx b/src/common/components/mock-components/front-components/input-shape.tsx index c1b8de6f..cd60d17b 100644 --- a/src/common/components/mock-components/front-components/input-shape.tsx +++ b/src/common/components/mock-components/front-components/input-shape.tsx @@ -49,6 +49,7 @@ export const InputShape = forwardRef((props, ref) => { borderRadius, disabled, isPlaceholder, + isPassword, } = useShapeProps(otherProps, INPUT_SHAPE); const commonGroupProps = useGroupShapeProps( @@ -58,6 +59,13 @@ export const InputShape = forwardRef((props, ref) => { ref ); + const maskPassword = (text: string) => { + const maskSymbol = '●'; + return maskSymbol.repeat(text.length); + }; + + const finalText = isPassword && !isPlaceholder ? maskPassword(text) : text; + return ( ((props, ref) => { x={INPUT_SHAPE.DEFAULT_PADDING} y={INPUT_SHAPE.DEFAULT_PADDING + 1} width={width - INPUT_SHAPE.DEFAULT_PADDING * 2} - text={text} + text={finalText} fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY} fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE} lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT} @@ -93,33 +101,3 @@ export const InputShape = forwardRef((props, ref) => { ); }); - -/* - - - - - -*/ diff --git a/src/common/components/shapes/use-shape-props.hook.ts b/src/common/components/shapes/use-shape-props.hook.ts index 3a3e4f13..b26ce01c 100644 --- a/src/common/components/shapes/use-shape-props.hook.ts +++ b/src/common/components/shapes/use-shape-props.hook.ts @@ -27,6 +27,11 @@ export const useShapeProps = ( [otherProps?.isPlaceholder] ); + const isPassword = useMemo( + () => otherProps?.isPassword ?? true, + [otherProps?.isPassword] + ); + const fontVariant = useMemo( () => otherProps?.fontVariant ?? defaultStyleShape.DEFAULT_FONT_VARIANT, [otherProps?.fontVariant] @@ -99,5 +104,6 @@ export const useShapeProps = ( textAlignment, disabled, isPlaceholder, + isPassword, }; }; diff --git a/src/core/local-disk/shapes-to-document.mapper.ts b/src/core/local-disk/shapes-to-document.mapper.ts index 5d62c54c..ddddac05 100644 --- a/src/core/local-disk/shapes-to-document.mapper.ts +++ b/src/core/local-disk/shapes-to-document.mapper.ts @@ -52,6 +52,10 @@ const AddDefaultValuesForInputPropsPlaceHolderAndPassword = ( ...shape, otherProps: { ...shape.otherProps, + isPassword: + shape.otherProps?.isPassword !== undefined + ? shape.otherProps?.isPassword + : false, isPlaceholder: // Small update no need to go for 0_3, but input placeHolder needs to have default value // if undefined diff --git a/src/core/model/index.ts b/src/core/model/index.ts index af039047..1495f85f 100644 --- a/src/core/model/index.ts +++ b/src/core/model/index.ts @@ -188,6 +188,7 @@ export interface OtherProps { textAlignment?: 'left' | 'center' | 'right'; disabled?: boolean; isPlaceholder?: boolean; + isPassword?: boolean; } export const BASE_ICONS_URL = '/icons/'; diff --git a/src/pods/canvas/model/shape-other-props.utils.ts b/src/pods/canvas/model/shape-other-props.utils.ts index a8f84a35..84247133 100644 --- a/src/pods/canvas/model/shape-other-props.utils.ts +++ b/src/pods/canvas/model/shape-other-props.utils.ts @@ -16,6 +16,7 @@ export const generateDefaultOtherProps = ( backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND, textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT, isPlaceholder: true, + isPassword: false, strokeStyle: [], borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`, disabled: INPUT_SHAPE.DEFAULT_DISABLED, diff --git a/src/pods/properties/properties.pod.tsx b/src/pods/properties/properties.pod.tsx index 3b14f3a6..e471fba2 100644 --- a/src/pods/properties/properties.pod.tsx +++ b/src/pods/properties/properties.pod.tsx @@ -19,6 +19,7 @@ import { extractMultiplePropsInCommon } from './properties.business'; import { ShowProp } from './components/show-prop'; import { iconCollection } from './components/icon-selector/modal/icons'; import { Placeholder } from './components/placeholder'; +import { Password } from './components/password'; export const PropertiesPod = () => { const { selectionInfo, fullDocument } = useCanvasContext(); @@ -212,6 +213,24 @@ export const PropertiesPod = () => { } /> + + + updateOtherPropsOnSelected( + 'isPassword', + isPassword, + isMultipleSelection + ) + } + /> +