• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/**
2 * Copyright (c) 2022-2024 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { WidthPercent } from '../common/util/ConfigData';
17import HeadComponent from '../common/component/headComponent';
18import CmShowSysCaPresenter from '../presenter/CmShowSysCaPresenter';
19import CMShowUserCaPresenter from '../presenter/CmShowUserCaPresenter';
20import CmFaPresenter from '../presenter/CmFaPresenter';
21import { GlobalContext } from '../common/GlobalContext';
22import { CertAbstractVo } from '../model/CertManagerVo/CertAbstractVo';
23import ComponentConfig from '../common/component/ComponentConfig';
24import router from '@ohos.router';
25import { CustomContentDialog } from '@ohos.arkui.advanced.Dialog';
26import { NavEntryKey } from '../common/NavEntryKey';
27import { CaUserDetailParam } from './detail/CaUserDetailPage';
28import { SheetParam } from '../common/util/SheetParam';
29import {
30  DialogDateComponent,
31  DialogFingerPrintComponent,
32  DialogIssuerComponent,
33  DialogSubjectComponent
34} from './detail/CaSystemDetailPage';
35
36const COPIES_NUM: number = 12;
37
38@Component
39struct ComponentSystem {
40  private certAlias: string = '';
41  private subjectName: string = '';
42  private uri: string = '';
43  @Link setStatus: CmShowSysCaPresenter;
44  private sysCaScroller: Scroller = new Scroller();
45
46  onItemClicked?: () => void;
47
48  @State isHoverBackgroundColor: ResourceColor = '';
49  @Styles pressedStyles(): void {
50    .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
51  }
52  @Styles normalStyles(): void {
53    .backgroundColor(this.isHoverBackgroundColor)
54  }
55
56  systemDetailsDialog: CustomDialogController = new CustomDialogController({
57    alignment: DialogAlignment.Center,
58    builder: CustomContentDialog({
59      contentBuilder: () => {
60        this.systemDetailContent();
61      },
62      contentAreaPadding: { right: $r('app.float.wh_value_0') },
63      buttons: [{
64        value: $r('app.string.CustomDialogExample_Button_text'),
65        buttonStyle: ButtonStyleMode.TEXTUAL,
66        action: () => {
67          this.systemDetailsDialog?.close();
68        }
69      }]
70    })
71  })
72
73  @Builder
74  systemDetailContent(): void {
75    Column() {
76      Text($r('app.string.CustomDialogExample_firText'))
77        .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
78        .fontColor($r('sys.color.ohos_id_color_text_primary'))
79        .fontWeight(FontWeight.Medium)
80        .height($r('app.float.wh_value_56'))
81        .margin({
82          bottom: $r('app.float.wh_value_8'),
83          right: $r('app.float.wh_value_24')
84        })
85        .alignSelf(ItemAlign.Start)
86
87      Text(this.setStatus.certInfo.certAlias)
88        .fontSize($r('sys.float.ohos_id_text_size_body1'))
89        .fontColor($r('sys.color.ohos_id_color_text_primary'))
90        .fontWeight(FontWeight.Medium)
91        .margin({
92          bottom: $r('app.float.wh_value_24'),
93          right: $r('app.float.wh_value_24')
94        })
95        .alignSelf(ItemAlign.Start)
96
97      Scroll(this.sysCaScroller) {
98        List() {
99          ListItem() {
100            Text($r('app.string.CustomDialogExample_firListItem_text'))
101              .fontSize($r('sys.float.ohos_id_text_size_body1'))
102              .fontColor($r('sys.color.ohos_id_color_text_primary'))
103              .fontWeight(FontWeight.Medium)
104          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
105
106          ListItem() {
107            DialogSubjectComponent({ map: this.setStatus.certInfo.subjectNameMap });
108          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
109
110          ListItem() {
111            Text($r('app.string.CustomDialogExample_secListItem_text'))
112              .fontSize($r('sys.float.ohos_id_text_size_body1'))
113              .fontColor($r('sys.color.ohos_id_color_text_primary'))
114              .fontWeight(FontWeight.Medium)
115          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
116          .margin({
117            top: $r('app.float.wh_value_24')
118          })
119
120          ListItem() {
121            DialogIssuerComponent({ map: this.setStatus.certInfo.issuerNameMap });
122          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
123
124          ListItem() {
125            Text($r('app.string.CustomDialogExample_thdListItem_text'))
126              .fontSize($r('sys.float.ohos_id_text_size_body1'))
127              .fontColor($r('sys.color.ohos_id_color_text_primary'))
128              .fontWeight(FontWeight.Medium)
129          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
130          .margin({
131            top: $r('app.float.wh_value_24')
132          })
133
134          ListItem() {
135            DialogDateComponent({ map: this.setStatus.certInfo.dateMap });
136          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
137
138          ListItem() {
139            Text($r('app.string.CustomDialogExample_fouListItem_text'))
140              .fontSize($r('sys.float.ohos_id_text_size_body1'))
141              .fontColor($r('sys.color.ohos_id_color_text_primary'))
142              .fontWeight(FontWeight.Medium)
143          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
144          .margin({
145            top: $r('app.float.wh_value_24')
146          })
147
148          ListItem() {
149            DialogFingerPrintComponent({ fingerprintSha256: this.setStatus.certInfo.fingerprintSha256 });
150          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
151        }
152        .margin({ right: $r('app.float.wh_value_24') })
153        .scrollBar(BarState.Off)
154      }
155      .scrollable(ScrollDirection.Vertical)
156      .scrollBarWidth('3vp')
157      .height($r('app.float.CustomDialogExample_list_height_value'))
158    }
159    .padding({
160      left: $r('app.float.wh_value_24'),
161    })
162    .width(WidthPercent.WH_100_100)
163    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
164    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
165  }
166
167  build() {
168    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
169      Column() {
170        Text(this.certAlias)
171          .fontSize($r('sys.float.ohos_id_text_size_body1'))
172          .fontColor($r('sys.color.ohos_id_color_text_primary'))
173          .fontWeight(FontWeight.Medium)
174          .textAlign(TextAlign.Start)
175          .margin({ top: $r('app.float.wh_value_10') });
176        Text(this.subjectName)
177          .fontSize($r('sys.float.ohos_id_text_size_body2'))
178          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
179          .fontWeight(FontWeight.Regular)
180          .textAlign(TextAlign.Start)
181          .margin({ top: $r('app.float.wh_value_2'), bottom: $r('app.float.wh_value_11') });
182      }.alignItems(HorizontalAlign.Start);
183    }
184    .onHover((isHover?: boolean) => {
185      this.isHoverBackgroundColor = isHover ? $r('sys.color.ohos_id_color_hover') : ''
186    })
187    .backgroundColor(this.isHoverBackgroundColor)
188    .stateStyles({
189      pressed: this.pressedStyles,
190      normal: this.normalStyles
191    })
192    .padding({
193      left: $r('app.float.wh_value_8'),
194      right: $r('app.float.wh_value_8')
195    })
196    .borderRadius($r('app.float.wh_value_20'))
197    .onClick(() => {
198      this.setStatus.getSystemTrustedCertificate(this.uri, () => {
199        if (this.onItemClicked !== undefined) {
200          this.onItemClicked();
201        } else {
202          this.systemDetailsDialog.open();
203        }
204      });
205    })
206  }
207}
208
209@Component
210struct ComponentUser {
211  private certAlias: string = '';
212  private subjectName: string = '';
213  private indexNum: number = -1;
214  private uri: string = '';
215  @State statusText: Resource = $r('app.string.CustomDialogExampleUser_Status_false');
216  @Link setStatus: CMShowUserCaPresenter;
217  @State mUserCaPresenterDetail: CMShowUserCaPresenter = CMShowUserCaPresenter.getInstance();
218  private userCaScroller: Scroller = new Scroller();
219
220  onItemClicked?: () => void;
221
222  @State isHoverBackgroundColor: ResourceColor = '';
223  @Styles pressedStyles(): void {
224    .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
225  }
226  @Styles normalStyles(): void {
227    .backgroundColor(this.isHoverBackgroundColor)
228  }
229
230  rootCertificateDialog: CustomDialogController = new CustomDialogController({
231    alignment: DialogAlignment.Center,
232    cancel: () => {
233      this.setStatus.updateUserTrustedCertificateList();
234    },
235    builder: CustomContentDialog({
236      contentBuilder: () => {
237        this.rootCertificateContent();
238      },
239      contentAreaPadding: { right: $r('app.float.wh_value_0') },
240      buttons: [
241        {
242          value: $r('app.string.root_certificate_cancel'),
243          buttonStyle: ButtonStyleMode.TEXTUAL,
244          action: () => {
245            this.setStatus.updateUserTrustedCertificateList();
246          }
247        },
248        {
249          value: $r('app.string.root_certificate_continue'),
250          buttonStyle: ButtonStyleMode.TEXTUAL,
251          action: () => {
252            this.setStatus.setUserCertificateStatus(this.mUserCaPresenterDetail.certInfo.uri, true).then(result => {
253              if (result) {
254                this.setStatus.updateUserTrustedCertificateList();
255              }
256            });
257          }
258        }
259      ]
260    })
261  })
262
263  userDetailsDialog: CustomDialogController = new CustomDialogController({
264    alignment: DialogAlignment.Center,
265    cancel: () => {
266      this.setStatus.updateUserTrustedCertificateList();
267    },
268    builder: CustomContentDialog({
269      contentBuilder: () => {
270        this.userDetailContent(this.setStatus.certList[this.indexNum].status);
271      },
272      contentAreaPadding: { right: $r('app.float.wh_value_0') },
273      buttons: [
274        {
275          value: $r('app.string.CustomDialogExampleUser_Flex_firButton_text'),
276          buttonStyle: ButtonStyleMode.TEXTUAL,
277          action: () => {
278            this.setStatus.updateUserTrustedCertificateList();
279            this.userDetailsDialog?.close();
280          }
281        },
282        {
283          value: $r('app.string.CustomDialogExampleUser_Flex_secButton_text'),
284          buttonStyle: ButtonStyleMode.TEXTUAL,
285          action: () => {
286            this.onShowDeleteWarnDialog();
287          },
288          role: ButtonRole.ERROR
289        }
290      ]
291    })
292  })
293
294  deleteCertWarnDialog: CustomDialogController = new CustomDialogController({
295    cancel: () => {
296      this.setStatus.updateUserTrustedCertificateList();
297    },
298    builder: CustomContentDialog({
299      contentBuilder: () => {
300        this.deleteWarnContent();
301      },
302      contentAreaPadding: { right: $r('app.float.wh_value_0') },
303      buttons: [
304        {
305          value: $r('app.string.deleteAllCredCancel'),
306          buttonStyle: ButtonStyleMode.TEXTUAL,
307          action: () => {
308            this.deleteCertWarnDialog?.close();
309            this.setStatus.updateUserTrustedCertificateList();
310          }
311        },
312        {
313          value: $r('app.string.deleteAllCredDelete'),
314          buttonStyle: ButtonStyleMode.TEXTUAL,
315          action: () => {
316            this.setStatus.deleteUserCertificate(this.mUserCaPresenterDetail.certInfo.uri, () => {
317              this.setStatus.updateUserTrustedCertificateList();
318              this.deleteCertWarnDialog?.close();
319            })
320          },
321          role: ButtonRole.ERROR
322        }
323      ]
324    })
325  })
326
327  @Builder
328  rootCertificateContent(): void {
329    Column() {
330      Text($r('app.string.root_certificate'))
331        .height($r('app.float.wh_value_56'))
332        .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
333        .fontColor($r('sys.color.ohos_id_color_text_primary'))
334        .fontWeight(FontWeight.Medium)
335        .margin({
336          left: $r('app.float.wh_value_24'),
337          right: $r('app.float.wh_value_24')
338        })
339        .alignSelf(ItemAlign.Start)
340
341      Text($r('app.string.root_certificate_message'))
342        .fontSize($r('sys.float.ohos_id_text_size_body1'))
343        .fontWeight(FontWeight.Regular)
344        .fontColor($r('sys.color.ohos_id_color_primary'))
345        .margin({
346          left: $r('app.float.wh_value_24'),
347          right: $r('app.float.wh_value_24')
348        })
349        .alignSelf(ItemAlign.Start)
350    }
351    .width(WidthPercent.WH_100_100)
352    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
353    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
354  }
355
356  @Builder
357  deleteWarnContent(): void {
358    Column() {
359      Text($r('app.string.CustomDialogExampleUser_warning_Button_title_text'))
360        .height($r('app.float.wh_value_56'))
361        .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
362        .fontColor($r('sys.color.ohos_id_color_text_primary'))
363        .fontWeight(FontWeight.Medium)
364        .margin({
365          left: $r('app.float.wh_value_24'),
366          right: $r('app.float.wh_value_24')
367        })
368        .alignSelf(ItemAlign.Start)
369
370      Text($r('app.string.CustomDialogExampleUser_warning_Button_message_text'))
371        .fontSize($r('sys.float.ohos_id_text_size_body1'))
372        .fontWeight(FontWeight.Regular)
373        .fontColor($r('sys.color.ohos_id_color_primary'))
374        .margin({
375          left: $r('app.float.wh_value_24'),
376          right: $r('app.float.wh_value_24')
377        })
378        .alignSelf(ItemAlign.Start)
379    }
380    .width(WidthPercent.WH_100_100)
381    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
382    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
383  }
384
385  @Builder
386  userDetailContent($$: boolean): void {
387    Column() {
388      Text($r('app.string.CustomDialogExample_firText'))
389        .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
390        .fontColor($r('sys.color.ohos_id_color_text_primary'))
391        .fontWeight(FontWeight.Medium)
392        .height($r('app.float.wh_value_56'))
393        .margin({
394          bottom: $r('app.float.wh_value_8'),
395          right: $r('app.float.wh_value_24')
396        })
397        .alignSelf(ItemAlign.Start)
398
399      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
400        Column() {
401          Text(this.mUserCaPresenterDetail.certInfo.certAlias)
402            .fontSize($r('sys.float.ohos_id_text_size_body1'))
403            .fontColor($r('sys.color.ohos_id_color_text_primary'))
404            .fontWeight(FontWeight.Medium)
405        }.alignItems(HorizontalAlign.Start);
406
407        Toggle({ type: ToggleType.Switch, isOn: $$ })
408          .margin({
409            left: $r('app.float.wh_value_16'),
410            right: $r('app.float.wh_value_24')
411          })
412          .flexShrink(0)
413          .width($r('app.float.CustomDialogExampleUser_Flex_Toggle_width_value'))
414          .height($r('app.float.CustomDialogExampleUser_Flex_Toggle_height_value'))
415          .selectedColor($r('app.color.CustomDialogExampleUser_Flex_Toggle_selectedColor_007DFF'))
416          .onChange((isOn: boolean) => {
417            if (isOn) {
418              this.onShowRootCertificateDialog();
419            } else {
420              this.setStatus.setUserCertificateStatus(this.mUserCaPresenterDetail.certInfo.uri, false);
421            }
422          });
423      }
424
425      Scroll(this.userCaScroller) {
426        List() {
427          ListItem() {
428            Text($r('app.string.CustomDialogExample_firListItem_text'))
429              .fontSize($r('sys.float.ohos_id_text_size_body1'))
430              .fontColor($r('sys.color.ohos_id_color_text_primary'))
431              .fontWeight(FontWeight.Medium)
432              .margin({
433                top: $r('app.float.wh_value_24')
434              })
435          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
436
437          ListItem() {
438            DialogSubjectComponent({ map: this.mUserCaPresenterDetail.certInfo.subjectNameMap });
439          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
440
441          ListItem() {
442            Text($r('app.string.CustomDialogExample_secListItem_text'))
443              .fontSize($r('sys.float.ohos_id_text_size_body1'))
444              .fontColor($r('sys.color.ohos_id_color_text_primary'))
445              .fontWeight(FontWeight.Medium)
446              .margin({
447                top: $r('app.float.wh_value_24')
448              })
449          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
450
451          ListItem() {
452            DialogIssuerComponent({ map: this.mUserCaPresenterDetail.certInfo.issuerNameMap });
453          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
454
455          ListItem() {
456            Text($r('app.string.CustomDialogExample_thdListItem_text'))
457              .fontSize($r('sys.float.ohos_id_text_size_body1'))
458              .fontColor($r('sys.color.ohos_id_color_text_primary'))
459              .fontWeight(FontWeight.Medium)
460              .margin({
461                top: $r('app.float.wh_value_24')
462              })
463          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
464
465          ListItem() {
466            DialogDateComponent({ map: this.mUserCaPresenterDetail.certInfo.dateMap });
467          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
468
469          ListItem() {
470            Text($r('app.string.CustomDialogExample_fouListItem_text'))
471              .fontSize($r('sys.float.ohos_id_text_size_body1'))
472              .fontColor($r('sys.color.ohos_id_color_text_primary'))
473              .fontWeight(FontWeight.Medium)
474              .margin({
475                top: $r('app.float.wh_value_24')
476              })
477          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
478
479          ListItem() {
480            DialogFingerPrintComponent({
481              fingerprintSha256: this.mUserCaPresenterDetail.certInfo.fingerprintSha256
482            });
483          }.width(ComponentConfig.WH_100_100).align(Alignment.Start)
484        }
485        .margin({
486          right: $r('app.float.wh_value_24')
487        })
488        .scrollBar(BarState.Off)
489      }
490      .height($r('app.float.CustomDialogExample_list_height_value'))
491      .scrollable(ScrollDirection.Vertical)
492      .scrollBarWidth('3vp')
493    }
494    .padding({
495      left: $r('app.float.wh_value_24')
496    })
497    .width(WidthPercent.WH_100_100)
498    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
499    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
500  }
501
502  onShowRootCertificateDialog() {
503    this.userDetailsDialog?.close();
504    this.rootCertificateDialog.open();
505  }
506
507  onShowDeleteWarnDialog() {
508    this.deleteCertWarnDialog.open();
509    this.userDetailsDialog?.close();
510  }
511
512  aboutToAppear() {
513    console.info('in ComponentUser aboutToAppear');
514    if (this.setStatus.certList[this.indexNum].status == true) {
515      this.statusText = $r('app.string.CustomDialogExampleUser_Status_true');
516    } else {
517      this.statusText = $r('app.string.CustomDialogExampleUser_Status_false');
518    }
519  }
520
521  build() {
522    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
523      Column() {
524        Text(this.certAlias)
525          .fontSize($r('sys.float.ohos_id_text_size_body1'))
526          .fontColor($r('sys.color.ohos_id_color_text_primary'))
527          .fontWeight(FontWeight.Medium)
528          .textAlign(TextAlign.Start)
529          .margin({ top: $r('app.float.wh_value_10') })
530        Text(this.subjectName)
531          .fontSize($r('sys.float.ohos_id_text_size_body2'))
532          .fontColor($r('sys.color.ohos_id_color_text_primary'))
533          .fontWeight(FontWeight.Regular)
534          .textAlign(TextAlign.Start)
535          .margin({ top: $r('app.float.wh_value_2'), bottom: $r('app.float.wh_value_11') });
536      }
537      .alignItems(HorizontalAlign.Start);
538      Row() {
539        Text(this.statusText)
540          .fontSize($r('sys.float.ohos_id_text_size_body2'))
541          .fontColor($r('sys.color.ohos_id_color_text_secondary'))
542          .textAlign(TextAlign.End)
543          .margin({
544            right: $r('app.float.componentUser_thdText_margin_value')
545          })
546        Image($r('app.media.ic_settings_arrow'))
547          .width($r('app.float.componentUser_image_width_value'))
548          .height($r('app.float.componentUser_image_height_value'))
549          .fillColor($r('sys.color.ohos_id_color_primary'))
550          .opacity($r('app.float.componentUser_image_opacity_value'));
551      }
552      .flexShrink(0)
553      .margin($r('app.float.wh_value_12'))
554    }
555    .onHover((isHover?: boolean) => {
556      this.isHoverBackgroundColor = isHover ? $r('sys.color.ohos_id_color_hover') : ''
557    })
558    .backgroundColor(this.isHoverBackgroundColor)
559    .stateStyles({
560      pressed: this.pressedStyles,
561      normal: this.normalStyles
562    })
563    .padding({
564      left: $r('app.float.wh_value_8'),
565      right: $r('app.float.wh_value_8')
566    })
567    .borderRadius($r('app.float.wh_value_20'))
568    .onClick(() => {
569      this.mUserCaPresenterDetail.getUserTrustedCertificate(this.uri, () => {
570        if (this.onItemClicked !== undefined) {
571          this.onItemClicked();
572        } else {
573          this.userDetailsDialog.open();
574        }
575      });
576    });
577  }
578}
579
580@Entry
581@Component
582export struct TrustedEvidence {
583  @State mShowSysCaPresenter: CmShowSysCaPresenter = CmShowSysCaPresenter.getInstance();
584  @State mShowUserCaPresenter: CMShowUserCaPresenter = CMShowUserCaPresenter.getInstance();
585  @State mFaPresenter: CmFaPresenter = CmFaPresenter.getInstance();
586  @State currentIndex: number = 0;
587  @State fontColor: Resource = $r('app.color.TrustedEvidence_TabBuilder_fontColor_182431');
588  @State selectedFontColor: Resource = $r('app.color.font_color_007DFF');
589  private controller: TabsController = new TabsController();
590  private sysCaScroller: Scroller = new Scroller();
591  private userCaScroller: Scroller = new Scroller();
592  @State animationDurationNum: number = 400;
593
594  isStartBySheetFirst: boolean = false;
595  isStartBySheet: boolean = false;
596  selected?: (path: string, param?: Object) => void;
597  @Prop sheetParam: SheetParam;
598  @State headRectHeight: number = 64;
599  @State headRectHeightReal: number = 0;
600  @State private sysScrollerHeight: number = 0;
601  @State private userScrollerHeight: number = 0;
602
603  @Builder
604  TabBuilder(index: number) {
605    Column() {
606      Text(index == 0 ? $r('app.string.system') : $r('app.string.user'))
607        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
608        .fontSize($r('app.float.TrustedEvidence_TabBuilder_Text_fontSize_value'))
609        .fontWeight(this.currentIndex === index ? FontWeight.Medium : FontWeight.Regular)
610        .alignSelf(ItemAlign.Center)
611        .margin({
612          top: $r('app.float.TrustedEvidence_TabBuilder_Text_padding_top_value')
613        })
614      if (this.currentIndex === index) {
615        Divider()
616          .width($r('app.float.TrustedEvidence_TabBuilder_Divider_width_value'))
617          .margin({ top: $r('app.float.TrustedEvidence_TabBuilder_Divider_padding_top_value') })
618          .color(this.selectedFontColor)
619          .alignSelf(ItemAlign.Center)
620      }
621    }
622    .width(WidthPercent.WH_100_100)
623  }
624
625  aboutToAppear() {
626    this.mShowSysCaPresenter.updateSystemTrustedCertificateList();
627    this.mShowUserCaPresenter.updateUserTrustedCertificateList();
628  }
629
630  onPageShow() {
631    let uri = GlobalContext.getContext().getAbilityWant().uri;
632    GlobalContext.getContext().clearAbilityWantUri();
633
634    if (uri === 'certInstall') {
635      router.pushUrl({
636        url: 'pages/certInstallFromStorage'
637      })
638    } else if (uri === 'requestAuthorize') {
639      this.mFaPresenter.startRequestAuth(GlobalContext.getContext().getAbilityWant().parameters?.appUid as string);
640    } else {
641      console.error('The want type is not supported');
642    }
643  }
644
645  build() {
646    Column() {
647      GridRow({ columns: COPIES_NUM, gutter: vp2px(1) === 2 ? $r('app.float.wh_value_12') : $r('app.float.wh_value_0') }) {
648        GridCol({ span: COPIES_NUM }) {
649          Row() {
650            Stack({ alignContent: Alignment.Top }) {
651              Column() {
652                HeadComponent({ headName: $r('app.string.CA_cert'), isStartBySheet: this.isStartBySheet,
653                  icBackIsVisibility: !this.isStartBySheetFirst,
654                  onBackClicked: () => {
655                    this.selected?.(NavEntryKey.POP);
656                  }})
657                  .margin({
658                    left: $r('app.float.wh_value_12'),
659                    top: this.isStartBySheet ? 8 : 0
660                  })
661              }.onAreaChange((oldArea, newArea) => {
662                this.headRectHeight = newArea.height as number;
663                this.headRectHeightReal = newArea.height as number;
664              }).zIndex(1)
665
666              Column() {
667                Tabs({ barPosition: BarPosition.Start, index: 0, controller: this.controller }) {
668                  TabContent() {
669                    Stack({ alignContent: Alignment.TopEnd }) {
670                      Scroll(this.sysCaScroller) {
671                        List() {
672                          ForEach(this.mShowSysCaPresenter.certList, (item: CertAbstractVo) => {
673                            ListItem() {
674                              ComponentSystem({
675                                certAlias: item.certAlias,
676                                subjectName: item.subjectNameCN,
677                                uri: item.uri,
678                                setStatus: $mShowSysCaPresenter,
679                                onItemClicked: this.isStartBySheet ? () => {
680                                  this.selected?.(NavEntryKey.CA_SYSTEM_DETAIL_ENTRY);
681                                } : undefined
682                              })
683                            }
684                          }, (item: CertAbstractVo) => JSON.stringify(item))
685                        }
686                        .borderRadius($r('sys.float.padding_level10'))
687                        .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
688                        .scrollBar(BarState.Off)
689                        .padding({
690                          right: $r('app.float.wh_value_4'),
691                          left: $r('app.float.wh_value_4'),
692                          top: $r('app.float.wh_value_4'),
693                          bottom: $r('app.float.wh_value_4')
694                        })
695                        .divider({
696                          strokeWidth: $r('app.float.sys_list_divider_strokeWidth_value'),
697                          color: $r('sys.color.ohos_id_color_list_separator'),
698                          startMargin: $r('app.float.wh_value_8'),
699                          endMargin: $r('app.float.wh_value_8')
700                        })
701                        .visibility(this.mShowSysCaPresenter.certList.length > 0
702                          ? Visibility.Visible : Visibility.None)
703                      }
704                      .width(WidthPercent.WH_100_100)
705                      .height(this.isStartBySheet ? WidthPercent.WH_AUTO : WidthPercent.WH_100_100)
706                      .align(Alignment.Top)
707                      .edgeEffect(EdgeEffect.Spring)
708                      .scrollable(ScrollDirection.Vertical)
709                      .scrollBar(BarState.Off)
710                      .padding({
711                        left: $r('app.float.wh_value_16'),
712                        right: $r('app.float.wh_value_16'),
713                        bottom: this.isStartBySheet ? $r('app.float.wh_value_80') : $r('app.float.wh_value_24')
714                      })
715                      .constraintSize({
716                        minHeight: this.getScrollMinHeight()
717                      }).onAreaChange((oldArea, newArea) => {
718                        this.sysScrollerHeight = newArea.height as number;
719                      })
720
721                      Column() {
722                        ScrollBar({
723                          scroller: this.sysCaScroller,
724                          direction: ScrollBarDirection.Vertical,
725                          state: BarState.Auto
726                        }).margin({
727                          bottom: this.isStartBySheet ? $r('app.float.wh_value_80') : $r('app.float.wh_value_24')
728                        })
729                      }.height(this.sysScrollerHeight)
730                    }
731                  }
732                  .tabBar(this.TabBuilder(0))
733
734                  TabContent() {
735                    Stack({ alignContent: Alignment.TopEnd }) {
736                      Scroll(this.userCaScroller) {
737                        List() {
738                          ForEach(this.mShowUserCaPresenter.certList, (item: CertAbstractVo, index) => {
739                            ListItem() {
740                              ComponentUser({
741                                certAlias: item.certAlias,
742                                subjectName: item.subjectNameCN,
743                                uri: item.uri,
744                                setStatus: $mShowUserCaPresenter,
745                                indexNum: index,
746                                onItemClicked: this.isStartBySheet ? () => {
747                                  this.selected?.(NavEntryKey.CA_USER_DETAIL_ENTRY,
748                                    new CaUserDetailParam(this.mShowUserCaPresenter));
749                                } : undefined
750                              })
751                            }
752                          }, (item: CertAbstractVo) => JSON.stringify(item))
753                        }
754                        .borderRadius($r('sys.float.padding_level10'))
755                        .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
756                        .divider({
757                          strokeWidth: $r('app.float.sys_list_divider_strokeWidth_value'),
758                          color: $r('sys.color.ohos_id_color_list_separator'),
759                          startMargin: $r('app.float.wh_value_8'),
760                          endMargin: $r('app.float.wh_value_8')
761                        })
762                        .scrollBar(BarState.Off)
763                        .padding({
764                          left: $r('app.float.wh_value_4'),
765                          right: $r('app.float.wh_value_4'),
766                          top: $r('app.float.wh_value_4'),
767                          bottom: $r('app.float.wh_value_4')
768                        })
769                        .visibility(this.mShowUserCaPresenter.certList.length > 0
770                          ? Visibility.Visible : Visibility.None)
771                      }
772                      .position({ y: $r('app.float.wh_value_0') })
773                      .width(WidthPercent.WH_100_100)
774                      .height(this.isStartBySheet ? WidthPercent.WH_AUTO : WidthPercent.WH_100_100)
775                      .align(Alignment.Top)
776                      .edgeEffect(EdgeEffect.Spring)
777                      .scrollable(ScrollDirection.Vertical)
778                      .scrollBar(BarState.Off)
779                      .padding({
780                        left: $r('app.float.wh_value_16'),
781                        right: $r('app.float.wh_value_16'),
782                        bottom: this.isStartBySheet ? $r('app.float.wh_value_80') : $r('app.float.wh_value_24')
783                      })
784                      .constraintSize({
785                        minHeight: this.getScrollMinHeight()
786                      }).onAreaChange((oldArea, newArea) => {
787                        this.userScrollerHeight = newArea.height as number;
788                      })
789
790                      Column() {
791                        ScrollBar({
792                          scroller: this.userCaScroller,
793                          direction: ScrollBarDirection.Vertical,
794                          state: BarState.Auto
795                        }).margin({
796                          bottom: this.isStartBySheet ? $r('app.float.wh_value_80') : $r('app.float.wh_value_24')
797                        })
798                      }.height(this.userScrollerHeight)
799                    }
800                  }
801                  .tabBar(this.TabBuilder(1))
802                }
803                .vertical(false)
804                .scrollable(true)
805                .barMode(BarMode.Fixed)
806                .barWidth($r('app.float.tabs_barWidth_value'))
807                .barHeight($r('app.float.tabs_barHeight_value'))
808                .animationDuration(this.animationDurationNum)
809                .width(WidthPercent.WH_100_100)
810                .height(this.isStartBySheet ? WidthPercent.WH_AUTO : WidthPercent.WH_100_100)
811                .onChange((index: number) => {
812                  this.currentIndex = index;
813                })
814              }
815              .height(this.isStartBySheet ? WidthPercent.WH_AUTO : WidthPercent.WH_100_100)
816              .width(WidthPercent.WH_100_100)
817              .padding({
818                top: this.headRectHeight
819              })
820            }
821            .width(WidthPercent.WH_100_100)
822            .height(this.isStartBySheet ? WidthPercent.WH_AUTO : WidthPercent.WH_100_100)
823          }
824          .width(WidthPercent.WH_100_100)
825          .height(this.isStartBySheet ? WidthPercent.WH_AUTO : WidthPercent.WH_100_100);
826        }
827      }
828      .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
829      .width(WidthPercent.WH_100_100)
830      .height(this.isStartBySheet ? WidthPercent.WH_AUTO : WidthPercent.WH_100_100);
831    }
832  }
833
834  getScrollMinHeight() {
835    if (this.sheetParam === undefined || this.headRectHeightReal === 0 ||
836      this.sheetParam.sheetMinHeight < this.headRectHeightReal) {
837      return 0;
838    }
839    return this.sheetParam.sheetMinHeight - this.headRectHeightReal - 56;
840  }
841}