mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-09-20 00:08:01 +00:00
1080 lines
36 KiB
Vue
1080 lines
36 KiB
Vue
<template>
|
|
<div class="group-settings-component">
|
|
<div v-if="!initalLoad">
|
|
<p class="text-center mt-5 pt-5 font-weight-bold">Loading...</p>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<div class="bg-white mb-3 border-bottom">
|
|
<div class="container">
|
|
<div class="col-12 group-settings-component-header">
|
|
<div>
|
|
<h1 class="font-weight-bold mb-4">Group Settings</h1>
|
|
<p class="text-muted mb-0">
|
|
<span v-once>
|
|
<i class="fas fa-globe mr-1"></i>
|
|
{{ group.membership == 'all' ? 'Public Group' : 'Private Group'}}
|
|
</span>
|
|
<span class="mx-2">
|
|
·
|
|
</span>
|
|
<span>{{ group.member_count == 1 ? group.member_count + ' Member' : group.member_count + ' Members' }}</span>
|
|
<span class="mx-2">
|
|
·
|
|
</span>
|
|
<span class="text-lighter">ID:{{ group.id }}</span>
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<a
|
|
v-if="isAdmin"
|
|
class="mr-2 btn btn-outline-secondary rounded-pill cta-btn font-weight-bold"
|
|
:href="group.url">
|
|
<i class="fas fa-chevron-left mr-1"></i> Back to Group
|
|
</a>
|
|
<button class="btn btn-primary font-weight-bold rounded-pill px-4" :disabled="savingChanges" @click="submit">
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<ul class="nav nav-tabs border-bottom-0 font-weight-bold small">
|
|
<li class="nav-item">
|
|
<a
|
|
:class="{ active: tab == 'home'}"
|
|
class="nav-link"
|
|
href="#"
|
|
@click.prevent="toggleTab('home')">
|
|
General
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
:class="{ active: tab == 'customize'}"
|
|
class="nav-link"
|
|
href="#"
|
|
@click.prevent="toggleTab('customize')">
|
|
Customize
|
|
</a>
|
|
</li>
|
|
<!-- <li class="nav-item">
|
|
<a
|
|
:class="{ active: tab == 'mod'}"
|
|
class="nav-link"
|
|
href="#"
|
|
@click.prevent="toggleTab('mod')">
|
|
Moderation
|
|
</a>
|
|
</li> -->
|
|
<li class="nav-item">
|
|
<a
|
|
:class="{ active: tab == 'blocked'}"
|
|
class="nav-link"
|
|
href="#"
|
|
@click.prevent="toggleTab('blocked')">
|
|
Domain/User Blocks
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a
|
|
:class="{ active: tab == 'interactions'}"
|
|
class="nav-link"
|
|
href="#"
|
|
@click.prevent="toggleTab('interactions')">
|
|
Interactions
|
|
</a>
|
|
</li>
|
|
<!-- <li class="nav-item">
|
|
<a class="nav-link" href="#">Interaction Log</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Blocked Instances & Users</a>
|
|
</li> -->
|
|
<li class="nav-item">
|
|
<a
|
|
:class="{ active: tab == 'limits'}"
|
|
class="nav-link"
|
|
href="#"
|
|
@click.prevent="toggleTab('limits')">
|
|
Limits
|
|
</a>
|
|
</li>
|
|
<!-- <li class="nav-item">
|
|
<a class="nav-link" href="#">Limits</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Roles</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Import & Export</a>
|
|
</li> -->
|
|
<li class="nav-item">
|
|
<a
|
|
:class="{ active: tab == 'advanced'}"
|
|
class="nav-link"
|
|
href="#"
|
|
@click.prevent="toggleTab('advanced')">
|
|
Advanced
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-xl pt-3">
|
|
|
|
<div v-if="tab == 'home'" class="row">
|
|
<div class="col-12 col-md-6 offset-md-3">
|
|
<div class="">
|
|
<div class="form-group">
|
|
<label class="font-weight-bold">Name</label>
|
|
<input class="form-control" :value="group.name" disabled>
|
|
<p class="form-text small text-muted">You cannot change a groups name at this time.</p>
|
|
</div>
|
|
<hr>
|
|
|
|
<div class="form-group">
|
|
<label class="font-weight-bold">Category</label>
|
|
<select class="custom-select" v-model="category">
|
|
<option value="" selected="" disabled="">Select a category</option>
|
|
<option v-for="c in categories" :value="c">{{ c }}</option>
|
|
</select>
|
|
<p class="form-text small text-muted">Choose the most relevant category to improve discovery and visibility</p>
|
|
</div>
|
|
<hr>
|
|
|
|
<div class="form-group">
|
|
<label class="font-weight-bold">Description</label>
|
|
<textarea class="form-control" rows="4" v-model="group.description" style="resize: none;">
|
|
</textarea>
|
|
<span class="form-text small text-muted font-weight-bold text-right">
|
|
{{group.description ? group.description.length : 0}}/500
|
|
</span>
|
|
<p class="form-text small text-muted">A plain text description of your group. Be as descriptive as possible to give potential members a better idea of what to expect.</p>
|
|
</div>
|
|
<!-- <hr>
|
|
<div class="form-group">
|
|
<label class="font-weight-bold">Avatar Photo</label>
|
|
<div v-if="group.metadata && group.metadata.hasOwnProperty('avatar')" class="d-flex justify-content-between align-items-center">
|
|
<img :src="group.metadata.avatar.url" width="100" height="100" class="rounded-circle border" style="object-fit: cover;">
|
|
<p class="mb-0 mt-2 text-lighter">
|
|
<a href="" class="text-muted font-weight-bold">
|
|
Preview
|
|
</a>
|
|
<span class="mx-1">·</span>
|
|
<a href="" class="text-muted font-weight-bold">
|
|
Update
|
|
</a>
|
|
<span class="mx-1">·</span>
|
|
<a href="" class="text-danger font-weight-bold">
|
|
Delete
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<div v-else>
|
|
<div class="custom-file">
|
|
<input type="file" class="custom-file-input" ref="avatarInput">
|
|
<label class="custom-file-label" for="avatarInput">Choose file</label>
|
|
</div>
|
|
<p class="form-text small text-muted">Must be jpeg or png format, up to 2MB</p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="form-group">
|
|
<label class="font-weight-bold">Header Photo</label>
|
|
|
|
<div v-if="group.metadata && group.metadata.hasOwnProperty('header')" class="d-flex justify-content-between align-items-center">
|
|
<img :src="group.metadata.header.url" width="200" height="100" class="rounded border" style="object-fit: cover;">
|
|
<p class="mb-0 mt-2 text-lighter">
|
|
<a href="" class="text-muted font-weight-bold">
|
|
Preview
|
|
</a>
|
|
<span class="mx-1">·</span>
|
|
<a href="" class="text-muted font-weight-bold">
|
|
Update
|
|
</a>
|
|
<span class="mx-1">·</span>
|
|
<a href="" class="text-danger font-weight-bold">
|
|
Delete
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<div v-else>
|
|
<div class="custom-file">
|
|
<input type="file" class="custom-file-input" ref="headerInput">
|
|
<label class="custom-file-label" for="headerInput">Choose file</label>
|
|
</div>
|
|
<p class="form-text small text-muted">Must be jpeg or png format, up to 10MB</p>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tab == 'customize'" class="row">
|
|
<div class="col-12 col-md-6 offset-md-3">
|
|
<div class="">
|
|
<div class="form-group">
|
|
<label class="font-weight-bold">Avatar Photo</label>
|
|
<div v-if="group.metadata && group.metadata.hasOwnProperty('avatar')" class="d-flex justify-content-between align-items-center">
|
|
<img :src="group.metadata.avatar.url" width="100" height="100" class="rounded-circle border" style="object-fit: cover;">
|
|
<p class="mb-0 mt-2 text-lighter">
|
|
<a href="" class="text-muted font-weight-bold">
|
|
Preview
|
|
</a>
|
|
<span class="mx-1">·</span>
|
|
<a href="" class="text-muted font-weight-bold">
|
|
Update
|
|
</a>
|
|
<span class="mx-1">·</span>
|
|
<a href="" class="text-danger font-weight-bold">
|
|
Delete
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<div v-else>
|
|
<div class="custom-file">
|
|
<input type="file" class="custom-file-input" ref="avatarInput">
|
|
<label class="custom-file-label" for="avatarInput">Choose file</label>
|
|
</div>
|
|
<p class="form-text small text-muted">Must be jpeg or png format, up to 2MB</p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="form-group">
|
|
<label class="font-weight-bold">Header Photo</label>
|
|
|
|
<div v-if="group.metadata && group.metadata.hasOwnProperty('header')" class="d-flex justify-content-between align-items-center">
|
|
<img :src="group.metadata.header.url" width="200" height="100" class="rounded border" style="object-fit: cover;">
|
|
<p class="mb-0 mt-2 text-lighter">
|
|
<a href="" class="text-muted font-weight-bold">
|
|
Preview
|
|
</a>
|
|
<span class="mx-1">·</span>
|
|
<a href="" class="text-muted font-weight-bold">
|
|
Update
|
|
</a>
|
|
<span class="mx-1">·</span>
|
|
<a href="" class="text-danger font-weight-bold">
|
|
Delete
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<div v-else>
|
|
<div class="custom-file">
|
|
<input type="file" class="custom-file-input" ref="headerInput">
|
|
<label class="custom-file-label" for="headerInput">Choose file</label>
|
|
</div>
|
|
<p class="form-text small text-muted">Must be jpeg or png format, up to 10MB</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tab == 'interactions'" class="row">
|
|
<div class="col-12 col-md-3">
|
|
<p class="lead">The <strong>Interaction Log</strong> displays all member activities relating to this group.</p>
|
|
<p class="lead">You may see logs from blocked, deleted and remote accounts.</p>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<div class="list-group">
|
|
<div v-for="(log, index) in interactionLog" class="list-group-item">
|
|
<div class="media align-items-center">
|
|
<img :src="log.profile.avatar" width="32" height="32" class="rounded-circle border mr-3" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
|
|
<div class="media-body">
|
|
<span class="font-weight-bold">{{log.profile.username}}</span>
|
|
|
|
<span v-if="log.type == 'group:comment:created'">
|
|
commented on a <a :href="sidToUrl(log.metadata.status_id)" class="font-weight-bold">post</a>
|
|
</span>
|
|
|
|
<span v-else-if="log.type == 'group:joined'">
|
|
joined the group
|
|
</span>
|
|
|
|
<span v-else-if="log.type == 'group:like'">
|
|
liked a <a :href="sidToUrl(log.metadata.status_id)" class="font-weight-bold">post</a>
|
|
</span>
|
|
|
|
<span v-else-if="log.type == 'group:settings:updated'">
|
|
updated the <a href="" class="font-weight-bold">group settings</a>
|
|
</span>
|
|
|
|
<span v-else-if="log.type == 'group:status:created'">
|
|
created a <a :href="sidToUrl(log.metadata.status_id)" class="font-weight-bold">post</a>
|
|
</span>
|
|
|
|
<span v-else-if="log.type == 'group:status:deleted'">
|
|
deleted a <a :href="sidToUrl(log.metadata.status_id)" class="font-weight-bold">post</a>
|
|
</span>
|
|
|
|
<span v-else-if="log.type == 'group:unlike'">
|
|
unliked a <a :href="sidToUrl(log.metadata.status_id)" class="font-weight-bold">post</a>
|
|
</span>
|
|
|
|
<span v-else-if="log.type == 'group:admin:block:instance'">
|
|
blocked <span class="font-weight-bold text-primary">{{ log.metadata.domain }}</span>
|
|
</span>
|
|
|
|
<span v-else-if="log.type == 'group:admin:block:user'">
|
|
blocked <a class="font-weight-bold text-primary" :href="'/' + log.metadata.username">{{ log.metadata.username }}</a>
|
|
</span>
|
|
|
|
<span v-else-if="log.type == 'group:report:create'">
|
|
created a <a :href="reportUrl(log.metadata.report_id)" class="font-weight-bold">report</a> about <a :href="'/' + log.metadata.username" class="font-weight-bold">{{ log.metadata.username}}</a>'s <a :href="log.metadata.url" class="font-weight-bold">post</a>
|
|
</span>
|
|
|
|
<span v-else-if="log.type == 'group:moderation:action'">
|
|
handled a <a :href="reportUrl(log.metadata.report_id)" class="font-weight-bold">mod report</a> regarding <a :href="log.metadata.status_url" class="font-weight-bold">this post</a>
|
|
</span>
|
|
|
|
<span v-else-if="log.type =='group:member-limits:updated'">
|
|
updated <a :href="memberInteractionUrl(log.metadata.profile_id)" class="font-weight-bold">interaction limits</a> for <a :href="'/' + log.metadata.username" class="font-weight-bold">{{ log.metadata.username }}</a>
|
|
</span>
|
|
|
|
<span v-else>{{log.type}}</span>
|
|
|
|
<div class="float-right text-muted small font-weight-bold">{{timeago(log.created_at)}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="interactionLogShowMore" class="list-group-item">
|
|
<button class="btn btn-light font-weight-bold btn-block" @click="loadMoreInteractions">Load more</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-3">
|
|
<p class="font-weight-bold small">SEARCH</p>
|
|
<div class="form-group">
|
|
<input class="form-control rounded-pill" placeholder="Search username, type or url"/>
|
|
</div>
|
|
<hr>
|
|
|
|
<p class="font-weight-bold small">ACTIVITIES</p>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" checked id="filter1">
|
|
<label class="form-check-label font-weight-bold" for="filter1">
|
|
Joined Group
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" checked id="filter1">
|
|
<label class="form-check-label font-weight-bold" for="filter1">
|
|
Left Group
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" checked id="filter1">
|
|
<label class="form-check-label font-weight-bold" for="filter1">
|
|
Posts
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" checked id="filter1">
|
|
<label class="form-check-label font-weight-bold" for="filter1">
|
|
Comments
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" checked id="filter1">
|
|
<label class="form-check-label font-weight-bold" for="filter1">
|
|
Likes
|
|
</label>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<p class="font-weight-bold small">FILTERS</p>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="filter1">
|
|
<label class="form-check-label font-weight-bold" for="filter1">
|
|
Local members only
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="filter1">
|
|
<label class="form-check-label font-weight-bold" for="filter1">
|
|
Remote members only
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" value="" id="filter1">
|
|
<label class="form-check-label font-weight-bold" for="filter1">
|
|
Blocked members only
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tab == 'blocked'" class="row">
|
|
<div class="col-12 col-md-3">
|
|
<p class="h5">Blocked Instances & Users</p>
|
|
<p>Fine-grained control over who can join and interact with your group</p>
|
|
<p>Blocking an instance will revoke membership from users on that instance and prevent other users on that instance from joining</p>
|
|
<p>Blocking a user will revoke membership and remove all interactions from that user</p>
|
|
<p>Moderating an instance will require all new membership requests from that instance to be approved by a group admin before the specific user can join</p>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<div class="card mb-3">
|
|
<div class="card-header text-muted font-weight-bold small">Blocked Instances</div>
|
|
<div class="list-group list-group-flush">
|
|
<div v-for="instance in blockedInstances" class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
{{instance}}
|
|
</div>
|
|
<button class="btn btn-light" @click.prevent="undoBlock('instance', instance)">
|
|
<i class="far fa-trash-alt text-lighter"></i>
|
|
</button>
|
|
</div>
|
|
<div v-if="blockedInstances.length == 3" class="list-group-item">
|
|
<p class="mb-0 small font-weight-bold text-lighter text-center">View All</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-3">
|
|
<div class="card-header text-muted font-weight-bold small">Blocked Users</div>
|
|
<div class="list-group list-group-flush">
|
|
<div v-for="instance in blockedUsers" class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<img src="/storage/avatars/default.jpg" width="32" height="32" class="rounded-circle border mr-3">{{instance}}
|
|
</div>
|
|
<button class="btn btn-light" @click.prevent="undoBlock('user', instance)">
|
|
<i class="far fa-trash-alt text-lighter"></i>
|
|
</button>
|
|
</div>
|
|
<div v-if="blockedUsers.length == 3" class="list-group-item">
|
|
<p class="mb-0 small font-weight-bold text-lighter text-center">View All</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-3">
|
|
<div class="card-header text-muted font-weight-bold small">Moderated Join Requests</div>
|
|
<div class="list-group list-group-flush">
|
|
<div v-for="instance in moderatedInstances" class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
{{instance}}
|
|
</div>
|
|
<button class="btn btn-light" @click.prevent="undoBlock('moderate', instance)">
|
|
<i class="far fa-trash-alt text-lighter"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-3">
|
|
<button class="btn btn-light border btn-block font-weight-bold" @click.prevent="blockAction('instance')">Block Instance</button>
|
|
<button class="btn btn-light border btn-block font-weight-bold" @click.prevent="blockAction('user')">Block User</button>
|
|
<button class="btn btn-light border btn-block font-weight-bold" @click.prevent="blockAction('moderate')">Moderate Join Requests</button>
|
|
<hr>
|
|
<button class="btn btn-light border btn-block font-weight-bold">Import</button>
|
|
<button class="btn btn-light border btn-block font-weight-bold" @click.prevent="exportBlocks()">Export</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tab == 'advanced'" class="row">
|
|
<div class="col-12 col-md-6 offset-md-3">
|
|
|
|
<div class="mt-3">
|
|
<div class="form-group">
|
|
<label class="font-weight-bold">Membership</label>
|
|
<select class="form-control rounded-pill" v-model="group.membership">
|
|
<option value="all">Public</option>
|
|
<option value="private">Private</option>
|
|
<option value="local">Local</option>
|
|
</select>
|
|
|
|
<p class="help-text mt-1">
|
|
{{ membershipDescription[group.membership] }}
|
|
</p>
|
|
</div>
|
|
<!-- <hr>
|
|
<div class="form-group">
|
|
<label class="font-weight-bold">Post Types</label>
|
|
<div class="custom-control custom-checkbox mb-2">
|
|
<input type="checkbox" class="custom-control-input" id="textType" checked disabled>
|
|
<label class="custom-control-label" for="textType">Text</label>
|
|
</div>
|
|
<div class="custom-control custom-checkbox mb-2">
|
|
<input type="checkbox" class="custom-control-input" id="photoType" checked>
|
|
<label class="custom-control-label" for="photoType">Photos</label>
|
|
</div>
|
|
<div class="custom-control custom-checkbox mb-2">
|
|
<input type="checkbox" class="custom-control-input" id="videoType" checked>
|
|
<label class="custom-control-label" for="videoType">Videos</label>
|
|
</div>
|
|
<div class="custom-control custom-checkbox mb-2">
|
|
<input type="checkbox" class="custom-control-input" id="pollType" checked>
|
|
<label class="custom-control-label" for="pollType">Polls</label>
|
|
</div>
|
|
<div class="custom-control custom-checkbox">
|
|
<input type="checkbox" class="custom-control-input" id="eventType" disabled>
|
|
<label class="custom-control-label" for="eventType">Events</label>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div v-if="group.membership !== 'local'" class="form-group row">
|
|
<div class="col-sm-12">
|
|
<div class="mb-1">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" v-model="advanced.activitypub">
|
|
<label class="form-check-label font-weight-bold text-dark text-capitalize ml-1">Enable ActivityPub</label>
|
|
</div>
|
|
</div>
|
|
|
|
<transition name="fade">
|
|
<div v-if="!advanced.activitypub" class="alert alert-info mt-2">
|
|
<div class="media align-items-center">
|
|
<i class="far fa-exclamation-circle fa-2x mr-3"></i>
|
|
<div class="media-body">
|
|
<p class="font-weight-bold mb-0">Federation Warning</p>
|
|
<p class="small mb-0" style="font-weight:600;">Groups that choose to disable federation later will lose remote content and members and cannot re-enable federation for 24 hours. You can change this later</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
|
|
<hr v-if="group.membership !== 'local'">
|
|
|
|
<div class="form-group row">
|
|
<div class="col-sm-12">
|
|
<div class="mb-1">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" v-model="advanced.is_nsfw">
|
|
<label class="form-check-label font-weight-bold text-dark text-capitalize ml-1">Allow adult content (18+)</label>
|
|
</div>
|
|
</div>
|
|
|
|
<transition name="fade">
|
|
<div v-if="!advanced.is_nsfw" class="alert alert-info mt-2">
|
|
<div class="media align-items-center">
|
|
<i class="far fa-exclamation-circle fa-2x mr-3"></i>
|
|
<div class="media-body">
|
|
<p class="font-weight-bold mb-0">Adult Content Warning</p>
|
|
<p class="small mb-0" style="font-weight:600;">Groups that allow adult content should enable this or risk suspension or deletion by instance admins. Illegal content is prohibited. You can change this later</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="form-group row">
|
|
<div class="col-sm-12">
|
|
<div class="mb-1">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" v-model="advanced.discoverable">
|
|
<label class="form-check-label font-weight-bold text-dark text-capitalize ml-1">Make group discoverable</label>
|
|
</div>
|
|
|
|
<p class="help-text small text-muted">
|
|
<span>
|
|
Being discoverable means that your group appears in search results, on the discover page and can be used in group recommendations
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
|
|
|
|
<div v-if="group.member_count >= 25" class="form-group row">
|
|
<div class="col-sm-12">
|
|
<div class="mb-1">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox">
|
|
<label class="form-check-label font-weight-bold text-dark text-capitalize ml-1">Enable spam detection</label>
|
|
</div>
|
|
|
|
<p class="help-text small text-muted">
|
|
<span>
|
|
Detect and temporarily remove content classified as spam from new members until it can be reviewed by a group admin. <strong>We do not recommend enabling this unless you have or expect periodic spam as it may produce false-positives and reduce member experience & retention.</strong>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
|
|
|
|
<div v-if="group.member_count >= 25" class="form-group row">
|
|
<div class="col-sm-12">
|
|
<div class="mb-1">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox">
|
|
<label class="form-check-label font-weight-bold text-dark text-capitalize ml-1">Enable admin direct messages</label>
|
|
</div>
|
|
|
|
<p class="help-text small text-muted">
|
|
<span>
|
|
Allow {{ group.membership == 'local' ? 'local users' : group.membership == 'private' ? 'members' : 'anyone'}} to <a href="#">direct message</a> group admins. The direct message inbox is separate from your own account.
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
</div>
|
|
|
|
|
|
<h4 class="font-weight-bold pt-3">Danger Zone</h4>
|
|
<div class="mb-4 border rounded border-danger">
|
|
<ul class="list-group mb-0 pb-0">
|
|
<li class="list-group-item border-left-0 border-right-0 py-3 d-flex justify-content-between disabled">
|
|
<div>
|
|
<p class="font-weight-bold mb-1">Temporarily Disable Group</p>
|
|
<p class="mb-0 small">Not available</p>
|
|
</div>
|
|
<div>
|
|
<a class="btn btn-outline-danger font-weight-bold py-1" href="#">Disable</a>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item border-left-0 border-right-0 py-3 d-flex justify-content-between">
|
|
<div>
|
|
<p class="font-weight-bold mb-1">Delete Group</p>
|
|
<p class="mb-0 small">Once you delete your group, there is no going back.</p>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-outline-danger font-weight-bold py-1" @click="deleteGroup">Delete Group</button>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tab == 'limits'" class="row">
|
|
<div class="col-12 col-md-6 offset-md-3">
|
|
<div class="mt-3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
export default {
|
|
props: {
|
|
groupId: {
|
|
type: String
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
initalLoad: false,
|
|
profile: undefined,
|
|
group: {},
|
|
isMember: false,
|
|
isAdmin: false,
|
|
changed: false,
|
|
savingChanges: false,
|
|
categories: [],
|
|
category: 'General',
|
|
tab: 'home',
|
|
tabs: [
|
|
'home',
|
|
'customize',
|
|
'interactions',
|
|
'blocked',
|
|
'advanced',
|
|
'limits',
|
|
'blocked:import'
|
|
],
|
|
interactionLog: [],
|
|
interactionLogPage: 1,
|
|
interactionLogInitialLoad: false,
|
|
interactionLogShowMore: true,
|
|
blockedInitialLoad: false,
|
|
blockedInstances: [
|
|
'facebook.com',
|
|
'instagram.com'
|
|
],
|
|
blockedUsers: [
|
|
'mark@facebook.com',
|
|
'user@example.org',
|
|
'troll'
|
|
],
|
|
moderatedInstances: [
|
|
'pawoo.net',
|
|
'pixelfed.com'
|
|
],
|
|
importBlocksData: {},
|
|
importBlocksUploaded: false,
|
|
membershipDescription: {
|
|
all: 'Anyone can join your group',
|
|
local: 'Only local users can join your group',
|
|
private: 'Only users you approve can join your group'
|
|
},
|
|
advanced: {}
|
|
};
|
|
},
|
|
|
|
beforeMount() {
|
|
axios.get('/api/v0/groups/categories/list')
|
|
.then(res => {
|
|
this.categories = res.data;
|
|
})
|
|
},
|
|
|
|
mounted() {
|
|
let u = new URLSearchParams(window.location.search);
|
|
|
|
if(u.has('tab') && this.tabs.includes(u.get('tab'))) {
|
|
this.tab = u.get('tab');
|
|
this.toggleTab(this.tab);
|
|
}
|
|
|
|
axios.get('/api/pixelfed/v1/accounts/verify_credentials')
|
|
.then(res => {
|
|
this.profile = res.data;
|
|
|
|
axios.get('/api/v0/groups/' + this.groupId)
|
|
.then(res => {
|
|
this.group = res.data;
|
|
this.initalLoad = true;
|
|
this.isMember = res.data.self.is_member;
|
|
this.isAdmin = ['founder', 'admin'].includes(res.data.self.role);
|
|
this.advanced = res.data.config;
|
|
this.category = res.data.category.name;
|
|
})
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
timestampFormat(date, showTime = false) {
|
|
let ts = new Date(date);
|
|
return showTime ? ts.toDateString() + ' · ' + ts.toLocaleTimeString() : ts.toDateString();
|
|
},
|
|
|
|
timeago(ts) {
|
|
return window.App.util.format.timeAgo(ts);
|
|
},
|
|
|
|
sidToUrl(sid) {
|
|
return `/groups/${this.groupId}/p/${sid}`;
|
|
},
|
|
|
|
submit() {
|
|
this.savingChanges = true;
|
|
|
|
let formData = new FormData();
|
|
formData.append('category', this.category);
|
|
formData.append('membership', this.group.membership);
|
|
formData.append('discoverable', this.advanced.discoverable);
|
|
formData.append('activitypub', this.advanced.activitypub);
|
|
formData.append('is_nsfw', this.advanced.is_nsfw);
|
|
|
|
if(this.group.description) {
|
|
formData.append('description', this.group.description);
|
|
}
|
|
|
|
if(this.$refs.avatarInput) {
|
|
formData.append('avatar', this.$refs.avatarInput.files[0]);
|
|
}
|
|
|
|
if(this.$refs.headerInput) {
|
|
formData.append('header', this.$refs.headerInput.files[0]);
|
|
}
|
|
|
|
axios.post('/api/v0/groups/' + this.group.id + '/settings', formData)
|
|
.then(res => {
|
|
this.savingChanges = false;
|
|
this.group = res.data;
|
|
swal('Updated!', 'Successfully updated group settings.', 'success');
|
|
}).catch(err => {
|
|
this.savingChanges = false;
|
|
console.log(err.response);
|
|
swal('Oops!', 'An error occured while attempting to save changes. Please try again later.', 'error');
|
|
});
|
|
},
|
|
|
|
toggleTab(tab) {
|
|
if(event) {
|
|
event.currentTarget.blur();
|
|
}
|
|
|
|
switch(tab) {
|
|
case 'home':
|
|
this.tab = 'home';
|
|
history.pushState(null, null, `/groups/${this.groupId}/settings`);
|
|
break;
|
|
|
|
case 'customize':
|
|
this.tab = 'customize';
|
|
history.pushState(null, null, `/groups/${this.groupId}/settings?tab=customize`);
|
|
break;
|
|
|
|
case 'limits':
|
|
this.tab = 'limits';
|
|
history.pushState(null, null, `/groups/${this.groupId}/settings?tab=limits`);
|
|
break;
|
|
|
|
case 'interactions':
|
|
if(!this.interactionLogInitialLoad) {
|
|
this.loadInteractions();
|
|
}
|
|
this.tab = 'interactions';
|
|
history.pushState(null, null, `/groups/${this.groupId}/settings?tab=interactions`);
|
|
break;
|
|
|
|
case 'blocked':
|
|
if(!this.blockedInitialLoad) {
|
|
this.loadBlocks();
|
|
}
|
|
this.tab = 'blocked';
|
|
history.pushState(null, null, `/groups/${this.groupId}/settings?tab=blocked`);
|
|
break;
|
|
|
|
case 'advanced':
|
|
this.tab = 'advanced';
|
|
history.pushState(null, null, `/groups/${this.groupId}/settings?tab=advanced`);
|
|
break;
|
|
|
|
default:
|
|
this.tab = 'home';
|
|
history.pushState(null, null, `/groups/${this.groupId}/settings`);
|
|
break;
|
|
}
|
|
},
|
|
|
|
loadInteractions() {
|
|
axios.get('/api/v0/groups/' + this.groupId + '/admin/interactions')
|
|
.then(res => {
|
|
this.interactionLog = res.data;
|
|
this.interactionLogPage++;
|
|
this.interactionLogInitialLoad = true;
|
|
});
|
|
},
|
|
|
|
loadMoreInteractions() {
|
|
axios.get('/api/v0/groups/' + this.groupId + '/admin/interactions', {
|
|
params: {
|
|
page: this.interactionLogPage
|
|
}
|
|
}).then(res => {
|
|
if(res.data.length == 0) {
|
|
this.interactionLogShowMore = false;
|
|
return;
|
|
}
|
|
this.interactionLog.push(...res.data);
|
|
this.interactionLogPage++;
|
|
})
|
|
},
|
|
|
|
loadBlocks() {
|
|
axios.get(`/api/v0/groups/${this.groupId}/admin/blocks`)
|
|
.then(res => {
|
|
this.blockedInstances = res.data.instances;
|
|
this.blockedUsers = res.data.users;
|
|
this.moderatedInstances = res.data.moderated;
|
|
this.blockedInitialLoad = true;
|
|
})
|
|
},
|
|
|
|
blockAction(action) {
|
|
let type = action == 'user' ? 'user' : 'instance domain';
|
|
|
|
swal({
|
|
text: `Which ${type}?`,
|
|
content: {
|
|
element: 'input',
|
|
attributes: {
|
|
placeholder: type == 'user' ? 'pixelfed' : 'pixelfed.org'
|
|
}
|
|
},
|
|
button: {
|
|
text: "Next",
|
|
closeModal: false,
|
|
},
|
|
})
|
|
.then(name => {
|
|
if (!name) throw null;
|
|
if(action !== 'user' && name.startsWith('http')) {
|
|
swal('Oops!', 'Please enter the instance domain (eg: pixelfed.social)', 'error');
|
|
return null;
|
|
}
|
|
return name;
|
|
}).then(name => {
|
|
return axios.post('/api/v0/groups/' + this.groupId + '/admin/mbs', {
|
|
type: action == 'user' ? 'user' : 'instance',
|
|
item: name
|
|
}).then(res => {
|
|
if(res.data) {
|
|
return name;
|
|
} else {
|
|
swal.stopLoading();
|
|
swal.close();
|
|
return null;
|
|
}
|
|
}).catch(err => {
|
|
swal.stopLoading();
|
|
swal.close();
|
|
return null;
|
|
});
|
|
}).then(name => {
|
|
if(!name) {
|
|
this.$bvToast.toast(`Invalid ${action}, please try again`, {
|
|
title: 'Error',
|
|
variant: 'danger',
|
|
autoHideDelay: 5000
|
|
});
|
|
return;
|
|
}
|
|
swal({
|
|
title: "Are you sure?",
|
|
text: action === 'moderate' ? `Manually approve all membership requests from ${name}` : `Limiting ${name} will purge and reject all interactions with this group`,
|
|
icon: "warning",
|
|
buttons: true,
|
|
dangerMode: true,
|
|
})
|
|
.then((confirm) => {
|
|
if (confirm) {
|
|
axios.post('/api/v0/groups/' + this.groupId + '/admin/blocks/add', {
|
|
item: name,
|
|
type: action
|
|
}).then(res => {
|
|
switch(action) {
|
|
case 'instance':
|
|
this.blockedInstances.push(name);
|
|
break;
|
|
|
|
case 'user':
|
|
this.blockedUsers.push(name);
|
|
break;
|
|
|
|
case 'moderate':
|
|
this.moderatedInstances.push(name);
|
|
break;
|
|
}
|
|
// swal("Poof! Your imaginary file has been deleted!", {
|
|
// icon: "success",
|
|
// });
|
|
})
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
reportUrl(report) {
|
|
return `/groups/${this.groupId}/moderation?tab=view&id=${report}`;
|
|
},
|
|
|
|
memberInteractionUrl(pid) {
|
|
return `/groups/${this.groupId}/members?a=il&pid=${pid}`;
|
|
},
|
|
|
|
undoBlock(type, val) {
|
|
let action = type == 'moderate' ? `unblock ${val}?` : `allow anyone to join without approval from ${val}?`;
|
|
swal({
|
|
'title': 'Confirm',
|
|
'text': `Are you sure you want to ${action}`,
|
|
'buttons': {
|
|
cancel: {
|
|
text: "Cancel",
|
|
value: null,
|
|
visible: true,
|
|
className: "",
|
|
closeModal: true,
|
|
},
|
|
confirm: {
|
|
text: "Proceed",
|
|
value: true,
|
|
visible: true,
|
|
className: "",
|
|
closeModal: true
|
|
}
|
|
}
|
|
}).then(res => {
|
|
if(res) {
|
|
axios.post(`/api/v0/groups/${this.groupId}/admin/blocks/undo`, {
|
|
item: val,
|
|
type: type
|
|
}).then(res => {
|
|
switch(type) {
|
|
case 'instance':
|
|
this.blockedInstances = this.blockedInstances.filter(i => {
|
|
return i != val;
|
|
})
|
|
break;
|
|
|
|
case 'user':
|
|
this.blockedUsers = this.blockedUsers.filter(i => {
|
|
return i != val;
|
|
})
|
|
break;
|
|
|
|
case 'moderate':
|
|
this.moderatedInstances = this.moderatedInstances.filter(i => {
|
|
return i != val;
|
|
})
|
|
break;
|
|
}
|
|
})
|
|
}
|
|
});
|
|
},
|
|
|
|
exportBlocks() {
|
|
event.currentTarget.blur();
|
|
axios({
|
|
url: '/api/v0/groups/'+this.groupId+'/admin/blocks/export',
|
|
method: 'POST',
|
|
responseType: 'blob',
|
|
}).then((response) => {
|
|
const url = window.URL.createObjectURL(new Blob([response.data]));
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.setAttribute('download', `pixelfed-group-blocks-${Date.now()}.json`);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
});
|
|
},
|
|
|
|
deleteGroup() {
|
|
axios.post('/api/v0/groups/delete', {
|
|
gid: this.groupId
|
|
})
|
|
.then(res => {
|
|
location.href = `/groups/${this.groupId}`;
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.group-settings-component {
|
|
&-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
padding: 2rem 1rem 1rem 1rem;
|
|
background-color: #fff;
|
|
|
|
.cta-btn {
|
|
min-width: 140px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|