<style include="cr-page-host-style cr-shared-style cr-nav-menu-item-style certificate-manager-style-v2">
:host {
display: flex;
flex-direction: column;
height: 100%;
}
#importOsCerts {
margin-inline-start: auto;
}
.enterprise-icon {
padding-inline-start: 5px;
}
.menu-icon {
padding-inline-end: 8px;
}
#main {
flex: 1;
}
cr-menu-selector {
box-sizing: border-box;
display: block;
height: 100%;
overflow: auto;
padding-top: 8px;
padding-bottom: 8px;
width: 250px;
}
#cr-container-shadow-top {
/* Needs to be higher than #container's z-index to appear above
* scrollbars. */
z-index: 2;
}
#container {
/* CrContainerShadowMixin creates a div inside of #container to
* calculate when the div is off-screen, indicating that the user has
* scrolled #container. Since this div needs to be at the top of
* #container, set align-items to flex-start. Otherwise, the flex layout
* will stretch the div across the entire height of #container and never
* appear off-screen. */
display: flex;
align-items: flex-start;
overflow: auto;
flex: 1;
z-index: 1;
}
#adminCertsSection,
#platformCertsSection,
#platformClientCertsSection {
box-shadow: var(--cr-card-shadow);
/* Do not shorten '0px' below to '0' as the calc function requires
* units. */
min-height: calc(100vh - var(--cr-toolbar-height) -
var(--cr-toolbar-padding-top, 0px));
}
#sidebar {
position: sticky;
top: 0;
}
</style>
<cr-toolbar id="toolbar"
page-name="[[i18n('certificateManagerV2Title')]]"
show-search="[[showSearch_]]" always-show-logo>
</cr-toolbar>
<div id="container">
<div id="sidebar" role="navigation">
<cr-menu-selector id="menu" selectable="a" attr-for-selected="href"
selected-attribute="selected"
selected="[[getSelectedTopLevelHref_(selectedPage_)]]"
on-iron-activate="onMenuItemActivate_">
<a id="localMenuItem" role="menuitem" class="cr-nav-menu-item"
href$="[[generateHrefForPage_(pageEnum_.LOCAL_CERTS)]]"
on-click="onMenuItemClick_">
<cr-icon icon="cr:computer" class="menu-icon"></cr-icon>
[[i18n('certificateManagerV2LocalCerts')]]
</a>
<a id="clientMenuItem" role="menuitem" class="cr-nav-menu-item"
href$="[[generateHrefForPage_(pageEnum_.CLIENT_CERTS)]]"
on-click="onMenuItemClick_">
<cr-icon icon="certmanager:card" class="menu-icon"></cr-icon>
[[i18n('certificateManagerV2ClientCerts')]]
</a>
<a id="crsMenuItem" role="menuitem" class="cr-nav-menu-item"
href$="[[generateHrefForPage_(pageEnum_.CRS_CERTS)]]"
on-click="onMenuItemClick_">
<cr-icon icon="cr:chrome-product" class="menu-icon"></cr-icon>
[[i18n('certificateManagerV2CRSCerts')]]
</a>
</cr-menu-selector>
</div>
<cr-page-selector id="main" attr-for-selected="path"
selected="[[selectedPage_]]">
<div id="clientCertSection" class="cr-centered-card-container"
path$="[[pageEnum_.CLIENT_CERTS]]">
<h2 class="page-title">[[i18n('certificateManagerV2ClientCerts')]]</h2>
[[i18n("certificateManagerV2ClientCertsDescription")]]
<if expr="is_win or is_macosx or is_linux">
<certificate-list-v2
id="provisionedClientCerts"
cert-source="[[certificateSourceEnum_.kProvisionedClientCert]]"
header-text="[[i18n('certificateManagerV2ClientCertsFromAdmin')]]"
hide-export
on-hash-copied="onHashCopied_">
</certificate-list-v2>
</if>
<if expr="is_chromeos">
<certificate-list-v2
id="extensionsClientCerts"
cert-source="[[certificateSourceEnum_.kExtensionsClientCert]]"
header-text="[[i18n('certificateManagerV2ClientCertsFromExtension')]]"
hide-export
on-hash-copied="onHashCopied_">
</certificate-list-v2>
</if>
<h3 class="section-title">[[i18n("certificateManagerV2Platform")]]</h3>
<div class="card">
<cr-link-row id="viewOsImportedClientCerts"
label="[[i18n('certificateManagerV2PlatformCertsViewLink')]]"
on-click="onClientPlatformCertsLinkRowClick_">
</cr-link-row>
<if expr="is_win or is_macosx">
<cr-link-row external id="manageOsImportedClientCerts" class="hr"
label="[[i18n('certificateManagerV2PlatformCertsManageLink')]]"
button-aria-description="[[i18n('certificateManagerV2PlatformCertsManageLinkAriaDescription')]]"
on-click="onManageCertsExternal_">
</cr-link-row>
</if>
</div>
</div>
<div id="localCertSection" class="cr-centered-card-container"
path$="[[pageEnum_.LOCAL_CERTS]]">
<h2 class="page-title">[[i18n('certificateManagerV2LocalCerts')]]</h2>
[[i18n("certificateManagerV2LocalCertsDescription")]]
<!-- TODO(crbug.com/40928765): Allow user modifications of trust settings
here when allowed by enterprise. -->
<h3 class="section-title">[[i18n("certificateManagerV2Platform")]]</h3>
<div class="card">
<div class="cr-row">
<div class="cr-padded-text">
<div>
[[i18n("certificateManagerV2PlatformCertsToggleLabel")]]
</div>
<div id="numSystemCerts" class="cr-secondary-text"
hidden="[[!importOsCertsEnabled_]]">
[[numSystemCertsString_]]
</div>
</div>
<cr-toggle id="importOsCerts"
aria-label="Toggle operating system certificate imports"
checked="[[importOsCertsEnabled_]]" disabled>
</cr-toggle>
<cr-icon id="importOsCertsManagedIcon" icon="cr:domain"
class="enterprise-icon" hidden="[[!importOsCertsEnabledManaged_]]">
</cr-icon>
</div>
<cr-link-row id="viewOsImportedCerts" class="hr"
label="[[i18n('certificateManagerV2PlatformCertsViewLink')]]"
on-click="onPlatformCertsLinkRowClick_"
hidden="[[!importOsCertsEnabled_]]">
</cr-link-row>
<if expr="is_win or is_macosx">
<cr-link-row external id="manageOsImportedCerts" class="hr"
label="[[i18n('certificateManagerV2PlatformCertsManageLink')]]"
on-click="onManageCertsExternal_"
button-aria-description="[[i18n('certificateManagerV2PlatformCertsManageLinkAriaDescription')]]"
hidden="[[!importOsCertsEnabled_]]">
</cr-link-row>
</if>
</div>
<template is="dom-if" if="[[showCustomSection_(certManagementMetadata_)]]">
<div id="customCertsSection">
<h3 class="section-title">[[i18n("certificateManagerV2CustomCertsTitle")]]</h3>
<cr-link-row id="adminCertsInstalledLinkRow"
start-icon="cr:domain"
class="card"
label="[[i18n('certificateManagerV2AdminCertsTitle')]]"
sub-label="[[numPolicyCertsString_]]"
on-click="onAdminCertsInstalledLinkRowClick_">
</cr-link-row>
</div>
</template>
</div>
<!-- Chrome Root Store section -->
<crs-section-v2 id="crsCertSection"
path$="[[pageEnum_.CRS_CERTS]]" on-hash-copied="onHashCopied_">
</crs-section-v2>
<certificate-subpage-v2 id="adminCertsSection"
path$="[[pageEnum_.ADMIN_CERTS]]"
class="cr-centered-card-container"
on-hash-copied="onHashCopied_"
navigate-back-target="[[pageEnum_.LOCAL_CERTS]]"
subpage-title="[[i18n('certificateManagerV2AdminCertsTitle')]]"
subpage-cert-lists="[[enterpriseSubpageLists_]]">
</certificate-subpage-v2>
<certificate-subpage-v2 id="platformCertsSection"
path$="[[pageEnum_.PLATFORM_CERTS]]"
class="cr-centered-card-container"
on-hash-copied="onHashCopied_"
navigate-back-target="[[pageEnum_.LOCAL_CERTS]]"
subpage-title="[[i18n('certificateManagerV2PlatformCertsTitle')]]"
subpage-cert-lists="[[platformSubpageLists_]]">
</certificate-subpage-v2>
<certificate-subpage-v2 id="platformClientCertsSection"
path$="[[pageEnum_.PLATFORM_CLIENT_CERTS]]"
class="cr-centered-card-container"
on-hash-copied="onHashCopied_"
navigate-back-target="[[pageEnum_.CLIENT_CERTS]]"
on-import-result="onImportResult_"
subpage-title="[[i18n('certificateManagerV2ClientCertsFromPlatform')]]"
subpage-cert-lists="[[clientPlatformSubpageLists_]]">
</certificate-subpage-v2>
</cr-page-selector>
</div>
<cr-toast id="toast" duration="5000">
<span id="toast-message">[[toastMessage_]]</span>
</cr-toast>
<template is="dom-if" if="[[showInfoDialog_]]" restamp>
<certificate-info-dialog id="infoDialog" dialog-title="[[infoDialogTitle_]]"
dialog-message="[[infoDialogMessage_]]" on-close="onInfoDialogClose_">
</certificate-info-dialog>
</template>
<template is="dom-if" if="[[showPasswordDialog_]]" restamp>
<certificate-password-dialog id="passwordDialog"
on-close="onPasswordDialogClose_">
</certificate-password-dialog>
</template>