src/components/Header.vue

@@ -2,7 +2,7 @@
   <header class="flex flex-row h-16 min-h-16 justify-between p-3 md:px-5 bg-white shadow-sm">
     <RouterLink to="/" class="flex flex-row gap-2 align-bottom w-fit h-full">
       <img src="/Logo.png" alt="LOGO" class="h-full w-auto" />
-      <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">Mitgliederverwaltung</h1>
+      <h1 v-if="false" class="font-bold text-3xl w-fit whitespace-nowrap">FF Admin</h1>
     </RouterLink>
     <div class="flex flex-row gap-2 items-center">
       <div v-if="authCheck" class="hidden md:flex flex-row gap-2 h-full align-middle">

src/components/admin/club/member/MemberCommunicationEditModal.vue

@@ -136,7 +136,7 @@ export default defineComponent({
         preferred: formData.preferred.checked,
         mobile: formData.mobile?.value,
         email: formData.email?.value,
-        postalCode: formData.postalCode.value,
+        postalCode: formData.postalCode?.value,
         city: formData.city?.value,
         street: formData.street?.value,
         streetNumber: formData.streetNumber?.value,

src/components/admin/user/user/InviteUserModal.vue

@@ -80,15 +80,13 @@ export default defineComponent({
       this.createInvite(createInvite)
         .then((result) => {
           this.status = { status: "success" };
+          setTimeout(() => {
+            this.closeModal();
+          }, 2000);
         })
         .catch((err) => {
           this.status = { status: "failed", reason: err.response.data };
         })
-        .finally(() => {
-          setTimeout(() => {
-            this.closeModal();
-          }, 2000);
-        });
     },
   },
 });

src/components/admin/user/user/UserListItem.vue

@@ -3,7 +3,7 @@
     <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
       <p>
         {{ user.firstname }} {{ user.lastname }} <small v-if="user.permissions_total.admin">(Admin)</small
-        ><small v-if="isOwner"> (Owner)</small>
+        ><small v-if="user.isOwner"> (Owner)</small>
       </p>
       <div class="flex flex-row">
         <RouterLink
@@ -65,7 +65,7 @@ export default defineComponent({
     user: { type: Object as PropType<UserViewModel>, default: {} },
   },
   computed: {
-    ...mapState(useAbilityStore, ["can", "isOwner"]),
+    ...mapState(useAbilityStore, ["can"]),
   },
   methods: {
     ...mapActions(useModalStore, ["openModal"]),

src/views/Login.vue

@@ -3,7 +3,7 @@
     <div class="max-w-md w-full space-y-8 pb-20">
       <div class="flex flex-col items-center gap-4">
         <img src="/Logo.png" alt="LOGO" class="h-36" />
-        <h2 class="text-center text-4xl font-extrabold text-gray-900">Mitgliederverwaltung</h2>
+        <h2 class="text-center text-4xl font-extrabold text-gray-900">FF Admin</h2>
       </div>
 
       <form class="flex flex-col gap-2" @submit.prevent="login">

src/views/account/LoginData.vue

@@ -10,16 +10,7 @@
         <div class="flex flex-col gap-2">
           <img :src="image" alt="totp" class="w-56 h-56 self-center" />
 
-          <div class="flex relative">
+          <TextCopy :copyText="otp" />
-            <input type="text" :value="otp" />
-            <ClipboardIcon
-              class="w-5 h-5 p-2 box-content absolute right-1 top-1/2 -translate-y-1/2 bg-white cursor-pointer"
-              @click="copyToClipboard"
-            />
-            <div v-if="copySuccess" class="absolute w-5 h-5 right-3 top-[10px]">
-              <SuccessCheckmark />
-            </div>
-          </div>
         </div>
         <form class="flex flex-col gap-2" @submit.prevent="verify">
           <div class="-space-y-px">
@@ -44,13 +35,13 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { defineComponent } from "vue";
 import { mapActions, mapState } from "pinia";
 import MainTemplate from "@/templates/Main.vue";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-import { ClipboardIcon } from "@heroicons/vue/24/outline";
+import TextCopy from "@/components/TextCopy.vue";
 </script>
 
 <script lang="ts">
@@ -62,8 +53,6 @@ export default defineComponent({
       otp: undefined as undefined | string,
       verifyStatus: undefined as undefined | "loading" | "success" | "failed",
       verifyError: "" as string,
-      copySuccess: false,
-      timeoutCopy: undefined as any,
     };
   },
   mounted() {
@@ -100,13 +89,6 @@ export default defineComponent({
           }, 2000);
         });
     },
-    copyToClipboard() {
-      navigator.clipboard.writeText(this.otp ?? "");
-      this.copySuccess = true;
-      this.timeoutCopy = setTimeout(() => {
-        this.copySuccess = false;
-      }, 2000);
-    },
   },
 });
 </script>

src/views/account/View.vue

@@ -1,7 +1,7 @@
 <template>
   <SidebarLayout>
     <template #sidebar>
-      <SidebarTemplate mainTitle="Mein Account" topTitle="Mitgliederverwaltung" :showTopList="isOwner">
+      <SidebarTemplate mainTitle="Mein Account" topTitle="FF Admin" :showTopList="isOwner">
         <template v-if="isOwner" #topList>
           <RoutingLink
             title="Administration"

src/views/admin/settings/award/Award.vue

@@ -6,7 +6,7 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col gap-4 grow pl-7">
+      <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
           <AwardListItem v-for="award in awards" :key="award.id" :award="award" />
         </div>

src/views/admin/settings/calendarType/CalendarType.vue

@@ -6,7 +6,7 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col gap-4 grow pl-7">
+      <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
           <CalendarTypeListItem
             v-for="calendarType in calendarTypes"

src/views/admin/settings/communicationType/CommunicationType.vue

@@ -6,7 +6,7 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col gap-4 grow pl-7">
+      <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
           <CommunicationTypeListItem
             v-for="communicationType in communicationTypes"

src/views/admin/settings/executivePosition/ExecutivePosition.vue

@@ -6,7 +6,7 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col gap-4 grow pl-7">
+      <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
           <ExecutivePositionListItem
             v-for="executivePosition in executivePositions"

src/views/admin/settings/membershipStatus/MembershipStatus.vue

@@ -6,7 +6,7 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col gap-4 grow pl-7">
+      <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
           <MembershipStatusListItem v-for="status in membershipStatus" :key="status.id" :membershipStatus="status" />
         </div>

src/views/admin/settings/qualification/Qualification.vue

@@ -6,7 +6,7 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col gap-4 grow pl-7">
+      <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
           <QualificationListItem
             v-for="qualification in qualifications"

src/views/admin/settings/queryStore/QueryStore.vue

@@ -6,7 +6,7 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col gap-4 grow pl-7">
+      <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
           <QueryStoreListItem v-for="query in queries" :key="query.id" :queryItem="query" />
         </div>

src/views/admin/settings/template/Template.vue

@@ -9,7 +9,7 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col gap-4 grow pl-7">
+      <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
           <TemplateListItem v-for="template in templates" :key="template.id" :template="template" />
         </div>

src/views/admin/user/role/Role.vue

@@ -6,7 +6,7 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col gap-4 grow pl-7">
+      <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
           <RoleListItem v-for="role in roles" :key="role.id" :role="role" />
         </div>

src/views/admin/user/user/User.vue

@@ -6,7 +6,7 @@
       </div>
     </template>
     <template #diffMain>
-      <div class="flex flex-col gap-4 grow pl-7">
+      <div class="flex flex-col gap-4 h-full pl-7">
         <div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
           <UserListItem v-for="user in users" :key="user.id" :user="user" />
         </div>

src/views/invite/Verify.vue

@@ -47,8 +47,6 @@ import { defineComponent } from "vue";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
-import { RouterLink } from "vue-router";
-import { ClipboardIcon } from "@heroicons/vue/24/outline";
 import FormBottomBar from "@/components/FormBottomBar.vue";
 import TextCopy from "@/components/TextCopy.vue";
 </script>

src/views/reset/Reset.vue

@@ -47,7 +47,6 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
-import { ClipboardIcon } from "@heroicons/vue/24/outline";
 import FormBottomBar from "@/components/FormBottomBar.vue";
 import TextCopy from "@/components/TextCopy.vue";
 </script>

src/views/setup/Verify.vue

@@ -17,16 +17,7 @@
       <form v-else class="flex flex-col gap-2" @submit.prevent="setup">
         <img :src="image" alt="totp" class="w-56 h-56 self-center" />
 
-        <div class="flex relative">
+        <TextCopy :copyText="otp" />
-          <input type="text" :value="otp" />
-          <ClipboardIcon
-            class="w-5 h-5 p-2 box-content absolute right-1 top-1/2 -translate-y-1/2 bg-white cursor-pointer"
-            @click="copyToClipboard"
-          />
-          <div v-if="copySuccess" class="absolute w-5 h-5 right-3 top-[10px]">
-            <SuccessCheckmark />
-          </div>
-        </div>
 
         <div class="-space-y-px">
           <div>
@@ -57,8 +48,8 @@ import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { RouterLink } from "vue-router";
-import { ClipboardIcon } from "@heroicons/vue/24/outline";
 import FormBottomBar from "@/components/FormBottomBar.vue";
+import TextCopy from "@/components/TextCopy.vue";
 </script>
 
 <script lang="ts">
@@ -74,8 +65,6 @@ export default defineComponent({
       otp: undefined as undefined | string,
       setupStatus: undefined as undefined | "loading" | "success" | "failed",
       setupError: "" as string,
-      copySuccess: false,
-      timputCopy: undefined as any,
     };
   },
   mounted() {
@@ -121,13 +110,6 @@ export default defineComponent({
           this.setupError = err.response.data;
         });
     },
-    copyToClipboard() {
-      navigator.clipboard.writeText(this.otp ?? "");
-      this.copySuccess = true;
-      this.timputCopy = setTimeout(() => {
-        this.copySuccess = false;
-      }, 2000);
-    },
   },
 });
 </script>