From 0cf043e177477c7741012e6b34ac504e6a0b378c Mon Sep 17 00:00:00 2001
From: Alexandros SIDIRAS <alexandros.sidiras@laposte.net>
Date: Wed, 12 Jun 2024 10:37:17 +0200
Subject: [PATCH 1/2] removed client-only and upgrade buefy

---
 components/auth/signinModal.vue  |  50 ++---
 components/auth/signupModal.vue  | 364 +++++++++++++++----------------
 components/navigation/navbar.vue |  38 ++--
 layouts/pictalk.vue              |  12 +-
 layouts/public.vue               |  10 +-
 package-lock.json                | 108 +++------
 package.json                     |   2 +-
 pages/index.vue                  |  12 +-
 8 files changed, 261 insertions(+), 335 deletions(-)

diff --git a/components/auth/signinModal.vue b/components/auth/signinModal.vue
index dd394534..d42984cc 100644
--- a/components/auth/signinModal.vue
+++ b/components/auth/signinModal.vue
@@ -1,31 +1,29 @@
 <template>
-  <client-only>
-    <form action @keyup.enter="onSubmit()">
-      <div class="modal-card" style="min-height: 30vh">
-        <header class="modal-card-head">
-          <b-button class="button" type="is-danger" icon-left="close" @click="$parent.close()" />
-          <p align="center" class="modal-card-title">{{ $t("LogIn") }}</p>
-        </header>
-        <section class="modal-card-body">
-          <b-field :label="$t('Email')">
-            <b-input data-cy="signin-email" type="email" lazy maxlength="64" v-model="username"
-              :placeholder="$t('PlaceHolderEmail')" required></b-input>
-          </b-field>
+  <form action @keyup.enter="onSubmit()">
+    <div class="modal-card" style="min-height: 30vh">
+      <header class="modal-card-head">
+        <b-button class="button" type="is-danger" icon-left="close" @click="$parent.close()" />
+        <p align="center" class="modal-card-title">{{ $t("LogIn") }}</p>
+      </header>
+      <section class="modal-card-body">
+        <b-field :label="$t('Email')">
+          <b-input data-cy="signin-email" type="email" lazy maxlength="64" v-model="username"
+            :placeholder="$t('PlaceHolderEmail')" required></b-input>
+        </b-field>
 
-          <b-field :label="$t('Password')">
-            <b-input data-cy="signin-password" type="password" lazy v-model="password" password-reveal
-              :placeholder="$t('PlaceHolderPassword')" required></b-input>
-          </b-field>
-          <a href="/changePassword">{{ $t("ForgotPswd") }}</a>
-        </section>
-        <footer class="modal-card-foot">
-          <b-button data-cy="signin-signin" class="is-primary" :loading="loading" @click="onSubmit">{{
-            $t("LogIn")
-            }}</b-button>
-        </footer>
-      </div>
-    </form>
-  </client-only>
+        <b-field :label="$t('Password')">
+          <b-input data-cy="signin-password" type="password" lazy v-model="password" password-reveal
+            :placeholder="$t('PlaceHolderPassword')" required></b-input>
+        </b-field>
+        <a href="/changePassword">{{ $t("ForgotPswd") }}</a>
+      </section>
+      <footer class="modal-card-foot">
+        <b-button data-cy="signin-signin" class="is-primary" :loading="loading" @click="onSubmit">{{
+          $t("LogIn")
+        }}</b-button>
+      </footer>
+    </div>
+  </form>
 </template>
 <script>
 import signup from "@/components/auth/signupModal";
diff --git a/components/auth/signupModal.vue b/components/auth/signupModal.vue
index e7bbca48..9dd54b04 100644
--- a/components/auth/signupModal.vue
+++ b/components/auth/signupModal.vue
@@ -1,204 +1,198 @@
 <template>
-  <client-only>
-    <form action>
-      <div class="modal-card">
-        <header class="modal-card-head">
-          <b-button class="button" type="is-danger" icon-left="close" @click="$parent.close()" />
-          <p align="center" class="modal-card-title">{{ $t("SignUp") }}</p>
-        </header>
-        <section class="modal-card-body">
-          <div class="container">
-            <b-steps v-model="activeStep" rounded animated :has-navigation="false" mobile-mode="compact"
-              label-position="bottom">
-              <b-step-item clickable :label="$t('Account')" icon="account-key">
-                <div class="contenant">
-                  <b-image class="center" lazy :srcset="require('@/assets/credentials.png').srcSet"
-                    alt="drawing of a key openning a locked chest" style="width: 40%; aspect-ratio: 1/1"></b-image>
-                </div>
-                <b-field :label="$t('Email')">
-                  <b-input ref="email" type="email" maxlength="64" v-model="username"
-                    :placeholder="$t('PlaceHolderEmail')" required
-                    pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
-                    :validation-message="$t('ValidationMessageEmail')"></b-input>
-                </b-field>
-                <b-field :label="$t('Password')">
-                  <b-input ref="password" type="password" v-model="password" password-reveal
-                    :placeholder="$t('PlaceHolderPassword')" required minlength="8"
-                    pattern="((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"
-                    :validation-message="$t('ValidationMessagePassword')"></b-input>
-                </b-field>
-                <b-field :label="$t('ConfirmPassword')">
-                  <b-input type="password" password-reveal :placeholder="$t('PlaceHolderPassword')" required
-                    minlength="8" :pattern="password.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')"
-                    v-model="passwordConfirmation"
-                    :validation-message="$t('ValidationMessagePasswordConfirmation')"></b-input>
-                </b-field>
-                <div v-if="directSharerUrlEncoded" class="box">
-                  <h2 class="subtitle" align="center">{{ $t("SignupSupervisor") }}</h2>
-                  {{ $t('SignupSupervisorText') }}
-                  <div v-if="isArraydirectSharerUrlEncoded">
-                    <div v-for="directsharer in directSharerUrlEncoded">
-                      <b>{{ directsharer }}</b>
-                    </div>
+  <form action>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <b-button class="button" type="is-danger" icon-left="close" @click="$parent.close()" />
+        <p align="center" class="modal-card-title">{{ $t("SignUp") }}</p>
+      </header>
+      <section class="modal-card-body">
+        <div class="container">
+          <b-steps v-model="activeStep" rounded animated :has-navigation="false" mobile-mode="compact"
+            label-position="bottom">
+            <b-step-item clickable :label="$t('Account')" icon="account-key">
+              <div class="contenant">
+                <b-image class="center" lazy :srcset="require('@/assets/credentials.png').srcSet"
+                  alt="drawing of a key openning a locked chest" style="width: 40%; aspect-ratio: 1/1"></b-image>
+              </div>
+              <b-field :label="$t('Email')">
+                <b-input ref="email" type="email" maxlength="64" v-model="username"
+                  :placeholder="$t('PlaceHolderEmail')" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
+                  :validation-message="$t('ValidationMessageEmail')"></b-input>
+              </b-field>
+              <b-field :label="$t('Password')">
+                <b-input ref="password" type="password" v-model="password" password-reveal
+                  :placeholder="$t('PlaceHolderPassword')" required minlength="8"
+                  pattern="((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"
+                  :validation-message="$t('ValidationMessagePassword')"></b-input>
+              </b-field>
+              <b-field :label="$t('ConfirmPassword')">
+                <b-input type="password" password-reveal :placeholder="$t('PlaceHolderPassword')" required minlength="8"
+                  :pattern="password.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')" v-model="passwordConfirmation"
+                  :validation-message="$t('ValidationMessagePasswordConfirmation')"></b-input>
+              </b-field>
+              <div v-if="directSharerUrlEncoded" class="box">
+                <h2 class="subtitle" align="center">{{ $t("SignupSupervisor") }}</h2>
+                {{ $t('SignupSupervisorText') }}
+                <div v-if="isArraydirectSharerUrlEncoded">
+                  <div v-for="directsharer in directSharerUrlEncoded">
+                    <b>{{ directsharer }}</b>
                   </div>
-                  <div v-else><b>{{ directSharerUrlEncoded }}</b></div>
-                  <b-button class="is-danger" icon-left="delete" @click="removeDirectSharer()">{{
-                    $t('SignupSupervisorRemove') }}</b-button>
-                </div>
-              </b-step-item>
-              <b-step-item clickable :label="$t('Language')" icon="translate">
-                <div class="contenant">
-                  <b-image class="center" lazy :srcset="require('@/assets/signup_languages.png').srcSet"
-                    alt="A boy and a girl speaking different languages" style="width: 40%; aspect-ratio: 1/1"></b-image>
                 </div>
-                <b-field class="column" :label="$t('PrincipalVoice')">
-                  <b-select v-if="loadedVoices && loadedVoices.length > 1" v-model="voiceURI"
-                    :placeholder="$t('SelectVoice')" required expanded :loading="loadingVoices" size="is-small">
-                    <option v-for="voice in loadedVoices" :value="voice.voiceURI"
-                      :key="voice.voiceURI + voice.name + Math.random()">
-                      {{ getEmoji(voice.lang) }} {{ voice.name }}
-                    </option>
-                  </b-select>
-                  <div v-else>
-                    <div class="notification">
-                      <installVoice></installVoice>
-                    </div>
-                  </div>
-                </b-field>
-                <b-button @click="showLanguages = !showLanguages" type="is-ghost">{{
-                  $t('SpeakMoreLanguage') }}</b-button>
-                <b-field v-if="showLanguages" class="column" :label="$t('Voices')">
-                  <b-select v-model="voiceURIs" :placeholder="$t('SelectVoice')" required multiple expanded
-                    native-size="6" size="is-small" :loading="loadingVoices">
-                    <option v-for="voice in loadedVoices" :value="voice.voiceURI"
-                      :key="voice.voiceURI + voice.name + Math.random()">
-                      {{ getEmoji(voice.lang) }} {{ voice.name }}
-                    </option>
-                  </b-select>
-                </b-field>
-              </b-step-item>
-              <b-step-item clickable :label="$t('StarterPack')" icon="web">
-                <div class="contenant columns is-mobile"
-                  style="width: 100%; aspect-ratio: 3/1; margin-left: 0%; margin-right: 0%">
-                  <div v-for="bundle in publicBundles" class="column is-4" style="padding: 2px">
-                    <div @click="selectPublicBundle(bundle.id)">
-                      <b-image class="has-background"
-                        :style="bundle.id == selectedBundle ? 'opacity:100%;' : 'opacity:60%; filter: grayscale(60%);'"
-                        :src="bundle.image"></b-image>
-                    </div>
+                <div v-else><b>{{ directSharerUrlEncoded }}</b></div>
+                <b-button class="is-danger" icon-left="delete" @click="removeDirectSharer()">{{
+                  $t('SignupSupervisorRemove') }}</b-button>
+              </div>
+            </b-step-item>
+            <b-step-item clickable :label="$t('Language')" icon="translate">
+              <div class="contenant">
+                <b-image class="center" lazy :srcset="require('@/assets/signup_languages.png').srcSet"
+                  alt="A boy and a girl speaking different languages" style="width: 40%; aspect-ratio: 1/1"></b-image>
+              </div>
+              <b-field class="column" :label="$t('PrincipalVoice')">
+                <b-select v-if="loadedVoices && loadedVoices.length > 1" v-model="voiceURI"
+                  :placeholder="$t('SelectVoice')" required expanded :loading="loadingVoices" size="is-small">
+                  <option v-for="voice in loadedVoices" :value="voice.voiceURI"
+                    :key="voice.voiceURI + voice.name + Math.random()">
+                    {{ getEmoji(voice.lang) }} {{ voice.name }}
+                  </option>
+                </b-select>
+                <div v-else>
+                  <div class="notification">
+                    <installVoice></installVoice>
                   </div>
                 </div>
-                <div v-if="!selectedBundle" class="notification">
-                  {{ $t('PublicBundleDescription') }}
-                </div>
-                <div class="notification" v-else>
-                  <div v-if="getBundleLevelById(selectedBundle) == 'levelA'">
-                    {{ $t('PublicBundleLevelADescription') }}
-                  </div>
-                  <div v-if="getBundleLevelById(selectedBundle) == 'levelB'">
-                    {{ $t('PublicBundleLevelBDescription') }}
-                  </div>
-                  <div v-if="getBundleLevelById(selectedBundle) == 'levelC'">
-                    {{ $t('PublicBundleLevelCDescription') }}
+              </b-field>
+              <b-button @click="showLanguages = !showLanguages" type="is-ghost">{{
+                $t('SpeakMoreLanguage') }}</b-button>
+              <b-field v-if="showLanguages" class="column" :label="$t('Voices')">
+                <b-select v-model="voiceURIs" :placeholder="$t('SelectVoice')" required multiple expanded
+                  native-size="6" size="is-small" :loading="loadingVoices">
+                  <option v-for="voice in loadedVoices" :value="voice.voiceURI"
+                    :key="voice.voiceURI + voice.name + Math.random()">
+                    {{ getEmoji(voice.lang) }} {{ voice.name }}
+                  </option>
+                </b-select>
+              </b-field>
+            </b-step-item>
+            <b-step-item clickable :label="$t('StarterPack')" icon="web">
+              <div class="contenant columns is-mobile"
+                style="width: 100%; aspect-ratio: 3/1; margin-left: 0%; margin-right: 0%">
+                <div v-for="bundle in publicBundles" class="column is-4" style="padding: 2px">
+                  <div @click="selectPublicBundle(bundle.id)">
+                    <b-image class="has-background"
+                      :style="bundle.id == selectedBundle ? 'opacity:100%;' : 'opacity:60%; filter: grayscale(60%);'"
+                      :src="bundle.image"></b-image>
                   </div>
                 </div>
-              </b-step-item>
-              <b-step-item clickable :label="$t('TermsAndConditions')" icon="chart-box">
-                <div class="contenant">
-                  <b-image class="center" lazy :srcset="require('@/assets/terms_conditions.png').srcSet"
-                    alt="A paper and a pencil representing the terms and conditions"
-                    style="width: 40%; aspect-ratio: 1/1"></b-image>
-                </div>
-                <support></support>
-                <b-notification :closable="false">
-                  <p class="is-size-6">{{ $t('UseOfData1') }}</p>
-                  <p class="is-size-6">{{ $t('UseOfData2') }}</p>
-                  <p class="is-size-6">{{ $t('UseOfData3') }}</p>
-                  <p class="is-size-6">{{ $t('UseOfData4') }}</p>
-                </b-notification>
-                <div style="display: flex; flex-dirrection : column; margin-bottom: 1em;">
-                  <b-checkbox-button v-model="majority" :native-value="true" type="is-success">
-                    <b-icon v-if="majority" icon="check"
-                      style="margin-left: auto; margin-right: auto; border: solid; border-width: 1px; border-color: #4c43293f"></b-icon>
-                  </b-checkbox-button>
-                  <p>
-                    {{ $t("Majority") }}
-                  </p>
+              </div>
+              <div v-if="!selectedBundle" class="notification">
+                {{ $t('PublicBundleDescription') }}
+              </div>
+              <div class="notification" v-else>
+                <div v-if="getBundleLevelById(selectedBundle) == 'levelA'">
+                  {{ $t('PublicBundleLevelADescription') }}
                 </div>
-                <div style="display: flex; flex-dirrection : column">
-                  <b-checkbox-button v-model="terms" :native-value="true" type="is-success">
-                    <b-icon v-if="terms" icon="check"
-                      style="margin-left: auto; margin-right: auto; border: solid; border-width: 1px; border-color: #4c43293f"></b-icon>
-                  </b-checkbox-button>
-                  <p>
-                    {{ $t("IHaveRead") }}
-                    <nuxt-link to="/legal-infos/terms-of-use/">{{
-                      $t("TermsOfUse")
-                    }} </nuxt-link>
-                    {{ $t("And") }}
-                    <nuxt-link to="/legal-infos/privacy-policy/">{{
-                      $t("PrivacyPolicy")
-                    }}</nuxt-link>.
-                  </p>
+                <div v-if="getBundleLevelById(selectedBundle) == 'levelB'">
+                  {{ $t('PublicBundleLevelBDescription') }}
                 </div>
-              </b-step-item>
-              <b-step-item :clickable="!notSignedUp" :label="$t('VerifyAccount')" icon="chart-box">
-                <div class="contenant">
-                  <b-image class="center" lazy :srcset="require('@/static/20_Pictalk_Mail.gif')"
-                    alt="A letter with a message from Pictalk inside of it"
-                    style="width: 55%; aspect-ratio: 1/1"></b-image>
+                <div v-if="getBundleLevelById(selectedBundle) == 'levelC'">
+                  {{ $t('PublicBundleLevelCDescription') }}
                 </div>
-                <b-field>
-                  <b-input :placeholder="$t('VerifyAccountVerificationCode')" v-model="verificationToken" expanded
-                    size="is-medium" required :loading="verificationLoading" maxlength="40" icon-right="key"></b-input>
-                </b-field>
-                <p class="is-size-5 notification" align="justify">
-                  {{ $t('VerifyAccountText') }}
+              </div>
+            </b-step-item>
+            <b-step-item clickable :label="$t('TermsAndConditions')" icon="chart-box">
+              <div class="contenant">
+                <b-image class="center" lazy :srcset="require('@/assets/terms_conditions.png').srcSet"
+                  alt="A paper and a pencil representing the terms and conditions"
+                  style="width: 40%; aspect-ratio: 1/1"></b-image>
+              </div>
+              <support></support>
+              <b-notification :closable="false">
+                <p class="is-size-6">{{ $t('UseOfData1') }}</p>
+                <p class="is-size-6">{{ $t('UseOfData2') }}</p>
+                <p class="is-size-6">{{ $t('UseOfData3') }}</p>
+                <p class="is-size-6">{{ $t('UseOfData4') }}</p>
+              </b-notification>
+              <div style="display: flex; flex-dirrection : column; margin-bottom: 1em;">
+                <b-checkbox-button v-model="majority" :native-value="true" type="is-success">
+                  <b-icon v-if="majority" icon="check"
+                    style="margin-left: auto; margin-right: auto; border: solid; border-width: 1px; border-color: #4c43293f"></b-icon>
+                </b-checkbox-button>
+                <p>
+                  {{ $t("Majority") }}
                 </p>
-
-                <b-button type="is-text" :loading="mailLoading" @click="sendAnotherMail()">{{ $t("VerificationMoreMail")
-                  }}</b-button>
-              </b-step-item>
-            </b-steps>
-          </div>
-
-          <br />
-
-        </section>
-        <footer class="modal-card-foot">
-          <div class="container">
-            <div class="columns is-mobile is-full">
-              <div class="column is-one-quarter">
-                <b-button @click="previousStep()" :disabled="activeStep == 0" class="button center"
-                  icon-right="chevron-left" />
               </div>
-              <div class="column is-half">
-                <b-button v-if="notSignedUp" id="signupmodal-signup" class="is-primary fullWidth"
-                  :loading="signupLoading"
-                  :disabled="!(username && password && majority && terms && passwordConfirmation && notSignedUp)"
-                  @click="
-                    onSubmit(
-                      username,
-                      password,
-                      majority,
-                      terms,
-                      passwordConfirmation
-                    )
-                    ">{{ $t("SignUp") }}</b-button><b-button v-else id="signupmodal-verify"
-                  class="is-success fullWidth" :disabled="(notSignedUp) || (verificationToken.length != 40)" @click="
-                    onVerify()
-                    ">{{ $t("VerifyAccountOK") }}</b-button>
+              <div style="display: flex; flex-dirrection : column">
+                <b-checkbox-button v-model="terms" :native-value="true" type="is-success">
+                  <b-icon v-if="terms" icon="check"
+                    style="margin-left: auto; margin-right: auto; border: solid; border-width: 1px; border-color: #4c43293f"></b-icon>
+                </b-checkbox-button>
+                <p>
+                  {{ $t("IHaveRead") }}
+                  <nuxt-link to="/legal-infos/terms-of-use/">{{
+                    $t("TermsOfUse")
+                  }} </nuxt-link>
+                  {{ $t("And") }}
+                  <nuxt-link to="/legal-infos/privacy-policy/">{{
+                    $t("PrivacyPolicy")
+                  }}</nuxt-link>.
+                </p>
               </div>
-              <div class="column is-one-quarter">
-                <b-button :class="isFormValid ? 'center glow' : 'center'"
-                  :disabled="activeStep == maxStep || !isFormValid" @click="nextStep()" icon-right="chevron-right" />
+            </b-step-item>
+            <b-step-item :clickable="!notSignedUp" :label="$t('VerifyAccount')" icon="chart-box">
+              <div class="contenant">
+                <b-image class="center" lazy :srcset="require('@/static/20_Pictalk_Mail.gif')"
+                  alt="A letter with a message from Pictalk inside of it"
+                  style="width: 55%; aspect-ratio: 1/1"></b-image>
               </div>
+              <b-field>
+                <b-input :placeholder="$t('VerifyAccountVerificationCode')" v-model="verificationToken" expanded
+                  size="is-medium" required :loading="verificationLoading" maxlength="40" icon-right="key"></b-input>
+              </b-field>
+              <p class="is-size-5 notification" align="justify">
+                {{ $t('VerifyAccountText') }}
+              </p>
+
+              <b-button type="is-text" :loading="mailLoading" @click="sendAnotherMail()">{{ $t("VerificationMoreMail")
+                }}</b-button>
+            </b-step-item>
+          </b-steps>
+        </div>
+
+        <br />
+
+      </section>
+      <footer class="modal-card-foot">
+        <div class="container">
+          <div class="columns is-mobile is-full">
+            <div class="column is-one-quarter">
+              <b-button @click="previousStep()" :disabled="activeStep == 0" class="button center"
+                icon-right="chevron-left" />
+            </div>
+            <div class="column is-half">
+              <b-button v-if="notSignedUp" id="signupmodal-signup" class="is-primary fullWidth" :loading="signupLoading"
+                :disabled="!(username && password && majority && terms && passwordConfirmation && notSignedUp)" @click="
+                  onSubmit(
+                    username,
+                    password,
+                    majority,
+                    terms,
+                    passwordConfirmation
+                  )
+                  ">{{ $t("SignUp") }}</b-button><b-button v-else id="signupmodal-verify"
+                class="is-success fullWidth" :disabled="(notSignedUp) || (verificationToken.length != 40)" @click="
+                  onVerify()
+                  ">{{ $t("VerifyAccountOK") }}</b-button>
+            </div>
+            <div class="column is-one-quarter">
+              <b-button :class="isFormValid ? 'center glow' : 'center'"
+                :disabled="activeStep == maxStep || !isFormValid" @click="nextStep()" icon-right="chevron-right" />
             </div>
           </div>
-        </footer>
-      </div>
-    </form>
-  </client-only>
+        </div>
+      </footer>
+    </div>
+  </form>
 </template>
 
 <script>
diff --git a/components/navigation/navbar.vue b/components/navigation/navbar.vue
index ba21ff0c..093b543f 100644
--- a/components/navigation/navbar.vue
+++ b/components/navigation/navbar.vue
@@ -18,27 +18,25 @@
             class="bolder">{{ $t("Tutorial") }}</b> 🚀</b-navbar-item>
       </template>
       <template slot="end">
-        <client-only>
-          <b-navbar-dropdown tag="div" collapsible :label="getEmoji(localeIso())">
-            <b-navbar-item href="#" v-for="locale in availableLocales" :key="locale.code"
-              @click.prevent.stop="$i18n.setLocale(locale.code)">{{ getEmoji(locale.iso) }}</b-navbar-item>
-          </b-navbar-dropdown>
-          <b-navbar-item tag="div">
-            <div class="buttons bottomOffset">
-              <b-button data-cy="navbar-signin-button" class="bolder customButton" v-if="!isLogged"
-                @click="openSignInModal()" type="is-primary">{{ $t("LogIn") }}</b-button>
-              <b-button v-else class="bolder customButton" tag="nuxt-link" :to="pictalkHome" type="is-primary"
-                icon-right="home"></b-button>
+        <b-navbar-dropdown tag="div" collapsible :label="getEmoji(localeIso())">
+          <b-navbar-item href="#" v-for="locale in availableLocales" :key="locale.code"
+            @click.prevent.stop="$i18n.setLocale(locale.code)">{{ getEmoji(locale.iso) }}</b-navbar-item>
+        </b-navbar-dropdown>
+        <b-navbar-item tag="div">
+          <div class="buttons bottomOffset">
+            <b-button data-cy="navbar-signin-button" class="bolder customButton" v-if="!isLogged"
+              @click="openSignInModal()" type="is-primary">{{ $t("LogIn") }}</b-button>
+            <b-button v-else class="bolder customButton" tag="nuxt-link" :to="pictalkHome" type="is-primary"
+              icon-right="home"></b-button>
 
-              <b-button class="bolder customButton" v-if="!isLogged" @click="openSignUpModal()" type="is-success"
-                outlined>{{ $t("SignUp") }}</b-button>
-              <b-button v-else class="bolder customButton" type="is-light" icon-right="logout" @click="onLogout" />
-              <b-button class="bolder customButton" outlined v-if="!isLogged" tag="nuxt-link"
-                to="/public?fatherCollectionId=346" type="is-primary" icon-right="arrow-right-box">{{
-                  $t("TryPictalk") }}</b-button>
-            </div>
-          </b-navbar-item>
-        </client-only>
+            <b-button class="bolder customButton" v-if="!isLogged" @click="openSignUpModal()" type="is-success"
+              outlined>{{ $t("SignUp") }}</b-button>
+            <b-button v-else class="bolder customButton" type="is-light" icon-right="logout" @click="onLogout" />
+            <b-button class="bolder customButton" outlined v-if="!isLogged" tag="nuxt-link"
+              to="/public?fatherCollectionId=346" type="is-primary" icon-right="arrow-right-box">{{
+                $t("TryPictalk") }}</b-button>
+          </div>
+        </b-navbar-item>
       </template>
     </b-navbar>
   </div>
diff --git a/layouts/pictalk.vue b/layouts/pictalk.vue
index 79becf7f..3b88e5f6 100644
--- a/layouts/pictalk.vue
+++ b/layouts/pictalk.vue
@@ -1,13 +1,11 @@
 <template>
   <div>
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
-    <client-only>
-      <div class="wrapper">
-        <pictalkNavbar />
-        <hr class="margins" />
-        <nuxt />
-      </div>
-    </client-only>
+    <div class="wrapper">
+      <pictalkNavbar />
+      <hr class="margins" />
+      <nuxt />
+    </div>
   </div>
 </template>
 
diff --git a/layouts/public.vue b/layouts/public.vue
index 4d5ceed1..b2cfd849 100644
--- a/layouts/public.vue
+++ b/layouts/public.vue
@@ -1,11 +1,9 @@
 <template>
   <div class="wrapper">
-    <client-only>
-      <navbar />
-      <hr style="margin: 20px" />
-      <nuxt />
-      <br />
-    </client-only>
+    <navbar />
+    <hr style="margin: 20px" />
+    <nuxt />
+    <br />
   </div>
 </template>
 <script>
diff --git a/package-lock.json b/package-lock.json
index ee626cc3..c7c187b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,14 @@
 {
   "name": "Pictalk AAC",
-  "version": "2.9.1",
+  "version": "2.9.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "Pictalk AAC",
-      "version": "2.9.1",
+      "version": "2.9.2.1",
       "dependencies": {
         "vue-matomo": "^4.2.0",
-        "vue-virtual-scroller": "^1.1.2",
         "vuex-persistedstate": "^4.1.0"
       },
       "devDependencies": {
@@ -34,7 +33,7 @@
         "merge-images-horizontally-with-text": "^1.0.2",
         "node-sass": "^6.0.1",
         "nuxt": "^2.15.8",
-        "nuxt-buefy": "^0.4.22",
+        "nuxt-buefy": "^0.4.29",
         "nuxt-clipboard2": "^0.2.1",
         "nuxt-compress": "^5.0.0",
         "nuxt-responsive-loader": "^2.0.1",
@@ -7067,12 +7066,12 @@
       }
     },
     "node_modules/buefy": {
-      "version": "0.9.20",
-      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.20.tgz",
-      "integrity": "sha512-lEJTLZEuN7dI6XUGq6N5oL691ncHV8Zu9WtyBsQTOlcBjCJkSUXKicorPukS0wQi0z3w+pOl/e/FTCVswJj3Ng==",
+      "version": "0.9.29",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.29.tgz",
+      "integrity": "sha512-iJutB/ezTQcxqcKvKz129DzomMjNRGdy23lJBtoFQBG//2NveTcPkN/VRUF70z2WH3JB/5nmVeoxr8QOPcs42w==",
       "dev": true,
       "dependencies": {
-        "bulma": "0.9.3"
+        "bulma": "0.9.4"
       },
       "engines": {
         "node": ">= 4.0.0",
@@ -7136,9 +7135,9 @@
       "dev": true
     },
     "node_modules/bulma": {
-      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.3.tgz",
-      "integrity": "sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==",
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
       "dev": true
     },
     "node_modules/bytes": {
@@ -16089,12 +16088,12 @@
       }
     },
     "node_modules/nuxt-buefy": {
-      "version": "0.4.22",
-      "resolved": "https://registry.npmjs.org/nuxt-buefy/-/nuxt-buefy-0.4.22.tgz",
-      "integrity": "sha512-wqu7DkZo9c4yj+kLeBGYGEAqaLrnaDoYssGGha5s8Xp6CTtunLPq0Kdj26yu4k0rtI4M7qZaEuRgw9CMLHLhVw==",
+      "version": "0.4.29",
+      "resolved": "https://registry.npmjs.org/nuxt-buefy/-/nuxt-buefy-0.4.29.tgz",
+      "integrity": "sha512-t15wZ1g7uX2TQogJp3u82hXQYJ/rGw6capfvvtzAXzWqwpH+g42j3z1KVKE9wD3Vy6et670Zb7p/fXOIDAbEKg==",
       "dev": true,
       "dependencies": {
-        "buefy": "^0.9.20"
+        "buefy": "^0.9.29"
       },
       "engines": {
         "node": ">=8.0.0"
@@ -19555,11 +19554,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/scrollparent": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
-      "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA=="
-    },
     "node_modules/scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -22198,19 +22192,6 @@
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==",
       "dev": true
     },
-    "node_modules/vue-observe-visibility": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
-      "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
-    },
-    "node_modules/vue-resize": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
-      "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==",
-      "peerDependencies": {
-        "vue": "^2.3.0"
-      }
-    },
     "node_modules/vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
@@ -22289,19 +22270,6 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
-    "node_modules/vue-virtual-scroller": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-1.1.2.tgz",
-      "integrity": "sha512-SkUyc7QHCJFB5h1Fya7LxVizlVzOZZuFVipBGHYoTK8dwLs08bIz/tclvRApYhksaJIm/nn51inzO2UjpGJPMQ==",
-      "dependencies": {
-        "scrollparent": "^2.0.1",
-        "vue-observe-visibility": "^0.4.4",
-        "vue-resize": "^0.4.5"
-      },
-      "peerDependencies": {
-        "vue": "^2.6.11"
-      }
-    },
     "node_modules/vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
@@ -29411,12 +29379,12 @@
       }
     },
     "buefy": {
-      "version": "0.9.20",
-      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.20.tgz",
-      "integrity": "sha512-lEJTLZEuN7dI6XUGq6N5oL691ncHV8Zu9WtyBsQTOlcBjCJkSUXKicorPukS0wQi0z3w+pOl/e/FTCVswJj3Ng==",
+      "version": "0.9.29",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.29.tgz",
+      "integrity": "sha512-iJutB/ezTQcxqcKvKz129DzomMjNRGdy23lJBtoFQBG//2NveTcPkN/VRUF70z2WH3JB/5nmVeoxr8QOPcs42w==",
       "dev": true,
       "requires": {
-        "bulma": "0.9.3"
+        "bulma": "0.9.4"
       }
     },
     "buffer": {
@@ -29467,9 +29435,9 @@
       "dev": true
     },
     "bulma": {
-      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.3.tgz",
-      "integrity": "sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==",
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.4.tgz",
+      "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
       "dev": true
     },
     "bytes": {
@@ -36485,12 +36453,12 @@
       }
     },
     "nuxt-buefy": {
-      "version": "0.4.22",
-      "resolved": "https://registry.npmjs.org/nuxt-buefy/-/nuxt-buefy-0.4.22.tgz",
-      "integrity": "sha512-wqu7DkZo9c4yj+kLeBGYGEAqaLrnaDoYssGGha5s8Xp6CTtunLPq0Kdj26yu4k0rtI4M7qZaEuRgw9CMLHLhVw==",
+      "version": "0.4.29",
+      "resolved": "https://registry.npmjs.org/nuxt-buefy/-/nuxt-buefy-0.4.29.tgz",
+      "integrity": "sha512-t15wZ1g7uX2TQogJp3u82hXQYJ/rGw6capfvvtzAXzWqwpH+g42j3z1KVKE9wD3Vy6et670Zb7p/fXOIDAbEKg==",
       "dev": true,
       "requires": {
-        "buefy": "^0.9.20"
+        "buefy": "^0.9.29"
       }
     },
     "nuxt-clipboard2": {
@@ -39270,11 +39238,6 @@
         "ajv-keywords": "^3.5.2"
       }
     },
-    "scrollparent": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
-      "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA=="
-    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -41380,17 +41343,6 @@
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==",
       "dev": true
     },
-    "vue-observe-visibility": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
-      "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
-    },
-    "vue-resize": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
-      "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==",
-      "requires": {}
-    },
     "vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
@@ -41470,16 +41422,6 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
-    "vue-virtual-scroller": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-1.1.2.tgz",
-      "integrity": "sha512-SkUyc7QHCJFB5h1Fya7LxVizlVzOZZuFVipBGHYoTK8dwLs08bIz/tclvRApYhksaJIm/nn51inzO2UjpGJPMQ==",
-      "requires": {
-        "scrollparent": "^2.0.1",
-        "vue-observe-visibility": "^0.4.4",
-        "vue-resize": "^0.4.5"
-      }
-    },
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
diff --git a/package.json b/package.json
index 6e3a2aee..10ef0d75 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "merge-images-horizontally-with-text": "^1.0.2",
     "node-sass": "^6.0.1",
     "nuxt": "^2.15.8",
-    "nuxt-buefy": "^0.4.22",
+    "nuxt-buefy": "^0.4.29",
     "nuxt-clipboard2": "^0.2.1",
     "nuxt-compress": "^5.0.0",
     "nuxt-responsive-loader": "^2.0.1",
diff --git a/pages/index.vue b/pages/index.vue
index 4540c4a3..137ab67e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -31,13 +31,11 @@
             <div style="white-space: nowrap;" class="title is-4 isPictalkColor">{{ $t('CommunicateDemo') }}</div>
           </section>
         </b-carousel-item>
-        <client-only>
-          <b-carousel-item v-show="this.getUserLang == 'fr'" class="containing">
-            <video id="pictalk-video" preload="none" style="aspect-ratio: 16/9; width: 100%; height: 99.1%;"
-              alt="video of Alex talking about pictalk" :src="require('@/static/pictalk.mp4')" controls muted
-              :poster="require('@/assets/pictalk-video-poster.webp')" class="slightly-rounded"></video>
-          </b-carousel-item>
-        </client-only>
+        <b-carousel-item v-show="this.getUserLang == 'fr'" class="containing">
+          <video id="pictalk-video" preload="none" style="aspect-ratio: 16/9; width: 100%; height: 99.1%;"
+            alt="video of Alex talking about pictalk" :src="require('@/static/pictalk.mp4')" controls muted
+            :poster="require('@/assets/pictalk-video-poster.webp')" class="slightly-rounded"></video>
+        </b-carousel-item>
         <b-carousel-item class="containing">
           <b-image style="aspect-ratio: 16/9;" alt="A device running Pictalk sharing pictograms with another device"
             :srcset="require('@/assets/Share.png').srcSet" :placeholder="require('@/assets/Share.png').placeholder"

From 27e828d27ee80bd96b80d1fbac3c8c1084632367 Mon Sep 17 00:00:00 2001
From: Alexandros SIDIRAS <alexandros.sidiras@laposte.net>
Date: Wed, 12 Jun 2024 11:34:25 +0200
Subject: [PATCH 2/2] removed unused process.client & fixed signup error

---
 components/auth/signinModal.vue          |  9 +--
 components/auth/signupModal.vue          | 17 +++--
 components/navigation/pictalk-navbar.vue | 78 ++++++++++---------
 layouts/default.vue                      | 26 +++----
 layouts/pictalk.vue                      | 96 ++++++++++++------------
 layouts/public.vue                       | 11 ++-
 middleware/auth.js                       |  6 +-
 middleware/check-auth.js                 |  4 +-
 mixins/deviceInfos.js                    | 62 +++++++--------
 pages/index.vue                          | 60 +++++++--------
 plugins/vuex-persistedstate.js           |  5 --
 store/index.js                           | 21 ++++--
 12 files changed, 192 insertions(+), 203 deletions(-)

diff --git a/components/auth/signinModal.vue b/components/auth/signinModal.vue
index d42984cc..0361267f 100644
--- a/components/auth/signinModal.vue
+++ b/components/auth/signinModal.vue
@@ -20,7 +20,7 @@
       <footer class="modal-card-foot">
         <b-button data-cy="signin-signin" class="is-primary" :loading="loading" @click="onSubmit">{{
           $t("LogIn")
-        }}</b-button>
+          }}</b-button>
       </footer>
     </div>
   </form>
@@ -49,10 +49,9 @@ export default {
           await this.$store.dispatch("getUser");
 
           try {
-            if (process.client) {
-              const createDatabaseForUser = require("~/plugins/dexieDB").createDatabaseForUser;
-              createDatabaseForUser(this.$store.getters.getUser.username);
-            }
+            const createDatabaseForUser = require("~/plugins/dexieDB").createDatabaseForUser;
+            createDatabaseForUser(this.$store.getters.getUser.username);
+
           } catch (err) {
             console.log(err);
           }
diff --git a/components/auth/signupModal.vue b/components/auth/signupModal.vue
index 9dd54b04..53001a5c 100644
--- a/components/auth/signupModal.vue
+++ b/components/auth/signupModal.vue
@@ -16,7 +16,7 @@
               </div>
               <b-field :label="$t('Email')">
                 <b-input ref="email" type="email" maxlength="64" v-model="username"
-                  :placeholder="$t('PlaceHolderEmail')" required pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
+                  :placeholder="$t('PlaceHolderEmail')" required
                   :validation-message="$t('ValidationMessageEmail')"></b-input>
               </b-field>
               <b-field :label="$t('Password')">
@@ -27,7 +27,7 @@
               </b-field>
               <b-field :label="$t('ConfirmPassword')">
                 <b-input type="password" password-reveal :placeholder="$t('PlaceHolderPassword')" required minlength="8"
-                  :pattern="password.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')" v-model="passwordConfirmation"
+                  :pattern="password.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$')" v-model="passwordConfirmation"
                   :validation-message="$t('ValidationMessagePasswordConfirmation')"></b-input>
               </b-field>
               <div v-if="directSharerUrlEncoded" class="box">
@@ -179,8 +179,8 @@
                     terms,
                     passwordConfirmation
                   )
-                  ">{{ $t("SignUp") }}</b-button><b-button v-else id="signupmodal-verify"
-                class="is-success fullWidth" :disabled="(notSignedUp) || (verificationToken.length != 40)" @click="
+                  ">{{ $t("SignUp") }}</b-button><b-button v-else id="signupmodal-verify" class="is-success fullWidth"
+                :disabled="(notSignedUp) || (verificationToken.length != 40)" @click="
                   onVerify()
                   ">{{ $t("VerifyAccountOK") }}</b-button>
             </div>
@@ -302,15 +302,20 @@ export default {
       this.password = this.credentials.password;
     }
     await this.$store.dispatch("getPublicBundles");
+    console.log(JSON.parse(JSON.stringify(this.$store.getters.getPublicBundles)));
     this.selectedBundle = this.$store.getters.getPublicBundles
       ? this.$store.getters.getPublicBundles[0].id
       : null;
 
     const bundles = this.$store.getters.getPublicBundles;
+    console.log(JSON.parse(JSON.stringify(bundles)));
     this.publicBundles =
-      await Promise.all(bundles.map(async (bundle) =>
-        this.$store.dispatch("getCollectionFromId", bundle.id)
+      await Promise.all(bundles.map(async (bundle) => {
+        console.log(JSON.parse(JSON.stringify(bundle)));
+        return this.$store.dispatch("getCollectionFromId", bundle.id)
+      }
       ));
+    console.log(JSON.parse(JSON.stringify(this.publicBundles)));
     this.initialization = false;
     if (!this.$store.getters.getPublicBundles) {
       await this.$store.dispatch("getPublicBundles");
diff --git a/components/navigation/pictalk-navbar.vue b/components/navigation/pictalk-navbar.vue
index ca06f5ad..570a33d6 100644
--- a/components/navigation/pictalk-navbar.vue
+++ b/components/navigation/pictalk-navbar.vue
@@ -171,53 +171,51 @@ export default {
     Security,
   },
   async created() {
-    if (process.client) {
-      if ('BroadcastChannel' in window) {
-        const bc = new BroadcastChannel("offline-ready");
-        bc.onmessage = (event) => {
-          if (event.isTrusted) {
-            this.offlineReadyTotal = event.data.total;
-            this.offlineReadyProgress = event.data.progress;
-          }
-        };
-        const bc1 = new BroadcastChannel("authenticated-webworker");
-        console.log("Posting message to webworker")
-        if (this.$store.getters.getJwtFromCookie && this.$store.getters.getJwtExpDateFromCookie) {
-          bc1.postMessage({ jwt: this.$store.getters.getJwtFromCookie, expDate: this.$store.getters.getJwtExpDateFromCookie });
+    if ('BroadcastChannel' in window) {
+      const bc = new BroadcastChannel("offline-ready");
+      bc.onmessage = (event) => {
+        if (event.isTrusted) {
+          this.offlineReadyTotal = event.data.total;
+          this.offlineReadyProgress = event.data.progress;
         }
-        bc1.onmessage = (event) => {
-          console.log("Received authenticated event from webworker")
-          if (event.isTrusted) {
-            if (event.data === "authenticated") {
-              bc1.postMessage({ jwt: this.$store.getters.getJwtFromCookie, expDate: this.$store.getters.getJwtExpDateFromCookie });
-            }
-          }
-        };
+      };
+      const bc1 = new BroadcastChannel("authenticated-webworker");
+      console.log("Posting message to webworker")
+      if (this.$store.getters.getJwtFromCookie && this.$store.getters.getJwtExpDateFromCookie) {
+        bc1.postMessage({ jwt: this.$store.getters.getJwtFromCookie, expDate: this.$store.getters.getJwtExpDateFromCookie });
       }
-      this.intervalId = setInterval(async () => {
-        if (window.navigator.onLine) {
-          try {
-            let notifCount = this.$store.getters.getUser.notifications.length;
-            await this.$store.dispatch("getNotifications");
-            if (notifCount < this.$store.getters.getUser.notifications.length) {
-              this.$buefy.notification.open({
-                message: this.$t("UnreadNotifications"),
-                type: "is-info",
-              });
-            }
-          } catch (err) {
-            console.log(err);
-            clearInterval(this.intervalId);
-            return [];
+      bc1.onmessage = (event) => {
+        console.log("Received authenticated event from webworker")
+        if (event.isTrusted) {
+          if (event.data === "authenticated") {
+            bc1.postMessage({ jwt: this.$store.getters.getJwtFromCookie, expDate: this.$store.getters.getJwtExpDateFromCookie });
           }
         }
-      }, 60000);
+      };
     }
+    this.intervalId = setInterval(async () => {
+      if (window.navigator.onLine) {
+        try {
+          let notifCount = this.$store.getters.getUser.notifications.length;
+          await this.$store.dispatch("getNotifications");
+          if (notifCount < this.$store.getters.getUser.notifications.length) {
+            this.$buefy.notification.open({
+              message: this.$t("UnreadNotifications"),
+              type: "is-info",
+            });
+          }
+        } catch (err) {
+          console.log(err);
+          clearInterval(this.intervalId);
+          return [];
+        }
+      }
+    }, 60000);
+
   },
   async fetch() {
-    if (process.client) {
-      this.notifications = await this.$store.dispatch("getNotifications");
-    }
+    this.notifications = await this.$store.dispatch("getNotifications");
+
   },
   data() {
     return {
diff --git a/layouts/default.vue b/layouts/default.vue
index d9606022..495d8a46 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -68,22 +68,20 @@ export default {
   },
   middleware: ["axios"],
   created() {
-    if (process.client) {
-      // Matomo tag manager
-      var _mtm = window._mtm = window._mtm || [];
-      _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
-      var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-      g.async = true; g.src = 'https://analytics.picmind.org//js/container_V1sL8eXl.js'; s.parentNode.insertBefore(g, s);
+    // Matomo tag manager
+    var _mtm = window._mtm = window._mtm || [];
+    _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
+    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+    g.async = true; g.src = 'https://analytics.picmind.org//js/container_V1sL8eXl.js'; s.parentNode.insertBefore(g, s);
+    if (
+      this.$store.getters.isAuthenticated &&
+      this.$store.getters.getUser &&
+      this.$store.getters.getUser.displayLanguage.match(/[a-z]{2}/g)
+    ) {
       if (
-        this.$store.getters.isAuthenticated &&
-        this.$store.getters.getUser &&
-        this.$store.getters.getUser.displayLanguage.match(/[a-z]{2}/g)
+        this.$i18n.locale.code != this.$store.getters.getUser.displayLanguage
       ) {
-        if (
-          this.$i18n.locale.code != this.$store.getters.getUser.displayLanguage
-        ) {
-          this.$i18n.setLocale(this.$store.getters.getUser.displayLanguage);
-        }
+        this.$i18n.setLocale(this.$store.getters.getUser.displayLanguage);
       }
     }
   },
diff --git a/layouts/pictalk.vue b/layouts/pictalk.vue
index 3b88e5f6..4276c911 100644
--- a/layouts/pictalk.vue
+++ b/layouts/pictalk.vue
@@ -22,63 +22,61 @@ export default {
     };
   },
   async created() {
-    if (process.client) {
 
-      // Matomo tag manager
-      var _mtm = window._mtm = window._mtm || [];
-      _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
-      var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-      g.async = true; g.src = 'https://analytics.picmind.org//js/container_V1sL8eXl.js'; s.parentNode.insertBefore(g, s);
+    // Matomo tag manager
+    var _mtm = window._mtm = window._mtm || [];
+    _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
+    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+    g.async = true; g.src = 'https://analytics.picmind.org//js/container_V1sL8eXl.js'; s.parentNode.insertBefore(g, s);
 
-      if ('BroadcastChannel' in window) {
-        const bc2 = new BroadcastChannel("sync");
-        bc2.onmessage = (event) => {
-          if (event.isTrusted) {
-            this.$store.dispatch("downloadCollections", event.data.collections);
-          }
-        };
-      }
-      if (!this.$store.getters.getUser.username) {
-        try {
-          await this.$store.dispatch("getUser");
-        } catch (err) {
-          console.log(err);
-          throw new Error(err);
+    if ('BroadcastChannel' in window) {
+      const bc2 = new BroadcastChannel("sync");
+      bc2.onmessage = (event) => {
+        if (event.isTrusted) {
+          this.$store.dispatch("downloadCollections", event.data.collections);
         }
+      };
+    }
+    if (!this.$store.getters.getUser.username) {
+      try {
+        await this.$store.dispatch("getUser");
+      } catch (err) {
+        console.log(err);
+        throw new Error(err);
       }
+    }
+    if (
+      this.$store.getters.isAuthenticated &&
+      this.$store.getters.getUser &&
+      this.$store.getters.getUser.displayLanguage.match(/[a-z]{2}/g)
+    ) {
       if (
-        this.$store.getters.isAuthenticated &&
-        this.$store.getters.getUser &&
-        this.$store.getters.getUser.displayLanguage.match(/[a-z]{2}/g)
+        this.$i18n.locale.code != this.$store.getters.getUser.displayLanguage
       ) {
-        if (
-          this.$i18n.locale.code != this.$store.getters.getUser.displayLanguage
-        ) {
-          this.$i18n.setLocale(this.$store.getters.getUser.displayLanguage);
-        }
-      }
-      const workbox = await window.$workbox;
-      if (workbox) {
-        workbox.addEventListener('installed', (event) => {
-          // If we don't do this we'll be displaying the notification after the initial installation, which isn't perferred.
-          if (event.isUpdate) {
-            const notif = this.$buefy.notification.open({
-              duration: 4500,
-              message: this.$t("NewVersionAvailable"),
-              position: "is-top-right",
-              type: "is-success",
-              hasIcon: true,
-              iconSize: "is-small",
-              iconSize: "medium",
-              icon: "gift",
-            });
-            setTimeout(() => {
-              this.$router.push('/').then(() => window.location.reload(true));
-            }, 4500);
-          }
-        });
+        this.$i18n.setLocale(this.$store.getters.getUser.displayLanguage);
       }
     }
+    const workbox = await window.$workbox;
+    if (workbox) {
+      workbox.addEventListener('installed', (event) => {
+        // If we don't do this we'll be displaying the notification after the initial installation, which isn't perferred.
+        if (event.isUpdate) {
+          const notif = this.$buefy.notification.open({
+            duration: 4500,
+            message: this.$t("NewVersionAvailable"),
+            position: "is-top-right",
+            type: "is-success",
+            hasIcon: true,
+            iconSize: "is-small",
+            iconSize: "medium",
+            icon: "gift",
+          });
+          setTimeout(() => {
+            this.$router.push('/').then(() => window.location.reload(true));
+          }, 4500);
+        }
+      });
+    }
   },
   destroyed() {
     clearInterval(this.intervalId);
diff --git a/layouts/public.vue b/layouts/public.vue
index b2cfd849..4a5a63ee 100644
--- a/layouts/public.vue
+++ b/layouts/public.vue
@@ -23,12 +23,11 @@ export default {
     };
   },
   created() {
-    if (process.client) {
-      var _mtm = window._mtm = window._mtm || [];
-      _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
-      var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-      g.async = true; g.src = 'https://analytics.picmind.org//js/container_V1sL8eXl.js'; s.parentNode.insertBefore(g, s);
-    }
+    var _mtm = window._mtm = window._mtm || [];
+    _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
+    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
+    g.async = true; g.src = 'https://analytics.picmind.org//js/container_V1sL8eXl.js'; s.parentNode.insertBefore(g, s);
+
     // If the user isn't authenticated and the popup cookie isn't set or hasn't expired, show the popup
     this.popupTimeout = setTimeout(() => {
       if (!Cookie.get('popup') && !this.$store.getters.isAuthenticated) {
diff --git a/middleware/auth.js b/middleware/auth.js
index e5630062..be025b63 100644
--- a/middleware/auth.js
+++ b/middleware/auth.js
@@ -1,7 +1,5 @@
 export default function (context) {
-  if (process.client) {
-    if (!context.store.getters.isAuthenticated) {
-      context.redirect('/');
-    }
+  if (!context.store.getters.isAuthenticated) {
+    context.redirect('/');
   }
 }
diff --git a/middleware/check-auth.js b/middleware/check-auth.js
index cf42357a..81eebb58 100644
--- a/middleware/check-auth.js
+++ b/middleware/check-auth.js
@@ -1,5 +1,3 @@
 export default function (context) {
-  if (process.client) {
-    context.store.dispatch("initAuth", context.req);
-  }
+  context.store.dispatch("initAuth", context.req);
 }
diff --git a/mixins/deviceInfos.js b/mixins/deviceInfos.js
index f9689c02..baa70dec 100644
--- a/mixins/deviceInfos.js
+++ b/mixins/deviceInfos.js
@@ -1,40 +1,36 @@
 export default {
   methods: {
     getDeviceInfo() {
-      if (process.client) {
-        return (
-          this.getOSInfo() +
-          window.screen.height +
-          window.screen.width +
-          window.devicePixelRatio
-        );
-      }
+      return (
+        this.getOSInfo() +
+        window.screen.height +
+        window.screen.width +
+        window.devicePixelRatio
+      );
     },
     getOSInfo() {
-      if (process.client) {
-        if (window.navigator.userAgent.indexOf("Windows NT 10.0") != -1)
-          return "Windows 10";
-        if (window.navigator.userAgent.indexOf("Windows NT 6.3") != -1)
-          return "Windows 8.1";
-        if (window.navigator.userAgent.indexOf("Windows NT 6.2") != -1)
-          return "Windows 8";
-        if (window.navigator.userAgent.indexOf("Windows NT 6.1") != -1)
-          return "Windows 7";
-        if (window.navigator.userAgent.indexOf("Windows NT 6.0") != -1)
-          return "Windows Vista";
-        if (window.navigator.userAgent.indexOf("Mac") != -1)
-          return "Mac/iOS";
-        if (window.navigator.userAgent.indexOf("X11") != -1) return "UNIX";
-        if (window.navigator.userAgent.indexOf("Linux") != -1)
-          return "Linux";
-        if (window.navigator.userAgent.indexOf("Android") != -1)
-          return "Android";
-        if (window.navigator.userAgent.indexOf("iPhone") != -1)
-          return "iPhone";
-        if (window.navigator.userAgent.indexOf("iPad") != -1)
-          return "iPad";
-        else return "Unknown"
-      }
-    },
+      if (window.navigator.userAgent.indexOf("Windows NT 10.0") != -1)
+        return "Windows 10";
+      if (window.navigator.userAgent.indexOf("Windows NT 6.3") != -1)
+        return "Windows 8.1";
+      if (window.navigator.userAgent.indexOf("Windows NT 6.2") != -1)
+        return "Windows 8";
+      if (window.navigator.userAgent.indexOf("Windows NT 6.1") != -1)
+        return "Windows 7";
+      if (window.navigator.userAgent.indexOf("Windows NT 6.0") != -1)
+        return "Windows Vista";
+      if (window.navigator.userAgent.indexOf("Mac") != -1)
+        return "Mac/iOS";
+      if (window.navigator.userAgent.indexOf("X11") != -1) return "UNIX";
+      if (window.navigator.userAgent.indexOf("Linux") != -1)
+        return "Linux";
+      if (window.navigator.userAgent.indexOf("Android") != -1)
+        return "Android";
+      if (window.navigator.userAgent.indexOf("iPhone") != -1)
+        return "iPhone";
+      if (window.navigator.userAgent.indexOf("iPad") != -1)
+        return "iPad";
+      else return "Unknown"
+    }
   },
 }
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 137ab67e..4bf74cc0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -230,38 +230,36 @@ export default {
     }
   },
   mounted() {
-    if (process.client) {
-      if (this.getUserLang == "fr") {
-        const video = document.getElementById("pictalk-video");
-        if (video) {
-          video.addEventListener("ended", () => {
-            this.carouselAutoplay = true;
-            this.ended = true;
-          });
-          video.addEventListener("play", () => {
-            this.carouselAutoplay = false;
-          });
-          video.addEventListener("pause", () => {
-            this.carouselAutoplay = true;
-          });
-          let observer = new IntersectionObserver(
-            (entries) => {
-              entries.forEach((entry) => {
-                if (entry.intersectionRatio !== 1) {
-                  video.pause();
-                  this.carouselAutoplay = true;
-                } else {
-                  if (this.ended == false) {
-                    video.play();
-                    this.carouselAutoplay = false;
-                  }
+    if (this.getUserLang == "fr") {
+      const video = document.getElementById("pictalk-video");
+      if (video) {
+        video.addEventListener("ended", () => {
+          this.carouselAutoplay = true;
+          this.ended = true;
+        });
+        video.addEventListener("play", () => {
+          this.carouselAutoplay = false;
+        });
+        video.addEventListener("pause", () => {
+          this.carouselAutoplay = true;
+        });
+        let observer = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.intersectionRatio !== 1) {
+                video.pause();
+                this.carouselAutoplay = true;
+              } else {
+                if (this.ended == false) {
+                  video.play();
+                  this.carouselAutoplay = false;
                 }
-              });
-            },
-            { threshold: 0.2 }
-          );
-          observer.observe(video);
-        }
+              }
+            });
+          },
+          { threshold: 0.2 }
+        );
+        observer.observe(video);
       }
     }
   },
diff --git a/plugins/vuex-persistedstate.js b/plugins/vuex-persistedstate.js
index 0f8d2b37..c48b2296 100644
--- a/plugins/vuex-persistedstate.js
+++ b/plugins/vuex-persistedstate.js
@@ -6,12 +6,7 @@ export default ({ store, isHMR }) => {
   // Also nuxtReady event fires for HMR as well, which results multiple registration of
   // vuex-persistedstate plugin
   //if (isHMR) return
-
-  //if (process.client) {
-  //  window.onNuxtReady((nuxt) => {
   createPersistedState({
     key: 'pictalk-data',
   })(store) // vuex plugins can be connected to store, even after creation
-  //  })
-  //}
 }
\ No newline at end of file
diff --git a/store/index.js b/store/index.js
index ebe75788..30335816 100644
--- a/store/index.js
+++ b/store/index.js
@@ -147,7 +147,10 @@ export const actions = {
     }
     const db = await getDexieDB();
     editedCollections = await Promise.all(editedCollections.map(async (collection) => {
-      const col = await db.collection.get(collection.id)
+      let col = await db.collection.get(collection.id)
+      if (!col) {
+        col = collection;
+      }
       Object.assign(col, collection);
       col.collections = col.collections.filter((v, i, a) => a.findIndex(t => (t.id === v.id)) === i);
       col.pictos = col.pictos.filter((v, i, a) => a.findIndex(t => (t.id === v.id)) === i);
@@ -250,7 +253,8 @@ export const actions = {
   async getPublicBundles(vuexContext) {
     try {
       let publicBundles = (await axios.get('/collection/levels')).data;
-      publicBundles = Object.keys(publicBundles).map((key) => { parseAndUpdateEntireCollection(vuexContext, publicBundles[key]); return { id: publicBundles[key].id, level: key } });
+      await Promise.all(Object.keys(publicBundles).map(async (key) => parseAndUpdateEntireCollection(vuexContext, publicBundles[key])));
+      publicBundles = Object.keys(publicBundles).map((key) => { return { id: publicBundles[key].id, level: key } });
       //publicBundles = publicBundles.map((bundle) => { parseAndUpdateEntireCollection(vuexContext, bundle); bundle.level = bundle; return bundle.id; });
       vuexContext.commit('setPublicBundles', publicBundles);
       return publicBundles;
@@ -552,10 +556,8 @@ export const actions = {
     vuexContext.commit("clearToken");
     Cookie.remove("jwt");
     Cookie.remove("expirationDate");
-    if (process.client) {
-      localStorage.removeItem("token");
-      localStorage.removeItem("tokenExpiration");
-    }
+    localStorage.removeItem("token");
+    localStorage.removeItem("tokenExpiration");
     // Check if dexie db is different from the default one
     if (vuexContext.state.user.username) {
       const db = await getDexieDB();
@@ -861,6 +863,9 @@ export const getters = {
 };
 
 async function parseAndUpdateEntireCollection(vuexContext, collection, download = false) {
+  if (collection.id == 346) {
+    console.log(collection);
+  }
   let pictosToEdit = [];
   let pictosTocreate = [];
   let collectionsToEdit = [];
@@ -979,12 +984,14 @@ async function parseAndUpdateEntireCollection(vuexContext, collection, download
     if (pictosToEdit.length > 0) {
       await vuexContext.dispatch("dbEditPicto", pictosToEdit);
     }
+    if (collectionsWithoutFatherCollectionId.length > 0) {
+      await vuexContext.dispatch("dbEditCollection", collectionsWithoutFatherCollectionId);
+    }
     if (existsCollection && !updateCollection) {
       return localCollection;
     } else {
       return collection;
     }
-
   }
   return { collectionsToCreate, collectionsToEdit, pictosTocreate, pictosToEdit, collectionsWithoutFatherCollectionId };
 }