frontend: improve 401 page thank to initial guide

This commit is contained in:
nemunaire 2017-01-24 02:21:21 +01:00
parent 6ee64d6d93
commit e1c4feaa1c
2 changed files with 151 additions and 18 deletions

View File

@ -1,10 +1,42 @@
@font-face {
font-family: "Linux Biolinum";
src: url('../fonts/LinBiolinum_R.woff') format('woff');
}
@font-face {
font-family: "Linux Biolinum";
src: url('../fonts/LinBiolinum_RB.woff') format('woff');
font-weight: bold;
}
@font-face {
font-family: "Linux Biolinum";
src: url('../fonts/LinBiolinum_RI.woff') format('woff');
font-style: italic;
}
[ng-cloak] {
display:none !important;
}
body {
overflow-y: scroll;
}
.beautiful {
font-family: "Linux Biolinum",Helvetica,Arial,sans-serif;
}
.beautiful ol {
font-size: 133%;
}
.beautiful ol ol {
font-size: 90%;
}
.text-bold {
font-weight: bolder;
}
.text-indent p {
text-indent: 1em;
}
.navbar {
margin-bottom: 0;

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html ng-app="FICApp">
<head>
<meta charset="utf-8">
<title>Challenge Forensic</title>
@ -18,22 +18,22 @@
<meta name="author" content="EPITA Laboratoire SRS">
<meta name="robots" content="all">
</head>
<body>
<body class="beautiful">
<div class="navbar navbar-inverse">
<div class="container">
<div class="row">
<div class="navbar-header col-sm-3">
<div class="navbar-header col-sm-2 text-left">
<a href="/">
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
<img src="/img/fic.png" alt="Forum International de la Cybersécurité">
</a>
</div>
<div class="navbar-right col-sm-2">
<div class="navbar-right col-sm-2 text-right">
<a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita" class="center-block">
<img src="/img/epita.png" alt="Epita">
</a>
</div>
<div id="clock" class="col-sm-7">
<div id="clock" class="col-sm-8 text-center">
Challenge forensic
</div>
</div>
@ -41,28 +41,129 @@
</div>
<div class="container" style="margin-top:20px;">
<div class="jumbotron text-justify">
<h1>Bienvenue !</h1>
<div class="jumbotron text-justify" style="text-indent: 1.5em">
<h1 style="text-indent: 0">Bienvenue !</h1>
<p style="text-indent: 0">
<strong>
Vous n'êtes pas encore connecté en tant qu'équipe sur notre serveur.
</strong>
</p><hr>
<p>
Vous n'êtes pas encore connecté en tant qu'équipe sur notre serveur.
Bienvenue dans cette première épreuve du challenge forensic&nbsp;!
Votre première activité consiste à accéder au site dédié à cet
événement ; ce guide est là pour vous y aider.
</p>
<br>
<p>
Après avoir suivi le guide présent sur la clef USB que nous vous
avons remis et ajouté votre certificat dans votre système ou votre
navigateur, ce dernier devrait vous afficher une boîte de dialogue
vous demandant de choisir parmi les certificats installés sur votre
machine.
<strong>Important&nbsp;:</strong> La clef USB qui vous a été donnée
contient des fichiers permettant votre authentification auprès de
nos serveurs. Ne la laissez pas sans surveillance !
</p>
<br>
<h2>Installation du certificat client</h2>
<p>
Si vous avez accédé à cette page avant d'avoir ajouté le certificat,
il peut être nécessaire de relancer votre navigateur, afin qu'il
démarre une nouvelle session.
Le certificat <em>client</em> est envoyé à notre serveur pour vous
identifier et vous authentifier. Votre certificat et votre clef
privée sont contenu sur la clef USB que nous vous avons donné, dans
un fichier <samp>.p12</samp>, protégé avec le mot de passe qui vous a
été fourni sur papier.
</p>
<p>
Choisissez la procédure correspondant à votre navigateur ou système
d'exploitation :
</p>
<ol>
<li><a href="#cert-client-mozilla-firefox">Mozilla Firefox</a></li>
<li><a href="#cert-client-chromium">Chromium/Google Chrome</a></li>
<ol>
<li><a href="#cert-client-chromium-windows">Sous Microsoft Windows</a></li>
<li><a href="#cert-client-chromium-macos">Sous Mac OS</a></li>
<li><a href="#cert-client-gnu-linux">Sous GNU/Linux, FreeBSD ou OpenBSD</a></li>
</ol>
<li><a href="#cert-client-ie">Internet Explorer/Edge</a></li>
<li><a href="#cert-client-safari">Safari</a></li>
</ol>
<br>
<h2 id="cert-client-mozilla-firefox">Mozilla Firefox</h2>
<ol>
<li>Ouvrez la fenêtre des préférences du navigateur.</li>
<li>Choisissez la catégorie <strong>Avancé</strong>.</li>
<li>Sélectionnez l'onglet <strong>Certificats</strong>.</li>
<li>Cliquez sur <strong>Afficher les certificats</strong>.</li>
<li>Sélectionnez l'onglet <strong>Vos certificats</strong>.</li>
<li>Cliquez sur <strong>Importer…</strong> et sélectionnez votre certificat client.</li>
</ol>
<br>
<h2 id="cert-client-chromium">Chromium/Google Chrome</h2>
<h3 id="cert-client-chromium-windows">Sous Microsoft Windows</h3>
<p>
Le navigateur utilise les paramètres du système ; suivez les
instructions concernant <a href="#cert-client-ie">Internet
Explorer</a>.
</p>
<h3 id="cert-client-chromium-macos">Sous Mac OS</h3>
<ol>
<li>Ouvrez le menu des préférences du navigateur.</li>
<li>Cliquez sur <strong>Afficher les paramètres avancés</strong>.</li>
<li>Dans la section <strong>HTTPS/SSL</strong>, cliquez sur <strong>Gérer les certificats</strong>. Le trousseau d'accès se lance.</li>
<li>Dans le menu <strong>Fichier</strong>, sélectionnez <strong>Importer des éléments…</strong> et sélectionnez votre certificat client.</li>
<li>Choisissez un trousseau.</li>
</ol>
<h3 id="cert-client-chromium-gnu-linux">Sous GNU/Linux, FreeBSD ou OpenBSD</h3>
<ol>
<li>Ouvrez le menu des préférences du navigateur.</li>
<li>Cliquez sur <strong>Afficher les paramètres avancés</strong>.</li>
<li>Dans la section <strong>HTTPS/SSL</strong>, cliquez sur <strong>Gérer les certificats</strong>.</li>
<li>Sélectionnez l'onglet <strong>Vos certificats</strong>.</li>
<li>Cliquez sur <strong>Importer…</strong> et sélectionnez votre certificat client.</li>
</ol>
<br>
<h2 id="cert-client-ie">Internet Explorer</h2>
<ol>
<li>Double-cliquez sur le fichier <samp>.p12</samp> présent sur votre clef USB. L'<em>assistant d'importation du certificat</em> apparaît.</li>
<li>Cliquez sur <strong>Suivant</strong>.</li>
<li>Cliquez sur <strong>Suivant</strong>.</li>
<li>Entrez le mot de passe fourni sur papier puis cliquez sur <strong>Suivant</strong>.</li>
<li>Cliquez sur <strong>Suivant</strong> (le certificat sera automatiquement placé dans le magasin <em>Personnel</em>).</li>
<li>Cliquez sur <strong>Terminer</strong>.</li>
</ol>
<p>
Selon votre version de Windows, votre système peut ensuite vous
demander de définir un mot de passe pour protéger ce certificat.
</p>
<p>
<strong>Microsoft Internet Explorer&nbsp;:</strong> Aucune version
de <em>Microsoft Internet Explorer</em> (nom d'« Internet Explorer »
jusqu'à sa version 9 comprise) n'est supportée par notre serveur.
</p>
<br>
<h2 id="cert-client-safari">Safari</h2>
<ol>
<li><strong>Double-cliquez</strong> sur le fichier <samp>.p12</samp> présent sur votre clef USB.</li>
<li>Entrez le mot de passe fourni sur papier puis cliquez sur <strong>Suivant</strong>.</li>
</ol>
<hr>
<p>
Si malgré tout, vous n'arrivez pas à accéder à l'espace de votre
équipe ou si votre clef USB est illisible, n'hésitez pas à nous
solliciter !
</p>
<p>
Bon courage&nbsp;!
</p>
</div>
</div>