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