feat:#60 added more localization

frontend/src/components/RenameModules.vue

@@ -3,9 +3,12 @@ import moduleStore from "../store/moduleStore.ts";
 import { createIndividualFeed } from "../api/createFeed.ts";
 import router from "../router";
 import tokenStore from "../store/tokenStore.ts";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
 import { onlyWhitespace } from "../helpers/strings.ts";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: 'global' })
+
 
 const tableData = ref(
   moduleStore().modules.map((module) => {
@@ -16,10 +19,10 @@ const tableData = ref(
   }),
 );
 
-const columns = ref([
-  { field: "Course", header: "Course" },
-  { field: "Module", header: "Module" },
-  { field: "Reminder", header: "Reminder" },
+const columns = computed(() => [
+  { field: "Course", header: t('moduleInformation.course') },
+  { field: "Module", header: t('moduleInformation.module') },
+  { field: "Reminder", header: t('renameModules.reminder') },
 ]);
 
 async function finalStep() {
@@ -32,7 +35,7 @@ async function finalStep() {
 <template>
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3>Configure your selected Modules to your liking.</h3>
+      <h3>{{$t('renameModules.subTitle')}}</h3>
       <ModuleTemplateDialog />
     </div>
     <div class="card flex align-items-center justify-content-center m-2">
@@ -44,7 +47,7 @@ async function finalStep() {
       >
         <template #header>
           <div class="flex align-items-center justify-content-end">
-            Enable all notifications:
+            {{$t('renameModules.enableAllNotifications')}}
             <InputSwitch
               class="mx-4"
               :model-value="
@@ -99,10 +102,6 @@ async function finalStep() {
               />
             </template>
             <template v-else-if="field === 'Reminder'">
-              <!--<InputSwitch 
-                v-model="data.Module.reminder" 
-                class="align-self-center"
-              />-->
               <Button
                 :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
                 :severity="data.Module.reminder ? 'warning' : 'secondary'"
@@ -121,7 +120,7 @@ async function finalStep() {
     </div>
 
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="finalStep()">Next Step</Button>
+      <Button @click="finalStep()">{{$t('renameModules.nextStep')}}</Button>
     </div>
   </div>
 </template>