diff --git a/web/app/components/comment/__verification/_active/comment__verification_active.scss b/web/app/components/comment/__verification/_active/comment__verification_active.scss new file mode 100644 index 00000000..e274b88a --- /dev/null +++ b/web/app/components/comment/__verification/_active/comment__verification_active.scss @@ -0,0 +1,3 @@ +.comment__verification_active { + background-image: url('comment__verification_active.svg'); +} diff --git a/web/app/components/comment/__verification/_active/comment__verification_active.svg b/web/app/components/comment/__verification/_active/comment__verification_active.svg new file mode 100644 index 00000000..117e912e --- /dev/null +++ b/web/app/components/comment/__verification/_active/comment__verification_active.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/app/components/comment/__verification/_clickable/comment__verification_clickable.scss b/web/app/components/comment/__verification/_clickable/comment__verification_clickable.scss new file mode 100644 index 00000000..c406abfc --- /dev/null +++ b/web/app/components/comment/__verification/_clickable/comment__verification_clickable.scss @@ -0,0 +1,3 @@ +.comment__verification_clickable { + cursor: pointer; +} diff --git a/web/app/components/comment/__verification/comment__verification.scss b/web/app/components/comment/__verification/comment__verification.scss new file mode 100644 index 00000000..79b65086 --- /dev/null +++ b/web/app/components/comment/__verification/comment__verification.scss @@ -0,0 +1,13 @@ +.comment__verification { + display: inline-block; + width: 12px; + height: 12px; + margin-left: 4px; + vertical-align: middle; + background: url('comment__verification.svg') center no-repeat; + background-size: cover; + + &:hover { + opacity: .75; + } +} diff --git a/web/app/components/comment/__verification/comment__verification.svg b/web/app/components/comment/__verification/comment__verification.svg new file mode 100644 index 00000000..aafbd798 --- /dev/null +++ b/web/app/components/comment/__verification/comment__verification.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx index 65f4a043..d36a2eab 100644 --- a/web/app/components/comment/comment.jsx +++ b/web/app/components/comment/comment.jsx @@ -15,6 +15,7 @@ export default class Comment extends Component { isReplying: false, isEditing: false, isUserIdVisible: false, + isUserVerified: false, editTimeLeft: null, }; @@ -33,6 +34,8 @@ export default class Comment extends Component { this.onReply = this.onReply.bind(this); this.onPinClick = this.onPinClick.bind(this); this.onUnpinClick = this.onUnpinClick.bind(this); + this.onVerifyClick = this.onVerifyClick.bind(this); + this.onUnverifyClick = this.onUnverifyClick.bind(this); this.onBlockClick = this.onBlockClick.bind(this); this.onUnblockClick = this.onUnblockClick.bind(this); this.onDeleteClick = this.onDeleteClick.bind(this); @@ -151,6 +154,30 @@ export default class Comment extends Component { } } + onVerifyClick() { + const { id, user: { id: userId } } = this.props.data; + + if (confirm('Do you want to verify this user?')) { + this.setState({ isUserVerified: true }); + + api.verify({ id: userId }).then(() => { + api.getComment({ id }).then(comment => store.replaceComment(comment)); + }); + } + } + + onUnverifyClick() { + const { id, user: { id: userId } } = this.props.data; + + if (confirm('Do you want to unverify this user?')) { + this.setState({ isUserVerified: false }); + + api.unverify({ id: userId }).then(() => { + api.getComment({ id }).then(comment => store.replaceComment(comment)); + }); + } + } + onBlockClick() { const { id, user: { id: userId } } = this.props.data; @@ -272,7 +299,20 @@ export default class Comment extends Component { } } - render(props, { guest, isUserIdVisible, userBlocked, pinned, score, scoreIncreased, scoreDecreased, deleted, isReplying, isEditing, editTimeLeft }) { + render(props, { + guest, + isUserIdVisible, + userBlocked, + pinned, + score, + scoreIncreased, + scoreDecreased, + deleted, + isReplying, + isEditing, + isUserVerified, + editTimeLeft, + }) { const { data, mods = {} } = props; const isAdmin = !guest && store.get('user').admin; const isGuest = guest || !Object.keys(store.get('user')).length; @@ -314,6 +354,7 @@ export default class Comment extends Component { ...data.user, picture: data.user.picture.indexOf(API_BASE) === 0 ? `${BASE_URL}${data.user.picture}` : data.user.picture, isDefaultPicture: !data.user.picture.length, + verified: data.user.verified || isUserVerified, }, }; @@ -364,6 +405,26 @@ export default class Comment extends Component { isUserIdVisible && ({o.user.id}) } + { + isAdmin && ( + + ) + } + + { + !isAdmin && !!o.user.verified && ( + + ) + } + {o.time} { diff --git a/web/app/components/comment/index.js b/web/app/components/comment/index.js index 96b755ae..c2b83915 100644 --- a/web/app/components/comment/index.js +++ b/web/app/components/comment/index.js @@ -28,6 +28,10 @@ require('./__time/comment__time.scss'); require('./__user-id/comment__user-id.scss'); require('./__username/comment__username.scss'); +require('./__verification/comment__verification.scss'); +require('./__verification/_active/comment__verification_active.scss'); +require('./__verification/_clickable/comment__verification_clickable.scss'); + require('./__vote/comment__vote.scss'); require('./__vote/_disabled/comment__vote_disabled.scss'); require('./__vote/_selected/comment__vote_selected.scss'); diff --git a/web/app/components/root/root.jsx b/web/app/components/root/root.jsx index 175b37ef..927bab70 100644 --- a/web/app/components/root/root.jsx +++ b/web/app/components/root/root.jsx @@ -1,3 +1,5 @@ +import 'mimic'; + import { h, Component } from 'preact'; import api from 'common/api';