Ajout page d’accueil/attente et dashboard

Une démonstration ne commence jamais à l’heure, mais un petit écran qui
permet d’attendre le début et qui permet à l’auditeur de se mettre en
situation n’est jamais de refus.

On ajoute aussi une petite dashboard qui résume la situation du système.

console/web-api/lib/Email/SpoofingDemo/Web.pm

@@ -39,7 +39,28 @@ sub call_api {
 }
 
 get '/' => sub {
-    template 'index' => { 'title' => 'Accueil' };
+    template 'index' => {
+        'title' => 'Démonstration de SPF, DKIM et DMARC',
+        'no_nav' => 1
+    };
+};
+
+get '/dashboard' => sub {
+    my $sender_domain = 'expediteur.example';
+    my ($sender_spf, undef) = call_api(GET => 'dns', "/zone/$sender_domain/spf");
+    my ($sender_dkim, undef) = call_api(GET => 'dns', "/zone/$sender_domain/domainkey");
+    my ($sender_dmarc, undef) = call_api(GET => 'dns', "/zone/$sender_domain/dmarc");
+    my ($recipient_status, undef) = call_api(GET => 'recipient', '/status');
+
+    template 'dashboard' => {
+        'title' => 'Tableau de bord',
+        'sender' => {
+            'spf_policies' => $sender_spf,
+            'dkim_domains' => [keys(%$sender_dkim)],
+            'dmarc_policies' => $sender_dmarc
+        },
+        'recipient' => $recipient_status
+    };
 };
 
 get '/dns/zone-edit/:zone' => sub {

console/web-api/views/dashboard.tt

@@ -0,0 +1,84 @@
+[% sender_domain = 'expediteur.example' %]
+
+<div class="container pt-4">
+  <div class="row mb-3">
+    <div class="col">
+      <p>Bienvenue sur la plate-forme de démonstration SPF, DKIM et DMARC !</p>
+      <p>Faites votre choix dans le menu « Attaquant », « Expéditeur » ou « Destinataire ».</p>
+    </div>
+  </div>
+
+  <div class="row mb-3">
+    <div class="col">
+      <h1>État des systèmes</h1>
+    </div>
+  </div>
+
+  <div class="row mb-3">
+    <div class="col-sm-12 mb-sm-3 col-xl-6 mb-xl-0">
+      <div class="card">
+        <h5 class="card-header">Expéditeur</h5>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            SPF :
+            [% IF sender.spf_policies.size %]
+              <span class="text-success">actif</span> (politique en vigueur pour <span class="font-monospace">[% sender_domain %]</span> : <span class="font-monospace">[% sender.spf_policies.item(sender_domain) | html %]</span>)
+            [% ELSE %]
+              <span class="text-danger">pas de politique publiée</span>
+            [% END %]
+          </li>
+          <li class="list-group-item">
+            DKIM :
+            [% IF sender.dkim_domains.size %]
+              <span class="text-success">
+                actif pour [% sender.dkim_domains.size %] domaine[% "s" if sender.dkim_domains.size > 1 %]
+              </span>
+            [% ELSE %]
+              <span class="text-danger">non configuré</span>
+            [% END %]
+          </li>
+          <li class="list-group-item">
+            DMARC :
+            [% IF sender.dmarc_policies.size %]
+              <span class="text-success">actif</span> (politique en vigueur pour <span class="font-monospace">[% sender_domain %]</span> : <span class="font-monospace">[% sender.dmarc_policies.item(sender_domain) | html %]</span>
+            [% ELSE %]
+              <span class="text-danger">pas de politique publiée</span>
+            [% END %]
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="col">
+      <div class="card">
+        <h5 class="card-header">Destinataire</h5>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">
+            Contrôle de la politique SPF de l’expéditeur :
+            [% IF recipient.spf == 'enabled' %]
+              <span class="text-success">activé</span>
+            [% ELSE %]
+              <span class="text-danger">désactivé</span>
+            [% END %]
+          </li>
+          <li class="list-group-item">
+            Contrôle de la signature DKIM des courriels envoyés par l’expéditeur :
+            [% IF recipient.dkim == 'enabled'%]
+              <span class="text-success">activé</span>
+            [% ELSE %]
+              <span class="text-danger">désactivé</span>
+            [% END %]
+          </li>
+          <li class="list-group-item">
+            Contrôle de la politique DMARC de l’expéditeur :
+            [% IF recipient.dmarc == 'enabled' %]
+              <span class="text-success">activé</span>
+            [% ELSE %]
+              <span class="text-danger">désactivé</span>
+            [% END %]
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

console/web-api/views/index.tt

@@ -0,0 +1,46 @@
+<div class="container pt-5 pb-2">
+  <div class="row mb-2">
+    <div class="p-5 mb-4 bg-light rounded-3 order-2 order-lg-1 col-lg-10">
+      <div class="container-fluid py-3 pb-2">
+        <h1 class="display-3 fw-bold">Démonstration de SPF, DKIM et DMARC</h1>
+        <p class="lead">
+          Apprenez à vous protéger de l’usurpation d’identité dans les courriels avec cette démonstration multi-points de vue.
+        </p>
+        <a class="btn btn-primary btn-lg mt-3" href="[% request.uri_base %]/dashboard">Commencer</a>
+      </div>
+    </div>
+  </div>
+
+  <div class="row align-items-md-stretch mb-3">
+    <div class="col-sm-12 col-lg-4 mb-3">
+      <div class="h-100 px-4 pt-4 pb-3 text-bg-light rounded-3">
+        <h4>Expéditeur</h4>
+        <p>
+          Une personne mal intentionnée usurpe l’identité de votre entreprise
+          pour faire du hameçonnage et nuire à votre réputation. Comment faire
+          pour l’arrêter ?
+        </p>
+      </div>
+    </div>
+    <div class="col-sm-12 col-lg-4 mb-3">
+      <div class="h-100 px-4 pt-4 pb-3 text-bg-light rounded-3">
+        <h4>Destinataire</h4>
+        <p>
+          On vous critique car les utilisateurs de votre service de messagerie
+          reçoivent des tombereaux de courriels malveillants. Que faire pour
+          protéger vos utilisateurs ?
+        </p>
+      </div>
+    </div>
+    <div class="col-sm-12 col-lg-4 mb-3">
+      <div class="h-100 px-4 pt-4 pb-3 text-bg-light rounded-3">
+        <h4>Attaquant</h4>
+        <p>
+          Vous n’en pouvez plus de ces amateurs qui ne prennent pas la peine
+          d’appliquer les bonnes pratiques de cybersécurité. Il va falloir leur
+          apprendre une bonne leçon !
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

console/web-api/views/layouts/_nav.tt

@@ -5,12 +5,15 @@
 [% END %]
 <nav class="navbar navbar-expand-md bg-light mb-3">
   <div class="container-fluid">
-    <a class="navbar-brand" href="#">Menu</a>
+    <a class="navbar-brand" href="[% request.uri_base %]/dashboard">Démo SPF/DKIM/DMARC</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Afficher ou cacher la navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <ul class="navbar-nav me-auto mb-2 mb-md-0">
+        <li class="nav-item">
+          <a class="nav-link" href="[% request.uri_base %]/dashboard">Tableau de bord</a>
+        </li>
         <li class="nav-item dropdown">
           [% PROCESS role id="attacker" label="Attaquant" %]
           <ul class="dropdown-menu">

console/web-api/views/layouts/main.tt

@@ -7,7 +7,9 @@
   <link rel="stylesheet" href="[% request.uri_base %]/css/main.css">
 </head>
 <body>
+[% UNLESS no_nav %]
 [% INCLUDE layouts/_nav.tt %]
+[% END %]
 <script src="[% request.uri_base %]/jquery-3.6.4.min.js"></script>
 [% content %]
 <script src="[% request.uri_base %]/javascripts/bootstrap.bundle.min.js"></script>