Release v0.2.32.

Add missing value in locale selector.

Fix infinity loading when cookies are disabled.

Bump the version to release.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "toshokan",
-  "version": "0.2.31",
+  "version": "0.2.32",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -8,7 +8,7 @@
     enter-to-class="opacity-100"
   >
     <div
-      v-if="!authStarted"
+      v-if="!authStarted && !hasCriticalError"
       class="z-30 absolute w-full h-full flex justify-center items-center bg-opacity-90 bg-gray-100 dark:bg-gray-900"
     >
       <span aria-hidden="true">
@@ -61,6 +61,7 @@ export default {
     const { t, locale } = useI18n({ useScope: 'global' })
 
     const authStarted = computed(() => store.state.auth.started)
+    const hasCriticalError = computed(() => store.getters.hasCriticalError)
 
     const route = useRoute()
     const jumpToMain = ref(null)
@@ -96,6 +97,7 @@ export default {
 
     return {
       authStarted,
+      hasCriticalError,
       jumpToMain,
       navigationHelpText,
       t

src/components/LocaleSelector.vue

@@ -21,6 +21,7 @@
           <option
             v-for="loc in availableLocales"
             :key="loc"
+            :value="loc"
             :selected="loc === modelValue"
           >
             {{ t('app.localeName', null, { locale: loc }) }}

src/components/ReloadDialog.vue

@@ -57,7 +57,7 @@
               <button
                 type="button"
                 class="button is-primary sm:ml-3 w-full sm:w-auto justify-center sm:justify-start"
-                @click="updateServiceWorker()"
+                @click="updateServiceWorker(true)"
               >
                 {{ t('pwa.newContent.update') }}
               </button>

src/i18n/messages/en-US.js

@@ -32,6 +32,11 @@ export default {
     jumpToNavigation: 'Jump to main navigation',
     pageChanged: 'Navigated to {pageTitle}.'
   },
+  errors: {
+    cookiesDisabled: 'The cookies are disabled. Enable them and refresh the page.',
+    authStartedFailed: 'It was not possible to start the authentication system.',
+    refresh: 'Refresh the page'
+  },
   pwa: {
     newContent: {
       title: 'New content available',

src/i18n/messages/pt-BR.js

@@ -32,6 +32,11 @@ export default {
     jumpToNavigation: 'Pular para a navegação principal',
     pageChanged: 'Página alterada para {pageTitle}.'
   },
+  errors: {
+    cookiesDisabled: 'Os cookies estão desabilitados. Habilite-os e atualize a página.',
+    authStartedFailed: 'Não foi possivel inicializar o sistema de autenticação.',
+    refresh: 'Atualizar a página'
+  },
   pwa: {
     newContent: {
       title: 'Novos conteúdos disponíveis',

src/router/index.js

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import store from '../store'
+import store, { MutationTypes } from '../store'
 import i18n from '../i18n'
 
 import Home from '@/views/Home.vue'
@@ -168,10 +168,12 @@ router.beforeEach(async (to, _, next) => {
 
       try {
         isSignedIn = await store.dispatch('auth/initApp')
+        isSignedIn ? next() : next('/sign-in')
       } catch (e) {
         isSignedIn = false
-      } finally {
-        next(isSignedIn ? undefined : '/sign-in')
+        console.error(e)
+        store.commit(MutationTypes.UPDATE_CRITICAL_ERROR, e)
+        next('/error')
       }
 
       return
@@ -181,12 +183,14 @@ router.beforeEach(async (to, _, next) => {
     return
   }
 
-  if (!store.getters['auth/isStarted']) {
+  if (!store.getters['auth/isStarted'] && !store.getters.hasCriticalError) {
     try {
       const isSignedIn = await store.dispatch('auth/initApp')
-      next(isSignedIn && to.path === '/sign-in' ? '/dashboard' : undefined)
+      isSignedIn && to.path === '/sign-in' ? next('/dashboard') : next()
     } catch (e) {
-      next('/sign-in')
+      console.error(e)
+      store.commit(MutationTypes.UPDATE_CRITICAL_ERROR, e)
+      next('/error')
     }
 
     return

src/store/modules/auth.js

@@ -1,3 +1,7 @@
+import i18n from '@/i18n'
+
+const { t } = i18n.global
+
 export const AuthMutations = {
   UPDATE_SIGNED_IN: 'updateSignedIn',
   UPDATE_STARTED: 'updateStarted',
@@ -48,7 +52,17 @@ export default {
               commit(AuthMutations.UPDATE_SIGNED_IN, signedIn)
 
               resolve(signedIn)
-            }, () => reject(new Error('Não foi possível inicializar.')))
+            }, (error) => {
+              if (error.details === 'Cookies are not enabled in current environment.') {
+                reject(new Error(t('errors.cookiesDisabled'), {
+                  cause: { ...error, refresh: true }
+                }))
+              } else {
+                reject(new Error(t('errors.authStartedFailed'), {
+                  cause: { ...error, refresh: true }
+                }))
+              }
+            })
         })
       })
     },

src/views/Error.vue

@@ -12,6 +12,17 @@
           {{ criticalError?.message || '' }}
         </p>
       </header>
+      <div v-if="criticalError.cause?.refresh" class="text-center">
+        <button
+          class="button is-primary"
+          @click="refresh"
+        >
+          <span aria-hidden="true">
+            <RefreshIcon />
+          </span>
+          <span>{{ t('errors.refresh') }}</span>
+        </button>
+      </div>
       <div v-if="isDev" class="text-gray-600 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md py-4 px-6 w-full">
         <div class="w-full overflow-y-auto pb-2">
           <pre v-if="isDev"><code>{{ criticalError?.stack || '' }}</code></pre>
@@ -39,12 +50,14 @@ import { useI18n } from 'vue-i18n'
 import useAppInfo from '@/composables/useAppInfo'
 
 import { ExclamationCircleIcon } from '@heroicons/vue/outline'
+import { RefreshIcon } from '@heroicons/vue/solid'
 
 export default {
   name: 'Error',
 
   components: {
-    ExclamationCircleIcon
+    ExclamationCircleIcon,
+    RefreshIcon
   },
 
   setup () {
@@ -66,10 +79,15 @@ export default {
 
     const { t } = useI18n()
 
+    function refresh () {
+      window.location.reload()
+    }
+
     return {
       appVersion,
       criticalError,
       isDev,
+      refresh,
       t
     }
   }