aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/delete_button/delete_button.js6
-rw-r--r--src/components/dialog_modal/dialog_modal.js14
-rw-r--r--src/components/dialog_modal/dialog_modal.vue92
-rw-r--r--src/components/moderation_tools/moderation_tools.js106
-rw-r--r--src/components/moderation_tools/moderation_tools.vue158
-rw-r--r--src/components/notification/notification.js3
-rw-r--r--src/components/notification/notification.vue2
-rw-r--r--src/components/popper/popper.scss70
-rw-r--r--src/components/post_status_form/post_status_form.js3
-rw-r--r--src/components/post_status_form/post_status_form.vue7
-rw-r--r--src/components/user_card/user_card.js13
-rw-r--r--src/components/user_card/user_card.vue2
-rw-r--r--src/components/user_profile/user_profile.js4
13 files changed, 470 insertions, 10 deletions
diff --git a/src/components/delete_button/delete_button.js b/src/components/delete_button/delete_button.js
index f2920666..22f24625 100644
--- a/src/components/delete_button/delete_button.js
+++ b/src/components/delete_button/delete_button.js
@@ -10,7 +10,11 @@ const DeleteButton = {
},
computed: {
currentUser () { return this.$store.state.users.currentUser },
- canDelete () { return this.currentUser && this.currentUser.rights.delete_others_notice || this.status.user.id === this.currentUser.id }
+ canDelete () {
+ if (!this.currentUser) { return }
+ const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin
+ return superuser || this.status.user.id === this.currentUser.id
+ }
}
}
diff --git a/src/components/dialog_modal/dialog_modal.js b/src/components/dialog_modal/dialog_modal.js
new file mode 100644
index 00000000..f14e3fe9
--- /dev/null
+++ b/src/components/dialog_modal/dialog_modal.js
@@ -0,0 +1,14 @@
+const DialogModal = {
+ props: {
+ darkOverlay: {
+ default: true,
+ type: Boolean
+ },
+ onCancel: {
+ default: () => {},
+ type: Function
+ }
+ }
+}
+
+export default DialogModal
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
new file mode 100644
index 00000000..7621fb20
--- /dev/null
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -0,0 +1,92 @@
+<template>
+ <span v-bind:class="{ 'dark-overlay': darkOverlay }" @click.self.stop='onCancel()'>
+ <div class="dialog-modal panel panel-default" @click.stop=''>
+ <div class="panel-heading dialog-modal-heading">
+ <div class="title">
+ <slot name="header"></slot>
+ </div>
+ </div>
+ <div class="dialog-modal-content">
+ <slot name="default"></slot>
+ </div>
+ <div class="dialog-modal-footer user-interactions panel-footer">
+ <slot name="footer"></slot>
+ </div>
+ </div>
+ </span>
+</template>
+
+<script src="./dialog_modal.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+// TODO: unify with other modals.
+.dark-overlay {
+ &::before {
+ bottom: 0;
+ content: " ";
+ display: block;
+ cursor: default;
+ left: 0;
+ position: fixed;
+ right: 0;
+ top: 0;
+ background: rgba(27,31,35,.5);
+ z-index: 99;
+ }
+}
+
+.dialog-modal.panel {
+ top: 0;
+ left: 50%;
+ max-height: 80vh;
+ max-width: 90vw;
+ margin: 15vh auto;
+ position: fixed;
+ transform: translateX(-50%);
+ z-index: 999;
+ cursor: default;
+ display: block;
+ background-color: $fallback--bg;
+ background-color: var(--bg, $fallback--bg);
+
+ .dialog-modal-heading {
+ padding: .5em .5em;
+ margin-right: auto;
+ margin-bottom: 0;
+ white-space: nowrap;
+ color: var(--panelText);
+ background-color: $fallback--fg;
+ background-color: var(--panel, $fallback--fg);
+
+ .title {
+ margin-bottom: 0;
+ }
+ }
+
+ .dialog-modal-content {
+ margin: 0;
+ padding: 1rem 1rem;
+ background-color: $fallback--lightBg;
+ background-color: var(--lightBg, $fallback--lightBg);
+ white-space: normal;
+ }
+
+ .dialog-modal-footer {
+ margin: 0;
+ padding: .5em .5em;
+ background-color: $fallback--lightBg;
+ background-color: var(--lightBg, $fallback--lightBg);
+ border-top: 1px solid $fallback--bg;
+ border-top: 1px solid var(--bg, $fallback--bg);
+ justify-content: flex-end;
+
+ button {
+ width: auto;
+ margin-left: .5rem;
+ }
+ }
+}
+
+</style>
diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
new file mode 100644
index 00000000..3eedeaa1
--- /dev/null
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -0,0 +1,106 @@
+import DialogModal from '../dialog_modal/dialog_modal.vue'
+import Popper from 'vue-popperjs/src/component/popper.js.vue'
+
+const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
+const STRIP_MEDIA = 'mrf_tag:media-strip'
+const FORCE_UNLISTED = 'mrf_tag:force-unlisted'
+const DISABLE_REMOTE_SUBSCRIPTION = 'mrf_tag:disable-remote-subscription'
+const DISABLE_ANY_SUBSCRIPTION = 'mrf_tag:disable-any-subscription'
+const SANDBOX = 'mrf_tag:sandbox'
+const QUARANTINE = 'mrf_tag:quarantine'
+
+const ModerationTools = {
+ props: [
+ 'user'
+ ],
+ data () {
+ return {
+ showDropDown: false,
+ tags: {
+ FORCE_NSFW,
+ STRIP_MEDIA,
+ FORCE_UNLISTED,
+ DISABLE_REMOTE_SUBSCRIPTION,
+ DISABLE_ANY_SUBSCRIPTION,
+ SANDBOX,
+ QUARANTINE
+ },
+ showDeleteUserDialog: false
+ }
+ },
+ components: {
+ DialogModal,
+ Popper
+ },
+ computed: {
+ tagsSet () {
+ return new Set(this.user.tags)
+ },
+ hasTagPolicy () {
+ return this.$store.state.instance.tagPolicyAvailable
+ }
+ },
+ methods: {
+ toggleMenu () {
+ this.showDropDown = !this.showDropDown
+ },
+ hasTag (tagName) {
+ return this.tagsSet.has(tagName)
+ },
+ toggleTag (tag) {
+ const store = this.$store
+ if (this.tagsSet.has(tag)) {
+ store.state.api.backendInteractor.untagUser(this.user, tag).then(response => {
+ if (!response.ok) { return }
+ store.commit('untagUser', {user: this.user, tag})
+ })
+ } else {
+ store.state.api.backendInteractor.tagUser(this.user, tag).then(response => {
+ if (!response.ok) { return }
+ store.commit('tagUser', {user: this.user, tag})
+ })
+ }
+ },
+ toggleRight (right) {
+ const store = this.$store
+ if (this.user.rights[right]) {
+ store.state.api.backendInteractor.deleteRight(this.user, right).then(response => {
+ if (!response.ok) { return }
+ store.commit('updateRight', {user: this.user, right: right, value: false})
+ })
+ } else {
+ store.state.api.backendInteractor.addRight(this.user, right).then(response => {
+ if (!response.ok) { return }
+ store.commit('updateRight', {user: this.user, right: right, value: true})
+ })
+ }
+ },
+ toggleActivationStatus () {
+ const store = this.$store
+ const status = !!this.user.deactivated
+ store.state.api.backendInteractor.setActivationStatus(this.user, status).then(response => {
+ if (!response.ok) { return }
+ store.commit('updateActivationStatus', {user: this.user, status: status})
+ })
+ },
+ deleteUserDialog (show) {
+ this.showDeleteUserDialog = show
+ },
+ deleteUser () {
+ const store = this.$store
+ const user = this.user
+ const {id, name} = user
+ store.state.api.backendInteractor.deleteUser(user)
+ .then(e => {
+ this.$store.dispatch('markStatusesAsDeleted', status => user.id === status.user.id)
+ const isProfile = this.$route.name === 'external-user-profile' || this.$route.name === 'user-profile'
+ const isTargetUser = this.$route.params.name === name || this.$route.params.id === id
+ if (isProfile && isTargetUser) {
+ window.history.back()
+ }
+ })
+ }
+ }
+}
+
+export default ModerationTools
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
new file mode 100644
index 00000000..c24a2280
--- /dev/null
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -0,0 +1,158 @@
+<template>
+<div class='block' style='position: relative'>
+ <Popper
+ trigger="click"
+ @hide='showDropDown = false'
+ append-to-body
+ :options="{
+ placement: 'bottom-end',
+ modifiers: {
+ arrow: { enabled: true },
+ offset: { offset: '0, 5px' },
+ }
+ }">
+ <div class="popper-wrapper">
+ <div class="dropdown-menu">
+ <span v-if='user.is_local'>
+ <button class="dropdown-item" @click='toggleRight("admin")'>
+ {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
+ </button>
+ <button class="dropdown-item" @click='toggleRight("moderator")'>
+ {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
+ </button>
+ <div role="separator" class="dropdown-divider"></div>
+ </span>
+ <button class="dropdown-item" @click='toggleActivationStatus()'>
+ {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
+ </button>
+ <button class="dropdown-item" @click='deleteUserDialog(true)'>
+ {{ $t('user_card.admin_menu.delete_account') }}
+ </button>
+ <div role="separator" class="dropdown-divider" v-if='hasTagPolicy'></div>
+ <span v-if='hasTagPolicy'>
+ <button class="dropdown-item" @click='toggleTag(tags.FORCE_NSFW)'>
+ {{ $t('user_card.admin_menu.force_nsfw') }}
+ <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"></span>
+ </button>
+ <button class="dropdown-item" @click='toggleTag(tags.STRIP_MEDIA)'>
+ {{ $t('user_card.admin_menu.strip_media') }}
+ <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"></span>
+ </button>
+ <button class="dropdown-item" @click='toggleTag(tags.FORCE_UNLISTED)'>
+ {{ $t('user_card.admin_menu.force_unlisted') }}
+ <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"></span>
+ </button>
+ <button class="dropdown-item" @click='toggleTag(tags.SANDBOX)'>
+ {{ $t('user_card.admin_menu.sandbox') }}
+ <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"></span>
+ </button>
+ <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)'>
+ {{ $t('user_card.admin_menu.disable_remote_subscription') }}
+ <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"></span>
+ </button>
+ <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)'>
+ {{ $t('user_card.admin_menu.disable_any_subscription') }}
+ <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"></span>
+ </button>
+ <button class="dropdown-item" v-if='user.is_local' @click='toggleTag(tags.QUARANTINE)'>
+ {{ $t('user_card.admin_menu.quarantine') }}
+ <span class="menu-checkbox" v-bind:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"></span>
+ </button>
+ </span>
+ </div>
+ </div>
+ <button slot="reference" v-bind:class="{ pressed: showDropDown }" @click='toggleMenu'>
+ {{ $t('user_card.admin_menu.moderation') }}
+ </button>
+ </Popper>
+ <DialogModal v-if="showDeleteUserDialog" :onCancel='deleteUserDialog.bind(this, false)'>
+ <span slot="header">{{ $t('user_card.admin_menu.delete_user') }}</span>
+ <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
+ <span slot="footer">
+ <button @click='deleteUserDialog(false)'>
+ {{ $t('general.cancel') }}
+ </button>
+ <button class="danger" @click='deleteUser()'>
+ {{ $t('user_card.admin_menu.delete_user') }}
+ </button>
+ </span>
+ </DialogModal>
+</div>
+</template>
+
+<script src="./moderation_tools.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+@import '../popper/popper.scss';
+
+.dropdown-menu {
+ display: block;
+ padding: .5rem 0;
+ font-size: 1rem;
+ text-align: left;
+ list-style: none;
+ max-width: 100vw;
+ z-index: 10;
+ box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+ box-shadow: var(--panelShadow);
+ border: none;
+ border-radius: $fallback--btnRadius;
+ border-radius: var(--btnRadius, $fallback--btnRadius);
+ background-color: $fallback--bg;
+ background-color: var(--bg, $fallback--bg);
+
+ .dropdown-divider {
+ height: 0;
+ margin: .5rem 0;
+ overflow: hidden;
+ border-top: 1px solid $fallback--border;
+ border-top: 1px solid var(--border, $fallback--border);
+ }
+
+ .dropdown-item {
+ line-height: 21px;
+ margin-right: 5px;
+ overflow: auto;
+ display: block;
+ padding: .25rem 1.0rem .25rem 1.5rem;
+ clear: both;
+ font-weight: 400;
+ text-align: inherit;
+ white-space: normal;
+ border: none;
+ border-radius: 0px;
+ background-color: transparent;
+ box-shadow: none;
+ width: 100%;
+ height: 100%;
+
+ &:hover {
+ // TODO: improve the look on breeze themes
+ background-color: $fallback--fg;
+ background-color: var(--btn, $fallback--fg);
+ box-shadow: none;
+ }
+ }
+}
+
+.menu-checkbox {
+ float: right;
+ min-width: 22px;
+ max-width: 22px;
+ min-height: 22px;
+ max-height: 22px;
+ line-height: 22px;
+ text-align: center;
+ border-radius: 0px;
+ background-color: $fallback--fg;
+ background-color: var(--input, $fallback--fg);
+ box-shadow: 0px 0px 2px black inset;
+ box-shadow: var(--inputShadow);
+
+ &.menu-checkbox-checked::after {
+ content: '✔';
+ }
+}
+
+</style>
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 42a48f3f..6aa6101f 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -21,6 +21,9 @@ const Notification = {
},
userProfileLink (user) {
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+ },
+ getUser (notification) {
+ return this.$store.state.users.usersObject[notification.action.user.id]
}
},
computed: {
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 8f532747..cac335ce 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -5,7 +5,7 @@
<UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/>
</a>
<div class='notification-right'>
- <UserCard :user="user" :rounded="true" :bordered="true" v-if="userExpanded"/>
+ <UserCard :user="getUser(notification)" :rounded="true" :bordered="true" v-if="userExpanded"/>
<span class="notification-details">
<div class="name-and-action">
<span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
new file mode 100644
index 00000000..0c30d625
--- /dev/null
+++ b/src/components/popper/popper.scss
@@ -0,0 +1,70 @@
+@import '../../_variables.scss';
+
+.popper-wrapper {
+ z-index: 8;
+}
+
+.popper-wrapper .popper__arrow {
+ width: 0;
+ height: 0;
+ border-style: solid;
+ position: absolute;
+ margin: 5px;
+}
+
+.popper-wrapper[x-placement^="top"] {
+ margin-bottom: 5px;
+}
+
+.popper-wrapper[x-placement^="top"] .popper__arrow {
+ border-width: 5px 5px 0 5px;
+ border-color: $fallback--bg transparent transparent transparent;
+ border-color: var(--bg, $fallback--bg) transparent transparent transparent;
+ bottom: -5px;
+ left: calc(50% - 5px);
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.popper-wrapper[x-placement^="bottom"] {
+ margin-top: 5px;
+}
+
+.popper-wrapper[x-placement^="bottom"] .popper__arrow {
+ border-width: 0 5px 5px 5px;
+ border-color: transparent transparent $fallback--bg transparent;
+ border-color: transparent transparent var(--bg, $fallback--bg) transparent;
+ top: -5px;
+ left: calc(50% - 5px);
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.popper-wrapper[x-placement^="right"] {
+ margin-left: 5px;
+}
+
+.popper-wrapper[x-placement^="right"] .popper__arrow {
+ border-width: 5px 5px 5px 0;
+ border-color: transparent $fallback--bg transparent transparent;
+ border-color: transparent var(--bg, $fallback--bg) transparent transparent;
+ left: -5px;
+ top: calc(50% - 5px);
+ margin-left: 0;
+ margin-right: 0;
+}
+
+.popper-wrapper[x-placement^="left"] {
+ margin-right: 5px;
+}
+
+.popper-wrapper[x-placement^="left"] .popper__arrow {
+ border-width: 5px 0 5px 5px;
+ border-color: transparent transparent transparent $fallback--bg;
+ border-color: transparent transparent transparent var(--bg, $fallback--bg);
+ right: -5px;
+ top: calc(50% - 5px);
+ margin-left: 0;
+ margin-right: 0;
+}
+
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 40e2610e..c65c27e2 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -179,6 +179,9 @@ const PostStatusForm = {
},
postFormats () {
return this.$store.state.instance.postFormats || []
+ },
+ safeDMEnabled () {
+ return this.$store.state.instance.safeDM
}
},
methods: {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 3d3a1082..1ce2b647 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -3,13 +3,16 @@
<form @submit.prevent="postStatus(newStatus)">
<div class="form-group" >
<i18n
- v-if="!this.$store.state.users.currentUser.locked && this.newStatus.visibility == 'private'"
+ v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
path="post_status.account_not_locked_warning"
tag="p"
class="visibility-notice">
<router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
</i18n>
- <p v-if="this.newStatus.visibility == 'direct'" class="visibility-notice">{{ $t('post_status.direct_warning') }}</p>
+ <p v-if="newStatus.visibility === 'direct'" class="visibility-notice">
+ <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
+ <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
+ </p>
<EmojiInput
v-if="newStatus.spoilerText || alwaysShowSubject"
type="text"
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 197c61d5..1a100de3 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -1,5 +1,6 @@
import UserAvatar from '../user_avatar/user_avatar.vue'
import RemoteFollow from '../remote_follow/remote_follow.vue'
+import ModerationTools from '../moderation_tools/moderation_tools.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@@ -93,15 +94,17 @@ export default {
}
},
visibleRole () {
- const validRole = (this.user.role === 'admin' || this.user.role === 'moderator')
- const showRole = this.isOtherUser || this.user.show_role
-
- return validRole && showRole && this.user.role
+ const rights = this.user.rights
+ if (!rights) { return }
+ const validRole = rights.admin || rights.moderator
+ const roleTitle = rights.admin ? 'admin' : 'moderator'
+ return validRole && roleTitle
}
},
components: {
UserAvatar,
- RemoteFollow
+ RemoteFollow,
+ ModerationTools
},
methods: {
followUser () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 3259d1c5..b5c7fa24 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -99,6 +99,8 @@
</button>
</span>
</div>
+ <ModerationTools :user='user' v-if='loggedIn.role === "admin"'>
+ </ModerationTools>
</div>
</div>
</div>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index bac729c0..d55d1517 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -3,6 +3,7 @@ import get from 'lodash/get'
import UserCard from '../user_card/user_card.vue'
import FollowCard from '../follow_card/follow_card.vue'
import Timeline from '../timeline/timeline.vue'
+import ModerationTools from '../moderation_tools/moderation_tools.vue'
import withLoadMore from '../../hocs/with_load_more/with_load_more'
import withList from '../../hocs/with_list/with_list'
@@ -155,7 +156,8 @@ const UserProfile = {
UserCard,
Timeline,
FollowerList,
- FriendList
+ FriendList,
+ ModerationTools
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 14:11:04 +0000