add possibility to copy pubkeys in the clipboard

assets/css/_bootstrap.scss

@@ -11,10 +11,10 @@
  @import "~bootstrap/scss/tables";
  @import "~bootstrap/scss/forms";
  @import "~bootstrap/scss/buttons";
-//  @import "~bootstrap/scss/transitions";
+ @import "~bootstrap/scss/transitions";
 //  @import "~bootstrap/scss/dropdown";
 //  @import "~bootstrap/scss/button-group";
-//  @import "~bootstrap/scss/input-group";
+ @import "~bootstrap/scss/input-group";
 //  @import "~bootstrap/scss/custom-forms";
  @import "~bootstrap/scss/nav";
  @import "~bootstrap/scss/navbar";
@@ -30,10 +30,10 @@
  @import "~bootstrap/scss/close";
 //  @import "~bootstrap/scss/toasts";
 //  @import "~bootstrap/scss/modal";
-//  @import "~bootstrap/scss/tooltip";
+ @import "~bootstrap/scss/tooltip";
 //  @import "~bootstrap/scss/popover";
 //  @import "~bootstrap/scss/carousel";
- @import "~bootstrap/scss/spinners";
+//  @import "~bootstrap/scss/spinners";
  @import "~bootstrap/scss/utilities";
  @import "~bootstrap/scss/print";
  
\ No newline at end of file

assets/css/style.scss

@@ -39,11 +39,6 @@ $close-font-weight: 500;
 @import 'font';
 @import 'bootstrap';
 
-.card-subtitle {
-    font-style: italic;
-    font-size: 90%;
-}
-
 .table-hover tbody tr{
     cursor: pointer;
 }
\ No newline at end of file

assets/img/clipboard.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><path d="M19,2h-4.2c-0.4-1.2-1.5-2-2.8-2S9.6,0.8,9.2,2H5C3.9,2,3,2.9,3,4v16c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V4  C21,2.9,20.1,2,19,2z M12,2c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1s-1-0.4-1-1C11,2.4,11.4,2,12,2z M19,20H5V4h2v2h10V4h2V20z"/></svg>
\ No newline at end of file

components/btn/Clipboard.vue

+<template>
+<div class="clipboard input-group input-group-sm mb-3 mx-auto">
+    <div class="input-group-prepend">
+        <button id="btncopy" class="btn btn-outline-secondary px-4 py-1" type="button" @click="copyText"></button>
+    </div>
+    <input type="text" class="form-control text-truncate" :value="textContent" disabled>
+</div>
+</template>
+
+<script>
+export default {
+    props: {
+        textContent: {
+            type: String,
+            required: true
+        }
+    },
+    methods: {
+        copyText() {
+            navigator.clipboard.writeText(this.textContent)
+                        $('#btncopy').tooltip({
+                title: this.$t('copie') + ' !',
+                trigger: 'manual'
+            })
+            $('#btncopy').tooltip('show')
+            setTimeout(() => {
+                $('#btncopy').tooltip('hide')
+            },500)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.clipboard {
+    max-width:500px;
+
+    button {
+        background: url("~assets/img/clipboard.svg") no-repeat 50% 50% #fff;
+        background-size: 40%;
+    }
+}
+</style>
\ No newline at end of file

components/member/Card.vue

@@ -5,7 +5,7 @@
             {{ hash.uid }}
             <BadgeStatus :membre="hash" />
         </h2>
-        <div class="card-subtitle mb-2 text-muted text-center">{{ hash.pubkey }}</div>
+        <BtnClipboard :textContent="this.hash.pubkey" />
         <div class="table-responsive">
             <table class="table table-sm table-borderless" v-if="hash.status != 'REVOKED'">
             <tbody>
@@ -71,16 +71,12 @@ export default {
         text-align: center;
         width: auto;
         margin: auto;
-        
+
         tr {
             display: flex;
             flex-direction: column;
-
-
         }
     }
-
-    
 }
 
 @media (min-width:576px) {
@@ -89,10 +85,7 @@ export default {
             tr {display: table-row;}
             th {text-align: right;}
             td {text-align: left;}
-
         }
     }
 }
-
-
 </style>
\ No newline at end of file

i18n/locales/en.json

@@ -8,6 +8,7 @@
         "recues" : "Certificates received "
     },
     "chargement" : "Loading",
+    "copie" : "Copied",
     "description": "Description",
     "dev": "In development",
     "expire": "Expires",

i18n/locales/es.json

@@ -8,6 +8,7 @@
         "recues" : "Certificaciones recibidas "
     },
     "chargement" : "Cargando",
+    "copie" : "Copiada",
     "description": "Descripción",
     "dev": "En desarrollo",
     "expire": "Expira el",

i18n/locales/fr.json

@@ -8,6 +8,7 @@
         "recues" : "Certifications reçues "
     },
     "chargement" : "Chargement",
+    "copie" : "Copiée",
     "description": "Description",
     "dev": "En Développement",
     "expire": "Expire le",

nuxt.config.js

 import i18n from './i18n'
+import webpack from 'webpack'
 
 export default {
   // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
@@ -28,7 +29,8 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
-    '~plugins/filters.js'
+    '~plugins/filters.js',
+    '~plugins/bootstrap.js'
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
@@ -91,5 +93,10 @@ export default {
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
+    plugins: [
+      new webpack.ProvidePlugin({
+        $: "jquery"
+      })
+    ],
   }
 }

plugins/bootstrap.js

+if (process.browser) {
+	require("bootstrap")
+}
\ No newline at end of file