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