server/admin/static/views/pki.html

<h2>
  Certificats clients
  <button type="button" ng-click="generateCert()" class="float-right btn btn-sm btn-primary"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Générer un certificat</button>
  <div class="float-right btn-group mr-1" role="group">
    <button type="button" ng-click="generateHtpasswd()" class="btn btn-sm btn-secondary"><span class="glyphicon glyphicon-save-file" aria-hidden="true"></span> Générer <code>fichtpasswd</code></button>
    <button type="button" ng-click="removeHtpasswd()" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
  </div>
</h2>

<p><input type="search" class="form-control" placeholder="Search" ng-model="query" ng-keypress="validateSearch($event)" autofocus></p>
<table class="table table-hover table-bordered table-striped table-sm">
  <thead class="thead-dark">
    <tr>
      <th>Serial</th>
      <th>Date de création</th>
      <th>Équipe</th>
      <th>Révoqué ?</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="certificate in certificates | filter: query" ng-click="show(certificate.id)" ng-class="{'bg-danger': certificate.revoked}">
      <td>{{ certificate.id }}</td>
      <td>{{ certificate.creation }}</td>
      <td ng-if="certificate.id_team">
	<span ng-repeat="team in teams" ng-if="team.id == certificate.id_team">
	  <a ng-href="teams/{{ team.id }}">{{ team.name }}</a>
	</span>
      </td>
      <td ng-if="!certificate.id_team">
	<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#associationModal" data-certificate="{{ certificate.id }}"><span class="glyphicon glyphicon-link" aria-hidden="true"></span> Associer</button>
      </td>
      <td>{{ certificate.revoked }}</td>
      <td>
	<a type="button" class="btn btn-sm btn-success" href="api/certs/{{ certificate.id }}.p12" target="_self">Télécharger</a>
	<button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#revokeModal" data-certificate="{{ certificate.id }}" ng-class="{disabled: certificate.revoked}">Révoquer</button>
      </td>
    </tr>
  </tbody>
</table>

<div class="modal fade" id="revokeModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content bg-light">
      <div class="modal-header">
	<h5 class="modal-title">Révocation d'un certificat</h5>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	  <span aria-hidden="true">&times;</span>
	</button>
      </div>
      <div class="modal-body">
	<p>
	  Êtes-vous sûr de vouloir révoquer le certificat ?
	</p>
      </div>
      <div class="modal-footer">
	<button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
	<button type="button" class="btn btn-danger" ng-click="revoke()">Révoquer</button>
      </div>
    </div>
  </div>
</div>

<script>
  $('#revokeModal').on('shown.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var serial = button.data('certificate');

    var modal = $(this);
    modal.data('certificate', serial);
  });
</script>

<div class="modal fade" id="associationModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content bg-light">
      <div class="modal-header">
	<h5 class="modal-title">Associer le certificat à une équipe</h5>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	  <span aria-hidden="true">&times;</span>
	</button>
      </div>
      <form ng-submit="associate()">
	<div class="modal-body">
	  <div class="form-group row">
	    <label for="tcert" class="col-md-3 col-form-label">Certificate</label>
	    <div class="col-md-9">
	      <input type="text" readonly class="form-control-plaintext" id="tcert">
	    </div>
	  </div>
	  <div class="form-group row">
	    <label for="tteam" class="col-md-3 col-form-label">Équipe</label>
	    <div class="col-md-9">
	      <select class="custom-select custom-select-sm" id="tteam" ng-model="selectedTeam" ng-options="t.id as t.name for t in teams" ng-keypress="validatePKIForm($event)"></select>
	    </div>
	  </div>
	  <div class="modal-footer">
	    <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
	    <button type="submit" class="btn btn-primary">Associer</button>
	  </div>
	</div>
      </form>
    </div>
  </div>
</div>

<script>
  $('#associationModal').on('shown.bs.modal', function (event) {
    $('#tteam').trigger('focus');

    var button = $(event.relatedTarget);
    var serial = button.data('certificate');

    var modal = $(this);

    if (serial) {
      modal.data('certificate', serial);
    }
    if (modal.data('certificate')) {
      $("#tcert").val(modal.data('certificate'))
    }
  });
</script>

<hr>

<h2>
  Autorité de certification
  <span class="badge badge-success" ng-if="ca.version">Générée</span>
  <span class="badge badge-danger" ng-if="!ca.version">Introuvable</span>
  <button type="button" ng-click="generateCA()" class="float-right btn btn-sm btn-primary" ng-if="!ca.version"><span class="glyphicon glyphicon-certificate" aria-hidden="true"></span> Générer</button>
  <button type="button" ng-click="renewCA()" class="float-right btn btn-sm btn-primary" ng-if="ca.version" ng-disabled="!settings.wip"><span class="glyphicon glyphicon-certificate" aria-hidden="true"></span> Regénérer</button>
</h2>

<div class="alert alert-info" ng-if="!ca.version">
  <strong>Aucune CA n'a été générée pour le moment.</strong>

  <div class="form-group row">
    <label for="CAnotBefore" class="col-sm-3 col-form-label">Début de validité</label>
    <div class="col-sm-9">
      <input type="text" class="form-control form-control-sm" id="CAnotBefore" ng-model="newca.notBefore">
    </div>
  </div>
  <div class="form-group row">
    <label for="CAnotAfter" class="col-sm-3 col-form-label">Fin de validité</label>
    <div class="col-sm-9">
      <input type="text" class="form-control form-control-sm" id="CAnotAfter" ng-model="newca.notAfter">
    </div>
  </div>
</div>

<dl ng-if="ca.version">
  <ng-repeat ng-repeat="(k, v) in ca" class="row">
    <dt class="col-3 text-right">{{ k }}</dt>
    <dd class="col-9" ng-if="v.CommonName">/CN={{ v.CommonName }}/OU={{ v.OrganizationalUnit }}/O={{ v.Organization }}/L={{ v.Locality }}/P={{ v.Province }}/C={{ v.Country }}/</dd>
    <dd class="col-9" ng-if="!v.CommonName">{{ v }}</dd>
  </ng-repeat>
</dl>