diff --git a/spec.json b/spec.json
index 95468154a5d3f5a038d1aaa8cd3767ebca3055e4..e6566e8325cdbf7dd17a2bb0286b7fe42273b085 100644
--- a/spec.json
+++ b/spec.json
@@ -23,6 +23,38 @@
}
],
"paths": {
+ "/api/users/subscription/{subscriptionLevel}": {
+ "put": {
+ "tags": [
+ "User"
+ ],
+ "summary": "Update User Subscription Level",
+ "description": "Updates the subscription level of the current user",
+ "operationId": "updateSubscriptionLevel",
+ "parameters": [
+ {
+ "name": "subscriptionLevel",
+ "in": "path",
+ "required": true,
+ "schema": {
+ "type": "string"
+ }
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "Subscription level updated successfully",
+ "content": {
+ "*/*": {
+ "schema": {
+ "type": "object"
+ }
+ }
+ }
+ }
+ }
+ }
+ },
"/api/friends/{friendId}": {
"put": {
"tags": [
@@ -126,8 +158,8 @@
"required": true
},
"responses": {
- "200": {
- "description": "No accounts associated with a bank user",
+ "404": {
+ "description": "Bank profile id does not exist",
"content": {
"*/*": {
"schema": {
@@ -136,8 +168,8 @@
}
}
},
- "404": {
- "description": "Bank profile id does not exist",
+ "200": {
+ "description": "No accounts associated with a bank user",
"content": {
"*/*": {
"schema": {
@@ -168,8 +200,8 @@
"required": true
},
"responses": {
- "200": {
- "description": "Successfully created a bank profile",
+ "400": {
+ "description": "Could not create profile",
"content": {
"*/*": {
"schema": {
@@ -178,8 +210,8 @@
}
}
},
- "400": {
- "description": "Could not create profile",
+ "200": {
+ "description": "Successfully created a bank profile",
"content": {
"*/*": {
"schema": {
@@ -210,8 +242,8 @@
"required": true
},
"responses": {
- "200": {
- "description": "Successfully created account",
+ "404": {
+ "description": "Provided bank profile id could not be found",
"content": {
"*/*": {
"schema": {
@@ -220,8 +252,8 @@
}
}
},
- "404": {
- "description": "Provided bank profile id could not be found",
+ "200": {
+ "description": "Successfully created account",
"content": {
"*/*": {
"schema": {
@@ -233,6 +265,31 @@
}
}
},
+ "/api/users/send-feedback": {
+ "post": {
+ "tags": [
+ "User"
+ ],
+ "summary": "Send feedback",
+ "description": "Send feedback from an email.",
+ "operationId": "sendFeedback",
+ "requestBody": {
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/FeedbackRequestDTO"
+ }
+ }
+ },
+ "required": true
+ },
+ "responses": {
+ "200": {
+ "description": "Success"
+ }
+ }
+ }
+ },
"/api/users/reset-password": {
"post": {
"tags": [
@@ -278,17 +335,17 @@
"required": true
},
"responses": {
- "204": {
- "description": "Password was reset successfully"
- },
"403": {
"description": "Invalid token"
+ },
+ "204": {
+ "description": "Password was reset successfully"
}
},
"security": []
}
},
- "/api/image/upload": {
+ "/api/images": {
"post": {
"tags": [
"Image"
@@ -298,7 +355,7 @@
"operationId": "uploadImage",
"requestBody": {
"content": {
- "application/json": {
+ "multipart/form-data": {
"schema": {
"required": [
"file"
@@ -315,19 +372,8 @@
}
},
"responses": {
- "200": {
- "description": "Successfully uploaded the image",
- "content": {
- "*/*": {
- "schema": {
- "type": "integer",
- "format": "int64"
- }
- }
- }
- },
"201": {
- "description": "Created",
+ "description": "Successfully uploaded the image",
"content": {
"*/*": {
"schema": {
@@ -426,8 +472,8 @@
"required": true
},
"responses": {
- "200": {
- "description": "Successfully updated budget",
+ "500": {
+ "description": "Budget is not found",
"content": {
"application/json": {
"schema": {
@@ -436,8 +482,8 @@
}
}
},
- "500": {
- "description": "Budget is not found",
+ "200": {
+ "description": "Successfully updated budget",
"content": {
"application/json": {
"schema": {
@@ -479,8 +525,8 @@
"required": true
},
"responses": {
- "200": {
- "description": "Successfully updated budget",
+ "500": {
+ "description": "Error updating expense",
"content": {
"application/json": {
"schema": {
@@ -489,8 +535,8 @@
}
}
},
- "500": {
- "description": "Error updating expense",
+ "200": {
+ "description": "Successfully updated budget",
"content": {
"application/json": {
"schema": {
@@ -596,22 +642,22 @@
"required": true
},
"responses": {
- "409": {
- "description": "Email already exists",
+ "201": {
+ "description": "Successfully signed up",
"content": {
"application/json": {
"schema": {
- "$ref": "#/components/schemas/ExceptionResponse"
+ "$ref": "#/components/schemas/AuthenticationResponse"
}
}
}
},
- "201": {
- "description": "Successfully signed up",
+ "409": {
+ "description": "Email already exists",
"content": {
"application/json": {
"schema": {
- "$ref": "#/components/schemas/AuthenticationResponse"
+ "$ref": "#/components/schemas/ExceptionResponse"
}
}
}
@@ -649,8 +695,8 @@
}
}
},
- "401": {
- "description": "Invalid credentials",
+ "404": {
+ "description": "User not found",
"content": {
"application/json": {
"schema": {
@@ -659,8 +705,8 @@
}
}
},
- "404": {
- "description": "User not found",
+ "401": {
+ "description": "Invalid credentials",
"content": {
"application/json": {
"schema": {
@@ -737,6 +783,38 @@
}
}
},
+ "/api/users/password": {
+ "patch": {
+ "tags": [
+ "User"
+ ],
+ "summary": "Update a password",
+ "description": "Update the password of the authenticated user",
+ "operationId": "updatePassword",
+ "requestBody": {
+ "content": {
+ "application/json": {
+ "schema": {
+ "$ref": "#/components/schemas/PasswordUpdateDTO"
+ }
+ }
+ },
+ "required": true
+ },
+ "responses": {
+ "200": {
+ "description": "Successfully updated password",
+ "content": {
+ "*/*": {
+ "schema": {
+ "$ref": "#/components/schemas/UserDTO"
+ }
+ }
+ }
+ }
+ }
+ }
+ },
"/bank/v1/account/accounts/ssn/{ssn}": {
"get": {
"tags": [
@@ -806,8 +884,8 @@
}
],
"responses": {
- "200": {
- "description": "No accounts associated with a bank user",
+ "404": {
+ "description": "Bank profile id does not exist",
"content": {
"*/*": {
"schema": {
@@ -819,8 +897,8 @@
}
}
},
- "404": {
- "description": "Bank profile id does not exist",
+ "200": {
+ "description": "No accounts associated with a bank user",
"content": {
"*/*": {
"schema": {
@@ -868,6 +946,93 @@
}
}
},
+ "/api/users/search/{searchTerm}/{filter}": {
+ "get": {
+ "tags": [
+ "User"
+ ],
+ "summary": "Search for users by name and filter",
+ "description": "Returns a list of users whose names contain the specified search term and match the filter.",
+ "operationId": "getUsersByNameAndFilter",
+ "parameters": [
+ {
+ "name": "searchTerm",
+ "in": "path",
+ "required": true,
+ "schema": {
+ "type": "string"
+ }
+ },
+ {
+ "name": "filter",
+ "in": "path",
+ "required": true,
+ "schema": {
+ "type": "string"
+ }
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "Successfully retrieved list of users",
+ "content": {
+ "*/*": {
+ "schema": {
+ "type": "array",
+ "items": {
+ "$ref": "#/components/schemas/UserDTO"
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ "/api/users/search/random/{amount}/{filter}": {
+ "get": {
+ "tags": [
+ "User"
+ ],
+ "summary": "Get X amount of random users",
+ "description": "Get X amount of random users that fit the filter",
+ "operationId": "getRandomUsers",
+ "parameters": [
+ {
+ "name": "amount",
+ "in": "path",
+ "required": true,
+ "schema": {
+ "type": "integer",
+ "format": "int32"
+ }
+ },
+ {
+ "name": "filter",
+ "in": "path",
+ "required": true,
+ "schema": {
+ "type": "string"
+ }
+ }
+ ],
+ "responses": {
+ "200": {
+ "description": "Successfully retrieved list of users",
+ "content": {
+ "*/*": {
+ "schema": {
+ "type": "array",
+ "items": {
+ "$ref": "#/components/schemas/UserDTO"
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
"/api/users/me": {
"get": {
"tags": [
@@ -890,6 +1055,31 @@
}
}
},
+ "/api/users/get-feedback": {
+ "get": {
+ "tags": [
+ "User"
+ ],
+ "summary": "Send feedback",
+ "description": "Send feedback from a user.",
+ "operationId": "getFeedback",
+ "responses": {
+ "200": {
+ "description": "Success",
+ "content": {
+ "*/*": {
+ "schema": {
+ "type": "array",
+ "items": {
+ "$ref": "#/components/schemas/FeedbackResponseDTO"
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
"/api/leaderboard": {
"get": {
"tags": [
@@ -986,7 +1176,7 @@
}
}
},
- "/api/image/{id}": {
+ "/api/images/{id}": {
"get": {
"tags": [
"Image"
@@ -1021,16 +1211,14 @@
"content": {
"*/*": {
"schema": {
- "type": "array",
- "items": {
- "type": "string",
- "format": "byte"
- }
+ "type": "string",
+ "format": "binary"
}
}
}
}
- }
+ },
+ "security": []
}
},
"/api/goal/getGoals": {
@@ -1171,8 +1359,8 @@
}
],
"responses": {
- "200": {
- "description": "Successfully got budget",
+ "500": {
+ "description": "Budget is not found",
"content": {
"application/json": {
"schema": {
@@ -1181,8 +1369,8 @@
}
}
},
- "500": {
- "description": "Budget is not found",
+ "200": {
+ "description": "Successfully got budget",
"content": {
"application/json": {
"schema": {
@@ -1293,8 +1481,8 @@
}
],
"responses": {
- "200": {
- "description": "Successfully deleted budget",
+ "500": {
+ "description": "Budget is not found",
"content": {
"application/json": {
"schema": {
@@ -1303,8 +1491,8 @@
}
}
},
- "500": {
- "description": "Budget is not found",
+ "200": {
+ "description": "Successfully deleted budget",
"content": {
"application/json": {
"schema": {
@@ -1457,6 +1645,17 @@
}
}
},
+ "FeedbackRequestDTO": {
+ "type": "object",
+ "properties": {
+ "email": {
+ "type": "string"
+ },
+ "message": {
+ "type": "string"
+ }
+ }
+ },
"PasswordResetDTO": {
"required": [
"token"
@@ -1697,9 +1896,20 @@
"lastName": {
"type": "string"
},
+ "userId": {
+ "type": "integer",
+ "format": "int64"
+ },
+ "profileImage": {
+ "type": "integer",
+ "format": "int64"
+ },
"role": {
"type": "string"
},
+ "subscriptionLevel": {
+ "type": "string"
+ },
"token": {
"type": "string"
}
@@ -1728,8 +1938,9 @@
"email": {
"type": "string"
},
- "password": {
- "type": "string"
+ "profileImage": {
+ "type": "integer",
+ "format": "int64"
},
"configuration": {
"$ref": "#/components/schemas/ConfigurationDTO"
@@ -1749,6 +1960,10 @@
"lastName": {
"type": "string"
},
+ "profileImage": {
+ "type": "integer",
+ "format": "int64"
+ },
"email": {
"type": "string"
},
@@ -1758,6 +1973,9 @@
},
"role": {
"type": "string"
+ },
+ "subscriptionLevel": {
+ "type": "string"
}
}
},
@@ -1773,6 +1991,17 @@
}
}
},
+ "PasswordUpdateDTO": {
+ "type": "object",
+ "properties": {
+ "oldPassword": {
+ "type": "string"
+ },
+ "newPassword": {
+ "type": "string"
+ }
+ }
+ },
"ProfileDTO": {
"type": "object",
"properties": {
@@ -1786,6 +2015,28 @@
"lastName": {
"type": "string"
},
+ "profileImage": {
+ "type": "integer",
+ "format": "int64"
+ },
+ "createdAt": {
+ "type": "string",
+ "format": "date-time"
+ }
+ }
+ },
+ "FeedbackResponseDTO": {
+ "type": "object",
+ "properties": {
+ "id": {
+ "type": "string"
+ },
+ "email": {
+ "type": "string"
+ },
+ "message": {
+ "type": "string"
+ },
"createdAt": {
"type": "string",
"format": "date-time"
diff --git a/src/api/index.ts b/src/api/index.ts
index d86adbf0fe3bd391b7cd8c97b974dfdb9f74f97f..0a46cc0e4ddd97a94230ae6cffde43965f222b93 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -24,6 +24,8 @@ export type { DailyChallengeProgressDTO } from './models/DailyChallengeProgressD
export type { ExceptionResponse } from './models/ExceptionResponse';
export type { ExpenseRequestDTO } from './models/ExpenseRequestDTO';
export type { ExpenseResponseDTO } from './models/ExpenseResponseDTO';
+export type { FeedbackRequestDTO } from './models/FeedbackRequestDTO';
+export type { FeedbackResponseDTO } from './models/FeedbackResponseDTO';
export type { GoalDTO } from './models/GoalDTO';
export type { LeaderboardDTO } from './models/LeaderboardDTO';
export type { LeaderboardEntryDTO } from './models/LeaderboardEntryDTO';
diff --git a/src/api/models/AuthenticationResponse.ts b/src/api/models/AuthenticationResponse.ts
index 47169ae37b90b20523c9be17ff5da7c2b15bcd4a..3cbef78cec18fdd088dc5349ec155fdfc9ae8b02 100644
--- a/src/api/models/AuthenticationResponse.ts
+++ b/src/api/models/AuthenticationResponse.ts
@@ -5,7 +5,10 @@
export type AuthenticationResponse = {
firstName?: string;
lastName?: string;
+ userId?: number;
+ profileImage?: number;
role?: string;
+ subscriptionLevel?: string;
token?: string;
};
diff --git a/src/api/models/FeedbackRequestDTO.ts b/src/api/models/FeedbackRequestDTO.ts
new file mode 100644
index 0000000000000000000000000000000000000000..174e9eff582bc5a724980e15fcb6341a50d4acaa
--- /dev/null
+++ b/src/api/models/FeedbackRequestDTO.ts
@@ -0,0 +1,9 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type FeedbackRequestDTO = {
+ email?: string;
+ message?: string;
+};
+
diff --git a/src/api/models/FeedbackResponseDTO.ts b/src/api/models/FeedbackResponseDTO.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7b249002ad1e5b596541e138c7ac6e34eef093f0
--- /dev/null
+++ b/src/api/models/FeedbackResponseDTO.ts
@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do not edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type FeedbackResponseDTO = {
+ id?: string;
+ email?: string;
+ message?: string;
+ createdAt?: string;
+};
+
diff --git a/src/api/models/UserDTO.ts b/src/api/models/UserDTO.ts
index aee3ea036af88cba3a66ffeb071041105d318d8b..2020ee7c36cf2f4a1a8304f61f398d76c8d5cda2 100644
--- a/src/api/models/UserDTO.ts
+++ b/src/api/models/UserDTO.ts
@@ -10,5 +10,6 @@ export type UserDTO = {
email?: string;
createdAt?: string;
role?: string;
+ subscriptionLevel?: string;
};
diff --git a/src/api/services/UserService.ts b/src/api/services/UserService.ts
index e7b80041bff94cbc4a17e041ead118b85b9db970..593418a27bb5f5beb68aa4d7d017da91be1df7a3 100644
--- a/src/api/services/UserService.ts
+++ b/src/api/services/UserService.ts
@@ -8,6 +8,8 @@ import type { BudgetRequestDTO } from '../models/BudgetRequestDTO';
import type { BudgetResponseDTO } from '../models/BudgetResponseDTO';
import type { ExpenseRequestDTO } from '../models/ExpenseRequestDTO';
import type { ExpenseResponseDTO } from '../models/ExpenseResponseDTO';
+import type { FeedbackRequestDTO } from '../models/FeedbackRequestDTO';
+import type { FeedbackResponseDTO } from '../models/FeedbackResponseDTO';
import type { PasswordResetDTO } from '../models/PasswordResetDTO';
import type { PasswordUpdateDTO } from '../models/PasswordUpdateDTO';
import type { ProfileDTO } from '../models/ProfileDTO';
@@ -17,6 +19,43 @@ import type { CancelablePromise } from '../core/CancelablePromise';
import { OpenAPI } from '../core/OpenAPI';
import { request as __request } from '../core/request';
export class UserService {
+ /**
+ * Update User Subscription Level
+ * Updates the subscription level of the current user
+ * @returns any Subscription level updated successfully
+ * @throws ApiError
+ */
+ public static updateSubscriptionLevel({
+ subscriptionLevel,
+ }: {
+ subscriptionLevel: string,
+ }): CancelablePromise<Record<string, any>> {
+ return __request(OpenAPI, {
+ method: 'PUT',
+ url: '/api/users/subscription/{subscriptionLevel}',
+ path: {
+ 'subscriptionLevel': subscriptionLevel,
+ },
+ });
+ }
+ /**
+ * Send feedback
+ * Send feedback from an email.
+ * @returns any Success
+ * @throws ApiError
+ */
+ public static sendFeedback({
+ requestBody,
+ }: {
+ requestBody: FeedbackRequestDTO,
+ }): CancelablePromise<any> {
+ return __request(OpenAPI, {
+ method: 'POST',
+ url: '/api/users/send-feedback',
+ body: requestBody,
+ mediaType: 'application/json',
+ });
+ }
/**
* Initiate a password reset
* Send a password reset mail to the user with the specified email
@@ -199,6 +238,50 @@ export class UserService {
},
});
}
+ /**
+ * Search for users by name and filter
+ * Returns a list of users whose names contain the specified search term and match the filter.
+ * @returns UserDTO Successfully retrieved list of users
+ * @throws ApiError
+ */
+ public static getUsersByNameAndFilter({
+ searchTerm,
+ filter,
+ }: {
+ searchTerm: string,
+ filter: string,
+ }): CancelablePromise<Array<UserDTO>> {
+ return __request(OpenAPI, {
+ method: 'GET',
+ url: '/api/users/search/{searchTerm}/{filter}',
+ path: {
+ 'searchTerm': searchTerm,
+ 'filter': filter,
+ },
+ });
+ }
+ /**
+ * Get X amount of random users
+ * Get X amount of random users that fit the filter
+ * @returns UserDTO Successfully retrieved list of users
+ * @throws ApiError
+ */
+ public static getRandomUsers({
+ amount,
+ filter,
+ }: {
+ amount: number,
+ filter: string,
+ }): CancelablePromise<Array<UserDTO>> {
+ return __request(OpenAPI, {
+ method: 'GET',
+ url: '/api/users/search/random/{amount}/{filter}',
+ path: {
+ 'amount': amount,
+ 'filter': filter,
+ },
+ });
+ }
/**
* Get the authenticated user
* Get all user information for the authenticated user
@@ -211,6 +294,18 @@ export class UserService {
url: '/api/users/me',
});
}
+ /**
+ * Send feedback
+ * Send feedback from a user.
+ * @returns FeedbackResponseDTO Success
+ * @throws ApiError
+ */
+ public static getFeedback(): CancelablePromise<Array<FeedbackResponseDTO>> {
+ return __request(OpenAPI, {
+ method: 'GET',
+ url: '/api/users/get-feedback',
+ });
+ }
/**
* Get the list of budgets
* Get all budgets related to the authenticated user
diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index f06222cf21835e3a325d435c834affd23ea462dd..625f3e57917b86aaac6a3a2bc0ee6fc0950c36e6 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -35,7 +35,9 @@
class="nav-link dropdown-toggle username-text text-white "
href="#" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
- <img src="@/assets/icons/person.svg">{{ useUserInfoStore().firstname}}
+ <img :src="useUserInfoStore().profileImage ? 'http://localhost:8080/api/images/' + useUserInfoStore().profileImage : 'src/assets/userprofile.png'"
+ style="width: 50px; border: 2px solid black; border-radius: 50%">{{
+ useUserInfoStore().firstname }}
</a>
<ul class="dropdown-menu dropdown-username-content">
<li><router-link data-cy="profile"
@@ -68,19 +70,28 @@
</nav>
</template>
<script setup lang="ts">
+import { ref } from 'vue';
import { useRouter } from "vue-router";
import { useUserInfoStore } from '@/stores/UserStore';
const router = useRouter();
-const userStore : any = useUserInfoStore();
+const userStore: any = useUserInfoStore();
+
+let profileImage: any = ref('');
+
+if (useUserInfoStore().profileImage !== 0) {
+ profileImage = 'http://localhost:8080/api/images/' + useUserInfoStore().profileImage;
+} else {
+ profileImage = 'src/assets/userprofile.png';
+}
function toHome() {
return '/'
}
function toBudget() {
- return '/budget-overview'
+ return '/budget-overview'
}
function toSavingGoals() {
@@ -112,7 +123,7 @@ function toFriends() {
}
function toUserProfile() {
- return '/profile'
+ return '/profile'
}
function toLogout() {
diff --git a/src/components/LeaderboardComponents/Leaderboard.vue b/src/components/LeaderboardComponents/Leaderboard.vue
index 7c036fc636865182d21961835072d210b2185118..845622ac297fc49fac64f058cef23a6189fff184 100644
--- a/src/components/LeaderboardComponents/Leaderboard.vue
+++ b/src/components/LeaderboardComponents/Leaderboard.vue
@@ -3,7 +3,7 @@
<div class="ribbon"></div>
<table>
<tbody>
- <tr v-for="(entry, index) in leaderboard" :key="entry.user?.id" :class="{ 'is-user-5': entry.user?.firstName === 'User' }">
+ <tr v-for="(entry, index) in leaderboard" :key="entry.user?.id" :class="{ 'is-user-5': entry.user?.id === userStore.id }">
<td class="number">{{ entry.rank }}</td>
<td class="name" @click="navigateToUserProfile(entry.user?.id ?? 0)">{{ entry.user?.firstName }}</td>
<td class="points" v-if="index === 0">
@@ -20,7 +20,7 @@
<tbody id="line">`</tbody>
<tbody v-if="!userInLeaderboard">
<tr></tr>
- <tr v-for="(entry, index) in leaderboardExtra" :key="entry.user?.id" :class="{ 'is-user-5': entry.user?.firstName === userStore.firstname }">
+ <tr v-for="(entry, index) in leaderboardExtra" :key="entry.user?.id" :class="{ 'is-user-5': entry.user?.id === userStore.id }">
<td class="number">{{ entry.rank }}</td>
<td class="name" @click="navigateToUserProfile(entry.user?.id ?? 0)">{{ entry.user?.firstName }}</td>
<td class="points">{{ entry.score }}</td>
diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 9e58d96f32ddd9d57fdbf9d65d75b439aa56ace0..0ef2798aab894ad01405e13392ac9ccc1b3a3ec4 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -56,11 +56,13 @@ const handleSubmit = async () => {
OpenAPI.TOKEN = response.token;
userStore.setUserInfo({
+ id: response.userId,
accessToken: response.token,
firstname: response.firstName,
lastname: response.lastName,
email: emailRef.value,
role: response.role,
+ profileImage: response.profileImage
});
console.log()
diff --git a/src/stores/UserStore.ts b/src/stores/UserStore.ts
index 9d00eaceb29a5882d3865ef3f6c4ca67069e96fb..fb8e369b7d49f34a5932c4c8f7f622d9319a0acd 100644
--- a/src/stores/UserStore.ts
+++ b/src/stores/UserStore.ts
@@ -29,22 +29,26 @@ const cookiesStorage: Storage = {
};
export type UserStoreInfo = {
+ id?: number;
email?: string;
firstname?: string;
lastname?: string;
password?: string;
accessToken?: string;
role?: string;
+ profileImage?: number;
};
//todo Fix if there is time
export const useUserInfoStore = defineStore('UserInfoStore', {
state: () => ({
+ id: 0,
email: '',
firstname: '',
lastname: '',
password: '',
accessToken: '',
role: '',
+ profileImage: 0,
}),
persist: {
storage: cookiesStorage,
@@ -57,19 +61,23 @@ export const useUserInfoStore = defineStore('UserInfoStore', {
this.password = ''
},
setUserInfo(userinfo: UserStoreInfo) {
+ userinfo.id && (this.$state.id = userinfo.id);
userinfo.email && (this.$state.email = userinfo.email);
userinfo.firstname && (this.$state.firstname = userinfo.firstname);
userinfo.lastname && (this.$state.lastname = userinfo.lastname);
userinfo.accessToken && (this.$state.accessToken = userinfo.accessToken);
userinfo.accessToken && (OpenAPI.TOKEN = this.$state.accessToken);
userinfo.role && (this.$state.role = userinfo.role);
+ userinfo.profileImage && (this.$state.profileImage = userinfo.profileImage);
},
clearUserInfo() {
+ this.$state.id = 0;
this.$state.email = '';
this.$state.firstname = '';
this.$state.lastname = '';
this.$state.accessToken = '';
this.$state.role = '';
+ this.$state.profileImage = 0;
OpenAPI.TOKEN = undefined;
},
},
diff --git a/src/views/Settings/SettingsProfileView.vue b/src/views/Settings/SettingsProfileView.vue
index dcba9e73ada6cab265f09828914f5d02f2064b3d..8f88d2622e62974bdb547f7a3bbb99baa62dc538 100644
--- a/src/views/Settings/SettingsProfileView.vue
+++ b/src/views/Settings/SettingsProfileView.vue
@@ -46,6 +46,9 @@ const uploadImage = async (file: any) => {
profileImage: response,
};
UserService.update({ requestBody: updateUserPayload })
+ useUserInfoStore().setUserInfo({
+ profileImage: response,
+ })
} catch (error) {
console.error('Failed to upload image:', error);
}
@@ -61,7 +64,11 @@ async function setupForm() {
surnameRef.value = response.lastName;
}
console.log(response.profileImage)
- iconSrc.value = "http://localhost:8080/api/images/" + response.profileImage;
+ if(response.profileImage != null){
+ iconSrc.value = "http://localhost:8080/api/images/" + response.profileImage;
+ } else {
+ iconSrc.value = "../src/assets/userprofile.png";
+ }
} catch (err) {
console.error(err)
}
diff --git a/src/views/User/UserAddFriend.vue b/src/views/User/UserAddFriend.vue
index cb8eb7872e11cf3ee6bfde1ca6f9a9d319f50667..585f5f8c7ec6f69bebe290fe917e46cad1f8eb5e 100644
--- a/src/views/User/UserAddFriend.vue
+++ b/src/views/User/UserAddFriend.vue
@@ -1,11 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { FriendService } from '@/api';
+
+async function addFriend(friendID: number) {
+ const response = await FriendService.addFriendRequest({ userId: friendID });
+ console.log(response);
+}
+</script>
+
+
<template>
<div class="container">
<h1>Add Friend</h1>
<div class="row">
<form class="col-md-5" id="searchBox" role="search">
- <input class="form-control me-2 custom-border" type="search" placeholder="Search" aria-label="Search">
- <button class="btn btn-success" type="submit">Search</button>
-</form>
+ <input class="form-control me-2 custom-border" type="search" placeholder="Search" aria-label="Search">
+ <button class="btn btn-success" type="submit">Search</button>
+ </form>
<div class="col-md-8">
<div class="people-nearby">
<div class="nearby-user">
@@ -20,7 +31,7 @@
<p class="text-muted">500m away</p>
</div>
<div class="col-md-3 col-sm-3">
- <button class="btn btn-primary pull-right">Add Friend</button>
+ <button class="btn btn-primary pull-right" @click="addFriend(1)">Add Friend</button>
</div>
</div>
</div>
@@ -221,6 +232,7 @@ img.profile-photo-lg {
}
.form-control.custom-border {
- border-color: #222223; /* Change to your desired color */
+ border-color: #222223;
+ /* Change to your desired color */
}
</style>
\ No newline at end of file
diff --git a/src/views/User/UserFriendsView.vue b/src/views/User/UserFriendsView.vue
index ae17297ad9dbe29a6a9ad36e72cda666db433fcd..b6b3ed3c46805bed9cd0dbb7e507ef83796bebce 100644
--- a/src/views/User/UserFriendsView.vue
+++ b/src/views/User/UserFriendsView.vue
@@ -1,29 +1,108 @@
<template>
<div class="container">
<h1>Your Friends</h1>
- <button class="btn btn-primary pull-right my-3" @click="addFriend">+ Add Friend</button>
- <div class="row">
- <div class="col-lg-3" v-for="friend in friends" :key="friend.id">
- <div class="card card-one">
- <div class="header">
- <div v-if="friend.profileImage" class="avatar">
- <img :src="'http://localhost:8080/api/images/' + friend.profileImage" alt="">
- </div>
- <div v-else class="avatar">
- <img :src="'../src/assets/userprofile.png'" alt="">
+ <div>
+ <button class="btn btn-primary pull-right" @click="addNewFriends">+ Add Friend</button>
+ <div class="my-3">
+ <button class="btn pages" @click="setupFriends">Your Friends</button>
+ <button class="btn pages" @click="requestFriend">Friend Requests</button>
+ </div>
+ </div>
+ <div v-if="showFriends">
+ <div v-if="elementsInFriends">
+ <div class="row">
+ <div class="col-lg-3" v-for="friend in friends" :key="friend.id">
+ <div class="card card-one">
+ <div class="header">
+ <div v-if="friend.profileImage" class="avatar">
+ <img :src="'http://localhost:8080/api/images/' + friend.profileImage" alt="">
+ </div>
+ <div v-else class="avatar">
+ <img :src="'../src/assets/userprofile.png'" alt="">
+ </div>
+ </div>
+ <h3><a href="#" class="btn stretched-link" id="profileName"
+ @click="navigateToFriend(friend.id)">{{
+ friend.firstName }}</a></h3>
+ <div class="desc">{{ friend.firstName }} {{ friend.lastName }}</div>
+ <div class="contacts">
+ <a class="text removeFriend" data-bs-toggle="collapse"
+ :href="'#collapseExample' + friend.id" role="button" aria-expanded="false"
+ :aria-controls="'collapseExample' + friend.id">
+ See more
+ </a>
+ <div class="collapse" :id="'collapseExample' + friend.id">
+ <button class="btn btn-danger" @click="removeFriend(friend.id)">
+ <h5><img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove
+ friend
+ </h5>
+ </button>
+ </div>
+ </div>
</div>
</div>
- <h3><a href="#" class="btn stretched-link" id="profileName" @click="navigateToFriend(friend.id)">{{ friend.firstName }}</a></h3>
- <div class="desc">{{ friend.firstName }} {{ friend.lastName }}</div>
- <div class="contacts">
- <a class="text removeFriend" data-bs-toggle="collapse"
- :href="'#collapseExample' + friend.id" role="button" aria-expanded="false" :aria-controls="'collapseExample' + friend.id">
- See more
- </a>
- <div class="collapse" :id="'collapseExample' + friend.id">
- <button class="btn btn-danger" @click="removeFriend(friend.id)">
- <h5><img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
- </button>
+ </div>
+ </div>
+ <div v-else>No Friends</div>
+ </div>
+ <div v-else-if="showRequests" class="row">
+ <div class="content-body">
+ <div v-if="elementsInFriendRequest" id="requests">
+ <div class="request" v-for="(friend) in friendRequests" :key="friend.id">
+ <div v-if="friend.profileImage !== null"><img id="profilePicture"
+ :src="'http://localhost:8080/api/images/' + friend.profileImage" alt="user"
+ class="profile-photo-lg"></div>
+ <div v-else><img id="profilePicture" :src="'../src/assets/userprofile.png'" alt="user"
+ class="profile-photo-lg"></div>
+ <h2>{{ friend.firstName }}</h2> - <button class="btn btn-success mx-2"
+ @click="acceptRequest(friend.id)">Accept</button>
+ <button class="btn btn-danger" @click="rejectRequest(friend.id)">Reject</button>
+ </div>
+ </div>
+ <div v-else>No friend requests</div>
+ </div>
+ </div>
+ <div v-if="showAddFriend" class="modal" tabindex="-1" role="dialog"
+ style="display:block; background-color: rgba(0,0,0,0.5);">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title">Add Friend</h5>
+ <button type="button" class="close" @click="showAddFriend = false">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body d-flex justify-content-center align-items-center flex-column">
+ <form class="col-md-10 d-flex justify-content-center align-items-center flex-row my-4"
+ id="searchBox" role="search" @submit.prevent="searchProfile(searchWord)">
+ <input class="form-control me-2 custom-border" type="search" placeholder="Search"
+ aria-label="Search" v-model="searchWord">
+ <button class="btn btn-success" type="submit">Search</button>
+ </form>
+ <div class="col-md-12">
+ <div class="people-nearby">
+ <div v-for="user in searchedUsers" :key="user.id" class="nearby-user">
+ <div class="row d-flex align-items-center">
+ <div class="col-md-2 col-sm-2">
+ <div v-if="user.profileImage !== null"><img id="profilePicture"
+ :src="'http://localhost:8080/api/images/' + user.profileImage"
+ alt="user" class="profile-photo-lg"></div>
+ <div v-else><img id="profilePicture" :src="'../src/assets/userprofile.png'"
+ alt="user" class="profile-photo-lg"></div>
+
+ </div>
+ <div class="col-md-7 col-sm-7">
+ <h5><a href="#" class="profile-link" @click="toUserProfile(user.id)">{{
+ user.firstName }}</a>
+ </h5>
+ </div>
+ <div class="col-md-3 col-sm-3">
+ <button class="btn btn-primary pull-right" @click="addFriend(user.id)">Add
+ Friend</button>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -37,14 +116,70 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
-import { FriendService } from '@/api';
+import { FriendService, UserService } from '@/api';
import type { UserDTO } from '@/api';
const router = useRouter();
const friends = ref();
+const showFriends = ref(true);
+const showRequests = ref(false);
+const showAddFriend = ref(false);
+const friendRequests = ref([] as any);
+const addFriends = ref([] as any);
+const searchedUsers = ref([] as any);
+
+const searchWord = ref("");
-function addFriend() {
- router.push('/add-friend');
+const elementsInFriendRequest = ref(false);
+const elementsInFriends = ref(false);
+
+const toUserProfile = (userId: number) => {
+ router.push('/profile/' + userId);
+};
+
+const searchProfile = async (searchTerm: string) => {
+ const userPayload = {
+ searchTerm: searchTerm as string,
+ filter: 'NON_FRIENDS' as string,
+ };
+ try {
+ const response = await UserService.getUsersByNameAndFilter(userPayload);
+ searchedUsers.value = response;
+ console.log(response);
+ } catch (error) {
+ console.error('Failed to search for profile', error);
+ }
+};
+
+const addNewFriends = async () => {
+ const userPayload = {
+ amount: 6 as number,
+ filter: 'NON_FRIENDS' as string,
+ };
+ try {
+ const response = await UserService.getRandomUsers(userPayload);
+ searchedUsers.value = response;
+ showAddFriend.value = true;
+ } catch (error) {
+ console.error('Failed to add friend', error);
+ }
+};
+
+async function addFriend(friendID: number) {
+ const response = await FriendService.addFriendRequest({ userId: friendID });
+}
+
+async function requestFriend() {
+ showRequests.value = true;
+ showFriends.value = false;
+ try {
+ const response = await FriendService.getFriendRequests();
+ friendRequests.value = response;
+ elementsInFriendRequest.value = response.length > 0;
+ console.log("Friend requests: " + response);
+ } catch (error) {
+ console.error('Failed to fetch friend requests', error);
+ }
}
const navigateToFriend = (friendID: number) => {
@@ -53,26 +188,49 @@ const navigateToFriend = (friendID: number) => {
const removeFriend = async (friendID: number) => {
try {
- // Attempt to delete the friend from the backend.
await FriendService.deleteFriendOrFriendRequest({ friendId: friendID });
- // Update the friends list by filtering out the removed friend.
- friends.value = friends.value.filter((friend: UserDTO) => friend.id !== friendID);
+ const responseFriends = await FriendService.getFriends();
+ friends.value = responseFriends;
} catch (error) {
console.error('Failed to remove friend', error);
}
};
-
const setupFriends = async () => {
+ showFriends.value = true;
+ showRequests.value = false;
try {
const response = await FriendService.getFriends();
friends.value = response;
+ elementsInFriends.value = response.length > 0;
console.log(response);
} catch (error) {
console.error('Failed to fetch friends', error);
}
};
+const acceptRequest = async (requestID: number) => {
+ try {
+ await FriendService.acceptFriendRequest({ friendId: requestID });
+ const responseRequest = await FriendService.getFriendRequests();
+ friendRequests.value = responseRequest;
+ const responseFriends = await FriendService.getFriends();
+ friends.value = responseFriends;
+ } catch (error) {
+ console.error('Failed to accept friend request', error);
+ }
+};
+
+const rejectRequest = async (requestID: number) => {
+ try {
+ await FriendService.deleteFriendOrFriendRequest({ friendId: requestID });
+ const response = await FriendService.getFriendRequests();
+ friendRequests.value = response;
+ } catch (error) {
+ console.error('Failed to reject friend request', error);
+ }
+};
+
onMounted(() => {
setupFriends();
});
@@ -374,4 +532,39 @@ ul.friend-list .right p {
font-weight: 600;
width: 100%;
}
+
+#requests {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.request {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 1rem;
+}
+
+#profilePicture {
+ width: 70px;
+ height: 70px;
+ border-radius: 50%;
+ margin-right: 1rem;
+ border: 2px solid #000;
+}
+
+.modal-content {
+ padding: 1rem;
+}
+
+.modal-header {
+ margin-bottom: 5px;
+}
+
+.pages {
+ border-bottom: 1px solid #000;
+ border-radius: 0px;
+ margin: 0px 5px;
+}
</style>
\ No newline at end of file