From 7ca9e6bd12f43736551c9d92d04ee8452b94d1f1 Mon Sep 17 00:00:00 2001
From: Krzysztof Karbownik <77581765+codeofcarbon@users.noreply.github.com>
Date: Sun, 18 Feb 2024 14:11:08 +0100
Subject: [PATCH] minor templates refactor

---
 frontend/src/assets/colors.scss               |  9 +++-
 .../cards/components/CardDetailsComponent.vue | 43 +++++++------------
 .../cards/components/CardItemScroller.vue     | 40 ++++++++---------
 .../cards/composables/useCardsService.ts      |  6 +--
 .../feature/cards/pages/CardDetailsPage.vue   |  2 +-
 .../feature/cards/pages/CardOverviewPage.vue  | 26 +++++------
 .../category/components/CategoryCard.vue      | 37 +++++++---------
 .../category/components/CategoryIterator.vue  | 30 ++++---------
 .../category/pages/CategoryOverviewPage.vue   | 16 +++----
 .../registration/pages/RegistrationPage.vue   | 18 ++------
 frontend/src/layouts/SideNavigation.vue       | 12 +++---
 frontend/src/shared/composables/useApi.ts     | 13 +++---
 frontend/src/shared/pages/ErrorNotFound.vue   | 12 +++---
 frontend/src/shared/pages/Welcome.vue         | 15 +++----
 14 files changed, 116 insertions(+), 163 deletions(-)

diff --git a/frontend/src/assets/colors.scss b/frontend/src/assets/colors.scss
index 6482155..06a8b5d 100644
--- a/frontend/src/assets/colors.scss
+++ b/frontend/src/assets/colors.scss
@@ -1,5 +1,12 @@
-$--green-success: #1b8751;
 $--red-error: #e35448;
+$--red-wrong-answer: #ff0000ff;
+$--red-wrong-answer-background: #ff00007f;
+
+$--green-success: #1b8751;
+$--green-correct-answer: #008000ff;
+$--green-correct-answer-background: #00ff00cc;
+$--green-selected-answer-background: #0080007f;
+
 $--yellow-warning: #f6bc32;
 $--white: #ffffff;
 $--dark: #00000025;
diff --git a/frontend/src/feature/cards/components/CardDetailsComponent.vue b/frontend/src/feature/cards/components/CardDetailsComponent.vue
index 52ea068..b6817c9 100644
--- a/frontend/src/feature/cards/components/CardDetailsComponent.vue
+++ b/frontend/src/feature/cards/components/CardDetailsComponent.vue
@@ -7,8 +7,7 @@
           <v-card-subtitle class="pa-2 ma-2 d-flex justify-space-between">
             <v-card-text v-text="'Tags: '"/>
             <v-list class="ma-0 pa-0 d-flex flex-row flex-wrap">
-              <v-list-item v-for="tag in card.tags" :key="tag"
-                           :title="tag"/>
+              <v-list-item v-for="tag in card.tags" :key="tag" :title="tag"/>
             </v-list>
           </v-card-subtitle>
 
@@ -33,10 +32,8 @@
 
           <v-container>
             <v-row class="pa-0 d-flex w-100 justify-space-between align-center">
-              <v-btn color="green" :disabled="!selected && !providedAnswer"
-                     @click="checkCorrectAnswer()" variant="text"
-                     border>
-                <v-icon icon="mdi-check" size="large" start/>
+              <v-btn @click="highlightCorrectAnswers()" :disabled="!selected && !providedAnswer"
+                     prepend-icon="mdi-check-circle" color="green" variant="text">
                 Check Answer
               </v-btn>
               <v-card-subtitle v-show="answerShown" v-text="showCorrectAnswer()"/>
@@ -74,12 +71,11 @@ const answerShown = ref(false);
 const selected = ref([] as string[]);
 const providedAnswer = ref('');
 
-const parseOption = (index: number, option: string): string => {
-  return `${String.fromCharCode(65 + index)}. ${option}`;
-};
-
-const isCorrect = (option: string) => {
-  return getCorrectAnswer()?.includes(option);
+const parseOption = (index: number, option: string) => `${String.fromCharCode(65 + index)}. ${option}`;
+const isCorrect = (option: string) => getCorrectAnswer()?.includes(option);
+const highlightCorrectAnswers = () => answerShown.value = !answerShown.value;
+const showCorrectAnswer = () => {
+  return `Correct answer${props.card.type === CardType.MULTIPLE_CHOICE ? 's' : ''}: ${getCorrectAnswer()}`;
 };
 
 const toggleOption = (option: string) => {
@@ -95,10 +91,6 @@ const toggleOption = (option: string) => {
   }
 };
 
-const checkCorrectAnswer = () => {
-  answerShown.value = !answerShown.value;
-};
-
 const getCorrectAnswer = () => {
   const card = props.card;
   switch (card.type) {
@@ -110,29 +102,26 @@ const getCorrectAnswer = () => {
       return card.correctOptions.map(i => card.options[Number(i)]).join(", ");
   }
 };
-
-const showCorrectAnswer = () => {
-  const correctAnswer = getCorrectAnswer();
-  return `Correct answer${props.card.type === CardType.MULTIPLE_CHOICE ? 's' : ''}: ${correctAnswer}`;
-};
 </script>
 
 <style scoped lang="scss">
+@import "@/assets/colors";
+
 .correct {
-  border: 1px solid green;
+  border: 1px solid $--green-correct-answer;
   border-radius: .25rem;
-  background-color: rgb(0, 255, 0, .8);
+  background-color: $--green-correct-answer-background;
 }
 
 .selected {
-  border: 1px solid green;
+  border: 1px solid $--green-correct-answer;
   border-radius: .25rem;
-  background-color: rgb(0, 128, 0, .5);
+  background-color: $--green-selected-answer-background;
 }
 
 .error {
-  border: 1px solid red;
+  border: 1px solid $--red-wrong-answer;
   border-radius: .25rem;
-  background-color: rgb(255, 0, 0, .5);
+  background-color: $--red-wrong-answer-background;
 }
 </style>
diff --git a/frontend/src/feature/cards/components/CardItemScroller.vue b/frontend/src/feature/cards/components/CardItemScroller.vue
index 245f5fd..6f4219a 100644
--- a/frontend/src/feature/cards/components/CardItemScroller.vue
+++ b/frontend/src/feature/cards/components/CardItemScroller.vue
@@ -1,17 +1,16 @@
 <template>
-  <v-infinite-scroll :max-height="'60vh'"
-                     :items="items"
+  <v-infinite-scroll :items="items"
                      :onLoad="fetchCardsPage"
+                     :max-height="'60vh'"
                      empty-text="No more cards">
     <template v-for="(item, index) in items" :key="item">
       <div
-        :class="['pa-2', 'd-flex', 'justify-space-between', 'align-center', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
-        <v-avatar color="primary" size="large" class="mr-5">{{ index + 1 }}</v-avatar>
+        :class="['pa-2', 'd-flex', 'justify-space-between', 'align-center', {'bg-grey-lighten-2': index % 2 === 0}]">
+        <v-avatar v-text="`${index + 1}`" color="primary" size="large" class="mr-5"/>
         {{ item.title }}
-        <v-spacer></v-spacer>
-        <v-avatar color="primary" size="large" class="mr-10">{{ item.type.toUpperCase() }}</v-avatar>
-        <open-mdi-button tooltip-text="Open Card Details"
-                         :clickHandler="() => openCard(item.id)"/>
+        <v-spacer/>
+        <v-avatar v-text="item.type.toUpperCase()" color="primary" size="large" class="mr-10"/>
+        <open-mdi-button :clickHandler="() => openCard(item.id)" tooltip-text="Open Card Details"/>
       </div>
     </template>
   </v-infinite-scroll>
@@ -28,10 +27,21 @@ const props = defineProps<({
   categoryId: string,
   titleFilter: string,
 })>();
+
 const items = ref([] as CardItem[]);
 const router = useRouter();
 const pagePointer = ref({current: 0, isLast: false});
 
+watch(() => props.titleFilter, async (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    pagePointer.value = {current: 0, isLast: false}; // reset the page pointer
+    items.value = []; // clear the items array
+    await fetchCardsPage({done: () => console.log("Manual reload after filter change")});
+  }
+});
+
+const openCard = (id: string) => router.push(`/card/${props.categoryId}/${id}`);
+
 const fetchCardsPage = async ({done}: { done: Function }) => {
   if (pagePointer.value.isLast) {
     done('empty');
@@ -47,17 +57,5 @@ const fetchCardsPage = async ({done}: { done: Function }) => {
     items.value.push(cardItem);
   }
   done('ok');
-}
-
-watch(() => props.titleFilter, async (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    pagePointer.value = {current: 0, isLast: false}; // reset the page pointer
-    items.value = []; // clear the items array
-    await fetchCardsPage({done: () => console.log("Manual reload after filter change")});
-  }
-});
-
-const openCard = (id: string) => {
-  router.push(`/card/${props.categoryId}/${id}`);
-}
+};
 </script>
diff --git a/frontend/src/feature/cards/composables/useCardsService.ts b/frontend/src/feature/cards/composables/useCardsService.ts
index 1e21eaa..cfc7184 100644
--- a/frontend/src/feature/cards/composables/useCardsService.ts
+++ b/frontend/src/feature/cards/composables/useCardsService.ts
@@ -8,15 +8,15 @@ const useCardsService = () => {
   const getCards = async (categoryId: string, titleFilter: string, page: number) => {
     return await useApi().get<CardPage>(ENDPOINT,
       {categoryId: categoryId, page: String(page), titleFilter: titleFilter});
-  }
+  };
 
   const getCardById = async (cardId: string, categoryId: string) => {
     return await useApi().get<Card>(`${ENDPOINT}/${cardId}`, {categoryId: categoryId});
-  }
+  };
 
   const getCardCount = async (categoryId: string) => {
     return await useApi().get<number>(`${ENDPOINT}/count`, {categoryId: categoryId});
-  }
+  };
 
   return {
     getCards,
diff --git a/frontend/src/feature/cards/pages/CardDetailsPage.vue b/frontend/src/feature/cards/pages/CardDetailsPage.vue
index 3d68181..5ceb7aa 100644
--- a/frontend/src/feature/cards/pages/CardDetailsPage.vue
+++ b/frontend/src/feature/cards/pages/CardDetailsPage.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <card-details-component :card="card"></card-details-component>
+    <card-details-component :card="card"/>
   </v-container>
 </template>
 
diff --git a/frontend/src/feature/cards/pages/CardOverviewPage.vue b/frontend/src/feature/cards/pages/CardOverviewPage.vue
index ab04894..d7dec7e 100644
--- a/frontend/src/feature/cards/pages/CardOverviewPage.vue
+++ b/frontend/src/feature/cards/pages/CardOverviewPage.vue
@@ -1,18 +1,12 @@
 <template>
   <v-container>
-    <v-card class="pa-2 ma-2 mx-auto d-flex flex-column justify-space-between"
-            fill-height
-            color="containerBackground">
-      <v-card-title class="text-center text-h4">
-        Cards in {{ categoryName }}
-      </v-card-title>
+    <v-card class="pa-2 ma-2 mx-auto d-flex flex-column justify-space-between" color="containerBackground" fill-height>
+      <v-card-title v-text="`Cards in ${categoryName}`" class="text-center text-h4"/>
       <v-form @submit.prevent class="d-flex justify-space-between align-center">
-        <v-text-field label="Filter on title"
-                      prepend-inner-icon="mdi-magnify"
-                      v-model="filter.input">
-        </v-text-field>
-        <submit-mdi-button :disabled="!filter.input"
-                           :clickHandler="filterOnTitle"/>
+        <v-text-field v-model="filter.input"
+                      label="Filter on title"
+                      prepend-inner-icon="mdi-magnify"/>
+        <submit-mdi-button :clickHandler="filterOnTitle" :disabled="!filter.input"/>
       </v-form>
       <card-item-scroller :categoryId="categoryId" :titleFilter="filter.title"/>
     </v-card>
@@ -28,17 +22,17 @@ import CardItemScroller from "@/feature/cards/components/CardItemScroller.vue";
 const props = defineProps<({
   categoryId: string
 })>();
+
 const categoryName = ref("");
 const filter = ref({
   input: "",
   title: "", // more to come
 });
-const filterOnTitle = () => {
-  filter.value.title = filter.value.input;
-  console.log("Filtering on title: " + filter.value.title);
-}
+
 onMounted(async () => {
   categoryName.value = (await useCategoriesService().getCategoryById(props.categoryId)).name;
 });
+
+const filterOnTitle = () => filter.value.title = filter.value.input;
 </script>
 
diff --git a/frontend/src/feature/category/components/CategoryCard.vue b/frontend/src/feature/category/components/CategoryCard.vue
index 2aa869c..2d721a6 100644
--- a/frontend/src/feature/category/components/CategoryCard.vue
+++ b/frontend/src/feature/category/components/CategoryCard.vue
@@ -1,7 +1,7 @@
 <template>
-  <v-card color="secondary" >
+  <v-card color="secondary">
     <v-card-title class="d-flex justify-space-between align-center">
-      <h4>{{ category.name }}</h4>
+      <h4 v-text="category.name"/>
       <div class="mr-n6">
         <!--  ms-n6  = negative margin 3 on sides - also ml, mr, ma, mt, mb -->
         <open-mdi-button tooltip-text="Open Category"
@@ -14,30 +14,24 @@
                            :clickHandler="deleteCategory"/>
       </div>
     </v-card-title>
-
-    <v-card-text>
-      {{ category.description || "No description given" }}
-    </v-card-text>
-
+    <v-card-text v-text="category.description || 'No description given'"/>
     <div class="px-4">
       <v-switch
         :model-value="expanded"
         :label="`Show details`"
-        :color="`${expanded ? '#43A047' : '#EEEEEE'}`"
+        :color="toggleColor"
         density="compact"
         inset
         @click="() => emit('update:expanded', !expanded)"
-      ></v-switch>
+      />
     </div>
-
-    <v-divider></v-divider>
-
+    <v-divider/>
     <v-expand-transition>
       <div v-if="expanded && !editRequested">
         <v-list density="compact" :lines="false">
-          <v-list-item :title="`🔥 Your access: ${getAccess(category)}`"></v-list-item>
-          <v-list-item :title="`🍔 #Cards in Category: ${category.numberOfCards}`"></v-list-item>
-          <v-list-item :title="`🧲 Id: ${category.id}`"></v-list-item>
+          <v-list-item :title="`🔥 Your access: ${getAccess(category)}`"/>
+          <v-list-item :title="`🍔 #Cards in Category: ${category.numberOfCards}`"/>
+          <v-list-item :title="`🧲 Id: ${category.id}`"/>
         </v-list>
       </div>
       <v-container v-if="editRequested">
@@ -56,7 +50,7 @@
 import {Category} from "@/feature/category/model/category";
 import {getAccess, getDeleteUri, getPutUri} from "@/feature/category/composables/useCategory";
 import {useRouter} from "vue-router";
-import {ref} from "vue";
+import {computed, ref} from "vue";
 import categoryService from "@/feature/category/composables/useCategoriesService";
 import OpenMdiButton from "@/shared/components/OpenMdiButton.vue";
 import DeleteMdiButton from "@/shared/components/DeleteMdiButton.vue";
@@ -67,17 +61,22 @@ const props = defineProps<({
   category: Category,
   expanded: boolean
 })>();
+
 const emit = defineEmits<{
   'update:expanded': [val: boolean]
   'reload': [val: boolean]
 }>();
 
+const router = useRouter();
 const putUri = getPutUri(props.category);
 const deleteUri = getDeleteUri(props.category);
 const editRequested = ref(false);
 const updateRequest = ref({name: "", description: ""});
 
-const router = useRouter();
+const toggleColor = computed(() => props.expanded ? '#43a047' : '#eeeeee');
+
+const resetRequests = () => editRequested.value = false;
+
 const openCategory = () => {
   resetRequests();
   router.push(`/category/${props.category.id}`);
@@ -98,8 +97,4 @@ const deleteCategory = async () => {
   await categoryService().deleteCategory(props.category.id);
   emit('reload', true);
 };
-
-const resetRequests = () => {
-  editRequested.value = false;
-}
 </script>
diff --git a/frontend/src/feature/category/components/CategoryIterator.vue b/frontend/src/feature/category/components/CategoryIterator.vue
index 1b9267b..87c25b9 100644
--- a/frontend/src/feature/category/components/CategoryIterator.vue
+++ b/frontend/src/feature/category/components/CategoryIterator.vue
@@ -1,37 +1,25 @@
 <template>
-  <v-data-iterator
-    :items="categories"
-    item-value="category.name"
-    items-per-page="6"
-  >
+  <v-data-iterator :items="categories" item-value="category.name" items-per-page="6">
     <template v-slot:header>
       <v-row>
         <v-col cols="12" sm="12" md="11">
           <v-form v-if="addRequested" @submit.prevent class="d-flex align-center">
-            <v-text-field v-model="newCategory.name" label="Category name" class="v-col-sm-4">
-            </v-text-field>
-            <v-text-field v-model="newCategory.description" label="Description (optional)" class="v-col-sm-6">
-            </v-text-field>
-            <submit-mdi-button :disabled="!newCategory.name"
-                               :clickHandler="postNewCategory"/>
+            <v-text-field v-model="newCategory.name" label="Category name" class="v-col-sm-4"/>
+            <v-text-field v-model="newCategory.description" label="Description (optional)" class="v-col-sm-6"/>
+            <submit-mdi-button :disabled="!newCategory.name" :clickHandler="postNewCategory"/>
           </v-form>
         </v-col>
         <v-col cols="12" sm="12" md="1">
-            <add-mdi-button :click-handler="addCategory"
-                            tooltipText="Create new category"/>
+          <add-mdi-button :click-handler="addCategory" tooltipText="Create new category"/>
         </v-col>
       </v-row>
     </template>
     <template v-slot:default="{items}">
       <v-row>
-        <v-col
-          v-for="item in items" :key="item.raw.category.name"
-          cols="12" sm="12" md="6"
-        >
+        <v-col v-for="item in items" :key="item.raw.category.name" cols="12" sm="12" md="6">
           <category-card :category="item.raw.category"
                          v-model:expanded="item.raw.expanded"
-                         @reload="emit('reload', true)"
-          />
+                         @reload="emit('reload', true)"/>
         </v-col>
       </v-row>
     </template>
@@ -49,15 +37,16 @@ import useCategoriesService from "@/feature/category/composables/useCategoriesSe
 defineProps<({
   categories: { category: Category, expanded: boolean }[],
 })>();
+
 const emit = defineEmits<{
   'reload': [val: boolean]
 }>();
 
+const addRequested = ref(false);
 const newCategory = ref(
   {name: "", description: "", actions: []}
 );
 
-const addRequested = ref(false);
 const addCategory = () => {
   newCategory.value = {name: "", description: "", actions: []};
   addRequested.value = true;
@@ -68,5 +57,4 @@ const postNewCategory = async () => {
   await useCategoriesService().postNewCategory(newCategory.value);
   emit('reload', true);
 };
-
 </script>
diff --git a/frontend/src/feature/category/pages/CategoryOverviewPage.vue b/frontend/src/feature/category/pages/CategoryOverviewPage.vue
index 9da6463..06d9222 100644
--- a/frontend/src/feature/category/pages/CategoryOverviewPage.vue
+++ b/frontend/src/feature/category/pages/CategoryOverviewPage.vue
@@ -1,19 +1,14 @@
 <template>
   <v-container>
-    <v-card class="pa-2 ma-2 mx-auto d-flex flex-column justify-space-between"
-            fill-height
-            color="containerBackground">
-      <v-card-title class="text-center text-h4">
-        Your accessible categories
-      </v-card-title>
+    <v-card class="pa-2 ma-2 mx-auto d-flex flex-column justify-space-between" fill-height color="containerBackground">
+      <v-card-title v-text="'Your accessible categories'" class="text-center text-h4"/>
       <category-iterator :categories="items" @reload="fetchCategories"/>
     </v-card>
   </v-container>
 </template>
 
-
 <script setup lang="ts">
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
 import {Category} from "@/feature/category/model/category";
 import CategoryIterator from "@/feature/category/components/CategoryIterator.vue";
 import useCategoriesService from "@/feature/category/composables/useCategoriesService";
@@ -23,6 +18,8 @@ const items = ref([] as
   { category: Category, expanded: boolean }[]
 );
 
+onMounted(async () => fetchCategories());
+
 const fetchCategories = async () => {
   items.value = [];
   const categories = await useCategoriesService().getCategories();
@@ -30,6 +27,5 @@ const fetchCategories = async () => {
     items.value.push({category: category, expanded: false});
     category.numberOfCards = await useCardsService().getCardCount(category.id);
   }
-}
-fetchCategories();
+};
 </script>
diff --git a/frontend/src/feature/registration/pages/RegistrationPage.vue b/frontend/src/feature/registration/pages/RegistrationPage.vue
index c706b59..acd0966 100644
--- a/frontend/src/feature/registration/pages/RegistrationPage.vue
+++ b/frontend/src/feature/registration/pages/RegistrationPage.vue
@@ -1,20 +1,14 @@
 <template>
   <v-container>
-    <v-card class="pa-2 ma-2 mx-auto d-flex flex-column justify-space-between"
-            fill-height
-            color="containerBackground">
-      <v-card-title class="text-center text-h4">
-        User Registration
-      </v-card-title>
+    <v-card class="pa-2 ma-2 mx-auto d-flex flex-column justify-space-between" fill-height color="containerBackground">
+      <v-card-title v-text="'User Registration'" class="text-center text-h4"/>
       <v-container>
         <v-row>
           <v-col cols="12" sm="6" md="4"/>
           <v-col cols="12" sm="6" md="4" class="align-content-center">
             <v-text-field v-model="email" label="Email"/>
             <v-text-field v-model="password" label="Password" type="password"/>
-            <v-btn color="black" border @click="postNewUser" variant="text">
-              Register new user
-            </v-btn>
+            <v-btn v-text="'Register new user'" color="black" border @click="postNewUser" variant="text"/>
           </v-col>
         </v-row>
       </v-container>
@@ -29,9 +23,5 @@ import useRegistrationService from "@/feature/registration/composables/useRegist
 const email = ref('');
 const password = ref('');
 
-const postNewUser = () => {
-  useRegistrationService().postNewUser(email.value, password.value);
-}
+const postNewUser = () => useRegistrationService().postNewUser(email.value, password.value);
 </script>
-
-<style scoped lang="scss"/>
diff --git a/frontend/src/layouts/SideNavigation.vue b/frontend/src/layouts/SideNavigation.vue
index 97ced26..33f2399 100644
--- a/frontend/src/layouts/SideNavigation.vue
+++ b/frontend/src/layouts/SideNavigation.vue
@@ -1,10 +1,10 @@
 <template>
   <v-navigation-drawer color="primary">
-    <v-list-item v-html="`<strong>Flashcards</strong>`"></v-list-item>
-    <v-divider></v-divider>
-    <v-list-item to="/categories" title="Your card categories"></v-list-item>
-    <v-list-item to="/register" title="User registration"></v-list-item>
-    <v-divider></v-divider>
-    <v-list-item to="/" title="Welcome"></v-list-item>
+    <v-list-item v-html="`<strong>Flashcards</strong>`"/>
+    <v-divider/>
+    <v-list-item to="/categories" title="Your card categories"/>
+    <v-list-item to="/register" title="User registration"/>
+    <v-divider/>
+    <v-list-item to="/" title="Welcome"/>
   </v-navigation-drawer>
 </template>
diff --git a/frontend/src/shared/composables/useApi.ts b/frontend/src/shared/composables/useApi.ts
index 5a21d4b..16bf68e 100644
--- a/frontend/src/shared/composables/useApi.ts
+++ b/frontend/src/shared/composables/useApi.ts
@@ -16,7 +16,8 @@ const useApi = () => {
       try {
         const response = await apiClient.post(url, requestData);
         if (response.status !== 200 && response.status !== 201) {
-          useErrorService().handleAndNotify(`Error status code ${response.status}!`, errorMessage || 'Failed to post');
+          useErrorService().handleAndNotify(
+            `Error status code ${response.status}!`, errorMessage || 'Failed to post');
         } else {
           useToastService().showSuccess(successMessage || `Successfully posted to ${url}!`)
         }
@@ -32,8 +33,8 @@ const useApi = () => {
       try {
         const response = await apiClient.get(urlWithParams);
         if (response.status !== 200) {
-          useErrorService().handleAndNotify(`Error status code ${response.status}!`,
-            errorMessage || `Failed to load ${urlWithParams}`);
+          useErrorService().handleAndNotify(
+            `Error status code ${response.status}!`, errorMessage || `Failed to load ${urlWithParams}`);
           return {} as R;
         } else {
           return response.data;
@@ -49,7 +50,8 @@ const useApi = () => {
       try {
         const response = await apiClient.put(url, requestData);
         if (response.status != 200) {
-          useErrorService().handleAndNotify(`Error status code ${response.status}!`, errorMessage || 'Failed to update');
+          useErrorService().handleAndNotify(
+            `Error status code ${response.status}!`, errorMessage || 'Failed to update');
         } else {
           useToastService().showSuccess(successMessage || `Successfully updated ${url}!`)
         }
@@ -63,7 +65,8 @@ const useApi = () => {
       try {
         const response = await apiClient.delete(url);
         if (response.status != 200) {
-          useErrorService().handleAndNotify(`Error status code ${response.status}!`, errorMessage || 'Failed to update');
+          useErrorService().handleAndNotify(
+            `Error status code ${response.status}!`, errorMessage || 'Failed to update');
         } else {
           useToastService().showSuccess(successMessage || `Successfully deleted ${url}!`)
         }
diff --git a/frontend/src/shared/pages/ErrorNotFound.vue b/frontend/src/shared/pages/ErrorNotFound.vue
index ba23a80..ee8e586 100644
--- a/frontend/src/shared/pages/ErrorNotFound.vue
+++ b/frontend/src/shared/pages/ErrorNotFound.vue
@@ -1,13 +1,11 @@
 <template>
-  <div
-    class="fullscreen text-center q-pa-md flex flex-center"
-  >
+  <div class="fullscreen text-center q-pa-md flex flex-center">
     <div>
-      <div style="font-size: 30vh">404</div>
-      <div class="text-h2" style="opacity: 0.5">Oops. Nothing here...</div>
-      <v-btn class="ma-10" to="/">Go Home</v-btn>
+      <div v-text="'404'" style="font-size: 30vh"/>
+      <div v-text="'Oops. Nothing here...'" class="text-h2" style="opacity: 0.5"/>
+      <v-btn v-text="'Go Home'" class="ma-10" to="/"/>
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts"/>
diff --git a/frontend/src/shared/pages/Welcome.vue b/frontend/src/shared/pages/Welcome.vue
index 651ec6f..0bf51bf 100644
--- a/frontend/src/shared/pages/Welcome.vue
+++ b/frontend/src/shared/pages/Welcome.vue
@@ -1,17 +1,12 @@
 <template>
   <v-container>
     <v-responsive class="align-center text-center fill-height">
-      <v-img height="300" src="@/assets/logo.svg" />
-
-      <div class="text-body-2 font-weight-bold mb-n1">Welcome to</div>
-
-      <h1 class="text-h2 font-weight-bold">Flashcards</h1>
-
-      <div class="py-14" />
+      <v-img height="300" src="@/assets/logo.svg"/>
+      <div v-text="'Welcome to'" class="text-body-2 font-weight-bold mb-n1"/>
+      <h1 v-text="'Flashcards'" class="text-h2 font-weight-bold"/>
+      <div class="py-14"/>
     </v-responsive>
   </v-container>
-
 </template>
 
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup/>