From 7f8709516d82cb65ed62b69a59463e13ecfa0dc5 Mon Sep 17 00:00:00 2001
From: Torsten Schulz <tsschulz@gmx.net>
Date: Sun, 27 Oct 2024 13:14:05 +0100
Subject: [PATCH] Friendship management added

---
 .../controllers/socialnetworkController.js    |  41 ++++++-
 backend/models/associations.js                |   6 +
 backend/models/community/friendship.js        |  37 ++++++
 backend/models/index.js                       |   2 +
 backend/routers/socialnetworkRouter.js        |  45 ++++----
 backend/services/socialnetworkService.js      | 106 +++++++++++++++++-
 .../public/images/icons/cancel-friendship.png | Bin 0 -> 11858 bytes
 .../images/icons/request-friendship.png       | Bin 0 -> 11130 bytes
 frontend/src/App.vue                          |   8 +-
 frontend/src/components/DialogWidget.vue      |  18 ++-
 .../socialnetwork/UserProfileDialog.vue       | 105 ++++++++++++++++-
 .../src/dialogues/standard/MessageDialog.vue  |  52 +++++++++
 .../src/i18n/locales/de/socialnetwork.json    |  17 +++
 13 files changed, 406 insertions(+), 31 deletions(-)
 create mode 100644 backend/models/community/friendship.js
 create mode 100644 frontend/public/images/icons/cancel-friendship.png
 create mode 100644 frontend/public/images/icons/request-friendship.png
 create mode 100644 frontend/src/dialogues/standard/MessageDialog.vue

diff --git a/backend/controllers/socialnetworkController.js b/backend/controllers/socialnetworkController.js
index 0f79d4c..29ca110 100644
--- a/backend/controllers/socialnetworkController.js
+++ b/backend/controllers/socialnetworkController.js
@@ -23,6 +23,9 @@ class SocialNetworkController {
         this.updateDiaryEntry = this.updateDiaryEntry.bind(this);
         this.deleteDiaryEntry = this.deleteDiaryEntry.bind(this);
         this.getDiaryEntries = this.getDiaryEntries.bind(this);
+        this.addFriend = this.addFriend.bind(this);
+        this.removeFriend = this.removeFriend.bind(this);
+        this.acceptFriendship = this.acceptFriendship.bind(this);
     }
 
     async userSearch(req, res) {
@@ -278,7 +281,7 @@ class SocialNetworkController {
 
     async getDiaryEntries(req, res) {
         try {
-            const { userid: userId} = req.headers;
+            const { userid: userId } = req.headers;
             const { page } = req.params;
             const entries = await this.socialNetworkService.getDiaryEntries(userId, page);
             res.status(200).json(entries);
@@ -287,6 +290,42 @@ class SocialNetworkController {
             res.status(500).json({ error: error.message });
         }
     }
+
+    async addFriend(req, res) {
+        try {
+            const { userid: hashedUserid } = req.headers;
+            const { friendUserid } = req.body;
+            await this.socialNetworkService.addFriend(hashedUserid, friendUserid);
+            res.status(201).json({ message: 'added' });
+        } catch (error) {
+            console.error('Error in addFriend:', error);
+            res.status(500).json({ error: error.message });
+        }
+    }
+
+    async removeFriend(req, res) {
+        try {
+            const { userid: hashedUserid } = req.headers;
+            const { friendUserid } = req.params;
+            await this.socialNetworkService.removeFriend(hashedUserid, friendUserid);
+            res.status(200).json({ message: 'removed' });
+        } catch (error) {
+            console.error('Error in removeFriend:', error);
+            res.status(500).json({ error: error.message });
+        }
+    }
+
+    async acceptFriendship(req, res) {
+        try {
+            const { userid: hashedUserid } = req.headers;
+            const { friendUserid } = req.params;
+            await this.socialNetworkService.acceptFriendship(hashedUserid, friendUserid);
+            res.status(200).json({ message: 'accepted' });
+        } catch (error) {
+            console.error('Error in acceptFriendship:', error);
+            res.status(500).json({ error: error.message });
+        }
+    }
 }
 
 export default SocialNetworkController;
diff --git a/backend/models/associations.js b/backend/models/associations.js
index 5508905..edfc167 100644
--- a/backend/models/associations.js
+++ b/backend/models/associations.js
@@ -27,6 +27,7 @@ import TitleHistory from './forum/title_history.js';
 import ForumPermission from './forum/forum_permission.js';
 import ForumUserPermission from './forum/forum_user_permission.js';
 import ForumForumPermission from './forum/forum_forum_permission.js';
+import Friendship from './community/friendship.js';
 
 export default function setupAssociations() {
     // UserParam related associations
@@ -156,4 +157,9 @@ export default function setupAssociations() {
 
     ForumPermission.hasMany(ForumUserPermission, { foreignKey: 'permissionId' });
     ForumUserPermission.belongsTo(ForumPermission, { foreignKey: 'permissionId' });
+
+    Friendship.belongsTo(User, { foreignKey: 'user1Id', as: 'friendSender' });
+    Friendship.belongsTo(User, { foreignKey: 'user2Id', as: 'friendReceiver' });
+    User.hasMany(Friendship, { foreignKey: 'user1Id', as: 'friendSender' });
+    User.hasMany(Friendship, { foreignKey: 'user2Id', as: 'friendReceiver' });
 }
diff --git a/backend/models/community/friendship.js b/backend/models/community/friendship.js
new file mode 100644
index 0000000..50e50fa
--- /dev/null
+++ b/backend/models/community/friendship.js
@@ -0,0 +1,37 @@
+import { sequelize } from '../../utils/sequelize.js';
+import { DataTypes } from 'sequelize';
+
+const Friendship = sequelize.define('friendship', {
+    id: {
+        type: DataTypes.INTEGER,
+        primaryKey: true,
+        autoIncrement: true
+    },
+    user1Id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+    },
+    user2Id: {
+        type: DataTypes.INTEGER,
+        allowNull: false
+    },
+    accepted: {
+        type: DataTypes.BOOLEAN,
+        defaultValue: false
+    },
+    denied: {
+        type: DataTypes.BOOLEAN,
+        defaultValue: false
+    },
+    withdrawn: {
+        type: DataTypes.BOOLEAN,
+        defaultValue: false
+    }
+}, {
+    tableName: 'friendship',
+    schema: 'community',
+    underscored: true,
+    timestamps: true,
+});
+
+export default Friendship;
diff --git a/backend/models/index.js b/backend/models/index.js
index 68a4df4..ee27131 100644
--- a/backend/models/index.js
+++ b/backend/models/index.js
@@ -31,6 +31,7 @@ import Message from './forum/message.js';
 import MessageHistory from './forum/message_history.js';
 import MessageImage from './forum/message_image.js';
 import ForumForumPermission from './forum/forum_forum_permission.js';
+import Friendship from './community/friendship.js';
 
 const models = {
     SettingsType,
@@ -66,6 +67,7 @@ const models = {
     Message,
     MessageHistory,
     MessageImage,
+    Friendship,
 };
 
 export default models;
diff --git a/backend/routers/socialnetworkRouter.js b/backend/routers/socialnetworkRouter.js
index 017b35d..ba8d3de 100644
--- a/backend/routers/socialnetworkRouter.js
+++ b/backend/routers/socialnetworkRouter.js
@@ -7,25 +7,30 @@ const upload = multer();
 const router = express.Router();
 const socialNetworkController = new SocialNetworkController();
 
-router.post('/usersearch', authenticate, socialNetworkController.userSearch);
-router.get('/profile/main/:userId', authenticate, socialNetworkController.profile);
-router.post('/folders/:folderId', authenticate, socialNetworkController.createFolder);
-router.get('/folders', authenticate, socialNetworkController.getFolders);
-router.get('/folder/:folderId', authenticate, socialNetworkController.getFolderImageList);
-router.post('/images', authenticate, upload.single('image'), socialNetworkController.uploadImage);
-router.get('/images/:imageId', authenticate, socialNetworkController.getImage);
-router.put('/images/:imageId', authenticate, socialNetworkController.changeImage);
-router.get('/imagevisibilities', authenticate, socialNetworkController.getImageVisibilityTypes);
-router.get('/image/:hash', authenticate, socialNetworkController.getImageByHash);
-router.get('/profile/images/folders/:username', authenticate, socialNetworkController.getFoldersByUsername);
-router.delete('/folders/:folderId', authenticate, socialNetworkController.deleteFolder);
-router.post('/guestbook/entries', authenticate, upload.single('image'), socialNetworkController.createGuestbookEntry);
-router.get('/guestbook/entries/:username/:page', authenticate, socialNetworkController.getGuestbookEntries);
-router.delete('/guestbook/entries/:entryId', authenticate, socialNetworkController.deleteGuestbookEntry);
-router.get('/guestbook/image/:guestbookUserName/:entryId', authenticate, socialNetworkController.getGuestbookImage);
-router.post('/diary', authenticate, socialNetworkController.createDiaryEntry);
-router.put('/diary/:diaryEntryId', authenticate, socialNetworkController.updateDiaryEntry);
-router.delete('/diary/:entryId', authenticate, socialNetworkController.deleteDiaryEntry);
-router.get('/diary/:page', authenticate, socialNetworkController.getDiaryEntries);
+router.use(authenticate);
+
+router.post('/usersearch', socialNetworkController.userSearch);
+router.get('/profile/main/:userId', socialNetworkController.profile);
+router.post('/folders/:folderId', socialNetworkController.createFolder);
+router.get('/folders', socialNetworkController.getFolders);
+router.get('/folder/:folderId', socialNetworkController.getFolderImageList);
+router.post('/images', upload.single('image'), socialNetworkController.uploadImage);
+router.get('/images/:imageId', socialNetworkController.getImage);
+router.put('/images/:imageId', socialNetworkController.changeImage);
+router.get('/imagevisibilities', socialNetworkController.getImageVisibilityTypes);
+router.get('/image/:hash', socialNetworkController.getImageByHash);
+router.get('/profile/images/folders/:username', socialNetworkController.getFoldersByUsername);
+router.delete('/folders/:folderId', socialNetworkController.deleteFolder);
+router.post('/guestbook/entries', upload.single('image'), socialNetworkController.createGuestbookEntry);
+router.get('/guestbook/entries/:username/:page', socialNetworkController.getGuestbookEntries);
+router.delete('/guestbook/entries/:entryId', socialNetworkController.deleteGuestbookEntry);
+router.get('/guestbook/image/:guestbookUserName/:entryId', socialNetworkController.getGuestbookImage);
+router.post('/diary', socialNetworkController.createDiaryEntry);
+router.put('/diary/:diaryEntryId', socialNetworkController.updateDiaryEntry);
+router.delete('/diary/:entryId', socialNetworkController.deleteDiaryEntry);
+router.get('/diary/:page', socialNetworkController.getDiaryEntries);
+router.post('/friend', socialNetworkController.addFriend);
+router.delete('/friend/:friendUserId', socialNetworkController.removeFriend);
+router.put('/friend/:friendUserId', socialNetworkController.acceptFriendship);
 
 export default router;
diff --git a/backend/services/socialnetworkService.js b/backend/services/socialnetworkService.js
index c795f75..d6d8827 100644
--- a/backend/services/socialnetworkService.js
+++ b/backend/services/socialnetworkService.js
@@ -23,6 +23,7 @@ import { JSDOM } from 'jsdom';
 import DOMPurify from 'dompurify';
 import sharp from 'sharp';
 import Diary from '../models/community/diary.js';
+import Friendship from '../models/community/friendship.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -347,7 +348,15 @@ class SocialNetworkService extends BaseService {
                         { model: UserParamType, as: 'paramType' },
                         { model: UserParamVisibility, as: 'param_visibilities', include: [{ model: UserParamVisibilityType, as: 'visibility_type' }] }
                     ],
-                    order: [['order_id', 'asc']]
+                    order: [['order_id', 'asc']],
+                },
+                {
+                    model: Friendship,
+                    as: 'friendSender',
+                },
+                {
+                    model: Friendship,
+                    as: 'friendReceiver',
                 }
             ]
         });
@@ -370,9 +379,26 @@ class SocialNetworkService extends BaseService {
                 };
             }
         }
+        let friendship = null;
+        if (user.friendSender && user.friendSender.length > 0) {
+            friendship = {
+                isSender: true,
+                accepted: user.friendSender[0].dataValues.accepted,
+                denied: user.friendSender[0].dataValues.denied,
+                withdrawn: user.friendSender[0].dataValues.withdrawn,
+            }
+        } else if (user.friendReceiver && user.friendReceiver.length > 0) {
+            friendship = {
+                isSender: false,
+                accepted: user.friendReceiver[0].dataValues.accepted,
+                denied: user.friendReceiver[0].dataValues.denied,
+                withdrawn: user.friendReceiver[0].dataValues.withdrawn,
+            }
+        }
         return {
             username: user.username,
             registrationDate: user.registrationDate,
+            friendship: friendship,
             params: userParams
         };
     }
@@ -707,5 +733,83 @@ class SocialNetworkService extends BaseService {
         });
         return { entries: entries.rows, totalPages: Math.ceil(entries.count / 20) };
     }
+
+    async addFriend(hashedUserid, friendUserid) {
+        const requestingUserId = await this.checkUserAccess(hashedUserid);
+        const friend = await this.loadUserByHash(friendUserid);
+        if (!friend) {
+            throw new Error('notfound');
+        }
+        const friendship = await Friendship.findOne({
+            where: {
+                [Op.or]: [
+                    { user1Id: requestingUserId, user2Id: friend.id },
+                    { user1Id: friend.id, user2Id: requestingUserId }
+                ]
+            }
+        });
+        if (friendship) {
+            if (friendship.withdrawn) {
+                friendship.withdrawn = false;
+
+            } else {
+                throw new Error('alreadyexists');
+            }
+        } else {
+            await Friendship.create({ user1Id: requestingUserId, user2Id: friend.id });
+        }
+        return { accepted: false, withdrawn: false, denied: false };
+    }
+
+    async removeFriend(hashedUserid, friendUserid) {
+        const requestingUserId = await this.checkUserAccess(hashedUserid);
+        const friend = await this.loadUserByHash(friendUserid);
+        if (!friend) {
+            throw new Error('notfound');
+        }
+        const friendship = await Friendship.findOne({
+            where: {
+                [Op.or]: [
+                    { user1Id: requestingUserId, user2Id: friend.id },
+                    { user1Id: friend.id, user2Id: requestingUserId }
+                ]
+            }
+        });
+        if (!friendship) {
+            throw new Error('notfound');
+        }
+        if (friendship.user1Id === requestingUserId) {
+            friendship.update({ withdrawn: true })
+        } else {
+            friendship.update({ denied: true });
+        }
+        return true;
+    }
+
+    async acceptFriendship(hashedUserid, friendUserid) {
+        const requestingUserId = await this.checkUserAccess(hashedUserid);
+        const friend = await this.loadUserByHash(friendUserid);
+        if (!friend) {
+            throw new Error('notfound');
+        }
+        const friendship = await Friendship.findOne({
+            where: {
+                [Op.or]: [
+                    { user1Id: requestingUserId, user2Id: friend.id },
+                    { user1Id: friend.id, user2Id: requestingUserId }
+                ]
+            }
+        });
+        if (!friendship) {
+            throw new Error('notfound');
+        }
+        if (friendship.user1Id === requestingUserId && friendship.withdrawn) {
+            friendship.update({ withdrawn: false });
+        } else if (friendship.user2Id === requestingUserId && friendship.denied) {
+            friendship.update({ denied: false, accepted: true });
+        } else {
+            throw new Error('notfound');
+        }
+    }
 }
 export default SocialNetworkService;
diff --git a/frontend/public/images/icons/cancel-friendship.png b/frontend/public/images/icons/cancel-friendship.png
new file mode 100644
index 0000000000000000000000000000000000000000..e10a26838d4a482e44537faa34b0579fa6d07ea5
GIT binary patch
literal 11858
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

literal 0
HcmV?d00001

diff --git a/frontend/public/images/icons/request-friendship.png b/frontend/public/images/icons/request-friendship.png
new file mode 100644
index 0000000000000000000000000000000000000000..a737557995366d11bea81d325c36afb820b64ddb
GIT binary patch
literal 11130
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

literal 0
HcmV?d00001

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 2a106ad..fab6ec0 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,13 +8,15 @@
     <RandomChatDialog ref="randomChatDialog" />
     <CreateFolderDialog ref="createFolderDialog" />
     <EditImageDialog ref="editImageDialog" />
-    <UserProfileDialog ref="userProfileDialog" :userId="'0'"/>
+    <UserProfileDialog ref="userProfileDialog" :userId="'0'" />
     <ChooseDialog ref="chooseDialog" />
     <ContactDialog ref="contactDialog" />
     <DataPrivacyDialog ref="dataPrivacyDialog" />
     <ErrorDialog ref="errorDialog" />
     <ImprintDialog ref="imprintDialog" />
-    <ShowImageDialog ref="showImageDialog" /></div>
+    <ShowImageDialog ref="showImageDialog" />
+    <MessageDialog ref="messageDialog" />
+  </div>
 </template>
 
 <script>
@@ -34,6 +36,7 @@ import DataPrivacyDialog from './dialogues/standard/DataPrivacyDialog.vue';
 import ErrorDialog from './dialogues/standard/ErrorDialog.vue';
 import ImprintDialog from './dialogues/standard/ImprintDialog.vue';
 import ShowImageDialog from './dialogues/socialnetwork/ShowImageDialog.vue';
+import MessageDialog from './dialogues/standard/MessageDialog.vue';
 
 export default {
   name: 'App',
@@ -59,6 +62,7 @@ export default {
     ErrorDialog,
     ImprintDialog,
     ShowImageDialog,
+    MessageDialog,
   },
   created() {
     this.$store.dispatch('loadLoginState');
diff --git a/frontend/src/components/DialogWidget.vue b/frontend/src/components/DialogWidget.vue
index 91f550e..e06aa77 100644
--- a/frontend/src/components/DialogWidget.vue
+++ b/frontend/src/components/DialogWidget.vue
@@ -1,5 +1,6 @@
 <template>
-  <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal, 'is-active': isActive }]" @click.self="handleOverlayClick">
+  <div v-if="visible" :class="['dialog-overlay', { 'non-modal': !modal, 'is-active': isActive }]"
+    @click.self="handleOverlayClick">
     <div class="dialog" :class="{ minimized: minimized }"
       :style="{ width: dialogWidth, height: dialogHeight, top: dialogTop, left: dialogLeft, position: 'absolute' }"
       v-if="!minimized" ref="dialog">
@@ -11,7 +12,7 @@
         <span v-if="!modal" class="dialog-minimize" @click="minimize">_</span>
         <span v-if="showClose" class="dialog-close" @click="close">✖</span>
       </div>
-      <div class="dialog-body">
+      <div class="dialog-body" :style="{ '--dialog-display': display }">
         <slot></slot>
       </div>
       <div class="dialog-footer">
@@ -62,6 +63,10 @@ export default {
     isTitleTranslated: {
       type: Boolean,
       default: false
+    },
+    display: {
+      type: String,
+      default: 'block'
     }
   },
   data() {
@@ -170,7 +175,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .dialog-overlay {
   position: fixed;
   top: 0;
@@ -236,9 +241,13 @@ export default {
   flex-grow: 1;
   padding: 20px;
   overflow-y: auto;
+  display: var(--dialog-display);
+  &[style*="--dialog-display: flex"] {
+    flex-direction: column;
+  }
 }
 
-.dialog-footer {
+dialog-footer {
   display: flex;
   justify-content: flex-end;
   padding: 10px 20px;
@@ -261,6 +270,7 @@ export default {
   color: #7E471B;
   border: 1px solid #7E471B;
 }
+
 .is-active {
   z-index: 990;
 }
diff --git a/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue b/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
index e51c263..c89eccc 100644
--- a/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
+++ b/frontend/src/dialogues/socialnetwork/UserProfileDialog.vue
@@ -1,8 +1,15 @@
 <template>
     <DialogWidget ref="dialog" :title="$t('socialnetwork.profile.pretitle')" :isTitleTranslated="isTitleTranslated"
         :show-close="true" :buttons="[{ text: 'Ok', action: 'close' }]" :modal="false" @close="closeDialog" height="75%"
-        name="UserProfileDialog">
-        <div class="dialog-body">
+        name="UserProfileDialog" display="flex">
+        <div class="activities">
+            <span>{{ $t(`socialnetwork.friendship.state.${friendshipState}`) }}</span>
+            <img v-if="['none', 'denied', 'withdrawn'].includes(friendshipState)" src="/images/icons/request-friendship.png"
+                @click="handleFriendship()" />
+            <img v-else-if="['accepted', 'open']" src="/images/icons/cancel-friendship.png"
+                @click="handleFriendship()" />
+        </div>
+        <div class="profile-content">
             <div>
                 <ul class="tab-list">
                     <li v-for="tab in tabs" :key="tab.name" :class="{ active: activeTab === tab.name }"
@@ -137,6 +144,8 @@ export default {
                 menubar: 'edit format table',
                 promotion: false,
             },
+            hasSendFriendshipRequest: false,
+            friendshipState: 'none',
         };
     },
     methods: {
@@ -148,6 +157,7 @@ export default {
             try {
                 const response = await apiClient.get(`/api/socialnetwork/profile/main/${this.userId}`);
                 this.userProfile = response.data;
+                this.setFriendshipStatus(response.data.friendship);
                 const newTitle = this.$t('socialnetwork.profile.title').replace('<username>', this.userProfile.username);
                 this.$refs.dialog.updateTitle(newTitle, false);
                 if (this.activeTab === 'images') {
@@ -300,7 +310,6 @@ export default {
         },
         async fetchGuestbookImage(guestbookOwnerName, entry) {
             try {
-                console.log(entry, guestbookOwnerName);
                 const response = await apiClient.get(`/api/socialnetwork/guestbook/image/${guestbookOwnerName}/${entry.id}`, {
                     responseType: 'blob',
                 });
@@ -309,11 +318,75 @@ export default {
                 console.error('Error fetching image:', error);
             }
         },
+        async handleFriendship() {
+            console.log(this.friendshipState);
+            if (this.friendshipState === 'none') {
+                this.requestFriendship();
+            } else if (this.friendshipState === 'waiting') {
+                this.cancelFriendship();
+            } else if (this.friendshipState === 'accepted') {
+                this.cancelFriendship();
+            } else if (this.friendshipState === 'denied') {
+                this.acceptFriendship();
+            }
+        },
+        async requestFriendship() {
+            try {
+                const response = await apiClient.post('/api/socialnetwork/friend', {
+                    friendUserid: this.userId,
+                });
+                this.setFriendshipStatus(response.data);
+                this.$root.$refs.messageDialog.open('tr:socialnetwork.friendship.added');
+            } catch(error) {
+                this.$root.$refs.errorDialog.open(`tr:socialnetwork.friendship.error.${error.response.data.error}`);
+            }
+        },
+        async cancelFriendship() {
+            try {
+                await apiClient.delete(`/api/socialnetwork/friend/${this.userId}`);
+                this.setFriendshipStatus(null);
+                const type = this.friendshipState === 'waiting' ? 'withdrawn' : 'denied'
+                this.$root.$refs.messageDialog.open(`tr:socialnetwork.friendship.${type}`);
+            } catch(error) {
+                this.$root.$refs.errorDialog.open(`tr:socialnetwork.friendship.error.${error.response.data.error}`);
+            }
+        },
+        async acceptFriendship() {
+            try {
+                await apiClient.put(`/api/socialnetwork/friend/${this.userId}`);
+                this.setFriendshipStatus(null);
+                this.$root.$refs.messageDialog.open('Freundschaftsanfrage akzeptiert');
+            } catch(error) {
+                this.$root.$refs.errorDialog.open(`tr:socialnetwork.friendship.error.${error.response.data.error}`);
+            }
+        },
+        setFriendshipStatus(friendshipStates) {
+            if (!friendshipStates) {
+                this.friendshipState = 'none';
+                return;
+            }
+            this.hasSendFriendshipRequest = friendshipStates.isSender;
+            if (friendshipStates.accepted) {
+                this.friendshipState = 'accepted'
+            } else if (friendshipStates.denied) {
+                this.friendshipState = 'denied';
+            } else if (friendshipStates.withdrawn) {
+                this.friendshipState = 'withdrawn';
+            } else if (!friendshipStates.isSender) {
+                this.friendshipState = 'open';
+            } else {
+                this.friendshipState = 'waiting';
+            }
+        }
     }
 };
 </script>
 
 <style scoped>
+.dialog-body > div:first-child {
+    display: block;
+}
+
 .tab-list {
     list-style-type: none;
     padding: 0;
@@ -431,4 +504,30 @@ export default {
 .pagination button {
     margin: 0 10px;
 }
+
+.activities {
+    background-color: #F9A22C;
+    margin: -20px -20px 0 -20px;
+    height: 26px !important;
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+.activities > span:first-child {
+    flex: 1;
+}
+
+.activities > img {
+    cursor: pointer;
+}
+
+.userprofile-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.profile-content {
+    flex: 1;
+    overflow: auto;
+}
 </style>
diff --git a/frontend/src/dialogues/standard/MessageDialog.vue b/frontend/src/dialogues/standard/MessageDialog.vue
new file mode 100644
index 0000000..ff9457c
--- /dev/null
+++ b/frontend/src/dialogues/standard/MessageDialog.vue
@@ -0,0 +1,52 @@
+<template>
+    <DialogWidget ref="dialog" title="message.title" :show-close="true" :buttons="buttons" :modal="true" width="25em"
+        height="15em" name="MessageDialog" :isTitleTranslated=true>
+        <div class="message-content">
+            <p>{{ translatedMessage }}</p>
+        </div>
+    </DialogWidget>
+</template>
+
+<script>
+import DialogWidget from '@/components/DialogWidget.vue';
+
+export default {
+    name: 'MessageDialog',
+    components: {
+        DialogWidget,
+    },
+    data() {
+        return {
+            message: '',
+            buttons: [
+                { text: 'message.close', action: 'close' }
+            ]
+        };
+    },
+    computed: {
+        translatedMessage() {
+            if (this.message.startsWith('tr:')) {
+                return this.$t(this.message.substring(3));
+            }
+            return this.message;
+        }
+    },
+    methods: {
+        open(message) {
+            this.message = message;
+            this.$refs.dialog.open();
+        },
+        close() {
+            this.$refs.dialog.close();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.message-content {
+    padding: 1em;
+    color: #000000;
+    text-align: center;
+}
+</style>
diff --git a/frontend/src/i18n/locales/de/socialnetwork.json b/frontend/src/i18n/locales/de/socialnetwork.json
index b32677e..3edea90 100644
--- a/frontend/src/i18n/locales/de/socialnetwork.json
+++ b/frontend/src/i18n/locales/de/socialnetwork.json
@@ -231,6 +231,23 @@
                 "page": "Seite <<page>> von <<of>>"
             },
             "createNewMesssage": "Antwort senden"
+        },
+        "friendship": {
+            "error": {
+                "alreadyexists": "Die Freundschaftsanfrage existiert bereits"
+            },
+            "state": {
+                "none": "Nicht befreundet",
+                "waiting": "Freundschaftsanfrage gesendet, aber nicht beantwortet",
+                "open": "Freundschaft wurde angefragt",
+                "denied": "Freundschaftsanfrage abgelehnt",
+                "withdrawn": "Freundschaftsanfrage zurückgezogen",
+                "accepted": "Befreundet"
+            },
+            "added": "Du hast eine Freundschaftsanfrage gestellt.",
+            "withdrawn": "Du hast Deine Freundschaftsanfrage zurückgezogen.",
+            "denied": "Du hast die Freundschaftsanfrage abgelehnt.",
+            "accepted": "Die Freundschaft wurde geschlossen."
         }
     }
 }
\ No newline at end of file