lemur/lemur/static/app/angular/certificates/view/view.tpl.html

215 lines
11 KiB
HTML

<div class="row">
<div class="col-md-12">
<h2 class="featurette-heading">Certificates
<span class="text-muted"><small>Cipher text says what?</small></span></h2>
<div class="panel panel-default">
<div class="panel-heading">
<div class="btn-group pull-right">
<button ng-click="create()" class="btn btn-primary">
Create
</button>
<button ng-click="import()" class="btn btn-info">
Import
</button>
</div>
<div class="btn-group">
<button ng-model="showFilter" class="btn btn-default" uib-btn-checkbox
btn-checkbox-true="1"
btn-checkbox-false="0">Filter</button>
</div>
<!--<select class="form-control" ng-model="show" ng-options="item.value as item.title for item in fields"></select>-->
<div class="clearfix"></div>
</div>
<div class="table-responsive">
<table ng-table="certificateTable" class="table" show-filter="showFilter" template-pagination="angular/pager.html">
<tbody>
<tr ng-class="{'even-row': $even }" ng-repeat-start="certificate in $data track by $index">
<td data-title="'Id'" filter="{'id': 'text'}">
{{ certificate.id }}
</td>
<td data-title="'Name'" sortable="'name'" filter="{ 'name': 'text' }">
<ul class="list-unstyled">
<li>{{ certificate.name }}</li>
<li><span class="text-muted">{{ certificate.owner }}</span></li>
</ul>
</td>
<td data-title="'Notify'" filter="{ 'notify': 'select' }" filter-data="getCertificateStatus()">
<form>
<switch ng-change="updateNotify(certificate)" id="status" name="status"
ng-model="certificate.notify" class="green small"></switch>
</form>
</td>
<td data-title="'Issuer'" sortable="'issuer'" filter="{ 'issuer': 'text' }">
{{ certificate.authority.name || certificate.issuer }}
</td>
<td data-title="'Common Name'" filter="{ 'cn': 'text'}">
{{ certificate.cn }}
</td>
<td data-title="''" style="text-align: center; vertical-align: middle;">
<div class="btn-group pull-right" role="group" aria-label="...">
<a class="btn btn-sm btn-primary" ui-sref="certificate({name: certificate.name})">Permalink</a>
<button ng-model="certificate.toggle" class="btn btn-sm btn-info" uib-btn-checkbox btn-checkbox-true="1"
btn-checkbox-false="0">More
</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href ng-click="edit(certificate.id)">Edit</a></li>
<li><a href ng-click="clone(certificate.id)">Clone</a></li>
<li><a href ng-click="export(certificate.id)">Export</a></li>
<li><a href ng-click="revoke(certificate.id)">Revoke</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr class="warning" ng-if="certificate.toggle" ng-repeat-end>
<td colspan="12">
<uib-tabset justified="true" class="col-md-8">
<uib-tab>
<uib-tab-heading>Basic Info</uib-tab-heading>
<dl class="dl-horizontal list-group">
<!-- Lemur metadata -->
<div class="list-group-item">
<dt>Creator</dt>
<dd>{{ certificate.user.email }}</dd>
<dt>Owner</dt>
<dd>{{ certificate.owner }}</dd>
<dt>Description</dt>
<dd class="multiline">{{ certificate.description }}</dd>
</div>
<!-- Certificate fields -->
<div class="list-group-item">
<dt>Certificate Authority</dt>
<dd>{{ certificate.authority ? certificate.authority.name : "Imported" }} <span class="text-muted">({{ certificate.issuer }})</span></dd>
<dt>Serial</dt>
<dd>
<div>Hex: <a href="https://crt.sh/?serial={{ certificate.serialHex }}" rel="noreferrer" target="_blank" title="View on crt.sh">{{ certificate.serialHex }}</a></div>
<div class="text-muted text-nowrap">Decimal: {{ certificate.serial }}</div>
</dd>
<dt>Valid From</dt>
<dd><span class="text-muted">{{ certificate.notBefore }}</span> ({{ momentService.createMoment(certificate.notBefore) }})</dd>
<dt>Valid To</dt>
<dd><span class="text-muted">{{ certificate.notAfter }}</span> ({{ momentService.createMoment(certificate.notAfter) }})</dd>
<dt>SAN</dt>
<dd>
<i class="glyphicon glyphicon-ok" ng-if="certificate.san"></i>
<i class="glyphicon glyphicon-remove" ng-if="!certificate.san"></i>
</dd>
</div>
<!-- Cryptography -->
<div class="list-group-item">
<dt>Key Length</dt>
<dd>{{ certificate.bits }}</dd>
<dt>Signing Algorithm</dt>
<dd>{{ certificate.signingAlgorithm }}</dd>
</div>
<div uib-tooltip="Lemur will attempt to check a certificates validity, this is used to track whether a certificate has been revoked"
class="list-group-item">
<dt>Validity</dt>
<dd>
<span ng-if="certificate.status == 'unknown'" class="label label-warning">Unknown</span>
<span ng-if="certificate.status == 'revoked'" class="label label-danger">Revoked</span>
<span ng-if="certificate.status == 'valid'" class="label label-success">Valid</span>
</dd>
</div>
</dl>
</uib-tab>
<uib-tab>
<uib-tab-heading>Endpoints</uib-tab-heading>
<ul class="list-group">
<li class="list-group-item" ng-repeat="endpoint in certificate.endpoints">
<span class="pull-right"><label class="label label-default">{{ endpoint.type }}</label></span>
<ul class="list-unstyled">
<li>{{ endpoint.name }}</li>
<li><span class="text-muted">{{ endpoint.dnsname }}</span></li>
</ul>
</li>
</ul>
</uib-tab>
<uib-tab>
<uib-tab-heading>Notifications</uib-tab-heading>
<ul class="list-group">
<li class="list-group-item" ng-repeat="notification in certificate.notifications">
<strong>{{ notification.label }}</strong>
<span class="pull-right">{{ notification.description}}</span>
</li>
</ul>
</uib-tab>
<uib-tab>
<uib-tab-heading>Roles</uib-tab-heading>
<ul class="list-group">
<li class="list-group-item" ng-repeat="role in certificate.roles">
<strong>{{ role.name }}</strong>
<span class="pull-right">{{ role.description}}</span>
</li>
</ul>
</uib-tab>
<uib-tab>
<uib-tab-heading>Destinations</uib-tab-heading>
<ul class="list-group">
<li class="list-group-item" ng-repeat="destination in certificate.destinations">
<strong>{{ destination.label }}</strong>
<span class="pull-right">{{ destination.description }}</span>
</li>
</ul>
</uib-tab>
<uib-tab>
<uib-tab-heading>Domains</uib-tab-heading>
<div class="list-group">
<a href="#/domains/{{ domain.id }}" class="list-group-item"
ng-repeat="domain in certificate.domains">{{ domain.name }}</a>
</div>
</uib-tab>
<uib-tab>
<uib-tab-heading>Replaces</uib-tab-heading>
<ul class="list-group">
<li class="list-group-item" ng-repeat="replaces in certificate.replaces">
<strong>{{ replaces.name }}</strong>
<p>{{ replaces.description }}</p>
</li>
</ul>
</uib-tab>
</uib-tabset>
<uib-tabset justified="true" class="col-md-4">
<uib-tab>
<uib-tab-heading>
Chain
<i class="glyphicon glyphicon-copy" style="cursor: pointer" clipboard text="certificate.chain"></i>
</uib-tab-heading>
<pre style="width: 100%">{{ certificate.chain }}</pre>
</uib-tab>
<uib-tab>
<uib-tab-heading>
CSR
<i class="glyphicon glyphicon-copy" style="cursor: pointer" clipboard text="certificate.csr"></i>
</uib-tab-heading>
<pre style="width: 100%">{{ certificate.csr }}</pre>
</uib-tab>
<uib-tab>
<uib-tab-heading>
Public Certificate
<i class="glyphicon glyphicon-copy" style="cursor: pointer" clipboard text="certificate.body"></i>
</uib-tab-heading>
<pre style="width: 100%">{{ certificate.body }}</pre>
</uib-tab>
<uib-tab ng-click="loadPrivateKey(certificate)">
<uib-tab-heading>
Private Key
<i class="glyphicon glyphicon-copy" style="cursor: pointer" clipboard text="certificate.privateKey"></i>
</uib-tab-heading>
<pre style="width: 100%">{{ certificate.privateKey }}</pre>
</uib-tab>
</uib-tabset>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>