resolve conflicts

backend/src/db/graphql/groups.js

@@ -161,15 +161,17 @@ export const groupQuery = gql`
       description
       groupType
       actionRadius
-      myRole
       categories {
         id
         slug
         name
         icon
       }
-      # avatar # test this as result
+      avatar {
+        url
+      }
       # locationName # test this as result
+      myRole
     }
   }
 `

backend/src/middleware/sluggifyMiddleware.js

@@ -31,7 +31,9 @@ export default {
       return resolve(root, args, context, info)
     },
     UpdateGroup: async (resolve, root, args, context, info) => {
+      if (args.name) {
         args.slug = args.slug || (await uniqueSlug(args.name, isUniqueFor(context, 'Group')))
+      }
       return resolve(root, args, context, info)
     },
     CreatePost: async (resolve, root, args, context, info) => {
@@ -39,6 +41,7 @@ export default {
       return resolve(root, args, context, info)
     },
     UpdatePost: async (resolve, root, args, context, info) => {
+      // TODO: is this absolutely correct, see condition in 'UpdateGroup' above? may it works accidentally, because args.slug is always send?
       args.slug = args.slug || (await uniqueSlug(args.title, isUniqueFor(context, 'Post')))
       return resolve(root, args, context, info)
     },

backend/src/schema/resolvers/groups.js

@@ -137,6 +137,7 @@ export default {
       const { categoryIds } = params
       const { id: groupId, avatar: avatarInput } = params
       delete params.categoryIds
+      delete params.avatar
       if (CONFIG.CATEGORIES_ACTIVE && categoryIds) {
         if (categoryIds.length < CATEGORIES_MIN) {
           throw new UserInputError('Too view categories!')
@@ -270,6 +271,9 @@ export default {
       hasMany: {
         categories: '-[:CATEGORIZED]->(related:Category)',
       },
+      hasOne: {
+        avatar: '-[:AVATAR_IMAGE]->(related:Image)',
+      },
     }),
   },
 }

cypress/integration/Post.Comment/I_should_see_my_comment.js

@@ -5,7 +5,7 @@ Then("I should see my comment", () => {
     .should("contain", "Ocelot.social rocks")
     .get(".user-teaser span.slug")
     .should("contain", "@peter-pan") // specific enough
-    .get(".user-avatar img")
+    .get(".profile-avatar img")
     .should("have.attr", "src")
     .and("contain", 'https://') // some url
     .get(".user-teaser > .info > .text")

cypress/integration/UserProfile.Avatar/I_cannot_upload_a_picture.js

@@ -4,5 +4,5 @@ Then("I cannot upload a picture", () => {
   cy.get(".base-card")
     .children()
     .should("not.have.id", "customdropzone")
-    .should("have.class", "user-avatar");
+    .should("have.class", "profile-avatar");
 });

cypress/integration/UserProfile.Avatar/I_should_be_able_to_change_my_profile_picture.js

@@ -9,7 +9,7 @@ Then("I should be able to change my profile picture", () => {
       { subjectType: "drag-n-drop", force: true }
     );
   });
-  cy.get(".profile-avatar img")
+  cy.get(".profile-page-avatar img")
     .should("have.attr", "src")
     .and("contains", "onourjourney");
   cy.contains(".iziToast-message", "Upload successful")

webapp/components/AvatarMenu/AvatarMenu.spec.js

@@ -42,9 +42,9 @@ describe('AvatarMenu.vue', () => {
       wrapper = Wrapper()
     })
 
-    it('renders the UserAvatar component', () => {
+    it('renders the ProfileAvatar component', () => {
       wrapper.find('.avatar-menu-trigger').trigger('click')
-      expect(wrapper.find('.user-avatar').exists()).toBe(true)
+      expect(wrapper.find('.profile-avatar').exists()).toBe(true)
     })
 
     describe('given a userName', () => {

webapp/components/AvatarMenu/AvatarMenu.vue

@@ -11,7 +11,7 @@
         "
         @click.prevent="toggleMenu"
       >
-        <user-avatar :user="user" size="small" />
+        <profile-avatar :profile="user" size="small" />
         <base-icon class="dropdown-arrow" name="angle-down" />
       </a>
     </template>
@@ -50,12 +50,12 @@
 <script>
 import { mapGetters } from 'vuex'
 import Dropdown from '~/components/Dropdown'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   components: {
     Dropdown,
-    UserAvatar,
+    ProfileAvatar,
   },
   props: {
     placement: { type: String, default: 'top-end' },
@@ -130,7 +130,7 @@ export default {
   align-items: center;
   padding-left: $space-xx-small;
 
-  > .user-avatar {
+  > .profile-avatar {
     margin-right: $space-xx-small;
   }
 }

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -4,7 +4,7 @@ import ContributionForm from './ContributionForm.vue'
 import Vuex from 'vuex'
 import PostMutations from '~/graphql/PostMutations.js'
 
-import ImageUploader from '~/components/ImageUploader/ImageUploader'
+import ImageUploader from '~/components/Uploader/ImageUploader'
 import MutationObserver from 'mutation-observer'
 
 global.MutationObserver = MutationObserver

webapp/components/ContributionForm/ContributionForm.vue

@@ -83,7 +83,7 @@ import { mapGetters } from 'vuex'
 import HcEditor from '~/components/Editor/Editor'
 import PostMutations from '~/graphql/PostMutations.js'
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
-import ImageUploader from '~/components/ImageUploader/ImageUploader'
+import ImageUploader from '~/components/Uploader/ImageUploader'
 import links from '~/constants/links.js'
 import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
 

webapp/components/Uploader/AvatarUploader.spec.js

@@ -1,10 +1,10 @@
 import { shallowMount } from '@vue/test-utils'
 import Vue from 'vue'
-import Upload from '.'
+import AvatarUploader from './AvatarUploader'
 
 const localVue = global.localVue
 
-describe('Upload', () => {
+describe('AvatarUploader', () => {
   let wrapper
 
   const mocks = {
@@ -26,14 +26,14 @@ describe('Upload', () => {
   }
 
   const propsData = {
-    user: {
+    profile: {
       avatar: { url: '/api/generic.jpg' },
     },
   }
 
   beforeEach(() => {
     jest.useFakeTimers()
-    wrapper = shallowMount(Upload, { localVue, propsData, mocks })
+    wrapper = shallowMount(AvatarUploader, { localVue, propsData, mocks })
   })
 
   afterEach(() => {

webapp/components/Uploader/AvatarUploader.vue

@@ -10,8 +10,8 @@
     >
       <div class="dz-message" @mouseover="hover = true" @mouseleave="hover = false">
         <slot></slot>
-        <div class="hc-attachments-upload-area">
+        <div class="avatar-attachments-upload-area">
-          <div class="hc-drag-marker">
+          <div class="avatar-drag-marker">
             <base-icon v-if="hover" name="image" />
           </div>
         </div>
@@ -21,14 +21,15 @@
 </template>
 <script>
 import vueDropzone from 'nuxt-dropzone'
-import { updateUserMutation } from '~/graphql/User.js'
 
 export default {
+  name: 'AvatarUploader',
   components: {
     vueDropzone,
   },
   props: {
-    user: { type: Object, default: null },
+    profile: { type: Object, required: true },
+    updateMutation: { type: Object, required: true },
   },
   data() {
     return {
@@ -43,7 +44,7 @@ export default {
   },
   computed: {
     avatarUrl() {
-      const { avatar } = this.user
+      const { avatar } = this.profile
       return avatar && avatar.url
     },
   },
@@ -68,16 +69,16 @@ export default {
       const avatarUpload = file[0]
       this.$apollo
         .mutate({
-          mutation: updateUserMutation(),
+          mutation: this.updateMutation,
           variables: {
             avatar: {
               upload: avatarUpload,
             },
-            id: this.user.id,
+            id: this.profile.id,
           },
         })
         .then(() => {
-          this.$toast.success(this.$t('user.avatar.submitted'))
+          this.$toast.success(this.$t('profile.avatar.submitted'))
         })
         .catch((error) => this.$toast.error(error.message))
     },
@@ -115,7 +116,7 @@ export default {
   width: 100%;
 }
 
-.hc-attachments-upload-area {
+.avatar-attachments-upload-area {
   position: relative;
   display: flex;
   align-items: center;
@@ -123,11 +124,11 @@ export default {
   cursor: pointer;
 }
 
-.hc-attachments-upload-button {
+.avatar-attachments-upload-button {
   pointer-events: none;
 }
 
-.hc-drag-marker {
+.avatar-drag-marker {
   position: relative;
   width: 122px;
   height: 122px;
@@ -165,7 +166,7 @@ export default {
     border-radius: 100%;
     border: 1px dashed hsl(0, 0%, 25%);
   }
-  .hc-attachments-upload-area:hover & {
+  .avatar-attachments-upload-area:hover & {
     opacity: 1;
   }
 }

webapp/components/UserTeaser/UserTeaser.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="user-teaser" v-if="displayAnonymous">
-    <user-avatar v-if="showAvatar" size="small" />
+    <profile-avatar v-if="showAvatar" size="small" />
     <span class="info anonymous">{{ $t('profile.userAnonym') }}</span>
   </div>
   <div v-else :class="[{ 'disabled-content': user.disabled }]" placement="top-start">
     <nuxt-link :to="userLink" :class="['user-teaser']">
-      <user-avatar v-if="showAvatar" :user="user" size="small" />
+      <profile-avatar v-if="showAvatar" :profile="user" size="small" />
       <div class="info">
         <span class="text">
           <span class="slug">{{ userSlug }}</span>
@@ -26,13 +26,13 @@
 import { mapGetters } from 'vuex'
 
 import HcRelativeDateTime from '~/components/RelativeDateTime'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   name: 'UserTeaser',
   components: {
     HcRelativeDateTime,
-    UserAvatar,
+    ProfileAvatar,
   },
   props: {
     user: { type: Object, default: null },
@@ -88,7 +88,7 @@ export default {
   display: flex;
   flex-wrap: nowrap;
 
-  > .user-avatar {
+  > .profile-avatar {
     flex-shrink: 0;
   }
 

webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.spec.js

@@ -1,10 +1,10 @@
 import { mount } from '@vue/test-utils'
-import UserAvatar from './UserAvatar.vue'
+import ProfileAvatar from './ProfileAvatar'
 import BaseIcon from '~/components/_new/generic/BaseIcon/BaseIcon'
 
 const localVue = global.localVue
 
-describe('UserAvatar.vue', () => {
+describe('ProfileAvatar', () => {
   let propsData, wrapper
   beforeEach(() => {
     propsData = {}
@@ -12,7 +12,7 @@ describe('UserAvatar.vue', () => {
   })
 
   const Wrapper = () => {
-    return mount(UserAvatar, { propsData, localVue })
+    return mount(ProfileAvatar, { propsData, localVue })
   }
 
   it('renders no image', () => {
@@ -23,39 +23,39 @@ describe('UserAvatar.vue', () => {
     expect(wrapper.find(BaseIcon).exists()).toBe(true)
   })
 
-  describe('given a user', () => {
+  describe('given a profile', () => {
     describe('with no image', () => {
       beforeEach(() => {
         propsData = {
-          user: {
+          profile: {
             name: 'Matt Rider',
           },
         }
         wrapper = Wrapper()
       })
 
-      describe('no user name', () => {
+      describe('no profile name', () => {
         it('renders an icon', () => {
-          propsData = { user: { name: null } }
+          propsData = { profile: { name: null } }
           wrapper = Wrapper()
           expect(wrapper.find(BaseIcon).exists()).toBe(true)
         })
       })
 
-      describe("user name is 'Anonymous'", () => {
+      describe("profile name is 'Anonymous'", () => {
         it('renders an icon', () => {
-          propsData = { user: { name: 'Anonymous' } }
+          propsData = { profile: { name: 'Anonymous' } }
           wrapper = Wrapper()
           expect(wrapper.find(BaseIcon).exists()).toBe(true)
         })
       })
 
-      it('displays user initials', () => {
+      it('displays profile initials', () => {
         expect(wrapper.find('.initials').text()).toEqual('MR')
       })
 
       it('displays no more than 3 initials', () => {
-        propsData = { user: { name: 'Ana Paula Nunes Marques' } }
+        propsData = { profile: { name: 'Ana Paula Nunes Marques' } }
         wrapper = Wrapper()
         expect(wrapper.find('.initials').text()).toEqual('APN')
       })
@@ -64,7 +64,7 @@ describe('UserAvatar.vue', () => {
     describe('with a relative avatar url', () => {
       beforeEach(() => {
         propsData = {
-          user: {
+          profile: {
             name: 'Not Anonymous',
             avatar: {
               url: '/avatar.jpg',
@@ -82,7 +82,7 @@ describe('UserAvatar.vue', () => {
     describe('with an absolute avatar url', () => {
       beforeEach(() => {
         propsData = {
-          user: {
+          profile: {
             name: 'Not Anonymous',
             avatar: {
               url: 'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',

webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.story.js

@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import StoryRouter from 'storybook-vue-router'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 import helpers from '~/storybook/helpers'
 import { user } from '~/components/UserTeaser/UserTeaser.story.js'
 import imageFile from './storybook/critical-avatar-white-background.png'
@@ -22,56 +22,56 @@ const userWithAvatar = {
   name: 'Jochen Image',
   avatar: { url: imageFile },
 }
-storiesOf('UserAvatar', module)
+storiesOf('ProfileAvatar', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .addDecorator(StoryRouter())
   .add('normal, with image', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithAvatar,
     }),
-    template: '<user-avatar :user="user" />',
+    template: '<profile-avatar :profile="user" />',
   }))
   .add('normal without image, anonymous user', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: anonymousUser,
     }),
-    template: '<user-avatar :user="user" />',
+    template: '<profile-avatar :profile="user" />',
   }))
   .add('normal without image, user initials', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithoutAvatar,
     }),
-    template: '<user-avatar :user="user" />',
+    template: '<profile-avatar :profile="user" />',
   }))
   .add('small, with image', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithAvatar,
     }),
-    template: '<user-avatar :user="user" size="small"/>',
+    template: '<profile-avatar :profile="user" size="small"/>',
   }))
   .add('small', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithoutAvatar,
     }),
-    template: '<user-avatar :user="user" size="small"/>',
+    template: '<profile-avatar :profile="user" size="small"/>',
   }))
   .add('large, with image', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithAvatar,
     }),
-    template: '<user-avatar :user="user" size="large"/>',
+    template: '<profile-avatar :profile="user" size="large"/>',
   }))
   .add('large', () => ({
-    components: { UserAvatar },
+    components: { ProfileAvatar },
     data: () => ({
       user: userWithoutAvatar,
     }),
-    template: '<user-avatar :user="user" size="large"/>',
+    template: '<profile-avatar :profile="user" size="large"/>',
   }))

webapp/components/_new/generic/ProfileAvatar/ProfileAvatar.vue

@@ -1,14 +1,14 @@
 <template>
-  <div :class="['user-avatar', size && `--${this.size}`, !isAvatar && '--no-image']">
+  <div :class="['profile-avatar', size && `--${this.size}`, !isAvatar && '--no-image']">
     <!-- '--no-image' is neccessary, because otherwise we still have a little unwanted boarder araund the image for images with white backgrounds -->
-    <span class="initials">{{ userInitials }}</span>
+    <span class="initials">{{ profileInitials }}</span>
     <base-icon v-if="isAnonymous" name="eye-slash" />
     <img
       v-if="isAvatar"
-      :src="user.avatar | proxyApiUrl"
+      :src="profile.avatar | proxyApiUrl"
       class="image"
-      :alt="user.name"
+      :alt="profile.name"
-      :title="user.name"
+      :title="profile.name"
       @error="$event.target.style.display = 'none'"
     />
   </div>
@@ -16,7 +16,7 @@
 
 <script>
 export default {
-  name: 'UserAvatar',
+  name: 'ProfileAvatar',
   props: {
     size: {
       type: String,
@@ -25,30 +25,30 @@ export default {
         return value.match(/(small|large)/)
       },
     },
-    user: {
+    profile: {
       type: Object,
       default: null,
     },
   },
   computed: {
     isAnonymous() {
-      return !this.user || !this.user.name || this.user.name.toLowerCase() === 'anonymous'
+      return !this.profile || !this.profile.name || this.profile.name.toLowerCase() === 'anonymous'
     },
     isAvatar() {
       // TODO may we could test as well if the image is reachable? otherwise the background gets white and the initails can not be read
-      return this.user && this.user.avatar
+      return this.profile && this.profile.avatar
     },
-    userInitials() {
+    profileInitials() {
       if (this.isAnonymous) return ''
 
-      return this.user.name.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
+      return this.profile.name.match(/\b\w/g).join('').substring(0, 3).toUpperCase()
     },
   },
 }
 </script>
 
 <style lang="scss">
-.user-avatar {
+.profile-avatar {
   position: relative;
   height: $size-avatar-base;
   width: $size-avatar-base;

webapp/graphql/groups.js

@@ -12,6 +12,7 @@ export const createGroupMutation = gql`
     $groupType: GroupType!
     $actionRadius: GroupActionRadius!
     $categoryIds: [ID]
+    $locationName: String
   ) {
     CreateGroup(
       id: $id
@@ -22,6 +23,7 @@ export const createGroupMutation = gql`
       groupType: $groupType
       actionRadius: $actionRadius
       categoryIds: $categoryIds
+      locationName: $locationName
     ) {
       id
       name
@@ -34,6 +36,13 @@ export const createGroupMutation = gql`
       description
       groupType
       actionRadius
+      categories {
+        id
+        slug
+        name
+        icon
+      }
+      # locationName # test this as result
       myRole
     }
   }
@@ -86,6 +95,28 @@ export const updateGroupMutation = gql`
   }
 `
 
+export const joinGroupMutation = gql`
+  mutation ($groupId: ID!, $userId: ID!) {
+    JoinGroup(groupId: $groupId, userId: $userId) {
+      id
+      name
+      slug
+      myRoleInGroup
+    }
+  }
+`
+
+export const changeGroupMemberRoleMutation = gql`
+  mutation ($groupId: ID!, $userId: ID!, $roleInGroup: GroupMemberRole!) {
+    ChangeGroupMemberRole(groupId: $groupId, userId: $userId, roleInGroup: $roleInGroup) {
+      id
+      name
+      slug
+      myRoleInGroup
+    }
+  }
+`
+
 // ------ queries
 
 export const groupQuery = gql`
@@ -130,15 +161,37 @@ export const groupQuery = gql`
       description
       groupType
       actionRadius
+<<<<<<< HEAD
       myRole
+=======
+>>>>>>> 5059-epic-groups
       categories {
         id
         slug
         name
         icon
       }
+<<<<<<< HEAD
       # avatar # test this as result
       # locationName # test this as result
+=======
+      avatar {
+        url
+      }
+      # locationName # test this as result
+      myRole
+    }
+  }
+`
+
+export const groupMembersQuery = gql`
+  query ($id: ID!, $first: Int, $offset: Int, $orderBy: [_UserOrdering], $filter: _UserFilter) {
+    GroupMembers(id: $id, first: $first, offset: $offset, orderBy: $orderBy, filter: $filter) {
+      id
+      name
+      slug
+      myRoleInGroup
+>>>>>>> 5059-epic-groups
     }
   }
 `

webapp/locales/de.json

@@ -336,15 +336,16 @@
     "placeholder": "Schreib etwas Inspirierendes …"
   },
   "error-pages": {
-    "403-default": "Kein Zugang zu dieser Seite",
+    "403-default": "Kein Zugang zu dieser Seite!",
-    "404-default": "Diese Seite konnte nicht gefunden werden",
+    "404-default": "Diese Seite konnte nicht gefunden werden!",
-    "500-default": "Internal Server Error",
+    "500-default": "Internal Server Error!",
-    "503-default": "Dienst steht nicht zur Verfügung",
+    "503-default": "Dienst steht nicht zur Verfügung!",
-    "back-to-index": "Zurück zur Startseite",
+    "back-to-index": "Zurück zur Startseite!",
-    "cannot-edit-post": "Dieser Beitrag kann nicht editiert werden",
+    "cannot-edit-post": "Dieser Beitrag kann nicht editiert werden!",
-    "default": "Ein Fehler ist aufgetreten",
+    "default": "Ein Fehler ist aufgetreten!",
-    "post-not-found": "Dieser Beitrag konnte nicht gefunden werden",
+    "group-not-found": "Dieses Gruppenprofil konnte nicht gefunden werden!",
-    "profile-not-found": "Dieses Profil konnte nicht gefunden werden"
+    "post-not-found": "Dieser Beitrag konnte nicht gefunden werden!",
+    "profile-not-found": "Dieses Profil konnte nicht gefunden werden!"
   },
   "filter-menu": {
     "all": "Alle",
@@ -526,10 +527,15 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Erfolgreich hochgeladen!"
+    },
     "commented": "Kommentiert",
     "follow": "Folgen",
     "followers": "Folgen",
     "following": "Folge Ich",
+    "groupGoal": "Ziel:",
+    "groupSince": "Gründung",
     "invites": {
       "description": "Zur Einladung die E-Mail-Adresse hier eintragen.",
       "emailPlaceholder": "E-Mail-Adresse für die Einladung",
@@ -828,10 +834,5 @@
     "newTermsAndConditions": "Neue Nutzungsbedingungen",
     "termsAndConditionsNewConfirm": "Ich habe die neuen Nutzungsbedingungen durchgelesen und stimme zu.",
     "termsAndConditionsNewConfirmText": "Bitte lies Dir die neuen Nutzungsbedingungen jetzt durch!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Erfolgreich hochgeladen!"
-    }
   }
 }

webapp/locales/en.json

@@ -336,15 +336,16 @@
     "placeholder": "Leave your inspirational thoughts …"
   },
   "error-pages": {
-    "403-default": "Not authorized to this page",
+    "403-default": "Not authorized to this page!",
-    "404-default": "This page could not be found",
+    "404-default": "This page could not be found!",
-    "500-default": "Internal Server Error",
+    "500-default": "Internal Server Error!",
-    "503-default": "Service Unavailable",
+    "503-default": "Service Unavailable!",
-    "back-to-index": "Back to index page",
+    "back-to-index": "Back to index page!",
-    "cannot-edit-post": "This post cannot be edited",
+    "cannot-edit-post": "This post cannot be edited!",
-    "default": "An error occurred",
+    "default": "An error occurred!",
-    "post-not-found": "This post could not be found",
+    "group-not-found": "This group profile could not be found!",
-    "profile-not-found": "This profile could not be found"
+    "post-not-found": "This post could not be found!",
+    "profile-not-found": "This profile could not be found!"
   },
   "filter-menu": {
     "all": "All",
@@ -526,10 +527,15 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Upload successful!"
+    },
     "commented": "Commented",
     "follow": "Follow",
     "followers": "Followers",
     "following": "Following",
+    "groupGoal": "Goal:",
+    "groupSince": "Foundation",
     "invites": {
       "description": "Enter their e-mail address for invitation.",
       "emailPlaceholder": "E-mail to invite",
@@ -828,10 +834,5 @@
     "newTermsAndConditions": "New Terms and Conditions",
     "termsAndConditionsNewConfirm": "I have read and agree to the new terms of conditions.",
     "termsAndConditionsNewConfirmText": "Please read the new terms of use now!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Upload successful!"
-    }
   }
 }

webapp/locales/es.json

@@ -435,6 +435,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Carga con éxito"
+    },
     "commented": "Comentado",
     "follow": "Seguir",
     "followers": "Seguidores",
@@ -715,10 +718,5 @@
     "newTermsAndConditions": "Nuevos términos de uso",
     "termsAndConditionsNewConfirm": "He leído y acepto los nuevos términos de uso.",
     "termsAndConditionsNewConfirmText": "¡Por favor, lea los nuevos términos de uso ahora!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Carga con éxito"
-    }
   }
 }

webapp/locales/fr.json

@@ -423,6 +423,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Téléchargement réussi"
+    },
     "commented": "Commentais",
     "follow": "Suivre",
     "followers": "Suiveurs",
@@ -683,10 +686,5 @@
     "newTermsAndConditions": "Nouvelles conditions générales",
     "termsAndConditionsNewConfirm": "J'ai lu et accepté les nouvelles conditions générales.",
     "termsAndConditionsNewConfirmText": "Veuillez lire les nouvelles conditions d'utilisation dès maintenant !"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Téléchargement réussi"
-    }
   }
 }

webapp/locales/it.json

@@ -376,6 +376,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": null
+    },
     "commented": "Commentato",
     "follow": "Seguire",
     "followers": "Seguenti",
@@ -633,10 +636,5 @@
     "newTermsAndConditions": "Nuovi Termini e Condizioni",
     "termsAndConditionsNewConfirm": "Ho letto e accetto le nuove condizioni generali di contratto.",
     "termsAndConditionsNewConfirmText": "Si prega di leggere le nuove condizioni d'uso ora!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": null
-    }
   }
 }

webapp/locales/nl.json

@@ -100,6 +100,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": null
+    },
     "follow": "Volgen",
     "followers": "Volgelingen",
     "following": "Volgt",

webapp/locales/pl.json

@@ -208,6 +208,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Przesłano pomyślnie"
+    },
     "commented": "Skomentuj",
     "follow": "Obserwuj",
     "followers": "Obserwujący",
@@ -356,10 +359,5 @@
     "taxident": "Numer identyfikacyjny podatku od wartości dodanej zgodnie z § 27 a Ustawa o podatku od wartości dodanej (Niemcy)",
     "termsAc": "Warunki użytkowania",
     "tribunal": "sąd rejestrowy"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Przesłano pomyślnie"
-    }
   }
 }

webapp/locales/pt.json

@@ -412,6 +412,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Carregado com sucesso!"
+    },
     "commented": "Comentou",
     "follow": "Seguir",
     "followers": "Seguidores",
@@ -668,10 +671,5 @@
     "newTermsAndConditions": "Novos Termos e Condições",
     "termsAndConditionsNewConfirm": "Eu li e concordo com os novos termos de condições.",
     "termsAndConditionsNewConfirmText": "Por favor, leia os novos termos de uso agora!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Carregado com sucesso!"
-    }
   }
 }

webapp/locales/ru.json

@@ -449,6 +449,9 @@
     }
   },
   "profile": {
+    "avatar": {
+      "submitted": "Успешная загрузка!"
+    },
     "commented": "Прокомментированные",
     "follow": "Подписаться",
     "followers": "Подписчики",
@@ -729,10 +732,5 @@
     "newTermsAndConditions": "Новые условия и положения",
     "termsAndConditionsNewConfirm": "Я прочитал(а) и согласен(на) с новыми условиями.",
     "termsAndConditionsNewConfirmText": "Пожалуйста, ознакомьтесь с новыми условиями использования!"
-  },
-  "user": {
-    "avatar": {
-      "submitted": "Успешная загрузка!"
-    }
   }
 }

webapp/pages/group/_id.spec.js

@@ -0,0 +1,33 @@
+import { config, mount } from '@vue/test-utils'
+import _id from './_id.vue'
+
+const localVue = global.localVue
+
+config.stubs['nuxt-child'] = '<span class="nuxt-child"><slot /></span>'
+
+describe('Group profile _id.vue', () => {
+  let wrapper
+  let Wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {}
+  })
+
+  describe('mount', () => {
+    Wrapper = () => {
+      return mount(_id, {
+        mocks,
+        localVue,
+      })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders', () => {
+      expect(wrapper.findAll('.nuxt-child')).toHaveLength(1)
+    })
+  })
+})

webapp/pages/group/_id.vue

@@ -1,9 +1,34 @@
 <template>
-  <div>
+  <nuxt-child />
-    _id groupe page
-    <nuxt-link :to="{ name: 'group-create' }">
-      bearbeiten
-      <ds-icon name="ellipsis-v"></ds-icon>
-    </nuxt-link>
-  </div>
 </template>
+
+<script>
+import gql from 'graphql-tag'
+import PersistentLinks from '~/mixins/persistentLinks.js'
+
+const options = {
+  queryId: gql`
+    query ($idOrSlug: ID) {
+      Group(id: $idOrSlug) {
+        id
+        slug
+      }
+    }
+  `,
+  querySlug: gql`
+    query ($idOrSlug: String) {
+      Group(slug: $idOrSlug) {
+        id
+        slug
+      }
+    }
+  `,
+  message: 'error-pages.group-not-found',
+  path: 'group',
+}
+const persistentLinks = PersistentLinks(options)
+
+export default {
+  mixins: [persistentLinks],
+}
+</script>

webapp/pages/group/_id/_slug.___spec.js

@@ -0,0 +1,95 @@
+// import { config, mount } from '@vue/test-utils'
+// import ProfileSlug from './_slug.vue'
+
+// const localVue = global.localVue
+
+// localVue.filter('date', (d) => d)
+
+// config.stubs['client-only'] = '<span><slot /></span>'
+// config.stubs['v-popover'] = '<span><slot /></span>'
+// config.stubs['nuxt-link'] = '<span><slot /></span>'
+// config.stubs['infinite-loading'] = '<span><slot /></span>'
+// config.stubs['follow-list'] = '<span><slot /></span>'
+
+// describe('ProfileSlug', () => {
+//   let wrapper
+//   let Wrapper
+//   let mocks
+
+//   beforeEach(() => {
+//     mocks = {
+//       post: {
+//         id: 'p23',
+//         name: 'It is a post',
+//       },
+//       $t: jest.fn(),
+//       // If you're mocking router, then don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
+//       $route: {
+//         params: {
+//           id: '4711',
+//           slug: 'john-doe',
+//         },
+//       },
+//       $router: {
+//         history: {
+//           push: jest.fn(),
+//         },
+//       },
+//       $toast: {
+//         success: jest.fn(),
+//         error: jest.fn(),
+//       },
+//       $apollo: {
+//         loading: false,
+//         mutate: jest.fn().mockResolvedValue(),
+//       },
+//     }
+//   })
+
+//   describe('mount', () => {
+//     Wrapper = () => {
+//       return mount(ProfileSlug, {
+//         mocks,
+//         localVue,
+//       })
+//     }
+
+//     describe('given an authenticated user', () => {
+//       beforeEach(() => {
+//         mocks.$filters = {
+//           removeLinks: (c) => c,
+//           truncate: (a) => a,
+//         }
+//         mocks.$store = {
+//           getters: {
+//             'auth/isModerator': () => false,
+//             'auth/user': {
+//               id: 'u23',
+//             },
+//           },
+//         }
+//       })
+
+//       describe('given a user for the profile', () => {
+//         beforeEach(() => {
+//           wrapper = Wrapper()
+//           wrapper.setData({
+//             User: [
+//               {
+//                 id: 'u3',
+//                 name: 'Bob the builder',
+//                 contributionsCount: 6,
+//                 shoutedCount: 7,
+//                 commentedCount: 8,
+//               },
+//             ],
+//           })
+//         })
+
+//         it('displays name of the user', () => {
+//           expect(wrapper.text()).toContain('Bob the builder')
+//         })
+//       })
+//     })
+//   })
+// })

webapp/pages/group/_id/_slug.vue

@@ -1,6 +1,452 @@
 <template>
   <div>
     <ds-space />
-    Group Page
+    <ds-flex v-if="group" :width="{ base: '100%' }" gutter="base">
+      <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
+        <base-card
+          :class="{ 'disabled-content': group.disabled }"
+          style="position: relative; height: auto; overflow: visible"
+        >
+          <avatar-uploader
+            v-if="isGroupOwner"
+            :profile="group"
+            :updateMutation="updateGroupMutation"
+          >
+            <profile-avatar :profile="group" class="profile-page-avatar" size="large" />
+          </avatar-uploader>
+          <profile-avatar v-else :profile="group" class="profile-page-avatar" size="large" />
+          <!-- Menu -->
+          <!-- <client-only>
+            <content-menu
+              placement="bottom-end"
+              resource-type="user"
+              :resource="user"
+              :is-owner="isGroupOwner"
+              class="user-content-menu"
+              @mute="muteUser"
+              @unmute="unmuteUser"
+              @block="blockUser"
+              @unblock="unblockUser"
+              @delete="deleteUser"
+            />
+          </client-only> -->
+          <ds-space margin="small">
+            <ds-heading tag="h3" align="center" no-margin>
+              {{ groupName }}
+            </ds-heading>
+            <ds-text align="center" color="soft">
+              {{ groupSlug }}
+            </ds-text>
+            <!-- <ds-text v-if="user.location" align="center" color="soft" size="small">
+              <base-icon name="map-marker" />
+              {{ user.location.name }}
+            </ds-text> -->
+            <ds-text align="center" color="soft" size="small">
+              {{ $t('profile.groupSince') }} {{ group.createdAt | date('MMMM yyyy') }}
+            </ds-text>
+          </ds-space>
+          <ds-flex>
+            <ds-flex-item>
+              <!-- <client-only>
+                <ds-number :label="$t('profile.followers')">
+                  <hc-count-to
+                    slot="count"
+                    :start-val="followedByCountStartValue"
+                    :end-val="user.followedByCount"
+                  />
+                </ds-number>
+              </client-only> -->
+            </ds-flex-item>
+            <ds-flex-item>
+              <!-- <client-only>
+                <ds-number :label="$t('profile.following')">
+                  <hc-count-to slot="count" :end-val="user.followingCount" />
+                </ds-number>
+              </client-only> -->
+            </ds-flex-item>
+          </ds-flex>
+          <div v-if="!isGroupMember" class="action-buttons">
+            <!-- <base-button v-if="user.isBlocked" @click="unblockUser(user)">
+              {{ $t('settings.blocked-users.unblock') }}
+            </base-button>
+            <base-button v-if="user.isMuted" @click="unmuteUser(user)">
+              {{ $t('settings.muted-users.unmute') }}
+            </base-button>
+            <hc-follow-button
+              v-if="!user.isMuted && !user.isBlocked"
+              :follow-id="user.id"
+              :is-followed="user.followedByCurrentUser"
+              @optimistic="optimisticFollow"
+              @update="updateFollow"
+            /> -->
+          </div>
+          <template v-if="group.about">
+            <hr />
+            <ds-space margin-top="small" margin-bottom="small">
+              <ds-text color="soft" size="small" class="hyphenate-text">
+                {{ $t('profile.groupGoal') }} {{ group.about }}
+              </ds-text>
+            </ds-space>
+          </template>
+        </base-card>
+        <ds-space />
+        <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px">
+          {{ $t('profile.network.title') }}
+        </ds-heading>
+        <!-- <follow-list
+          :loading="$apollo.loading"
+          :user="user"
+          type="followedBy"
+          @fetchAllConnections="fetchAllConnections"
+        />
+        <ds-space />
+        <follow-list
+          :loading="$apollo.loading"
+          :user="user"
+          type="following"
+          @fetchAllConnections="fetchAllConnections"
+        /> -->
+        <!-- <social-media :user-name="groupName" :user="user" /> -->
+      </ds-flex-item>
+
+      <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
+        <masonry-grid>
+          <!-- TapNavigation -->
+          <!-- <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" /> -->
+
+          <!-- feed -->
+          <ds-grid-item :row-span="2" column-span="fullWidth">
+            <ds-space centered>
+              <nuxt-link :to="{ name: 'post-create' }">
+                <base-button
+                  v-if="isGroupMember"
+                  v-tooltip="{
+                    content: $t('contribution.newPost'),
+                    placement: 'left',
+                    delay: { show: 500 },
+                  }"
+                  :path="{ name: 'post-create' }"
+                  class="profile-post-add-button"
+                  icon="plus"
+                  circle
+                  filled
+                />
+              </nuxt-link>
+            </ds-space>
+          </ds-grid-item>
+
+          <template v-if="posts && posts.length">
+            <masonry-grid-item
+              v-for="post in posts"
+              :key="post.id"
+              :imageAspectRatio="post.image && post.image.aspectRatio"
+            >
+              <post-teaser
+                :post="post"
+                :width="{ base: '100%', md: '100%', xl: '50%' }"
+                @removePostFromList="posts = removePostFromList(post, posts)"
+                @pinPost="pinPost(post, refetchPostList)"
+                @unpinPost="unpinPost(post, refetchPostList)"
+              />
+            </masonry-grid-item>
+          </template>
+          <template v-else-if="$apollo.loading">
+            <ds-grid-item column-span="fullWidth">
+              <ds-space centered>
+                <ds-spinner size="base"></ds-spinner>
+              </ds-space>
+            </ds-grid-item>
+          </template>
+          <template v-else>
+            <ds-grid-item column-span="fullWidth">
+              <hc-empty margin="xx-large" icon="file" />
+            </ds-grid-item>
+          </template>
+        </masonry-grid>
+        <!-- <client-only>
+          <infinite-loading v-if="hasMore" @infinite="showMoreContributions" />
+        </client-only> -->
+      </ds-flex-item>
+    </ds-flex>
   </div>
 </template>
+
+<script>
+import uniqBy from 'lodash/uniqBy'
+import postListActions from '~/mixins/postListActions'
+import PostTeaser from '~/components/PostTeaser/PostTeaser.vue'
+// import HcFollowButton from '~/components/FollowButton.vue'
+// import HcCountTo from '~/components/CountTo.vue'
+// import HcBadges from '~/components/Badges.vue'
+// import FollowList from '~/components/features/FollowList/FollowList'
+import HcEmpty from '~/components/Empty/Empty'
+// import ContentMenu from '~/components/ContentMenu/ContentMenu'
+import AvatarUploader from '~/components/Uploader/AvatarUploader'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
+import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
+import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
+// import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
+// import { profilePagePosts } from '~/graphql/PostQuery'
+import { groupQuery } from '~/graphql/groups'
+import { updateGroupMutation } from '~/graphql/groups.js'
+// import { muteUser, unmuteUser } from '~/graphql/settings/MutedUsers'
+// import { blockUser, unblockUser } from '~/graphql/settings/BlockedUsers'
+// import UpdateQuery from '~/components/utils/UpdateQuery'
+// import SocialMedia from '~/components/SocialMedia/SocialMedia'
+
+// const tabToFilterMapping = ({ tab, id }) => {
+//   return {
+//     post: { author: { id } },
+//     comment: { comments_some: { author: { id } } },
+//     shout: { shoutedBy_some: { id } },
+//   }[tab]
+// }
+
+export default {
+  components: {
+    // SocialMedia,
+    PostTeaser,
+    // HcFollowButton,
+    // HcCountTo,
+    // HcBadges,
+    HcEmpty,
+    ProfileAvatar,
+    // ContentMenu,
+    AvatarUploader,
+    MasonryGrid,
+    MasonryGridItem,
+    // FollowList,
+    // TabNavigation,
+  },
+  mixins: [postListActions],
+  transition: {
+    name: 'slide-up',
+    mode: 'out-in',
+  },
+  data() {
+    // const filter = tabToFilterMapping({ tab: 'post', id: this.$route.params.id })
+    return {
+      Group: [],
+      posts: [],
+      hasMore: true,
+      offset: 0,
+      pageSize: 6,
+      tabActive: 'post',
+      // filter,
+      followedByCountStartValue: 0,
+      followedByCount: 7,
+      followingCount: 7,
+      updateGroupMutation,
+    }
+  },
+  computed: {
+    isGroupOwner() {
+      return this.group.myRole === 'owner'
+    },
+    isGroupMember() {
+      return this.group.myRole
+    },
+    group() {
+      return this.Group ? this.Group[0] : {}
+    },
+    groupName() {
+      const { name } = this.group || {}
+      return name || this.$t('profile.userAnonym')
+    },
+    groupSlug() {
+      const { slug } = this.group || {}
+      return slug && `@${slug}`
+    },
+    // tabOptions() {
+    //   return [
+    //     {
+    //       type: 'post',
+    //       title: this.$t('common.post', null, this.user.contributionsCount),
+    //       count: this.user.contributionsCount,
+    //       disabled: this.user.contributionsCount === 0,
+    //     },
+    //     {
+    //       type: 'comment',
+    //       title: this.$t('profile.commented'),
+    //       count: this.user.commentedCount,
+    //       disabled: this.user.commentedCount === 0,
+    //     },
+    //     {
+    //       type: 'shout',
+    //       title: this.$t('profile.shouted'),
+    //       count: this.user.shoutedCount,
+    //       disabled: this.user.shoutedCount === 0,
+    //     },
+    //   ]
+    // },
+  },
+  methods: {
+    // handleTab(tab) {
+    //   if (this.tabActive !== tab) {
+    //     this.tabActive = tab
+    //     this.filter = tabToFilterMapping({ tab, id: this.$route.params.id })
+    //     this.resetPostList()
+    //   }
+    // },
+    uniq(items, field = 'id') {
+      return uniqBy(items, field)
+    },
+    // showMoreContributions($state) {
+    //   const { profilePagePosts: PostQuery } = this.$apollo.queries
+    //   if (!PostQuery) return // seems this can be undefined on subpages
+    //   this.offset += this.pageSize
+
+    //   PostQuery.fetchMore({
+    //     variables: {
+    //       offset: this.offset,
+    //       filter: this.filter,
+    //       first: this.pageSize,
+    //       orderBy: 'createdAt_desc',
+    //     },
+    //     updateQuery: UpdateQuery(this, { $state, pageKey: 'profilePagePosts' }),
+    //   })
+    // },
+    // resetPostList() {
+    //   this.offset = 0
+    //   this.posts = []
+    //   this.hasMore = true
+    // },
+    // refetchPostList() {
+    //   this.resetPostList()
+    //   this.$apollo.queries.profilePagePosts.refetch()
+    // },
+    // async muteUser(user) {
+    //   try {
+    //     await this.$apollo.mutate({ mutation: muteUser(), variables: { id: user.id } })
+    //   } catch (error) {
+    //     this.$toast.error(error.message)
+    //   } finally {
+    //     this.$apollo.queries.User.refetch()
+    //     this.resetPostList()
+    //     this.$apollo.queries.profilePagePosts.refetch()
+    //   }
+    // },
+    // async unmuteUser(user) {
+    //   try {
+    //     this.$apollo.mutate({ mutation: unmuteUser(), variables: { id: user.id } })
+    //   } catch (error) {
+    //     this.$toast.error(error.message)
+    //   } finally {
+    //     this.$apollo.queries.User.refetch()
+    //     this.resetPostList()
+    //     this.$apollo.queries.profilePagePosts.refetch()
+    //   }
+    // },
+    // async blockUser(user) {
+    //   try {
+    //     await this.$apollo.mutate({ mutation: blockUser(), variables: { id: user.id } })
+    //   } catch (error) {
+    //     this.$toast.error(error.message)
+    //   } finally {
+    //     this.$apollo.queries.User.refetch()
+    //   }
+    // },
+    // async unblockUser(user) {
+    //   try {
+    //     this.$apollo.mutate({ mutation: unblockUser(), variables: { id: user.id } })
+    //   } catch (error) {
+    //     this.$toast.error(error.message)
+    //   } finally {
+    //     this.$apollo.queries.User.refetch()
+    //   }
+    // },
+    // async deleteUser(userdata) {
+    //   this.$store.commit('modal/SET_OPEN', {
+    //     name: 'delete',
+    //     data: {
+    //       userdata: userdata,
+    //     },
+    //   })
+    // },
+    // optimisticFollow({ followedByCurrentUser }) {
+    //   /*
+    //    * Note: followedByCountStartValue is updated to avoid counting from 0 when follow/unfollow
+    //    */
+    //   this.followedByCountStartValue = this.user.followedByCount
+    //   const currentUser = this.$store.getters['auth/user']
+    //   if (followedByCurrentUser) {
+    //     this.user.followedByCount++
+    //     this.user.followedBy = [currentUser, ...this.user.followedBy]
+    //   } else {
+    //     this.user.followedByCount--
+    //     this.user.followedBy = this.user.followedBy.filter((user) => user.id !== currentUser.id)
+    //   }
+    //   this.user.followedByCurrentUser = followedByCurrentUser
+    // },
+    // updateFollow({ followedByCurrentUser, followedBy, followedByCount }) {
+    //   this.followedByCountStartValue = this.user.followedByCount
+    //   this.user.followedByCount = followedByCount
+    //   this.user.followedByCurrentUser = followedByCurrentUser
+    //   this.user.followedBy = followedBy
+    // },
+    // fetchAllConnections(type) {
+    //   if (type === 'following') this.followingCount = Infinity
+    //   if (type === 'followedBy') this.followedByCount = Infinity
+    // },
+  },
+  apollo: {
+    // profilePagePosts: {
+    //   query() {
+    //     return profilePagePosts(this.$i18n)
+    //   },
+    //   variables() {
+    //     return {
+    //       filter: this.filter,
+    //       first: this.pageSize,
+    //       offset: 0,
+    //       orderBy: 'createdAt_desc',
+    //     }
+    //   },
+    //   update({ profilePagePosts }) {
+    //     this.posts = profilePagePosts
+    //   },
+    //   fetchPolicy: 'cache-and-network',
+    // },
+    Group: {
+      query() {
+        // return groupQuery(this.$i18n) // language will be needed for locations
+        return groupQuery
+      },
+      variables() {
+        return {
+          id: this.$route.params.id,
+          // followedByCount: this.followedByCount,
+          // followingCount: this.followingCount,
+        }
+      },
+      fetchPolicy: 'cache-and-network',
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.profile-page-avatar.profile-avatar {
+  margin: auto;
+  margin-top: -60px;
+}
+.page-name-profile-id-slug {
+  .ds-flex-item:first-child .content-menu {
+    position: absolute;
+    top: $space-x-small;
+    right: $space-x-small;
+  }
+}
+.profile-post-add-button {
+  box-shadow: $box-shadow-x-large;
+}
+.action-buttons {
+  margin: $space-small 0;
+
+  > .base-button {
+    display: block;
+    width: 100%;
+    margin-bottom: $space-x-small;
+  }
+}
+</style>

webapp/pages/profile/_id/_slug.vue

@@ -7,10 +7,10 @@
           :class="{ 'disabled-content': user.disabled }"
           style="position: relative; height: auto; overflow: visible"
         >
-          <hc-upload v-if="myProfile" :user="user">
+          <avatar-uploader v-if="myProfile" :profile="user" :updateMutation="updateUserMutation">
-            <user-avatar :user="user" class="profile-avatar" size="large"></user-avatar>
+            <profile-avatar :profile="user" class="profile-page-avatar" size="large" />
-          </hc-upload>
+          </avatar-uploader>
-          <user-avatar v-else :user="user" class="profile-avatar" size="large" />
+          <profile-avatar v-else :profile="user" class="profile-page-avatar" size="large" />
           <!-- Menu -->
           <client-only>
             <content-menu
@@ -178,13 +178,14 @@ import HcBadges from '~/components/Badges.vue'
 import FollowList from '~/components/features/FollowList/FollowList'
 import HcEmpty from '~/components/Empty/Empty'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
-import HcUpload from '~/components/Upload'
+import AvatarUploader from '~/components/Uploader/AvatarUploader'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
 import TabNavigation from '~/components/_new/generic/TabNavigation/TabNavigation'
 import { profilePagePosts } from '~/graphql/PostQuery'
 import UserQuery from '~/graphql/User'
+import { updateUserMutation } from '~/graphql/User.js'
 import { muteUser, unmuteUser } from '~/graphql/settings/MutedUsers'
 import { blockUser, unblockUser } from '~/graphql/settings/BlockedUsers'
 import UpdateQuery from '~/components/utils/UpdateQuery'
@@ -206,9 +207,9 @@ export default {
     HcCountTo,
     HcBadges,
     HcEmpty,
-    UserAvatar,
+    ProfileAvatar,
     ContentMenu,
-    HcUpload,
+    AvatarUploader,
     MasonryGrid,
     MasonryGridItem,
     FollowList,
@@ -232,6 +233,7 @@ export default {
       followedByCountStartValue: 0,
       followedByCount: 7,
       followingCount: 7,
+      updateUserMutation: updateUserMutation(),
     }
   },
   computed: {
@@ -417,7 +419,7 @@ export default {
 </script>
 
 <style lang="scss">
-.profile-avatar.user-avatar {
+.profile-page-avatar.profile-avatar {
   margin: auto;
   margin-top: -60px;
 }

webapp/pages/settings/blocked-users.vue

@@ -28,7 +28,7 @@
               params: { id: scope.row.id, slug: scope.row.slug },
             }"
           >
-            <user-avatar :user="scope.row" size="small" />
+            <profile-avatar :profile="scope.row" size="small" />
           </nuxt-link>
         </template>
         <template #name="scope">
@@ -74,11 +74,11 @@
 
 <script>
 import { blockedUsers, unblockUser } from '~/graphql/settings/BlockedUsers'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   components: {
-    UserAvatar,
+    ProfileAvatar,
   },
   data() {
     return {

webapp/pages/settings/muted-users.vue

@@ -25,7 +25,7 @@
               params: { id: scope.row.id, slug: scope.row.slug },
             }"
           >
-            <user-avatar :user="scope.row" size="small" />
+            <profile-avatar :profile="scope.row" size="small" />
           </nuxt-link>
         </template>
         <template #name="scope">
@@ -71,11 +71,11 @@
 
 <script>
 import { mutedUsers, unmuteUser } from '~/graphql/settings/MutedUsers'
-import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   components: {
-    UserAvatar,
+    ProfileAvatar,
   },
   data() {
     return {