improve cred ux code

Signed-off-by: huyiqi <huyiqi3@huawei.com>

CertManager/src/main/ets/@ohos.security.certManager.d.ts

@@ -71,8 +71,8 @@ declare namespace CertManagerFunc {
     function getAllPublicCertificates(callback: AsyncCallback<CMResult>) : void;
     function getAllPublicCertificates() : Promise<CMResult>;
 
-    function getPrivateCertificateList(callback: AsyncCallback<CMResult>) : void;
+    function getAllAppPrivateCertificates(callback: AsyncCallback<CMResult>) : void;
-    function getPrivateCertificateList() : Promise<CMResult>;
+    function getAllAppPrivateCertificates() : Promise<CMResult>;
 
     function getPublicCertificate(keyUri: string, callback: AsyncCallback<CMResult>) : void;
     function getPublicCertificate(keyUri: string, ) : Promise<CMResult>;

CertManager/src/main/ets/Application/AbilityStage.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2024-2024 Huawei Device Co., Ltd.
+ * Copyright (c) 2022-2024 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -17,6 +17,6 @@ import AbilityStage from '@ohos.app.ability.AbilityStage';
 
 export default class MyAbilityStage extends AbilityStage {
   onCreate(): void {
-    console.log('[Demo] MyAbilityStage onCreate');
+    console.log('[CertManager] MyAbilityStage onCreate');
   }
 }

CertManager/src/main/ets/MainAbility/MainAbility.ts

@@ -20,7 +20,7 @@ import { GlobalContext, PwdStore } from '../common/GlobalContext';
 
 export default class MainAbility extends Ability {
   onCreate(want: Want, launchParam): void {
-    console.log('[Demo] MainAbility onCreate');
+    console.log('[CertManager] MainAbility onCreate');
     let pwdStore = new PwdStore();
     GlobalContext.getContext().setCmContext(this.context);
     GlobalContext.getContext().setPwdStore(pwdStore);
@@ -29,12 +29,12 @@ export default class MainAbility extends Ability {
   }
 
   onDestroy(): void {
-    console.log('[Demo] MainAbility onDestroy');
+    console.log('[CertManager] MainAbility onDestroy');
   }
 
   onWindowStageCreate(windowStage: Window.WindowStage): void {
     // Main window is created, set main page for this ability
-    console.log('[Demo] MainAbility onWindowStageCreate');
+    console.log('[CertManager] MainAbility onWindowStageCreate');
     windowStage.loadContent('pages/certManagerFa', (err, data) => {
       if (err.code) {
         console.error('onWindowStageCreate failed, cause:' + JSON.stringify(err));
@@ -45,21 +45,21 @@ export default class MainAbility extends Ability {
 
   onWindowStageDestroy(): void {
     // Main window is destroyed, release UI related resources
-    console.log('[Demo] MainAbility onWindowStageDestroy');
+    console.log('[CertManager] MainAbility onWindowStageDestroy');
   }
 
   onForeground(): void {
     // Ability has brought to foreground
-    console.log('[Demo] MainAbility onForeground');
+    console.log('[CertManager] MainAbility onForeground');
   }
 
   onBackground(): void {
     // Ability has back to background
-    console.log('[Demo] MainAbility onBackground');
+    console.log('[CertManager] MainAbility onBackground');
   }
 
   onNewWant(want: Want): void {
-    console.log('[Demo] MainAbility onNewWant');
+    console.log('[CertManager] MainAbility onNewWant');
     GlobalContext.getContext().setAbilityWant(want);
   }
 };

CertManager/src/main/ets/MainAbility/MainExtensionAbility.ts

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import hilog from '@ohos.hilog';
 import Want from '@ohos.app.ability.Want';
 import UIExtensionContentSession from '@ohos.app.ability.UIExtensionContentSession';
 import { GlobalContext, PwdStore } from '../common/GlobalContext';
@@ -21,15 +20,15 @@ import UIExtensionAbility from '@ohos.app.ability.UIExtensionAbility';
 
 export default class MainExtensionAbility extends UIExtensionAbility {
   onCreate(): void {
-    hilog.info(0x0000, 'testTag', '%{public}s', 'MainExtensionAbility onCreate');
+    console.log('[CertManager] MainExtensionAbility onCreate');
   }
 
   onDestroy(): void {
-    hilog.info(0x0000, 'testTag', '%{public}s', 'UIExtensionAbility onDestroy');
+    console.log('[CertManager] MainExtensionAbility onDestroy');
   }
 
   onSessionCreate(want: Want, session: UIExtensionContentSession): void {
-    hilog.info(0x0000, 'testTag', '%{public}s', 'MainExtensionAbility onSessionCreate');
+    console.log('[CertManager] MainExtensionAbility onSessionCreate');
     let param: Record<string, Object> = {
       'session': session
     }
@@ -44,16 +43,16 @@ export default class MainExtensionAbility extends UIExtensionAbility {
 
   onSessionDestroy(): void {
     // Main window is destroyed, release UI related resources
-    hilog.info(0x0000, 'testTag', '%{public}s', 'MainExtensionAbility onSessionDestroy');
+    console.log('[CertManager] MainExtensionAbility onSessionDestroy');
   }
 
   onForeground(): void {
     // Ability has brought to foreground
-    hilog.info(0x0000, 'testTag', '%{public}s', 'MainExtensionAbility onForeground');
+    console.log('[CertManager] MainExtensionAbility onForeground');
   }
 
   onBackground(): void {
     // Ability has back to background
-    hilog.info(0x0000, 'testTag', '%{public}s', 'MainExtensionAbility onBackground');
+    console.log('[CertManager] MainExtensionAbility onBackground');
   }
 }

CertManager/src/main/ets/common/GlobalContext.ts

@@ -19,6 +19,7 @@ import UIExtensionContentSession from '@ohos.app.ability.UIExtensionContentSessi
 
 export class PwdStore {
   private certPwd: string = '';
+
   setCertPwd(pwd: string): void {
     this.certPwd = pwd;
   }
@@ -33,7 +34,9 @@ export class PwdStore {
 }
 
 export class GlobalContext {
-  private constructor() {};
+  private constructor() {
+  };
+
   private static instance: GlobalContext;
   private context: UIAbilityContext;
   private want: Want;
@@ -64,7 +67,7 @@ export class GlobalContext {
     return this.session;
   }
 
-  getFlag(): Boolean{
+  getFlag(): Boolean {
     return this.flag;
   }
 
@@ -84,7 +87,7 @@ export class GlobalContext {
     this.session = session;
   }
 
-  setFlag(flag: Boolean): void{
+  setFlag(flag: Boolean): void {
     this.flag = flag;
   }
 

CertManager/src/main/ets/common/component/headComponent.ets

@@ -36,7 +36,8 @@ export default struct HeadComponent {
           .fillColor($r('sys.color.ohos_id_color_primary'))
       }
       .margin({ right: $r('app.float.wh_value_16') })
-      .backgroundColor(this.isTouch ? $r('app.color.color_E3E3E3_grey') : $r('app.color.color_00000000_transparent'))
+      .backgroundColor(this.isTouch ? $r('sys.color.ohos_id_color_click_effect')
+        : $r('sys.color.ohos_id_color_sub_background'))
       .visibility(this.icBackIsVisibility ? Visibility.Visible : Visibility.None)
       .onClick(() => {
         let length = Router.getLength();
@@ -48,13 +49,11 @@ export default struct HeadComponent {
         }
       })
       .onTouch((event?: TouchEvent) => {
-        if (event !== undefined) {
+        if (event?.type === TouchType.Down) {
-          if (event.type === TouchType.Down) {
+          this.isTouch = true;
-            this.isTouch = true;
+        }
-          }
+        if (event?.type === TouchType.Up) {
-          if (event.type === TouchType.Up) {
+          this.isTouch = false;
-            this.isTouch = false;
-          }
         }
       });
 
@@ -63,7 +62,7 @@ export default struct HeadComponent {
         .lineHeight($r('app.float.wh_value_33'))
         .fontFamily('HarmonyHeiTi-Bold')
         .fontWeight(FontWeight.Regular)
-        .fontColor($r('app.color.font_color_182431'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
         .maxLines(ComponentConfig.MAX_LINES_1)
         .textOverflow({ overflow: TextOverflow.Ellipsis })
         .textAlign(TextAlign.Start)

CertManager/src/main/ets/common/component/subEntryComponent.ets

@@ -21,7 +21,14 @@ import ComponentConfig from './ComponentConfig';
 export struct SubEntryComponent {
   private targetPage: string = '';
   private title: string | Resource = '';
-  @State isTouched: boolean = false;
+
+  @Styles normalStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
+  };
+
+  @Styles pressedStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
+  };
 
   build() {
     Navigator({ target: this.targetPage }) {
@@ -30,7 +37,7 @@ export struct SubEntryComponent {
           Text(this.title)
             .fontSize($r('app.float.font_16'))
             .lineHeight($r('app.float.wh_value_22'))
-            .fontColor($r('app.color.font_color_182431'))
+            .fontColor($r('sys.color.ohos_id_color_text_primary'))
             .fontWeight(FontWeight.Medium)
             .margin({ left: $r('app.float.wh_value_8') })
             .textAlign(TextAlign.Start);
@@ -46,25 +53,9 @@ export struct SubEntryComponent {
       .borderRadius($r('app.float.radius_20'))
       .height(ComponentConfig.WH_100_100)
       .width(ComponentConfig.WH_100_100)
-      .linearGradient(this.isTouched ? {
+      .stateStyles({
-        angle: 90,
+        normal: this.normalStyle,
-        direction: GradientDirection.Right,
+        pressed: this.pressedStyle
-        colors: [[$r('app.color.DCEAF9'), 0.0], [$r('app.color.FAFAFA'), 1.0]]
-      } : {
-        angle: 90,
-        direction: GradientDirection.Right,
-        colors: [[$r('sys.color.ohos_id_color_foreground_contrary'), 1],
-          [$r('sys.color.ohos_id_color_foreground_contrary'), 1]]
-      })
-      .onTouch((event?: TouchEvent) => {
-        if (event !== undefined) {
-          if (event.type === TouchType.Down) {
-            this.isTouched = true;
-          }
-          if (event.type === TouchType.Up) {
-            this.isTouched = false;
-          }
-        }
       })
     }
     .height($r('app.float.wh_value_48'))
@@ -78,11 +69,18 @@ export struct SubEntryComponent {
  */
 @Component
 export struct SubEntryComponentWithEndText {
-  @State isTouched: boolean = false;
   @Prop endText: string = '';
   private targetPage: string = '';
   private title: string | Resource = '';
 
+  @Styles normalStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
+  };
+
+  @Styles pressedStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
+  };
+
   build() {
     Navigator({ target: this.targetPage }) {
       Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
@@ -91,7 +89,7 @@ export struct SubEntryComponentWithEndText {
             .fontSize($r('app.float.font_16'))
             .lineHeight($r('app.float.wh_value_22'))
             .fontWeight(FontWeight.Medium)
-            .fontColor($r('app.color.font_color_182431'))
+            .fontColor($r('sys.color.ohos_id_color_text_primary'))
             .margin({ left: $r('app.float.distance_8') })
             .textAlign(TextAlign.Start);
         }
@@ -115,26 +113,10 @@ export struct SubEntryComponentWithEndText {
       .height(ComponentConfig.WH_100_100)
       .width(ComponentConfig.WH_100_100)
       .borderRadius($r('app.float.radius_20'))
-      .linearGradient(this.isTouched ? {
+      .stateStyles({
-        angle: 90,
+        normal: this.normalStyle,
-        direction: GradientDirection.Right,
+        pressed: this.pressedStyle
-        colors: [[$r('app.color.DCEAF9'), 0.0], [$r('app.color.FAFAFA'), 1.0]]
-      } : {
-        angle: 90,
-        direction: GradientDirection.Right,
-        colors: [[$r('sys.color.ohos_id_color_foreground_contrary'), 1],
-          [$r('sys.color.ohos_id_color_foreground_contrary'), 1]]
       })
-      .onTouch((event?: TouchEvent) => {
-        if (event !== undefined) {
-          if (event.type === TouchType.Down) {
-            this.isTouched = true;
-          }
-          if (event.type === TouchType.Up) {
-            this.isTouched = false;
-          }
-        }
-      });
     }
     .padding($r('app.float.distance_4'))
     .height($r('app.float.wh_value_56'))

CertManager/src/main/ets/common/util/ConfigData.ts

@@ -48,8 +48,7 @@ export enum LocationChoice {
 
 export enum ConfigValue {
   PWD_MAX_LENGTH = 64,
-  ALIAS_MAX_LENGTH = 64,
+  ALIAS_MAX_LENGTH = 16,
   APP_AUTH_MAX_LENGTH = 4,
-  REQUEST_AUTH_MAX_LENGTH = 5,
+  REQUEST_AUTH_MAX_LENGTH = 5
-  VERTICAL_DIVIDER_WIDTH = 1
 };

CertManager/src/main/ets/model/CertManagerVo/CertAbstractVo.ets

@@ -18,7 +18,7 @@ export class CertAbstractVo {
   public certAlias: string;
   public status: boolean;
   public subjectName: string;
-  public subjectNameCN : string;
+  public subjectNameCN: string;
 
   constructor(uri: string, certAlias: string, status: boolean, subjectName: string, subjectNameCN: string) {
     this.uri = uri;

CertManager/src/main/ets/model/CertManagerVo/CertInfoVo.ets

@@ -24,9 +24,9 @@ export class CertInfoVo {
   public notAfter: string;
   public fingerprintSha256: string;
   public cert: Uint8Array;
-  public subjectNameMap :Map<string, string>;
+  public subjectNameMap: Map<string, string>;
-  public issuerNameMap :Map<string, string>;
+  public issuerNameMap: Map<string, string>;
-  public dateMap :Map<string, string>;
+  public dateMap: Map<string, string>;
 
   constructor(
     uri: string,
@@ -40,8 +40,8 @@ export class CertInfoVo {
     fingerprintSha256: string,
     cert: Uint8Array,
     subjectNameMap: Map<string, string>,
-    issuerNameMap :Map<string, string>,
+    issuerNameMap: Map<string, string>,
-    dateMap :Map<string, string>) {
+    dateMap: Map<string, string>) {
     this.uri = uri;
     this.certAlias = certAlias;
     this.status = status;

CertManager/src/main/ets/model/CertManagerVo/RouterInfoVo.ets

@@ -29,4 +29,14 @@ export class RouterFileVo {
     this.uri = uri;
     this.suffix = suffix;
   }
+}
+
+export class RouterParams {
+  public fileInfo: RouterFileVo;
+  public pwd: string
+
+  constructor(fileInfo: RouterFileVo, pwd: string) {
+    this.fileInfo = fileInfo;
+    this.pwd = pwd
+  }
 }

CertManager/src/main/ets/model/CertMangerModel.ets

@@ -19,6 +19,7 @@ import { CredentialAbstractVo } from './CertManagerVo/CredentialAbstractVo';
 import { CredentialVo } from './CertManagerVo/CredentialVo';
 import { BusinessError } from '@ohos.base';
 import CertManager from '@ohos.security.certManager';
+import cert from '@ohos.security.cert';
 
 const TAG = 'CertManager Model: ';
 
@@ -59,7 +60,7 @@ export class CertMangerModel {
 
     switch (optType) {
       case CMModelOptType.CM_MODEL_OPT_SYSTEM_CA:
-        this.getSystemTrustedCertificateList((errCode:CMModelErrorCode, certList: Array<CertAbstractVo>) => {
+        this.getSystemTrustedCertificateList((errCode: CMModelErrorCode, certList: Array<CertAbstractVo>) => {
           callback(errCode, certList);
         });
         break;
@@ -73,6 +74,9 @@ export class CertMangerModel {
           callback(errCode, credList);
         });
         break;
+      case CMModelOptType.CM_MODEL_OPT_PRIVATE_CRED:
+        callback(CMModelErrorCode.CM_MODEL_ERROR_NOT_SUPPORT);
+        break;
       default:
         callback(CMModelErrorCode.CM_MODEL_ERROR_UNKNOWN_OPT, undefined);
         break;
@@ -99,6 +103,9 @@ export class CertMangerModel {
           callback(errCode, credInfo);
         });
         break;
+      case CMModelOptType.CM_MODEL_OPT_PRIVATE_CRED:
+        callback(CMModelErrorCode.CM_MODEL_ERROR_NOT_SUPPORT);
+        break;
       default:
         callback(CMModelErrorCode.CM_MODEL_ERROR_UNKNOWN_OPT, undefined);
         break;
@@ -110,11 +117,13 @@ export class CertMangerModel {
 
     switch (optType) {
       case CMModelOptType.CM_MODEL_OPT_USER_CA:
+        console.log(TAG + 'deleteUserTrustedCertificate start');
         this.deleteUserTrustedCertificate(uri, (errCode: CMModelErrorCode) => {
           callback(errCode);
         });
         break;
       case CMModelOptType.CM_MODEL_OPT_APP_CRED:
+        console.log(TAG + 'deleteAppCredential start');
         this.deleteAppCredential(uri, (errCode: CMModelErrorCode) => {
           callback(errCode);
         });
@@ -203,7 +212,7 @@ export class CertMangerModel {
     console.log(TAG + 'setAppAuth start');
     switch (optType) {
       case CMModelOptType.CM_MODEL_OPT_APP_CRED:
-        return new Promise((resolve, reject)=>{
+        return new Promise((resolve, reject) => {
           this.setAuthorizedAppStatus(uri, appUid, status, (errCode: CMModelErrorCode, data: string) => {
             if (errCode === CMModelErrorCode.CM_MODEL_ERROR_SUCCESS) {
               resolve(void(data));
@@ -263,6 +272,17 @@ export class CertMangerModel {
     }
   }
 
+  checkPassword(data: Uint8Array, pwd: string, callback: Function): void {
+    console.info(TAG + 'checkPassword start');
+    cert.createTrustAnchorsWithKeyStore(data, pwd).then((data) => {
+      console.info(TAG + 'checkPassword success');
+      callback(0)
+    }).catch((err: BusinessError) => {
+      console.info(TAG + 'checkPassword failed:' + JSON.stringify(err));
+      callback(CMModelErrorCode.CM_MODEL_ERROR_EXCEPTION)
+    })
+  }
+
   private async getSystemTrustedCertificateList(callback: Function): Promise<void> {
     console.log(TAG + 'getSystemTrustedCertificateList start');
     try {
@@ -421,7 +441,7 @@ export class CertMangerModel {
         }
         dateMap.set('颁发时间:', String(result.certInfo.notBefore));
         dateMap.set('有效期至:', String(result.certInfo.notAfter));
-        let certData:Uint8Array = result.certInfo.cert;
+        let certData: Uint8Array = result.certInfo.cert;
         let certInfo = new CertInfoVo(String(result.certInfo.uri), String(result.certInfo.certAlias),
           Boolean(result.certInfo.status), String(result.certInfo.issuerName), String(result.certInfo.subjectName),
           String(result.certInfo.serial), String(result.certInfo.notBefore),
@@ -496,7 +516,7 @@ export class CertMangerModel {
     try {
       let result = await CertManager.getPublicCertificate(certUri);
       if (result.credential !== undefined) {
-        let certData:Uint8Array = result.credential.credData;
+        let certData: Uint8Array = result.credential.credData;
         let credInfo = new CredentialVo(String(result.credential.type), String(result.credential.alias),
           String(result.credential.keyUri), Number(result.credential.certNum),
           Number(result.credential.keyNum), certData);
@@ -565,8 +585,12 @@ export class CertMangerModel {
     }
   }
 
-  private async setAuthorizedAppStatus(uri: string, appUid: string,
+  private async setAuthorizedAppStatus(
-                                       status: boolean, callback: Function): Promise<void> {
+    uri: string,
+    appUid: string,
+    status: boolean,
+    callback: Function
+  ): Promise<void> {
     console.log(TAG + 'setAuthorizedAppStatus start');
     try {
       if (status) {
@@ -605,12 +629,17 @@ export class CertMangerModel {
         callback(CMModelErrorCode.CM_MODEL_ERROR_ALIAS_LENGTH_REACHED_LIMIT)
       } else {
         console.error(TAG + 'installUserCertificate failed with err, message: ' + e.message + ', code: ' + e.code);
+        callback(CMModelErrorCode.CM_MODEL_ERROR_EXCEPTION);
       }
     }
   }
 
-  private async installPublicCertificate(data: Uint8Array, alias: string,
+  private async installPublicCertificate(
-                                      pwd: string, callback: Function): Promise<void> {
+    data: Uint8Array,
+    alias: string,
+    pwd: string,
+    callback: Function
+  ): Promise<void> {
     console.info(TAG + 'installPublicCertificate start');
     try {
       await CertManager.installPublicCertificate(data, pwd, alias);
@@ -618,11 +647,18 @@ export class CertMangerModel {
       callback(CMModelErrorCode.CM_MODEL_ERROR_SUCCESS);
     } catch (err) {
       let e: BusinessError = err as BusinessError;
-      console.error(TAG + 'installPublicCertificate failed with err, message: ' + e.message + ', code: ' + e.code);
+      if (e.code === CertManager.CMErrorCode.CM_ERROR_INCORRECT_FORMAT) {
-      callback(CMModelErrorCode.CM_MODEL_ERROR_EXCEPTION);
+        callback(CMModelErrorCode.CM_MODEL_ERROR_INCORRECT_FORMAT)
+      } else if (e.code === CertManager.CMErrorCode.CM_ERROR_CERT_NUM_REACHED_LIMIT) {
+        callback(CMModelErrorCode.CM_MODEL_ERROR_MAX_QUANTITY_REACHED)
+      } else if (e.code === CertManager.CMErrorCode.CM_ERROR_ALIAS_LENGTH_REACHED_LIMIT) {
+        callback(CMModelErrorCode.CM_MODEL_ERROR_ALIAS_LENGTH_REACHED_LIMIT)
+      } else {
+        console.error(TAG + 'installPublicCertificate failed with err, message: ' + e.message + ', code: ' + e.code);
+        callback(CMModelErrorCode.CM_MODEL_ERROR_EXCEPTION);
+      }
     }
   }
-
 }
 
 let certMangerModel = new CertMangerModel();

CertManager/src/main/ets/model/PreventScreenshotsModel.ets

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import window from '@ohos.window';
+import { BusinessError } from '@ohos.base';
+import { GlobalContext } from '../common/GlobalContext';
+
+const TAG: string = 'PreventScreenshotsModel';
+
+export default class PreventScreenshotsModel {
+  private static sInstance: PreventScreenshotsModel;
+
+  public static getInstance(): PreventScreenshotsModel {
+    if (PreventScreenshotsModel.sInstance == null) {
+      PreventScreenshotsModel.sInstance = new PreventScreenshotsModel();
+    }
+    return PreventScreenshotsModel.sInstance;
+  }
+
+  PreventScreenshots(flag: boolean) {
+    let windowClass: window.Window | undefined = undefined;
+    let isPrivacyMode: boolean = flag;
+    try {
+      window.getLastWindow(GlobalContext.getContext().getCmContext(), (err: BusinessError, data) => {
+        const errCode: number = err.code;
+        if (errCode) {
+          console.error(TAG, 'Failed to obtain the top window.Cause: ' + JSON.stringify(err));
+          return;
+        }
+        windowClass = data;
+        console.info(TAG, 'Success in obtaining the top window.Data');
+        try {
+          windowClass.setWindowPrivacyMode(isPrivacyMode, (err: BusinessError) => {
+            const errCode: number = err.code;
+            if (errCode) {
+              console.error(TAG, 'Failed to set window to privacy mode.Cause: ' + JSON.stringify(err));
+              return;
+            }
+            console.info(TAG, 'Success in setting the window to privacy mode');
+          });
+        } catch (exception) {
+          console.error(TAG, 'Failed to set the window to privacy mode.Cause: ' + JSON.stringify(exception));
+        }
+      })
+    } catch (exception) {
+      console.error(TAG, 'Failed to obtain the top window.Cause' + JSON.stringify(exception));
+    }
+  }
+}

CertManager/src/main/ets/pages/cerEvidenceFa.ets

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import { WidthPercent, LocationChoice, ConfigValue } from '../common/util/ConfigData';
+import { WidthPercent, ConfigValue } from '../common/util/ConfigData';
 import HeadComponent from '../common/component/headComponent';
 import CmShowAppCredPresenter from '../presenter/CmShowAppCredPresenter';
 import CMFaPresenter from '../presenter/CmFaPresenter';
@@ -21,6 +21,9 @@ import { GlobalContext } from '../common/GlobalContext';
 import { CredentialAbstractVo } from '../model/CertManagerVo/CredentialAbstractVo';
 import { AppAuthorVo } from '../model/CertManagerVo/AppAuthorVo';
 import router from '@ohos.router';
+import { CustomContentDialog } from '@ohos.arkui.advanced.Dialog';
+
+const COPIES_NUM: number = 12;
 
 @Component
 export struct DialogComponent {
@@ -57,443 +60,307 @@ export struct DialogComponent {
   }
 }
 
-@CustomDialog
-@Component
-struct CustomDialogExampleAuthor {
-  controller?: CustomDialogController;
-  @Link isShowAuthDialog: boolean;
-  @Link authorInfo: CmShowAppCredPresenter;
-  @State updateStatusList: boolean[] = [];
-  private authorScroller: Scroller = new Scroller();
-
-  build() {
-    Column() {
-      GridRow({ columns: 12, gutter: vp2px(1) === 2 ? '12vp' : '0vp', }) {
-        GridCol({ span: { xs: 12, sm: 12, md: 12, lg: 8 }, offset: { xs: 0, sm: 0, md: 0, lg: 2 } }) {
-          Column() {
-            Text($r('app.string.managerAuthApp'))
-              .height($r('app.float.wh_value_56'))
-              .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
-              .fontColor($r('sys.color.ohos_id_color_text_primary'))
-              .fontWeight(FontWeight.Medium)
-              .margin({
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-              .alignSelf(ItemAlign.Start);
-            if (this.authorInfo.appInfoList.length > ConfigValue.APP_AUTH_MAX_LENGTH) {
-              Stack({ alignContent: Alignment.End }) {
-                Scroll(this.authorScroller) {
-                  List() {
-                    ForEach(this.authorInfo.appInfoList, (item: AppAuthorVo, index) => {
-                      ListItem() {
-                        DialogComponent({ appImage: item.appImage, appName: item.appName,
-                          indexNum: index, uidItem: $authorInfo })
-                      }
-                    })
-                  }
-                  .scrollBar(BarState.Off)
-                  .divider({
-                    strokeWidth: $r('app.float.Evidence_strokeWidth'),
-                    color: $r('app.color.Evidence_color') })
-                  .backgroundColor($r('app.color.credentials_app_finish_backgroundColor'))
-                  .visibility(this.authorInfo.appInfoList.length > 0 ? Visibility.Visible : Visibility.None)
-                }
-                .scrollBar(BarState.Off)
-                .margin({
-                  left: $r('app.float.wh_value_24'),
-                  right: $r('app.float.wh_value_24')
-                })
-
-                ScrollBar({ scroller: this.authorScroller, direction: ScrollBarDirection.Vertical,
-                  state: BarState.Auto }) {
-                  Text()
-                    .width($r('app.float.wh_value_3'))
-                    .height($r('app.float.wh_value_50'))
-                    .borderRadius($r('app.float.wh_value_10'))
-                    .backgroundColor($r('sys.color.ohos_id_color_foreground'))
-                    .opacity(0.4)
-                }
-                .width($r('app.float.wh_value_3'))
-                .margin({
-                  right: $r('app.float.wh_value_3')
-                })
-              }
-              .height(WidthPercent.WH_50_100)
-            } else {
-              List() {
-                ForEach(this.authorInfo.appInfoList, (item: AppAuthorVo, index) => {
-                  ListItem() {
-                    DialogComponent({ appImage: item.appImage, appName: item.appName,
-                      indexNum: index, uidItem: $authorInfo })
-                  }
-                })
-              }
-              .scrollBar(BarState.Off)
-              .margin({
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-              .divider({
-                strokeWidth: $r('app.float.Evidence_strokeWidth'),
-                color: $r('app.color.Evidence_color') })
-              .backgroundColor($r('app.color.credentials_app_finish_backgroundColor'))
-              .visibility(this.authorInfo.appInfoList.length > 0 ? Visibility.Visible : Visibility.None)
-            }
-
-            Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center,
-              justifyContent: FlexAlign.SpaceAround }) {
-              Button($r('app.string.cancelAuthApp'))
-                .onClick(() => {
-                  this.isShowAuthDialog = false;
-                  if (this.controller !== undefined) {
-                    this.controller.close();
-                  }
-                })
-                .backgroundColor($r('app.color.credentials_app_finish_backgroundColor'))
-                .fontSize($r('sys.float.ohos_id_text_size_button1'))
-                .fontColor($r('sys.color.ohos_id_color_text_hyperlink'))
-                .width($r('app.float.wh_value_152'))
-                .height($r('app.float.wh_value_40'))
-              Divider()
-                .strokeWidth(ConfigValue.VERTICAL_DIVIDER_WIDTH)
-                .color($r('sys.color.ohos_id_color_list_separator'))
-                .vertical(true)
-                .opacity($r('app.float.opacity_0_2'))
-                .height($r('app.float.wh_value_40'))
-              Button($r('app.string.finishAuthApp'))
-                .onClick(() => {
-                  this.authorInfo.removeGrantedAppList(this.authorInfo.credInfo.keyUri).then(() => {
-                    this.isShowAuthDialog = false;
-                    if (this.controller !== undefined) {
-                      this.controller.close();
-                    }
-                  })
-                })
-                .backgroundColor($r('app.color.credentials_app_finish_backgroundColor'))
-                .fontSize($r('sys.float.ohos_id_text_size_button1'))
-                .fontColor($r('sys.color.ohos_id_color_text_hyperlink'))
-                .width($r('app.float.wh_value_152'))
-                .height($r('app.float.wh_value_40'))
-            }
-            .height($r('app.float.wh_value_64'))
-            .padding({
-              bottom: $r('app.float.wh_value_16')
-            })
-            .margin({
-              top: $r('app.float.wh_value_6'),
-              left: $r('app.float.wh_value_24'),
-              right: $r('app.float.wh_value_24')
-            })
-          }
-          .width(WidthPercent.WH_100_100)
-          .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
-          .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary'))
-        }
-      }.margin(vp2px(1) === 2 ? '24vp' : '0vp')
-    }
-    .margin({
-      bottom: $r('sys.float.ohos_id_dialog_margin_bottom'),
-      left: $r('sys.float.ohos_id_dialog_margin_start'),
-      right: $r('sys.float.ohos_id_dialog_margin_end'),
-    })
-  }
-}
-
-@CustomDialog
-@Component
-struct CustomDialogDeleteWarning {
-  controller?: CustomDialogController;
-  @Link deleteWarn: CmShowAppCredPresenter;
-  @Link isShowWarnDialog: boolean;
-
-  build() {
-    Column() {
-      GridRow({ columns: 12, gutter: vp2px(1) === 2 ? '12vp' : '0vp', }) {
-        GridCol({ span: { xs: 12, sm: 12, md: 12, lg: 8 }, offset: { xs: 0, sm: 0, md: 0, lg: 2 } }) {
-          Column() {
-            Text($r('app.string.warning_title'))
-              .height($r('app.float.wh_value_56'))
-              .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
-              .fontColor($r('sys.color.ohos_id_color_text_primary'))
-              .fontWeight(FontWeight.Medium)
-              .margin({
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-              .alignSelf(ItemAlign.Start)
-            Text($r('app.string.warning_message'))
-              .fontSize($r('sys.float.ohos_id_text_size_body1'))
-              .fontWeight(FontWeight.Regular)
-              .fontColor($r('sys.color.ohos_id_color_primary'))
-              .margin({
-                top: $r('app.float.wh_value_16'),
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-              .alignSelf(ItemAlign.Start)
-
-            Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center,
-              justifyContent: FlexAlign.SpaceAround }) {
-              Button($r('app.string.deleteAllCredCancel'))
-                .onClick(() => {
-                  this.isShowWarnDialog = false;
-                  if (this.controller !== undefined) {
-                    this.controller.close();
-                  }
-                })
-                .backgroundColor($r('app.color.credentials_app_finish_backgroundColor'))
-                .fontSize($r('sys.float.ohos_id_text_size_button1'))
-                .fontColor($r('sys.color.ohos_id_color_text_hyperlink'))
-                .width($r('app.float.wh_value_152'))
-                .height($r('app.float.wh_value_40'))
-              Divider()
-                .strokeWidth(ConfigValue.VERTICAL_DIVIDER_WIDTH)
-                .color($r('sys.color.ohos_id_color_list_separator'))
-                .vertical(true)
-                .height($r('app.float.wh_value_40'))
-                .opacity($r('app.float.opacity_0_2'))
-              Button($r('app.string.deleteAllCredDelete'))
-                .onClick(() => {
-                  this.deleteWarn.deleteAppCred(this.deleteWarn.credInfo.keyUri);
-                  this.isShowWarnDialog = false;
-                  if (this.controller !== undefined) {
-                    this.controller.close();
-                  }
-                })
-                .backgroundColor($r('app.color.credentials_app_finish_backgroundColor'))
-                .fontSize($r('sys.float.ohos_id_text_size_button1'))
-                .fontColor($r('sys.color.ohos_id_color_warning'))
-                .width($r('app.float.wh_value_152'))
-                .height($r('app.float.wh_value_40'))
-            }
-            .height($r('app.float.wh_value_64'))
-            .padding({
-              bottom: $r('app.float.wh_value_16')
-            })
-            .margin({
-              top: $r('app.float.wh_value_16'),
-              left: $r('app.float.wh_value_24'),
-              right: $r('app.float.wh_value_24')
-            })
-          }
-          .width(WidthPercent.WH_100_100)
-          .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
-          .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary'))
-        }
-      }.margin(vp2px(1) === 2 ? '24vp' : '0vp')
-    }
-    .margin({
-      bottom: $r('sys.float.ohos_id_dialog_margin_bottom'),
-      left: $r('sys.float.ohos_id_dialog_margin_start'),
-      right: $r('sys.float.ohos_id_dialog_margin_end'),
-    })
-  }
-}
-
-@CustomDialog
-@Component
-struct CustomDialogExampleApp {
-  controller?: CustomDialogController;
-  @Link mShowAppCaPresenter: CmShowAppCredPresenter;
-  @Link isShowAuthDialog: boolean;
-  @Link isShowWarnDialog: boolean;
-
-  aboutToAppear() {
-    this.mShowAppCaPresenter.getAuthorizedAppList(this.mShowAppCaPresenter.credInfo.keyUri)
-  }
-
-  build() {
-    Column() {
-      GridRow({ columns: 12, gutter: vp2px(1) === 2 ? '12vp' : '0vp' }) {
-        GridCol({ span: { xs: 12, sm: 12, md: 12, lg: 8 }, offset: { xs: 0, sm: 0, md: 0, lg: 2 } }) {
-          Column() {
-            Text($r('app.string.evidenceDetails'))
-              .height($r('app.float.wh_value_56'))
-              .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
-              .fontColor($r('sys.color.ohos_id_color_text_primary'))
-              .fontWeight(FontWeight.Medium)
-              .margin({
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-              .alignSelf(ItemAlign.Start)
-
-            Text(this.mShowAppCaPresenter.credInfo.alias)
-              .fontSize($r('sys.float.ohos_id_text_size_body1'))
-              .fontColor($r('sys.color.ohos_id_color_text_primary'))
-              .fontWeight(FontWeight.Medium)
-              .margin({
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-              .alignSelf(ItemAlign.Start)
-
-            Text($r('app.string.entryContains'))
-              .fontSize($r('sys.float.ohos_id_text_size_body2'))
-              .fontColor($r('sys.color.ohos_id_color_text_primary'))
-              .fontWeight(FontWeight.Regular)
-              .margin({
-                top: $r('app.float.wh_value_24'),
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-              .alignSelf(ItemAlign.Start)
-
-            Text($r('app.string.keyNum', String(this.mShowAppCaPresenter.credInfo.keyNum)))
-              .fontSize($r('sys.float.ohos_id_text_size_body2'))
-              .fontColor($r('sys.color.ohos_id_color_text_primary'))
-              .fontWeight(FontWeight.Regular)
-              .margin({
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-              .opacity($r('app.float.opacity_100_60'))
-              .alignSelf(ItemAlign.Start)
-
-            Text($r('app.string.userCerNum', String(this.mShowAppCaPresenter.credInfo.certNum)))
-              .fontSize($r('sys.float.ohos_id_text_size_body2'))
-              .fontColor($r('sys.color.ohos_id_color_text_primary'))
-              .fontWeight(FontWeight.Regular)
-              .margin({
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-              .opacity($r('app.float.opacity_100_60'))
-              .alignSelf(ItemAlign.Start)
-
-            Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
-              Column() {
-                Text($r('app.string.managerAuthApp'))
-                  .fontSize($r('sys.float.ohos_id_text_size_body1'))
-                  .fontColor($r('sys.color.ohos_id_color_text_primary'))
-                  .fontWeight(FontWeight.Medium)
-              }
-
-              Row() {
-                Image($r('app.media.ic_settings_arrow'))
-                  .width($r('app.float.managerAuthApp_image_wh'))
-                  .height($r('app.float.managerAuthApp_image_hg'))
-                  .fillColor($r('sys.color.ohos_id_color_primary'))
-                  .opacity($r('app.float.managerAuthApp_image_opacity'))
-              }
-            }
-            .onClick(() => {
-              this.isShowAuthDialog = true;
-            })
-            .margin({
-              top: $r('app.float.wh_value_12'),
-              left: $r('app.float.wh_value_24'),
-              right: $r('app.float.wh_value_24')
-            })
-            .height('48vp')
-
-            Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center,
-              justifyContent: FlexAlign.SpaceAround }) {
-              Button($r('app.string.publicDetailsCancel'))
-                .onClick(() => {
-                  this.isShowAuthDialog = false;
-                  this.isShowWarnDialog = false;
-                  if (this.controller !== undefined) {
-                    this.controller.close();
-                  }
-                })
-                .backgroundColor($r('app.color.credentials_app_finish_backgroundColor'))
-                .fontSize($r('sys.float.ohos_id_text_size_button1'))
-                .fontColor($r('sys.color.ohos_id_color_text_hyperlink'))
-                .width($r('app.float.wh_value_152'))
-                .height($r('app.float.wh_value_40'))
-              Divider()
-                .strokeWidth(ConfigValue.VERTICAL_DIVIDER_WIDTH)
-                .color($r('sys.color.ohos_id_color_list_separator'))
-                .vertical(true)
-                .height($r('app.float.wh_value_40'))
-                .opacity($r('app.float.opacity_0_2'))
-              Button($r('app.string.publicDetailsDelete'))
-                .onClick(() => {
-                  this.isShowWarnDialog = true;
-                  this.isShowAuthDialog = false;
-                  if (this.controller !== undefined) {
-                    this.controller.close();
-                  }
-                })
-                .backgroundColor($r('app.color.credentials_app_finish_backgroundColor'))
-                .fontSize($r('sys.float.ohos_id_text_size_button1'))
-                .fontColor($r('sys.color.ohos_id_color_warning'))
-                .width($r('app.float.wh_value_152'))
-                .height($r('app.float.wh_value_40'))
-            }
-            .height($r('app.float.wh_value_64'))
-            .padding({
-              bottom: $r('app.float.wh_value_16')
-            })
-            .margin({
-              top: $r('app.float.wh_value_16'),
-              left: $r('app.float.wh_value_24'),
-              right: $r('app.float.wh_value_24')
-            })
-          }
-          .width(WidthPercent.WH_100_100)
-          .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
-          .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary'))
-        }
-      }.margin(vp2px(1) === 2 ? '24vp' : '0vp')
-    }
-    .margin({
-      bottom: $r('sys.float.ohos_id_dialog_margin_bottom'),
-      left: $r('sys.float.ohos_id_dialog_margin_start'),
-      right: $r('sys.float.ohos_id_dialog_margin_end'),
-    })
-  }
-}
-
 @Component
 export struct componentPublic {
   private alias: string = '';
   private keyUri: string = '';
   @Link mShowAppCaPresenter: CmShowAppCredPresenter;
-  @State @Watch('onShowAuthMngChange') isShowAuthMng: boolean = false;
+  @State authorInfo: CmShowAppCredPresenter = CmShowAppCredPresenter.getInstance();
-  @State @Watch('onShowDeleteWarnDialog') isShowWarning: boolean = false;
+  private authorScroller: Scroller = new Scroller();
 
-  detailsDialogController: CustomDialogController = new CustomDialogController({
+  aboutToAppear() {
-    builder: CustomDialogExampleApp({
+    this.mShowAppCaPresenter.updateAppCredList();
-      isShowAuthDialog: $isShowAuthMng,
+  }
-      isShowWarnDialog: $isShowWarning,
+
-      mShowAppCaPresenter: $mShowAppCaPresenter
+  getAuthorizedAppList(): void {
+    this.authorInfo.getAuthorizedAppList(this.mShowAppCaPresenter.credInfo.keyUri);
+  }
+
+  deleteWarnDialog: CustomDialogController = new CustomDialogController({
+    builder: CustomContentDialog({
+      contentBuilder: () => {
+        this.deleteWarnContent();
+      },
+      contentAreaPadding: { right: $r('app.float.wh_value_0') },
+      buttons: [
+        {
+          value: $r('app.string.cancelAuthApp'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+            this.appDialogController?.close();
+          }
+        },
+        {
+          value: $r('app.string.deleteAllCredDelete'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+            this.mShowAppCaPresenter.deleteAppCred(this.mShowAppCaPresenter.credInfo.keyUri);
+            this.deleteWarnDialog?.close();
+          },
+          role: ButtonRole.ERROR
+        }
+      ]
     }),
-    autoCancel: true,
-    customStyle: true,
   })
 
   appDialogController: CustomDialogController = new CustomDialogController({
-    builder: CustomDialogExampleAuthor({ isShowAuthDialog: $isShowAuthMng, authorInfo: $mShowAppCaPresenter }),
+    builder: CustomContentDialog({
-    autoCancel: false,
+      contentBuilder: () => {
-    customStyle: true,
+        this.appControllerContent();
+      },
+      contentAreaPadding: { right: $r('app.float.wh_value_0') },
+      buttons: [
+        {
+          value: $r('app.string.cancelAuthApp'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+            this.appDialogController?.close();
+          }
+        },
+        {
+          value: $r('app.string.finishAuthApp'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+            this.authorInfo.removeGrantedAppList(this.authorInfo.credInfo.keyUri).then(() => {
+              this.appDialogController?.close();
+            })
+          }
+        }
+      ]
+    }),
   })
 
-  deleteWarnDialog: CustomDialogController = new CustomDialogController({
+  credDetailsDialog: CustomDialogController = new CustomDialogController({
-    builder: CustomDialogDeleteWarning({ isShowWarnDialog: $isShowWarning, deleteWarn: $mShowAppCaPresenter }),
+    builder: CustomContentDialog({
-    autoCancel: false,
+      contentBuilder: () => {
-    customStyle: true,
+        this.credDetailContent();
+      },
+      contentAreaPadding: { right: $r('app.float.wh_value_0') },
+      buttons: [
+        {
+          value: $r('app.string.publicDetailsCancel'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+            this.credDetailsDialog?.close();
+          }
+        },
+        {
+          value: $r('app.string.publicDetailsDelete'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+            this.onShowDeleteWarnDialog();
+          },
+          role: ButtonRole.ERROR
+        }
+      ]
+    }),
   })
 
+  @Builder
+  appControllerContent(): void {
+    Column() {
+      Text($r('app.string.managerAuthApp'))
+        .height($r('app.float.wh_value_56'))
+        .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .fontWeight(FontWeight.Medium)
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+
+      if (this.authorInfo.appInfoList.length > ConfigValue.APP_AUTH_MAX_LENGTH) {
+        Stack({ alignContent: Alignment.End }) {
+          Scroll(this.authorScroller) {
+            List() {
+              ForEach(this.authorInfo.appInfoList, (item: AppAuthorVo, index) => {
+                ListItem() {
+                  DialogComponent({ appImage: item.appImage, appName: item.appName,
+                    indexNum: index, uidItem: $authorInfo })
+                }
+              })
+            }
+            .scrollBar(BarState.Off)
+            .divider({
+              strokeWidth: $r('app.float.Evidence_strokeWidth'),
+              color: $r('sys.color.ohos_id_color_list_separator')
+            })
+            .visibility(this.authorInfo.appInfoList.length > 0 ? Visibility.Visible : Visibility.None)
+          }
+          .scrollBar(BarState.Off)
+          .margin({
+            left: $r('app.float.wh_value_24'),
+            right: $r('app.float.wh_value_24')
+          })
+
+          ScrollBar({ scroller: this.authorScroller, direction: ScrollBarDirection.Vertical,
+            state: BarState.Auto }) {
+            Text()
+              .width($r('app.float.wh_value_3'))
+              .height($r('app.float.wh_value_50'))
+              .borderRadius($r('app.float.wh_value_10'))
+              .backgroundColor($r('sys.color.ohos_id_color_foreground'))
+              .opacity($r('app.float.text_opacity_0_4'))
+          }
+          .width($r('app.float.wh_value_3'))
+          .margin({
+            right: $r('app.float.wh_value_3')
+          })
+        }
+        .height(WidthPercent.WH_50_100)
+      } else {
+        List() {
+          ForEach(this.mShowAppCaPresenter.appInfoList, (item: AppAuthorVo, index) => {
+            ListItem() {
+              DialogComponent({ appImage: item.appImage, appName: item.appName,
+                indexNum: index, uidItem: $authorInfo })
+            }
+          })
+        }
+        .scrollBar(BarState.Off)
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .divider({
+          strokeWidth: $r('app.float.Evidence_strokeWidth'),
+          color: $r('sys.color.ohos_id_color_list_separator')
+        })
+        .visibility(this.authorInfo.appInfoList.length > 0 ? Visibility.Visible : Visibility.None)
+      }
+    }
+    .width(WidthPercent.WH_100_100)
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
+  }
+
+  @Builder
+  credDetailContent(): void {
+    Column() {
+      Text($r('app.string.evidenceDetails'))
+        .height($r('app.float.wh_value_56'))
+        .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .fontWeight(FontWeight.Medium)
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+
+      Text(this.mShowAppCaPresenter.credInfo.alias)
+        .fontSize($r('sys.float.ohos_id_text_size_body1'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .fontWeight(FontWeight.Medium)
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+
+      Text($r('app.string.entryContains'))
+        .fontSize($r('sys.float.ohos_id_text_size_body2'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .fontWeight(FontWeight.Regular)
+        .margin({
+          top: $r('app.float.wh_value_24'),
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+
+      Text($r('app.string.keyNum', String(this.mShowAppCaPresenter.credInfo.keyNum)))
+        .fontSize($r('sys.float.ohos_id_text_size_body2'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .fontWeight(FontWeight.Regular)
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .opacity($r('app.float.opacity_100_60'))
+        .alignSelf(ItemAlign.Start)
+
+      Text($r('app.string.userCerNum', String(this.mShowAppCaPresenter.credInfo.certNum)))
+        .fontSize($r('sys.float.ohos_id_text_size_body2'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .fontWeight(FontWeight.Regular)
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .opacity($r('app.float.opacity_100_60'))
+        .alignSelf(ItemAlign.Start)
+
+      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
+        Column() {
+          Text($r('app.string.managerAuthApp'))
+            .fontSize($r('sys.float.ohos_id_text_size_body1'))
+            .fontColor($r('sys.color.ohos_id_color_text_primary'))
+            .fontWeight(FontWeight.Medium)
+        }
+
+        Row() {
+          Image($r('app.media.ic_settings_arrow'))
+            .width($r('app.float.managerAuthApp_image_wh'))
+            .height($r('app.float.managerAuthApp_image_hg'))
+            .fillColor($r('sys.color.ohos_id_color_primary'))
+            .opacity($r('app.float.managerAuthApp_image_opacity'))
+        }
+      }
+      .onClick(() => {
+        this.onShowAuthMngChange();
+      })
+      .margin({
+        top: $r('app.float.wh_value_12'),
+        left: $r('app.float.wh_value_24'),
+        right: $r('app.float.wh_value_24')
+      })
+      .height('48vp')
+    }
+    .width(WidthPercent.WH_100_100)
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
+  }
+
+  @Builder
+  deleteWarnContent(): void {
+    Column() {
+      Text($r('app.string.warning_title'))
+        .height($r('app.float.wh_value_56'))
+        .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .fontWeight(FontWeight.Medium)
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+
+      Text($r('app.string.warning_message'))
+        .fontSize($r('sys.float.ohos_id_text_size_body1'))
+        .fontWeight(FontWeight.Regular)
+        .fontColor($r('sys.color.ohos_id_color_primary'))
+        .margin({
+          top: $r('app.float.wh_value_16'),
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+    }
+    .width(WidthPercent.WH_100_100)
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
+  }
+
   onShowAuthMngChange() {
-    if (this.isShowAuthMng == true) {
+    this.credDetailsDialog?.close();
-      this.appDialogController.open();
+    this.appDialogController.open();
-    } else {
-      this.detailsDialogController.close();
-      this.detailsDialogController.open();
-      this.appDialogController.close();
-    }
   }
 
   onShowDeleteWarnDialog() {
-    if (this.isShowWarning == true) {
+    this.credDetailsDialog?.close();
-      this.deleteWarnDialog.open();
+    this.deleteWarnDialog.open();
-    } else {
-      this.detailsDialogController.close();
-      this.deleteWarnDialog.close();
-    }
   }
 
   build() {
@@ -514,7 +381,8 @@ export struct componentPublic {
     .height($r('app.float.wh_value_48'))
     .onClick(() => {
       this.mShowAppCaPresenter.getAppCred(this.keyUri, () => {
-        this.detailsDialogController.open();
+        this.getAuthorizedAppList();
+        this.credDetailsDialog.open();
       });
     })
   }
@@ -525,13 +393,19 @@ export struct componentPublic {
 struct evidenceList {
   @State mShowAppCaPresenter: CmShowAppCredPresenter = CmShowAppCredPresenter.getInstance();
   @State mFaPresenter: CMFaPresenter = CMFaPresenter.getInstance();
-  @State isTouched: boolean = false;
-  @State currentIndex: number = 0
-  @State fontColor: Resource = $r('app.color.evidenceList_TabBuilder_fontColor_182431')
   private publicScroller: Scroller = new Scroller();
 
+  @Styles normalStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
+    .borderRadius($r('app.float.wh_value_10'))
+  };
+
+  @Styles pressedStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
+    .borderRadius($r('app.float.wh_value_10'))
+  };
+
   aboutToAppear() {
-    console.info('in aboutToAppear');
     this.mShowAppCaPresenter.updateAppCredListCallback(() => {
       console.info('get AppCredList first');
     })
@@ -547,13 +421,19 @@ struct evidenceList {
       })
     } else if (uri === 'requestAuthorize') {
       this.mFaPresenter.startRequestAuth(GlobalContext.getContext().getAbilityWant().parameters?.appUid as string);
+    } else {
+      console.info('The want type is not supported.');
     }
   }
 
   build() {
     Column() {
-      GridRow({ columns: 12, gutter: vp2px(1) === 2 ? '12vp' : '0vp' }) {
+      GridRow({
-        GridCol({ span: { xs: 12, sm: 12, md: 12, lg: 8 }, offset: { xs: 0, sm: 0, md: 0, lg: 2 } }) {
+        columns: COPIES_NUM,
+        gutter: vp2px(1) === 2 ? $r('app.float.wh_value_12') : $r('app.float.wh_value_0')
+      }) {
+        GridCol({ span: { xs: COPIES_NUM, sm: COPIES_NUM, md: COPIES_NUM, lg: COPIES_NUM },
+          offset: { xs: 0, sm: 0, md: 0, lg: 0 } }) {
           Row() {
             Column() {
               HeadComponent({ headName: $r('app.string.userEvidence') })
@@ -573,6 +453,10 @@ struct evidenceList {
                             mShowAppCaPresenter: $mShowAppCaPresenter
                           })
                         }
+                        .stateStyles({
+                          normal: this.normalStyle,
+                          pressed: this.pressedStyle
+                        });
                       }, (item: CredentialAbstractVo) => JSON.stringify(item))
                     }
                     .scrollBar(BarState.Off)
@@ -584,12 +468,12 @@ struct evidenceList {
                     })
                     .divider({
                       strokeWidth: $r('app.float.user_list_divider_strokeWidth_value'),
-                      color: $r('app.color.user_list_divider_color_000000'),
+                      color: $r('sys.color.ohos_id_color_list_separator'),
-                      endMargin: '3vp'
+                      endMargin: $r('app.float.wh_value_3')
                     })
                     .visibility(this.mShowAppCaPresenter.credList.length > 0 ? Visibility.Visible : Visibility.None)
                   }
-                  .position({ y: 0 })
+                  .position({ y: $r('app.float.wh_value_0') })
                   .scrollable(ScrollDirection.Vertical)
                   .scrollBar(BarState.Off)
                   .margin({
@@ -597,7 +481,7 @@ struct evidenceList {
                     right: $r('app.float.wh_value_12')
                   })
                   .borderRadius($r('app.float.Evidence_borderRadius'))
-                  .backgroundColor($r('app.color.credentials_app_finish_backgroundColor'))
+                  .backgroundColor($r('sys.color.ohos_id_color_list_card_bg'))
 
                   ScrollBar({ scroller: this.publicScroller, direction: ScrollBarDirection.Vertical,
                     state: BarState.Auto }) {
@@ -606,7 +490,7 @@ struct evidenceList {
                       .height($r('app.float.wh_value_50'))
                       .borderRadius($r('app.float.wh_value_10'))
                       .backgroundColor($r('sys.color.ohos_id_color_foreground'))
-                      .opacity(0.4)
+                      .opacity($r('app.float.text_opacity_0_4'))
                   }
                   .width($r('app.float.wh_value_3'))
                   .margin({
@@ -630,7 +514,7 @@ struct evidenceList {
           .width(WidthPercent.WH_100_100)
           .height(WidthPercent.WH_100_100);
         }
-        .margin(vp2px(1) === 2 ? '24vp' : '0vp')
+        .margin(vp2px(1) === 2 ? $r('app.float.item_common_horizontal_margin') : $r('app.float.wh_value_0'))
       }
       .width(WidthPercent.WH_100_100)
       .height(WidthPercent.WH_100_100);

CertManager/src/main/ets/pages/certInstallAliasInput.ets

@@ -14,12 +14,13 @@
  */
 
 import HeadComponent from '../common/component/headComponent';
-import { WidthPercent, LocationChoice, ConfigValue } from '../common/util/ConfigData';
+import { WidthPercent, ConfigValue } from '../common/util/ConfigData';
 import router from '@ohos.router';
 import CmInstallPresenter from '../presenter/CmInstallPresenter';
 import CmFaPresenter from '../presenter/CmFaPresenter';
 import { GlobalContext } from '../common/GlobalContext';
-import { RouterFileVo } from '../model/CertManagerVo/RouterInfoVo';
+import { RouterFileVo, RouterParams } from '../model/CertManagerVo/RouterInfoVo';
+import { CMModelErrorCode } from '../model/CertMangerModel';
 
 @Entry
 @Component
@@ -27,6 +28,7 @@ struct CertInstallAliasInput {
   @State mAppCredAuthPresenter: CmInstallPresenter = CmInstallPresenter.getInstance();
   @State mFaPresenter: CmFaPresenter = CmFaPresenter.getInstance();
   @State certAlias: string = '';
+  @State isCertLong: boolean = false;
 
   onPageShow() {
     let uri = GlobalContext.getContext().getAbilityWant().uri;
@@ -38,6 +40,8 @@ struct CertInstallAliasInput {
       })
     } else if (uri === 'requestAuthorize') {
       this.mFaPresenter.startRequestAuth(GlobalContext.getContext().getAbilityWant().parameters?.appUid as string);
+    } else {
+      console.info('The want type is not supported');
     }
   }
 
@@ -55,15 +59,19 @@ struct CertInstallAliasInput {
           })
           .alignSelf(ItemAlign.Start)
 
-        TextInput()
+        TextInput({ text: this.certAlias })
           .type(InputType.Normal)
           .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
           .enterKeyType(EnterKeyType.Done)
           .fontSize($r('sys.float.ohos_id_text_size_body1'))
           .fontWeight(FontWeight.Medium)
-          .fontColor($r('sys.color.ohos_id_color_text_primary'))
+          .defaultFocus(true)
+          .fontColor($r('sys.color.ohos_id_color_text_hint'))
           .onChange((value: string) => {
             this.certAlias = value;
+            if (value.length === 0) {
+              this.isCertLong = false;
+            }
           })
           .maxLength(ConfigValue.ALIAS_MAX_LENGTH)
           .margin({
@@ -73,15 +81,16 @@ struct CertInstallAliasInput {
           .height($r('app.float.distance_48'))
 
         Row() {
-          Divider().color($r('app.color.CertManager_Divider_Color_182431'))
+          Divider().color($r('sys.color.ohos_id_color_list_separator'))
         }
         .margin({
           left: $r('app.float.distance_24'),
           right: $r('app.float.distance_24'),
         })
 
-        Text($r('app.string.installAliasInputInfo'))
+        Text(this.isCertLong ? $r('app.string.inputAliasWarn') : $r('app.string.installAliasInputInfo'))
-          .fontColor($r('sys.color.ohos_id_color_text_primary'))
+          .fontColor(this.isCertLong ? $r('sys.color.ohos_id_color_warning')
+            : $r('sys.color.ohos_id_color_text_primary'))
           .fontWeight(FontWeight.Regular)
           .fontSize($r('sys.float.ohos_id_text_size_body2'))
           .margin({
@@ -103,7 +112,7 @@ struct CertInstallAliasInput {
               .fontColor($r('sys.color.ohos_id_color_text_hyperlink'))
           }
           .type(ButtonType.Capsule)
-          .backgroundColor($r('app.color.install_cancel_bt_bg_color'))
+          .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
           .width($r('app.float.component_button_width_phone'))
           .height($r('app.float.application_button_height'))
           .margin({
@@ -129,8 +138,20 @@ struct CertInstallAliasInput {
               right: $r('app.float.distance_24'),
             })
             .onClick(() => {
-              let fileInfo: RouterFileVo = router.getParams() as RouterFileVo;
+              let routerParams: RouterParams = router.getParams() as RouterParams;
-              this.mAppCredAuthPresenter.installCert(fileInfo.uri, this.certAlias, fileInfo.suffix);
+              let fileInfo: RouterFileVo = routerParams.fileInfo as RouterFileVo;
+              let pwd: string = routerParams.pwd || '';
+              this.mAppCredAuthPresenter.checkCertNameLength(fileInfo.uri, this.certAlias, fileInfo.suffix, pwd)
+                .then((result: number) => {
+                  if (result !== CMModelErrorCode.CM_MODEL_ERROR_SUCCESS) {
+                    console.info("CertNameLength reached limit!");
+                    this.isCertLong = true;
+                  } else {
+                    console.info("CertNameLength is within the limit !");
+                    this.isCertLong = false;
+                    this.mAppCredAuthPresenter.installCert(fileInfo.uri, this.certAlias, fileInfo.suffix);
+                  }
+                })
             })
           } else {
             Button() {
@@ -140,7 +161,7 @@ struct CertInstallAliasInput {
                 .fontColor($r('app.color.install_confirm_bt_font_color'))
             }
             .type(ButtonType.Capsule)
-            .backgroundColor($r('app.color.install_confirm_bt_bg_disable_color'))
+            .backgroundColor($r('app.color.install_confirm_bt_bg_color'))
             .width($r('app.float.component_button_width_phone'))
             .height($r('app.float.application_button_height'))
             .margin({

CertManager/src/main/ets/pages/certInstallFromStorage.ets

@@ -19,18 +19,81 @@ import CmFaPresenter from '../presenter/CmFaPresenter';
 import { GlobalContext } from '../common/GlobalContext';
 import ComponentConfig from '../common/component/ComponentConfig';
 import router from '@ohos.router';
+import { CustomContentDialog } from '@ohos.arkui.advanced.Dialog';
 import checkUserAuthModel from '../model/CheckUserAuthModel';
 
+const COPIES_NUM: number = 12;
 
 @Entry
 @Component
 struct CertificateComponent {
-  @State touchedItem: boolean = false;
   @State columnMargin: string = '12vp';
   @State mFaPresenter: CmFaPresenter = CmFaPresenter.getInstance();
-  @State isTouched: boolean = false;
   @State installCertFlag: boolean = false;
-  @State pageKey: string = '';
+
+  @Styles normalStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+  };
+  @Styles pressedStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+  };
+
+  rootCertificateDialog: CustomDialogController = new CustomDialogController({
+    alignment: DialogAlignment.Center,
+    builder: CustomContentDialog({
+      contentBuilder: () => {
+        this.rootCertificateContent();
+      },
+      contentAreaPadding: { right: $r('app.float.wh_value_0') },
+      buttons: [
+        {
+          value: $r('app.string.root_certificate_cancel'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+          }
+        },
+        {
+          value: $r('app.string.root_certificate_continue'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+            this.installCertFlag = true;
+            this.checkUserAuth();
+          }
+        }
+      ]
+    })
+  })
+
+  @Builder
+  rootCertificateContent(): void {
+    Column() {
+      Text($r('app.string.root_certificate'))
+        .height($r('app.float.wh_value_56'))
+        .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .fontWeight(FontWeight.Medium)
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+
+      Text($r('app.string.root_certificate_message'))
+        .fontSize($r('sys.float.ohos_id_text_size_body1'))
+        .fontWeight(FontWeight.Regular)
+        .fontColor($r('sys.color.ohos_id_color_primary'))
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+    }
+    .width(WidthPercent.WH_100_100)
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
+  }
 
   checkUserAuth() {
     let titleStr = getContext().resourceManager.getStringSync($r('app.string.Identity_Authentication'));
@@ -48,8 +111,11 @@ struct CertificateComponent {
 
   build() {
     Column() {
-      GridRow({ columns: 12, gutter: vp2px(1) === 2 ? '12vp' : '0vp' }) {
+      GridRow({
-        GridCol({ span: 12 }) {
+        columns: COPIES_NUM,
+        gutter: vp2px(1) === 2 ? $r('app.float.wh_value_12') : $r('app.float.wh_value_0')
+      }) {
+        GridCol({ span: COPIES_NUM }) {
           Row({}) {
             Column({ space: this.columnMargin }) {
               HeadComponent({ headName: $r('app.string.installInStorageDevice') })
@@ -66,34 +132,18 @@ struct CertificateComponent {
                           .textAlign(TextAlign.Start)
                       }
                     }
+                    .stateStyles({
+                      normal: this.normalStyle,
+                      pressed: this.pressedStyle
+                    })
                     .margin({ top: $r('app.float.wh_value_4') })
                     .height($r('app.float.wh_value_48'))
                     .onClick(() => {
-                      AlertDialog.show({
+                      this.rootCertificateDialog.open();
-                        title: $r('app.string.root_certificate'),
-                        message: $r('app.string.root_certificate_message'),
-                        autoCancel: true,
-                        alignment:DialogAlignment.Center,
-                        offset: { dx: 0, dy: 0},
-                        gridCount: 4,
-                        primaryButton: {
-                          value: $r('app.string.root_certificate_cancel'),
-                          action: () => {
-                          }
-                        },
-                        secondaryButton: {
-                          value: $r('app.string.root_certificate_continue'),
-                          action: () => {
-                            this.installCertFlag = true
-                            this.checkUserAuth()
-                          }
-                        }
-                      })
                     })
 
                     Divider()
-                      .strokeWidth(1)
+                      .color($r("sys.color.ohos_id_color_list_separator"))
-                      .color($r("app.color.sys_list_divider_color_000000"))
                       .margin({
                         left: $r('app.float.wh_value_12'),
                         right: $r('app.float.wh_value_12')
@@ -109,28 +159,20 @@ struct CertificateComponent {
                           .textAlign(TextAlign.Start)
                       }
                       .onClick(() => {
-                        this.installCertFlag = false
+                        this.installCertFlag = false;
-                        this.checkUserAuth()
+                        this.checkUserAuth();
                       })
                     }
+                    .stateStyles({
+                      normal: this.normalStyle,
+                      pressed: this.pressedStyle
+                    })
                     .height($r('app.float.wh_value_48'))
                   }
                   .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
                   .borderRadius($r('app.float.radius_20'))
                   .height(ComponentConfig.WH_100_100)
                   .width(ComponentConfig.WH_100_100)
-                  .linearGradient(this.isTouched ? {
-                    angle: 90,
-                    direction: GradientDirection.Right,
-                    colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
-                  } : {
-                    angle: 90,
-                    direction: GradientDirection.Right,
-                    colors: [
-                      [$r("sys.color.ohos_id_color_foreground_contrary"), 1],
-                      [$r("sys.color.ohos_id_color_foreground_contrary"), 1]
-                    ]
-                  })
                 }
                 .height($r('app.float.wh_value_104'))
               }
@@ -146,7 +188,7 @@ struct CertificateComponent {
           .height(WidthPercent.WH_100_100);
         }
       }
-      .margin(vp2px(1) === 2 ? '24vp' : '0vp')
+      .margin(vp2px(1) === 2 ? $r('app.float.item_common_horizontal_margin') : $r('app.float.wh_value_0'))
       .width(WidthPercent.WH_100_100)
       .height(WidthPercent.WH_100_100);
     }
@@ -165,6 +207,8 @@ struct CertificateComponent {
       })
     } else if (uri === 'requestAuthorize') {
       this.mFaPresenter.startRequestAuth(GlobalContext.getContext().getAbilityWant().parameters?.appUid as string);
+    } else {
+      console.info('The want type is not supported');
     }
   }
 }

CertManager/src/main/ets/pages/certManagerFa.ets

@@ -13,15 +13,17 @@
  * limitations under the License.
  */
 
-import { WidthPercent,  ConfigValue } from '../common/util/ConfigData';
+import { WidthPercent } from '../common/util/ConfigData';
 import HeadComponent from '../common/component/headComponent';
 import { SubEntryComponent } from '../common/component/subEntryComponent';
 import CmFaPresenter from '../presenter/CmFaPresenter';
 import { GlobalContext } from '../common/GlobalContext';
 import router from '@ohos.router';
 import promptAction from '@ohos.promptAction';
+import { CustomContentDialog } from '@ohos.arkui.advanced.Dialog';
 
 const DISPLAY_DURATION: number = 2000;
+const COPIES_NUM: number = 12;
 
 class CertListItem {
   public targetPage: string = '';
@@ -31,18 +33,26 @@ class CertListItem {
 @Entry
 @Component
 struct CertificateComponent {
-  @State touchedItem: boolean = false;
   @State columnMargin: string = '12vp';
   @State mFaPresenter: CmFaPresenter = CmFaPresenter.getInstance();
   private listItems: Array<CertListItem> = [
     { targetPage: 'pages/trustedCa', title: $r('app.string.trustedEvidence') },
     { targetPage: 'pages/cerEvidenceFa', title: $r('app.string.userEvidence') }
   ];
+  @Styles normalStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
+  };
+  @Styles pressedStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
+  };
 
   build() {
     Column() {
-      GridRow({ columns: 12, gutter: vp2px(1) === 2 ? '12vp' : '0vp' }) {
+      GridRow({
-        GridCol({ span: { xs: 12, sm: 12, md: 12, lg: 8 }, offset: { xs: 0, sm: 0, md: 0, lg: 2 } }) {
+        columns: COPIES_NUM,
+        gutter: vp2px(1) === 2 ? $r('app.float.wh_value_12') : $r('app.float.wh_value_0')
+      }) {
+        GridCol({ span: COPIES_NUM }) {
           Column({ space: this.columnMargin }) {
             HeadComponent({ headName: $r('app.string.certificateTab') })
             Column({ space: this.columnMargin }) {
@@ -51,17 +61,21 @@ struct CertificateComponent {
                   ListItem() {
                     SubEntryComponent({ targetPage: item.targetPage, title: item.title })
                   }
+                  .stateStyles({
+                    normal: this.normalStyle,
+                    pressed: this.pressedStyle
+                  });
                 }, (item: CertListItem) => JSON.stringify(item))
               }
               .padding($r('app.float.wh_value_4'))
               .divider({
                 strokeWidth: $r('app.float.sys_list_divider_strokeWidth_value'),
-                color: $r('app.color.sys_list_divider_color_000000'),
+                color: $r('sys.color.ohos_id_color_list_separator'),
                 startMargin: $r('app.float.wh_value_8'),
                 endMargin: $r('app.float.wh_value_8')
               })
               .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
-              .backgroundColor($r('app.color.user_list_backgroundColor_FFFFFF'))
+              .backgroundColor($r('sys.color.ohos_id_color_list_card_bg'))
 
               CertInstallComponent({ mFaPresenter: $mFaPresenter })
 
@@ -75,7 +89,7 @@ struct CertificateComponent {
           .height(WidthPercent.WH_100_100)
         }
       }
-      .margin(vp2px(1) === 2 ? '24vp' : '0vp')
+      .margin(vp2px(1) === 2 ? $r('app.float.item_common_horizontal_margin') : $r('app.float.wh_value_0'))
       .width(WidthPercent.WH_100_100)
       .height(WidthPercent.WH_100_100);
     }
@@ -94,130 +108,95 @@ struct CertificateComponent {
       })
     } else if (uri === 'requestAuthorize') {
       this.mFaPresenter.startRequestAuth(GlobalContext.getContext().getAbilityWant().parameters?.appUid as string);
+    } else {
+      console.info('The want type is not supported');
     }
   }
 }
 
-@CustomDialog
-@Component
-struct CustomDialogExampleDeleteAll {
-  controller?: CustomDialogController;
-  @Link deleteAll: CmFaPresenter;
-
-  build() {
-    Column() {
-      GridRow({ columns: 12, gutter: vp2px(1) === 2 ? '12vp' : '0vp', }) {
-        GridCol({ span: { xs: 12, sm: 12, md: 12, lg: 8 }, offset: { xs: 0, sm: 0, md: 0, lg: 2 } }) {
-          Column() {
-            Text($r('app.string.deleteAllCredDialogTitle'))
-              .height($r('app.float.wh_value_56'))
-              .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
-              .fontColor($r('sys.color.ohos_id_color_text_primary'))
-              .fontWeight(FontWeight.Medium)
-              .margin({
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-              .alignSelf(ItemAlign.Start)
-            Text($r('app.string.deleteAllCredDialogMessage'))
-              .fontSize($r('sys.float.ohos_id_text_size_body1'))
-              .fontWeight(FontWeight.Regular)
-              .fontColor($r('sys.color.ohos_id_color_text_primary'))
-              .margin({
-                top: $r('app.float.wh_value_16'),
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-              .alignSelf(ItemAlign.Start)
-
-            Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center,
-              justifyContent: FlexAlign.SpaceAround }) {
-              Button($r('app.string.deleteAllCredCancel'))
-                .onClick(() => {
-                  if (this.controller !== undefined) {
-                    this.controller.close()
-                  }
-                })
-                .backgroundColor($r('app.color.credentials_app_finish_backgroundColor'))
-                .fontSize($r('sys.float.ohos_id_text_size_button1'))
-                .fontColor($r('sys.color.ohos_id_color_text_hyperlink'))
-                .width($r('app.float.wh_value_152'))
-                .height($r('app.float.wh_value_40'))
-              Divider()
-                .strokeWidth(ConfigValue.VERTICAL_DIVIDER_WIDTH)
-                .color($r('sys.color.ohos_id_color_list_separator'))
-                .vertical(true)
-                .height($r('app.float.wh_value_40'))
-                .opacity($r('app.float.opacity_0_2'))
-              Button($r('app.string.deleteAllCredDelete'))
-                .onClick(() => {
-                  this.deleteAll.uninstallAllCert();
-                  if (this.controller !== undefined) {
-                    this.controller.close()
-                    promptAction.showToast({
-                      message: $r('app.string.delete_success'),
-                      duration: DISPLAY_DURATION,
-                    })
-                  }
-                })
-                .backgroundColor($r('app.color.credentials_app_finish_backgroundColor'))
-                .fontSize($r('sys.float.ohos_id_text_size_button1'))
-                .fontColor($r('sys.color.ohos_id_color_warning'))
-                .width($r('app.float.wh_value_152'))
-                .height($r('app.float.wh_value_40'))
-            }
-            .height($r('app.float.wh_value_64'))
-            .padding({
-              bottom: $r('app.float.wh_value_16')
-            })
-            .margin({
-              top: $r('app.float.wh_value_16'),
-              left: $r('app.float.wh_value_24'),
-              right: $r('app.float.wh_value_24')
-            })
-          }
-          .width(WidthPercent.WH_100_100)
-          .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
-          .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary'))
-        }
-      }
-    }
-    .margin({
-      bottom: $r('sys.float.ohos_id_dialog_margin_bottom'),
-      left: $r('sys.float.ohos_id_dialog_margin_start'),
-      right: $r('sys.float.ohos_id_dialog_margin_end'),
-    })
-  }
-}
-
 @Component
 struct DeleteAll {
-  @State isTouched: boolean = false;
   @Link mFaPresenter: CmFaPresenter;
+  @Styles normalStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+  };
+  @Styles pressedStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+  };
+
   deleteWarnDialog: CustomDialogController = new CustomDialogController({
-    builder: CustomDialogExampleDeleteAll({ deleteAll: $mFaPresenter }),
+    builder: CustomContentDialog({
-    autoCancel: true,
+      contentBuilder: () => {
-    customStyle: true,
+        this.deleteWarnContent();
-    alignment: DialogAlignment.Bottom,
+      },
+      contentAreaPadding: {right: $r('app.float.wh_value_0')},
+      buttons: [
+        {
+          value: $r('app.string.deleteAllCredCancel'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+            this.deleteWarnDialog?.close();
+          }
+        },
+        {
+          value: $r('app.string.deleteAllCredDelete'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+            this.mFaPresenter.uninstallAllCert();
+            this.deleteWarnDialog?.close();
+            promptAction.showToast({
+              message: $r('app.string.delete_success'),
+              duration: DISPLAY_DURATION,
+            })
+          },
+          role: ButtonRole.ERROR
+        }
+      ]
+    }),
   })
 
+  @Builder
+  deleteWarnContent(): void {
+    Column() {
+      Text($r('app.string.deleteAllCredDialogTitle'))
+        .height($r('app.float.wh_value_56'))
+        .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .fontWeight(FontWeight.Medium)
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+
+      Text($r('app.string.deleteAllCredDialogMessage'))
+        .fontSize($r('sys.float.ohos_id_text_size_body1'))
+        .fontWeight(FontWeight.Regular)
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .margin({
+          top: $r('app.float.wh_value_16'),
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+    }
+    .width(WidthPercent.WH_100_100)
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+  }
+
   build() {
     Row() {
       Text($r('app.string.deleteAllCred'))
         .fontSize($r('app.float.font_16'))
         .lineHeight($r('app.float.wh_value_22'))
         .fontWeight(FontWeight.Medium)
-        .fontColor($r('app.color.cm_del_all_font_color'))
+        .fontColor($r('sys.color.ohos_id_color_text_hyperlink'))
         .padding({ left: $r('app.float.distance_8') })
-        .linearGradient(this.isTouched ? {
+        .stateStyles({
-          angle: 90,
+          normal: this.normalStyle,
-          direction: GradientDirection.Right,
+          pressed: this.pressedStyle
-          colors: [[$r('app.color.DCEAF9'), 0.0], [$r('app.color.FAFAFA'), 1.0]]
-        } : {
-          angle: 90,
-          direction: GradientDirection.Right,
-          colors: [[$r('sys.color.ohos_id_color_foreground_contrary'), 1],
-            [$r('sys.color.ohos_id_color_foreground_contrary'), 1]]
         })
         .height(WidthPercent.WH_100_100)
         .borderRadius($r('app.float.radius_20'))
@@ -228,16 +207,6 @@ struct DeleteAll {
     .height($r('app.float.wh_value_56'))
     .width(WidthPercent.WH_100_100)
     .borderRadius($r('app.float.radius_24'))
-    .onTouch((event?: TouchEvent) => {
-      if (event !== undefined) {
-        if (event.type === TouchType.Down) {
-          this.isTouched = true;
-        }
-        if (event.type === TouchType.Up) {
-          this.isTouched = false;
-        }
-      }
-    })
     .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary'))
     .onClick(() => {
       this.deleteWarnDialog.open();
@@ -247,8 +216,15 @@ struct DeleteAll {
 
 @Component
 export struct CertInstallComponent {
-  @State isTouched: boolean = false;
   @Link mFaPresenter: CmFaPresenter;
+  @Styles normalStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_card_bg'))
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+  };
+  @Styles pressedStyle() {
+    .backgroundColor($r('sys.color.ohos_id_color_click_effect'))
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+  };
 
   build() {
     Column() {
@@ -257,7 +233,7 @@ export struct CertInstallComponent {
           Text($r('app.string.installInStorageDevice'))
             .fontSize($r('app.float.font_16'))
             .lineHeight($r('app.float.wh_value_22'))
-            .fontColor($r('app.color.font_color_182431'))
+            .fontColor($r('sys.color.ohos_id_color_text_primary'))
             .fontWeight(FontWeight.Medium)
             .margin({ left: $r('app.float.wh_value_8') });
         }
@@ -272,25 +248,9 @@ export struct CertInstallComponent {
       .borderRadius($r('app.float.radius_20'))
       .height(WidthPercent.WH_100_100)
       .width(WidthPercent.WH_100_100)
-      .linearGradient(this.isTouched ? {
+      .stateStyles({
-        angle: 90,
+        normal: this.normalStyle,
-        direction: GradientDirection.Right,
+        pressed: this.pressedStyle
-        colors: [[$r('app.color.DCEAF9'), 0.0], [$r('app.color.FAFAFA'), 1.0]]
-      } : {
-        angle: 90,
-        direction: GradientDirection.Right,
-        colors: [[$r('sys.color.ohos_id_color_foreground_contrary'), 1],
-          [$r('sys.color.ohos_id_color_foreground_contrary'), 1]]
-      })
-      .onTouch((event?: TouchEvent) => {
-        if (event !== undefined) {
-          if (event.type === TouchType.Down) {
-            this.isTouched = true;
-          }
-          if (event.type === TouchType.Up) {
-            this.isTouched = false;
-          }
-        }
       })
     }
     .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary'))

CertManager/src/main/ets/pages/certPwdInput.ets

@@ -14,19 +14,28 @@
  */
 
 import HeadComponent from '../common/component/headComponent';
-import { WidthPercent, LocationChoice, ConfigValue } from '../common/util/ConfigData';
+import { WidthPercent, ConfigValue } from '../common/util/ConfigData';
 import router from '@ohos.router';
 import CmFaPresenter from '../presenter/CmFaPresenter';
 import { GlobalContext } from '../common/GlobalContext';
 import { RouterFileVo } from '../model/CertManagerVo/RouterInfoVo';
+import CmInstallPresenter from '../presenter/CmInstallPresenter';
+import { CMModelErrorCode } from '../model/CertMangerModel';
+import ComponentConfig from '../common/component/ComponentConfig';
+import PreventScreenshotsPresenter from '../model/PreventScreenshotsModel';
 
 @Entry
 @Component
 struct CertPwdInput {
   certPwd: string = '';
   @State mFaPresenter: CmFaPresenter = CmFaPresenter.getInstance();
+  @State isPasswordError: boolean = false;
+  @State passWordWarn: number = 0;
+  @State mAppCredAuthPresenter: CmInstallPresenter = CmInstallPresenter.getInstance();
+  @State mPreventScreenshotsPresenter: PreventScreenshotsPresenter = PreventScreenshotsPresenter.getInstance();
 
   onPageShow() {
+    this.mPreventScreenshotsPresenter.PreventScreenshots(true);
     let uri = GlobalContext.getContext().getAbilityWant().uri;
     GlobalContext.getContext().clearAbilityWantUri();
 
@@ -36,9 +45,15 @@ struct CertPwdInput {
       })
     } else if (uri === 'requestAuthorize') {
       this.mFaPresenter.startRequestAuth(GlobalContext.getContext().getAbilityWant().parameters?.appUid as string);
+    } else {
+      console.info('The want type is not supported');
     }
   }
 
+  onPageHide() {
+    this.mPreventScreenshotsPresenter.PreventScreenshots(false);
+  }
+
   build() {
     Column() {
       Column() {
@@ -53,18 +68,36 @@ struct CertPwdInput {
           })
           .alignSelf(ItemAlign.Start);
 
-        TextInput()
+        TextInput({ text: this.certPwd })
           .type(InputType.Password)
-          .onChange((value: string) => {
+          .focusable(true)
-            this.certPwd = value;
+          .border(this.isPasswordError ? {
-          })
+            width: $r('app.float.wh_value_1'),
+            color: $r('sys.color.ohos_id_color_warning')
+          } : { width: $r('app.float.wh_value_0') })
           .maxLength(ConfigValue.PWD_MAX_LENGTH)
           .margin({
             top: $r('app.float.distance_16'),
             left: $r('app.float.distance_24'),
             right: $r('app.float.distance_24')
           })
-          .height('40vp')
+          .height($r('app.float.wh_value_40'))
+          .onChange((value: string) => {
+            this.certPwd = value;
+          })
+
+        Row() {
+          Text($r('app.string.Password_Message'))
+            .fontFamily('HarmonyHeiTi')
+            .fontSize($r('app.float.distance_14'))
+            .fontWeight(FontWeight.Regular)
+            .lineHeight($r('app.float.distance_19'))
+            .width(ComponentConfig.WH_100_100)
+            .textAlign(TextAlign.Center)
+            .fontColor($r('sys.color.ohos_id_color_warning'))
+            .visibility(this.passWordWarn === CMModelErrorCode.CM_MODEL_ERROR_EXCEPTION
+              ? Visibility.Visible : Visibility.None)
+        }
       }
       .width(WidthPercent.WH_100_100)
       .height(WidthPercent.WH_75_100);
@@ -103,12 +136,25 @@ struct CertPwdInput {
             right: $r('app.float.distance_24'),
           })
           .onClick(() => {
-            GlobalContext.getContext().getPwdStore().setCertPwd(this.certPwd)
             let fileInfo: RouterFileVo = router.getParams() as RouterFileVo;
-            router.pushUrl({
+            this.isPasswordError = false;
-              url: 'pages/certInstallAliasInput',
+            this.mAppCredAuthPresenter.AuthenticationPassword(fileInfo.uri, fileInfo.suffix, this.certPwd)
-              params: fileInfo
+              .then((result: number) => {
-            })
+                this.passWordWarn = result;
+                if (this.passWordWarn !== CMModelErrorCode.CM_MODEL_ERROR_EXCEPTION) {
+                  GlobalContext.getContext().getPwdStore().setCertPwd(this.certPwd);
+                  let fileInfo: RouterFileVo = router.getParams() as RouterFileVo;
+                  router.pushUrl({
+                    url: 'pages/certInstallAliasInput',
+                    params: {
+                      fileInfo: fileInfo,
+                      pwd: this.certPwd
+                    }
+                  })
+                } else {
+                  this.isPasswordError = true;
+                }
+              })
           })
         }
         .margin({ bottom: $r('app.float.wh_value_24') })

CertManager/src/main/ets/pages/requestAuth.ets

@@ -18,267 +18,219 @@ import router from '@ohos.router';
 import { WidthPercent, ConfigValue } from '../common/util/ConfigData';
 import { CredentialAbstractVo } from '../model/CertManagerVo/CredentialAbstractVo';
 import { RouterAppUidVo } from '../model/CertManagerVo/RouterInfoVo';
-
+import { CustomContentDialog } from '@ohos.arkui.advanced.Dialog';
-@CustomDialog
-@Component
-struct CustomDialogAuthForApp {
-  controller?: CustomDialogController
-  @State mAppCredAuthPresenter: CmAppCredAuthPresenter = CmAppCredAuthPresenter.getInstance();
-  selectUri: string = '';
-  private authScroller: Scroller = new Scroller();
-
-  aboutToAppear(): void {
-    console.info('certPwdInput about to appear');
-    let appUidInfo: RouterAppUidVo = router.getParams() as RouterAppUidVo;
-    this.mAppCredAuthPresenter.updateAppNameFromUid(appUidInfo.appUid as string);
-    this.mAppCredAuthPresenter.updateAppCredList();
-  }
-
-  build() {
-    Column() {
-      GridRow({ columns: 12, gutter: vp2px(1) === 2 ? '12vp' : '0vp' }) {
-        GridCol({ span: { xs: 12, sm: 12, md: 12, lg: 8 }, offset: { xs: 0, sm: 0, md: 0, lg: 2 } }) {
-          Row({}) {
-            Column() {
-              Text($r('app.string.pickCredToAuth'))
-                .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
-                .height($r('app.float.wh_value_56'))
-                .fontColor($r('sys.color.ohos_id_color_text_primary'))
-                .fontWeight(FontWeight.Medium)
-                .margin({
-                  left: $r('app.float.wh_value_24'),
-                  right: $r('app.float.wh_value_24')
-                })
-                .alignSelf(ItemAlign.Start)
-
-              Text($r('app.string.requestAuthMsg', this.mAppCredAuthPresenter.appName))
-                .fontSize($r('sys.float.ohos_id_text_size_body1'))
-                .fontColor($r('sys.color.ohos_id_color_text_primary'))
-                .fontWeight(FontWeight.Regular)
-                .margin({
-                  top: $r('app.float.wh_value_8'),
-                  left: $r('app.float.wh_value_24'),
-                  right: $r('app.float.wh_value_24')
-                })
-                .alignSelf(ItemAlign.Start)
-
-              if (this.mAppCredAuthPresenter.credList.length > ConfigValue.REQUEST_AUTH_MAX_LENGTH) {
-                Stack({ alignContent: Alignment.End }) {
-                  Scroll(this.authScroller) {
-                    List() {
-                      ForEach(this.mAppCredAuthPresenter.credList, (item: CredentialAbstractVo) => {
-                        ListItem() {
-                          Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
-
-                            Column() {
-                              Text(item.alias)
-                                .fontSize($r('app.float.font_18'))
-                                .fontColor($r('app.color.request_auth_font_color'))
-                                .fontWeight(FontWeight.Medium)
-                                .textAlign(TextAlign.Start);
-                            }
-                            .alignItems(HorizontalAlign.Start)
-
-                            Column() {
-                              Radio({ value: item.alias, group: 'appCredGroup' })
-                                .checked(false)
-                                .onChange((value: boolean) => {
-                                  console.log(item.alias + ' status is ' + value)
-                                  if (value) {
-                                    this.selectUri = item.keyUri;
-                                    console.log('selectUri is ' + this.selectUri)
-                                  }
-                                })
-                            }
-                            .alignItems(HorizontalAlign.End)
-                          }
-                          .width(WidthPercent.WH_100_100)
-                        }
-                        .height($r('app.float.wh_value_64'))
-                      }, (item: CredentialAbstractVo) => JSON.stringify(item))
-                    }
-                    .scrollBar(BarState.Off)
-                    .divider({
-                      strokeWidth: $r('app.float.request_auth_strokeWidth'),
-                      color: $r('app.color.request_auth_color'),
-                      endMargin: $r('app.float.request_auth_divider_endMargin') })
-                    .backgroundColor($r('app.color.request_auth_background_color'))
-                    .visibility(this.mAppCredAuthPresenter.credList.length > 0 ? Visibility.Visible : Visibility.None)
-                  }
-                  .scrollBar(BarState.Off)
-                  .margin({
-                    left: $r('app.float.wh_value_24'),
-                    right: $r('app.float.wh_value_24')
-                  })
-
-                  ScrollBar({ scroller: this.authScroller, direction: ScrollBarDirection.Vertical,
-                    state: BarState.Auto }) {
-                    Text()
-                      .width($r('app.float.wh_value_3'))
-                      .height($r('app.float.wh_value_50'))
-                      .borderRadius($r('app.float.wh_value_10'))
-                      .backgroundColor($r('sys.color.ohos_id_color_foreground'))
-                      .opacity(0.4)
-                  }
-                  .width($r('app.float.wh_value_3'))
-                  .margin({
-                    right: $r('app.float.wh_value_3')
-                  })
-                }
-                .height(WidthPercent.WH_50_100)
-              } else {
-                List() {
-                  ForEach(this.mAppCredAuthPresenter.credList, (item: CredentialAbstractVo) => {
-                    ListItem() {
-                      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
-                        Column() {
-                          Text(item.alias)
-                            .fontSize($r('app.float.font_18'))
-                            .fontColor($r('app.color.request_auth_font_color'))
-                            .fontWeight(FontWeight.Medium)
-                            .textAlign(TextAlign.Start);
-                        }
-                        .alignItems(HorizontalAlign.Start)
-
-                        Column() {
-                          Radio({ value: item.alias, group: 'appCredGroup' })
-                            .checked(false)
-                            .onChange((value: boolean) => {
-                              console.log(item.alias + ' status is ' + value)
-                              if (value) {
-                                this.selectUri = item.keyUri;
-                                console.log('selectUri is ' + this.selectUri)
-                              }
-                            })
-                        }
-                        .alignItems(HorizontalAlign.End)
-                      }
-                      .width(WidthPercent.WH_100_100)
-                    }
-                    .height($r('app.float.wh_value_64'))
-                  }, (item: CredentialAbstractVo) => JSON.stringify(item))
-                  ListItem() {
-                    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
-                      Column() {
-                        Text()
-                      }
-                      .alignItems(HorizontalAlign.Start)
-
-                      Column() {
-                        Radio({ value: 'null', group: 'appCredGroup' })
-                          .checked(false)
-                          .onChange((value: boolean) => {
-                            if (value) {
-                              this.selectUri = 'null';
-                              console.log('selectUri is ' + this.selectUri)
-                            }
-                          })
-                      }
-                    }
-                    .visibility(Visibility.None)
-                  }
-                }
-                .margin({
-                  left: $r('app.float.wh_value_24'),
-                  right: $r('app.float.wh_value_24')
-                })
-                .scrollBar(BarState.Off)
-                .divider({
-                  strokeWidth: $r('app.float.request_auth_strokeWidth'),
-                  color: $r('app.color.request_auth_color'),
-                  endMargin: $r('app.float.request_auth_divider_endMargin') })
-                .backgroundColor($r('app.color.request_auth_background_color'))
-                .visibility(this.mAppCredAuthPresenter.credList.length > 0 ? Visibility.Visible : Visibility.None)
-              }
-
-              Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center,
-                justifyContent: FlexAlign.SpaceAround }) {
-                Button($r('app.string.requestAuthCancel'))
-                  .onClick(() => {
-                    this.mAppCredAuthPresenter.cancelProcess();
-                    if (this.controller !== undefined) {
-                      this.controller.close();
-                    }
-                  })
-                  .backgroundColor($r('app.color.request_auth_background_color'))
-                  .fontColor($r('sys.color.ohos_id_color_text_hyperlink'))
-                  .fontSize($r('sys.float.ohos_id_text_size_button1'))
-                  .width($r('app.float.wh_value_152'))
-                  .height($r('app.float.wh_value_40'))
-
-                Divider()
-                  .strokeWidth(ConfigValue.VERTICAL_DIVIDER_WIDTH)
-                  .color($r('sys.color.ohos_id_color_list_separator'))
-                  .vertical(true)
-                  .height($r('app.float.wh_value_40'))
-                  .opacity($r('app.float.opacity_0_2'))
-
-                Button($r('app.string.requestAuthFinish'))
-                  .onClick(() => {
-                    console.info('requestAuthorize uri: ' + this.selectUri);
-                    let appUidInfo: RouterAppUidVo = router.getParams() as RouterAppUidVo;
-                    if (appUidInfo !== undefined && appUidInfo.appUid != undefined) {
-                      console.info('requestAuthorize appUid: ' + appUidInfo.appUid);
-                      this.mAppCredAuthPresenter.requestAuthorize(this.selectUri, appUidInfo.appUid);
-                      if (this.controller !== undefined) {
-                        this.controller.close();
-                      }
-                    } else {
-                      console.info('requestAuthorize fail');
-                    }
-                  })
-                  .backgroundColor($r('app.color.request_auth_background_color'))
-                  .fontColor($r('sys.color.ohos_id_color_text_hyperlink'))
-                  .fontSize($r('sys.float.ohos_id_text_size_button1'))
-                  .width($r('app.float.wh_value_152'))
-                  .height($r('app.float.wh_value_40'))
-              }
-              .height($r('app.float.wh_value_64'))
-              .padding({
-                bottom: $r('app.float.wh_value_16')
-              })
-              .margin({
-                left: $r('app.float.wh_value_24'),
-                right: $r('app.float.wh_value_24')
-              })
-            }
-            .width(WidthPercent.WH_100_100)
-            .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
-            .backgroundColor($r('sys.color.ohos_id_color_foreground_contrary'))
-          }
-        }
-      }
-      .margin(vp2px(1) === 2 ? '24vp' : '0vp')
-    }
-    .margin({
-      bottom: $r('sys.float.ohos_id_dialog_margin_bottom'),
-      left: $r('sys.float.ohos_id_dialog_margin_start'),
-      right: $r('sys.float.ohos_id_dialog_margin_end'),
-    })
-  }
-}
 
 @Entry
 @Component
 struct RadioAuth {
+  @State mAppCredAuthPresenter: CmAppCredAuthPresenter = CmAppCredAuthPresenter.getInstance();
+  selectUri: string = '';
+  private authScroller: Scroller = new Scroller();
+
   dialogController: CustomDialogController = new CustomDialogController({
-    builder: CustomDialogAuthForApp(),
+    builder: CustomContentDialog({
-    autoCancel: false,
+      contentBuilder: () => {
-    alignment: DialogAlignment.Bottom,
+        this.dialogControllerContent();
-    customStyle: true,
+      },
+      contentAreaPadding: {right: $r('app.float.wh_value_0')},
+      buttons: [
+        {
+          value: $r('app.string.requestAuthCancel'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+            this.mAppCredAuthPresenter.cancelProcess();
+            this.dialogController?.close();
+          }
+        },
+        {
+          value: $r('app.string.requestAuthFinish'),
+          buttonStyle: ButtonStyleMode.TEXTUAL,
+          action: () => {
+            console.debug('requestAuthorize uri: ' + this.selectUri);
+            let appUidInfo: RouterAppUidVo = router.getParams() as RouterAppUidVo;
+            if (appUidInfo !== undefined && appUidInfo.appUid != undefined) {
+              console.debug('requestAuthorize appUid: ' + appUidInfo.appUid);
+              this.mAppCredAuthPresenter.requestAuthorize(this.selectUri, appUidInfo.appUid);
+              this.dialogController?.close();
+            } else {
+              console.info('requestAuthorize fail');
+            }
+          },
+          role: ButtonRole.ERROR
+        }
+      ]
+    }),
   })
 
+  @Builder
+  dialogControllerContent(): void {
+    Column() {
+      Text($r('app.string.pickCredToAuth'))
+        .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle'))
+        .height($r('app.float.wh_value_56'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .fontWeight(FontWeight.Medium)
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+
+      Text($r('app.string.requestAuthMsg', this.mAppCredAuthPresenter.appName))
+        .fontSize($r('sys.float.ohos_id_text_size_body1'))
+        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+        .fontWeight(FontWeight.Regular)
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .alignSelf(ItemAlign.Start)
+
+      if (this.mAppCredAuthPresenter.credList.length > ConfigValue.REQUEST_AUTH_MAX_LENGTH) {
+        Stack({ alignContent: Alignment.End }) {
+          Scroll(this.authScroller) {
+            List() {
+              ForEach(this.mAppCredAuthPresenter.credList, (item: CredentialAbstractVo) => {
+                ListItem() {
+                  Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
+                    Column() {
+                      Text(item.alias)
+                        .fontSize($r('app.float.font_18'))
+                        .fontColor($r('sys.color.ohos_id_color_text_primary'))
+                        .fontWeight(FontWeight.Medium)
+                        .textAlign(TextAlign.Start);
+                    }
+                    .alignItems(HorizontalAlign.Start)
+
+                    Column() {
+                      Radio({ value: item.alias, group: 'appCredGroup' })
+                        .checked(false)
+                        .onChange((value: boolean) => {
+                          console.log(item.alias + ' status is ' + value);
+                          if (value) {
+                            this.selectUri = item.keyUri;
+                          }
+                        })
+                    }
+                    .alignItems(HorizontalAlign.End)
+                  }
+                  .width(WidthPercent.WH_100_100)
+                }
+                .height($r('app.float.wh_value_64'))
+              }, (item: CredentialAbstractVo) => JSON.stringify(item))
+            }
+            .scrollBar(BarState.Off)
+            .divider({
+              strokeWidth: $r('app.float.request_auth_strokeWidth'),
+              color: $r('sys.color.ohos_id_color_list_separator'),
+              endMargin: $r('app.float.request_auth_divider_endMargin') })
+            .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
+            .visibility(this.mAppCredAuthPresenter.credList.length > 0 ? Visibility.Visible : Visibility.None)
+          }
+          .scrollBar(BarState.Off)
+          .margin({
+            left: $r('app.float.wh_value_24'),
+            right: $r('app.float.wh_value_24')
+          })
+
+          ScrollBar({ scroller: this.authScroller, direction: ScrollBarDirection.Vertical,
+            state: BarState.Auto }) {
+            Text()
+              .width($r('app.float.wh_value_3'))
+              .height($r('app.float.wh_value_50'))
+              .borderRadius($r('app.float.wh_value_10'))
+              .backgroundColor($r('sys.color.ohos_id_color_foreground'))
+              .opacity($r('app.float.text_opacity_0_4'))
+          }
+          .width($r('app.float.wh_value_3'))
+          .margin({
+            right: $r('app.float.wh_value_3')
+          })
+        }
+        .height(WidthPercent.WH_50_100)
+      } else {
+        List() {
+          ForEach(this.mAppCredAuthPresenter.credList, (item: CredentialAbstractVo) => {
+            ListItem() {
+              Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
+                Column() {
+                  Text(item.alias)
+                    .fontSize($r('app.float.font_18'))
+                    .fontColor($r('sys.color.ohos_id_color_text_primary'))
+                    .fontWeight(FontWeight.Medium)
+                    .textAlign(TextAlign.Start);
+                }
+                .alignItems(HorizontalAlign.Start)
+
+                Column() {
+                  Radio({ value: item.alias, group: 'appCredGroup' })
+                    .checked(false)
+                    .onChange((value: boolean) => {
+                      console.log(item.alias + ' status is ' + value);
+                      if (value) {
+                        this.selectUri = item.keyUri;
+                      }
+                    })
+                }
+                .alignItems(HorizontalAlign.End)
+              }
+              .width(WidthPercent.WH_100_100)
+            }
+            .height($r('app.float.wh_value_64'))
+          }, (item: CredentialAbstractVo) => JSON.stringify(item))
+          ListItem() {
+            Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
+              Column() {
+                Text()
+              }
+              .alignItems(HorizontalAlign.Start)
+
+              Column() {
+                Radio({ value: 'null', group: 'appCredGroup' })
+                  .checked(false)
+                  .onChange((value: boolean) => {
+                    if (value) {
+                      this.selectUri = 'null';
+                    }
+                  })
+              }
+            }
+            .visibility(Visibility.None)
+          }
+        }
+        .margin({
+          left: $r('app.float.wh_value_24'),
+          right: $r('app.float.wh_value_24')
+        })
+        .scrollBar(BarState.Off)
+        .divider({
+          strokeWidth: $r('app.float.request_auth_strokeWidth'),
+          color: $r('sys.color.ohos_id_color_list_separator'),
+          endMargin: $r('app.float.request_auth_divider_endMargin') })
+        .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
+        .visibility(this.mAppCredAuthPresenter.credList.length > 0 ? Visibility.Visible : Visibility.None)
+      }
+    }
+    .width(WidthPercent.WH_100_100)
+    .borderRadius($r('app.float.user_list_divider_borderRadius_value'))
+    .backgroundColor($r('sys.color.ohos_id_color_dialog_bg'))
+  }
+
+
   aboutToAppear() {
-    console.info('RadioAuth aboutToAppear');
+    console.debug('enter requestAuth page');
     let appUidInfo: RouterAppUidVo = router.getParams() as RouterAppUidVo;
     if (appUidInfo !== undefined && appUidInfo.appUid != undefined) {
+      this.mAppCredAuthPresenter.updateAppNameFromUid(appUidInfo.appUid as string);
+      this.mAppCredAuthPresenter.updateAppCredList();
       this.dialogController.open();
     } else {
-      console.error('request auth appear failed');
+      console.error('requestAuth appear failed');
-      router.replaceUrl({ url: 'pages/certManagerFa' });
+      router.pushUrl({ url: 'pages/certManagerFa' });
     }
   }
 
   build() {
+
   }
 }

CertManager/src/main/ets/presenter/CmAppCredAuthPresenter.ets

@@ -49,7 +49,6 @@ export default class CmAppCredAuthPresenter {
 
   updateAppNameFromUid(uid: string): void {
     try {
-      console.log('getAppNameFromUid start uid = ' + uid);
       BundleModel.getAppInfoList(Number(uid), (errCode: CMModelErrorCode, appInfo: AppInfoVo) => {
         if (errCode === CMModelErrorCode.CM_MODEL_ERROR_SUCCESS) {
           this.appName = appInfo.appName;
@@ -69,46 +68,44 @@ export default class CmAppCredAuthPresenter {
       (errCode: CMModelErrorCode, credList: Array<CredentialAbstractVo>) => {
       if (errCode === CMModelErrorCode.CM_MODEL_ERROR_SUCCESS) {
         this.credList = credList;
-        console.log('updateSystemTrustedCertificateList success, list: ' + JSON.stringify(credList));
+        console.log('updateAppCredList success.');
       } else {
-        console.error('updateSystemTrustedCertificateList failed');
+        console.error('updateAppCredList failed');
       }
     });
   }
 
   requestAuthorize(uri: string, appUid: string): void {
-    console.log(TAG + 'requestAuthorize start uri :' + uri + 'appUid: ' + appUid);
     let want = GlobalContext.getContext().getAbilityWant();
-
     certManagerModel.setAppAuth(CMModelOptType.CM_MODEL_OPT_APP_CRED, uri, appUid,
-      true, (errCode: CMModelErrorCode, data: string) => {
+      true, (errCode: CMModelErrorCode, result: string) => {
-        router.clear();
+      router.clear();
-        if (errCode === CMModelErrorCode.CM_MODEL_ERROR_SUCCESS) {
+      if (errCode === CMModelErrorCode.CM_MODEL_ERROR_SUCCESS) {
-          console.log('requestAuthorize success data: ' + data);
+        console.log('requestAuthorize success result: ' + result);
-          if (want.parameters != undefined) {
+        if (want.parameters != undefined) {
-            want.parameters.authUri = data;
+          want.parameters.authUri = result;
-            let ret1: Common.AbilityResult = {
+          let ret1: Common.AbilityResult = {
-              resultCode: SUCCESS,
+            resultCode: SUCCESS,
-              want: want
+            want: want
-            };
+          };
-            GlobalContext.getContext().getCmContext().terminateSelfWithResult(ret1);
+          GlobalContext.getContext().getCmContext().terminateSelfWithResult(ret1);
-          } else {
-            let ret2: Common.AbilityResult = {
-              resultCode: FAIL,
-              want: want
-            };
-            console.error(TAG + 'requestAuthorize failed, undefined');
-            GlobalContext.getContext().getCmContext().terminateSelfWithResult(ret2);
-          }
         } else {
-          console.error('requestAuthorize fail');
+          let ret2: Common.AbilityResult = {
-          let ret3: Common.AbilityResult = {
             resultCode: FAIL,
             want: want
           };
-          GlobalContext.getContext().getCmContext().terminateSelfWithResult(ret3);
+          console.error(TAG + 'requestAuthorize failed, undefined');
+          GlobalContext.getContext().getCmContext().terminateSelfWithResult(ret2);
         }
-      });
+      } else {
+        console.error('requestAuthorize fail');
+        let ret3: Common.AbilityResult = {
+          resultCode: FAIL,
+          want: want
+        };
+        GlobalContext.getContext().getCmContext().terminateSelfWithResult(ret3);
+      }
+    });
   }
 
   cancelProcess(): void {

CertManager/src/main/ets/presenter/CmFaPresenter.ets

@@ -22,8 +22,7 @@ import { BusinessError } from '@ohos.base';
 import { RouterFileVo, RouterAppUidVo } from '../model/CertManagerVo/RouterInfoVo';
 
 const TAG = 'CMFaPresenter: ';
-const PAGE_URI_PWD_INPUT = 'pages/certPwdInput';
+const gridCountNum: number = 4;
-const PAGE_URI_ALIAS_INPUT = 'pages/certInstallAliasInput';
 
 export default class CmFaPresenter {
   private static sInstance: CmFaPresenter;
@@ -42,63 +41,56 @@ export default class CmFaPresenter {
   aboutToDisappear(): void {
   }
 
+  unrecognizedFileTips(): void {
+    AlertDialog.show({
+      message: $r('app.string.Install_Error_NOT_FOUND'),
+      autoCancel: true,
+      alignment: DialogAlignment.Bottom,
+      offset: {
+        dx: $r('app.float.wh_value_0'), dy: $r('app.float.wh_value_0')
+      },
+      gridCount: gridCountNum,
+      primaryButton: {
+        value: $r('app.string.OK'),
+        action: () => {
+        }
+      },
+    })
+  }
+
   routeToNextInstallCert(fileUri: string): void {
-    console.log(TAG, 'routeToNext fileUri ' + fileUri);
+    console.debug(TAG, 'routeToNext fileUri ' + fileUri);
     FileIoModel.getMediaFileSuffix(fileUri, (suffix: string | undefined) => {
       if (suffix !== undefined) {
-        console.log(TAG, 'suffix = ', suffix);
+        console.debug(TAG, 'suffix = ', suffix);
         let fileInfo = new RouterFileVo(fileUri, suffix);
         if ((suffix === 'cer') || (suffix === 'pem')) {
-          router.replaceUrl({
+          router.pushUrl({
             url: 'pages/certInstallAliasInput',
-            params: fileInfo
+            params: {
+              fileInfo: fileInfo
+            }
           })
         } else {
-          AlertDialog.show({
+          this.unrecognizedFileTips();
-            message: $r('app.string.Install_Error_NOT_FOUND'),
-            autoCancel: true,
-            alignment: DialogAlignment.Bottom,
-            offset: {
-              dx: 0, dy: 0
-            },
-            gridCount: 4,
-            primaryButton: {
-              value: $r('app.string.OK'),
-              action: () => {
-              }
-            },
-          })
         }
       }
     })
   }
 
   routeToNextInstallEvidence(fileUri: string): void {
-    console.log(TAG, 'routeToNext fileUri ' + fileUri);
+    console.debug(TAG, 'routeToNext fileUri ' + fileUri);
     FileIoModel.getMediaFileSuffix(fileUri, (suffix: string | undefined) => {
       if (suffix !== undefined) {
-        console.log(TAG, 'suffix = ', suffix);
+        console.debug(TAG, 'suffix = ', suffix);
         if ((suffix === 'p12') || (suffix === 'pfx')) {
           let fileInfo = new RouterFileVo(fileUri, suffix);
-          router.replaceUrl({
+          router.pushUrl({
             url: 'pages/certPwdInput',
             params: fileInfo
           })
         } else {
-          AlertDialog.show({
+          this.unrecognizedFileTips();
-            message: $r('app.string.Install_Error_NOT_FOUND'),
-            autoCancel: true,
-            alignment: DialogAlignment.Bottom,
-            offset: {
-              dx: 0, dy: -20
-            },
-            gridCount: 4,
-            primaryButton: {
-              value: $r('app.string.OK'),
-              action: () => {
-              }
-            },
-          })
         }
       }
     })
@@ -146,7 +138,7 @@ export default class CmFaPresenter {
 
   startRequestAuth(uri: string): void {
     let appUidInfo = new RouterAppUidVo(uri);
-    router.replaceUrl({
+    router.pushUrl({
       url: 'pages/requestAuth',
       params: appUidInfo
     });

CertManager/src/main/ets/presenter/CmInstallPresenter.ets

@@ -22,6 +22,9 @@ import promptAction from '@ohos.promptAction';
 import { BusinessError } from '@ohos.base';
 
 const TAG = 'CMInstallPresenter: ';
+const DURATION = 2000;
+const gridCountNum: number = 4;
+const bottomNum: number = 100;
 
 export default class CmInstallPresenter {
   private static sInstance: CmInstallPresenter;
@@ -43,11 +46,13 @@ export default class CmInstallPresenter {
   }
 
   updateCertFileType(suffix: string): void {
-    console.info(TAG + 'updateCertFileType suffix: ' + suffix);
+    console.debug(TAG + 'updateCertFileType suffix: ' + suffix);
     if ((suffix === 'cer') || (suffix === 'pem')) {
       this.optType = CMModelOptType.CM_MODEL_OPT_USER_CA;
     } else if ((suffix === 'p12') || (suffix === 'jks') || (suffix === 'pfx')) {
       this.optType = CMModelOptType.CM_MODEL_OPT_APP_CRED;
+    } else {
+      console.debug(TAG, 'The file type is not supported. suffix: ' + suffix);
     }
   }
 
@@ -57,75 +62,130 @@ export default class CmInstallPresenter {
     });
   }
 
+  AuthenticationPassword(uri: string, suffix: string, pwd: string): Promise<number> {
+    return new Promise((resolve) => {
+      this.updateCertFileType(suffix);
+      this.getFileDataFromUri(uri, (data: Uint8Array) => {
+        certManagerModel.checkPassword(data, pwd, (err: CMModelErrorCode) => {
+          if (err === CMModelErrorCode.CM_MODEL_ERROR_EXCEPTION) {
+            resolve(err)
+          } else {
+            resolve(0)
+          }
+        })
+      })
+    })
+  }
+
+  checkCertNameLength(uri: string, alias: string, suffix: string, pwd: string): Promise<number> {
+    return new Promise((resolve) => {
+      this.updateCertFileType(suffix);
+      this.getFileDataFromUri(uri, (data: Uint8Array) => {
+        certManagerModel.installCertOrCred(this.optType, alias, data, pwd, (errCode: CMModelErrorCode) => {
+          if (errCode === CMModelErrorCode.CM_MODEL_ERROR_ALIAS_LENGTH_REACHED_LIMIT) {
+            resolve(errCode)
+          } else {
+            resolve(0)
+          }
+        })
+      })
+    })
+  }
+
+  installSuccessTips(): void {
+    try {
+      promptAction.showToast({
+        message: this.optType === CMModelOptType.CM_MODEL_OPT_USER_CA ?
+        $r('app.string.Install_Cert_Success') : $r('app.string.Install_Cred_Success'),
+        duration: DURATION,
+        bottom: bottomNum
+      })
+    } catch (err) {
+      let e: BusinessError = err as BusinessError;
+      console.error(TAG, 'show result failed, message: ' + e.message + ', code: ' + e.code)
+    }
+  }
+
+  errorFormatTips(): void {
+    AlertDialog.show({
+      message: $r('app.string.Install_ERROR_INCORRECT_FORMAT'),
+      autoCancel: true,
+      alignment: DialogAlignment.Bottom,
+      offset: {
+        dx: $r('app.float.wh_value_0'), dy: $r('app.float.wh_value_0')
+      },
+      gridCount: gridCountNum,
+      primaryButton: {
+        value: $r('app.string.OK'),
+        action: () => {
+        }
+      },
+    })
+  }
+
+  maxQuantityReachedTips(): void {
+    AlertDialog.show({
+      message: $r('app.string.Install_Error_MAX_QUANTITY_REACHED'),
+      autoCancel: true,
+      alignment: DialogAlignment.Bottom,
+      offset: {
+        dx: $r('app.float.wh_value_0'), dy: $r('app.float.wh_value_0')
+      },
+      gridCount: gridCountNum,
+      primaryButton: {
+        value: $r('app.string.OK'),
+        action: () => {
+          router.back({
+            url: 'pages/certManagerFa'
+          })
+        }
+      },
+    })
+  }
+
+  installFailedTips(): void {
+    try {
+      promptAction.showToast({
+        message: this.optType === CMModelOptType.CM_MODEL_OPT_USER_CA ?
+        $r('app.string.Install_Cert_Failed') : $r('app.string.Install_Cred_Failed'),
+        duration: DURATION,
+        bottom: bottomNum
+      })
+    } catch (err) {
+      let e: BusinessError = err as BusinessError;
+      console.error(TAG, 'show result failed, message: ' + e.message + ', code: ' + e.code)
+    }
+  }
+
   installCert(uri: string, alias: string, suffix: string): void {
     this.updateCertFileType(suffix);
     this.getFileDataFromUri(uri, (data: Uint8Array) => {
       certManagerModel.installCertOrCred(this.optType, alias, data,
         GlobalContext.getContext().getPwdStore().getCertPwd(), (errCode: CMModelErrorCode) => {
-          console.info(TAG + 'installCertOrCred result: ' + JSON.stringify(errCode));
+        console.info(TAG + 'installCertOrCred result: ' + JSON.stringify(errCode));
-          GlobalContext.getContext().getPwdStore().clearCertPwd();
+        GlobalContext.getContext().getPwdStore().clearCertPwd();
-          if (errCode === CMModelErrorCode.CM_MODEL_ERROR_SUCCESS) {
+        switch (errCode) {
-            try {
+          case CMModelErrorCode.CM_MODEL_ERROR_SUCCESS:
-              promptAction.showToast({
+            this.installSuccessTips();
-                message: this.optType === CMModelOptType.CM_MODEL_OPT_USER_CA ?
+            break;
-                $r('app.string.Install_Cert_Success') : $r('app.string.Install_Cred_Success'),
+
-                duration: 2000,
+          case CMModelErrorCode.CM_MODEL_ERROR_INCORRECT_FORMAT:
-                bottom: 100
+            this.errorFormatTips();
-              })
+            break;
-            } catch (err) {
+
-              let e: BusinessError = err as BusinessError;
+          case CMModelErrorCode.CM_MODEL_ERROR_MAX_QUANTITY_REACHED:
-              console.error(TAG, 'show result failed, message: ' + e.message + ', code: ' + e.code)
+            this.maxQuantityReachedTips();
-            }
+            break;
-          } else if (errCode === CMModelErrorCode.CM_MODEL_ERROR_INCORRECT_FORMAT) {
+
-            AlertDialog.show({
+          default:
-              message: $r('app.string.Install_ERROR_INCORRECT_FORMAT'),
+            this.installFailedTips();
-              autoCancel: true,
+            break;
-              alignment: DialogAlignment.Bottom,
+        }
-              offset: {
+        router.clear();
-                dx: 0, dy: 0
+        router.pushUrl({
-              },
+          url: 'pages/certManagerFa'
-              gridCount: 4,
-              primaryButton: {
-                value: $r('app.string.OK'),
-                action: () => {
-                  router.back()
-                }
-              },
-            })
-          } else if (errCode === CMModelErrorCode.CM_MODEL_ERROR_MAX_QUANTITY_REACHED) {
-            AlertDialog.show({
-              message: $r('app.string.Install_Error_MAX_QUANTITY_REACHED'),
-              autoCancel: true,
-              alignment: DialogAlignment.Bottom,
-              offset: {
-                dx: 0, dy: 0
-              },
-              gridCount: 4,
-              primaryButton: {
-                value: $r('app.string.OK'),
-                action: () => {
-                  router.back()
-                }
-              },
-            })
-          } else {
-            try {
-              promptAction.showToast({
-                message: this.optType === CMModelOptType.CM_MODEL_OPT_USER_CA ?
-                $r('app.string.Install_Cert_Failed') : $r('app.string.Install_Cred_Failed'),
-                duration: 2000,
-                bottom: 100
-              })
-            } catch (err) {
-              let e: BusinessError = err as BusinessError;
-              console.error(TAG, 'show result failed, message: ' + e.message + ', code: ' + e.code)
-            }
-          }
-          router.clear();
-          router.replaceUrl({
-            url: 'pages/certManagerFa'
-          });
         });
+      });
     });
   }
 }

CertManager/src/main/ets/presenter/CmShowAppCredPresenter.ets

@@ -118,7 +118,6 @@ export default class CmShowAppCredPresenter {
             if (errCode === CMModelErrorCode.CM_MODEL_ERROR_SUCCESS) {
               this.appInfoList.push(
                 new AppAuthorVo(String(appInfo.appImage), String(appUidList[i]), String(appInfo.appName), true));
-              console.log('appInfoList: ' + JSON.stringify(this.appInfoList));
             }
           });
         }

CertManager/src/main/ets/presenter/CmShowSysCaPresenter.ets

@@ -57,7 +57,7 @@ export default class CmShowSysCaPresenter {
           }
         });
         this.certList = certList;
-        console.log('updateSystemTrustedCertificateList success, list: ' + JSON.stringify(certList));
+        console.debug('updateSystemTrustedCertificateList success, list: ' + JSON.stringify(certList));
       } else {
         console.error(TAG + 'updateSystemTrustedCertificateList fail,errCode is' + errCode);
         this.certList = [];
@@ -69,8 +69,7 @@ export default class CmShowSysCaPresenter {
     certManagerModel.getCertOrCred(CMModelOptType.CM_MODEL_OPT_SYSTEM_CA, uri,
       (errCode: CMModelErrorCode, certInfo: CertInfoVo) => {
       if (errCode === CMModelErrorCode.CM_MODEL_ERROR_SUCCESS) {
-        console.info(TAG + 'getSystemTrustedCertificate success,errCode is ' + errCode + ' certInfo is' +
+        console.info(TAG + 'getSystemTrustedCertificate success,errCode is ' + errCode);
-        JSON.stringify(certInfo));
         this.certInfo = certInfo;
         callback();
       } else {

CertManager/src/main/ets/presenter/CmShowUserCaPresenter.ets

@@ -57,7 +57,6 @@ export default class CmShowUserCaPresenter {
           }
         });
         this.certList = certList;
-        console.log('updateUserTrustedCertificateList success, list: ' + JSON.stringify(certList));
       } else {
         console.error(TAG + 'updateUserTrustedCertificateList fail,errCode is ' + errCode);
         this.certList = [];
@@ -69,8 +68,7 @@ export default class CmShowUserCaPresenter {
     certManagerModel.getCertOrCred(CMModelOptType.CM_MODEL_OPT_USER_CA, uri,
       (errCode: CMModelErrorCode, certInfo: CertInfoVo) => {
       if (errCode === CMModelErrorCode.CM_MODEL_ERROR_SUCCESS) {
-        console.info(TAG + 'getUserTrustedCertificate success, errCode is ' + errCode + ' certInfo is' +
+        console.info(TAG + 'getUserTrustedCertificate success, errCode is ' + errCode);
-        JSON.stringify(certInfo));
         this.certInfo = certInfo;
         callback();
       } else {
@@ -87,6 +85,7 @@ export default class CmShowUserCaPresenter {
         this.getUserTrustedCertificate(uri, () => {
           console.info(TAG + 'setCerStatus then getUserTrustedCertificate,errCode is' + errCode);
         });
+        this.updateUserTrustedCertificateList();
       } else {
         console.error(TAG + 'setUserCertificateStatus fail,errCode is ' + errCode);
       }

CertManager/src/main/module.json5

@@ -105,6 +105,9 @@
       },
       {
         "name": "ohos.permission.ACCESS_BIOMETRIC"
+      },
+      {
+        "name": "ohos.permission.PRIVACY_WINDOW"
       }
     ]
   }

CertManager/src/main/resources/base/element/float.json

@@ -1062,7 +1062,7 @@
     },
     {
       "name": "request_auth_strokeWidth",
-      "value": "1"
+      "value": "1px"
     },
     {
       "name": "credentials_app_image_wh",
@@ -1258,7 +1258,7 @@
     },
     {
       "name": "Evidence_strokeWidth",
-      "value": "1"
+      "value": "1px"
     },
     {
       "name": "Evidence_startMargin",
@@ -1338,7 +1338,7 @@
     },
     {
       "name": "sys_list_divider_strokeWidth_value",
-      "value": "1"
+      "value": "1px"
     },
     {
       "name": "sys_list_divider_startMargin_value",
@@ -1354,7 +1354,7 @@
     },
     {
       "name": "user_list_divider_strokeWidth_value",
-      "value": "1"
+      "value": "1px"
     },
     {
       "name": "user_list_divider_startMargin_value",
@@ -1679,6 +1679,22 @@
     {
       "name": "deleteAllDialog_size",
       "value": "160vp"
+    },
+    {
+      "name": "text_opacity_0_4",
+      "value": "0.4"
+    },
+    {
+      "name": "offset_dy",
+      "value": "-20vp"
+    },
+    {
+      "name": "offset_dy_30",
+      "value": "-30vp"
+    },
+    {
+      "name": "scroll_bar_width",
+      "value": "3vp"
     }
   ]
 }

CertManager/src/main/resources/base/element/string.json

@@ -56,7 +56,6 @@
       "name": "deleteAllCred",
       "value": "删除所有证书与凭据"
     },
-
     {
       "name": "deleteAllCredDialogTitle",
       "value": "删除所有证书与凭据"
@@ -111,7 +110,7 @@
     },
     {
       "name": "installAliasInputInfo",
-      "value": "注：此证书颁发者可能会检查进出设备的所有流量\n该数据包包含：CA证书"
+      "value": "注：证书名称仅支持英文和数字"
     },
     {
       "name": "managerAuthApp",

CertManager/src/main/resources/en_US/element/string.json

@@ -56,7 +56,6 @@
       "name": "deleteAllCred",
       "value": "Delete All Credentials and Certificates"
     },
-
     {
       "name": "deleteAllCredDialogTitle",
       "value": "Delete All Credentials and Certificates"
@@ -111,7 +110,7 @@
     },
     {
       "name": "installAliasInputInfo",
-      "value": "Attention: This certificate issuer may check all traffic entering and leaving the device\nThe packets contain：CA certificate"
+      "value": "Attention: certificate names only support English and numbers"
     },
     {
       "name": "managerAuthApp",

build-profile.json5

@@ -33,9 +33,9 @@
       {
         "name": "default",
         "signingConfig": "default",
-        "compileSdkVersion": 11,
+        "compileSdkVersion": 12,
-        "compatibleSdkVersion": 11,
+        "compatibleSdkVersion": 12,
-        "targetSdkVersion": 11,
+        "targetSdkVersion": 12,
         "runtimeOS": "OpenHarmony",
       }
     ],