From e0cc4e40ba8c0bcd1c62907e0e6e1e484b5031dd Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 16 Jul 2024 21:49:10 -0300
Subject: [PATCH] Change components auto import casing type

---
 .eslintrc.js                         |   6 +-
 .vscode/settings.json                |   2 +-
 quasar.config.js                     |   7 +-
 src/layouts/LoginLayout.vue          |   4 +-
 src/layouts/MainLayout.vue           |  72 +++++++++----------
 src/pages/Cms/Home.vue               |  20 +++---
 src/pages/Ecomerce/Catalog.vue       | 100 +++++++++++++--------------
 src/pages/Ecomerce/Invoices.vue      |  34 ++++-----
 src/pages/Ecomerce/Orders.vue        |  40 +++++------
 src/pages/Ecomerce/Ticket.vue        |  60 ++++++++--------
 src/pages/ErrorNotFound.vue          |   2 +-
 src/pages/IndexPage.vue              |   4 +-
 src/pages/Login/Login.vue            |  18 ++---
 src/pages/Login/RememberPassword.vue |  10 +--
 src/pages/Login/ResetPassword.vue    |  28 ++++----
 src/stores/user.js                   |   3 +-
 16 files changed, 204 insertions(+), 206 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 9ff9f7b0..4265d98f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -73,10 +73,8 @@ module.exports = {
     },
        overrides: [
         {
-            extends: [
-            'plugin:vue/vue3-essential',
-            ],
-            files: ['src/**/*.{js,vue,scss}'], // Aplica ESLint solo a archivos .js y .vue dentro de src
+            extends: ['plugin:vue/vue3-essential'],
+            files: ['src/**/*.{js,vue,scss}'], // Aplica ESLint solo a archivos .js, .vue y .scss dentro de src (Proyecto de quasar)
             rules: {
               semi: 'off',
               indent: ['error', 4, { SwitchCase: 1 }],
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 00be94bb..e7d7d29c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,5 +13,5 @@
       "javascriptreact",
       "typescript",
       "vue"
-    ]
+    ],
 }
diff --git a/quasar.config.js b/quasar.config.js
index 34413d4e..1fb70d5e 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -104,15 +104,14 @@ module.exports = configure(function (ctx) {
         type: 'http'
       },
       port: 8080,
-      open: true, // opens browser window automatically
-
+      open: false,
       // static: __dirname,
       headers: { 'Access-Control-Allow-Origin': '*' },
       // stats: { chunks: false },
       proxy: {
         '/api': 'http://localhost:3000',
         '/': {
-          target: 'http://localhost/projects/hedera-web',
+          target: 'http://localhost:3001',
           bypass: (req) => req.path !== '/' ? req.path : null
         }
       }
@@ -121,7 +120,7 @@ module.exports = configure(function (ctx) {
     // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
     framework: {
       config: {},
-
+      autoImportComponentCase: 'pascal',
       // iconSet: 'material-icons', // Quasar icon set
       // lang: 'en-US', // Quasar language pack
 
diff --git a/src/layouts/LoginLayout.vue b/src/layouts/LoginLayout.vue
index 5a5769af..d04343ac 100644
--- a/src/layouts/LoginLayout.vue
+++ b/src/layouts/LoginLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-layout
+  <QLayout
     id="bg"
     class="fullscreen row justify-center items-center layout-view scroll"
   >
@@ -10,7 +10,7 @@
         </transition>
       </router-view>
     </div>
-  </q-layout>
+  </QLayout>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 6eada86f..2bdd86eb 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,8 +1,8 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
-    <q-header reveal>
-      <q-toolbar>
-        <q-btn
+  <QLayout view="lHh Lpr lFf">
+    <QHeader>
+      <QToolbar>
+        <QBtn
           flat
           dense
           round
@@ -10,14 +10,14 @@
           aria-label="Menu"
           @click="toggleLeftDrawer"
         />
-        <q-toolbar-title>
+        <QToolbarTitle>
           {{ $app.title }}
           <div v-if="$app.subtitle" class="subtitle text-caption">
             {{ $app.subtitle }}
           </div>
-        </q-toolbar-title>
+        </QToolbarTitle>
         <div id="actions" ref="actions"></div>
-        <q-btn
+        <QBtn
           v-if="$app.useRightDrawer"
           @click="$app.rightDrawerOpen = !$app.rightDrawerOpen"
           aria-label="Menu"
@@ -25,54 +25,54 @@
           dense
           round
         >
-          <q-icon name="menu" />
-        </q-btn>
-      </q-toolbar>
-    </q-header>
-    <q-drawer v-model="leftDrawerOpen" :width="250" show-if-above>
-      <q-toolbar class="logo">
+          <QIcon name="menu" />
+        </QBtn>
+      </QToolbar>
+    </QHeader>
+    <QDrawer v-model="leftDrawerOpen" :width="250" show-if-above>
+      <QToolbar class="logo">
         <img src="statics/logo-dark.svg" />
-      </q-toolbar>
+      </QToolbar>
       <div class="user-info">
         <div>
           <span id="user-name">{{ user.nickname }}</span>
-          <q-btn flat icon="logout" alt="_Exit" @click="logout()" />
+          <QBtn flat icon="logout" alt="_Exit" @click="logout()" />
         </div>
         <div id="supplant" class="supplant">
           <span id="supplanted">{{ supplantedUser }}</span>
-          <q-btn flat icon="logout" alt="_Exit" />
+          <QBtn flat icon="logout" alt="_Exit" />
         </div>
       </div>
-      <q-list v-for="item in essentialLinks" :key="item.id">
-        <q-item v-if="!item.childs" :to="`/${item.path}`">
-          <q-item-section>
-            <q-item-label>{{ item.description }}</q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-expansion-item
+      <QList v-for="item in essentialLinks" :key="item.id">
+        <QItem v-if="!item.childs" :to="`/${item.path}`">
+          <QItemSection>
+            <QItemLabel>{{ item.description }}</QItemLabel>
+          </QItemSection>
+        </QItem>
+        <QExpansionItem
           v-if="item.childs"
           :label="item.description"
           expand-separator
         >
-          <q-list>
-            <q-item
+          <QList>
+            <QItem
               v-for="subitem in item.childs"
               :key="subitem.id"
               :to="`/${subitem.path}`"
               class="q-pl-lg"
             >
-              <q-item-section>
-                <q-item-label>{{ subitem.description }}</q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-expansion-item>
-      </q-list>
-    </q-drawer>
-    <q-page-container>
+              <QItemSection>
+                <QItemLabel>{{ subitem.description }}</QItemLabel>
+              </QItemSection>
+            </QItem>
+          </QList>
+        </QExpansionItem>
+      </QList>
+    </QDrawer>
+    <QPageContainer>
       <router-view />
-    </q-page-container>
-  </q-layout>
+    </QPageContainer>
+  </QLayout>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Cms/Home.vue b/src/pages/Cms/Home.vue
index 2ce9d5dc..161599fe 100644
--- a/src/pages/Cms/Home.vue
+++ b/src/pages/Cms/Home.vue
@@ -2,26 +2,26 @@
   <div style="padding: 0">
     <div class="q-pa-sm row items-start">
       <div class="new-card q-pa-sm" v-for="myNew in news" :key="myNew.id">
-        <q-card>
-          <q-img :src="`${$app.imageUrl}/news/full/${myNew.image}`"> </q-img>
-          <q-card-section>
+        <QCard>
+          <QImg :src="`${$app.imageUrl}/news/full/${myNew.image}`"> </QImg>
+          <QCardSection>
             <div class="text-h5">{{ myNew.title }}</div>
-          </q-card-section>
-          <q-card-section class="new-body">
+          </QCardSection>
+          <QCardSection class="new-body">
             <div v-html="myNew.text" />
-          </q-card-section>
-        </q-card>
+          </QCardSection>
+        </QCard>
       </div>
     </div>
-    <q-page-sticky>
-      <q-btn
+    <QPageSticky>
+      <QBtn
         fab
         icon="add_shopping_cart"
         color="accent"
         to="/ecomerce/catalog"
         :title="$t('startOrder')"
       />
-    </q-page-sticky>
+    </QPageSticky>
   </div>
 </template>
 
diff --git a/src/pages/Ecomerce/Catalog.vue b/src/pages/Ecomerce/Catalog.vue
index 7d39bc44..8840b513 100644
--- a/src/pages/Ecomerce/Catalog.vue
+++ b/src/pages/Ecomerce/Catalog.vue
@@ -1,6 +1,6 @@
 <template>
   <Teleport :to="$actions">
-    <q-input
+    <QInput
       :placeholder="$t('search')"
       v-model="search"
       debounce="500"
@@ -11,16 +11,16 @@
       standout
     >
       <template v-slot:prepend>
-        <q-icon v-if="search === ''" name="search" />
-        <q-icon
+        <QIcon v-if="search === ''" name="search" />
+        <QIcon
           v-else
           name="clear"
           class="cursor-pointer"
           @click="search = ''"
         />
       </template>
-    </q-input>
-    <q-btn
+    </QInput>
+    <QBtn
       :icon="$t(viewMode == 'list' ? 'view_list' : 'grid_on')"
       :label="$t(viewMode == 'list' ? 'listView' : 'gridView')"
       @click="onViewModeClick()"
@@ -29,7 +29,7 @@
     />
   </Teleport>
   <div style="padding-bottom: 5em">
-    <q-drawer v-model="$app.rightDrawerOpen" side="right" :width="250">
+    <QDrawer v-model="$app.rightDrawerOpen" side="right" :width="250">
       <div class="q-pa-md">
         <div class="basket-info">
           <p>{{ date(new Date()) }}</p>
@@ -37,14 +37,14 @@
             {{ $t('warehouse') }}
             {{ 'Algemesi' }}
           </p>
-          <q-btn flat rounded no-caps>
+          <QBtn flat rounded no-caps>
             {{ $t('modify') }}
-          </q-btn>
+          </QBtn>
         </div>
         <div class="q-mt-md">
           <div class="q-mb-xs text-grey-7">
             {{ $t('category') }}
-            <q-icon
+            <QIcon
               v-if="category"
               style="font-size: 1.3em"
               name="cancel"
@@ -54,7 +54,7 @@
             />
           </div>
           <div class="categories">
-            <q-btn
+            <QBtn
               flat
               round
               class="category q-pa-sm"
@@ -65,14 +65,14 @@
               :to="{ params: { category: cat.id, type: null } }"
             >
               <img :src="`statics/category/${cat.code}.svg`" />
-            </q-btn>
+            </QBtn>
           </div>
         </div>
         <div class="q-mt-md" v-if="category || search">
           <div class="q-mb-xs text-grey-7">
             {{ $t('filterBy') }}
           </div>
-          <q-select
+          <QSelect
             v-model="type"
             option-value="id"
             option-label="name"
@@ -83,7 +83,7 @@
             @filter="filterType"
             @input="$router.push({ params: { type: type && type.id } })"
           />
-          <q-select
+          <QSelect
             v-model="order"
             input-debounce="0"
             :options="orderOptions"
@@ -95,7 +95,7 @@
         <div class="q-mb-md" v-for="tag in tags" :key="tag.uid">
           <div class="q-mb-xs text-caption text-grey-7">
             {{ tag.name }}
-            <q-icon
+            <QIcon
               v-if="tag.hasFilter"
               style="font-size: 1.3em"
               name="cancel"
@@ -109,7 +109,7 @@
               v-for="value in tag.values.slice(0, tag.showCount)"
               :key="value"
             >
-              <q-checkbox
+              <QCheckbox
                 v-model="tag.filter"
                 :dense="true"
                 :val="value"
@@ -122,7 +122,7 @@
                 class="cursor-pointer text-blue"
                 @click="tag.showCount = Infinity"
               >
-                <q-icon name="keyboard_arrow_down" />
+                <QIcon name="keyboard_arrow_down" />
                 {{ $t('viewMore') }}
               </span>
             </div>
@@ -131,13 +131,13 @@
                 class="cursor-pointer text-blue"
                 @click="tag.showCount = tag.initialCount"
               >
-                <q-icon name="keyboard_arrow_up" />
+                <QIcon name="keyboard_arrow_up" />
                 {{ $t('viewLess') }}
               </span>
             </div>
           </div>
           <div class="q-mx-md">
-            <q-range
+            <QRange
               class="q-mt-lg"
               v-if="tag.useRange"
               v-model="tag.filter"
@@ -154,15 +154,15 @@
           </div>
         </div>
       </div>
-    </q-drawer>
-    <q-infinite-scroll
+    </QDrawer>
+    <QInfiniteScroll
       @load="onLoad"
       scroll-taget="html"
       :offset="800"
       :disable="disableScroll"
     >
       <div class="q-pa-md row justify-center q-gutter-md">
-        <q-spinner v-if="isLoading" color="primary" size="50px"> </q-spinner>
+        <QSpinner v-if="isLoading" color="primary" size="50px"> </QSpinner>
         <div
           v-if="items && !items.length"
           class="text-subtitle1 text-grey-7 q-pa-md"
@@ -175,9 +175,9 @@
         >
           {{ $t('pleaseSetFilter') }}
         </div>
-        <q-card class="my-card" v-for="item in items" :key="item.id">
+        <QCard class="my-card" v-for="item in items" :key="item.id">
           <img :src="`${$imageBase}/catalog/200x200/${item.image}`" />
-          <q-card-section>
+          <QCardSection>
             <div class="name text-subtitle1">
               {{ item.longName }}
             </div>
@@ -192,8 +192,8 @@
                 {{ tag.value }}
               </div>
             </div>
-          </q-card-section>
-          <q-card-actions class="actions justify-between">
+          </QCardSection>
+          <QCardActions class="actions justify-between">
             <div class="q-pl-sm">
               <span class="available bg-green text-white">{{
                 item.available
@@ -201,25 +201,25 @@
               {{ $t('from') }}
               <span class="price">{{ currency(item.buy?.price3) }}</span>
             </div>
-            <q-btn
+            <QBtn
               icon="add_shopping_cart"
               :title="$t('buy')"
               @click="showItem(item)"
               flat
             >
-            </q-btn>
-          </q-card-actions>
-        </q-card>
+            </QBtn>
+          </QCardActions>
+        </QCard>
       </div>
       <template v-slot:loading>
         <div class="row justify-center q-my-md">
-          <q-spinner color="primary" name="dots" size="40px" />
+          <QSpinner color="primary" name="dots" size="40px" />
         </div>
       </template>
-    </q-infinite-scroll>
-    <q-dialog v-model="showItemDialog">
-      <q-card style="width: 25em">
-        <q-img
+    </QInfiniteScroll>
+    <QDialog v-model="showItemDialog">
+      <QCard style="width: 25em">
+        <QImg
           :src="`${$imageBase}/catalog/200x200/${item.image}`"
           :ratio="5 / 3"
         >
@@ -228,38 +228,38 @@
               {{ item.longName }}
             </div>
           </div>
-        </q-img>
-        <q-card-section>
+        </QImg>
+        <QCardSection>
           <div class="text-uppercase text-subtitle1 text-grey-7 ellipsize">
             {{ item.subName }}
           </div>
           <div class="text-grey-7">#{{ item.id }}</div>
-        </q-card-section>
-        <q-card-section>
+        </QCardSection>
+        <QCardSection>
           <div v-for="tag in item.tags" :key="tag.tagFk">
             <span class="text-grey-7">{{ tag.tag.name }}</span>
             {{ tag.value }}
           </div>
-        </q-card-section>
-        <q-card-actions align="right">
-          <q-btn @click="showItemDialog = false" flat>
+        </QCardSection>
+        <QCardActions align="right">
+          <QBtn @click="showItemDialog = false" flat>
             {{ $t('cancel') }}
-          </q-btn>
-          <q-btn @click="showItemDialog = false" flat>
+          </QBtn>
+          <QBtn @click="showItemDialog = false" flat>
             {{ $t('accept') }}
-          </q-btn>
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
-    <q-page-sticky>
-      <q-btn
+          </QBtn>
+        </QCardActions>
+      </QCard>
+    </QDialog>
+    <QPageSticky>
+      <QBtn
         fab
         to="/ecomerce/basket"
         icon="shopping_cart"
         color="accent"
         :title="$t('shoppingCart')"
       />
-    </q-page-sticky>
+    </QPageSticky>
   </div>
 </template>
 
diff --git a/src/pages/Ecomerce/Invoices.vue b/src/pages/Ecomerce/Invoices.vue
index 2a83272d..554ede85 100644
--- a/src/pages/Ecomerce/Invoices.vue
+++ b/src/pages/Ecomerce/Invoices.vue
@@ -1,6 +1,6 @@
 <template>
   <Teleport :to="$actions">
-    <q-select
+    <QSelect
       v-model="year"
       :options="years"
       color="white"
@@ -17,8 +17,8 @@
     >
       {{ $t('noInvoicesFound') }}
     </div>
-    <q-card v-if="invoices?.length">
-      <q-table
+    <QCard v-if="invoices?.length">
+      <QTable
         :columns="columns"
         :pagination="pagination"
         :rows="invoices"
@@ -27,18 +27,18 @@
         hide-bottom
       >
         <template v-slot:body="props">
-          <q-tr :props="props">
-            <q-td key="ref" :props="props">
+          <QTr :props="props">
+            <QTd key="ref" :props="props">
               {{ props.row.ref }}
-            </q-td>
-            <q-td key="issued" :props="props">
+            </QTd>
+            <QTd key="issued" :props="props">
               {{ date(props.row.issued, 'ddd, MMMM Do') }}
-            </q-td>
-            <q-td key="amount" :props="props">
+            </QTd>
+            <QTd key="amount" :props="props">
               {{ currency(props.row.amount) }}
-            </q-td>
-            <q-td key="hasPdf" :props="props">
-              <q-btn
+            </QTd>
+            <QTd key="hasPdf" :props="props">
+              <QBtn
                 v-if="props.row.hasPdf"
                 icon="download"
                 :title="$t('downloadInvoicePdf')"
@@ -47,18 +47,18 @@
                 flat
                 round
               />
-              <q-icon
+              <QIcon
                 v-else
                 name="warning"
                 :title="$t('notDownloadable')"
                 color="warning"
                 size="24px"
               />
-            </q-td>
-          </q-tr>
+            </QTd>
+          </QTr>
         </template>
-      </q-table>
-    </q-card>
+      </QTable>
+    </QCard>
   </div>
 </template>
 
diff --git a/src/pages/Ecomerce/Orders.vue b/src/pages/Ecomerce/Orders.vue
index d2341b13..b1be1e21 100644
--- a/src/pages/Ecomerce/Orders.vue
+++ b/src/pages/Ecomerce/Orders.vue
@@ -5,16 +5,16 @@
       <span class="amount" :class="{ negative: debt < 0 }">
         {{ currency(debt || 0) }}
       </span>
-      <q-icon name="info" :title="$t('paymentInfo')" class="info" size="24px" />
+      <QIcon name="info" :title="$t('paymentInfo')" class="info" size="24px" />
     </div>
-    <q-btn
+    <QBtn
       icon="payments"
       :label="$t('makePayment')"
       @click="onPayClick()"
       rounded
       no-caps
     />
-    <q-btn
+    <QBtn
       to="/ecomerce/basket"
       icon="shopping_cart"
       :label="$t('shoppingCart')"
@@ -29,36 +29,36 @@
     >
       {{ $t('noOrdersFound') }}
     </div>
-    <q-card v-if="orders?.length">
-      <q-list bordered separator padding>
-        <q-item
+    <QCard v-if="orders?.length">
+      <QList bordered separator padding>
+        <QItem
           v-for="order in orders"
           :key="order.id"
           :to="`ticket/${order.id}`"
           clickable
           v-ripple
         >
-          <q-item-section>
-            <q-item-label>
+          <QItemSection>
+            <QItemLabel>
               {{ date(order.landed, 'ddd, MMMM Do') }}
-            </q-item-label>
-            <q-item-label caption>#{{ order.id }}</q-item-label>
-            <q-item-label caption>{{ order.nickname }}</q-item-label>
-            <q-item-label caption>{{ order.agency }}</q-item-label>
-          </q-item-section>
-          <q-item-section side top> {{ order.total }}€ </q-item-section>
-        </q-item>
-      </q-list>
-    </q-card>
-    <q-page-sticky>
-      <q-btn
+            </QItemLabel>
+            <QItemLabel caption>#{{ order.id }}</QItemLabel>
+            <QItemLabel caption>{{ order.nickname }}</QItemLabel>
+            <QItemLabel caption>{{ order.agency }}</QItemLabel>
+          </QItemSection>
+          <QItemSection side top> {{ order.total }}€ </QItemSection>
+        </QItem>
+      </QList>
+    </QCard>
+    <QPageSticky>
+      <QBtn
         fab
         icon="add_shopping_cart"
         color="accent"
         to="/ecomerce/catalog"
         :title="$t('startOrder')"
       />
-    </q-page-sticky>
+    </QPageSticky>
   </div>
 </template>
 
diff --git a/src/pages/Ecomerce/Ticket.vue b/src/pages/Ecomerce/Ticket.vue
index 2e746a32..00b154e8 100644
--- a/src/pages/Ecomerce/Ticket.vue
+++ b/src/pages/Ecomerce/Ticket.vue
@@ -1,6 +1,6 @@
 <template>
   <Teleport :to="$actions">
-    <q-btn
+    <QBtn
       icon="print"
       :label="$t('printDeliveryNote')"
       @click="onPrintClick()"
@@ -9,11 +9,11 @@
     />
   </Teleport>
   <div>
-    <q-card class="vn-w-sm">
-      <q-card-section>
+    <QCard class="vn-w-sm">
+      <QCardSection>
         <div class="text-h6">#{{ ticket.id }}</div>
-      </q-card-section>
-      <q-card-section>
+      </QCardSection>
+      <QCardSection>
         <div class="text-h6">{{ $t('shippingInformation') }}</div>
         <div>
           {{ $t('preparation') }} {{ date(ticket.shipped, 'ddd, MMMM Do') }}
@@ -25,46 +25,46 @@
           {{ $t(ticket.method != 'PICKUP' ? 'agency' : 'warehouse') }}
           {{ ticket.agency }}
         </div>
-      </q-card-section>
-      <q-card-section>
+      </QCardSection>
+      <QCardSection>
         <div class="text-h6">{{ $t('deliveryAddress') }}</div>
         <div>{{ ticket.nickname }}</div>
         <div>{{ ticket.street }}</div>
         <div>
           {{ ticket.postalCode }} {{ ticket.city }} ({{ ticket.province }})
         </div>
-      </q-card-section>
-      <q-separator inset />
-      <q-list v-for="row in rows" :key="row.itemFk">
-        <q-item>
-          <q-item-section avatar>
-            <q-avatar size="68px">
+      </QCardSection>
+      <QSeparator inset />
+      <QList v-for="row in rows" :key="row.itemFk">
+        <QItem>
+          <QItemSection avatar>
+            <QAvatar size="68px">
               <img :src="`${$app.imageUrl}/catalog/200x200/${row.image}`" />
-            </q-avatar>
-          </q-item-section>
-          <q-item-section>
-            <q-item-label lines="1">
+            </QAvatar>
+          </QItemSection>
+          <QItemSection>
+            <QItemLabel lines="1">
               {{ row.concept }}
-            </q-item-label>
-            <q-item-label lines="1" caption>
+            </QItemLabel>
+            <QItemLabel lines="1" caption>
               {{ row.value5 }} {{ row.value6 }} {{ row.value7 }}
-            </q-item-label>
-            <q-item-label lines="1">
+            </QItemLabel>
+            <QItemLabel lines="1">
               {{ row.quantity }} x {{ currency(row.price) }}
-            </q-item-label>
-          </q-item-section>
-          <q-item-section side class="total">
-            <q-item-label>
+            </QItemLabel>
+          </QItemSection>
+          <QItemSection side class="total">
+            <QItemLabel>
               <span class="discount" v-if="row.discount">
                 {{ currency(discountSubtotal(row)) }} -
                 {{ currency(row.discount) }} =
               </span>
               {{ currency(subtotal(row)) }}
-            </q-item-label>
-          </q-item-section>
-        </q-item>
-      </q-list>
-    </q-card>
+            </QItemLabel>
+          </QItemSection>
+        </QItem>
+      </QList>
+    </QCard>
   </div>
 </template>
 
diff --git a/src/pages/ErrorNotFound.vue b/src/pages/ErrorNotFound.vue
index c23e9ea0..9d500b37 100644
--- a/src/pages/ErrorNotFound.vue
+++ b/src/pages/ErrorNotFound.vue
@@ -7,7 +7,7 @@
 
       <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
 
-      <q-btn
+      <QBtn
         class="q-mt-xl"
         color="white"
         text-color="accent"
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index 9d17e880..fdb03f80 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,11 +1,11 @@
 <template>
-  <q-page class="flex flex-center">
+  <QPage class="flex flex-center">
     <img
       alt="Quasar logo"
       src="~assets/quasar-logo-vertical.svg"
       style="width: 200px; height: 200px"
     />
-  </q-page>
+  </QPage>
 </template>
 
 <script>
diff --git a/src/pages/Login/Login.vue b/src/pages/Login/Login.vue
index a9fb4a80..b754b107 100644
--- a/src/pages/Login/Login.vue
+++ b/src/pages/Login/Login.vue
@@ -5,24 +5,24 @@
         <img src="statics/logo.svg" alt="Verdnatura" class="block" />
       </router-link>
     </div>
-    <q-form @submit="onLogin" class="q-gutter-y-md">
+    <QForm @submit="onLogin" class="q-gutter-y-md">
       <div class="q-gutter-y-sm">
-        <q-input v-model="email" :label="$t('user')" autofocus />
-        <q-input
+        <QInput v-model="email" :label="$t('user')" autofocus />
+        <QInput
           v-model="password"
           ref="password"
           :label="$t('password')"
           :type="showPwd ? 'password' : 'text'"
         >
           <template v-slot:append>
-            <q-icon
+            <QIcon
               :name="showPwd ? 'visibility_off' : 'visibility'"
               class="cursor-pointer"
               @click="showPwd = !showPwd"
             />
           </template>
-        </q-input>
-        <q-checkbox
+        </QInput>
+        <QCheckbox
           v-model="remember"
           :label="$t('remindMe')"
           class="remember"
@@ -30,7 +30,7 @@
         />
       </div>
       <div class="justify-center">
-        <q-btn
+        <QBtn
           type="submit"
           :label="$t('logIn')"
           class="full-width"
@@ -41,7 +41,7 @@
         />
       </div>
       <div class="justify-center">
-        <q-btn
+        <QBtn
           to="/"
           :label="$t('logInAsGuest')"
           class="full-width"
@@ -56,7 +56,7 @@
           {{ $t('haveForgottenPassword') }}
         </router-link>
       </p>
-    </q-form>
+    </QForm>
     <div class="footer text-center">
       <p>
         {{ $t('notACustomerYet') }}
diff --git a/src/pages/Login/RememberPassword.vue b/src/pages/Login/RememberPassword.vue
index e8b4b22f..d0ed9110 100644
--- a/src/pages/Login/RememberPassword.vue
+++ b/src/pages/Login/RememberPassword.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="text-center">
     <div>
-      <q-icon
+      <QIcon
         name="contact_support"
         class="block q-mx-auto text-accent"
         style="font-size: 120px"
       />
     </div>
     <div>
-      <q-form @submit="onSend" class="q-gutter-y-md text-grey-8">
+      <QForm @submit="onSend" class="q-gutter-y-md text-grey-8">
         <div class="text-h5">
           <div>
             {{ $t('dontWorry') }}
@@ -17,7 +17,7 @@
             {{ $t('fillData') }}
           </div>
         </div>
-        <q-input
+        <QInput
           v-model="email"
           :label="$t('user')"
           :rules="[(val) => !!val || $t('inputEmail')]"
@@ -27,7 +27,7 @@
           {{ $t('weSendEmail') }}
         </div>
         <div>
-          <q-btn
+          <QBtn
             type="submit"
             :label="$t('send')"
             class="full-width q-mt-md"
@@ -42,7 +42,7 @@
             </router-link>
           </div>
         </div>
-      </q-form>
+      </QForm>
     </div>
   </div>
 </template>
diff --git a/src/pages/Login/ResetPassword.vue b/src/pages/Login/ResetPassword.vue
index 796eb010..bb332842 100644
--- a/src/pages/Login/ResetPassword.vue
+++ b/src/pages/Login/ResetPassword.vue
@@ -1,19 +1,19 @@
 <template>
   <div>
-    <q-card-section>
-      <q-icon
+    <QCard-section>
+      <QIcon
         name="check"
         class="block q-mx-auto text-accent"
         style="font-size: 120px"
       />
-    </q-card-section>
-    <q-card-section>
-      <q-form @submit="onRegister" ref="form" class="q-gutter-y-md">
+    </QCard-section>
+    <QCard-section>
+      <QForm @submit="onRegister" ref="form" class="q-gutter-y-md">
         <div class="text-grey-8 text-h5 text-center">
           {{ $t('fillData') }}
         </div>
         <div class="q-gutter-y-sm">
-          <q-input
+          <QInput
             v-model="password"
             :label="$t('password')"
             :type="showPwd ? 'password' : 'text'"
@@ -22,14 +22,14 @@
             filled
           >
             <template v-slot:append>
-              <q-icon
+              <QIcon
                 :name="showPwd ? 'visibility_off' : 'visibility'"
                 class="cursor-pointer"
                 @click="showPwd = !showPwd"
               />
             </template>
-          </q-input>
-          <q-input
+          </QInput>
+          <QInput
             v-model="repeatPassword"
             :label="$t('repeatPassword')"
             :type="showRpPwd ? 'password' : 'text'"
@@ -38,16 +38,16 @@
             filled
           >
             <template v-slot:append>
-              <q-icon
+              <QIcon
                 :name="showRpPwd ? 'visibility_off' : 'visibility'"
                 class="cursor-pointer"
                 @click="showRpPwd = !showRpPwd"
               />
             </template>
-          </q-input>
+          </QInput>
         </div>
         <div>
-          <q-btn
+          <QBtn
             type="submit"
             :label="$t('resetPassword')"
             class="full-width"
@@ -59,8 +59,8 @@
             </router-link>
           </div>
         </div>
-      </q-form>
-    </q-card-section>
+      </QForm>
+    </QCard-section>
   </div>
 </template>
 
diff --git a/src/stores/user.js b/src/stores/user.js
index 92840e50..ca713e95 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -10,7 +10,8 @@ export const userStore = defineStore('user', {
             token,
             id: null,
             name: null,
-            nickname: null
+            nickname: null,
+            isGuest: false
         }
     },