Merge pull request #41 from baillysi/develop

README.md

@@ -1,18 +1,25 @@
-# simaps-client
+# simaps-client 🗺️
 
-This template should help get you started developing with Vue 3 in Vite.
+Vue3 client-side of [Kavalé](https://kavaleapp.com) web application, that aims to highlight hike trails in France. This is an alpha version, as proof of concept. Don't hesitate to join [discussions](https://github.com/baillysi/simaps-client/discussions) :v:
 
-## Recommended IDE Setup
+## Description
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+simaps-client provides a modern UI/UX with a leaflet map and a dashboard to perform CRUD operations on hikes data. 
 
-## Customize configuration
+<p align="center">
+<img src="https://github.com/user-attachments/assets/f3a7420c-b322-42d0-a384-aeec541092be" width="90%"/>
+</p>
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+## Development
 
-## Project Setup
+### Requirements
+
+Node.js >= 20.0.0
+
+### Configuration
 
 ```sh
+
 npm install
 ```
 
@@ -21,9 +28,9 @@ npm install
 ```sh
 npm run dev
 ```
+served on http://localhost:5173
 
-### Compile and Minify for Production
+## Production & deployment
 
-```sh
-npm run build
-```
+Continuous integration with Firebase Hosting by Google.
+Use of Firebase Auth to handle user authentification.

package.json

@@ -22,6 +22,7 @@
     "leaflet.locatecontrol": "^0.81.0",
     "primeicons": "^6.0.1",
     "vue": "^3.2.47",
+    "vue-cookie-accept-decline": "^6.1.0",
     "vue-leaflet-markercluster": "^0.6.1",
     "vue-router": "^4.1.6",
     "vuefire": "^3.1.24"

src/App.vue

@@ -1,5 +1,8 @@
 <script setup>
 
+import VueCookieAcceptDecline from 'vue-cookie-accept-decline';
+import 'vue-cookie-accept-decline/dist/vue-cookie-accept-decline.css';
+
 import { RouterView } from 'vue-router'
 import AppHeader from './components/AppHeader.vue'
 import AppFooter from './components/AppFooter.vue'
@@ -10,6 +13,33 @@ import AppFooter from './components/AppFooter.vue'
   <AppHeader />
   <RouterView />
   <AppFooter />
+
+  <vue-cookie-accept-decline
+    :debug="false"
+    :disableDecline="true"
+    :showPostponeButton="false"
+    elementId="cookconsent"
+    position="bottom-right"
+    ref="cookconsent"
+    transitionName="slideFromBottom"
+    type="floating">
+
+    <!-- Optional -->
+    <template #postponeContent>&times;</template>
+
+    <!-- Optional -->
+    <template #message>
+      Le bon fonctionnement de l'application peut nécessiter l'utilisation de cookies.
+      <a href="/about">En savoir plus.</a>
+    </template>
+
+    <!-- Optional -->
+    <template #declineContent>Je refuse!</template>
+
+    <!-- Optional -->
+    <template #acceptContent>J'accepte!</template>
+  </vue-cookie-accept-decline>
+
 </template>
 
 <style>

src/components/AppFooter.vue

@@ -22,7 +22,7 @@
       </div>
     </nav>
     <hr>
-    <span>&copy;2024 Simon BAILLY. Tous droits réservés.</span>
+    <span>&copy;2024 Simon BAILLY. Licence publique générale GNU v3.0.</span>
   </div>
 
 </template>

src/components/AppHeader.vue

@@ -26,7 +26,8 @@ onAuthStateChanged(auth, (user) => {
   } 
   else {
     isLoggedIn.value = false
-    console.log('Logged out!');
+    console.log('Logged out!')
+    showAuth()
   }
 });
 

src/components/AuthComponent.vue

@@ -107,12 +107,12 @@ async function signInAsGuest() {
         <br/>
 
         <div>
-          Continuer en tant qu'invité 
+          Continuer en tant qu'invité &#x1F609;
           <button class="btn btn-success btn-sm" style="margin-left: 5px;" type="button" @click="signInAsGuest()">
             <i class="pi pi-sign-in" style="color:white;"></i>
           </button>
           <br/>
-          <small id="guesthelp" class="form-text text-muted">Certaines fonctionnalités avancées ne seront pas disponibles.</small>
+          <!-- <small id="guesthelp" class="form-text text-muted">Certaines fonctionnalités avancées ne seront pas disponibles.</small> -->
         </div>
 
       </div>

src/views/AboutPage.vue

@@ -4,8 +4,50 @@
 
 <template>
 
-  <div class="container" style="text-align:center;">
-    <span>Retrouvez toutes les informations relatives au projet sur GitHub</span>
+  <div class="container" style="text-align:justify;">
+    <p>Kavalé est une application web ayant pour objectif de valoriser la cartographie des sentiers de randonnées en France.
+    </p>
+    <br/>
+    <h5>Édition</h5>
+    <ul>
+      <li>Simon BAILLY</li>
+      <li>177 Chemin Badamier 97410 Saint Pierre</li>
+      <li>simon.bailly5@gmail.com</li>
+    </ul>
+    <br/>
+    <h5>Hébergement</h5>
+    <ul>
+      <li>Firebase Hosting par Google</li>
+      <li>1600 Amphitheatre Parkway – Mountain View, CA 94043, USA</li>
+      <li><a href="https://firebase.google.com/support/troubleshooter/contact">Contact</a></li>
+    </ul>
+    <br/>
+    <h5>Droits d'auteur</h5>
+
+    <p>L'application Kavalé est distribuée sous une licence open-source <a href="https://www.gnu.org/licenses/gpl-3.0.html">GNU General Public License v3.0</a>. Le code source est en accès libre sur <a href="https://github.com/baillysi/">GitHub</a>.</p>
+
+    <br/>
+    <h5>Propriété intellectuelle</h5>
+    <p>Le nom de domaine, le logo, les images et les tracés gpx sont la propriété exclusive de l'éditeur.</p>
+    <br/>
+    <h5>Conditions d'utilisation et responsabilité</h5>
+    <p>L'éditeur ne pourra être tenu responsable de l'utilisation des informations proposées via l'application.
+      En particuliter l'éditeur ne pourra être tenu pour responsable d'un incident ou accident survenu lors d'une randonnée figurant parmi la liste des sorties proposées.
+    </p>
+    <br/>
+    <h5>Utilisation des données personnelles</h5>
+    <p>L'utilisateur n'est pas tenu de communiquer des données personnelles lors de l'utilisation de l'application. S'il le souhaite, il peut s'authentifier via les fournisseurs proposés (Google et GitHub)
+      pour accéder à des fonctionnalités avancées. L'application accède dès lors à son adresse email. L'éditeur s'engage à protéger cette donnée et à ne pas la céder à des tiers. L'éditeur s'engage à supprimer
+      cette donnée après un an d'inactivité.
+      <br/>
+      <br/>
+      L'hébergeur de l'application s'engage également sur la protection des données personnelles <a href="https://firebase.google.com/support/privacy?hl=fr">confidentialité et sécurité dans Firebase</a>.
+    </p>
+    <br/>
+    <h5>Préférences relatives aux cookies</h5>
+    <p>Un cookie est un traceur permettant d’analyser le comportement des internautes, comme leurs navigations, leurs habitudes de consommation, leurs déplacements, etc.
+      L'application Kavalé utilise des cookies pour permettre l'authentification de l'utilisateur si celui-ci le souhaite.
+    </p>
   </div>
 
 </template>