From d929eaac1a55981e550f23212a489a842af356e1 Mon Sep 17 00:00:00 2001
From: max/sooulix <maxime@freepoteries.fr>
Date: Thu, 15 Aug 2024 20:11:33 +0200
Subject: [PATCH] =?UTF-8?q?[basics]=20supression=20des=20informations=20co?=
 =?UTF-8?q?ntact,=20mise=20en=20place=20de=20l'adresse=20e-mail=20obfusqu?=
 =?UTF-8?q?=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/js/obfuscate_email.js   |  25 +++++++
 templates/base.html            |   1 +
 templates/partials/basics.html | 117 +++++++++++----------------------
 3 files changed, 63 insertions(+), 80 deletions(-)
 create mode 100644 static/js/obfuscate_email.js

diff --git a/static/js/obfuscate_email.js b/static/js/obfuscate_email.js
new file mode 100644
index 0000000..f5bc692
--- /dev/null
+++ b/static/js/obfuscate_email.js
@@ -0,0 +1,25 @@
+function obfuscateEmail(item) {
+	let href = item.href;
+	let innerHTML = item.innerHTML;
+	item.onmouseover = (_this) => {
+		const elt = _this.target;
+		const b64email = elt.href.match('[^/]*$').pop();
+		elt.href = 'mailto:' + atob(b64email);
+		elt.innerHTML = 'E-mail: ' + atob(b64email);
+	}
+	item.onmouseout = (_this) => {
+		_this.target.href = href;
+		_this.target.innerHTML = innerHTML;
+	}
+
+}
+
+function init() {
+	const elts = []
+	const query = document.getElementsByClassName("obfuscated_email")
+	for (let i = 0; i < query.length; i++) {
+		obfuscateEmail(query[i]);
+	}
+}
+
+window.onload = init
diff --git a/templates/base.html b/templates/base.html
index 9d2b9a6..6781b59 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -80,6 +80,7 @@
     }
   });
   </script>
+  <script type="text/javascript" src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/obfuscate_email.js"></script>
 </body>
 
 </html>
diff --git a/templates/partials/basics.html b/templates/partials/basics.html
index 292f369..ffde66f 100644
--- a/templates/partials/basics.html
+++ b/templates/partials/basics.html
@@ -1,86 +1,43 @@
 {% set basics = page.resume.basics %}
  {% if basics %}
-	<header id="header" class="clear">
-		{% if basics.image_b64 %}
-		<img class="image" src="data:image/jpeg;base64,{{ basics.image_b64 | safe }}" alt="{{ basics.name }}" />
-		<div class="middle">
-			<h1 class="name">{{ basics.name }}</h1>
-			<h2 class="label">{{ basics.label }}</h2>
-		</div>
-		{% else %}
-		<div>
-			<h1 class="name">{{ basics.name }}</h1>
-			<h2 class="label">{{ basics.label }}</h2>
-		</div>
-		{% endif %}
+  <header id="header" class="clear">
+    {% if basics.image_b64 %}
+    <img class="image" src="data:image/jpeg;base64,{{ basics.image_b64 | safe }}" alt="{{ basics.name }}" />
+    <div class="middle">
+      <h1 class="name">{{ basics.name }}</h1>
+      <h2 class="label">{{ basics.label }}</h2>
+    </div>
+    {% else %}
+    <div>
+      <h1 class="name">{{ basics.name }}</h1>
+      <h2 class="label">{{ basics.label }}</h2>
+    </div>
+    {% endif %}
 
-		{% if basics.location %}
-		<span class="location">
-			{% if basics.location.city %}
-			<span class="city">{{ basics.location.city }},</span>
-			{% endif %}
-			{% if basics.location.region %}
-			<span class="region">{{ basics.location.region }}</span>
-			{% endif %}
-			{% if basics.location.countryCode %}
-			<span class="countryCode {{ basics.location.countryCode }}"></span>
-			{% endif %}
-		</span>
-		{% endif %}
+    {% if basics.location %}
+    <span class="location">
+      {% if basics.location.city %}
+      <span class="city">{{ basics.location.city }},</span>
+      {% endif %}
+      {% if basics.location.region %}
+      <span class="region">{{ basics.location.region }}</span>
+      {% endif %}
+      {% if basics.location.countryCode %}
+      <span class="countryCode {{ basics.location.countryCode }}"></span>
+      {% endif %}
+    </span>
+    {% endif %}
 
-		{% if basics.birth %}
-		{{ basics.birth }}
-		{% endif %}
-
-		<div id="contact">
-			{% if basics.url %}
-			<div class="website">
-				<span class="fas fa-external-link-alt"></span>
-				<a href="{{ basics.url }}">{{ basics.url }}</a>
-			</div>
-			{% endif %}
-			{% if basics.email %}
-			<div class="email">
-				<span class="far fa-envelope"></span>
-				<a href="mailto:{{ basics.email }}">{{ basics.email }}</a>
-			</div>
-			{% endif %}
-			{% if basics.phone %}
-			<div class="phone">
-				<span class="fas fa-mobile-alt"></span>
-				<a href="tel:{{ basics.phone }}">{{ basics.phone }}</a>
-			</div>
-			{% endif %}
-		</div>
-
-		{% if basics.profiles %}
-		<div id="profiles">
-			{% for profile in basics.profiles %}
-			<div class="item">
-				{% if profile.network %}
-				<div class="username">
-					<span class="{{ profile.icon | d('fab fa-' + profile.network | replace(' ', '-') | lower) }} {{ profile.network | replace(' ', '-') | lower }} social"></span>
-					{% if profile.url %}
-					<span class="url">
-						<a href="{{ profile.url }}">{{ profile.username }}</a>
-					</span>
-					{% else %}
-					<span>{{ profile.username }}</span>
-					{% endif %}
-				</div>
-				{% endif %}
-			</div>
-			{% endfor %}
-		</div>
-		{% endif %}
-	</header>
-
-	{% if basics.summary %}
-	<section class="section">
-		<section class="main-summary">
-			<div>{{ basics.summary | replace("\r\n", "<br>") | replace("\n", "<br>") | replace("\r", "<br>") }}</div>
-		</section>
-	</section>
-	{% endif %}
+    <div id="contact">
+			<a href="{{ basics.email }}" class="obfuscated_email">E-mail (hover me)</a>
+    </div>
+  </header>
 
+  {% if basics.summary %}
+  <section class="section">
+    <section class="main-summary">
+      <div>{{ basics.summary | replace("\r\n", "<br>") | replace("\n", "<br>") | replace("\r", "<br>") }}</div>
+    </section>
+  </section>
+  {% endif %}
 {% endif %}