Inject hidden reset app option in menu, click on SIN3D to show

src/App.vue

@@ -1,12 +1,7 @@
 <template>
   <v-app :dark="darkMode">
-    <!-- Application cache reset button -->
-    <div class="reset-button">
-      <ResetAppButton />
-    </div>
-    <!--/ Application cache reset button -->
-
     <div v-if="!loadingMessage && isGdprValidated && isHostConfigured">
+      <ResetAppMenu ref="resetApp" />
       <!-- Sidebar menu -->
       <v-navigation-drawer
         v-model="drawer"
@@ -33,14 +28,16 @@
             </v-list-tile-content>
           </v-list-tile>
 
-          <v-list-tile @click="loadScenesHard">
-            <v-list-tile-action>
-              <v-icon>refresh</v-icon>
-            </v-list-tile-action>
-            <v-list-tile-content>
-              <v-list-tile-title>Refresh list of scenes</v-list-tile-title>
-            </v-list-tile-content>
-          </v-list-tile>
+          <v-fade-transition>
+            <v-list-tile v-if="showResetAppInMenu" @click="$refs.resetApp.show(), drawer = false">
+              <v-list-tile-action>
+                <v-icon>refresh</v-icon>
+              </v-list-tile-action>
+              <v-list-tile-content>
+                <v-list-tile-title>Application reset menu</v-list-tile-title>
+              </v-list-tile-content>
+            </v-list-tile>
+          </v-fade-transition>
         </v-list>
       </v-navigation-drawer>
       <!--/ Sidebar menu -->
@@ -48,7 +45,7 @@
       <!-- Top bar -->
       <v-toolbar app fixed clipped-left>
         <v-toolbar-side-icon @click.stop="drawer = !drawer" />
-        <v-toolbar-title>SIN3D</v-toolbar-title>
+        <v-toolbar-title @click="showResetAppInMenu = !showResetAppInMenu">SIN3D</v-toolbar-title>
       </v-toolbar>
       <!--/ Top bar -->
     </div>
@@ -73,17 +70,18 @@
 
 <script>
 import './style.css'
-import ResetAppButton from '@/components/ResetAppButton.vue'
+import ResetAppMenu from '@/components/ResetAppMenu.vue'
 import { mapGetters, mapActions } from 'vuex'
 
 export default {
   components: {
-    ResetAppButton
+    ResetAppMenu
   },
   data() {
     return {
       darkMode: true,
       drawer: false,
+      showResetAppInMenu: false,
 
       loadingErrorMessage: null,
       loadingMessage: null
@@ -112,19 +110,10 @@ export default {
     // Main app function that redirect the user where he needs to be at
     async APP_LOADER() {
       if (this.isGdprValidated && this.isHostConfigured) {
-        if (!this.areScenesLoaded) await this.loadScenes()
+        if (!this.areScenesLoaded) await this.load(this.loadScenesList, 'Loading scenes list...')
       }
     },
 
-    loadScenes() {
-      return this.load(this.loadScenesList, 'Loading scenes list...')
-    },
-
-    async loadScenesHard() {
-      await this.loadScenes()
-      this.$router.go()
-    },
-
     async load(fn, loadingMessage) {
       try {
         this.loadingMessage = loadingMessage
@@ -143,12 +132,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.reset-button {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  z-index: 999;
-}
-</style>

src/components/ResetAppButton.vue

@@ -5,9 +5,9 @@
       width="800"
       :fullscreen="$vuetify.breakpoint.smAndDown"
     >
-      <template v-slot:activator="{ on }">
+      <!-- <template v-slot:activator="{ on }">
         <v-btn small dark v-on="on">Reset app</v-btn>
-      </template>
+      </template> -->
 
       <v-card>
         <v-card-title class="headline" primary-title>Reset app</v-card-title>
@@ -62,7 +62,7 @@ import { mapActions } from 'vuex'
 import ToastMessage from '@/components/ToastMessage.vue'
 
 export default {
-  name: 'ResetAppButton',
+  name: 'ResetAppMenu',
   components: {
     ToastMessage
   },
@@ -94,6 +94,11 @@ export default {
   },
   methods: {
     ...mapActions(['resetApp']),
+
+    show() {
+      this.showDialog = true
+    },
+
     toggle() {
       this.$nextTick(() => {
         if (this.selectAll) {

src/views/HostConfig.vue

@@ -1,6 +1,11 @@
 <template>
   <v-layout justify-center align-center>
     <v-flex xs12 sm5>
+      <v-btn @click="backToGDPR">
+        <v-icon left>arrow_back</v-icon>
+        Go back to GDPR notice
+      </v-btn>
+
       <v-card>
         <v-container fluid fill-height>
           <v-layout column align-center>
@@ -99,12 +104,16 @@ export default {
   mounted() {
     // if (process.env.NODE_ENV === 'development')
     //   this.hostConfig = 'http://localhost:5000'
-
     this.reset()
   },
 
   methods: {
-    ...mapActions(['setHostConfig', 'setUserExperimentId']),
+    ...mapActions(['setHostConfig', 'setUserExperimentId', 'resetApp']),
+    backToGDPR() {
+      this.resetApp({ gdprConsent: true })
+      this.$router.push('/')
+    },
+
     reset() {
       this.hostConfig = 'https://diran.univ-littoral.fr'
       this.id.user = null