Merge branch 'feat/profile-and-settings-improvements' of...

Merge branch 'feat/profile-and-settings-improvements' of https://gitlab.stud.idi.ntnu.no/idatt2106-2024-07/frontend into feat/profile-and-settings-improvements

src/assets/icons/template.svg

+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m438-240 226-226-58-58-169 169-84-84-57 57 142 142ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"/></svg>
\ No newline at end of file

src/components/Admin/AdminFeedback.vue

+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { type FeedbackResponseDTO, UserService } from '@/api'
+import handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
+
+const feedbacks = ref<FeedbackResponseDTO[]>([]);
+
+onMounted(async () => {
+  try {
+    feedbacks.value = await UserService.getFeedback();
+    console.log(feedbacks.value)
+  } catch (error) {
+    handleUnknownError(error);
+  }
+})
+
+const formattedDate = (dateStr?: string): string => {
+  if (!dateStr) return '';
+  return new Date(dateStr).toLocaleString();
+};
+</script>
+
+<template>
+  <div class="feedback-container">
+    <h1>Feedback List</h1>
+    <div class="feedback-list">
+      <!-- Loop through feedback items -->
+      <div class="feedback-item" v-for="feedback in feedbacks" :key="feedback.id">
+        <div class="email">{{ feedback.email }}</div>
+        <div class="message">{{ feedback.message }}</div>
+        <div class="created-at">{{ formattedDate(feedback.createdAt) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.feedback-container {
+  max-width: 800px;
+  margin: auto;
+  padding: 20px;
+}
+
+.feedback-list {
+  margin-top: 20px;
+  border-top: 1px solid #ccc;
+}
+
+.feedback-item {
+  padding: 10px;
+  border-bottom: 1px solid #ccc;
+}
+
+.email, .message, .created-at {
+  padding: 5px 0;
+}
+
+.email {
+  font-weight: bold;
+  color: #333;
+}
+
+.message {
+  margin: 5px 0;
+  line-height: 1.5;
+  color: #666;
+}
+
+.created-at {
+  font-size: 0.8rem;
+  color: #999;
+}
+</style>
\ No newline at end of file

src/components/BaseComponents/NavBar.vue

@@ -122,7 +122,7 @@
               <li>
                 <router-link data-cy="admin"
                   class="dropdown-item dropdown-username-link"
-                  :to="toSetting()"
+                  :to="toAdmin()"
                   exact-active-class="active-link"
                   @click="toggleDropdown">
                   <img src="@/assets/icons/admin.svg">Admin
@@ -313,6 +313,15 @@ function toFeedback(): string {
   return '/feedback';
 }
 
+/**
+ * Redirects to the admin page.
+ *
+ * @returns {string} The URL for the admin page.
+ */
+function toAdmin(): string {
+  return '/admin';
+}
+
 /**
  * Redirects to the friends page.
  *

src/components/Settings/SettingsBank.vue

@@ -52,7 +52,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue';
-import type { UserUpdateDTO } from '@/api'
+import { AccountControllerService, type BalanceDTO, BankProfileControllerService, type UserUpdateDTO } from '@/api'
 import { UserService } from '@/api';
 import  handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
 
@@ -128,13 +128,16 @@ async function getAccountInfo() {
   try {
     let response = await UserService.getUser();
     savingsAccount.value = response.savingsAccountBBAN;
-    /*if (response.savingsAccount?.balance) {
-      savingsAccountBalance.value = response.savingsAccount?.balance
-    }*/
+    let bban1: any = response.savingsAccountBBAN;
+    AccountControllerService.getAccountsByBban({bban: bban1}).then((balance: BalanceDTO) => {
+      savingsAccountBalance.value = balance.balance;
+    })
+
     spendingAccount.value = response.checkingAccountBBAN;
-    /*if (response.checkingAccount?.balance) {
-      spendingAccountBalance.value = response.checkingAccountBBAN?.balance
-    }*/
+    let bban2: any = response.checkingAccountBBAN;
+    AccountControllerService.getAccountsByBban({bban: bban2}).then((balance: BalanceDTO) => {
+      spendingAccountBalance.value = balance.balance;
+    })
   } catch (err) {
     handleUnknownError(err)
   }

src/router/index.ts

@@ -28,6 +28,12 @@ const routes = [
         name: 'profile',
         component: () => import('@/views/User/MyProfileView.vue'),
       },
+      {
+        path: 'admin',
+        name: 'admin',
+        component: () => import('@/views/Admin/AdminDashboardView.vue'),
+        meta: { requiresAdmin: true }
+      },
       {
         path: '/settings',
         name: 'settings',
@@ -186,7 +192,7 @@ router.beforeEach((to, from, next) => {
 
   if (requiresAuth && !isAuthenticated) {
     next({ name: 'login', query: { redirect: to.fullPath } });
-  } else if (requiresAdmin && userRole !== 'admin') {
+  } else if (requiresAdmin && userRole !== 'ADMIN') {
     next({ name: 'unauthorized' });
   } else if (requiresPremium && userSubscription !== 'PREMIUM') {
     next({ name: 'home' });

src/views/Admin/AdminDashboardView.vue

+<script setup lang="ts">
+import AddminFeedback from "@/components/Admin/AdminFeedback.vue";
+</script>
+
+<template>
+  <AddminFeedback></AddminFeedback>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/views/User/UserFeedbackView.vue

@@ -2,15 +2,25 @@
     <main>
       <div class="wrapper">
       <div id="formFrame">
-          <h1>TIlbakemelding</h1>
-      <form @submit.prevent="submitForm">
-        <BaseInput v-model="email" label="Email" type="email" placeholder="Enter your email" inputId="email" required />
+          <h1>Tilbakemelding</h1>
+      <form  ref="formRef" id="loginForm" @submit.prevent="submitForm" novalidate>
+        <BaseInput :model-value="emailRef"
+                   @input-change-event="handleEmailInputEvent"
+                   id="emailInput"
+                   input-id="email"
+                   type="email"
+                   label="E-post"
+                   placeholder="Skriv inn din e-post"
+                   invalid-message="Ugyldig e-post"
+        />
+
         <br>
         <label for="feedback">Din tilbakemelding:</label>
-        <textarea v-model="message" placeholder="Write here" rows="5" name="comment[text]" id="comment_text" cols="33"
+        <textarea v-model="messageRef" placeholder="Skriv meldingen din her" rows="5" name="comment[text]" id="comment_text" cols="33"
           required></textarea>
-        <BaseButton button-text="Send" @click="submitForm">Send inn</BaseButton>
-        <p v-if="submissionStatus">{{ submissionStatus }}</p>
+        <p data-cy="change-email-msg-error" class="text-danger">{{ errorMsg }}</p>
+        <BaseButton button-text="Send" @click="submitForm" style="padding: 10px 30px; font-size: 18px; font-weight: normal;">Send inn</BaseButton>
+        <p data-cy="change-email-msg-confirm" class="text-success">{{ confirmationMsg }}</p>
       </form>
     </div>
     </div>
@@ -21,13 +31,33 @@
 import { ref } from 'vue';
 import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue';
 import BaseButton from '@/components/BaseComponents/Buttons/BaseButton.vue';
+import { type FeedbackRequestDTO, UserService } from '@/api'
+import handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
+
+const emailRef = ref("");
+const messageRef = ref("");
+const errorMsg = ref('')
+const confirmationMsg = ref('')
 
-const email = ref("");
-const message = ref("");
-const submissionStatus = ref("");
+const handleEmailInputEvent = (newValue: any) => {
+  emailRef.value = newValue
+}
 
 const submitForm = async () => {
-  
+  try {
+    const feedbackRequest: FeedbackRequestDTO = {
+      email: emailRef.value,
+      message: messageRef.value
+    };
+    console.log("feedbackRequest", feedbackRequest);
+    UserService.sendFeedback({ requestBody: feedbackRequest });
+    messageRef.value = ''
+    errorMsg.value = ''
+    confirmationMsg.value = 'Tilbakemeldingen ble sendt!'
+  } catch (err) {
+    errorMsg.value = handleUnknownError(err);
+    confirmationMsg.value = ''
+  }
 };
 </script>