IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into 2019/kw24/fix_imported_img_urls

Browse Source 
# Conflicts:
#	backend/src/middleware/fixImageUrlsMiddleware.js
#	backend/src/middleware/fixImageUrlsMiddleware.spec.js
This commit is contained in:
Ulf Gebhardt 2019-06-17 13:24:29 +02:00
commit 98dbf801ab
No known key found for this signature in database
GPG Key ID: 44C888923CC8E7F3
69 changed files with 1541 additions and 628 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.travis.yml
View File

@ -21,12 +21,15 @@ install:
- wait-on http://localhost:7474
script:
- export CYPRESS_RETRIES=1
- export BRANCH=$(if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then echo $TRAVIS_BRANCH; else echo $TRAVIS_PULL_REQUEST_BRANCH; fi)
- echo "TRAVIS_BRANCH=$TRAVIS_BRANCH, PR=$PR, BRANCH=$BRANCH"
# Backend
- docker-compose exec backend yarn run lint
- docker-compose exec backend yarn run test:jest --ci --verbose=false --coverage
- docker-compose exec backend yarn run db:reset
- docker-compose exec backend yarn run db:seed
- docker-compose exec backend yarn run test:cucumber
- docker-compose exec backend yarn run test:cucumber --tags "not @wip"
- docker-compose exec backend yarn run db:reset
- docker-compose exec backend yarn run db:seed
# Frontend
@ -34,7 +37,7 @@ script:
- docker-compose exec webapp yarn run test --ci --verbose=false --coverage
- docker-compose exec -d backend yarn run test:before:seeder
# Fullstack
- CYPRESS_RETRIES=1 yarn run cypress:run
- yarn run cypress:run
# Coverage
- codecov

2
.vscode/settings.json vendored
View File

@ -9,4 +9,4 @@
],
"editor.formatOnSave": true,
"eslint.autoFixOnSave": true
}
}

1
backend/Dockerfile
View File

@ -24,4 +24,5 @@ RUN yarn run build
FROM base as production
ENV NODE_ENV=production
COPY --from=builder /nitro-backend/dist ./dist
COPY ./public/img/ ./public/img/
RUN yarn install --frozen-lockfile --non-interactive

6
backend/package.json
View File

@ -47,12 +47,12 @@
"apollo-client": "~2.6.2",
"apollo-link-context": "~1.0.14",
"apollo-link-http": "~1.5.14",
"apollo-server": "~2.6.2",
"apollo-server": "~2.6.3",
"bcryptjs": "~2.4.3",
"cheerio": "~1.0.0-rc.3",
"cors": "~2.8.5",
"cross-env": "~5.2.0",
"date-fns": "2.0.0-alpha.31",
"date-fns": "2.0.0-alpha.33",
"debug": "~4.1.1",
"dotenv": "~8.0.0",
"express": "~4.17.1",
@ -87,7 +87,7 @@
"@babel/plugin-proposal-throw-expressions": "^7.2.0",
"@babel/preset-env": "~7.4.5",
"@babel/register": "~7.4.4",
"apollo-server-testing": "~2.6.2",
"apollo-server-testing": "~2.6.3",
"babel-core": "~7.0.0-0",
"babel-eslint": "~10.0.1",
"babel-jest": "~24.8.0",

120
backend/src/middleware/permissionsMiddleware.js
View File

@ -1,4 +1,4 @@
import { rule, shield, allow, or } from 'graphql-shield'
import { rule, shield, deny, allow, or } from 'graphql-shield'
/*
* TODO: implement
@ -16,6 +16,12 @@ const isAdmin = rule()(async (parent, args, { user }, info) => {
return user && user.role === 'admin'
})
const onlyYourself = rule({
cache: 'no_cache',
})(async (parent, args, context, info) => {
return context.user.id === args.id
})
const isMyOwn = rule({
cache: 'no_cache',
})(async (parent, args, context, info) => {
@ -48,6 +54,13 @@ const belongsToMe = rule({
return Boolean(notification)
})
/* TODO: decide if we want to remove this check: the check
* `onlyEnabledContent` throws authorization errors only if you have
* arguments for `disabled` or `deleted` assuming these are filter
* parameters. Soft-delete middleware obfuscates data on its way out
* anyways. Furthermore, `neo4j-graphql-js` offers many ways to filter for
* data so I believe, this is not a good check anyways.
*/
const onlyEnabledContent = rule({
cache: 'strict',
})(async (parent, args, ctx, info) => {
@ -80,47 +93,70 @@ const isAuthor = rule({
return authorId === user.id
})
// Permissions
const permissions = shield({
Query: {
Notification: isAdmin,
statistics: allow,
currentUser: allow,
Post: or(onlyEnabledContent, isModerator),
},
Mutation: {
UpdateNotification: belongsToMe,
CreatePost: isAuthenticated,
UpdatePost: isAuthor,
DeletePost: isAuthor,
report: isAuthenticated,
CreateBadge: isAdmin,
UpdateBadge: isAdmin,
DeleteBadge: isAdmin,
AddUserBadges: isAdmin,
CreateSocialMedia: isAuthenticated,
DeleteSocialMedia: isAuthenticated,
// AddBadgeRewarded: isAdmin,
// RemoveBadgeRewarded: isAdmin,
reward: isAdmin,
unreward: isAdmin,
// addFruitToBasket: isAuthenticated
follow: isAuthenticated,
unfollow: isAuthenticated,
shout: isAuthenticated,
unshout: isAuthenticated,
changePassword: isAuthenticated,
enable: isModerator,
disable: isModerator,
CreateComment: isAuthenticated,
DeleteComment: isAuthor,
// CreateUser: allow,
},
User: {
email: isMyOwn,
password: isMyOwn,
privateKey: isMyOwn,
},
const isDeletingOwnAccount = rule({
cache: 'no_cache',
})(async (parent, args, context, info) => {
return context.user.id === args.id
})
// Permissions
const permissions = shield(
{
Query: {
'*': deny,
findPosts: allow,
Category: isAdmin,
Tag: isAdmin,
Report: isModerator,
Notification: isAdmin,
statistics: allow,
currentUser: allow,
Post: or(onlyEnabledContent, isModerator),
Comment: allow,
User: allow,
isLoggedIn: allow,
},
Mutation: {
'*': deny,
login: allow,
UpdateNotification: belongsToMe,
CreateUser: isAdmin,
UpdateUser: onlyYourself,
CreatePost: isAuthenticated,
UpdatePost: isAuthor,
DeletePost: isAuthor,
report: isAuthenticated,
CreateBadge: isAdmin,
UpdateBadge: isAdmin,
DeleteBadge: isAdmin,
AddUserBadges: isAdmin,
CreateSocialMedia: isAuthenticated,
DeleteSocialMedia: isAuthenticated,
// AddBadgeRewarded: isAdmin,
// RemoveBadgeRewarded: isAdmin,
reward: isAdmin,
unreward: isAdmin,
// addFruitToBasket: isAuthenticated
follow: isAuthenticated,
unfollow: isAuthenticated,
shout: isAuthenticated,
unshout: isAuthenticated,
changePassword: isAuthenticated,
enable: isModerator,
disable: isModerator,
CreateComment: isAuthenticated,
DeleteComment: isAuthor,
DeleteUser: isDeletingOwnAccount,
},
User: {
email: isMyOwn,
password: isMyOwn,
privateKey: isMyOwn,
},
},
{
fallbackRule: allow,
},
)
export default permissions

6
backend/src/middleware/slugifyMiddleware.spec.js
View File

@ -7,12 +7,14 @@ let headers
const factory = Factory()
beforeEach(async () => {
await factory.create('User', { email: 'user@example.org', password: '1234' })
const adminParams = { role: 'admin', email: 'admin@example.org', password: '1234' }
await factory.create('User', adminParams)
await factory.create('User', {
email: 'someone@example.org',
password: '1234',
})
headers = await login({ email: 'user@example.org', password: '1234' })
// we need to be an admin, otherwise we're not authorized to create a user
headers = await login(adminParams)
authenticatedClient = new GraphQLClient(host, { headers })
})

16
backend/src/schema/resolvers/posts.spec.js
View File

@ -74,6 +74,22 @@ describe('CreatePost', () => {
await expect(client.request(mutation)).resolves.toMatchObject(expected)
})
})
describe('language', () => {
it('allows a user to set the language of the post', async () => {
const createPostWithLanguageMutation = `
mutation {
CreatePost(title: "I am a title", content: "Some content", language: "en") {
language
}
}
`
const expected = { CreatePost: { language: 'en' } }
await expect(client.request(createPostWithLanguageMutation)).resolves.toEqual(
expect.objectContaining(expected),
)
})
})
})
})

25
backend/src/schema/resolvers/user_management.spec.js
View File

@ -315,6 +315,8 @@ describe('change password', () => {
describe('do not expose private RSA key', () => {
let headers
let client
let authenticatedClient
const queryUserPuplicKey = gql`
query($queriedUserSlug: String) {
User(slug: $queriedUserSlug) {
@ -332,7 +334,7 @@ describe('do not expose private RSA key', () => {
}
`
const actionGenUserWithKeys = async () => {
const generateUserWithKeys = async authenticatedClient => {
// Generate user with "privateKey" via 'CreateUser' mutation instead of using the factories "factory.create('User', {...})", see above.
const variables = {
id: 'bcb2d923-f3af-479e-9f00-61b12e864667',
@ -341,7 +343,7 @@ describe('do not expose private RSA key', () => {
name: 'Apfel Strudel',
email: 'apfel-strudel@test.org',
}
await client.request(
await authenticatedClient.request(
gql`
mutation($id: ID, $password: String!, $slug: String, $name: String, $email: String!) {
CreateUser(id: $id, password: $password, slug: $slug, name: $name, email: $email) {
@ -353,14 +355,23 @@ describe('do not expose private RSA key', () => {
)
}
// not authenticate
beforeEach(async () => {
const adminParams = {
role: 'admin',
email: 'admin@example.org',
password: '1234',
}
// create an admin user who has enough permissions to create other users
await factory.create('User', adminParams)
const headers = await login(adminParams)
authenticatedClient = new GraphQLClient(host, { headers })
// but also create an unauthenticated client to issue the `User` query
client = new GraphQLClient(host)
})
describe('unauthenticated query of "publicKey" (does the RSA key pair get generated at all?)', () => {
it('returns publicKey', async () => {
await actionGenUserWithKeys()
await generateUserWithKeys(authenticatedClient)
await expect(
await client.request(queryUserPuplicKey, { queriedUserSlug: 'apfel-strudel' }),
).toEqual(
@ -378,7 +389,7 @@ describe('do not expose private RSA key', () => {
describe('unauthenticated query of "privateKey"', () => {
it('throws "Not Authorised!"', async () => {
await actionGenUserWithKeys()
await generateUserWithKeys(authenticatedClient)
await expect(
client.request(queryUserPrivateKey, { queriedUserSlug: 'apfel-strudel' }),
).rejects.toThrow('Not Authorised')
@ -393,7 +404,7 @@ describe('do not expose private RSA key', () => {
describe('authenticated query of "publicKey"', () => {
it('returns publicKey', async () => {
await actionGenUserWithKeys()
await generateUserWithKeys(authenticatedClient)
await expect(
await client.request(queryUserPuplicKey, { queriedUserSlug: 'apfel-strudel' }),
).toEqual(
@ -411,7 +422,7 @@ describe('do not expose private RSA key', () => {
describe('authenticated query of "privateKey"', () => {
it('throws "Not Authorised!"', async () => {
await actionGenUserWithKeys()
await generateUserWithKeys(authenticatedClient)
await expect(
client.request(queryUserPrivateKey, { queriedUserSlug: 'apfel-strudel' }),
).rejects.toThrow('Not Authorised')

22
backend/src/schema/resolvers/users.js
View File

@ -11,5 +11,27 @@ export default {
params = await fileUpload(params, { file: 'avatarUpload', url: 'avatar' })
return neo4jgraphql(object, params, context, resolveInfo, false)
},
DeleteUser: async (object, params, context, resolveInfo) => {
const { resource } = params
const session = context.driver.session()
if (resource && resource.length) {
await Promise.all(
resource.map(async node => {
await session.run(
`
MATCH (resource:${node})<-[:WROTE]-(author:User {id: $userId})
SET resource.deleted = true
RETURN author`,
{
userId: context.user.id,
},
)
}),
)
session.close()
}
return neo4jgraphql(object, params, context, resolveInfo, false)
},
},
}

269
backend/src/schema/resolvers/users.spec.js
View File

@ -1,6 +1,7 @@
import { GraphQLClient } from 'graphql-request'
import { host } from '../../jest/helpers'
import { login, host } from '../../jest/helpers'
import Factory from '../../seed/factories'
import gql from 'graphql-tag'
const factory = Factory()
let client
@ -18,27 +19,58 @@ describe('users', () => {
}
}
`
client = new GraphQLClient(host)
it('with password and email', async () => {
describe('given valid password and email', () => {
const variables = {
name: 'John Doe',
password: '123',
email: '123@123.de',
}
const expected = {
CreateUser: {
id: expect.any(String),
},
}
await expect(client.request(mutation, variables)).resolves.toEqual(expected)
describe('unauthenticated', () => {
beforeEach(async () => {
client = new GraphQLClient(host)
})
it('is not allowed to create users', async () => {
await expect(client.request(mutation, variables)).rejects.toThrow('Not Authorised')
})
})
describe('authenticated admin', () => {
beforeEach(async () => {
const adminParams = {
role: 'admin',
email: 'admin@example.org',
password: '1234',
}
await factory.create('User', adminParams)
const headers = await login(adminParams)
client = new GraphQLClient(host, { headers })
})
it('is allowed to create new users', async () => {
const expected = {
CreateUser: {
id: expect.any(String),
},
}
await expect(client.request(mutation, variables)).resolves.toEqual(expected)
})
})
})
})
describe('UpdateUser', () => {
beforeEach(async () => {
await factory.create('User', { id: 'u47', name: 'John Doe' })
})
const userParams = {
email: 'user@example.org',
password: '1234',
id: 'u47',
name: 'John Doe',
}
const variables = {
id: 'u47',
name: 'John Doughnut',
}
const mutation = `
mutation($id: ID!, $name: String) {
@ -48,38 +80,199 @@ describe('users', () => {
}
}
`
client = new GraphQLClient(host)
it('name within specifications', async () => {
const variables = {
id: 'u47',
name: 'James Doe',
}
const expected = {
UpdateUser: {
id: 'u47',
beforeEach(async () => {
await factory.create('User', userParams)
})
describe('as another user', () => {
beforeEach(async () => {
const someoneElseParams = {
email: 'someoneElse@example.org',
password: '1234',
name: 'James Doe',
},
}
await expect(client.request(mutation, variables)).resolves.toEqual(expected)
}
await factory.create('User', someoneElseParams)
const headers = await login(someoneElseParams)
client = new GraphQLClient(host, { headers })
})
it('is not allowed to change other user accounts', async () => {
await expect(client.request(mutation, variables)).rejects.toThrow('Not Authorised')
})
})
it('with no name', async () => {
const variables = {
id: 'u47',
name: null,
describe('as the same user', () => {
beforeEach(async () => {
const headers = await login(userParams)
client = new GraphQLClient(host, { headers })
})
it('name within specifications', async () => {
const expected = {
UpdateUser: {
id: 'u47',
name: 'John Doughnut',
},
}
await expect(client.request(mutation, variables)).resolves.toEqual(expected)
})
it('with no name', async () => {
const variables = {
id: 'u47',
name: null,
}
const expected = 'Username must be at least 3 characters long!'
await expect(client.request(mutation, variables)).rejects.toThrow(expected)
})
it('with too short name', async () => {
const variables = {
id: 'u47',
name: ' ',
}
const expected = 'Username must be at least 3 characters long!'
await expect(client.request(mutation, variables)).rejects.toThrow(expected)
})
})
})
describe('DeleteUser', () => {
let deleteUserVariables
let asAuthor
const deleteUserMutation = gql`
mutation($id: ID!, $resource: [String]) {
DeleteUser(id: $id, resource: $resource) {
id
contributions {
id
deleted
}
comments {
id
deleted
}
}
}
const expected = 'Username must be at least 3 characters long!'
await expect(client.request(mutation, variables)).rejects.toThrow(expected)
`
beforeEach(async () => {
asAuthor = await factory.create('User', {
email: 'test@example.org',
password: '1234',
id: 'u343',
})
await factory.create('User', {
email: 'friendsAccount@example.org',
password: '1234',
id: 'u565',
})
deleteUserVariables = { id: 'u343', resource: [] }
})
it('with too short name', async () => {
const variables = {
id: 'u47',
name: ' ',
}
const expected = 'Username must be at least 3 characters long!'
await expect(client.request(mutation, variables)).rejects.toThrow(expected)
describe('unauthenticated', () => {
it('throws authorization error', async () => {
client = new GraphQLClient(host)
await expect(client.request(deleteUserMutation, deleteUserVariables)).rejects.toThrow(
'Not Authorised',
)
})
})
describe('authenticated', () => {
let headers
beforeEach(async () => {
headers = await login({
email: 'test@example.org',
password: '1234',
})
client = new GraphQLClient(host, { headers })
})
describe("attempting to delete another user's account", () => {
it('throws an authorization error', async () => {
deleteUserVariables = { id: 'u565' }
await expect(client.request(deleteUserMutation, deleteUserVariables)).rejects.toThrow(
'Not Authorised',
)
})
})
describe('attempting to delete my own account', () => {
let expectedResponse
beforeEach(async () => {
await asAuthor.authenticateAs({
email: 'test@example.org',
password: '1234',
})
await asAuthor.create('Post', {
id: 'p139',
content: 'Post by user u343',
})
await asAuthor.create('Comment', {
id: 'c155',
postId: 'p139',
content: 'Comment by user u343',
})
expectedResponse = {
DeleteUser: {
id: 'u343',
contributions: [{ id: 'p139', deleted: false }],
comments: [{ id: 'c155', deleted: false }],
},
}
})
it("deletes my account, but doesn't delete posts or comments by default", async () => {
await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
expectedResponse,
)
})
describe("deletes a user's", () => {
it('posts on request', async () => {
deleteUserVariables = { id: 'u343', resource: ['Post'] }
expectedResponse = {
DeleteUser: {
id: 'u343',
contributions: [{ id: 'p139', deleted: true }],
comments: [{ id: 'c155', deleted: false }],
},
}
await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
expectedResponse,
)
})
it('comments on request', async () => {
deleteUserVariables = { id: 'u343', resource: ['Comment'] }
expectedResponse = {
DeleteUser: {
id: 'u343',
contributions: [{ id: 'p139', deleted: false }],
comments: [{ id: 'c155', deleted: true }],
},
}
await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
expectedResponse,
)
})
it('posts and comments on request', async () => {
deleteUserVariables = { id: 'u343', resource: ['Post', 'Comment'] }
expectedResponse = {
DeleteUser: {
id: 'u343',
contributions: [{ id: 'p139', deleted: true }],
comments: [{ id: 'c155', deleted: true }],
},
}
await expect(client.request(deleteUserMutation, deleteUserVariables)).resolves.toEqual(
expectedResponse,
)
})
})
})
})
})
})

18
backend/src/schema/types/schema.gql
View File

@ -4,8 +4,9 @@ type Query {
currentUser: User
# Get the latest Network Statistics
statistics: Statistics!
findPosts(filter: String!, limit: Int = 10): [Post]! @cypher(
statement: """
findPosts(filter: String!, limit: Int = 10): [Post]!
@cypher(
statement: """
CALL db.index.fulltext.queryNodes('full_text_search', $filter)
YIELD node as post, score
MATCH (post)<-[:WROTE]-(user:User)
@ -14,8 +15,8 @@ type Query {
AND NOT post.deleted = true AND NOT post.disabled = true
RETURN post
LIMIT $limit
"""
)
"""
)
CommentByPost(postId: ID!): [Comment]!
}
@ -23,7 +24,7 @@ type Mutation {
# Get a JWT Token for the given Email and password
login(email: String!, password: String!): String!
signup(email: String!, password: String!): Boolean!
changePassword(oldPassword:String!, newPassword: String!): String!
changePassword(oldPassword: String!, newPassword: String!): String!
report(id: ID!, description: String): Report
disable(id: ID!): ID
enable(id: ID!): ID
@ -37,6 +38,7 @@ type Mutation {
follow(id: ID!, type: FollowTypeEnum): Boolean!
# Unfollow the given Type and ID
unfollow(id: ID!, type: FollowTypeEnum): Boolean!
DeleteUser(id: ID!, resource: [String]): User
}
type Statistics {
@ -53,7 +55,7 @@ type Statistics {
type Notification {
id: ID!
read: Boolean,
read: Boolean
user: User @relation(name: "NOTIFIED", direction: "OUT")
post: Post @relation(name: "NOTIFIED", direction: "IN")
createdAt: String
@ -80,7 +82,8 @@ type Report {
id: ID!
submitter: User @relation(name: "REPORTED", direction: "IN")
description: String
type: String! @cypher(statement: "MATCH (resource)<-[:REPORTED]-(this) RETURN labels(resource)[0]")
type: String!
@cypher(statement: "MATCH (resource)<-[:REPORTED]-(this) RETURN labels(resource)[0]")
createdAt: String
comment: Comment @relation(name: "REPORTED", direction: "OUT")
post: Post @relation(name: "REPORTED", direction: "OUT")
@ -131,4 +134,3 @@ type SocialMedia {
url: String
ownedBy: [User]! @relation(name: "OWNED", direction: "IN")
}

30
backend/src/schema/types/type/Post.gql
View File

@ -15,29 +15,37 @@ type Post {
disabledBy: User @relation(name: "DISABLED", direction: "IN")
createdAt: String
updatedAt: String
relatedContributions: [Post]! @cypher(
statement: """
language: String
relatedContributions: [Post]!
@cypher(
statement: """
MATCH (this)-[:TAGGED|CATEGORIZED]->(categoryOrTag)<-[:TAGGED|CATEGORIZED]-(post:Post)
RETURN DISTINCT post
LIMIT 10
"""
)
"""
)
tags: [Tag]! @relation(name: "TAGGED", direction: "OUT")
categories: [Category]! @relation(name: "CATEGORIZED", direction: "OUT")
comments: [Comment]! @relation(name: "COMMENTS", direction: "IN")
commentsCount: Int! @cypher(statement: "MATCH (this)<-[:COMMENTS]-(r:Comment) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(r)")
commentsCount: Int!
@cypher(
statement: "MATCH (this)<-[:COMMENTS]-(r:Comment) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(r)"
)
shoutedBy: [User]! @relation(name: "SHOUTED", direction: "IN")
shoutedCount: Int! @cypher(statement: "MATCH (this)<-[:SHOUTED]-(r:User) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)")
shoutedCount: Int!
@cypher(
statement: "MATCH (this)<-[:SHOUTED]-(r:User) WHERE NOT r.deleted = true AND NOT r.disabled = true RETURN COUNT(DISTINCT r)"
)
# Has the currently logged in user shouted that post?
shoutedByCurrentUser: Boolean! @cypher(
statement: """
shoutedByCurrentUser: Boolean!
@cypher(
statement: """
MATCH (this)<-[:SHOUTED]-(u:User {id: $cypherParams.currentUserId})
RETURN COUNT(u) >= 1
"""
)
"""
)
}

1
backend/test/features/activity-follow.feature
View File

@ -10,6 +10,7 @@ Feature: Follow a user
| stuart-little |
| tero-vota |
@wip
Scenario: Send a follow to a user inbox and make sure it's added to the right followers collection
When I send a POST request with the following activity to "/activitypub/users/tero-vota/inbox":
"""

1
backend/test/features/activity-like.feature
View File

@ -27,6 +27,7 @@ Feature: Like an object like an article or note
}
"""
@wip
Scenario: Send a like of a person to an users inbox and make sure it's added to the likes collection
When I send a POST request with the following activity to "/activitypub/users/karl-heinz/inbox":
"""

70
backend/yarn.lock
View File

@ -1029,10 +1029,10 @@
"@types/express-serve-static-core" "*"
"@types/serve-static" "*"
"@types/express@4.16.1":
version "4.16.1"
resolved "https://registry.yarnpkg.com/@types/express/-/express-4.16.1.tgz#d756bd1a85c34d87eaf44c888bad27ba8a4b7cf0"
integrity sha512-V0clmJow23WeyblmACoxbHBu2JKlE5TiIme6Lem14FnPW9gsttyHtk6wq7njcdIWH1njAaFgR8gW09lgY98gQg==
"@types/express@4.17.0":
version "4.17.0"
resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.0.tgz#49eaedb209582a86f12ed9b725160f12d04ef287"
integrity sha512-CjaMu57cjgjuZbh9DpkloeGxV45CnMGlVd+XpG7Gm9QgVrd7KFq+X4HY0vM+2v0bczS48Wg7bvnMY5TN+Xmcfw==
dependencies:
"@types/body-parser" "*"
"@types/express-serve-static-core" "*"
@ -1351,14 +1351,14 @@ apollo-engine-reporting-protobuf@0.3.1:
dependencies:
protobufjs "^6.8.6"
apollo-engine-reporting@1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/apollo-engine-reporting/-/apollo-engine-reporting-1.3.0.tgz#50151811a0f5e70f4a73e7092a61fec422d8e722"
integrity sha512-xP+Z+wdQH4ee7xfuP3WsJcIe30AH68gpp2lQm2+rnW5JfjIqD5YehSoO2Svi2jK3CSv8Y561i3QMW9i34P7hEQ==
apollo-engine-reporting@1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/apollo-engine-reporting/-/apollo-engine-reporting-1.3.1.tgz#f2c2c63f865871a57c15cdbb2a3bcd4b4af28115"
integrity sha512-e0Xp+0yite8DH/xm9fnJt42CxfWAcY6waiq3icCMAgO9T7saXzVOPpl84SkuA+hIJUBtfaKrTnC+7Jxi/I7OrQ==
dependencies:
apollo-engine-reporting-protobuf "0.3.1"
apollo-graphql "^0.3.0"
apollo-server-core "2.6.2"
apollo-server-core "2.6.3"
apollo-server-env "2.4.0"
async-retry "^1.2.1"
graphql-extensions "0.7.2"
@ -1431,17 +1431,17 @@ apollo-server-caching@0.4.0:
dependencies:
lru-cache "^5.0.0"
apollo-server-core@2.6.2:
version "2.6.2"
resolved "https://registry.yarnpkg.com/apollo-server-core/-/apollo-server-core-2.6.2.tgz#a792b50d4df9e26ec03759a31fbcbce38361b218"
integrity sha512-AbAnfoQ26NPsNIyBa/BVKBtA/wRsNL/E6eEem1VIhzitfgO25bVXFbEZDLxbgz6wvJ+veyRFpse7Qi1bvRpxOw==
apollo-server-core@2.6.3:
version "2.6.3"
resolved "https://registry.yarnpkg.com/apollo-server-core/-/apollo-server-core-2.6.3.tgz#786c8251c82cf29acb5cae9635a321f0644332ae"
integrity sha512-tfC0QO1NbJW3ShkB5pRCnUaYEkW2AwnswaTeedkfv//EO3yiC/9LeouCK5F22T8stQG+vGjvCqf0C8ldI/XsIA==
dependencies:
"@apollographql/apollo-tools" "^0.3.6"
"@apollographql/graphql-playground-html" "1.6.20"
"@types/ws" "^6.0.0"
apollo-cache-control "0.7.2"
apollo-datasource "0.5.0"
apollo-engine-reporting "1.3.0"
apollo-engine-reporting "1.3.1"
apollo-server-caching "0.4.0"
apollo-server-env "2.4.0"
apollo-server-errors "2.3.0"
@ -1479,18 +1479,18 @@ apollo-server-errors@2.3.0:
resolved "https://registry.yarnpkg.com/apollo-server-errors/-/apollo-server-errors-2.3.0.tgz#700622b66a16dffcad3b017e4796749814edc061"
integrity sha512-rUvzwMo2ZQgzzPh2kcJyfbRSfVKRMhfIlhY7BzUfM4x6ZT0aijlgsf714Ll3Mbf5Fxii32kD0A/DmKsTecpccw==
apollo-server-express@2.6.2:
version "2.6.2"
resolved "https://registry.yarnpkg.com/apollo-server-express/-/apollo-server-express-2.6.2.tgz#526297c01a7a32fe9215566f9fd7ff92e82f1fa0"
integrity sha512-nbL3noJ5KxKGg+hT8UsAA7++oHWq/KNSevfdCluWTfUNqH1vYRTvAnARx/6JM06S9zcPTfOLcqwHnDnY9zYFxA==
apollo-server-express@2.6.3:
version "2.6.3"
resolved "https://registry.yarnpkg.com/apollo-server-express/-/apollo-server-express-2.6.3.tgz#62034c978f84207615c0430fb37ab006f71146fe"
integrity sha512-8ca+VpKArgNzFar0D3DesWnn0g9YDtFLhO56TQprHh2Spxu9WxTnYNjsYs2MCCNf+iV/uy7vTvEknErvnIcZaQ==
dependencies:
"@apollographql/graphql-playground-html" "1.6.20"
"@types/accepts" "^1.3.5"
"@types/body-parser" "1.17.0"
"@types/cors" "^2.8.4"
"@types/express" "4.16.1"
"@types/express" "4.17.0"
accepts "^1.3.5"
apollo-server-core "2.6.2"
apollo-server-core "2.6.3"
body-parser "^1.18.3"
cors "^2.8.4"
graphql-subscriptions "^1.0.0"
@ -1523,20 +1523,20 @@ apollo-server-plugin-base@0.5.2:
resolved "https://registry.yarnpkg.com/apollo-server-plugin-base/-/apollo-server-plugin-base-0.5.2.tgz#f97ba983f1e825fec49cba8ff6a23d00e1901819"
integrity sha512-j81CpadRLhxikBYHMh91X4aTxfzFnmmebEiIR9rruS6dywWCxV2aLW87l9ocD1MiueNam0ysdwZkX4F3D4csNw==
apollo-server-testing@~2.6.2:
version "2.6.2"
resolved "https://registry.yarnpkg.com/apollo-server-testing/-/apollo-server-testing-2.6.2.tgz#e0ecddd565fce1c38a346f9fbe6118f543ccf6a6"
integrity sha512-I9QLFk4I/z9oOIXfnLc8RPBYAKih6Olrg3RDeRvWhDjLQ8gfALXVhCO+7WuvM35wNZcZVn7aXBeZ8Y3mlgkj8w==
apollo-server-testing@~2.6.3:
version "2.6.3"
resolved "https://registry.yarnpkg.com/apollo-server-testing/-/apollo-server-testing-2.6.3.tgz#a0199a5d42000e60ecf0dea44b851f5f581e280e"
integrity sha512-LTkegcGVSkM+pA0FINDSYVl3TiFYKZyfjlKrEr/LN6wLiL6gbRgy6LMtk2j+qli/bnTDqqQREX8OEqmV8FKUoQ==
dependencies:
apollo-server-core "2.6.2"
apollo-server-core "2.6.3"
apollo-server@~2.6.2:
version "2.6.2"
resolved "https://registry.yarnpkg.com/apollo-server/-/apollo-server-2.6.2.tgz#33fe894b740588f059a7679346516ffce50377d5"
integrity sha512-fMXaAKIb0dX0lzcZ4zlu7ay1L596d9HTNkdn8cKuM7zmTpugZSAL966COguJUDSjUS9CaB1Kh5hl1yRuRqHXSA==
apollo-server@~2.6.3:
version "2.6.3"
resolved "https://registry.yarnpkg.com/apollo-server/-/apollo-server-2.6.3.tgz#71235325449c6d3881a5143975ca44c07a07d2d7"
integrity sha512-pTIXE5xEMAikKLTIBIqLNvimMETiZbzmiqDb6BGzIUicAz4Rxa1/+bDi1ZeJWrZQjE/TfBLd2Si3qam7dZGrjw==
dependencies:
apollo-server-core "2.6.2"
apollo-server-express "2.6.2"
apollo-server-core "2.6.3"
apollo-server-express "2.6.3"
express "^4.0.0"
graphql-subscriptions "^1.0.0"
graphql-tools "^4.0.0"
@ -2586,10 +2586,10 @@ data-urls@^1.0.0:
whatwg-mimetype "^2.2.0"
whatwg-url "^7.0.0"
date-fns@2.0.0-alpha.31:
version "2.0.0-alpha.31"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.31.tgz#51bcfdca25dfc9bea334a556ab33dfc0bb00421c"
integrity sha512-S19PwMqnbYsqcbCg02Yj9gv4veVNZ0OX7v2+zcd+Mq0RI7LoDKJipJjnMrTZ3Cc6blDuTce5G/pHXcVIGRwJWQ==
date-fns@2.0.0-alpha.33:
version "2.0.0-alpha.33"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.33.tgz#c2f73c3cc50ac301c9217eb93603c9bc40e891bf"
integrity sha512-tqUVEk3oxnJuNIvwAMKHAMo4uFRG0zXvjxZQll+BonoPt+m4NMcUgO14NDxbHuy7uYcrVErd2GdSsw02EDZQ7w==
debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
version "2.6.9"

6
deployment/legacy-migration/maintenance-worker/binaries/.env Normal file
View File

@ -0,0 +1,6 @@
# SSH Access
# SSH_USERNAME='username'
# SSH_HOST='example.org'
# UPLOADS_DIRECTORY=/var/www/api/uploads
OUTPUT_DIRECTORY='/uploads/'

7
deployment/legacy-migration/maintenance-worker/binaries/import_legacy_uploads
View File

@ -1,6 +1,11 @@
#!/usr/bin/env bash
set -e
# import .env config
set -o allexport
source $(dirname "$0")/.env
set +o allexport
for var in "SSH_USERNAME" "SSH_HOST" "UPLOADS_DIRECTORY"
do
if [[ -z "${!var}" ]]; then
@ -9,4 +14,4 @@ do
fi
done
rsync --archive --update --verbose ${SSH_USERNAME}@${SSH_HOST}:${UPLOADS_DIRECTORY}/ /uploads/
rsync --archive --update --verbose ${SSH_USERNAME}@${SSH_HOST}:${UPLOADS_DIRECTORY}/ ${OUTPUT_DIRECTORY}

4
package.json
View File

@ -22,8 +22,8 @@
"codecov": "^3.5.0",
"cross-env": "^5.2.0",
"cypress": "^3.3.1",
"cypress-cucumber-preprocessor": "^1.11.2",
"cypress-file-upload": "^3.1.2",
"cypress-cucumber-preprocessor": "^1.12.0",
"cypress-file-upload": "^3.1.4",
"cypress-plugin-retries": "^1.2.2",
"dotenv": "^8.0.0",
"faker": "^4.1.0",

11
webapp/assets/styles/main.scss
View File

@ -10,7 +10,7 @@ $easeOut: cubic-bezier(0.19, 1, 0.22, 1);
&::before {
@include border-radius($border-radius-x-large);
box-shadow: inset 0 0 0 5px $color-danger;
content: "";
content: '';
display: block;
position: absolute;
width: 100%;
@ -102,10 +102,10 @@ hr {
height: 1px !important;
}
[class$=menu-trigger] {
[class$='menu-trigger'] {
user-select: none;
}
[class$=menu-popover] {
[class$='menu-popover'] {
display: inline-block;
nav {
@ -145,10 +145,11 @@ hr {
}
}
[class$="menu-popover"] {
[class$='menu-popover'] {
min-width: 130px;
a, button {
a,
button {
display: flex;
align-content: center;
align-items: center;

2
webapp/components/Avatar/Avatar.spec.js
View File

@ -1,9 +1,11 @@
import { mount, createLocalVue } from '@vue/test-utils'
import Styleguide from '@human-connection/styleguide'
import Avatar from './Avatar.vue'
import Filters from '~/plugins/vue-filters'
const localVue = createLocalVue()
localVue.use(Styleguide)
localVue.use(Filters)
describe('Avatar.vue', () => {
let propsData = {}

12
webapp/components/Avatar/Avatar.vue
View File

@ -1,5 +1,10 @@
<template>
<ds-avatar :image="avatarUrl" :name="userName" class="avatar" :size="size" />
<ds-avatar
:image="user && user.avatar | proxyApiUrl"
:name="userName"
class="avatar"
:size="size"
/>
</template>
<script>
@ -10,11 +15,6 @@ export default {
size: { type: String, default: 'small' },
},
computed: {
avatarUrl() {
const { avatar: imageSrc } = this.user || {}
if (!imageSrc) return imageSrc
return imageSrc.startsWith('/') ? imageSrc.replace('/', '/api/') : imageSrc
},
userName() {
const { name } = this.user || {}
// The name is used to display the initials in case

6
webapp/components/Badges.vue
View File

@ -1,17 +1,13 @@
<template>
<div :class="[badges.length === 2 && 'hc-badges-dual']" class="hc-badges">
<div v-for="badge in badges" :key="badge.key" class="hc-badge-container">
<hc-image :title="badge.key" :image-props="{ src: badge.icon }" class="hc-badge" />
<img :title="badge.key" :src="badge.icon | proxyApiUrl" class="hc-badge" />
</div>
</div>
</template>
<script>
import HcImage from './Image'
export default {
components: {
HcImage,
},
props: {
badges: {
type: Array,

3
webapp/components/Comment.spec.js
View File

@ -25,6 +25,9 @@ describe('Comment.vue', () => {
success: jest.fn(),
error: jest.fn(),
},
$filters: {
truncate: a => a,
},
$apollo: {
mutate: jest.fn().mockResolvedValue(),
},

27
webapp/components/Comment.vue
View File

@ -9,12 +9,13 @@
<ds-space margin-bottom="x-small">
<hc-user :user="author" :date-time="comment.createdAt" />
</ds-space>
<!-- Content Menu (can open Modals) -->
<no-ssr>
<content-menu
placement="bottom-end"
resource-type="comment"
:resource="comment"
:callbacks="{ confirm: deleteCommentCallback, cancel: null }"
:modalsData="menuModalsData"
style="float-right"
:is-owner="isAuthor(author.id)"
/>
@ -59,6 +60,30 @@ export default {
if (this.deleted) return {}
return this.comment.author || {}
},
menuModalsData() {
return {
delete: {
titleIdent: 'delete.comment.title',
messageIdent: 'delete.comment.message',
messageParams: {
name: this.$filters.truncate(this.comment.contentExcerpt, 30),
},
buttons: {
confirm: {
danger: true,
icon: 'trash',
textIdent: 'delete.submit',
callback: this.deleteCommentCallback,
},
cancel: {
icon: 'close',
textIdent: 'delete.cancel',
callback: () => {},
},
},
},
}
},
},
methods: {
isAuthor(id) {

10
webapp/components/ContentMenu.vue
View File

@ -43,7 +43,13 @@ export default {
return value.match(/(contribution|comment|organization|user)/)
},
},
callbacks: { type: Object, required: true },
modalsData: {
type: Object,
required: false,
// default: () => {
// return {}
// },
},
},
computed: {
routes() {
@ -145,7 +151,7 @@ export default {
data: {
type: this.resourceType,
resource: this.resource,
callbacks: this.callbacks,
modalsData: this.modalsData,
},
})
},

142
webapp/components/ContributionForm/ContributionForm.spec.js Normal file
View File

@ -0,0 +1,142 @@
import { config, mount, createLocalVue } from '@vue/test-utils'
import ContributionForm from './index.vue'
import Styleguide from '@human-connection/styleguide'
const localVue = createLocalVue()
localVue.use(Styleguide)
config.stubs['no-ssr'] = '<span><slot /></span>'
describe('ContributionForm.vue', () => {
let wrapper
let postTitleInput
let expectedParams
let deutschOption
let cancelBtn
let mocks
const postTitle = 'this is a title for a post'
const postContent = 'this is a post'
const computed = { locale: () => 'English' }
beforeEach(() => {
mocks = {
$t: jest.fn(),
$apollo: {
mutate: jest
.fn()
.mockResolvedValueOnce({
data: {
CreatePost: {
title: postTitle,
slug: 'this-is-a-title-for-a-post',
content: postContent,
contentExcerpt: postContent,
language: 'en',
},
},
})
.mockRejectedValue({ message: 'Not Authorised!' }),
},
$toast: {
error: jest.fn(),
success: jest.fn(),
},
$i18n: {
locale: () => 'en',
},
$router: {
back: jest.fn(),
push: jest.fn(),
},
}
})
describe('mount', () => {
const Wrapper = () => {
return mount(ContributionForm, { mocks, localVue, computed })
}
beforeEach(() => {
wrapper = Wrapper()
wrapper.setData({ form: { languageOptions: [{ label: 'Deutsch', value: 'de' }] } })
})
describe('CreatePost', () => {
describe('invalid form submission', () => {
it('title required for form submission', async () => {
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue('this is a title for a post')
await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
})
it('content required for form submission', async () => {
wrapper.vm.updateEditorContent('this is a post')
await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
})
})
describe('valid form submission', () => {
expectedParams = {
variables: { title: postTitle, content: postContent, language: 'en', id: null },
}
beforeEach(async () => {
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue('this is a title for a post')
wrapper.vm.updateEditorContent('this is a post')
await wrapper.find('form').trigger('submit')
})
it('with title and content', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it("sends a fallback language based on a user's locale", () => {
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
})
it('supports changing the language', async () => {
expectedParams.variables.language = 'de'
deutschOption = wrapper.findAll('li').at(0)
deutschOption.trigger('click')
await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
})
it("pushes the user to the post's page", async () => {
expect(mocks.$router.push).toHaveBeenCalledTimes(1)
})
it('shows a success toaster', () => {
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
})
})
describe('cancel', () => {
it('calls $router.back() when cancel button clicked', () => {
cancelBtn = wrapper.find('.cancel-button')
cancelBtn.trigger('click')
expect(mocks.$router.back).toHaveBeenCalledTimes(1)
})
})
describe('handles errors', () => {
beforeEach(async () => {
wrapper = Wrapper()
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue('this is a title for a post')
wrapper.vm.updateEditorContent('this is a post')
// second submission causes mutation to reject
await wrapper.find('form').trigger('submit')
})
it('shows an error toaster when apollo mutation rejects', async () => {
await wrapper.find('form').trigger('submit')
await mocks.$apollo.mutate
expect(mocks.$toast.error).toHaveBeenCalledWith('Not Authorised!')
})
})
})
})
})

55
webapp/components/ContributionForm/index.vue
View File

@ -6,8 +6,27 @@
<no-ssr>
<hc-editor :users="users" :value="form.content" @input="updateEditorContent" />
</no-ssr>
<ds-space margin-bottom="xxx-large" />
<ds-flex class="contribution-form-footer">
<ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
<ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
<ds-space margin-bottom="small" />
<ds-select
model="language"
:options="form.languageOptions"
icon="globe"
:placeholder="locale"
:label="$t('contribution.languageSelectLabel')"
/>
</ds-flex-item>
</ds-flex>
<div slot="footer" style="text-align: right">
<ds-button :disabled="loading || disabled" ghost @click.prevent="$router.back()">
<ds-button
:disabled="loading || disabled"
ghost
class="cancel-button"
@click="$router.back()"
>
{{ $t('actions.cancel') }}
</ds-button>
<ds-button
@ -28,6 +47,9 @@
<script>
import gql from 'graphql-tag'
import HcEditor from '~/components/Editor'
import orderBy from 'lodash/orderBy'
import locales from '~/locales'
import PostMutations from '~/graphql/PostMutations.js'
export default {
components: {
@ -41,6 +63,8 @@ export default {
form: {
title: '',
content: '',
language: null,
languageOptions: [],
},
formSchema: {
title: { required: true, min: 3, max: 64 },
@ -64,26 +88,38 @@ export default {
this.slug = contribution.slug
this.form.content = contribution.content
this.form.title = contribution.title
this.form.language = this.locale
},
},
},
computed: {
locale() {
const locale =
this.contribution && this.contribution.language
? locales.find(loc => this.contribution.language === loc.code)
: locales.find(loc => this.$i18n.locale() === loc.code)
return locale.name
},
},
mounted() {
this.availableLocales()
},
methods: {
submit() {
const postMutations = require('~/graphql/PostMutations.js').default(this)
this.loading = true
this.$apollo
.mutate({
mutation: this.id ? postMutations.UpdatePost : postMutations.CreatePost,
mutation: this.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
variables: {
id: this.id,
title: this.form.title,
content: this.form.content,
language: this.form.language ? this.form.language.value : this.$i18n.locale(),
},
})
.then(res => {
this.loading = false
this.$toast.success('Saved!')
this.$toast.success(this.$t('contribution.success'))
this.disabled = true
const result = res.data[this.id ? 'UpdatePost' : 'CreatePost']
@ -103,6 +139,11 @@ export default {
// this.form.content = value
this.$refs.contributionForm.update('content', value)
},
availableLocales() {
orderBy(locales, 'name').map(locale => {
this.form.languageOptions.push({ label: locale.name, value: locale.code })
})
},
},
apollo: {
User: {
@ -135,4 +176,8 @@ export default {
padding-right: 0;
}
}
.contribution-form-footer {
border-top: $border-size-base solid $border-color-softest;
}
</style>

183
webapp/components/DeleteData/DeleteData.spec.js Normal file
View File

@ -0,0 +1,183 @@
import { mount, createLocalVue } from '@vue/test-utils'
import DeleteData from './DeleteData.vue'
import Styleguide from '@human-connection/styleguide'
import Vuex from 'vuex'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Styleguide)
describe('DeleteData.vue', () => {
let mocks
let wrapper
let getters
let actions
let deleteAccountBtn
let enableDeletionInput
let enableContributionDeletionCheckbox
let enableCommentDeletionCheckbox
const deleteAccountName = 'Delete MyAccount'
const deleteContributionsMessage = 'Delete my 2 posts'
const deleteCommentsMessage = 'Delete my 3 comments'
beforeEach(() => {
mocks = {
$t: jest.fn(),
$apollo: {
mutate: jest
.fn()
.mockResolvedValueOnce({
data: {
DeleteData: {
id: 'u343',
},
},
})
.mockRejectedValue({ message: 'Not authorised!' }),
},
$toast: {
error: jest.fn(),
success: jest.fn(),
},
$router: {
history: {
push: jest.fn(),
},
},
}
getters = {
'auth/user': () => {
return { id: 'u343', name: deleteAccountName, contributionsCount: 2, commentsCount: 3 }
},
}
actions = { 'auth/logout': jest.fn() }
})
describe('mount', () => {
const Wrapper = () => {
const store = new Vuex.Store({
getters,
actions,
})
return mount(DeleteData, { mocks, localVue, store })
}
beforeEach(() => {
wrapper = Wrapper()
})
afterEach(() => {
jest.clearAllMocks()
})
it('defaults to deleteContributions to false', () => {
expect(wrapper.vm.deleteContributions).toEqual(false)
})
it('defaults to deleteComments to false', () => {
expect(wrapper.vm.deleteComments).toEqual(false)
})
it('defaults to deleteEnabled to false', () => {
expect(wrapper.vm.deleteEnabled).toEqual(false)
})
it('does not call the delete user mutation if deleteEnabled is false', () => {
deleteAccountBtn = wrapper.find('.ds-button-danger')
deleteAccountBtn.trigger('click')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
})
describe('calls the delete user mutation', () => {
beforeEach(() => {
enableDeletionInput = wrapper.find('.enable-deletion-input input')
enableDeletionInput.setValue(deleteAccountName)
deleteAccountBtn = wrapper.find('.ds-button-danger')
})
it('if deleteEnabled is true and only deletes user by default', () => {
deleteAccountBtn.trigger('click')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
id: 'u343',
resource: [],
},
}),
)
})
it("deletes a user's posts if requested", () => {
mocks.$t.mockImplementation(() => deleteContributionsMessage)
enableContributionDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(0)
enableContributionDeletionCheckbox.trigger('click')
deleteAccountBtn.trigger('click')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
id: 'u343',
resource: ['Post'],
},
}),
)
})
it("deletes a user's comments if requested", () => {
mocks.$t.mockImplementation(() => deleteCommentsMessage)
enableCommentDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(1)
enableCommentDeletionCheckbox.trigger('click')
deleteAccountBtn.trigger('click')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
id: 'u343',
resource: ['Comment'],
},
}),
)
})
it("deletes a user's posts and comments if requested", () => {
mocks.$t.mockImplementation(() => deleteContributionsMessage)
enableContributionDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(0)
enableContributionDeletionCheckbox.trigger('click')
mocks.$t.mockImplementation(() => deleteCommentsMessage)
enableCommentDeletionCheckbox = wrapper.findAll('.checkbox-container input').at(1)
enableCommentDeletionCheckbox.trigger('click')
deleteAccountBtn.trigger('click')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
id: 'u343',
resource: ['Post', 'Comment'],
},
}),
)
})
it('shows a success toaster after successful mutation', async () => {
await deleteAccountBtn.trigger('click')
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
})
it('redirect the user to the homepage', async () => {
await deleteAccountBtn.trigger('click')
expect(mocks.$router.history.push).toHaveBeenCalledWith('/')
})
})
describe('error handling', () => {
it('shows an error toaster when the mutation rejects', async () => {
enableDeletionInput = wrapper.find('.enable-deletion-input input')
enableDeletionInput.setValue(deleteAccountName)
deleteAccountBtn = wrapper.find('.ds-button-danger')
await deleteAccountBtn.trigger('click')
// second submission causes mutation to reject
await deleteAccountBtn.trigger('click')
await mocks.$apollo.mutate
expect(mocks.$toast.error).toHaveBeenCalledWith('Not authorised!')
})
})
})
})

224
webapp/components/DeleteData/DeleteData.vue Normal file
View File

@ -0,0 +1,224 @@
<template>
<div>
<ds-card hover>
<ds-space />
<ds-container>
<ds-flex>
<ds-flex-item :width="{ base: '22%', sm: '12%', md: '12%', lg: '8%' }">
<ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
</ds-flex-item>
<ds-flex-item :width="{ base: '78%', sm: '88%', md: '88%', lg: '92%' }">
<ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
</ds-flex-item>
<ds-space />
<ds-heading tag="h4">
{{ $t('settings.deleteUserAccount.accountDescription') }}
</ds-heading>
</ds-flex>
</ds-container>
<ds-space />
<ds-container>
<transition name="slide-up">
<div v-if="deleteEnabled">
<label v-if="currentUser.contributionsCount" class="checkbox-container">
<input type="checkbox" v-model="deleteContributions" />
<span class="checkmark"></span>
{{
$t('settings.deleteUserAccount.contributionsCount', {
count: currentUser.contributionsCount,
})
}}
</label>
<ds-space margin-bottom="small" />
<label v-if="currentUser.commentsCount" class="checkbox-container">
<input type="checkbox" v-model="deleteComments" />
<span class="checkmark"></span>
{{
$t('settings.deleteUserAccount.commentsCount', {
count: currentUser.commentsCount,
})
}}
</label>
<ds-space margin-bottom="small" />
<ds-section id="delete-user-account-warning">
<div v-html="$t('settings.deleteUserAccount.accountWarning')"></div>
</ds-section>
</div>
</transition>
</ds-container>
<template slot="footer" class="delete-data-footer">
<ds-container>
<div
class="delete-input-label"
v-html="$t('settings.deleteUserAccount.pleaseConfirm', { confirm: currentUser.name })"
></div>
<ds-space margin-bottom="xx-small" />
<ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'large' }">
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1.75 }">
<ds-input
v-model="enableDeletionValue"
@input="enableDeletion"
class="enable-deletion-input"
/>
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '100%', lg: 1 }">
<ds-button icon="trash" danger :disabled="!deleteEnabled" @click="handleSubmit">
{{ $t('settings.deleteUserAccount.name') }}
</ds-button>
</ds-flex-item>
</ds-flex>
</ds-container>
</template>
</ds-card>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import gql from 'graphql-tag'
export default {
name: 'DeleteData',
data() {
return {
deleteContributions: false,
deleteComments: false,
deleteEnabled: false,
}
},
computed: {
...mapGetters({
currentUser: 'auth/user',
}),
},
methods: {
...mapActions({
logout: 'auth/logout',
}),
enableDeletion() {
if (this.enableDeletionValue === this.currentUser.name) {
this.deleteEnabled = true
}
},
handleSubmit() {
let resourceArgs = []
if (this.deleteContributions) {
resourceArgs.push('Post')
}
if (this.deleteComments) {
resourceArgs.push('Comment')
}
this.$apollo
.mutate({
mutation: gql`
mutation($id: ID!, $resource: [String]) {
DeleteUser(id: $id, resource: $resource) {
id
}
}
`,
variables: { id: this.currentUser.id, resource: resourceArgs },
})
.then(() => {
this.$toast.success(this.$t('settings.deleteUserAccount.success'))
this.logout()
this.$router.history.push('/')
})
.catch(error => {
this.$toast.error(error.message)
})
},
},
}
</script>
<style lang="scss">
.delete-warning-icon {
color: $color-danger;
}
.checkbox-container {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
font-size: $font-size-large;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border: 2px solid $background-color-inverse-softer;
background-color: $background-color-base;
border-radius: $border-radius-x-large;
}
.checkbox-container:hover input ~ .checkmark {
background-color: $background-color-softest;
}
.checkbox-container input:checked ~ .checkmark {
background-color: $background-color-danger-active;
}
.checkmark:after {
content: '';
position: absolute;
display: none;
}
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}
.checkbox-container .checkmark:after {
left: 6px;
top: 3px;
width: 5px;
height: 10px;
border: solid $background-color-base;
border-width: 0 $border-size-large $border-size-large 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.enable-deletion-input input:focus {
border-color: $border-color-danger;
}
.delete-input-label {
font-size: $font-size-base;
}
b.is-danger {
color: $text-color-danger;
}
.delete-data-footer {
border-top: $border-size-base solid $border-color-softest;
background-color: $background-color-danger-inverse;
}
#delete-user-account-warning {
background-color: $background-color-danger-inverse;
border-left: $border-size-x-large solid $background-color-danger-active;
color: $text-color-danger;
margin-left: 0px;
margin-right: 0px;
border-radius: $border-radius-x-large;
}
</style>

1
webapp/components/Editor/index.vue
View File

@ -323,6 +323,7 @@ export default {
})
},
beforeDestroy() {
this.$root.$off('changeLanguage')
this.editor.destroy()
},
methods: {

20
webapp/components/Image/index.vue
View File

@ -1,20 +0,0 @@
<template>
<img v-bind="imageProps" :src="imageSrc" />
</template>
<script>
export default {
props: {
imageProps: {
type: Object,
required: true,
},
},
computed: {
imageSrc() {
const src = this.imageProps.src
return src.startsWith('/') ? src.replace('/', '/api/') : src
},
},
}
</script>

39
webapp/components/Image/spec.js
View File

@ -1,39 +0,0 @@
import { shallowMount } from '@vue/test-utils'
import Image from '.'
describe('Image', () => {
let propsData = { imageProps: { class: 'hc-badge', src: '' } }
const Wrapper = () => {
return shallowMount(Image, { propsData })
}
it('renders', () => {
expect(Wrapper().is('img')).toBe(true)
})
it('passes properties down to `img`', () => {
expect(Wrapper().classes()).toEqual(['hc-badge'])
})
describe('given a relative `src`', () => {
beforeEach(() => {
propsData.imageProps.src = '/img/badges/fundraisingbox_de_airship.svg'
})
it('adds a prefix to load the image from the backend', () => {
expect(Wrapper().attributes('src')).toBe('/api/img/badges/fundraisingbox_de_airship.svg')
})
})
describe('given an absolute `src`', () => {
beforeEach(() => {
propsData.imageProps.src = 'http://lorempixel.com/640/480/animals'
})
it('keeps the URL as is', () => {
// e.g. our seeds have absolute image URLs
expect(Wrapper().attributes('src')).toBe('http://lorempixel.com/640/480/animals')
})
})
})

28
webapp/components/Modal.spec.js
View File

@ -1,6 +1,6 @@
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Modal from './Modal.vue'
import DeleteModal from './Modal/DeleteModal.vue'
import ConfirmModal from './Modal/ConfirmModal.vue'
import DisableModal from './Modal/DisableModal.vue'
import ReportModal from './Modal/ReportModal.vue'
import Vuex from 'vuex'
@ -60,7 +60,7 @@ describe('Modal.vue', () => {
it('initially empty', () => {
wrapper = Wrapper()
expect(wrapper.contains(DeleteModal)).toBe(false)
expect(wrapper.contains(ConfirmModal)).toBe(false)
expect(wrapper.contains(DisableModal)).toBe(false)
expect(wrapper.contains(ReportModal)).toBe(false)
})
@ -75,10 +75,6 @@ describe('Modal.vue', () => {
id: 'c456',
title: 'some title',
},
callbacks: {
confirm: null,
cancel: null,
},
},
}
wrapper = Wrapper()
@ -93,10 +89,6 @@ describe('Modal.vue', () => {
type: 'contribution',
name: 'some title',
id: 'c456',
callbacks: {
confirm: null,
cancel: null,
},
})
})
@ -117,20 +109,12 @@ describe('Modal.vue', () => {
name: 'Author name',
},
},
callbacks: {
confirm: null,
cancel: null,
},
}
wrapper = Wrapper()
expect(wrapper.find(DisableModal).props()).toEqual({
type: 'comment',
name: 'Author name',
id: 'c456',
callbacks: {
confirm: null,
cancel: null,
},
})
})
@ -140,20 +124,12 @@ describe('Modal.vue', () => {
resource: {
id: 'c456',
},
callbacks: {
confirm: null,
cancel: null,
},
}
wrapper = Wrapper()
expect(wrapper.find(DisableModal).props()).toEqual({
type: 'comment',
name: '',
id: 'c456',
callbacks: {
confirm: null,
cancel: null,
},
})
})
})

12
webapp/components/Modal.vue
View File

@ -6,7 +6,6 @@
:id="data.resource.id"
:type="data.type"
:name="name"
:callbacks="data.callbacks"
@close="close"
/>
<release-modal
@ -21,22 +20,21 @@
:id="data.resource.id"
:type="data.type"
:name="name"
:callbacks="data.callbacks"
@close="close"
/>
<delete-modal
<confirm-modal
v-if="open === 'delete'"
:id="data.resource.id"
:type="data.type"
:name="name"
:callbacks="data.callbacks"
:modalData="data.modalsData.delete"
@close="close"
/>
</div>
</template>
<script>
import DeleteModal from '~/components/Modal/DeleteModal'
import ConfirmModal from '~/components/Modal/ConfirmModal'
import DisableModal from '~/components/Modal/DisableModal'
import ReleaseModal from '~/components/ReleaseModal/ReleaseModal.vue'
import ReportModal from '~/components/Modal/ReportModal'
@ -48,7 +46,7 @@ export default {
DisableModal,
ReleaseModal,
ReportModal,
DeleteModal,
ConfirmModal,
},
computed: {
...mapGetters({
@ -63,7 +61,7 @@ export default {
switch (this.data.type) {
case 'user':
return name
case 'contribution':
case 'contribution': // REFACTORING: In ConfirmModal – Already replaced "title" by "this.menuModalsData.delete.messageParams".
return title
case 'comment':
return author && author.name

61
webapp/components/Modal/DeleteModal.spec.js → webapp/components/Modal/ConfirmModal.spec.js
View File

@ -1,28 +1,29 @@
import { shallowMount, mount, createLocalVue } from '@vue/test-utils'
import DeleteModal from './DeleteModal.vue'
import Vuex from 'vuex'
import Styleguide from '@human-connection/styleguide'
import ConfirmModal from './ConfirmModal.vue'
import { postMenuModalsData } from '~/components/utils/PostHelpers'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Styleguide)
describe('DeleteModal.vue', () => {
describe('ConfirmModal.vue', () => {
let Wrapper
let wrapper
let propsData
let mocks
const postName = 'It is a post'
const confirmCallback = jest.fn()
const cancelCallback = jest.fn()
beforeEach(() => {
propsData = {
type: 'contribution',
id: 'p23',
name: 'It is a post',
callbacks: {
confirm: jest.fn(),
cancel: jest.fn(),
},
name: postName,
modalData: postMenuModalsData(postName, confirmCallback, cancelCallback).delete,
}
mocks = {
$t: jest.fn(),
@ -32,9 +33,13 @@ describe('DeleteModal.vue', () => {
}
})
afterEach(() => {
jest.clearAllMocks()
})
describe('shallowMount', () => {
Wrapper = () => {
return shallowMount(DeleteModal, {
return shallowMount(ConfirmModal, {
propsData,
mocks,
localVue,
@ -61,7 +66,7 @@ describe('DeleteModal.vue', () => {
...propsData,
type: 'contribution',
id: 'p23',
name: 'It is a post',
name: postName,
}
wrapper = Wrapper()
})
@ -72,32 +77,7 @@ describe('DeleteModal.vue', () => {
[
'delete.contribution.message',
{
name: 'It is a post',
},
],
]
expect(calls).toEqual(expect.arrayContaining(expected))
})
})
describe('given a comment', () => {
beforeEach(() => {
propsData = {
...propsData,
type: 'comment',
id: 'c4',
name: 'It is the user of the comment',
}
wrapper = Wrapper()
})
it('mentions comments user name', () => {
const calls = mocks.$t.mock.calls
const expected = [
[
'delete.comment.message',
{
name: 'It is the user of the comment',
name: postName,
},
],
]
@ -108,7 +88,7 @@ describe('DeleteModal.vue', () => {
describe('mount', () => {
Wrapper = () => {
return mount(DeleteModal, {
return mount(ConfirmModal, {
propsData,
mocks,
localVue,
@ -135,7 +115,7 @@ describe('DeleteModal.vue', () => {
})
it('does call the cancel callback', () => {
expect(propsData.callbacks.cancel).toHaveBeenCalledTimes(1)
expect(cancelCallback).toHaveBeenCalledTimes(1)
})
it('emits "close"', () => {
@ -161,10 +141,11 @@ describe('DeleteModal.vue', () => {
})
it('does call the confirm callback', () => {
expect(propsData.callbacks.confirm).toHaveBeenCalledTimes(1)
expect(confirmCallback).toHaveBeenCalledTimes(1)
})
it('emits close', () => {
expect(wrapper.emitted().close).toBeTruthy()
it('emits "close"', () => {
expect(wrapper.emitted().close).toHaveLength(1)
})
it('resets success', () => {

31
webapp/components/Modal/DeleteModal.vue → webapp/components/Modal/ConfirmModal.vue
View File

@ -10,10 +10,18 @@
<p v-html="message" />
<template slot="footer">
<ds-button class="cancel" icon="close" @click="cancel">{{ $t('delete.cancel') }}</ds-button>
<ds-button class="cancel" :icon="modalData.buttons.cancel.icon" @click="cancel">
{{ $t(modalData.buttons.cancel.textIdent) }}
</ds-button>
<ds-button danger class="confirm" icon="trash" :loading="loading" @click="confirm">
{{ $t('delete.submit') }}
<ds-button
:danger="modalData.buttons.confirm.danger"
class="confirm"
:icon="modalData.buttons.confirm.icon"
:loading="loading"
@click="confirm"
>
{{ $t(modalData.buttons.confirm.textIdent) }}
</ds-button>
</template>
</ds-modal>
@ -23,14 +31,14 @@
import { SweetalertIcon } from 'vue-sweetalert-icons'
export default {
name: 'DeleteModal',
name: 'ConfirmModal',
components: {
SweetalertIcon,
},
props: {
name: { type: String, default: '' },
type: { type: String, required: true },
callbacks: { type: Object, required: true },
modalData: { type: Object, required: true },
id: { type: String, required: true },
},
data() {
@ -42,18 +50,15 @@ export default {
},
computed: {
title() {
return this.$t(`delete.${this.type}.title`)
return this.$t(this.modalData.titleIdent)
},
message() {
const name = this.$filters.truncate(this.name, 30)
return this.$t(`delete.${this.type}.message`, { name })
return this.$t(this.modalData.messageIdent, this.modalData.messageParams)
},
},
methods: {
async cancel() {
if (this.callbacks.cancel) {
await this.callbacks.cancel()
}
await this.modalData.buttons.cancel.callback()
this.isOpen = false
setTimeout(() => {
this.$emit('close')
@ -62,9 +67,7 @@ export default {
async confirm() {
this.loading = true
try {
if (this.callbacks.confirm) {
await this.callbacks.confirm()
}
await this.modalData.buttons.confirm.callback()
this.success = true
setTimeout(() => {
this.isOpen = false

12
webapp/components/Modal/DisableModal.spec.js
View File

@ -16,10 +16,6 @@ describe('DisableModal.vue', () => {
type: 'contribution',
id: 'c42',
name: 'blah',
callbacks: {
confirm: jest.fn(),
cancel: jest.fn(),
},
}
mocks = {
$filters: {
@ -33,8 +29,12 @@ describe('DisableModal.vue', () => {
$apollo: {
mutate: jest
.fn()
.mockResolvedValueOnce({ enable: 'u4711' })
.mockRejectedValue({ message: 'Not Authorised!' }),
.mockResolvedValueOnce({
enable: 'u4711',
})
.mockRejectedValue({
message: 'Not Authorised!',
}),
},
location: {
reload: jest.fn(),

11
webapp/components/Modal/DisableModal.vue
View File

@ -21,7 +21,6 @@ export default {
props: {
name: { type: String, default: '' },
type: { type: String, required: true },
callbacks: { type: Object, required: true },
id: { type: String, required: true },
},
data() {
@ -42,9 +41,8 @@ export default {
},
methods: {
async cancel() {
if (this.callbacks.cancel) {
await this.callbacks.cancel()
}
// TODO: Use the "modalData" structure introduced in "ConfirmModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.cancel.callback()
this.isOpen = false
setTimeout(() => {
this.$emit('close')
@ -52,9 +50,8 @@ export default {
},
async confirm() {
try {
if (this.callbacks.confirm) {
await this.callbacks.confirm()
}
// TODO: Use the "modalData" structure introduced in "ConfirmModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.confirm.callback()
await this.$apollo.mutate({
mutation: gql`
mutation($id: ID!) {

4
webapp/components/Modal/ReportModal.spec.js
View File

@ -17,10 +17,6 @@ describe('ReportModal.vue', () => {
propsData = {
type: 'contribution',
id: 'c43',
callbacks: {
confirm: jest.fn(),
cancel: jest.fn(),
},
}
mocks = {
$t: jest.fn(),

15
webapp/components/Modal/ReportModal.vue
View File

@ -10,9 +10,7 @@
<p v-html="message" />
<template slot="footer">
<ds-button class="cancel" icon="close" @click="cancel">
{{ $t('report.cancel') }}
</ds-button>
<ds-button class="cancel" icon="close" @click="cancel">{{ $t('report.cancel') }}</ds-button>
<ds-button
danger
@ -39,7 +37,6 @@ export default {
props: {
name: { type: String, default: '' },
type: { type: String, required: true },
callbacks: { type: Object, required: true },
id: { type: String, required: true },
},
data() {
@ -60,9 +57,8 @@ export default {
},
methods: {
async cancel() {
if (this.callbacks.cancel) {
await this.callbacks.cancel()
}
// TODO: Use the "modalData" structure introduced in "ConfirmModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.cancel.callback()
this.isOpen = false
setTimeout(() => {
this.$emit('close')
@ -71,9 +67,8 @@ export default {
async confirm() {
this.loading = true
try {
if (this.callbacks.confirm) {
await this.callbacks.confirm()
}
// TODO: Use the "modalData" structure introduced in "ConfirmModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.confirm.callback()
await this.$apollo.mutate({
mutation: gql`
mutation($id: ID!) {

2
webapp/components/Password/Change.spec.js
View File

@ -1,10 +1,12 @@
import { mount, createLocalVue } from '@vue/test-utils'
import ChangePassword from './Change.vue'
import Styleguide from '@human-connection/styleguide'
import Filters from '~/plugins/vue-filters'
const localVue = createLocalVue()
localVue.use(Styleguide)
localVue.use(Filters)
describe('ChangePassword.vue', () => {
let mocks

130
webapp/components/PostCard/index.spec.js Normal file
View File

@ -0,0 +1,130 @@
import { config, shallowMount, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
import Styleguide from '@human-connection/styleguide'
import Vuex from 'vuex'
import Filters from '~/plugins/vue-filters'
import PostCard from '.'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Styleguide)
localVue.use(Filters)
config.stubs['no-ssr'] = '<span><slot /></span>'
config.stubs['v-popover'] = '<span><slot /></span>'
describe('PostCard', () => {
let store
let stubs
let mocks
let propsData
let getters
let Wrapper
let wrapper
beforeEach(() => {
propsData = {
post: {
id: 'p23',
name: 'It is a post',
author: {
id: 'u1',
},
disabled: false,
},
}
store = new Vuex.Store({
getters: {
'auth/user': () => {
return {}
},
},
})
stubs = {
NuxtLink: RouterLinkStub,
}
mocks = {
$t: jest.fn(),
$toast: {
success: jest.fn(),
error: jest.fn(),
},
$apollo: {
mutate: jest.fn().mockResolvedValue(),
},
}
getters = {
'auth/user': () => {
return {}
},
}
})
describe('shallowMount', () => {
Wrapper = () => {
return shallowMount(PostCard, {
store,
propsData,
mocks,
localVue,
})
}
beforeEach(jest.useFakeTimers)
describe('test Post callbacks', () => {
beforeEach(() => {
wrapper = Wrapper()
})
describe('deletion of Post from Page by invoking "deletePostCallback()"', () => {
beforeEach(() => {
wrapper.vm.deletePostCallback()
})
describe('after timeout', () => {
beforeEach(jest.runAllTimers)
it('does call mutation', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it('mutation is successful', () => {
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
})
it('emits "removePostFromList"', () => {
expect(wrapper.emitted().removePostFromList).toHaveLength(1)
})
})
})
})
})
describe('mount', () => {
Wrapper = () => {
const store = new Vuex.Store({
getters,
})
return mount(PostCard, {
stubs,
mocks,
propsData,
store,
localVue,
})
}
describe('given a post', () => {
beforeEach(() => {
propsData.post = {
title: "It's a title",
}
})
it('renders title', () => {
expect(Wrapper().text()).toContain("It's a title")
})
})
})
})

32
webapp/components/PostCard/index.vue
View File

@ -1,6 +1,9 @@
<template>
<ds-flex-item :width="width">
<ds-card :image="post.image" :class="{ 'post-card': true, 'disabled-content': post.disabled }">
<ds-card
:image="post.image | proxyApiUrl"
:class="{ 'post-card': true, 'disabled-content': post.disabled }"
>
<!-- Post Link Target -->
<nuxt-link
class="post-link"
@ -18,9 +21,7 @@
</div>
<ds-space margin-bottom="small" />
<!-- Post Title -->
<ds-heading tag="h3" no-margin>
{{ post.title }}
</ds-heading>
<ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
<ds-space margin-bottom="small" />
<!-- Post Content Excerpt -->
<!-- eslint-disable vue/no-v-html -->
@ -55,7 +56,7 @@
<content-menu
resource-type="contribution"
:resource="post"
:callbacks="{ confirm: deletePostCallback, cancel: null }"
:modalsData="menuModalsData"
:is-owner="isAuthor"
/>
</div>
@ -72,7 +73,7 @@ import HcCategory from '~/components/Category'
import HcRibbon from '~/components/Ribbon'
// import { randomBytes } from 'crypto'
import { mapGetters } from 'vuex'
import PostMutationHelpers from '~/mixins/PostMutationHelpers'
import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
export default {
name: 'HcPostCard',
@ -82,7 +83,6 @@ export default {
HcRibbon,
ContentMenu,
},
mixins: [PostMutationHelpers],
props: {
post: {
type: Object,
@ -105,6 +105,24 @@ export default {
if (!author) return false
return this.user.id === this.post.author.id
},
menuModalsData() {
return postMenuModalsData(
// "this.post" may not always be defined at the beginning …
this.post ? this.$filters.truncate(this.post.title, 30) : '',
this.deletePostCallback,
)
},
},
methods: {
async deletePostCallback() {
try {
await this.$apollo.mutate(deletePostMutation(this.post.id))
this.$toast.success(this.$t('delete.contribution.success'))
this.$emit('removePostFromList')
} catch (err) {
this.$toast.error(err.message)
}
},
},
}
</script>

61
webapp/components/PostCard/spec.js
View File

@ -1,61 +0,0 @@
import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
import PostCard from '.'
import Styleguide from '@human-connection/styleguide'
import Vuex from 'vuex'
import Filters from '~/plugins/vue-filters'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Styleguide)
localVue.use(Filters)
config.stubs['no-ssr'] = '<span><slot /></span>'
config.stubs['v-popover'] = '<span><slot /></span>'
describe('PostCard', () => {
let stubs
let mocks
let propsData
let getters
beforeEach(() => {
propsData = {}
stubs = {
NuxtLink: RouterLinkStub,
}
mocks = {
$t: jest.fn(),
}
getters = {
'auth/user': () => {
return {}
},
}
})
const Wrapper = () => {
const store = new Vuex.Store({
getters,
})
return mount(PostCard, {
stubs,
mocks,
propsData,
store,
localVue,
})
}
describe('given a post', () => {
beforeEach(() => {
propsData.post = {
title: "It's a title",
}
})
it('renders title', () => {
expect(Wrapper().text()).toContain("It's a title")
})
})
})

4
webapp/components/ReleaseModal/ReleaseModal.vue
View File

@ -40,6 +40,8 @@ export default {
},
methods: {
cancel() {
// TODO: Use the "modalData" structure introduced in "ConfirmModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.cancel.callback()
this.isOpen = false
setTimeout(() => {
this.$emit('close')
@ -47,6 +49,8 @@ export default {
},
async confirm() {
try {
// TODO: Use the "modalData" structure introduced in "ConfirmModal" and refactor this here. Be aware that all the Jest tests have to be refactored as well !!!
// await this.modalData.buttons.confirm.callback()
await this.$apollo.mutate({
mutation: gql`
mutation($id: ID!) {

2
webapp/components/User/spec.js
View File

@ -2,6 +2,7 @@ import { mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
import User from './index'
import Vuex from 'vuex'
import VTooltip from 'v-tooltip'
import Filters from '~/plugins/vue-filters'
import Styleguide from '@human-connection/styleguide'
@ -11,6 +12,7 @@ const filter = jest.fn(str => str)
localVue.use(Vuex)
localVue.use(VTooltip)
localVue.use(Styleguide)
localVue.use(Filters)
localVue.filter('truncate', filter)

24
webapp/components/comments/CommentList/CommentList.spec.js
View File

@ -3,11 +3,13 @@ import CommentList from '.'
import Empty from '~/components/Empty'
import Vuex from 'vuex'
import Styleguide from '@human-connection/styleguide'
import Filters from '~/plugins/vue-filters'
const localVue = createLocalVue()
localVue.use(Styleguide)
localVue.use(Vuex)
localVue.use(Filters)
localVue.filter('truncate', string => string)
config.stubs['v-popover'] = '<span><slot /></span>'
@ -22,7 +24,9 @@ describe('CommentList.vue', () => {
let data
propsData = {
post: { id: 1 },
post: {
id: 1,
},
}
store = new Vuex.Store({
getters: {
@ -33,6 +37,9 @@ describe('CommentList.vue', () => {
})
mocks = {
$t: jest.fn(),
$filters: {
truncate: a => a,
},
$apollo: {
queries: {
Post: {
@ -49,13 +56,24 @@ describe('CommentList.vue', () => {
describe('shallowMount', () => {
const Wrapper = () => {
return mount(CommentList, { store, mocks, localVue, propsData, data })
return mount(CommentList, {
store,
mocks,
localVue,
propsData,
data,
})
}
beforeEach(() => {
wrapper = Wrapper()
wrapper.setData({
comments: [{ id: 'c1', contentExcerpt: 'this is a comment' }],
comments: [
{
id: 'c1',
contentExcerpt: 'this is a comment',
},
],
})
})

3
webapp/components/comments/CommentList/index.vue
View File

@ -54,6 +54,9 @@ export default {
this.refetchPostComments()
})
},
beforeDestroy() {
this.$root.$off('refetchPostComments')
},
methods: {
refetchPostComments() {
if (this.$apollo.queries.Post) {

35
webapp/components/utils/PostHelpers.js Normal file
View File

@ -0,0 +1,35 @@
import PostMutations from '~/graphql/PostMutations.js'
export function postMenuModalsData(truncatedPostName, confirmCallback, cancelCallback = () => {}) {
return {
delete: {
titleIdent: 'delete.contribution.title',
messageIdent: 'delete.contribution.message',
messageParams: {
name: truncatedPostName,
},
buttons: {
confirm: {
danger: true,
icon: 'trash',
textIdent: 'delete.submit',
callback: confirmCallback,
},
cancel: {
icon: 'close',
textIdent: 'delete.cancel',
callback: cancelCallback,
},
},
},
}
}
export function deletePostMutation(postId) {
return {
mutation: PostMutations().DeletePost,
variables: {
id: postId,
},
}
}

27
webapp/graphql/PostMutations.js
View File

@ -1,28 +1,37 @@
import gql from 'graphql-tag'
export default app => {
export default () => {
return {
CreatePost: gql(`
mutation($title: String!, $content: String!) {
CreatePost(title: $title, content: $content) {
CreatePost: gql`
mutation($title: String!, $content: String!, $language: String) {
CreatePost(title: $title, content: $content, language: $language) {
id
title
slug
content
contentExcerpt
language
}
}
`),
UpdatePost: gql(`
mutation($id: ID!, $title: String!, $content: String!) {
UpdatePost(id: $id, title: $title, content: $content) {
`,
UpdatePost: gql`
mutation($id: ID!, $title: String!, $content: String!, $language: String) {
UpdatePost(id: $id, title: $title, content: $content, language: $language) {
id
title
slug
content
contentExcerpt
language
}
}
`),
`,
DeletePost: gql`
mutation($id: ID!) {
DeletePost(id: $id) {
id
}
}
`,
}
}

16
webapp/locales/de.json
View File

@ -82,8 +82,14 @@
"download": {
"name": "Daten herunterladen"
},
"delete": {
"name": "Konto löschen"
"deleteUserAccount": {
"name": "Daten löschen",
"contributionsCount": "Meine {count} Beiträge löschen",
"commentsCount": "Meine {count} Kommentare löschen",
"accountDescription": "Sei dir bewusst, dass deine Beiträge und Kommentare für unsere Community wichtig sind. Wenn du sie trotzdem löschen möchtest, musst du sie unten markieren.",
"accountWarning": "Dein Konto, deine Beiträge oder Kommentare kannst du nach dem Löschen <b>WEDER VERWALTEN NOCH WIEDERHERSTELLEN!</b>",
"success": "Konto erfolgreich gelöscht",
"pleaseConfirm": "<b class='is-danger'>Zerstörerische Aktion!</b> Gib <b>{confirm}</b> ein, um zu bestätigen."
},
"organizations": {
"name": "Meine Organisationen"
@ -239,7 +245,7 @@
"comment": {
"title": "Lösche Kommentar",
"type": "Comment",
"message": "Bist du sicher, dass du den Kommentar von \"<b>{name}</b>\" löschen möchtest?",
"message": "Bist du sicher, dass du den Kommentar \"<b>{name}</b>\" löschen möchtest?",
"success": "Kommentar erfolgreich gelöscht!"
}
},
@ -295,5 +301,9 @@
"avatar": {
"submitted": "Upload erfolgreich"
}
},
"contribution": {
"success": "Gespeichert!",
"languageSelectLabel": "Sprache"
}
}

16
webapp/locales/en.json
View File

@ -82,8 +82,14 @@
"download": {
"name": "Download Data"
},
"delete": {
"name": "Delete Account"
"deleteUserAccount": {
"name": "Delete Data",
"contributionsCount": "Delete my {count} posts",
"commentsCount": "Delete my {count} comments",
"accountDescription": "Be aware that your Post and Comments are important to our community. If you still choose to delete them, you have to mark them below.",
"accountWarning": "You <b>CAN'T MANAGE</b> and <b>CAN'T RECOVER</b> your Account, Posts, or Comments after deleting your account!",
"success": "Account successfully deleted",
"pleaseConfirm": "<b class='is-danger'>Destructive action!</b> Type <b>{confirm}</b> to confirm"
},
"organizations": {
"name": "My Organizations"
@ -239,7 +245,7 @@
"comment": {
"title": "Delete Comment",
"type": "Comment",
"message": "Do you really want to delete the comment from \"<b>{name}</b>\"?",
"message": "Do you really want to delete the comment \"<b>{name}</b>\"?",
"success": "Comment successfully deleted!"
}
},
@ -294,5 +300,9 @@
"avatar": {
"submitted": "Upload successful"
}
},
"contribution": {
"success": "Saved!",
"languageSelectLabel": "Language"
}
}

39
webapp/mixins/PostMutationHelpers.js
View File

@ -1,39 +0,0 @@
import gql from 'graphql-tag'
export default {
methods: {
async deletePostCallback(postDisplayType = 'list') {
// console.log('inside "deletePostCallback" !!! ', this.post)
try {
var gqlMutation = gql`
mutation($id: ID!) {
DeletePost(id: $id) {
id
}
}
`
await this.$apollo.mutate({
mutation: gqlMutation,
variables: {
id: this.post.id,
},
})
this.$toast.success(this.$t('delete.contribution.success'))
// console.log('called "this.$t" !!!')
switch (postDisplayType) {
case 'list':
this.$emit('deletePost')
// console.log('emitted "deletePost" !!!')
break
default:
// case 'page'
// console.log('called "this.$router.history.push" !!!')
this.$router.history.push('/') // Single page type: Redirect to index (main) page
break
}
} catch (err) {
this.$toast.error(err.message)
}
},
},
}

4
webapp/package.json
View File

@ -59,7 +59,7 @@
"apollo-client": "~2.6.2",
"cookie-universal-nuxt": "~2.0.16",
"cross-env": "~5.2.0",
"date-fns": "2.0.0-alpha.31",
"date-fns": "2.0.0-alpha.33",
"express": "~4.17.1",
"graphql": "~14.3.1",
"jsonwebtoken": "~8.5.1",
@ -69,7 +69,7 @@
"nuxt-env": "~0.1.0",
"stack-utils": "^1.0.2",
"string-hash": "^1.1.3",
"tiptap": "1.20.1",
"tiptap": "1.21.0",
"tiptap-extensions": "1.22.2",
"v-tooltip": "~2.0.2",
"vue-count-to": "~1.0.13",

2
webapp/pages/index.vue
View File

@ -9,7 +9,7 @@
:key="post.id"
:post="post"
:width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
@deletePost="deletePost(index, post.id)"
@removePostFromList="deletePost(index, post.id)"
/>
</ds-flex>
<no-ssr>

18
webapp/pages/post/_id/_slug/index.spec.js
View File

@ -56,7 +56,7 @@ describe('PostSlug', () => {
beforeEach(jest.useFakeTimers)
describe('test mixin "PostMutationHelpers"', () => {
describe('test Post callbacks', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper.setData({
@ -70,22 +70,14 @@ describe('PostSlug', () => {
})
})
describe('deletion of Post from Page by invoking "deletePostCallback(`page`)"', () => {
describe('deletion of Post from Page by invoking "deletePostCallback()"', () => {
beforeEach(() => {
wrapper.vm.deletePostCallback('page')
wrapper.vm.deletePostCallback()
})
describe('after timeout', () => {
beforeEach(jest.runAllTimers)
it('not emits "deletePost"', () => {
expect(wrapper.emitted().deletePost).toBeFalsy()
})
it('does go to index (main) page', () => {
expect(mocks.$router.history.push).toHaveBeenCalledTimes(1)
})
it('does call mutation', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
@ -93,6 +85,10 @@ describe('PostSlug', () => {
it('mutation is successful', () => {
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
})
it('does go to index (main) page', () => {
expect(mocks.$router.history.push).toHaveBeenCalledTimes(1)
})
})
})
})

30
webapp/pages/post/_id/_slug/index.vue
View File

@ -7,19 +7,18 @@
>
<ds-space margin-bottom="small" />
<hc-user :user="post.author" :date-time="post.createdAt" />
<!-- Content Menu (can open Modals) -->
<no-ssr>
<content-menu
placement="bottom-end"
resource-type="contribution"
:resource="post"
:callbacks="{ confirm: () => deletePostCallback('page'), cancel: null }"
:is-owner="isAuthor(post.author.id)"
:modalsData="menuModalsData"
:is-owner="isAuthor(post.author ? post.author.id : null)"
/>
</no-ssr>
<ds-space margin-bottom="small" />
<ds-heading tag="h3" no-margin>
{{ post.title }}
</ds-heading>
<ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
<ds-space margin-bottom="small" />
<!-- Content -->
<!-- eslint-disable vue/no-v-html -->
@ -72,7 +71,7 @@ import HcUser from '~/components/User'
import HcShoutButton from '~/components/ShoutButton.vue'
import HcCommentForm from '~/components/comments/CommentForm'
import HcCommentList from '~/components/comments/CommentList'
import PostMutationHelpers from '~/mixins/PostMutationHelpers'
import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
export default {
name: 'PostSlug',
@ -89,7 +88,6 @@ export default {
HcCommentForm,
HcCommentList,
},
mixins: [PostMutationHelpers],
head() {
return {
title: this.title,
@ -211,10 +209,28 @@ export default {
this.ready = true
}, 50)
},
computed: {
menuModalsData() {
return postMenuModalsData(
// "this.post" may not always be defined at the beginning …
this.post ? this.$filters.truncate(this.post.title, 30) : '',
this.deletePostCallback,
)
},
},
methods: {
isAuthor(id) {
return this.$store.getters['auth/user'].id === id
},
async deletePostCallback() {
try {
await this.$apollo.mutate(deletePostMutation(this.post.id))
this.$toast.success(this.$t('delete.contribution.success'))
this.$router.history.push('/') // Redirect to index (main) page
} catch (err) {
this.$toast.error(err.message)
}
},
},
}
</script>

6
webapp/pages/post/_id/_slug/more-info.vue
View File

@ -1,8 +1,6 @@
<template>
<ds-card>
<h2 style="margin-bottom: .2em;">
Mehr Informationen
</h2>
<h2 style="margin-bottom: .2em;">Mehr Informationen</h2>
<p>Hier findest du weitere infos zum Thema.</p>
<ds-space />
<h3>
@ -42,7 +40,7 @@
:key="relatedPost.id"
:post="relatedPost"
:width="{ base: '100%', lg: 1 }"
@deletePost="post.relatedContributions.splice(index, 1)"
@removePostFromList="post.relatedContributions.splice(index, 1)"
/>
</ds-flex>
<hc-empty v-else margin="large" icon="file" message="No related Posts" />

5
webapp/pages/post/edit/_id.vue
View File

@ -3,9 +3,7 @@
<ds-flex-item :width="{ base: '100%', md: 3 }">
<hc-contribution-form :contribution="contribution" />
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', md: 1 }">
&nbsp;
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
</ds-flex>
</template>
@ -49,6 +47,7 @@ export default {
deleted
slug
image
language
author {
id
disabled

61
webapp/pages/profile/_id/_slug.spec.js
View File

@ -1,12 +1,14 @@
import { config, mount, shallowMount, createLocalVue } from '@vue/test-utils'
import { config, mount, createLocalVue } from '@vue/test-utils'
import ProfileSlug from './_slug.vue'
import Vuex from 'vuex'
import Styleguide from '@human-connection/styleguide'
import Filters from '~/plugins/vue-filters'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Styleguide)
localVue.use(Filters)
localVue.filter('date', d => d)
config.stubs['no-ssr'] = '<span><slot /></span>'
@ -24,8 +26,8 @@ describe('ProfileSlug', () => {
id: 'p23',
name: 'It is a post',
},
$t: jest.fn(t => t),
// If you mocking router, than don't use VueRouter with localVue: https://vue-test-utils.vuejs.org/guides/using-with-vue-router.html
$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',
@ -48,48 +50,6 @@ describe('ProfileSlug', () => {
}
})
describe('shallowMount', () => {
Wrapper = () => {
return shallowMount(ProfileSlug, {
mocks,
localVue,
})
}
beforeEach(jest.useFakeTimers)
describe('test mixin "PostMutationHelpers"', () => {
beforeEach(() => {
wrapper = Wrapper()
})
describe('deletion of Post from List by invoking "deletePostCallback(`list`)"', () => {
beforeEach(() => {
wrapper.vm.deletePostCallback('list')
})
describe('after timeout', () => {
beforeEach(jest.runAllTimers)
it('emits "deletePost"', () => {
expect(wrapper.emitted().deletePost).toHaveLength(1)
})
it('does not go to index (main) page', () => {
expect(mocks.$router.history.push).not.toHaveBeenCalled()
})
it('does call mutation', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it('mutation is successful', () => {
expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
})
})
})
})
})
describe('mount', () => {
Wrapper = () => {
return mount(ProfileSlug, {
@ -102,6 +62,7 @@ describe('ProfileSlug', () => {
beforeEach(() => {
mocks.$filters = {
removeLinks: c => c,
truncate: a => a,
}
mocks.$store = {
getters: {
@ -168,7 +129,10 @@ describe('ProfileSlug', () => {
describe('pagination returned less posts than available', () => {
beforeEach(() => {
const posts = [1, 2, 3, 4, 5].map(id => {
return { ...aPost, id }
return {
...aPost,
id,
}
})
wrapper.setData({
@ -198,7 +162,10 @@ describe('ProfileSlug', () => {
describe('pagination returned as many posts as available', () => {
beforeEach(() => {
const posts = [1, 2, 3, 4, 5, 6].map(id => {
return { ...aPost, id }
return {
...aPost,
id,
}
})
wrapper.setData({

32
webapp/pages/profile/_id/_slug.vue
View File

@ -12,12 +12,12 @@
>
<hc-upload v-if="myProfile" :user="user" />
<hc-avatar v-else :user="user" class="profile-avatar" size="x-large" />
<!-- Menu -->
<no-ssr>
<content-menu
placement="bottom-end"
resource-type="user"
:resource="user"
:callbacks="{ confirm: deletePostCallback, cancel: null }"
:is-owner="myProfile"
class="user-content-menu"
/>
@ -204,7 +204,7 @@
:key="post.id"
:post="post"
:width="{ base: '100%', md: '100%', xl: '50%' }"
@deletePost="Post.splice(index, 1)"
@removePostFromList="activePosts.splice(index, 1)"
/>
</template>
<template v-else-if="$apollo.loading">
@ -228,7 +228,6 @@
<script>
import uniqBy from 'lodash/uniqBy'
import User from '~/components/User'
import HcPostCard from '~/components/PostCard'
import HcFollowButton from '~/components/FollowButton.vue'
@ -239,8 +238,6 @@ import HcEmpty from '~/components/Empty.vue'
import ContentMenu from '~/components/ContentMenu'
import HcUpload from '~/components/Upload'
import HcAvatar from '~/components/Avatar/Avatar.vue'
import PostMutationHelpers from '~/mixins/PostMutationHelpers'
import PostQuery from '~/graphql/UserProfile/Post.js'
import UserQuery from '~/graphql/UserProfile/User.js'
@ -253,6 +250,7 @@ const tabToFilterMapping = ({ tab, id }) => {
}
export default {
name: 'HcUserProfile',
components: {
User,
HcPostCard,
@ -265,7 +263,6 @@ export default {
ContentMenu,
HcUpload,
},
mixins: [PostMutationHelpers],
transition: {
name: 'slide-up',
mode: 'out-in',
@ -275,6 +272,7 @@ export default {
return {
User: [],
Post: [],
activePosts: [],
voted: false,
page: 1,
pageSize: 6,
@ -304,12 +302,6 @@ export default {
offset() {
return (this.page - 1) * this.pageSize
},
activePosts() {
if (!this.Post) {
return []
}
return this.uniq(this.Post.filter(post => !post.deleted))
},
socialMediaLinks() {
const { socialMedia = [] } = this.user
return socialMedia.map(socialMedia => {
@ -332,6 +324,9 @@ export default {
throw new Error('User not found!')
}
},
Post(val) {
this.activePosts = this.setActivePosts()
},
},
methods: {
handleTab(tab) {
@ -365,6 +360,12 @@ export default {
fetchPolicy: 'cache-and-network',
})
},
setActivePosts() {
if (!this.Post) {
return []
}
return this.uniq(this.Post.filter(post => !post.deleted))
},
},
apollo: {
Post: {
@ -397,7 +398,6 @@ export default {
.pointer {
cursor: pointer;
}
.Tab {
border-collapse: collapse;
padding-bottom: 5px;
@ -405,7 +405,6 @@ export default {
.Tab:hover {
border-bottom: 2px solid #c9c6ce;
}
.Tabs {
position: relative;
background-color: #fff;
@ -441,14 +440,12 @@ export default {
transition: left 0.25s;
}
}
.profile-avatar.ds-avatar {
display: block;
margin: auto;
margin-top: -60px;
border: #fff 5px solid;
}
.page-name-profile-id-slug {
.ds-flex-item:first-child .content-menu {
position: absolute;
@ -456,17 +453,14 @@ export default {
right: $space-x-small;
}
}
.profile-top-navigation {
position: sticky;
top: 53px;
z-index: 2;
}
.ds-tab-nav {
.ds-card-content {
padding: 0 !important;
.ds-tab-nav-item {
&.ds-tab-nav-item-active {
border-bottom: 3px solid #17b53f;

12
webapp/pages/settings.vue
View File

@ -1,8 +1,6 @@
<template>
<div>
<ds-heading tag="h1">
{{ $t('settings.name') }}
</ds-heading>
<ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
<ds-flex gutter="small">
<ds-flex-item :width="{ base: '100%', md: '200px' }">
<ds-menu :routes="routes" :is-exact="() => true" />
@ -33,6 +31,10 @@ export default {
name: this.$t('settings.social-media.name'),
path: `/settings/my-social-media`,
},
{
name: this.$t('settings.deleteUserAccount.name'),
path: `/settings/delete-account`,
},
// TODO implement
/* {
name: this.$t('settings.invites.name'),
@ -44,10 +46,6 @@ export default {
path: `/settings/data-download`
}, */
// TODO implement
/* {
name: this.$t('settings.delete.name'),
path: `/settings/delete-account`
}, */
// TODO implement
/* {
name: this.$t('settings.organizations.name'),

8
webapp/pages/settings/delete-account.vue
View File

@ -1,15 +1,13 @@
<template>
<ds-card :header="$t('settings.delete.name')">
<hc-empty icon="tasks" message="Coming Soon…" />
</ds-card>
<delete-data />
</template>
<script>
import HcEmpty from '~/components/Empty.vue'
import DeleteData from '~/components/DeleteData/DeleteData.vue'
export default {
components: {
HcEmpty,
DeleteData,
},
}
</script>

2
webapp/pages/settings/my-social-media.spec.js
View File

@ -2,11 +2,13 @@ import { mount, createLocalVue } from '@vue/test-utils'
import MySocialMedia from './my-social-media.vue'
import Vuex from 'vuex'
import Styleguide from '@human-connection/styleguide'
import Filters from '~/plugins/vue-filters'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Styleguide)
localVue.use(Filters)
describe('my-social-media.vue', () => {
let wrapper

11
webapp/pages/settings/my-social-media.vue
View File

@ -4,12 +4,7 @@
<ds-list>
<ds-list-item v-for="link in socialMediaLinks" :key="link.id">
<a :href="link.url" target="_blank">
<hc-image
:image-props="{ src: link.favicon }"
alt="Social Media link"
width="16"
height="16"
/>
<img :src="link.favicon | proxyApiUrl" alt="Social Media link" width="16" height="16" />
{{ link.url }}
</a>
&nbsp;&nbsp;
@ -44,12 +39,8 @@
<script>
import gql from 'graphql-tag'
import { mapGetters, mapMutations } from 'vuex'
import HcImage from '~/components/Image'
export default {
components: {
HcImage,
},
data() {
return {
value: '',

4
webapp/plugins/vue-filters.js
View File

@ -93,6 +93,10 @@ export default ({ app = {} }) => {
return excerpt
},
proxyApiUrl: url => {
if (!url) return url
return url.startsWith('/') ? url.replace('/', '/api/') : url
},
})
// add all methods as filters on each vue component

2
webapp/store/auth.js
View File

@ -79,6 +79,8 @@ export const actions = {
role
about
locationName
contributionsCount
commentsCount
socialMedia {
id
url

45
webapp/yarn.lock
View File

@ -3754,10 +3754,10 @@ data-urls@^1.0.0:
whatwg-mimetype "^2.2.0"
whatwg-url "^7.0.0"
date-fns@2.0.0-alpha.31:
version "2.0.0-alpha.31"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.31.tgz#51bcfdca25dfc9bea334a556ab33dfc0bb00421c"
integrity sha512-S19PwMqnbYsqcbCg02Yj9gv4veVNZ0OX7v2+zcd+Mq0RI7LoDKJipJjnMrTZ3Cc6blDuTce5G/pHXcVIGRwJWQ==
date-fns@2.0.0-alpha.33:
version "2.0.0-alpha.33"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.33.tgz#c2f73c3cc50ac301c9217eb93603c9bc40e891bf"
integrity sha512-tqUVEk3oxnJuNIvwAMKHAMo4uFRG0zXvjxZQll+BonoPt+m4NMcUgO14NDxbHuy7uYcrVErd2GdSsw02EDZQ7w==
date-now@^0.1.4:
version "0.1.4"
@ -9017,7 +9017,7 @@ prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.2.3:
prosemirror-model "^1.0.0"
prosemirror-transform "^1.0.0"
prosemirror-tables@^0.8.0, prosemirror-tables@^0.8.1:
prosemirror-tables@^0.8.1:
version "0.8.1"
resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-0.8.1.tgz#ea99ad4effec99dd4e2fdb0b33cce4d2547eed83"
integrity sha512-6eY8I+NkyrXAQ1gmYkKo7XDLZaj0iGutdc/zT0+VMY15IzgBINwcRP62+miaCTuneLTKufMYzfUB37NjGJaetw==
@ -9035,17 +9035,12 @@ prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transfor
dependencies:
prosemirror-model "^1.0.0"
prosemirror-utils@^0.8.2:
version "0.8.2"
resolved "https://registry.yarnpkg.com/prosemirror-utils/-/prosemirror-utils-0.8.2.tgz#e0e4a47cd45b1cff3d84464446d9f92adf4a558b"
integrity sha512-jNIj3/eREx4x2FU6pFEUDmdVmtoRBuLA6JTjgNum/84Nf+Ns+Y9l0Q//R8EL/Qm/5J5xTg5/s+hmQkXaHY+ilA==
prosemirror-utils@^0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/prosemirror-utils/-/prosemirror-utils-0.9.0.tgz#3ab616c94ccd61fcb18968f0d5aa273a9f1f28e4"
integrity sha512-YcvmHcq7phbn+OagJSvmne92qZG9dOVfb3zfuA1HuyWUif3hUDt2Yfu299BHqVkEkUCF6FN7Gi9folDQntMhxA==
prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.9.6, prosemirror-view@^1.9.8:
prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.9.8:
version "1.9.8"
resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.9.8.tgz#47b961204a0b2e8ff87370c270d4f82598e81273"
integrity sha512-yS4yrqxydvi7ddz9VFLeJgbfVd5g3/bMcRxb1PbWtG0i9OrPSsiHaEBJHLVeTbraGqRlAu+tbNLakO7RhUhp1w==
@ -10565,7 +10560,7 @@ tippy.js@^4.3.4:
dependencies:
popper.js "^1.14.7"
tiptap-commands@^1.10.5, tiptap-commands@^1.10.7:
tiptap-commands@^1.10.6, tiptap-commands@^1.10.7:
version "1.10.7"
resolved "https://registry.yarnpkg.com/tiptap-commands/-/tiptap-commands-1.10.7.tgz#c177f875e8a90e05171fdd441190b4b7a769bd27"
integrity sha512-Ij62dHkYvOFUcaj+xlbahhoqcY8bFIEho6fXKrxcjjtGzS2DyJnvXmWN6Ow65uZWXkf5Zf8ae6XnYNaKqP3Pyg==
@ -10596,17 +10591,7 @@ tiptap-extensions@1.22.2:
tiptap "^1.22.2"
tiptap-commands "^1.10.7"
tiptap-utils@^1.5.3:
version "1.5.3"
resolved "https://registry.yarnpkg.com/tiptap-utils/-/tiptap-utils-1.5.3.tgz#7d4518a84eb6bfb10c98b19c901ca59123865f61"
integrity sha512-025uF1acJ7jLuA9dnKIxp8TQelyQ0uJqtT1jlziT8UslwZT5pKzwDsNkadFbnEBp6O9wfLZH0TuUtAUDmuq0VA==
dependencies:
prosemirror-model "^1.7.0"
prosemirror-state "^1.2.3"
prosemirror-tables "^0.8.0"
prosemirror-utils "^0.8.2"
tiptap-utils@^1.5.5:
tiptap-utils@^1.5.4, tiptap-utils@^1.5.5:
version "1.5.5"
resolved "https://registry.yarnpkg.com/tiptap-utils/-/tiptap-utils-1.5.5.tgz#f06c70f0319d9215433b3466b6ece369a078de0f"
integrity sha512-lnaCmIIkyK050qfsPeMDjoTW0sTqBHxfw1h2GXaX5Nr6JF4VQe0izgf2MI6LCd3PKecJBoW4ce5lNkDpV99+WA==
@ -10616,10 +10601,10 @@ tiptap-utils@^1.5.5:
prosemirror-tables "^0.8.1"
prosemirror-utils "^0.9.0"
tiptap@1.20.1:
version "1.20.1"
resolved "https://registry.yarnpkg.com/tiptap/-/tiptap-1.20.1.tgz#d10fd0cd73a96bbb1f2d581da02ceda38fa8695b"
integrity sha512-uVGxPknq+cQH0G8yyCHvo8p3jPMLZMnkLeFjcrTyiY9PXl6XsSJwOjtIg4GXnIyCcfz2jWI5mhJGzCD26cdJGA==
tiptap@1.21.0:
version "1.21.0"
resolved "https://registry.yarnpkg.com/tiptap/-/tiptap-1.21.0.tgz#4d8c1365c611e41c8d4f3d7aa195ddaf891e605b"
integrity sha512-MoOj/8OPMlmoAotIZjAIlUZ59yMMR83xReOw2rGjqbFOooncoY1rLEBp0xz5oe5FLYqoe8dKb+kzOoFERqckVQ==
dependencies:
prosemirror-commands "^1.0.8"
prosemirror-dropcursor "^1.1.1"
@ -10628,9 +10613,9 @@ tiptap@1.20.1:
prosemirror-keymap "^1.0.1"
prosemirror-model "^1.7.0"
prosemirror-state "^1.2.3"
prosemirror-view "^1.9.6"
tiptap-commands "^1.10.5"
tiptap-utils "^1.5.3"
prosemirror-view "^1.9.8"
tiptap-commands "^1.10.6"
tiptap-utils "^1.5.4"
tiptap@^1.22.2:
version "1.22.2"

16
yarn.lock
View File

@ -1805,10 +1805,10 @@ cucumber@^4.2.1:
util-arity "^1.0.2"
verror "^1.9.0"
cypress-cucumber-preprocessor@^1.11.2:
version "1.11.2"
resolved "https://registry.yarnpkg.com/cypress-cucumber-preprocessor/-/cypress-cucumber-preprocessor-1.11.2.tgz#daa86805e25a39cea1cf2278f3b7cee204478853"
integrity sha512-Cret/EmqGdC6QLUQrszDdzDt+y4aL0ViaOWfZ1PgM4GpAay4gHQ+j0mtTIBvRg8Y86w6NOfzaflcHKGk54v2XQ==
cypress-cucumber-preprocessor@^1.12.0:
version "1.12.0"
resolved "https://registry.yarnpkg.com/cypress-cucumber-preprocessor/-/cypress-cucumber-preprocessor-1.12.0.tgz#092428ba267331e3d2cc6e1309c331d17632b8b1"
integrity sha512-uKrWbs51hGeHiLgcSZcjFvvVEW9UdStsLVpD1snuPuik9WE61kbZv7xumlPjRmkMF81zTUGnNLwZuAk3CV9dEw==
dependencies:
"@cypress/browserify-preprocessor" "^1.1.2"
chai "^4.1.2"
@ -1822,10 +1822,10 @@ cypress-cucumber-preprocessor@^1.11.2:
glob "^7.1.2"
through "^2.3.8"
cypress-file-upload@^3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-3.1.2.tgz#4a0024f99ca157565bf2b20c110e6e6874da28cb"
integrity sha512-gZE2G7ZTD2Y8APrcgs+ATRMKs/IgH2rafCmi+8o99q5sDoNRLR+XKxOcoyWLehj9raGnO98YDYO8DY7k1VMGBw==
cypress-file-upload@^3.1.4:
version "3.1.4"
resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-3.1.4.tgz#cc208cb937a3abb136b52309eaf4637d5676c5bd"
integrity sha512-4aZeJOYFhYiP+nk9Mo5YHWqComsT24J9OBQVJzvkEzw7g1v2ogGe7nLT/U7Fsm/Xjl1Tyxsc0xxECa254WfQqg==
cypress-plugin-retries@^1.2.2:
version "1.2.2"