feat(Frontend): add add admin logic (SCRUM-306) (#200)

Co-authored-by: jb-cc <115902941+jb-cc@users.noreply.github.com>

Author: FelixTeutsch

Frontend/components/AdminHeader/AdminHeader.vue

@@ -7,7 +7,7 @@ const router = useRouter();
 const colorMode = useColorMode();
 
 interface Props {
-  variant?: "default" | "upload" | "download" | "delete" | "text";
+  variant?: "default" | "upload" | "download" | "delete" | "text" | "warning";
   headerText: string;
   rightButton?: string;
   rightIcon?: string;
@@ -25,13 +25,15 @@ const headerBG = computed(() => ({
   'bg-info': props.variant === 'upload',
   'bg-success': props.variant === 'download',
   'bg-error': props.variant === 'delete',
+  'bg-warning': props.variant === 'warning',
 }));
 
 const colorText = computed(() => ({
   'text-base-content': props.variant === 'default' || props.variant === 'text',
   'text-info-content': props.variant === 'upload',
   'text-success-content': props.variant === 'download',
   'text-error-content': props.variant === 'delete',
+  'text-warning-content': props.variant === 'warning',
 }));
 
 const goBack = () => {

Frontend/components/SupervisorStudentList/ValidatedMailInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
-import {ref, watchEffect} from 'vue';
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { ref, watchEffect } from 'vue';
 
 interface ValidatedMailInput {
   placeholder: string;
@@ -56,6 +56,7 @@ function handleBlur(event: FocusEvent): void {
           @blur="handleBlur"
           @input="handleInput"
       >
+
       <span class="text-body opacity-75 pr-4">
         @{{ props.domain }}
       </span>

Frontend/components/Toast/Toast.vue

@@ -1,87 +1,87 @@
 <script lang="ts" setup>
-import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
-import {computed, onBeforeUnmount, onMounted, ref} from 'vue';
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 
 const props = defineProps({
-    type: {
-        type: String,
-        default: "success",
-        validator: (value) => ["success", "error", "exception"].includes(value as string),
-    },
-    message: {
-        type: String,
-        default: "Chat request has been sent",
-    },
-    duration: {
-        type: Number,
-        default: 3000,
-    },
-    buttonText: {
-        type: String,
-        default: "close",
-    }
+  type: {
+    type: String,
+    default: "success",
+    validator: (value) => [ "success", "error", "exception" ].includes(value as string),
+  },
+  message: {
+    type: String,
+    default: "Chat request has been sent",
+  },
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  buttonText: {
+    type: String,
+    default: "close",
+  }
 });
 
-const emit = defineEmits(['buttonClick', 'close']);
+const emit = defineEmits([ 'buttonClick', 'close' ]);
 
 // Internal visibility state
 const visible = ref(true);
 
 // Helper function to get the correct alert class based on type - now as computed property
 const alertClass = computed(() => ({
-    'alert-success': props.type === 'success' || props.type === undefined,
-    'alert-error': props.type === 'error' || props.type === 'exception',
+  'alert-success': props.type === 'success' || props.type === undefined,
+  'alert-error': props.type === 'error' || props.type === 'exception',
 }));
 
 
 // Get the actual icon name as a string
 const iconName = computed(() => {
-    if (props.type === 'error') return 'ban';
-    if (props.type === 'exception') return 'triangle-exclamation';
-    return 'check'; // default for success
+  if (props.type === 'error') return 'ban';
+  if (props.type === 'exception') return 'triangle-exclamation';
+  return 'check'; // default for success
 });
 
 // Auto-close toast after duration by changing internal visibility
 let timeoutId: ReturnType<typeof setTimeout> | null = null;
 onMounted(() => {
-    if (props.duration > 0) {
-        timeoutId = setTimeout(() => {
-            emit('close');
-            visible.value = false;
-        }, props.duration);
-    }
+  if (props.duration > 0) {
+    timeoutId = setTimeout(() => {
+      emit('close');
+      visible.value = false;
+    }, props.duration);
+  }
 });
 
 onBeforeUnmount(() => {
-    if (timeoutId !== null) {
-        clearTimeout(timeoutId);
-    }
+  if (timeoutId !== null) {
+    clearTimeout(timeoutId);
+  }
 });
 // Just emit the event, don't change visibility
 const handleButtonClick = () => {
-    emit('buttonClick');
+  emit('buttonClick');
 };
 </script>
 
 <template>
+  <div
+      v-if="visible"
+      class="fixed bottom-18 left-0 right-0 flex justify-center z-50 px-8"
+  >
     <div
-        v-if="visible"
-        class="fixed bottom-18 left-0 right-0 flex justify-center z-50 px-12"
-    >
-        <div
-            :class="alertClass"
-            class="alert w-full shadow-lg flex alert-soft"
-            role="alert">
-            <FontAwesomeIcon :icon="iconName" class="text-xl"/>
-            <span class="w-full">{{ message }}</span>
-            <CustomButton
-                :text="buttonText"
-                :color="props.type === 'success' ? 'success' : 'error'"
-                variant="outline"
-                @click="handleButtonClick"
-            />
-        </div>
+        :class="alertClass"
+        class="alert w-full !shadow-lg flex alert-soft"
+        role="alert">
+      <FontAwesomeIcon :icon="iconName" class="text-xl"/>
+      <span class="w-full">{{ message }}</span>
+      <CustomButton
+          :color="props.type === 'success' ? 'success' : 'error'"
+          :text="buttonText"
+          variant="outline"
+          @click="handleButtonClick"
+      />
     </div>
+  </div>
 </template>
 
 <style scoped>

Frontend/components/inputField/InputField.vue

@@ -35,6 +35,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  required: {
+    type: Boolean,
+    default: false,
+  }
 });
 const isClearIcon = computed(() => props.rightIcon === "xmark");
 
@@ -78,7 +82,7 @@ function handleRightIconClick() {
         v-if="props.label.length > 0"
         class="fieldset-legend text-sm font-semibold mb-1 opacity-50 my-0 py-1"
     >
-      {{ label }}
+      {{ label + (required ? '*' : '') }}
     </legend>
 
     <div class="input-container">

Frontend/i18n/locales/de-DE.json

@@ -1,4 +1,22 @@
 {
+  "add-admin": {
+    "add-admin": "Admin hinzufügen",
+    "inputMissing": "Bitte fülle alle felder aus!",
+    "modal": {
+      "text": "Bist du dir sicher das du {firstName} {lastName} mit der mail Adresse {mail} admin machen willst?"
+    },
+    "text": "Durch das Hinzufügen eines weiteren admins bekommt diese person die gleiche lese, schreibe und lösch rechte wie du! Füge nur jemand als Admin dazu, falls das wirklich gewollt ist! Diese aktion kann nicht rückgängig gemacht werden!",
+    "title": "Füge einen Admin hinzu",
+    "toast": {
+      "error": {
+        "400": "Falsche Mail Domain, fehlendes Feld, oder nutzer bereits registriert.",
+        "403": "Nur bereits existierende Admins dürfen einen neuen admin account erstellen",
+        "409": "Es existiert bereits ein nutzer mit dieser Mail!",
+        "generic": "Es ist ein fehler aufgetreten. Bitte versuche es später erneut..."
+      },
+      "message": "Ein neuer Admin wurde hinzugefügt!"
+    }
+  },
   "admin": {
     "availableSpots": "Verfügbare Plätze",
     "downloadDescription": "Laden Sie die bestätigten Betreuer-Studenten-Paare herunter",
@@ -15,6 +33,7 @@
     "waitingStudents": "warten derzeit auf die Genehmigung der Betreuung"
   },
   "appHeader": {
+    "addAdmin": "Admin Hinzufügen",
     "admin": {
       "deleteData": "Delete Data",
       "downloadData": "Daten Herunterladen",
@@ -169,6 +188,7 @@
   "generic": {
     "404-not-found": "404 - Nicht gefunden",
     "acceptedRequestTo": "Akzeptierte Anfrage an",
+    "addAdmin": "Neuen Admin Hinzufügen",
     "admin": "Admin",
     "cancel": "Abbrechen",
     "chatRequest": "Chat-Anfrage",

Frontend/i18n/locales/en-GB.json

@@ -1,4 +1,22 @@
 {
+  "add-admin": {
+    "add-admin": "Add Admin",
+    "inputMissing": "Please make sure that all fields are filled out!",
+    "modal": {
+      "text": "Are you sure you want to make {firstName} {lastName} with the mail {mail} admin?"
+    },
+    "text": "By adding another admin, you are allowing them to have the same read, write and delete access as you! Make sure you only do this if wanted. This action can not be undone!",
+    "title": "Add an admin",
+    "toast": {
+      "error": {
+        "400": "Invalid email domain, missing required fields, or user already exists",
+        "403": "Only existing admins can create new admin accounts",
+        "409": "User with this email already exists",
+        "generic": "An error has occured. Try again later..."
+      },
+      "message": "A new admin has been added"
+    }
+  },
   "admin": {
     "availableSpots": "Available spots",
     "downloadDescription": "Download the confirmed Supervisor - Student pairs",
@@ -15,6 +33,7 @@
     "waitingStudents": "are currently waiting for supervision approval"
   },
   "appHeader": {
+    "addAdmin": "Add Admin",
     "admin": {
       "deleteData": "Delete Data",
       "downloadData": "Download Data",
@@ -169,6 +188,7 @@
   "generic": {
     "404-not-found": "404 - Not Found",
     "acceptedRequestTo": "Accepted request to",
+    "addAdmin": "Add new Admin",
     "admin": "Admin",
     "cancel": "Cancel",
     "chatRequest": "Chat request",

Frontend/layouts/GenericBackLayout.vue

@@ -22,22 +22,24 @@ const headerText = computed(() => {
         download: t("appHeader.admin.downloadData"),
         upload: t("appHeader.admin.uploadData"),
         delete: t("appHeader.admin.deleteData"),
-        'new-cycle': t("appHeader.admin.newCycle"),
+        "new-cycle": t("appHeader.admin.newCycle"),
+        "add-admin": t("appHeader.addAdmin"),
       }[currentPage] || t("nav.defaultHeader")
   );
 });
 
 const getVariant = computed(
-    (): "default" | "upload" | "download" | "delete" | "text" | undefined => {
-      const breadCrumbs: string[] = route.path.substring(1).split("/");
-      const currentPage = breadCrumbs.pop() || "";
-      if (breadCrumbs[0].includes("admin")) {
-        const variant = {
-          download: "download",
-          upload: "upload",
-          delete: "delete",
-          'new-cycle': "delete"
-        }[currentPage] as "download" | "upload" | "delete" | undefined;
+  (): "default" | "upload" | "download" | "delete" | "warning" |"text" | undefined => {
+    const breadCrumbs: string[] = route.path.substring(1).split("/");
+    const currentPage = breadCrumbs.pop() || "";
+    if (breadCrumbs[0].includes("admin")) {
+      const variant = {
+        download: "download",
+        upload: "upload",
+        delete: "delete",
+        "new-cycle": "delete",
+        "add-admin": "warning",
+      }[currentPage] as "download" | "upload" | "delete" | "warning" | undefined;
 
         return variant || "default";
       }