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 { SubEntryComponent } from '../common/component/subEntryComponent'; 19import CmFaPresenter from '../presenter/CmFaPresenter'; 20import { GlobalContext } from '../common/GlobalContext'; 21import router from '@ohos.router'; 22import promptAction from '@ohos.promptAction'; 23import { CustomContentDialog } from '@ohos.arkui.advanced.Dialog'; 24import { NavEntryKey } from '../common/NavEntryKey'; 25 26const DISPLAY_DURATION: number = 2000; 27const COPIES_NUM: number = 12; 28 29class CertListItem { 30 public targetPage: string = ''; 31 public title: Resource = $r('app.string.CA_cert'); 32}; 33 34@Entry 35@Component 36export struct CertificateComponent { 37 @State columnMargin: string = '12vp'; 38 @State mFaPresenter: CmFaPresenter = CmFaPresenter.getInstance(); 39 private listItems: Array<CertListItem> = [ 40 { targetPage: 'pages/trustedCa', title: $r('app.string.CA_cert') }, 41 { targetPage: 'pages/cerEvidenceFa', title: $r('app.string.userEvidence') } 42 ]; 43 @Styles normalStyle() { 44 .backgroundColor($r('sys.color.ohos_id_color_card_bg')) 45 }; 46 @Styles pressedStyle() { 47 .backgroundColor($r('sys.color.ohos_id_color_click_effect')) 48 }; 49 50 isStartBySheet: boolean = false; 51 selected?: (path: string) => void; 52 53 build() { 54 Column() { 55 GridRow({ 56 columns: COPIES_NUM, 57 gutter: vp2px(1) === 2 ? $r('app.float.wh_value_12') : $r('app.float.wh_value_0') 58 }) { 59 GridCol({ span: COPIES_NUM }) { 60 Column({ space: this.columnMargin }) { 61 HeadComponent({ headName: $r('app.string.certificateTab'), icBackIsVisibility: !this.isStartBySheet }) 62 .margin({ 63 top: this.isStartBySheet ? 8 : 0, 64 left: 12, 65 right: 12 66 }) 67 Scroll() { 68 Column({ space: this.columnMargin }) { 69 List() { 70 ForEach(this.listItems, (item: CertListItem) => { 71 ListItem() { 72 SubEntryComponent({ targetPage: item.targetPage, title: item.title, 73 onItemClicked: targetRouter => { 74 if (this.isStartBySheet) { 75 if (targetRouter === 'pages/trustedCa') { 76 this.selected?.(NavEntryKey.CA_CERTIFICATE_ENTRY); 77 } else { 78 this.selected?.(NavEntryKey.CREDENTIAL_LIST_ENTRY); 79 } 80 } else { 81 router.pushUrl({ 82 url: targetRouter 83 }); 84 } 85 } }) 86 } 87 .stateStyles({ 88 normal: this.normalStyle, 89 pressed: this.pressedStyle 90 }); 91 }, (item: CertListItem) => JSON.stringify(item)) 92 } 93 .padding($r('app.float.wh_value_4')) 94 .divider({ 95 strokeWidth: $r('app.float.sys_list_divider_strokeWidth_value'), 96 color: $r('sys.color.ohos_id_color_list_separator'), 97 startMargin: $r('app.float.wh_value_8'), 98 endMargin: $r('app.float.wh_value_8') 99 }) 100 .borderRadius($r('app.float.user_list_divider_borderRadius_value')) 101 .backgroundColor($r('sys.color.ohos_id_color_list_card_bg')) 102 103 CertInstallComponent({ mFaPresenter: $mFaPresenter, onItemClicked: () => { 104 if (this.isStartBySheet) { 105 this.selected?.(NavEntryKey.INSTALL_ENTRY); 106 } else { 107 router.pushUrl({ 108 url: 'pages/certInstallFromStorage' 109 }, router.RouterMode.Standard) 110 } 111 } }) 112 113 DeleteAll({ mFaPresenter: $mFaPresenter }) 114 } 115 .width(WidthPercent.WH_100_100) 116 } 117 .align(Alignment.Top) 118 .scrollable(ScrollDirection.Vertical) 119 .scrollBar(BarState.Auto) 120 .width(WidthPercent.WH_100_100) 121 .edgeEffect(EdgeEffect.Spring) 122 .layoutWeight(1) 123 .padding({ 124 left: 16, 125 right: 16 126 }) 127 } 128 .backgroundColor($r('sys.color.ohos_id_color_sub_background')) 129 .width(WidthPercent.WH_100_100) 130 .height(WidthPercent.WH_100_100) 131 } 132 } 133 .margin(vp2px(1) === 2 ? $r('app.float.item_common_horizontal_margin') : $r('app.float.wh_value_0')) 134 .width(WidthPercent.WH_100_100) 135 .height(WidthPercent.WH_100_100); 136 } 137 .backgroundColor($r('sys.color.ohos_id_color_sub_background')) 138 .width(WidthPercent.WH_100_100) 139 .height(WidthPercent.WH_100_100); 140 } 141 142 onPageShow() { 143 let uri = GlobalContext.getContext().getAbilityWant().uri; 144 GlobalContext.getContext().clearAbilityWantUri(); 145 146 if (uri === 'certInstall') { 147 router.pushUrl({ 148 url: 'pages/certInstallFromStorage' 149 }) 150 } else if (uri === 'requestAuthorize') { 151 this.mFaPresenter.startRequestAuth(GlobalContext.getContext().getAbilityWant().parameters?.appUid as string); 152 } else { 153 console.error('The want type is not supported'); 154 } 155 } 156} 157 158@Component 159struct DeleteAll { 160 @Link mFaPresenter: CmFaPresenter; 161 @Styles normalStyle() { 162 .backgroundColor($r('sys.color.ohos_id_color_card_bg')) 163 .borderRadius($r('app.float.user_list_divider_borderRadius_value')) 164 }; 165 @Styles pressedStyle() { 166 .backgroundColor($r('sys.color.ohos_id_color_click_effect')) 167 .borderRadius($r('app.float.user_list_divider_borderRadius_value')) 168 }; 169 170 deleteWarnDialog: CustomDialogController = new CustomDialogController({ 171 builder: CustomContentDialog({ 172 contentBuilder: () => { 173 this.deleteWarnContent(); 174 }, 175 contentAreaPadding: {right: $r('app.float.wh_value_0')}, 176 buttons: [ 177 { 178 value: $r('app.string.deleteAllCredCancel'), 179 buttonStyle: ButtonStyleMode.TEXTUAL, 180 action: () => { 181 this.deleteWarnDialog?.close(); 182 } 183 }, 184 { 185 value: $r('app.string.deleteAllCredDelete'), 186 buttonStyle: ButtonStyleMode.TEXTUAL, 187 action: () => { 188 this.mFaPresenter.uninstallAllCert(); 189 this.deleteWarnDialog?.close(); 190 promptAction.showToast({ 191 message: $r('app.string.delete_success'), 192 duration: DISPLAY_DURATION, 193 }) 194 }, 195 role: ButtonRole.ERROR 196 } 197 ] 198 }), 199 }) 200 201 @Builder 202 deleteWarnContent(): void { 203 Column() { 204 Text($r('app.string.deleteAllCredDialogTitle')) 205 .height($r('app.float.wh_value_56')) 206 .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle')) 207 .fontColor($r('sys.color.ohos_id_color_text_primary')) 208 .fontWeight(FontWeight.Medium) 209 .margin({ 210 left: $r('app.float.wh_value_24'), 211 right: $r('app.float.wh_value_24') 212 }) 213 .alignSelf(ItemAlign.Start) 214 215 Text($r('app.string.deleteAllCredDialogMessage')) 216 .fontSize($r('sys.float.ohos_id_text_size_body1')) 217 .fontWeight(FontWeight.Regular) 218 .fontColor($r('sys.color.ohos_id_color_text_primary')) 219 .margin({ 220 top: $r('app.float.wh_value_16'), 221 left: $r('app.float.wh_value_24'), 222 right: $r('app.float.wh_value_24') 223 }) 224 .alignSelf(ItemAlign.Start) 225 } 226 .width(WidthPercent.WH_100_100) 227 .borderRadius($r('app.float.user_list_divider_borderRadius_value')) 228 } 229 230 build() { 231 Row() { 232 Text($r('app.string.deleteAllCred')) 233 .fontSize($r('app.float.font_16')) 234 .lineHeight($r('app.float.wh_value_22')) 235 .fontWeight(FontWeight.Medium) 236 .fontColor($r('sys.color.ohos_id_color_text_hyperlink')) 237 .padding({ left: $r('app.float.distance_8') }) 238 .stateStyles({ 239 normal: this.normalStyle, 240 pressed: this.pressedStyle 241 }) 242 .height(WidthPercent.WH_100_100) 243 .borderRadius($r('app.float.radius_20')) 244 .width(WidthPercent.WH_100_100) 245 .textAlign(TextAlign.Start); 246 } 247 .padding($r('app.float.distance_4')) 248 .height($r('app.float.wh_value_56')) 249 .width(WidthPercent.WH_100_100) 250 .borderRadius($r('app.float.radius_24')) 251 .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary')) 252 .onClick(() => { 253 this.deleteWarnDialog.open(); 254 }) 255 } 256} 257 258@Component 259export struct CertInstallComponent { 260 @Link mFaPresenter: CmFaPresenter; 261 @Styles normalStyle() { 262 .backgroundColor($r('sys.color.ohos_id_color_card_bg')) 263 .borderRadius($r('app.float.user_list_divider_borderRadius_value')) 264 }; 265 @Styles pressedStyle() { 266 .backgroundColor($r('sys.color.ohos_id_color_click_effect')) 267 .borderRadius($r('app.float.user_list_divider_borderRadius_value')) 268 }; 269 270 onItemClicked?: () => void; 271 272 build() { 273 Column() { 274 Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { 275 Row() { 276 Text($r('app.string.installInStorageDevice')) 277 .fontSize($r('app.float.font_16')) 278 .lineHeight($r('app.float.wh_value_22')) 279 .fontColor($r('sys.color.ohos_id_color_text_primary')) 280 .fontWeight(FontWeight.Medium) 281 .margin({ left: $r('app.float.wh_value_8') }); 282 } 283 284 Image($r('app.media.ic_settings_arrow')) 285 .width($r('app.float.wh_value_12')) 286 .height($r('app.float.wh_value_24')) 287 .fillColor($r('sys.color.ohos_id_color_primary')) 288 .opacity($r('app.float.opacity_0_2')) 289 .margin({ right: $r('app.float.wh_value_8') }); 290 } 291 .borderRadius($r('app.float.radius_20')) 292 .height(WidthPercent.WH_100_100) 293 .width(WidthPercent.WH_100_100) 294 .stateStyles({ 295 normal: this.normalStyle, 296 pressed: this.pressedStyle 297 }) 298 } 299 .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary')) 300 .padding($r('app.float.distance_4')) 301 .height($r('app.float.wh_value_56')) 302 .borderRadius($r('app.float.radius_24')) 303 .onClick(() => { 304 this.onItemClicked?.(); 305 }); 306 } 307} 308