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

<h2>
  Tunnels
</h2>

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th></th>
      <th>
        Token
        <span class="badge badge-pill badge-dark" title="Utilisez l'un de vos tokens pour connecter votre machine virtuelle à un réseau IPv6 routable sur Internet. Ce token vous sera demandé au premier démarrage de la VM.">?</span>
      </th>
      <th>
        Suffix
        <span class="badge badge-pill badge-dark" title="Si vous souhaitez pouvoir utiliser plusieurs tunnels en parallèle, tout en bénéficiant de la mise en place automatique du tunnel au démarrage, vous allez devoir vous définir un suffix. Il s'agit de la dernière partie de l'adresse qui sera attribué à votre machine.">?</span>
      </th>
      <th>
        Dernière utilisation
        <span class="badge badge-pill badge-dark" title="Si vous constatez une utilisation frauduleuse, révoquez votre tunnel.">?</span>
      </th>
      <th>
        Clef publique
        <span class="badge badge-pill badge-dark" title="La clef publique est automatiquement envoyée par votre machine virtuelle lorsqu'elle valide le token. C'est une clef cryptographique qui est utiliser pour chiffrer le canal VPN utilisé.">?</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="tunnel in tunnels" ng-class="{'bg-success': tunnel.dump}">
      <td>
	<span ng-if="tunnel.OverrideID" title="Tunnel secondaire, prefix IP différent ⚠️" class="font-weight-bold text-warning">!</span>
	<span ng-if="!tunnel.OverrideID && tunnel.Dump" title="Tunnel actif (voir information ci-dessous)" class="font-weight-bold text-success">&gt;</span>
	<span ng-if="!tunnel.OverrideID && !tunnel.Dump" title="Tunnel inactif">&#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
      <span class="float-right badge badge-pill badge-dark" title="Ce cadre vous montre les informations sur le routeur hébergeant le tunnel chez Maatma. Vérifiez notamment que vous avez les mêmes paramètres dans vos machines.">?</span>
    </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 mb-2" ng-repeat="tunnel in tunnels" ng-if="tunnel.Dump">
    <h4 class="card-header">
      État de mon tunnel
      <span class="badge" ng-if="$first" ng-class="{'badge-success': PING && PING < 90, 'badge-danger': !PING || PING >= 90}" title="{{ PING_time }}">&#x1f4bb;</span>
      <span class="float-right badge badge-pill badge-dark" title="Voici les informations concernant l'un de vos tunnels actuellement actif (pas forcément connecté, reportez-vous à l'icône pour savoir cela).">?</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>