listing char codes

src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html

@@ -2,39 +2,59 @@
 	<h2 class="title">
 		Essais de chiffrement pour un framadate zéro knoledge
 	</h2>
-	<div class="columns">
-		<div class="column">
 	<section class="boxed-shadow">
 		<h3 class="title">Chiffrement simple</h3>
+		<div class="notification is-info">
+			Les ordinateurs font des opérations très rapidement sur des nombres, pour coder et décoder des textes, il
+			suffit donc de les convertir en nombre et faire des opérations plus ou moins complexes avec.
+		</div>
+		Voici un texte que l'on voudrait chiffrer: <br />
 		<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
-				texte clair de {{ plainText.length }} caractères à convertir en truc indéchiffrable (à priori)
+		<br />
+		Vous pouvez le changer, la page se met à jour automatiquement. Le texte clair fait
+		{{ plainText.length }} caractères.
 
 		<br />
-				simple ciphered. On assigne un numéro à chaque caractère, séparé par un tiret en sortie.
+		Texte chiffré très simplement: on assigne un numéro à chaque caractère, séparé par un tiret en sortie.
+		Javascript permet de faire ceci avec <code>monTexte.charCodeAt(1)</code> pour obtenir le code du caractère 1 de
+		notre texte à chiffrer. Exemple:
+		<ul>
+			<li>
+				Le premier caractère <code>{{ plainText[1] }}</code> de notre texte <code>{{ plainText }}</code> a pour
+				numéro de caractère <i class="fa fa-arrow-right"></i> <code>{{ plainText.charCodeAt(1) }}</code
+				>. <br />
+				Voici ce que ça donne pour tout notre texte:
+			</li>
+			<li *ngFor="let char of plainText.split(''); index as i">
+				Le caractère n° <code>{{ i }}</code> de notre texte est <code>{{ char }}</code> a pour numéro de
+				caractère <i class="fa fa-arrow-right"></i> <code>{{ plainText.charCodeAt(i) }}</code
+				>.
+			</li>
+		</ul>
+		<br />
 		<strong class="cipher-result">
 			<app-copy-text [textToCopy]="simpleCipheredText" [displayLabelButton]="false"></app-copy-text>
+			<span>
 				{{ simpleCipheredText }}
+			</span>
 		</strong>
 		<br />
 		<h3 class="title">Avec un peu de sel?</h3>
 		<input type="text" [(ngModel)]="salt" />
 		({{ salt.length }} caractères)
 		<br />
-				simple ciphered avec un sel. on ajoute le sel avant le texte puis on passe le tout dans la conversion
+		simple ciphered avec un sel. on ajoute le sel avant le texte puis on passe le tout dans la conversion comme
-				comme ci-dessus. on obtient un message de {{ plainText.length }} + {{ salt.length }} caractères
+		ci-dessus. on obtient un message de {{ plainText.length }} + {{ salt.length }} caractères convertis en
-				convertis en {{ plainText.length + salt.length }} nombres séparés par des tirets.
+		{{ plainText.length + salt.length }} nombres séparés par des tirets.
 		<strong class="cipher-result">
-					<app-copy-text
+			<app-copy-text [textToCopy]="simpleCipheredTextWithSalt" [displayLabelButton]="false"></app-copy-text>
-						[textToCopy]="simpleCipheredTextWithSalt"
-						[displayLabelButton]="false"
-					></app-copy-text>
 			{{ simpleCipheredTextWithSalt }}
 		</strong>
 		<h3 class="title">On hashe le sel</h3>
 		<div class="columns">
 			<div class="column is-half">
-						Pour gagner en aléatoire on peut passer le sel dans une fonction de hashage cryptographique,
+				Pour gagner en aléatoire on peut passer le sel dans une fonction de hashage cryptographique, telle que
-						telle que MD5 (Message Digest 5).
+				MD5 (Message Digest 5).
 				<img
 					src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Md5_generalview.png/330px-Md5_generalview.png"
 					alt="fonctionnement de MD5"
@@ -59,32 +79,25 @@
 		</div>
 
 		<h3 class="title">Légèrement épicé</h3>
-				simple chiffrement avec un sel avant et un saupoudrage du sel sur chacun des caractères de la phrase. la
+		simple chiffrement avec un sel avant et un saupoudrage du sel sur chacun des caractères de la phrase. la valeur
-				valeur du caractère est ajoutée à la valeur du caractère du sel correspondant. une fois arrivé à la fin
+		du caractère est ajoutée à la valeur du caractère du sel correspondant. une fois arrivé à la fin du sel on
-				du sel on reprend au début pour saupoudrer toute la phrase à chiffrer. Ce qui donne
+		reprend au début pour saupoudrer toute la phrase à chiffrer. Ce qui donne
 		{{ simpleCipheredTextWithSpreadSalt.split('-').length }} chiffres.
 		<strong class="cipher-result">
-					<app-copy-text
+			<app-copy-text [textToCopy]="simpleCipheredTextWithSpreadSalt" [displayLabelButton]="false"></app-copy-text>
-						[textToCopy]="simpleCipheredTextWithSpreadSalt"
-						[displayLabelButton]="false"
-					></app-copy-text>
 			{{ simpleCipheredTextWithSpreadSalt }}
 		</strong>
 		<br />
 
 		<h3 class="title">On en remet une couche</h3>
-				Les nombres que l'on a obtenu peuvent être transmis après une opération de conversion en caractères. On
+		Les nombres que l'on a obtenu peuvent être transmis après une opération de conversion en caractères. On a donc
-				a donc autant de caractères que juste avant. ça ressemble déjà plus à un message pas évident à
+		autant de caractères que juste avant. ça ressemble déjà plus à un message pas évident à déchiffrer. Le nouveau
-				déchiffrer. Le nouveau texte fait {{ layerOnSpread.length }} caractères.
+		texte fait {{ layerOnSpread.length }} caractères.
 		<strong class="cipher-result">
 			<app-copy-text [textToCopy]="layerOnSpread" [displayLabelButton]="false"></app-copy-text>
 			{{ layerOnSpread }}
 		</strong>
 	</section>
-		</div>
-		<div class="column"></div>
-	</div>
-
 	<section class="boxed-shadow">
 		<h3 class="title">Déchiffrement simple</h3>
 
@@ -98,15 +111,18 @@
 		<strong class="cipher-result">
 			{{ simpleDeCipheredText }}
 		</strong>
-		simple texte déchiffré avec sel, en enlevant les {{ salt.length }} premiers caractères du sel
+		<br />
-		<strong class="cipher-result">
+		simple texte déchiffré avec sel, en enlevant les {{ salt.length }} premiers caractères, ceux correspondant au
-			{{ simpleDeCipheredTextWithSalt }}
+		sel.
-		</strong>
+		<!--		<strong class="cipher-result">-->
+		<!--			{{ simpleDeCipheredTextWithSalt }}-->
+		<!--		</strong>-->
+		<br />
 		Simple texte déchiffré avec sel saupoudré, en enlevant à chaque caractère la valeur du caractère courant du sel.
 		Sans connaître le sel il est déjà plus difficile de deviner la phrase, mais des régularités apparaissent encore.
-		<strong class="cipher-result">
+		<!--		<strong class="cipher-result">-->
-			{{ simpleDeCipheredTextWithSpreadSalt }}
+		<!--			{{ simpleDeCipheredTextWithSpreadSalt }}-->
-		</strong>
+		<!--		</strong>-->
 	</section>
 
 	<section class="is-boxed">

src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss

@@ -11,14 +11,13 @@
 	color: #7d6c99;
 	padding: 0.5em;
 	margin-left: 1em;
-	display: block;
 	min-width: 10ch;
 	min-height: 2em;
-	max-width: 25%;
+	max-width: 80%;
 	overflow-x: scroll;
 	line-height: 2em;
+	display: flex;
 	app-copy-text {
-		//float: left;
 		margin-right: 1em;
 	}
 }