confidential component created and added to personRenderBox on resourceItem and participationItem as demo. bug: eye icon only appears when clicking on the vue devtools extension in firefox?

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Confidential.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="confidential" v-on:click="toggleBlur">
+        <div class="confidential-content blur">
+            <slot name="confidential-content"></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Confidential",
+    computed : {
+        getConfidentialInfo: function(){
+            var infos = document.getElementsByClassName("confidential");
+            return infos;
+        },
+        addToggles: function(){
+            var infos = this.getConfidentialInfo;
+            if(this.getConfidentialInfo !== null){
+                for(var i=0; i < infos.length; i++){
+                infos[i].insertAdjacentHTML('beforeend', '<i class="fa fa-eye toggle" v-on:click="toggleBlur" aria-hidden="true"></i>');
+                }
+            }
+        },
+    },
+    methods : {
+        toggleBlur: function(e){
+            if(e.target.matches('.toggle')){
+                e.target.previousElementSibling.classList.toggle("blur");
+                e.target.classList.toggle("fa-eye");
+                e.target.classList.toggle("fa-eye-slash");
+            }
+        },
+    }
+}
+</script>
+
+<style lang='scss'>
+    .confidential{
+        display: flex;
+        align-items: center;
+    }
+    .toggle{
+        margin-left: 10px;
+        cursor: pointer;
+    }
+    .blur {
+        -webkit-filter: blur(5px);
+        -moz-filter: blur(5px);
+        filter: blur(5px);
+    }
+</style>

src/Bundle/ChillMainBundle/Resources/views/layout.html.twig

@@ -20,6 +20,7 @@
         }
         .toggle{
             margin-left: 10px;
+            cursor: pointer;
         }
         .blur {
             -webkit-filter: blur(5px);

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/ParticipationItem.vue

@@ -9,6 +9,7 @@
                addAltNames: true,
                addAge : true,
                hLevel : 3,
+               isConfidential :  true,
             }"
       :person="participation.person"
       :returnPath="getAccompanyingCourseReturnPath">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue

@@ -2,7 +2,7 @@
    <person-render-box render="bloc"
       v-if="resource.resource.type === 'person'"
       :person="resource.resource"
-      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 3 }"
+      :options="{ addInfo : true, addId : false, addEntity: true, addLink: false, addAltNames: true, addAge : false, hLevel : 3, isConfidential : true }"
       >
       <template v-slot:record-actions>
          <ul class="record_actions">

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue

@@ -57,10 +57,18 @@
 
                     <li v-if="person.current_household_id">
                        <i class="fa fa-li fa-map-marker"></i>
-                       <address-render-box v-if="person.current_household_address"
+                       <confidential v-if="options.isConfidential">
-                         :address="person.current_household_address"
+                           <template v-slot:confidential-content>
-                         :isMultiline="isMultiline">
+                            <address-render-box
-                       </address-render-box>
+                                :address="person.current_household_address"
+                                :isMultiline="isMultiline">
+                            </address-render-box>
+                           </template>
+                       </confidential>
+                        <address-render-box v-else-if="person.current_household_address"
+                            :address="person.current_household_address"
+                            :isMultiline="isMultiline">
+                        </address-render-box>
                        <p v-else class="chill-no-data-statement">
                           {{ $t('renderbox.household_without_address') }}
                        </p>
@@ -138,11 +146,13 @@
 <script>
 import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
 import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
+import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
 
 export default {
     name: "PersonRenderBox",
     components: {
-        AddressRenderBox
+        AddressRenderBox,
+        Confidential
     },
     props: ['person', 'options', 'render', 'returnPath'],
     computed: {