1# PatternLock 2 3The **\<PatternLock>** component allows users to use a pattern password for authentication. It enters the input state once a finger is pressed against it, and exits the input state and completes the input once the finger leaves the screen. 4 5> **NOTE** 6> 7> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Child Components 10 11Not supported 12 13## APIs 14 15PatternLock(controller?: PatternLockController) 16 17**Parameters** 18 19| Name | Type | Mandatory| Description | 20| ---------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 21| controller | [PatternLockController](#patternlockcontroller) | No | Controller of a component to reset the component status. | 22 23## Attributes 24 25Except for **backgroundColor**, the universal attributes are not supported. 26 27| Name | Type | Description | 28| --------------- | ------------------------------------- | ------------------------------------------------------------ | 29| sideLength | [Length](ts-types.md#length) | Width and height (same value) of the component. If this attribute is set to 0 or a negative value, the component is not displayed.<br>Default value: **300vp**| 30| circleRadius | [Length](ts-types.md#length) | Radius of the grid dot.<br>Default value: **14vp** | 31| regularColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in unselected state.<br>Default value: **Color.Black**| 32| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in selected state.<br>Default value: **Color.Black**| 33| activeColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the grid dot in activated state, which is when the dot is highlighted but not selected.<br>Default value: **Color.Black**| 34| pathColor | [ResourceColor](ts-types.md#resourcecolor) | Path color.<br>Default value: **Color.Blue** | 35| pathStrokeWidth | number \| string | Width of the path stroke. If this attribute is set to 0 or a negative value, the path stroke is not displayed.<br>Default value: **34vp** | 36| autoReset | boolean | Whether to allow the user to reset the component status (that is, clear the input) by touching the component again after the input is complete. The value **true** means that the user can reset the component status by touching the component again after the input is complete, and **false** means the opposite.<br>Default value: **true**| 37 38## Events 39 40In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 41 42| Name | Description | 43| ---------------------------------------- | ---------------------------------------- | 44| onPatternComplete(callback: (input: Array\<number\>) => void) | Invoked when the pattern password input is complete.<br>**input**: an array of digits that are the indexes of the connected grid dots and are arranged in the same sequence as the dots are connected. The indexes of the grid dots are as follows: 0 to 2 for the dots in the first row from left to right, 3–5 for the dots in the second row, and 6–8 for the dots in the third row.| 45 46## PatternLockController 47 48Implements the controller bound to the **\<PatternLock>** component for resetting the component status. 49 50### Objects to Import 51 52```typescript 53patternLockController: PatternLockController = new PatternLockController() 54``` 55 56### reset 57 58reset(): void 59 60Resets the component status. 61 62## Example 63 64```ts 65// xxx.ets 66@Entry 67@Component 68struct PatternLockExample { 69 @State passwords: Number[] = [] 70 @State message: string = 'please input password!' 71 private patternLockController: PatternLockController = new PatternLockController() 72 73 build() { 74 Column() { 75 Text(this.message).textAlign(TextAlign.Center).margin(20).fontSize(20) 76 PatternLock(this.patternLockController) 77 .sideLength(200) 78 .circleRadius(9) 79 .pathStrokeWidth(18) 80 .activeColor('#B0C4DE') 81 .selectedColor('#228B22') 82 .pathColor('#90EE90') 83 .backgroundColor('#F5F5F5') 84 .autoReset(true) 85 .onPatternComplete((input: Array<number>) => { 86 // If the length of the entered password is less than 5, the system prompts the user to enter the password again. 87 if (input === null || input === undefined || input.length < 5) { 88 this.message = 'The password length needs to be greater than 5, please enter again.' 89 return 90 } 91 // Check whether the password length is greater than 0. 92 if (this.passwords.length > 0) { 93 // Check whether the two passwords are the same. If yes, the system displays a message indicating that the password is set successfully. If no, the system prompts the user to enter the password again. 94 if (this.passwords.toString() === input.toString()) { 95 this.passwords = input 96 this.message = 'Set password successfully: ' + this.passwords.toString() 97 } else { 98 this.message = 'Inconsistent passwords, please enter again.' 99 } 100 } else { 101 // The system prompts the user to enter the password again. 102 this.passwords = input 103 this.message = "Please enter again." 104 } 105 }) 106 Button('Reset PatternLock').margin(30).onClick(() => { 107 // Reset the pattern lock. 108 this.patternLockController.reset() 109 this.passwords = [] 110 this.message = 'Please input password' 111 }) 112 }.width('100%').height('100%') 113 } 114} 115``` 116 117 118
