From 006aa1920552b73f6ccafbccd6313ab31a30db35 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Sat, 27 Aug 2022 15:05:11 +0200
Subject: [PATCH] feat [front]: extract social buttons

---
 front/components/layout/NavBar.vue      | 22 +-------
 front/components/socials/facebook.vue   |  9 +++
 front/components/socials/instagram.vue  |  9 +++
 front/components/socials/newsletter.vue | 73 +++++++++++++++++++++++++
 front/css/app.sass                      |  5 ++
 5 files changed, 99 insertions(+), 19 deletions(-)
 create mode 100644 front/components/socials/facebook.vue
 create mode 100644 front/components/socials/instagram.vue
 create mode 100644 front/components/socials/newsletter.vue

diff --git a/front/components/layout/NavBar.vue b/front/components/layout/NavBar.vue
index 1f79b2c..d926d0e 100644
--- a/front/components/layout/NavBar.vue
+++ b/front/components/layout/NavBar.vue
@@ -34,21 +34,9 @@
             </div>
           </div>
           <div class="networks">
-            <a
-              class="navbar-item"
-              href="https://www.facebook.com/cineclub.ensulm"
-            >
-              <v-icon scale="1.8" name="ri-facebook-box-fill" /> Facebook
-            </a>
-            <a
-              class="navbar-item"
-              href="https://www.instagram.com/cineclubens/"
-            >
-              <v-icon scale="1.8" name="ri-instagram-fill" /> Instagram
-            </a>
-            <div class="navbar-item">
-              <v-icon scale="1.8" name="ri-mail-fill" /> Newsletter
-            </div>
+            <SocialsFacebook />
+            <SocialsInstagram />
+            <SocialsNewsletter />
           </div>
         </div>
         <div class="navbar-start">
@@ -164,7 +152,3 @@ $navbar-item-img-max-height: 105px
     justify-content: space-between
     flex-direction: column
 </style>
-<style lang="sass">
-.navbar .networks .navbar-item .ov-icon
-  margin-right: 0.5rem
-</style>
diff --git a/front/components/socials/facebook.vue b/front/components/socials/facebook.vue
new file mode 100644
index 0000000..3ba222a
--- /dev/null
+++ b/front/components/socials/facebook.vue
@@ -0,0 +1,9 @@
+<template>
+  <a
+    class="navbar-item network-item"
+    href="https://www.facebook.com/cineclub.ensulm"
+  >
+    <v-icon scale="1.8" name="ri-facebook-box-fill" />
+    Facebook
+  </a>
+</template>
diff --git a/front/components/socials/instagram.vue b/front/components/socials/instagram.vue
new file mode 100644
index 0000000..619f066
--- /dev/null
+++ b/front/components/socials/instagram.vue
@@ -0,0 +1,9 @@
+<template>
+  <a
+    class="navbar-item network-item"
+    href="https://www.instagram.com/cineclubens/"
+  >
+    <v-icon scale="1.8" name="ri-instagram-fill" />
+    Instagram
+  </a>
+</template>
diff --git a/front/components/socials/newsletter.vue b/front/components/socials/newsletter.vue
new file mode 100644
index 0000000..60937e6
--- /dev/null
+++ b/front/components/socials/newsletter.vue
@@ -0,0 +1,73 @@
+<template>
+  <a class="navbar-item network-item" :href="mailToLink" @click="waitForBlur">
+    <v-icon scale="1.8" name="ri-mail-fill" />
+    Newsletter
+  </a>
+  <div class="modal" :class="{ 'is-active': showModal }">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <div class="modal-card-body content">
+        <p>
+          Si aucun mail ne s'est ouvert, alors désolée, il faudra faire
+          l'inscription manuellement. Une solution plus pratique est en cours de
+          développement.
+        </p>
+        <p>
+          Il vous faut envoyer à l'adresse
+          <span
+            class="copyable-text"
+            @click="copyClipboard(mailDestination, 'L\'adresse email')"
+          >
+            {{ mailDestination }}
+          </span>
+          un mail dont l'objet soit
+          <span
+            class="copyable-text"
+            @click="copyClipboard(mailSubject, 'L\'objet du mail')"
+          >
+            {{ mailSubject }}
+          </span>
+        </p>
+        <div v-if="copiedItemFr" class="notification is-primary is-light">
+          {{ copiedItemFr }} a été copié dans votre presse-papier
+        </div>
+      </div>
+    </div>
+    <button
+      class="modal-close is-large"
+      aria-label="close"
+      @click="showModal = false"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const mailToLink =
+  "mailto:sympa@lists.ens.psl.eu?subject=SUBSCRIBE%20cineclub-informations&body=Envoyez%20ce%20mail%20pour%20terminer%20de%20vous%20inscrire"
+const mailDestination = "sympa@lists.ens.psl.eu"
+const mailSubject = "SUBSCRIBE cineclub-informations"
+const showModal = ref<boolean>(false)
+const copiedItemFr = ref<string>("")
+
+function waitForBlur() {
+  if (process.server) return
+  let t
+  window.addEventListener("blur", () => clearTimeout(t), { once: true })
+  t = setTimeout(() => (showModal.value = true), 500)
+}
+
+function copyClipboard(itemToCopy, itemName) {
+  if (process.server) return
+  navigator.clipboard.writeText(itemToCopy)
+  copiedItemFr.value = itemName
+}
+</script>
+
+<style lang="sass">
+.copyable-text
+  font-family: monospace
+  cursor: pointer
+
+  &:hover
+    color: $primary
+</style>
diff --git a/front/css/app.sass b/front/css/app.sass
index 1aca6d6..b54697f 100644
--- a/front/css/app.sass
+++ b/front/css/app.sass
@@ -13,6 +13,7 @@
 @import "bulma/sass/elements/container"
 @import "bulma/sass/elements/content"
 @import "bulma/sass/elements/image"
+@import "bulma/sass/elements/notification"
 @import "bulma/sass/elements/other"
 @import "bulma/sass/elements/tag"
 @import "bulma/sass/elements/title"
@@ -33,3 +34,7 @@
   font-family: "Carter One", serif
   font-size: 7em
   color: #90001C
+
+
+.network-item .ov-icon
+  margin-right: 0.5rem