feat(Input): Added secure input functionality for typing passwords (#201

) * perf(Input): Use substring to remove last character * feat(Input): Added secure input functionality for typing passwords * chore: Updated input stories * chore: Secure fallback value --------- Co-authored-by: Dmytro Soldatov <[email protected]>
pixijs · Dec 1, 2024 · 5b3367d · 5b3367d
1 parent 84cba5b
commit 5b3367d
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 7 deletions.
diff --git a/src/Input.ts b/src/Input.ts
@@ -18,12 +18,15 @@ export type InputOptions = {
     placeholder?: string;
     value?: string;
     maxLength?: number;
+    secure?: boolean;
     align?: 'left' | 'center' | 'right';
     padding?: Padding;
     cleanOnFocus?: boolean;
     nineSlicePlane?: [number, number, number, number];
 };
 
+const SECURE_CHARACTER = '*';
+
 /**
  * Container-based component that creates an input to read the user's text.
  * @example
@@ -43,6 +46,8 @@ export class Input extends Container
     protected _bg?: Container | NineSlicePlane | Graphics;
     protected inputMask: Container | NineSlicePlane | Graphics;
     protected _cursor: Sprite;
+    protected _value = '';
+    protected _secure: boolean;
     protected inputField: PixiText;
     protected placeholder: PixiText;
     protected editing = false;
@@ -101,6 +106,7 @@ export class Input extends Container
 
         this.options = options;
         this.padding = options.padding;
+        this._secure = options.secure ?? false;
 
         this.cursor = 'text';
         this.interactive = true;
@@ -305,11 +311,11 @@ export class Input extends Container
 
     protected _delete(): void
     {
-        if (!this.editing || this.value.length === 0) return;
-        const array = this.value.split('');
+        const length = this.value.length;
+
+        if (!this.editing || length === 0) return;
 
-        array.pop();
-        this.value = array.join('');
+        this.value = this.value.substring(0, length - 1);
 
         this.onChange.emit(this.value);
     }
@@ -491,9 +497,12 @@ export class Input extends Container
     /** Sets the input text. */
     set value(text: string)
     {
-        this.inputField.text = text;
+        const textLength = text.length;
+
+        this._value = text;
+        this.inputField.text = this.secure ? SECURE_CHARACTER.repeat(textLength) : text;
 
-        if (text.length !== 0)
+        if (textLength !== 0)
         {
             this.placeholder.visible = false;
         }
@@ -508,7 +517,20 @@ export class Input extends Container
     /** Return text of the input. */
     get value(): string
     {
-        return this.inputField.text;
+        return this._value;
+    }
+
+    set secure(val: boolean)
+    {
+        this._secure = val;
+
+        // Update text based on secure state (useful for show/hide password implementations)
+        this.value = this._value;
+    }
+
+    get secure(): boolean
+    {
+        return this._secure;
     }
 
     /**

diff --git a/src/stories/input/InputGraphics.stories.ts b/src/stories/input/InputGraphics.stories.ts
@@ -9,6 +9,7 @@ import { getColor } from '../utils/color';
 const args = {
     text: '',
     placeholder: 'Enter text',
+    secure: false,
     align: ['center', 'left', 'right'],
     textColor: '#000000',
     backgroundColor: '#F1D583',
@@ -42,6 +43,7 @@ export const UseGraphics = ({
     maxLength,
     align,
     placeholder,
+    secure,
     paddingTop,
     paddingRight,
     paddingBottom,
@@ -72,6 +74,7 @@ export const UseGraphics = ({
             },
             maxLength,
             align,
+            secure,
             placeholder,
             value: text,
             padding: [paddingTop, paddingRight, paddingBottom, paddingLeft],

diff --git a/src/stories/input/InputNineSlicePlane.stories.ts b/src/stories/input/InputNineSlicePlane.stories.ts
@@ -8,6 +8,7 @@ import { centerElement } from '../../utils/helpers/resize';
 const args = {
     text: '',
     placeholder: 'Enter text',
+    secure: false,
     align: ['center', 'left', 'right'],
     textColor: '#000000',
     maxLength: 100,
@@ -34,6 +35,7 @@ export const UseNineSlicePlane = ({
     maxLength,
     align,
     placeholder,
+    secure,
     width,
     height,
     onChange
@@ -62,6 +64,7 @@ export const UseNineSlicePlane = ({
                 maxLength,
                 align,
                 placeholder,
+                secure,
                 value: text,
             });
 

diff --git a/src/stories/input/InputSprite.stories.ts b/src/stories/input/InputSprite.stories.ts
@@ -9,6 +9,7 @@ import { centerElement } from '../../utils/helpers/resize';
 const args = {
     text: '',
     placeholder: 'Enter text',
+    secure: false,
     align: ['center', 'left', 'right'],
     textColor: '#000000',
     maxLength: 100,
@@ -33,6 +34,7 @@ export const UseSprite = ({
     maxLength,
     align,
     placeholder,
+    secure,
     onChange
 }: any) =>
 {
@@ -56,6 +58,7 @@ export const UseSprite = ({
                 maxLength,
                 align,
                 placeholder,
+                secure,
                 value: text
             });