feat: invite mentor

client/src/pages/learningMentor/MentorManagementPage.vue

@@ -7,6 +7,7 @@ import { useCSRFFetch } from "@/fetchHelpers";
 const courseSession = useCurrentCourseSession();
 
 const showInvitationModal = ref(false);
+const inviteeEmail = ref("");
 
 const { execute: refreshMentors, data: mentors } = useCSRFFetch(
   `/api/mentor/${courseSession.value.course.id}/mentors`
@@ -23,6 +24,11 @@ const hasMentors = computed(() => {
   );
 });
 
+const validEmail = computed(() => {
+  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+  return emailRegex.test(inviteeEmail.value);
+});
+
 const removeInvitation = async (invitationId: string) => {
   await useCSRFFetch(
     `/api/mentor/${courseSession.value.course.id}/invitations/${invitationId}/delete`
@@ -36,6 +42,17 @@ const removeMentor = async (mentorId: string) => {
   ).delete();
   await refreshMentors();
 };
+
+const inviteMentor = async () => {
+  await useCSRFFetch(
+    `/api/mentor/${courseSession.value.course.id}/invitations/create`
+  ).post({
+    email: inviteeEmail.value,
+  });
+  await refreshInvitations();
+  showInvitationModal.value = false;
+  inviteeEmail.value = "";
+};
 </script>
 
 <template>
@@ -114,7 +131,20 @@ const removeMentor = async (mentorId: string) => {
     </div>
     <ItModal v-model="showInvitationModal">
       <template #title>{{ $t("a.Neue Lernbegleitung einladen") }}</template>
-      <template #body>hallo</template>
+      <template #body>
+        <div class="flex flex-col">
+          <label for="mentor-email">{{ $t("a.E-Mail Adresse") }}</label>
+          <input v-model="inviteeEmail" id="mentor-email" type="email" />
+
+          <button
+            :disabled="!validEmail"
+            @click="inviteMentor()"
+            class="btn-primary mt-8"
+          >
+            {{ $t("a.Einladung abschicken") }}
+          </button>
+        </div>
+      </template>
     </ItModal>
   </div>
 </template>