From 658af470a700dbaff99e7959cc3b65f0f57014c2 Mon Sep 17 00:00:00 2001
From: sitegui <sitegui@sitegui.com.br>
Date: Sat, 6 Jan 2024 00:03:07 +0100
Subject: [PATCH] Improve invalid pass code error message

---
 src/helpers.ts               |  4 ++--
 src/views/HomeView.vue       |  7 +------
 src/views/RecordPlayView.vue | 17 +++++++----------
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/helpers.ts b/src/helpers.ts
index 0112b02..dd5f775 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -83,11 +83,11 @@ export function buildGameFromBggGame(bggGame: BggGame, ownedByClub: boolean, nam
   }
 }
 
-export function notifyError(error: Error): void {
+export function notifyError(error: Error, message?: string): void {
   Notify.create({
     type: 'negative',
     position: 'top',
-    message: 'Erreur de chargement, essaie de rafraîchir la page'
+    message: message ?? 'Erreur de chargement, essaie de rafraîchir la page'
   })
 
   console.error(error)
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 978456f..be143b1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { ref, inject, type Ref, computed } from 'vue'
+import { inject, type Ref, computed } from 'vue'
 import { Database, type Game } from '@/database'
 import GameItem from '@/components/GameItem.vue'
 
 const MAX_GAMES = 50
 const games: Ref<Game[]> = inject<Database>('db')!.games
-const loadError = ref(null)
 
 const recentGames = computed(() => {
   const playedGames = games.value.filter((game) => game.lastPlayed)
@@ -55,10 +54,6 @@ const recentGames = computed(() => {
       <q-spinner color="primary" size="5em" />
     </div>
 
-    <q-banner class="text-white bg-accent" v-if="loadError">
-      Erreur de chargement: {{ loadError }}
-    </q-banner>
-
     <template v-for="(game, index) in recentGames" :key="game.bgg.id">
       <q-separator v-if="index > 0" color="secondary" />
       <game-item :game="game" />
diff --git a/src/views/RecordPlayView.vue b/src/views/RecordPlayView.vue
index b975930..b8151bc 100644
--- a/src/views/RecordPlayView.vue
+++ b/src/views/RecordPlayView.vue
@@ -4,11 +4,9 @@ import { computed, inject, type Ref, ref } from 'vue'
 import type { CloudFunctions } from '@/cloud_functions'
 import { Database, type Game, type PlayLocation } from '@/database'
 import GameItem from '@/components/GameItem.vue'
-import { useQuasar } from 'quasar'
 import { useRouter } from 'vue-router'
-import { notifySuccess } from '@/helpers'
+import { notifyError, notifySuccess } from '@/helpers'
 
-const quasar = useQuasar()
 const router = useRouter()
 
 const MAX_PAST_DAYS = 30
@@ -75,15 +73,17 @@ const passCode: Ref<string | null> = inject('passCode')!
 const isChangingPassCode: Ref<boolean> = ref(!passCode.value)
 
 const saving: Ref<boolean> = ref(false)
-const saveError: Ref<string | null> = ref(null)
 
 function save() {
   saving.value = true
-  saveError.value = ''
 
   doSave()
     .catch((error) => {
-      saveError.value = String(error)
+      if ('code' in error && error.code === 'functions/unauthenticated') {
+        notifyError(error, "Clé d'accès invalide")
+      } else {
+        notifyError(error)
+      }
     })
     .finally(() => {
       saving.value = false
@@ -181,7 +181,7 @@ async function doSave() {
       />
     </div>
     <div v-if="isChangingPassCode">
-      <q-input v-model="passCode" label="Saisis la clé de 6 caractères" outlined />
+      <q-input v-model="passCode" label="Saisis la clé de 8 caractères" outlined mask="XXXX XXXX" />
     </div>
     <div v-else>
       <code>{{ passCode }}</code>
@@ -191,9 +191,6 @@ async function doSave() {
       membres peuvent enregistrer ses parties
     </div>
 
-    <q-banner class="text-white bg-accent" v-if="saveError">
-      Erreur dans la requête : {{ saveError }}
-    </q-banner>
     <q-btn
       label="Enregistrer"
       @click="save"