added isPassword property to input shape

Author: iria-carballo

src/common/components/mock-components/front-components/input-shape.tsx

@@ -49,6 +49,7 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
     borderRadius,
     disabled,
     isPlaceholder,
+    isPassword,
   } = useShapeProps(otherProps, INPUT_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
@@ -58,6 +59,11 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
     ref
   );
 
+  const maskPassword = (text: string) => {
+    const maskSymbol = '•';
+    return maskSymbol.repeat(text.length);
+  };
+
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       <Rect
@@ -75,7 +81,7 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
         x={INPUT_SHAPE.DEFAULT_PADDING}
         y={INPUT_SHAPE.DEFAULT_PADDING + 1}
         width={width - INPUT_SHAPE.DEFAULT_PADDING * 2}
-        text={text}
+        text={isPassword ? maskPassword(text) : text}
         fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
         lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT}

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,
   };
 };

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/';

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,

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 = () => {
             }
           />
         </ShowProp>
+        <ShowProp
+          singleSelection={isSingleSelection}
+          multipleSelectionPropsInCommon={multipleSelectionPropsInCommon}
+          propKey="isPassword"
+          propValue={selectedShapeData?.otherProps?.isPassword}
+        >
+          <Password
+            label="Password"
+            isPassword={selectedShapeData?.otherProps?.isPassword ?? false}
+            onChange={isPassword =>
+              updateOtherPropsOnSelected(
+                'isPassword',
+                isPassword,
+                isMultipleSelection
+              )
+            }
+          />
+        </ShowProp>
         <ShowProp
           singleSelection={isSingleSelection}
           multipleSelectionPropsInCommon={multipleSelectionPropsInCommon}