Merge pull request #709 from Lemoncode/feature/#697-add-new-property-to-the-input-shape-isPassword-truefalse

added isPassword property to input shape

Author: brauliodiez

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,13 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
     ref
   );
 
+  const maskPassword = (text: string) => {
+    const maskSymbol = '●';
+    return maskSymbol.repeat(text.length);
+  };
+
+  const finalText = isPassword && !isPlaceholder ? maskPassword(text) : text;
+
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       <Rect
@@ -75,7 +83,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={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<any, ShapeProps>((props, ref) => {
     </Group>
   );
 });
-
-/*
-    <Group {...commonGroupProps} {...shapeProps}>
-      <Rect
-        x={0}
-        y={0}
-        width={restrictedWidth}
-        height={restrictedHeight}
-        cornerRadius={borderRadius}
-        stroke={stroke}
-        dash={strokeStyle}
-        strokeWidth={INPUT_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill={fill}
-      />
-      <Text
-        x={INPUT_SHAPE.DEFAULT_PADDING}
-        y={INPUT_SHAPE.DEFAULT_PADDING + 1}
-        width={width - INPUT_SHAPE.DEFAULT_PADDING * 2}
-        text={text}
-        fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
-        fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
-        lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT}
-        fill={textColor}
-        align="left"
-        ellipsis={true}
-        wrap="none"
-      />
-    </Group>
-
-*/

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

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}