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 */ 15import account_osAccount from '@ohos.account.osAccount'; 16import display from '@ohos.display'; 17import UIExtensionContentSession from '@ohos.app.ability.UIExtensionContentSession'; 18import PassWord from '../../common/components/PassWord'; 19import SixPassword from '../../common/components/SixPassword'; 20import { DialogType } from '../../common/module/DialogType'; 21import AuthUtils from '../../common/utils/AuthUtils'; 22import FuncUtils from '../../common/utils/FuncUtils'; 23import LogUtils from '../../common/utils/LogUtils'; 24import TimeUtils from '../../common/utils/TimeUtils'; 25import Constants, { CmdData, CmdType, FingerPosition, WantParams } from '../../common/vm/Constants'; 26import common from '@ohos.app.ability.common'; 27 28const TAG = 'FaceAuth'; 29 30let pinAuthManager: account_osAccount.PINAuth; 31const INTERVAL = 1000; 32const THOUSANDTH = 1000; 33const PADDING_24 = 24; 34const MARGIN_TOP = 113; 35const PIN_FACE = 1; 36const PIN_FACE_FINGER = 2; 37const MULTI_PIN = 4; 38const SIX_PIN = 5; 39const SINGLE_FACE = 6; 40const SCREEN_LAND = 1; 41const SCREEN_PORTRAIT = 2; 42const NOTICE_DELAY = 50; 43const FINGER_SENSOR_POSITION_LINE = 0.75; 44const HINT_TIMES_BY_FAIL_LESS = 3; 45const SECOND = 1000; 46let pinData = ''; 47 48@Component 49export default struct FaceAuth { 50 @State prompt: string = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 51 .getStringSync($r('app.string.unified_authwidget_hint_recognition').id); 52 @State @Watch('onTextValueChange') textValue: string = ''; 53 @Link @Watch('onCmdDataChange') cmdData: Array<CmdType>; 54 @StorageLink('IS_LANDSCAPE') IS_LANDSCAPE: boolean = false; 55 @State isEdit: boolean = true; 56 // 0:six number 1:arbitrary character 2:arbitrary number 57 @Link type: string; 58 @Link pinSubType: string; 59 @Link dialogType: DialogType; 60 @State inputValue: string = ''; 61 @State dialogTypeFlag: number = this.dialogType === DialogType.PIN_FACE ? 62 PIN_FACE : (this.dialogType === DialogType.ALL ? PIN_FACE_FINGER : SINGLE_FACE); 63 // 1:Portrait screen 2:Landscape mode 64 @State screenType: number = 0; 65 @State fingerPositionY: number = 0; 66 @State fingerPosition: FingerPosition = { 67 sensorType: '' 68 } 69 @State screen: number[] = []; 70 @State faceLock: boolean = false; 71 @State fingerLock: boolean = false; 72 @State isPinFaceFinger: boolean = false; 73 @StorageLink('SYSTEM_NAVIGATION_BAR_HEIGHT') SYSTEM_NAVIGATION_BAR_HEIGHT: number = 0; 74 75 countTime(freezingTime: number): void { 76 const TRY_AGAIN = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager.getStringSync($r('app.string.unified_authwidget_postretry').id); 77 let promptText: string = ''; 78 let freezingMillisecond = freezingTime; 79 if (freezingMillisecond > 0) { 80 promptText = TimeUtils.getFreezingTimeNm(freezingMillisecond, (AppStorage.get("context") as common.ExtensionContext)); 81 promptText = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 82 .getStringSync($r('app.string.unified_authwidget_many_failures').id) + promptText + TRY_AGAIN; 83 setTimeout((t: number):void => this.countTime(t), INTERVAL, freezingTime - INTERVAL); 84 } else { 85 promptText = ' '; 86 this.isEdit = true; 87 } 88 this.inputValue = promptText; 89 } 90 91 aboutToAppear(): void { 92 LogUtils.debug(TAG, 'aboutToAppear'); 93 try { 94 if (this.cmdData && this.cmdData.length > 0) { 95 this.onCmdDataChange('first'); 96 } 97 98 if (this.isPinFaceFinger && this.fingerPosition.udSensorCenterYInThousandth !== undefined && 99 this.fingerPosition.udSensorRadiusInPx !== undefined) { 100 let tempPosition = this.fingerPosition.udSensorCenterYInThousandth / this.screen[1]; 101 FuncUtils.judgmentOverflow(tempPosition); 102 let tempFingerPositionY = px2vp(this.screen[1]) * this.fingerPosition.udSensorCenterYInThousandth; 103 FuncUtils.judgmentOverflow(tempFingerPositionY); 104 if (tempPosition < FINGER_SENSOR_POSITION_LINE) { 105 this.fingerPositionY = (tempFingerPositionY / THOUSANDTH) - px2vp(this.screen[1]) 106 + this.SYSTEM_NAVIGATION_BAR_HEIGHT - MARGIN_TOP - px2vp(this.fingerPosition.udSensorRadiusInPx); 107 } else { 108 this.fingerPositionY = (tempFingerPositionY / THOUSANDTH) - px2vp(this.screen[1]) 109 + this.SYSTEM_NAVIGATION_BAR_HEIGHT - PADDING_24 - px2vp(this.fingerPosition.udSensorRadiusInPx); 110 } 111 FuncUtils.judgmentOverflow(this.fingerPositionY); 112 } 113 LogUtils.info(TAG, 'aboutToAppear this.fingerPositionY: ' + this.fingerPositionY); 114 if (this.dialogType === DialogType.PIN_FACE || this.dialogType === DialogType.FACE) { 115 this.prompt = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 116 .getStringSync($r('app.string.unified_authwidget_hint_recognition').id); 117 AuthUtils.getInstance().sendNotice('EVENT_AUTH_TYPE_READY', [Constants.noticeTypeFace]); 118 } else if (this.dialogType === DialogType.ALL) { 119 AuthUtils.getInstance() 120 .sendNotice('EVENT_AUTH_TYPE_READY', [Constants.noticeTypeFinger, Constants.noticeTypeFace]); 121 } else { 122 LogUtils.error(TAG, 'aboutToAppear not support type'); 123 (AppStorage.get("session") as UIExtensionContentSession)?.terminateSelf(); 124 } 125 pinAuthManager = new account_osAccount.PINAuth(); 126 pinAuthManager.registerInputer({ 127 onGetData: (authSubType, callback) => { 128 LogUtils.info(TAG, 'aboutToAppear registerInputer onGetData'); 129 let uint8PW = FuncUtils.getUint8PW(pinData); 130 callback.onSetData(authSubType, uint8PW); 131 } 132 }); 133 } catch (error) { 134 LogUtils.error(TAG, 'aboutToAppear catch error: ' + error?.code); 135 (AppStorage.get("session") as UIExtensionContentSession)?.terminateSelf(); 136 } 137 } 138 139 aboutToDisappear(): void { 140 pinAuthManager?.unregisterInputer?.(); 141 } 142 143 toPin(): void { 144 if ([DialogType.PIN_FACE, DialogType.ALL].includes(this.dialogType)) { 145 LogUtils.debug(TAG, 'toPin this.dialogType: ' + this.dialogType); 146 if (this.dialogType === DialogType.ALL) { 147 AuthUtils.getInstance().sendNotice(Constants.noticeEventCancel, [Constants.noticeTypeFace, Constants.noticeTypeFinger]); 148 } else if (this.dialogType === DialogType.PIN_FACE) { 149 AuthUtils.getInstance().sendNotice(Constants.noticeEventCancel, [Constants.noticeTypeFace]); 150 } else { 151 AuthUtils.getInstance().sendNotice(Constants.noticeEventCancel, [Constants.noticeTypeFinger]); 152 } 153 if (this.pinSubType !== Constants.pinSix) { 154 this.dialogTypeFlag = MULTI_PIN; 155 } else { 156 this.dialogTypeFlag = SIX_PIN; 157 } 158 } 159 } 160 161 sendFaceEvent(): void { 162 if (!this.faceLock) { 163 this.prompt = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 164 .getStringSync($r('app.string.unified_authwidget_hint_recognition').id); 165 AuthUtils.getInstance().sendNotice('EVENT_AUTH_TYPE_READY', [Constants.noticeTypeFace]); 166 } 167 } 168 169 sendFingerEvent(): void { 170 if (!this.fingerLock) { 171 AuthUtils.getInstance().sendNotice('EVENT_AUTH_TYPE_READY', [Constants.noticeTypeFinger]); 172 } 173 } 174 175 onTextValueChange(): void { 176 pinData = this.textValue; 177 } 178 179 onFontColor(prompt: string, context: Context): Resource { 180 if (prompt === context?.resourceManager?.getStringSync($r('app.string.unified_authwidget_hint_fp_retry_s2').id) || 181 prompt === context?.resourceManager?.getStringSync($r('app.string.unified_authwidget_hint_face_verify_fail_click_retry_s1').id) || 182 prompt === context?.resourceManager?.getStringSync($r('app.string.unified_authwidget_title_number_failed_face_forbidden').id) || 183 prompt === context?.resourceManager?.getStringSync($r('app.string.unified_authwidget_title_number_failed_fp_forbidden').id)) { 184 return $r('sys.color.ohos_id_color_warning'); 185 } else if (prompt === context?.resourceManager?.getStringSync($r('app.string.unified_authwidget_hint_recognition').id) || 186 prompt === context?.resourceManager?.getStringSync($r('app.string.unified_authwidget_hint_recognize_success').id) || 187 prompt === context?.resourceManager?.getStringSync($r('app.string.unified_authwidget_hint_inscreen_fp').id)) { 188 return $r('sys.color.ohos_id_color_text_secondary'); 189 } else { 190 return $r('sys.color.ohos_id_color_text_secondary'); 191 } 192 } 193 194 onCmdDataChange(num?: string): void { 195 this.cmdData.length > 0 && this.cmdData.map(async (item) => { 196 const payload: CmdData = item.payload; 197 if (payload.type === Constants.noticeTypePin) { 198 if (payload.result === 0) { 199 (AppStorage.get("session") as UIExtensionContentSession)?.terminateSelf(); 200 } else { 201 if (payload.remainAttempts) { 202 this.inputValue = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 203 .getStringSync($r('app.string.unified_authwidget_hint_pwd_error').id); 204 this.textValue = ''; 205 if (num === 'first') { 206 this.inputValue = ''; 207 } 208 if (payload.remainAttempts < HINT_TIMES_BY_FAIL_LESS) { 209 this.inputValue = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 210 .getStringSync($r('app.string.unified_authwidget_pwd_error_can_try').id) 211 + payload.remainAttempts + (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 212 .getStringSync($r('app.string.unified_authwidget_frequency').id); 213 } 214 } 215 if (payload.remainAttempts === 0 && payload.lockoutDuration) { 216 this.countTime(payload.lockoutDuration); 217 this.textValue = ''; 218 this.toPin(); 219 this.isEdit = false; 220 } 221 } 222 } else if (payload.type === Constants.noticeTypeFace) { 223 if ([SIX_PIN, MULTI_PIN].includes(this.dialogTypeFlag)) { 224 return; 225 } 226 if (payload.remainAttempts && payload.result !== 0) { 227 this.prompt = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 228 .getStringSync($r('app.string.unified_authwidget_hint_face_verify_fail_click_retry_s1').id); 229 this.faceLock = false; 230 } 231 if (num === 'first') { 232 this.prompt = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 233 .getStringSync($r('app.string.unified_authwidget_hint_recognition').id); 234 } 235 if (payload.remainAttempts === 0) { 236 this.prompt = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 237 .getStringSync($r('app.string.unified_authwidget_title_number_failed_face_forbidden').id); 238 this.faceLock = true; 239 if (this.dialogType === DialogType.ALL) { 240 if (this.fingerLock) { 241 this.toPin(); 242 } 243 } else { 244 this.toPin(); 245 } 246 } 247 if (payload.result === 0) { 248 this.prompt = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 249 .getStringSync($r('app.string.unified_authwidget_hint_recognize_success').id) 250 setTimeout(() => { 251 (AppStorage.get("session") as UIExtensionContentSession)?.terminateSelf(); 252 }, SECOND); 253 } 254 } else if (payload.type === Constants.noticeTypeFinger) { 255 if ([SIX_PIN, MULTI_PIN].includes(this.dialogTypeFlag)) { 256 return; 257 } 258 if (payload.sensorInfo && JSON.stringify(payload.sensorInfo) !== '{}') { 259 this.fingerPosition = JSON.parse(payload.sensorInfo); 260 const displayClass = display.getDefaultDisplaySync(); 261 this.screen = [displayClass.width, displayClass.height]; 262 switch (JSON.parse(payload.sensorInfo)?.sensorType as string) { 263 case 'NON_SENSOR': 264 case 'OUT_OF_SCREEN_SENSOR': { 265 this.dialogTypeFlag = PIN_FACE; 266 break; 267 } 268 default: 269 this.isPinFaceFinger = true; 270 let tempPositionLine = JSON.parse(payload.sensorInfo).udSensorCenterYInThousandth / displayClass.height; 271 FuncUtils.judgmentOverflow(tempPositionLine); 272 if (tempPositionLine < FINGER_SENSOR_POSITION_LINE) { 273 if (!this.IS_LANDSCAPE && ![SIX_PIN, MULTI_PIN].includes(this.dialogTypeFlag)) { 274 this.screenType = SCREEN_LAND; 275 } 276 } else if (tempPositionLine > FINGER_SENSOR_POSITION_LINE) { 277 if (!this.IS_LANDSCAPE && ![SIX_PIN, MULTI_PIN].includes(this.dialogTypeFlag)) { 278 this.screenType = SCREEN_PORTRAIT; 279 } 280 } 281 break; 282 } 283 } 284 if (payload.remainAttempts && payload.result !== 0) { 285 this.prompt = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 286 .getStringSync($r('app.string.unified_authwidget_hint_fp_retry_s2').id); 287 this.fingerLock = false; 288 if (num !== 'first' && payload.remainAttempts > 0 && payload.result !== 0) { 289 setTimeout(() => { 290 AuthUtils.getInstance().sendNotice('EVENT_AUTH_TYPE_READY', [Constants.noticeTypeFinger]); 291 }, NOTICE_DELAY); 292 } 293 } 294 if (num === 'first') { 295 this.prompt = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 296 .getStringSync($r('app.string.unified_authwidget_hint_normal_fp_only').id); 297 } 298 if (payload.remainAttempts === 0) { 299 this.prompt = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 300 .getStringSync($r('app.string.unified_authwidget_title_number_failed_fp_forbidden').id); 301 this.fingerLock = true; 302 if (this.dialogType === DialogType.ALL) { 303 if (this.faceLock) { 304 this.toPin(); 305 } 306 } else { 307 this.toPin(); 308 } 309 } 310 if (payload.result === 0) { 311 this.prompt = (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 312 .getStringSync($r('app.string.unified_authwidget_hint_fp_verify_success').id) 313 setTimeout(() => { 314 (AppStorage.get("session") as UIExtensionContentSession)?.terminateSelf(); 315 }, SECOND); 316 } 317 } else { 318 LogUtils.error(TAG, 'onCmdDataChange default'); 319 (AppStorage.get("session") as UIExtensionContentSession)?.terminateSelf(); 320 } 321 }) 322 } 323 324 handleCancel(): void { 325 if (this.dialogTypeFlag === SIX_PIN || this.dialogTypeFlag === MULTI_PIN) { 326 AuthUtils.getInstance().sendNotice(Constants.noticeEventCancel, [Constants.noticeTypePin]); 327 } else { 328 AuthUtils.getInstance().sendNotice(Constants.noticeEventCancel, [] || 329 (AppStorage.get("wantParams") as WantParams)?.type as string[]); 330 } 331 (AppStorage.get("session") as UIExtensionContentSession)?.terminateSelf(); 332 } 333 334 build() { 335 Column() { 336 GridRow({ 337 columns: { xs: 4, sm: 4, md: 8, lg: 12 }, 338 gutter: { x: 24, y: 24 }, 339 breakpoints: { value: Constants.deviceDpi, 340 reference: BreakpointsReference.WindowSize }, 341 direction: GridRowDirection.Row 342 }) { 343 GridCol({ 344 span: { xs: 4, sm: 4, md: 4, lg: 6 }, 345 offset: { md: 2, lg: 3 }, 346 }) { 347 if (this.isPinFaceFinger) { 348 if (this.dialogTypeFlag === MULTI_PIN) { 349 Column() { 350 // Password 32-bit 351 Column() { 352 PassWord({ 353 textValue: $textValue, 354 inputValue: $inputValue, 355 isEdit: $isEdit, 356 pinSubType: $pinSubType 357 }) 358 Row() { 359 Column() { 360 Button($r('app.string.unified_authwidget_cancel'), { stateEffect: true }) 361 .id('cancelBtnMixedPinFaceAuth') 362 .margin({ left: $r('app.float.content_padding') }) 363 .width(Constants.ninetyPercentWidth) 364 .height($r('app.float.btn_height')) 365 .fontSize($r('sys.float.ohos_id_text_size_button1')) 366 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 367 .fontWeight(FontWeight.Medium) 368 .backgroundColor(Color.Transparent) 369 .onClick(() => { 370 this.textValue = ''; 371 this.handleCancel(); 372 }) 373 }.width(Constants.halfContainerWidth) 374 375 Divider() 376 .vertical(true) 377 .height($r('app.float.digital_password_mask_height')) 378 .color($r('sys.color.ohos_id_color_list_separator')) 379 .width($r('app.float.divider_width')) 380 Column() { 381 Button($r('app.string.unified_authwidget_confirm')) 382 .id('okBtnFaceAuth') 383 .margin({ right: $r('app.float.content_padding') }) 384 .width(Constants.ninetyPercentWidth) 385 .height($r('app.float.btn_height')) 386 .fontSize($r('sys.float.ohos_id_text_size_button1')) 387 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 388 .fontWeight(FontWeight.Medium) 389 .backgroundColor(Color.Transparent) 390 .onClick(async (e) => { 391 AuthUtils.getInstance().sendNotice('EVENT_AUTH_TYPE_READY', [Constants.noticeTypePin]); 392 }) 393 }.width(Constants.halfContainerWidth) 394 } 395 .height($r('app.float.btn_height')) 396 .margin({ top: $r('app.float.element_margin'), bottom: $r('app.float.content_padding') }) 397 } 398 } 399 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 400 .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) 401 .margin({ 402 left: ($r('sys.float.ohos_id_dialog_margin_start')), 403 right: ($r('sys.float.ohos_id_dialog_margin_end')), 404 bottom: this.IS_LANDSCAPE ? '0' : ($r('sys.float.ohos_id_dialog_margin_bottom')) 405 }) 406 } else if (this.dialogTypeFlag === SIX_PIN) { 407 Column() { 408 // Password 6-bit 409 Column() { 410 SixPassword({ 411 textValue: $textValue, 412 inputValue: $inputValue, 413 isEdit: $isEdit 414 }) 415 Button($r('app.string.unified_authwidget_cancel'), { stateEffect: true }) 416 .id('cancelBtnSixPinFaceAuth') 417 .onClick(() => { 418 this.handleCancel(); 419 this.textValue = ''; 420 }) 421 .backgroundColor(Color.Transparent) 422 .height($r('app.float.btn_height')) 423 .width(Constants.halfContainerWidth) 424 .margin({ top: $r('app.float.element_margin'), bottom: $r('app.float.content_padding') }) 425 .fontSize($r('sys.float.ohos_id_text_size_button1')) 426 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 427 .fontWeight(FontWeight.Medium) 428 } 429 } 430 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 431 .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) 432 .margin({ 433 left: ($r('sys.float.ohos_id_dialog_margin_start')), 434 right: ($r('sys.float.ohos_id_dialog_margin_end')), 435 bottom: this.IS_LANDSCAPE ? '0' : ($r('sys.float.ohos_id_dialog_margin_bottom')) 436 }) 437 } else if (this.dialogTypeFlag === PIN_FACE_FINGER && this.screenType === SCREEN_PORTRAIT && 438 this.fingerPosition.udSensorRadiusInPx !== undefined) { 439 Column() { 440 // The first form of facial fingerprint password 441 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 442 Image($r('app.media.ic_public_cancel')) 443 .draggable(false) 444 .id('cancelImgAllFaceAuth') 445 .width($r('app.float.digital_password_mask_height')) 446 .height($r('app.float.digital_password_mask_height')) 447 .margin({ 448 top: $r('app.float.digital_password_mask_height'), 449 left: $r('app.float.digital_password_mask_height') 450 }) 451 .onClick(() => { 452 this.textValue = ''; 453 this.handleCancel(); 454 }) 455 Button($r('app.string.unified_authwidget_usepwd')) 456 .id('usePwdBtnAllFaceAuth') 457 .backgroundColor(Color.White) 458 .height($r('app.float.digital_password_mask_height')) 459 .padding(0) 460 .margin({ 461 top: $r('app.float.digital_password_mask_height'), 462 right: $r('app.float.digital_password_mask_height') 463 }) 464 .fontColor($r('sys.color.ohos_id_color_activated')) 465 .fontSize($r('sys.float.ohos_id_text_size_body1')) 466 .fontWeight(FontWeight.Medium) 467 .onClick(() => { 468 this.inputValue = ' '; 469 this.toPin(); 470 }) 471 } 472 473 if (AppStorage.Get('titleLength') as number < (AppStorage.get("wantParams") as WantParams)?.title.length) { 474 Scroll() { 475 Column() { 476 Image($r('app.media.error_faceID')) 477 .draggable(false) 478 .id('imgAllFaceAuth') 479 .width($r('app.float.image_small')) 480 .height($r('app.float.image_small')) 481 .margin({ bottom: $r('app.float.content_padding') }) 482 .colorBlend($r('sys.color.ohos_id_color_activated')) 483 .onClick(() => { 484 this.sendFaceEvent(); 485 }) 486 Text((AppStorage.get("wantParams") as WantParams)?.title) 487 .draggable(false) 488 .fontSize($r('sys.float.ohos_id_text_size_body1')) 489 .fontColor($r('sys.color.ohos_id_color_text_primary')) 490 .fontWeight(FontWeight.Medium) 491 Text(this.prompt) 492 .draggable(false) 493 .id('resetPromptTextAllFaceAuth') 494 .margin({ top: $r('app.float.element_margin') }) 495 .height($r('app.float.size_24')) 496 .fontSize($r('sys.float.ohos_id_text_size_body2')) 497 .fontColor(this.onFontColor(this.prompt, (AppStorage.get("context") as common.ExtensionContext))) 498 }.margin({left: $r('app.float.size_24'), right: $r('app.float.size_24')}) 499 } 500 .width('100%') 501 .height($r('app.float.scroll_height_122')) 502 .margin({top: $r('app.float.content_padding')}) 503 .scrollable(ScrollDirection.Vertical) 504 .scrollBarColor(Color.Gray) 505 } else { 506 Image($r('app.media.error_faceID')) 507 .draggable(false) 508 .id('imgAllFaceAuth') 509 .width($r('app.float.image_small')) 510 .height($r('app.float.image_small')) 511 .margin({ top: $r('app.float.content_padding'), bottom: $r('app.float.content_padding') }) 512 .colorBlend($r('sys.color.ohos_id_color_activated')) 513 .onClick(() => { 514 this.sendFaceEvent(); 515 }) 516 Text((AppStorage.get("wantParams") as WantParams)?.title) 517 .draggable(false) 518 .fontSize($r('sys.float.ohos_id_text_size_body1')) 519 .fontColor($r('sys.color.ohos_id_color_text_primary')) 520 .height($r('app.float.size_24')) 521 .fontWeight(FontWeight.Medium) 522 Text(this.prompt) 523 .draggable(false) 524 .id('resetPromptTextAllFaceAuth') 525 .margin({ top: $r('app.float.element_margin') }) 526 .height($r('app.float.size_24')) 527 .fontSize($r('sys.float.ohos_id_text_size_body2')) 528 .fontColor(this.onFontColor(this.prompt, (AppStorage.get("context") as common.ExtensionContext))) 529 } 530 Image($r('app.media.ic_blue_fingerprint')) 531 .draggable(false) 532 .id('blueFingerprintImgAllFaceAuth') 533 // radius 534 .width(px2vp(this.fingerPosition.udSensorRadiusInPx * 2)) 535 .height(px2vp(this.fingerPosition.udSensorRadiusInPx * 2)) 536 .margin({ 537 top: $r('app.float.digital_password_mask_height'), 538 bottom: $r('app.float.digital_password_mask_height') 539 }) 540 .colorBlend($r('sys.color.ohos_id_color_activated')) 541 .onClick(() => { 542 this.sendFingerEvent(); 543 }) 544 } 545 .position({ y: this.fingerPositionY }) 546 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 547 .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) 548 .margin({ 549 left: ($r('sys.float.ohos_id_dialog_margin_start')), 550 right: ($r('sys.float.ohos_id_dialog_margin_end')), 551 bottom: ($r('sys.float.ohos_id_dialog_margin_bottom')) 552 }) 553 } else if (this.dialogTypeFlag === PIN_FACE_FINGER && this.screenType === SCREEN_LAND 554 && this.fingerPosition.udSensorRadiusInPx !== undefined) { 555 Column() { 556 if (AppStorage.Get('titleLength') as number < (AppStorage.get("wantParams") as WantParams)?.title.length) { 557 Scroll() { 558 Column() { 559 // Facial fingerprint password, second form 560 Image($r('app.media.error_faceID')) 561 .draggable(false) 562 .id('errFaceImgFaceAuth') 563 .width($r('app.float.image_small')) 564 .height($r('app.float.image_small')) 565 .margin({bottom: $r('app.float.content_padding') }) 566 .colorBlend($r('sys.color.ohos_id_color_activated')) 567 .onClick(() => { 568 this.sendFaceEvent(); 569 }) 570 Text((AppStorage.get("wantParams") as WantParams)?.title) 571 .draggable(false) 572 .fontSize($r('sys.float.ohos_id_text_size_body1')) 573 .fontColor($r('sys.color.ohos_id_color_text_primary')) 574 .fontWeight(FontWeight.Medium) 575 }.margin({left: $r('app.float.size_24'), right: $r('app.float.size_24')}) 576 } 577 .width('100%') 578 .height($r('app.float.scroll_height_90')) 579 .margin({ top: $r('app.float.content_padding_top')}) 580 .scrollable(ScrollDirection.Vertical) 581 .scrollBarColor(Color.Gray) 582 } else { 583 // Facial fingerprint password, second form 584 Image($r('app.media.error_faceID')) 585 .draggable(false) 586 .id('errFaceImgFaceAuth') 587 .width($r('app.float.image_small')) 588 .height($r('app.float.image_small')) 589 .margin({ top: $r('app.float.content_padding_top'), bottom: $r('app.float.content_padding') }) 590 .colorBlend($r('sys.color.ohos_id_color_activated')) 591 .onClick(() => { 592 this.sendFaceEvent(); 593 }) 594 Text((AppStorage.get("wantParams") as WantParams)?.title) 595 .draggable(false) 596 .fontSize($r('sys.float.ohos_id_text_size_body1')) 597 .fontColor($r('sys.color.ohos_id_color_text_primary')) 598 .height($r('app.float.size_24')) 599 .fontWeight(FontWeight.Medium) 600 } 601 Image($r('app.media.ic_blue_fingerprint')) 602 .draggable(false) 603 .id('blueFingerprintImgFaceAuth') 604 // radius 605 .width(px2vp(this.fingerPosition.udSensorRadiusInPx * 2)) 606 .height(px2vp(this.fingerPosition.udSensorRadiusInPx * 2)) 607 .margin({ top: $r('app.float.content_padding') }) 608 .colorBlend($r('sys.color.ohos_id_color_activated')) 609 .onClick(() => { 610 this.sendFingerEvent(); 611 }) 612 Text(this.prompt) 613 .draggable(false) 614 .margin({ top: $r('app.float.content_padding') }) 615 .fontSize($r('sys.float.ohos_id_text_size_body2')) 616 .height($r('app.float.size_24')) 617 .fontColor(this.onFontColor(this.prompt, (AppStorage.get("context") as common.ExtensionContext))) 618 .onClick(() => { 619 if (this.prompt === (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 620 ?.getStringSync($r('app.string.unified_authwidget_hint_face_verify_fail_click_retry_s1').id)) { 621 this.sendFaceEvent(); 622 } 623 }) 624 Row() { 625 Column() { 626 Button($r('app.string.unified_authwidget_cancel'), { stateEffect: true }) 627 .id('cancelBtnFaceAuth') 628 .margin({ left: $r('app.float.content_padding') }) 629 .width(Constants.ninetyPercentWidth) 630 .height($r('app.float.btn_height')) 631 .fontSize($r('sys.float.ohos_id_text_size_button1')) 632 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 633 .fontWeight(FontWeight.Medium) 634 .backgroundColor(Color.Transparent) 635 .onClick(() => { 636 this.handleCancel(); 637 this.textValue = ''; 638 }) 639 }.width(Constants.halfContainerWidth) 640 641 Divider() 642 .vertical(true) 643 .height($r('app.float.digital_password_mask_height')) 644 .color($r('sys.color.ohos_id_color_list_separator')) 645 .width($r('app.float.divider_width')) 646 Column() { 647 Button($r('app.string.unified_authwidget_usepwd')) 648 .id('usePwdBtnFaceAuth') 649 .margin({ right: $r('app.float.content_padding') }) 650 .width(Constants.ninetyPercentWidth) 651 .height($r('app.float.btn_height')) 652 .fontSize($r('sys.float.ohos_id_text_size_button1')) 653 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 654 .fontWeight(FontWeight.Medium) 655 .backgroundColor(Color.Transparent) 656 .onClick(() => { 657 this.inputValue = ' '; 658 this.toPin(); 659 }) 660 661 }.width(Constants.halfContainerWidth) 662 663 } 664 .height($r('app.float.btn_height')) 665 .margin({ top: $r('app.float.element_margin'), bottom: $r('app.float.content_padding') }) 666 } 667 .position({ y: this.fingerPositionY }) 668 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 669 .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) 670 .margin({ 671 left: ($r('sys.float.ohos_id_dialog_margin_start')), 672 right: ($r('sys.float.ohos_id_dialog_margin_end')), 673 bottom: ($r('sys.float.ohos_id_dialog_margin_bottom')) 674 }) 675 } 676 677 } else { 678 Column() { 679 if (this.dialogTypeFlag === PIN_FACE) { 680 // Pin FACE 681 if (AppStorage.Get('titleLength') as number < (AppStorage.get("wantParams") as WantParams)?.title.length) { 682 Scroll() { 683 Column() { 684 Text((AppStorage.get("wantParams") as WantParams)?.title) 685 .draggable(false) 686 .fontSize($r('sys.float.ohos_id_text_size_body1')) 687 .fontColor($r('sys.color.ohos_id_color_text_primary')) 688 .fontWeight(FontWeight.Medium) 689 Image(this.prompt !== (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 690 .getStringSync($r('app.string.unified_authwidget_hint_recognize_success').id) 691 ? $r('app.media.error_faceID') : $r('app.media.right_faceID')) 692 .draggable(false) 693 .margin({ 694 top: $r('app.float.digital_password_mask_height'), 695 bottom: $r('app.float.digital_password_mask_height') 696 }) 697 .width($r('app.float.image_size')) 698 .height($r('app.float.image_size')) 699 .colorBlend($r('sys.color.ohos_id_color_activated')) 700 .onClick(() => { 701 this.sendFaceEvent(); 702 }) 703 Text(this.prompt).fontSize($r('sys.float.ohos_id_text_size_body2')) 704 .draggable(false) 705 .fontColor(this.onFontColor(this.prompt, (AppStorage.get("context") as common.ExtensionContext))) 706 .height($r('app.float.size_24')) 707 .onClick(() => { 708 this.sendFaceEvent(); 709 }) 710 }.margin({left: $r('app.float.size_24'), right: $r('app.float.size_24')}) 711 } 712 .width('100%') 713 .height($r('app.float.scroll_height_182')) 714 .margin({ top: $r('app.float.title_padding_top') }) 715 .scrollable(ScrollDirection.Vertical) 716 .scrollBarColor(Color.Gray) 717 } else { 718 Text((AppStorage.get("wantParams") as WantParams)?.title) 719 .draggable(false) 720 .margin({ top: $r('app.float.title_padding_top') }) 721 .fontSize($r('sys.float.ohos_id_text_size_body1')) 722 .fontColor($r('sys.color.ohos_id_color_text_primary')) 723 .height($r('app.float.size_24')) 724 .fontWeight(FontWeight.Medium) 725 Image(this.prompt !== (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 726 .getStringSync($r('app.string.unified_authwidget_hint_recognize_success').id) 727 ? $r('app.media.error_faceID') : $r('app.media.right_faceID')) 728 .draggable(false) 729 .margin({ 730 top: $r('app.float.digital_password_mask_height'), 731 bottom: $r('app.float.digital_password_mask_height') 732 }) 733 .width($r('app.float.image_size')) 734 .height($r('app.float.image_size')) 735 .colorBlend($r('sys.color.ohos_id_color_activated')) 736 .onClick(() => { 737 this.sendFaceEvent(); 738 }) 739 Text(this.prompt).fontSize($r('sys.float.ohos_id_text_size_body2')) 740 .draggable(false) 741 .fontColor(this.onFontColor(this.prompt, (AppStorage.get("context") as common.ExtensionContext))) 742 .height($r('app.float.size_24')) 743 .onClick(() => { 744 this.sendFaceEvent(); 745 }) 746 } 747 Row() { 748 Column() { 749 Button($r('app.string.unified_authwidget_cancel'), { stateEffect: true }) 750 .id('cancelBtnPinFaceAuth') 751 .margin({ left: $r('app.float.content_padding') }) 752 .width(Constants.ninetyPercentWidth) 753 .height($r('app.float.btn_height')) 754 .fontSize($r('sys.float.ohos_id_text_size_button1')) 755 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 756 .fontWeight(FontWeight.Medium) 757 .backgroundColor(Color.Transparent) 758 .onClick(() => { 759 this.handleCancel(); 760 }) 761 }.width(Constants.halfContainerWidth) 762 763 Divider() 764 .vertical(true) 765 .height($r('app.float.digital_password_mask_height')) 766 .color($r('sys.color.ohos_id_color_list_separator')) 767 .width($r('app.float.divider_width')) 768 Column() { 769 Button($r('app.string.unified_authwidget_usepwd')) 770 .id('usePwdPinFaceAuth') 771 .margin({ right: $r('app.float.content_padding') }) 772 .width(Constants.ninetyPercentWidth) 773 .height($r('app.float.btn_height')) 774 .fontSize($r('sys.float.ohos_id_text_size_button1')) 775 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 776 .fontWeight(FontWeight.Medium) 777 .backgroundColor(Color.Transparent) 778 .onClick(() => { 779 this.inputValue = ' '; 780 this.toPin(); 781 }) 782 }.width(Constants.halfContainerWidth) 783 784 } 785 .height($r('app.float.btn_height')) 786 .margin({ top: $r('app.float.element_margin'), bottom: $r('app.float.content_padding') }) 787 } 788 if (this.dialogTypeFlag === MULTI_PIN) { 789 // Password 32-bit 790 Column() { 791 PassWord({ 792 textValue: $textValue, 793 inputValue: $inputValue, 794 isEdit: $isEdit, 795 pinSubType: $pinSubType 796 }) 797 Row() { 798 Column() { 799 Button($r('app.string.unified_authwidget_cancel'), { stateEffect: true }) 800 .id('cancelBtnMixedPinFaceAuth') 801 .margin({ left: $r('app.float.content_padding') }) 802 .width(Constants.ninetyPercentWidth) 803 .height($r('app.float.btn_height')) 804 .fontSize($r('sys.float.ohos_id_text_size_button1')) 805 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 806 .fontWeight(FontWeight.Medium) 807 .backgroundColor(Color.Transparent) 808 .onClick(() => { 809 this.textValue = ''; 810 this.handleCancel(); 811 }) 812 }.width(Constants.halfContainerWidth) 813 814 Divider() 815 .vertical(true) 816 .height($r('app.float.digital_password_mask_height')) 817 .color($r('sys.color.ohos_id_color_list_separator')) 818 .width($r('app.float.divider_width')) 819 Column() { 820 Button($r('app.string.unified_authwidget_confirm')) 821 .id('okBtnFaceAuth') 822 .margin({ right: $r('app.float.content_padding') }) 823 .width(Constants.ninetyPercentWidth) 824 .height($r('app.float.btn_height')) 825 .fontSize($r('sys.float.ohos_id_text_size_button1')) 826 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 827 .fontWeight(FontWeight.Medium) 828 .backgroundColor(Color.Transparent) 829 .onClick(async (e) => { 830 AuthUtils.getInstance().sendNotice('EVENT_AUTH_TYPE_READY', [Constants.noticeTypePin]); 831 }) 832 }.width(Constants.halfContainerWidth) 833 } 834 .height($r('app.float.btn_height')) 835 .margin({ top: $r('app.float.element_margin'), bottom: $r('app.float.content_padding') }) 836 } 837 838 } 839 if (this.dialogTypeFlag === SIX_PIN) { 840 // Password 6-bit 841 Column() { 842 SixPassword({ 843 textValue: $textValue, 844 inputValue: $inputValue, 845 isEdit: $isEdit 846 }) 847 Button($r('app.string.unified_authwidget_cancel'), { stateEffect: true }) 848 .id('cancelBtnSixPinFaceAuth') 849 .onClick(() => { 850 this.handleCancel(); 851 this.textValue = ''; 852 }) 853 .backgroundColor(Color.Transparent) 854 .height($r('app.float.btn_height')) 855 .width(Constants.halfContainerWidth) 856 .margin({ top: $r('app.float.element_margin'), bottom: $r('app.float.content_padding') }) 857 .fontSize($r('sys.float.ohos_id_text_size_button1')) 858 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 859 .fontWeight(FontWeight.Medium) 860 } 861 } 862 if (this.dialogTypeFlag === SINGLE_FACE) { 863 // Single FACE 864 if (AppStorage.Get('titleLength') as number < (AppStorage.get("wantParams") as WantParams)?.title.length) { 865 Scroll() { 866 Column() { 867 Text((AppStorage.get("wantParams") as WantParams)?.title) 868 .draggable(false) 869 .fontSize($r('sys.float.ohos_id_text_size_body1')) 870 .fontColor($r('sys.color.ohos_id_color_text_primary')) 871 .fontWeight(FontWeight.Medium) 872 .id('titleFaceAuth') 873 Image(this.prompt !== (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 874 .getStringSync($r('app.string.unified_authwidget_hint_recognize_success').id) 875 ? $r('app.media.error_faceID') : $r('app.media.right_faceID')) 876 .draggable(false) 877 .id('imageFaceAuth') 878 .margin({ 879 top: $r('app.float.digital_password_mask_height'), 880 bottom: $r('app.float.digital_password_mask_height') 881 }) 882 .width($r('app.float.image_size')) 883 .height($r('app.float.image_size')) 884 .colorBlend($r('sys.color.ohos_id_color_activated')) 885 .onClick(() => { 886 this.sendFaceEvent(); 887 }) 888 Text(this.prompt) 889 .draggable(false) 890 .fontSize($r('sys.float.ohos_id_text_size_body2')) 891 .id('textFaceAuth') 892 .height($r('app.float.size_24')) 893 .fontColor(this.onFontColor(this.prompt, (AppStorage.get("context") as common.ExtensionContext))) 894 .onClick(() => { 895 this.sendFaceEvent(); 896 }) 897 }.margin({left: $r('app.float.size_24'), right: $r('app.float.size_24')}) 898 } 899 .width('100%') 900 .height($r('app.float.scroll_height_182')) 901 .margin({ top: $r('app.float.title_padding_top') }) 902 .scrollable(ScrollDirection.Vertical) 903 .scrollBarColor(Color.Gray) 904 } else { 905 Text((AppStorage.get("wantParams") as WantParams)?.title) 906 .draggable(false) 907 .margin({ top: $r('app.float.title_padding_top') }) 908 .fontSize($r('sys.float.ohos_id_text_size_body1')) 909 .fontColor($r('sys.color.ohos_id_color_text_primary')) 910 .height($r('app.float.size_24')) 911 .fontWeight(FontWeight.Medium) 912 .id('titleFaceAuth') 913 Image(this.prompt !== (AppStorage.get("context") as common.ExtensionContext)?.resourceManager 914 .getStringSync($r('app.string.unified_authwidget_hint_recognize_success').id) 915 ? $r('app.media.error_faceID') : $r('app.media.right_faceID')) 916 .draggable(false) 917 .id('imageFaceAuth') 918 .margin({ 919 top: $r('app.float.digital_password_mask_height'), 920 bottom: $r('app.float.digital_password_mask_height') 921 }) 922 .width($r('app.float.image_size')) 923 .height($r('app.float.image_size')) 924 .colorBlend($r('sys.color.ohos_id_color_activated')) 925 .onClick(() => { 926 this.sendFaceEvent(); 927 }) 928 Text(this.prompt) 929 .draggable(false) 930 .fontSize($r('sys.float.ohos_id_text_size_body2')) 931 .id('textFaceAuth') 932 .height($r('app.float.size_24')) 933 .fontColor(this.onFontColor(this.prompt, (AppStorage.get("context") as common.ExtensionContext))) 934 .onClick(() => { 935 this.sendFaceEvent(); 936 }) 937 } 938 if (!((AppStorage.get("wantParams") as WantParams)?.navigationButtonText as string)) { 939 Row() { 940 Column() { 941 Button($r('app.string.unified_authwidget_cancel'), { stateEffect: true }) 942 .id('cancelBtnAllFace') 943 .onClick(() => { 944 this.handleCancel(); 945 }) 946 .backgroundColor(Color.Transparent) 947 .height($r('app.float.btn_height')) 948 .width(Constants.halfContainerWidth) 949 .fontSize($r('sys.float.ohos_id_text_size_button1')) 950 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 951 .fontWeight(FontWeight.Medium) 952 }.width(Constants.fullContainerHeight) 953 } 954 .height($r('app.float.btn_height')) 955 .padding({ left: $r('app.float.content_padding'), right: $r('app.float.content_padding') }) 956 .margin({ top: $r('app.float.element_margin'), bottom: $r('app.float.content_padding') }) 957 } else { 958 Row() { 959 Column() { 960 Button($r('app.string.unified_authwidget_cancel'), { stateEffect: true }) 961 .margin({ left: $r('app.float.content_padding') }) 962 .width(Constants.ninetyPercentWidth) 963 .height($r('app.float.btn_height')) 964 .fontSize($r('sys.float.ohos_id_text_size_button1')) 965 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 966 .fontWeight(FontWeight.Medium) 967 .backgroundColor(Color.Transparent) 968 .onClick(() => { 969 this.handleCancel(); 970 }) 971 }.width(Constants.halfContainerWidth) 972 973 Divider() 974 .vertical(true) 975 .height($r('app.float.digital_password_mask_height')) 976 .color($r('sys.color.ohos_id_color_list_separator')) 977 .width($r('app.float.divider_width')) 978 Column() { 979 Button((AppStorage.get("wantParams") as WantParams)?.navigationButtonText as string) 980 .onClick(() => { 981 AuthUtils.getInstance().sendNotice('EVENT_AUTH_USER_NAVIGATION', [Constants.noticeTypeFace]); 982 (AppStorage.get("session") as UIExtensionContentSession)?.terminateSelf(); 983 }) 984 .margin({ right: $r('app.float.content_padding') }) 985 .width(Constants.ninetyPercentWidth) 986 .height($r('app.float.btn_height')) 987 .fontSize($r('sys.float.ohos_id_text_size_button1')) 988 .fontColor($r('sys.color.ohos_id_color_text_primary_activated')) 989 .fontWeight(FontWeight.Medium) 990 .backgroundColor(Color.Transparent) 991 }.width(Constants.halfContainerWidth) 992 } 993 .height($r('app.float.btn_height')) 994 .margin({ top: $r('app.float.element_margin'), bottom: $r('app.float.content_padding') }) 995 } 996 } 997 } 998 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 999 .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) 1000 .margin({ 1001 left: ($r('sys.float.ohos_id_dialog_margin_start')), 1002 right: ($r('sys.float.ohos_id_dialog_margin_end')), 1003 bottom: this.IS_LANDSCAPE ? '0' : ($r('sys.float.ohos_id_dialog_margin_bottom')) 1004 }) 1005 } 1006 } 1007 } 1008 } 1009 .margin(this.IS_LANDSCAPE ? '0' : { bottom: this.SYSTEM_NAVIGATION_BAR_HEIGHT }) 1010 .height(Constants.fullContainerHeight) 1011 .justifyContent(this.IS_LANDSCAPE ? FlexAlign.Center : FlexAlign.End) 1012 .backgroundColor(Color.Transparent) 1013 .id('faceAuth') 1014 } 1015} 1016