Skip to content
Snippets Groups Projects
Commit 38e047e4 authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Merge branch 'domain-actor-block' into 'develop' 

Domains/actor blocking and instance-level moderation tools

See merge request funkwhale/funkwhale!521
parents b69d9f22 4811f35e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 437 additions and 36 deletions
front/src/components/manage/moderation/InstancePolicyForm.vue 0 → 100644
+ 214
− 0
View file @ 38e047e4
<template>
<form class="ui form" @submit.prevent="createOrUpdate">
<h3 class="ui header">
<translate v-if="object" key="1">Update moderation rule</translate>
<translate v-else key="2">Add a new moderation rule</translate>
</h3>
<div v-if="errors && errors.length > 0" class="ui negative message">
<div class="header"><translate>Error while creating rule</translate></div>
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
<div class="field" v-if="object">
<div class="ui toggle checkbox">
<input id="policy-is-active" v-model="current.isActive" type="checkbox">
<label for="policy-is-active">
<translate v-if="current.isActive" key="1">Enabled</translate>
<translate v-else key="2">Disabled</translate>
<tooltip :content="labels.isActiveHelp" />
</label>
</div>
</div>
<div class="field">
<label for="policy-summary">
<translate>Reason</translate>
<tooltip :content="labels.summaryHelp" />
</label>
<textarea name="policy-summary" id="policy-summary" rows="5" v-model="current.summary"></textarea>
</div>
<div class="field">
<div class="ui toggle checkbox">
<input id="policy-is-active" v-model="current.blockAll" type="checkbox">
<label for="policy-is-active">
<translate>Block everything</translate>
<tooltip :content="labels.blockAllHelp" />
</label>
</div>
</div>
<div class="ui horizontal divider">
<translate>Or customize your rule</translate>
</div>
<div v-for="config in fieldConfig" :class="['field']">
<div class="ui toggle checkbox">
<input :id="'policy-' + config.id" v-model="current[config.id]" type="checkbox">
<label :for="'policy-' + config.id">
<i :class="[config.icon, 'icon']"></i>
{{ labels[config.id].label }}
<tooltip :content="labels[config.id].help" />
</label>
</div>
</div>
<div class="ui hidden divider"></div>
<button @click="$emit('cancel')" class="ui basic left floated button">
<translate>Cancel</translate>
</button>
<button :class="['ui', 'right', 'floated', 'green', {'disabled loading': isLoading}, 'button']" :disabled="isLoading">
<translate v-if="object" key="1">Update</translate>
<translate v-else key="2">Create</translate>
</button>
<dangerous-button v-if="object" class="right floated basic button" color='red' @confirm="remove">
<translate>Delete</translate>
<p slot="modal-header">
<translate>Delete this moderation rule?</translate>
</p>
<p slot="modal-content">
<translate>This action is irreversible.</translate>
</p>
<p slot="modal-confirm">
<translate>Delete moderation rule</translate>
</p>
</dangerous-button>
</form>
</template>
<script>
import axios from 'axios'
import _ from 'lodash'
export default {
props: {
type: {type: String, required: true},
object: {type: Object, default: null},
target: {type: String, required: true},
},
data () {
let current = this.object || {}
return {
isLoading: false,
errors: [],
current: {
summary: _.get(current, 'summary', ''),
isActive: _.get(current, 'is_active', true),
blockAll: _.get(current, 'block_all', true),
silenceActivity: _.get(current, 'silence_activity', false),
silenceNotifications: _.get(current, 'silence_notifications', false),
rejectMedia: _.get(current, 'reject_media', false),
},
fieldConfig: [
// we hide those until we actually have the related features implemented :)
// {id: "silenceActivity", icon: "feed"},
// {id: "silenceNotifications", icon: "bell"},
{id: "rejectMedia", icon: "file"},
]
}
},
computed: {
labels () {
return {
summaryHelp: this.$gettext("Explain why you're applying this policy. Depending on your instance configuration, this will help you remember why you acted on this account or domain, and may be displayed publicly to help users understand what moderation rules are in place."),
isActiveHelp: this.$gettext("Use this setting to temporarily enable/disable the policy without completely removing it."),
blockAllHelp: this.$gettext("Block everything from this account or domain. This will prevent any interaction with the entity, and purge related content (uploads, libraries, follows, etc.)"),
silenceActivity: {
help: this.$gettext("Hide account or domain content, except from followers."),
label: this.$gettext("Silence activity"),
},
silenceNotifications: {
help: this.$gettext("Prevent account or domain from triggering notifications, except from followers."),
label: this.$gettext("Silence notifications"),
},
rejectMedia: {
help: this.$gettext("Do not download any media file (audio, album cover, account avatar…) from this account or domain. This will purge existing content as well."),
label: this.$gettext("Reject media"),
}
}
}
},
methods: {
createOrUpdate () {
let self = this
this.isLoading = true
this.errors = []
let url, method
let data = {
summary: this.current.summary,
is_active: this.current.isActive,
block_all: this.current.blockAll,
silence_activity: this.current.silenceActivity,
silence_notifications: this.current.silenceNotifications,
reject_media: this.current.rejectMedia,
target: {
type: this.type,
id: this.target,
}
}
if (this.object) {
url = `manage/moderation/instance-policies/${this.object.id}/`
method = 'patch'
} else {
url = `manage/moderation/instance-policies/`
method = 'post'
}
axios[method](url, data).then((response) => {
this.isLoading = false
self.$emit('save', response.data)
}, (error) => {
self.isLoading = false
self.errors = error.backendErrors
})
},
remove () {
let self = this
this.isLoading = true
this.errors = []
let url = `manage/moderation/instance-policies/${this.object.id}/`
axios.delete(url).then((response) => {
this.isLoading = false
self.$emit('delete')
}, (error) => {
self.isLoading = false
self.errors = error.backendErrors
})
}
},
watch: {
'current.silenceActivity': function (v) {
if (v) {
this.current.blockAll = false
}
},
'current.silenceNotifications': function (v) {
if (v) {
this.current.blockAll = false
}
},
'current.rejectMedia': function (v) {
if (v) {
this.current.blockAll = false
}
},
'current.blockAll': function (v) {
if (v) {
let self = this
this.fieldConfig.forEach((f) => {
self.current[f.id] = false
})
}
}
}
}
</script>
<style scoped>
.ui.placeholder.segment .field,
.ui.placeholder.segment textarea,
.ui.placeholder.segment > .ui.input,
.ui.placeholder.segment .button {
max-width: 100%;
}
.segment .right.floated.button {
margin-left: 1em;
}
</style>
front/src/style/_main.scss
+ 6
− 2
View file @ 38e047e4
......@@ -255,7 +255,11 @@ button.reset {
[data-tooltip]::after {
white-space: normal;
width: 300px;
max-width: 300px;
width: 500px;
max-width: 500px;
z-index: 999;
}
label .tooltip {
margin-left: 1em;
}
front/src/views/admin/moderation/AccountsDetail.vue
+ 85
− 19
View file @ 38e047e4
......@@ -5,26 +5,68 @@
</div>
<template v-if="object">
<section :class="['ui', 'head', 'vertical', 'stripe', 'segment']" v-title="object.full_username">
<div class="segment-content">
<h2 class="ui header">
<i class="circular inverted user icon"></i>
<div class="content">
{{ object.full_username }}
<div class="sub header">
<template v-if="object.user">
<span class="ui tiny teal icon label">
<i class="home icon"></i>
<translate>Local account</translate>
</span>
&nbsp;
</template>
<a :href="object.url || object.fid" target="_blank" rel="noopener noreferrer">
<translate>Open profile</translate>&nbsp;
<i class="external icon"></i>
</a>
</div>
<div class="ui stackable two column grid">
<div class="ui column">
<div class="segment-content">
<h2 class="ui header">
<i class="circular inverted user icon"></i>
<div class="content">
{{ object.full_username }}
<div class="sub header">
<template v-if="object.user">
<span class="ui tiny teal icon label">
<i class="home icon"></i>
<translate>Local account</translate>
</span>
&nbsp;
</template>
<a :href="object.url || object.fid" target="_blank" rel="noopener noreferrer">
<translate>Open profile</translate>&nbsp;
<i class="external icon"></i>
</a>
</div>
</div>
</h2>
</div>
</div>
<div class="ui column">
<div v-if="!object.user" class="ui compact clearing placeholder segment">
<template v-if="isLoadingPolicy">
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</template>
<template v-else-if="!policy && !showPolicyForm">
<header class="ui header">
<h3>
<i class="shield icon"></i>
<translate>You don't have any rule in place for this account.</translate>
</h3>
</header>
<p><translate>Moderation policies help you control how your instance interact with a given domain or account.</translate></p>
<button @click="showPolicyForm = true" class="ui primary button">Add a moderation policy</button>
</template>
<instance-policy-card v-else-if="policy && !showPolicyForm" :object="policy" @update="showPolicyForm = true">
<header class="ui header">
<h3>
<translate>This domain is subject to specific moderation rules</translate>
</h3>
</header>
</instance-policy-card>
<instance-policy-form
v-else-if="showPolicyForm"
@cancel="showPolicyForm = false"
@save="updatePolicy"
@delete="policy = null; showPolicyForm = false"
:object="policy"
type="actor"
:target="object.full_username" />
</div>
</h2>
</div>
</div>
</section>
<div class="ui vertical stripe segment">
......@@ -309,15 +351,24 @@ import logger from "@/logging"
import lodash from '@/lodash'
import $ from "jquery"
import InstancePolicyForm from "@/components/manage/moderation/InstancePolicyForm"
import InstancePolicyCard from "@/components/manage/moderation/InstancePolicyCard"
export default {
props: ["id"],
components: {
InstancePolicyForm,
InstancePolicyCard,
},
data() {
return {
lodash,
isLoading: true,
isLoadingStats: false,
isLoadingPolicy: false,
object: null,
stats: null,
showPolicyForm: false,
permissions: [],
}
},
......@@ -333,6 +384,9 @@ export default {
axios.get(url).then(response => {
self.object = response.data
self.isLoading = false
if (self.object.instance_policy) {
self.fetchPolicy(self.object.instance_policy)
}
if (response.data.user) {
self.allPermissions.forEach(p => {
if (self.object.user.permissions[p.code]) {
......@@ -342,6 +396,15 @@ export default {
}
})
},
fetchPolicy(id) {
var self = this
this.isLoadingPolicy = true
let url = `manage/moderation/instance-policies/${id}/`
axios.get(url).then(response => {
self.policy = response.data
self.isLoadingPolicy = false
})
},
fetchStats() {
var self = this
this.isLoadingStats = true
......@@ -423,4 +486,7 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.placeholder.segment {
width: 100%;
}
</style>
front/src/views/admin/moderation/DomainsDetail.vue
+ 83
− 12
View file @ 38e047e4
......@@ -5,19 +5,61 @@
</div>
<template v-if="object">
<section :class="['ui', 'head', 'vertical', 'stripe', 'segment']" v-title="object.name">
<div class="segment-content">
<h2 class="ui header">
<i class="circular inverted cloud icon"></i>
<div class="content">
{{ object.name }}
<div class="sub header">
<a :href="externalUrl" target="_blank" rel="noopener noreferrer" class="logo-wrapper">
<translate>Open website</translate>&nbsp;
<i class="external icon"></i>
</a>
</div>
<div class="ui stackable two column grid">
<div class="ui column">
<div class="segment-content">
<h2 class="ui header">
<i class="circular inverted cloud icon"></i>
<div class="content">
{{ object.name }}
<div class="sub header">
<a :href="externalUrl" target="_blank" rel="noopener noreferrer" class="logo-wrapper">
<translate>Open website</translate>&nbsp;
<i class="external icon"></i>
</a>
</div>
</div>
</h2>
</div>
</div>
<div class="ui column">
<div class="ui compact clearing placeholder segment">
<template v-if="isLoadingPolicy">
<div class="paragraph">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</template>
<template v-else-if="!policy && !showPolicyForm">
<header class="ui header">
<h3>
<i class="shield icon"></i>
<translate>You don't have any rule in place for this domain.</translate>
</h3>
</header>
<p><translate>Moderation policies help you control how your instance interact with a given domain or account.</translate></p>
<button @click="showPolicyForm = true" class="ui primary button">Add a moderation policy</button>
</template>
<instance-policy-card v-else-if="policy && !showPolicyForm" :object="policy" @update="showPolicyForm = true">
<header class="ui header">
<h3>
<translate>This domain is subject to specific moderation rules</translate>
</h3>
</header>
</instance-policy-card>
<instance-policy-form
v-else-if="showPolicyForm"
@cancel="showPolicyForm = false"
@save="updatePolicy"
@delete="policy = null; showPolicyForm = false"
:object="policy"
type="domain"
:target="object.name" />
</div>
</h2>
</div>
</div>
</section>
<div class="ui vertical stripe segment">
......@@ -244,15 +286,25 @@ import axios from "axios"
import logger from "@/logging"
import lodash from '@/lodash'
import InstancePolicyForm from "@/components/manage/moderation/InstancePolicyForm"
import InstancePolicyCard from "@/components/manage/moderation/InstancePolicyCard"
export default {
props: ["id"],
components: {
InstancePolicyForm,
InstancePolicyCard,
},
data() {
return {
lodash,
isLoading: true,
isLoadingStats: false,
isLoadingPolicy: false,
policy: null,
object: null,
stats: null,
showPolicyForm: false,
permissions: [],
}
},
......@@ -268,6 +320,9 @@ export default {
axios.get(url).then(response => {
self.object = response.data
self.isLoading = false
if (self.object.instance_policy) {
self.fetchPolicy(self.object.instance_policy)
}
})
},
fetchStats() {
......@@ -279,10 +334,23 @@ export default {
self.isLoadingStats = false
})
},
fetchPolicy(id) {
var self = this
this.isLoadingPolicy = true
let url = `manage/moderation/instance-policies/${id}/`
axios.get(url).then(response => {
self.policy = response.data
self.isLoadingPolicy = false
})
},
refreshNodeInfo (data) {
this.object.nodeinfo = data
this.object.nodeinfo_fetch_date = new Date()
},
updatePolicy (policy) {
this.policy = policy
this.showPolicyForm = false
}
},
computed: {
labels() {
......@@ -299,4 +367,7 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.placeholder.segment {
width: 100%;
}
</style>
front/src/views/admin/moderation/DomainsList.vue
+ 47
− 3
View file @ 38e047e4
<template>
<main v-title="labels.domains">
<section class="ui vertical stripe segment">
<h2 class="ui header"><translate>Domains</translate></h2>
<div class="ui hidden divider"></div>
<h2 class="ui left floated header"><translate>Domains</translate></h2>
<form class="ui right floated form" @submit.prevent="createDomain">
<div v-if="errors && errors.length > 0" class="ui negative message">
<div class="header"><translate>Error while creating domain</translate></div>
<ul class="list">
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
<div class="inline fields">
<div class="field">
<label for="domain"><translate>Add a domain</translate></label>
<input type="text" id="domain" v-model="domainName">
</div>
<div class="field">
<button :class="['ui', {'loading': isCreating}, 'green', 'button']" type="submit" :disabled="isCreating">
<label for="domain"><translate>Add</translate></label>
</button>
</div>
</div>
</form>
<div class="ui clearing hidden divider"></div>
<domains-table></domains-table>
</section>
</main>
</template>
<script>
import DomainsTable from "@/components/manage/moderation/DomainsTable"
import axios from 'axios'
import DomainsTable from "@/components/manage/moderation/DomainsTable"
export default {
components: {
DomainsTable
},
data () {
return {
domainName: '',
isCreating: false,
errors: []
}
},
computed: {
labels() {
return {
domains: this.$gettext("Domains")
}
}
},
methods: {
createDomain () {
let self = this
this.isCreating = true
this.errors = []
axios.post('manage/federation/domains/', {name: this.domainName}).then((response) => {
this.isCreating = false
this.$router.push({
name: "manage.moderation.domains.detail",
params: {'id': response.data.name}
})
}, (error) => {
self.isCreating = false
self.errors = error.backendErrors
})
}
}
}
</script>
......
front/src/views/content/remote/ScanForm.vue
+ 2
− 0
View file @ 38e047e4
......@@ -34,6 +34,8 @@ export default {
return
}
let self = this
self.errors = []
self.isLoading = true
axios.post('federation/libraries/fetch/', {fid: this.query}).then((response) => {
self.$emit('scanned', response.data)
self.isLoading = false
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment