feat: adding input for bank account

src/App.vue

 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
+//import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
 </script>
 
 <template>

src/views/Settings/SettingsAccountView.vue

@@ -2,41 +2,67 @@
 import { ref, onMounted } from 'vue';
 import BaseInput from '@/components/InputFields/BaseInput.vue';
 import { useUserInfoStore } from "@/stores/UserStore";
+import { UserService } from '@/api';
+import type { UserUpdateDTO } from '@/api';
 
-const firstNameRef = ref()
-const surnameRef = ref('')
 const emailRef = ref('')
-const passwordRef = ref('')
-const confirmPasswordRef = ref('')
-const formRef = ref()
-let samePasswords = ref(true)
-
-const handleFirstNameInputEvent = (newValue: any) => {
-  firstNameRef.value = newValue
-}
+const errorMsg = ref('')
+const confirmationMsg = ref('')
 
 const handleEmailInputEvent = (newValue: any) => {
   emailRef.value = newValue
 }
 
+async function setupForm() {
+  try {
+    let response = await UserService.getUser();
+    if (response.email != null) {
+      emailRef.value = response.email
+    }
+    confirmationMsg.value = '';
+    errorMsg.value = '';
+  } catch (err) {
+    errorMsg.value = 'Error fetching email, try again!'
+    confirmationMsg.value = ''
+  }
+}
+
+const handleSubmit = async () => {
+  console.log('Yoooo')
+  const updateUserPayload: UserUpdateDTO = {
+    email: emailRef.value,
+  };
+  try {
+    UserService.update({ requestBody: updateUserPayload })
+    useUserInfoStore().setUserInfo({
+        email: emailRef.value,
+    })
+    confirmationMsg.value = 'Email updated successfully!'
+    errorMsg.value = '';
+  } catch (err) {
+    errorMsg.value = "Error updating email, try again!";
+    confirmationMsg.value = ''
+  }
+}
+onMounted(() => {
+  setupForm()
+})
 </script>
 
 <template>
     <div class="tab-pane active" id="account">
         <h6>ACCOUNT SETTINGS</h6>
         <hr>
-        <form>
-            <div class="form-group">
-                <BaseInput :model-value="firstNameRef" @input-change-event="handleFirstNameInputEvent"
-                    id="firstNameInputChange" input-id="first-name-new" type="text" label="Username"
-                    placeholder="Enter your username" invalid-message="Please enter your username" />
-            </div>
-            <br>
+        <form  @submit.prevent="handleSubmit">
             <div class="form-group">
                 <BaseInput :model-value="emailRef" @input-change-event="handleEmailInputEvent" id="emailInput-change"
                     input-id="email-new" type="email" label="Email" placeholder="Enter your email"
-                    invalid-message="Invalid email" />
+                    invalid-message="Invalid email"/>
             </div>
+            <p class="text-danger">{{ errorMsg }}</p>
+            <p class="text-success">{{ confirmationMsg }}</p>
+            <br>
+            <button type="submit" class="btn btn-primary">Update Profile</button>
             <hr>
             <div class="form-group">
                 <label class="d-block text-danger">Delete Account</label>

src/views/Settings/SettingsBankView.vue

 <template>
     <div class="tab-pane active" id="billing">
-        <h6>BILLING SETTINGS</h6>
+        <h6>BANK SETTINGS</h6>
         <hr>
-        <form>
+        <form @submit.prevent="handleSpendingSubmit">
             <div class="form-group">
-                <label class="d-block mb-0">Spending account</label>
-                <select class="form-control form-control-lg">
-                    <option>9175 5942 5431 5712</option>
-                    <option>5175 5942 5431 5712</option>
-                    <option>4175 5942 5431 5712</option>
-                </select>
+                <BaseInput :model-value="spendingAccount" @input-change-event="handleSpendingInputEvent" id="firstNameInputChange" input-id="first-name-new"
+                    type="Number" label="Spending Account" placeholder="Enter your spending account"
+                    invalid-message="Please enter your spending account" />
             </div>
+            <br>
+            <button type="submit" class="btn btn-primary">Update Spending Account</button>
+        </form>
+        <br>
+        <form @submit.prevent="handleSavingSubmit">
             <div class="form-group">
-                <label class="d-block mb-0">Savings account</label>
-                <select class="form-control form-control-lg">
-                    <option>2175 5942 5431 5712</option>
-                    <option>1175 5942 5431 5712</option>
-                </select>
-                <br>
-            </div>
-            <hr>
-            <div class="form-group mb-0">
-                <label class="d-block">Payment History</label>
-                <div class="border border-gray-500 bg-gray-200 p-3 text-center font-size-sm">You
-                    have not made any payment.</div>
+                <BaseInput :model-value="savingsAccount" @input-change-event="handleSavingInputEvent" id="firstNameInputChange" input-id="first-name-new" type="Number"
+                    label="Savings Account" placeholder="Enter your Savings account"
+                    invalid-message="Please enter your Savings account" />
             </div>
+            <br>
+            <button type="submit" class="btn btn-primary">Update Savings Account</button>
         </form>
+        <hr>
+        <div class="form-group mb-0">
+            <label class="d-block">Payment History</label>
+            <div class="border border-gray-500 bg-gray-200 p-3 text-center font-size-sm">You
+                have not made any payment.</div>
+        </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import BaseInput from '@/components/InputFields/BaseInput.vue';
+import type { BankAccountDTO } from '@/api';
+import { UserService } from '@/api';
+
+
+const spendingAccount = ref()
+const savingsAccount = ref()
+
+
+const handleSpendingInputEvent = (newValue: any) => {
+    console.log(newValue);
+  spendingAccount.value = newValue
+}
+
+
+const handleSavingInputEvent = (newValue: any) => {
+    console.log(newValue);
+  savingsAccount.value = newValue
+}
+
+
+const handleSavingSubmit = async () => {
+
+    const updateSaving: BankAccountDTO = {
+        bban: savingsAccount.value,
+        bankAccountType: "SAVING_ACCOUNT",
+    };
+    try {
+        UserService.selectBankAccount({ requestBody: updateSaving })
+    } catch (err) {
+        console.error(err)
+    }
+}
+
+const handleSpendingSubmit = async () => {
+    console.log(savingsAccount.value)
+
+    const updateSaving: BankAccountDTO = {
+        bban: spendingAccount.value,
+        bankAccountType: "CHECKING_ACCOUNT",
+    };
+    try {
+        UserService.selectBankAccount({ requestBody: updateSaving })
+    } catch (err) {
+        console.error(err)
+    }
+}
+</script>
\ No newline at end of file

src/views/Settings/SettingsProfileView.vue

@@ -2,12 +2,13 @@
 import { ref, onMounted } from 'vue';
 import BaseInput from '@/components/InputFields/BaseInput.vue';
 import { useUserInfoStore } from "@/stores/UserStore";
+import { UserService } from '@/api';
+import type { UserUpdateDTO } from '@/api';
 
 const firstNameRef = ref()
 const surnameRef = ref('')
 const emailRef = ref('')
 const passwordRef = ref('')
-const confirmPasswordRef = ref('')
 const formRef = ref()
 let samePasswords = ref(true)
 
@@ -20,42 +21,77 @@ const handleSurnameInputEvent = (newValue: any) => {
   surnameRef.value = newValue
 }
 
+async function setupForm() {
+  try {
+    let response = await UserService.getUser();
+    console.log(response.firstName)
+
+    firstNameRef.value = response.firstName;
+    if (response.lastName != null) {
+      surnameRef.value = response.lastName;
+    }
+  } catch (err) {
+    console.error(err)
+  }
+}
+
+const handleSubmit = async () => {
+  console.log('Yoooo')
+  const updateUserPayload: UserUpdateDTO = {
+    firstName: firstNameRef.value,
+    lastName: surnameRef.value,
+  };
+
+  try {
+    UserService.update({ requestBody: updateUserPayload })
+    useUserInfoStore().setUserInfo({
+      firstname: firstNameRef.value,
+      lastname: surnameRef.value,
+    })
+
+  } catch (err) {
+    console.error(err)
+  }
+}
+onMounted(() => {
+  setupForm()
+})
+
 </script>
 
 
 <template>
-    <div class="tab-pane active" id="profile">
-        <h6>YOUR PROFILE INFORMATION</h6>
-        <hr>
-        <form>
-            <div class="user-avatar">
-                  <img id="icon" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Maxwell Admin">
-                </div>
-                <div class="btn">
-                  <div class="mt-2">
-                    <span class="btn btn-primary"><img src="@/assets/icons/download.svg"></span>
-                  </div>
-                </div>
-            <div class="form-group">
-                <BaseInput :model-value="firstNameRef" @input-change-event="handleFirstNameInputEvent"
-                    id="firstNameInputChange" input-id="first-name-new" type="text" label="First name"
-                    placeholder="Enter your first name" invalid-message="Please enter your first name" />
-            </div>
-            <br>
-            <div class="form-group">
-                <BaseInput :model-value="surnameRef" @input-change-event="handleSurnameInputEvent"
-                    id="surnameInput-change" input-id="surname-new" type="text" label="Surname"
-                    placeholder="Enter your surname" invalid-message="Please enter your surname" />
-            </div>
-            <br>
-            <button type="button" class="btn btn-primary">Update Profile</button>
-            <button type="reset" class="btn btn-light">Reset Changes</button>
-        </form>
-    </div>
+  <div class="tab-pane active" id="profile">
+    <h6>YOUR PROFILE INFORMATION</h6>
+    <hr>
+    <form @submit.prevent="handleSubmit" novalidate>
+      <div class="user-avatar">
+        <img id="icon" src="https://bootdey.com/img/Content/avatar/avatar7.png" alt="Maxwell Admin">
+      </div>
+      <div class="btn">
+        <div class="mt-2">
+          <span class="btn btn-primary"><img src="@/assets/icons/download.svg"></span>
+        </div>
+      </div>
+      <div class="form-group">
+        <BaseInput :model-value="firstNameRef" @input-change-event="handleFirstNameInputEvent" id="firstNameInputChange"
+          input-id="first-name-new" type="text" label="First name" placeholder="Enter your first name"
+          invalid-message="Please enter your first name" />
+      </div>
+      <br>
+      <div class="form-group">
+        <BaseInput :model-value="surnameRef" @input-change-event="handleSurnameInputEvent" id="surnameInput-change"
+          input-id="surname-new" type="text" label="Surname" placeholder="Enter your surname"
+          invalid-message="Please enter your surname" />
+      </div>
+      <br>
+      <button type="submit" class="btn btn-primary">Update Profile</button>
+    </form>
+  </div>
 </template>
 
 <style scoped>
-    #icon {
+#icon {
   width: 90px;
   height: 90px;
   -webkit-border-radius: 100px;