Improve invalid pass code error message

les-conjures-du-temporel · Jan 5, 2024 · 658af47 · 658af47
1 parent 180192d
commit 658af47
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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"