Installed pwa

app.vue

@@ -2,6 +2,7 @@
 
 <template>
   <div>
+    <NuxtPwaManifest />
     <UNotifications class="fixed bottom-10 right-0 z-50 max-h-fit sm:top-20" />
     <NuxtLoadingIndicator />
     <NuxtLayout>

components/FilterAndSorting.vue

@@ -23,23 +23,6 @@ const { buildSearchCriteria, sortingOptions } = useSearch();
 
 const { myGroups } = useGroups();
 
-const groupOptions = myGroups.value.map(
-  (g: GroupResponse): GroupSelect => ({ id: g.id, name: g.name }),
-);
-const selectedGroupOption = ref(undefined) as Ref<GroupSelect | undefined>;
-
-const memberOptions = myGroups.value.flatMap(
-  (g: GroupResponse): GroupSelect[] =>
-    g.members.map(
-      (m: GroupMember): MemberSelect => ({
-        id: m.id,
-        name: m.name ?? m.email,
-      }),
-    ),
-);
-const selectedMemberOption = ref(undefined) as Ref<MemberSelect | undefined>;
-const selectedRatingOption = ref(0) as Ref<number>;
-
 const selectedSorting = ref("Avg rating ascending");
 
 watch(selectedSorting, () => {
@@ -53,63 +36,6 @@ watch(selectedSorting, () => {
 
 <template>
   <div class="flex flex-col gap-4">
-    <UDivider class="my-8" label="FILTER" />
-    <div>
-      <span>Filter by group</span>
-      <div class="flex flex-row gap-1">
-        <UInputMenu
-          v-model="selectedGroupOption"
-          trailing-icon="i-heroicons-chevron-up-down-20-solid"
-          class="w-full"
-          placeholder="Select a group"
-          value-attribute="id"
-          option-attribute="name"
-          :options="groupOptions"
-        />
-        <UButton
-          icon="i-heroicons-x-mark"
-          variant="ghost"
-          @click="selectedGroupOption = undefined"
-        />
-      </div>
-    </div>
-    <div>
-      <span>Filter by author</span>
-      <div class="flex flex-row gap-1">
-        <UInputMenu
-          v-model="selectedMemberOption"
-          trailing-icon="i-heroicons-chevron-up-down-20-solid"
-          class="w-full"
-          placeholder="Created by"
-          value-attribute="id"
-          option-attribute="name"
-          :options="memberOptions"
-        />
-        <UButton
-          icon="i-heroicons-x-mark"
-          variant="ghost"
-          @click="selectedMemberOption = undefined"
-        />
-      </div>
-    </div>
-    <div>
-      <span>Filter by rating</span>
-      <div class="flex flex-row gap-1">
-        <div
-          class="container border-0 rounded-md ring-1 ring-inset shadow-sm py-1 ring-gray-700"
-        >
-          <FoodEmojiRatingBar
-            v-model="selectedRatingOption"
-            emoji-size="1.2em"
-          />
-        </div>
-        <UButton
-          icon="i-heroicons-x-mark"
-          variant="ghost"
-          @click="selectedRatingOption = 0"
-        />
-      </div>
-    </div>
     <UDivider class="my-8" label="SORTING" />
     <USelect
       v-model="selectedSorting"

composables/useUser.ts

@@ -14,7 +14,7 @@ export type useUserReturn = {
   login(request: LoginRequest): Promise<void>;
   register(request: RegisterRequest): Promise<void>;
   logout(): Promise<void>;
-  confirmRegistration(request: ConfirmRegistrationRequest): Promise<void>;
+  confirmRegistration(token: string): Promise<void>;
   updateMe(request: PutMeRequest): Promise<User>;
 };
 export function useUser(): useUserReturn {
@@ -120,11 +120,11 @@ export function useUser(): useUserReturn {
     }
   }
 
-  async function confirmRegistration(request: ConfirmRegistrationRequest) {
+  async function confirmRegistration(token: string) {
     try {
       $apiFetcher("/authentication/confirm-registration", {
         method: "POST",
-        body: request,
+        body: { token: token },
         ...fetchOptions.value,
       });
       toast.add({

nuxt.config.ts

@@ -1,5 +1,20 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  app: {
+    head: {
+      title: "Rate Manu",
+      meta: [
+        {
+          name: "description",
+          content: "Rate Manu",
+        },
+      ],
+      htmlAttrs: {
+        lang: "en",
+      },
+      link: [{ rel: "icon", type: "image/png", href: "favicon.ico" }],
+    },
+  },
   routeRules: {
     "/": { swr: false },
   },
@@ -16,7 +31,35 @@ export default defineNuxtConfig({
     "nuxt-twemoji",
     "@pinia/nuxt",
     "pinia-plugin-persistedstate/nuxt",
+    "@vite-pwa/nuxt",
   ],
+
+  pwa: {
+    manifest: {
+      name: "Pizzeria La Fattoria - Alte Schmiede",
+      short_name: "PizzeriaLaFattoria",
+      theme_color: "#4d7c0f",
+      icons: [
+        {
+          src: "android-chrome-192x192.png",
+          sizes: "192x192",
+          type: "image/png",
+        },
+        {
+          src: "android-chrome-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+        },
+        {
+          src: "android-chrome-512x512.png",
+          sizes: "512x512",
+          type: "image/png",
+          purpose: "any maskable",
+        },
+      ],
+    },
+  },
+
   compatibilityDate: "2024-04-03",
   devtools: { enabled: true },
   typescript: {

package.json

@@ -24,6 +24,7 @@
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
+    "@vite-pwa/nuxt": "^0.10.5",
     "@vueuse/core": "^11.1.0",
     "nuxt": "^3.13.2",
     "nuxt-twemoji": "^3.6.2",
@@ -39,7 +40,7 @@
     "@openapitools/openapi-generator-cli": "^2.14.0",
     "@types/js-cookie": "^3.0.6",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-vue": "^9.29.0",
+    "eslint-plugin-vue": "^9.28.0",
     "ofetch": "^1.4.1",
     "prettier": "^3.3.3",
     "typescript": "^5.6.3",

pages/confirm-registration.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
+
 const route = useRoute();
 
-const token = <string>route.query.token;
+const token = route.query.token as string;
 
 const { confirmRegistration } = useUser();
 
-const success = confirmRegistration({ token: token });
+const success = confirmRegistration(token);
 </script>
 
 <template>
-  <div>
-    {{ success }}
-  </div>
+  <div>{{ success }}</div>
 </template>