1/** 2 * Copyright (c) 2023 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import AuthUtils from '../utils/AuthUtils'; 17import Constants, { WantParams } from '../vm/Constants'; 18 19const MAX_LENGTH = 6; 20 21@Component 22export default struct SixPassword { 23 @Link inputValue: string; 24 @Link isEdit: boolean; 25 @Link @Watch('onTextValueChange') textValue: string; 26 @StorageLink('passwordArrayNumber') passwordArrayNumber: string[] = []; 27 28 onTextValueChange(): void { 29 this.passwordArrayNumber = this.textValue.replace(new RegExp('[^\\d]', 'g'), '').split(''); 30 } 31 32 clearPassword(): void { 33 this.passwordArrayNumber = []; 34 this.textValue = ''; 35 this.inputValue = ' '; 36 } 37 38 aboutToDisappear(): void { 39 this.clearPassword(); 40 } 41 42 build() { 43 Column() { 44 if (AppStorage.Get('titleLength') as number < (AppStorage.get("wantParams") as WantParams)?.title.length) { 45 Scroll() { 46 Column() { 47 Text((AppStorage.get("wantParams") as WantParams)?.title) 48 .draggable(false) 49 .fontSize($r('sys.float.ohos_id_text_size_body1')) 50 .fontColor($r('sys.color.ohos_id_color_text_primary')) 51 .fontWeight(FontWeight.Medium) 52 53 Column() { 54 Stack() { 55 List({ space: 4 }) { 56 ForEach(['', '', '', '', '', ''], (item: string, index?: number) => { 57 if (index !== undefined) { 58 ListItem() { 59 Button() 60 .border({ 61 color: $r('sys.color.ohos_id_color_primary'), 62 style: BorderStyle.Solid, 63 width: this.textValue.length !== 0 && index < this.textValue.length 64 ? $r('app.float.button_border_width') : 1 65 }) 66 .type(ButtonType.Circle) 67 .backgroundColor(Color.White) 68 .width($r('app.float.input_btn_size')) 69 .height($r('app.float.input_btn_size')) 70 .borderRadius($r('app.float.input_btn_size')) 71 .margin(index > 0 ? 72 { 73 left: $r('app.float.input_btn_padding_around'), 74 top: $r('app.float.margin_12') 75 }: { top: $r('app.float.margin_12') }) 76 .focusable(true) 77 } 78 } 79 }, (item: string) => item) 80 } 81 .listDirection(Axis.Horizontal) 82 .height($r('app.float.input_height')) 83 84 TextInput({ placeholder: '', text: this.passwordArrayNumber?.join('') }) 85 .draggable(false) 86 .onChange(async (value: string) => { 87 this.passwordArrayNumber = value.replace(new RegExp('[^\\d]', 'g'), '').split(''); 88 this.textValue = this.passwordArrayNumber?.join(''); 89 if (this.textValue?.length === MAX_LENGTH) { 90 AuthUtils.getInstance().sendNotice('EVENT_AUTH_TYPE_READY', [Constants.noticeTypePin]); 91 } 92 }) 93 .backgroundImageSize(ImageSize.Auto) 94 .enabled(this.isEdit) 95 .maxLength(MAX_LENGTH) 96 .visibility(Visibility.Visible) 97 .opacity(0) 98 .caretColor('transparent') 99 .id('pinSix') 100 } 101 } 102 .margin({ top: $r('app.float.content_padding') }) 103 104 Text(this.inputValue) 105 .draggable(false) 106 .fontSize($r('sys.float.ohos_id_text_size_body2')) 107 .margin({ top: $r('app.float.element_margin') }) 108 .fontColor($r('sys.color.ohos_id_color_warning')) 109 } 110 .margin({left: $r('app.float.size_24'), right: $r('app.float.size_24')}) 111 } 112 .width('100%') 113 .height($r('app.float.scroll_height_88')) 114 .margin({ top: $r('app.float.title_padding_top') }) 115 .scrollable(ScrollDirection.Vertical) 116 .scrollBarColor(Color.Gray) 117 } else { 118 Text((AppStorage.get("wantParams") as WantParams)?.title) 119 .draggable(false) 120 .margin({ top: $r('app.float.title_padding_top') }) 121 .fontSize($r('sys.float.ohos_id_text_size_body1')) 122 .fontColor($r('sys.color.ohos_id_color_text_primary')) 123 .height($r('app.float.size_24')) 124 .fontWeight(FontWeight.Medium) 125 Column() { 126 Stack() { 127 List({ space: 4 }) { 128 ForEach(['', '', '', '', '', ''], (item: string, index?: number) => { 129 if (index !== undefined) { 130 ListItem() { 131 Button() 132 .border({ 133 color: $r('sys.color.ohos_id_color_primary'), 134 style: BorderStyle.Solid, 135 width: this.textValue.length !== 0 && index < this.textValue.length 136 ? $r('app.float.button_border_width') : 1 137 }) 138 .type(ButtonType.Circle) 139 .backgroundColor(Color.White) 140 .width($r('app.float.input_btn_size')) 141 .height($r('app.float.input_btn_size')) 142 .borderRadius($r('app.float.input_btn_size')) 143 .margin(index > 0 ? 144 { 145 left: $r('app.float.input_btn_padding_around'), 146 top: $r('app.float.margin_12') 147 }: { top: $r('app.float.margin_12') }) 148 .focusable(true) 149 } 150 } 151 }, (item: string) => item) 152 } 153 .listDirection(Axis.Horizontal) 154 .height($r('app.float.input_height')) 155 156 TextInput({ placeholder: '', text: this.passwordArrayNumber?.join('') }) 157 .draggable(false) 158 .onChange(async (value: string) => { 159 this.passwordArrayNumber = value.replace(new RegExp('[^\\d]', 'g'), '').split(''); 160 this.textValue = this.passwordArrayNumber?.join(''); 161 if (this.textValue?.length === MAX_LENGTH) { 162 AuthUtils.getInstance().sendNotice('EVENT_AUTH_TYPE_READY', [Constants.noticeTypePin]); 163 } 164 }) 165 .backgroundImageSize(ImageSize.Auto) 166 .enabled(this.isEdit) 167 .maxLength(MAX_LENGTH) 168 .visibility(Visibility.Visible) 169 .opacity(0) 170 .caretColor('transparent') 171 .id('pinSix') 172 } 173 } 174 .margin({ top: $r('app.float.content_padding') }) 175 176 Text(this.inputValue) 177 .draggable(false) 178 .fontSize($r('sys.float.ohos_id_text_size_body2')) 179 .margin({ top: $r('app.float.element_margin') }) 180 .fontColor($r('sys.color.ohos_id_color_warning')) 181 } 182 183 } 184 } 185}