adlin/token-validator/htdocs/views/tunnels.html

<h2>
  Tunnels
</h2>

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th></th>
      <th>Token</th>
      <th>Suffix</th>
      <th>Dernière utilisation</th>
      <th>Clef publique</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="tunnel in tunnels" ng-class="{'bg-success': tunnel.dump}">
      <td>
	<span ng-if="tunnel.Dump" class="text-bold text-success">&gt;</span>
	<span ng-if="!tunnel.Dump">&#x274c;</span>
      </td>
      <td><code>{{ tunnel.TokenText }}</code></td>
      <td ng-if="tunnel.edit">
        <input class="form-control" ng-model="tunnel.newData.SuffixIP" placeholder="Suffixe d'IP par défaut" autofocus integer>
      </td>
      <td ng-if="!tunnel.edit && tunnel.SuffixIP">{{ tunnel.SuffixIP }}</td>
      <td ng-if="!tunnel.edit && !tunnel.SuffixIP">Par défaut</td>
      <td>{{ tunnel.Time | date:"medium" }}<span ng-if="tunnel.Version"> (VM TP {{ tunnel.Version }})</span></td>
      <td><code class="text-truncate" title="{{ tunnel.PubKey }}" ng-show="tunnel.PubKey">{{ tunnel.PubKey }}</code><span ng-show="!tunnel.PubKey">(none)</span></td>
      <td>
	<button class="btn btn-sm btn-info" ng-click="editTunnel(tunnel)" ng-if="!tunnel.edit">
	  Éditer
	</button>
	<button class="btn btn-sm btn-success" ng-click="updateTunnel(tunnel)" ng-if="tunnel.edit">
	  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ng-show="tunnel.pleaseWaitUpdate"></span>
	  Enregistrer
	</button>
	<button class="btn btn-sm btn-danger" ng-click="dropTunnel(tunnel)">
	  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ng-show="tunnel.pleaseWaitDrop"></span>
	  Révoquer
	</button>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">
	<button class="btn btn-primary" ng-click="newTunnel()">
	  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" ng-show="pleaseWaitNew"></span>
	  Nouveau tunnel
	</button>
      </td>
    </tr>
  </tfoot>
</table>

<div class="card-deck mb-4">
  <div class="card">
    <h4 class="card-header">Paramètres du tunnel</h4>
    <ul class="list-group list-group-flush">
      <li class="list-group-item"><strong>Statut&nbsp;:</strong> {{ wginfo.status }}</li>
      <li class="list-group-item"><strong>Clef publique du serveur&nbsp;:</strong> <code>{{ wginfo.srv_pubkey }}</code></li>
      <li class="list-group-item"><strong>Port d'écoute du serveur&nbsp;:</strong> {{ wginfo.srv_port }}</li>
      <li class="list-group-item"><strong>Adresse IPv6 du tunnel&nbsp;:</strong> {{ wginfo.clt_ipv6 }}/{{ wginfo.clt_range }}</li>
      <li class="list-group-item"><strong>Gateway/passerelle IPv6&nbsp;:</strong> {{ wginfo.srv_gw6 }}</li>
    </ul>
  </div>
  <div class="card" ng-repeat="tunnel in tunnels" ng-if="tunnel.Dump">
    <h4 class="card-header">
      État de mon tunnel
      <span class="badge" ng-class="{'badge-success': PING && PING < 90, 'badge-danger': !PING || PING >= 90}" title="{{ PING_time }}">&#x1f4bb;</span>
    </h4>
    <ul class="list-group list-group-flush">
      <li class="list-group-item"><strong>Clef publique pair&nbsp;:</strong> <code>{{ tunnel.Dump.PubKey }}</code></li>
      <li class="list-group-item"><strong>Pre-Shared Key&nbsp;:</strong> {{ tunnel.Dump.PSK }}</li>
      <li class="list-group-item"><strong>Endpoint&nbsp;:</strong> {{ tunnel.Dump.Endpoint }}</li>
      <li class="list-group-item"><strong>Dernier Handshake&nbsp;:</strong> {{ tunnel.Dump.LastHandS }} <em class="text-muted">{{ tunnel.Dump.LastHandS | since }}</em></li>
      <li class="list-group-item"><strong>TX/RX&nbsp;:</strong> {{ tunnel.Dump.TX }} B / {{ tunnel.Dump.RX }} B</li>
    </ul>
  </div>
</div>