feat: Adding upload img and update password

cypress.config.ts

@@ -3,6 +3,6 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   e2e: {
     specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
-    baseUrl: 'http://localhost:4173'
+    baseUrl: 'http://localhost:5173'
   }
 })

cypress/e2e/Authentication/LoginView.cy.ts

+describe('Login Form Tests', () => {
+    beforeEach(() => {
+        cy.visit('/login');
+    });
+
+    it('validates user input and displays error messages', () => {
+        cy.get('#emailInput input').type('test');
+        cy.get('#passwordInput input').type('pass');
+        cy.get('form').submit();
+        cy.get('#invalid').should('contain', 'Invalid email');
+    });
+
+    it('successfully logs in and redirects to the home page', () => {
+        cy.visit('/');
+        cy.url().should('include', '/login');
+    });
+
+    it('successfully logs in and redirects to the home page', () => {
+        cy.get('#emailInput input').type('user@example.com');
+        cy.get('#passwordInput input').type('John1');
+        cy.get('form').submit();
+        cy.wait(1000);
+        cy.url().should('include', '/');
+    });
+
+    it('shows an error message on login failure', () => {
+        cy.get('#emailInput input').type('wrong@example.com');
+        cy.get('#passwordInput input').type('wrongPass1');
+        cy.get('#confirmButton').click();
+        cy.wait(1000);
+        cy.get('[data-cy="error"]').should('contain', 'User not found');
+    });
+});

cypress/e2e/Authentication/SignUpView.cy.ts

+describe('Login Form Tests', () => {
+    beforeEach(() => {
+        cy.visit('/sign-up');
+    });
+
+    it('validates user input and displays error messages', () => {
+        cy.get('#emailInput input').type('test');
+        cy.get('#passwordInput input').type('pass');
+        cy.get('form').submit();
+        cy.get('#invalid').should('contain', 'Invalid email');
+    });
+
+    it('successfully logs in and redirects to the home page', () => {
+        cy.visit('/');
+        cy.url().should('include', '/login');
+    });
+
+    it('successfully logs in and redirects to the home page', () => {
+        cy.get('#emailInput input').type('user@example.com');
+        cy.get('#passwordInput input').type('John1');
+        cy.get('form').submit();
+        cy.wait(1000);
+        cy.url().should('include', '/');
+    });
+
+    it('shows an error message on login failure', () => {
+        // Update the intercept to simulate a login failure
+        cy.intercept('POST', '/api/login', {
+            statusCode: 401,
+            body: { message: 'Invalid credentials' }
+        }).as('apiLoginFail');
+
+        cy.get('#emailInput input').type('wrong@example.com');
+        cy.get('#passwordInput input').type('wrongPass1');
+        cy.get('#confirmButton').click();
+        cy.wait(1000);
+        cy.get('[data-cy="error"]').should('contain', 'User not found');
+    });
+});

src/App.vue

@@ -15,6 +15,5 @@ import { RouterView } from 'vue-router'
   main {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-weight: 600;
-
   }
 </style>
\ No newline at end of file

src/components/Login/LoginForm.vue

@@ -105,7 +105,7 @@ const handleSubmit = async () => {
       />
       <p>Forgotten password? <RouterLink to="/forgotten-password">Reset password</RouterLink></p>
 
-      <p class="text-danger">{{ errorMsg }}</p>
+      <p class="text-danger" data-cy="error">{{ errorMsg }}</p>
       <button1 id="confirmButton" type="submit" @click="handleSubmit" button-text="Login"></button1>
       <SignUpLink/>
     </form>

src/components/UserProfile/UserProfileForeignLayout.vue

@@ -2,7 +2,7 @@
 import {useRoute, useRouter} from "vue-router";
 
 import {onMounted, ref} from "vue";
-import {UserService} from "@/api";
+import {UserService, type ProfileDTO} from "@/api";
 
 let numberOfHistory = 6;
 
@@ -12,6 +12,10 @@ let username = ref()
 
 let friend = ref(false)
 
+let profile: ProfileDTO;;
+
+const imageUrl = ref(`../src/assets/userprofile.png`);
+
 
 let id = ref()
 
@@ -33,7 +37,12 @@ onMounted(async () => {
     let response = await UserService.getProfile({
       userId: id.value.id
     })
-    username.value = response.firstName
+    profile = response;
+    console.log(profile)
+    username.value = profile.firstName
+    if (profile.profileImage){
+      imageUrl.value = `http://localhost:8080/api/images/${profile.profileImage}`
+    }
     console.log(username)
   } catch (error) {
     console.error("Something went wrong getting the profile: ", error)
@@ -69,7 +78,7 @@ function toUpdateUserSettings(){
         <div class="card">
           <div class="rounded-top text-white d-flex flex-row bg-primary" style="height:200px;">
             <div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
-              <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Generic placeholder image"
+              <img :src="imageUrl" alt="Generic placeholder image"
                    class="img-fluid img-thumbnail mt-4 mb-2" style="width: 150px; z-index: 1">
               <button v-if="!friend" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
                       data-mdb-ripple-color="dark" style="z-index: 1;" @click="addFriend">

src/components/UserProfile/UserProfileLayout.vue

@@ -9,6 +9,9 @@ let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "
 
 let firstname = ref("");
 let lastname = ref("");
+let imageID = ref(12)
+const imageUrl = ref(`http://localhost:8080/api/images/${imageID.value}`);
+
 
 const router = useRouter();
 const userStore = useUserInfoStore();
@@ -33,7 +36,7 @@ const toUpdateUserSettings = () => {
         <div class="card">
           <div class="rounded-top text-white d-flex flex-row bg-primary" style="height:200px;">
             <div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
-              <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Generic placeholder image"
+              <img :src="imageUrl" alt="Generic placeholder image"
                 class="img-fluid img-thumbnail mt-4 mb-2" style="width: 150px; z-index: 1">
               <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
                 data-mdb-ripple-color="dark" style="z-index: 1;" id="toUpdate" @click="toUpdateUserSettings">

src/views/Settings/SettingsProfileView.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted } from 'vue';
 import BaseInput from '@/components/InputFields/BaseInput.vue';
 import { useUserInfoStore } from "@/stores/UserStore";
-import { UserService } from '@/api';
+import { UserService, ImageService } from '@/api';
 import type { UserUpdateDTO } from '@/api';
 
 const firstNameRef = ref()
@@ -12,6 +12,9 @@ const passwordRef = ref('')
 const formRef = ref()
 let samePasswords = ref(true)
 
+const iconSrc = ref('https://bootdey.com/img/Content/avatar/avatar7.png');
+const fileInputRef = ref();
+
 const handleFirstNameInputEvent = (newValue: any) => {
   firstNameRef.value = newValue
 }
@@ -21,6 +24,31 @@ const handleSurnameInputEvent = (newValue: any) => {
   surnameRef.value = newValue
 }
 
+const triggerFileUpload = () => {
+  fileInputRef.value.click();
+};
+
+const handleFileChange = (event: any) => {
+  const file = event.target.files[0];
+  if (file) {
+    uploadImage(file);
+  }
+};
+
+const uploadImage = async (file: any) => {
+  const formData = { file: new Blob([file])}
+
+  try {
+    const response = await ImageService.uploadImage({formData});
+    
+    console.log('Image uploaded:', response);
+
+    iconSrc.value = "http://localhost:8080/api/images/" + response;
+  } catch (error) {
+    console.error('Failed to upload image:', error);
+  }
+};
+
 async function setupForm() {
   try {
     let response = await UserService.getUser();
@@ -66,11 +94,10 @@ onMounted(() => {
     <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">
+        <input type="file" ref="fileInputRef" @change="handleFileChange" accept=".jpg, .jpeg, .png" style="display: none;" />
+        <img :src="iconSrc" alt="User Avatar">
         <div class="mt-2">
-          <span class="btn btn-primary"><img src="@/assets/icons/download.svg"></span>
+          <button type="button" class="btn btn-primary" @click="triggerFileUpload"><img src="@/assets/icons/download.svg"> Upload Image</button>
         </div>
       </div>
       <div class="form-group">

src/views/Settings/SettingsSecurityView.vue

@@ -2,22 +2,76 @@
     <div class="tab-pane active" id="security">
         <h6>SECURITY SETTINGS</h6>
         <hr>
-        <form>
+        <form @submit.prevent="handleSubmit" novalidate>
             <div class="form-group">
                 <label class="d-block">Change Password</label>
-                <input type="text" class="form-control" placeholder="Enter your old password">
-                <input type="text" class="form-control mt-3" placeholder="New password">
-                <input type="text" class="form-control mt-3 mb-2" placeholder="Confirm new password">
+                <BaseInput :model-value="oldPasswordRef" @input-change-event="handleOldPasswordInputEvent"
+                    id="passwordInput-change" input-id="password-old" type="password"
+                    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" label="Old Password" placeholder="Enter password"
+                    invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number" />
+
+                <BaseInput :model-value="newPasswordRef" @input-change-event="handleNewPasswordInputEvent"
+                    id="passwordInput-change" input-id="password-new" type="password"
+                    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" label="New Password" placeholder="Enter password"
+                    invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number" />
+
+                <BaseInput :model-value="confirmPasswordRef" @input-change-event="handleConfirmPasswordInputEvent"
+                    id="passwordInput-change" input-id="password-confirm" type="password"
+                    pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" label="Confirm New Password" placeholder="Enter password"
+                    invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number" />
             </div>
-            <button type="button" class="btn btn-primary">Update Password</button>
+            <button type="submit" class="btn btn-primary">Update Password</button>
             <button type="reset" class="btn btn-light">Reset Changes</button>
         </form>
         <hr>
     </div>
 </template>
+
 <script setup lang="ts">
-</script>
+    import { ref } from 'vue'
+    import BaseInput from '@/components/InputFields/BaseInput.vue'
+    import { type PasswordUpdateDTO, UserService } from '@/api'
+
+    const oldPasswordRef = ref('');
+    const newPasswordRef = ref('');
+    const confirmPasswordRef = ref('');
+
+
+    const handleOldPasswordInputEvent = (newValue: any) => {
+        oldPasswordRef.value = newValue
+}
+
+    const handleNewPasswordInputEvent = (newValue: any) => {
+        newPasswordRef.value = newValue
+}
+
+    const handleConfirmPasswordInputEvent = (newValue: any) => {
+        confirmPasswordRef.value = newValue
+}
 
-<style scoped>
+const handleSubmit = async () => {
+    if (newPasswordRef.value !== confirmPasswordRef.value) {
+        console.error('Passwords do not match')
+        return
+    }
+
+
+    const updateUserPayload: PasswordUpdateDTO = {
+        oldPassword: oldPasswordRef.value,
+        newPassword: newPasswordRef.value,
+    };
+
+    try {
+        const response = UserService.updatePassword({ requestBody: updateUserPayload })
+        console.log(response)
+    } catch (err) {
+        console.error(err)
+    }
+}
+
+
+
+
+</script>
 
-</style>
+<style scoped></style>
\ No newline at end of file