mirror of https://github.com/pixelfed/pixelfed.git
188 lines
6.5 KiB
Vue
188 lines
6.5 KiB
Vue
|
<template>
|
||
|
|
<b-modal
|
||
|
|
ref="modal"
|
||
|
|
centered
|
||
|
|
hide-header
|
||
|
|
hide-footer
|
||
|
|
scrollable
|
||
|
|
body-class="p-md-5 user-select-none"
|
||
|
|
>
|
||
|
|
<div v-if="tabIndex === 0">
|
||
|
|
<h2 class="text-center font-weight-bold">{{ $t('report.report') }}</h2>
|
||
|
|
|
||
|
|
<p class="text-center">{{ $t('menu.confirmReportText') }}</p>
|
||
|
|
|
||
|
|
<div v-if="status && status.hasOwnProperty('account')" class="card shadow-none rounded-lg border my-4">
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="media">
|
||
|
|
<img
|
||
|
|
:src="status.account.avatar"
|
||
|
|
class="mr-3 rounded"
|
||
|
|
width="40"
|
||
|
|
height="40"
|
||
|
|
style="border-radius: 8px;"
|
||
|
|
onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
|
||
|
|
|
||
|
|
<div class="media-body">
|
||
|
|
<p class="h5 primary font-weight-bold mb-1">
|
||
|
|
@{{ status.account.acct }}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div v-if="status.hasOwnProperty('pf_type') && status.pf_type == 'text'">
|
||
|
|
<p v-if="status.content_text.length <= 140" class="mb-0">
|
||
|
|
{{ status.content_text}}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p v-else class="mb-0">
|
||
|
|
<span v-if="showFull">
|
||
|
|
{{ status.content_text}}
|
||
|
|
<a class="font-weight-bold primary ml-1" href="#" @click.prevent="showFull = false">Show less</a>
|
||
|
|
</span>
|
||
|
|
<span v-else>
|
||
|
|
{{ status.content_text.substr(0, 140) + ' ...' }}
|
||
|
|
<a class="font-weight-bold primary ml-1" href="#" @click.prevent="showFull = true">Show full post</a>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="status.hasOwnProperty('pf_type') && status.pf_type == 'photo'">
|
||
|
|
<div class="w-100 rounded-lg d-flex justify-content-center mt-3" style="background: #000;max-height: 150px">
|
||
|
|
<img :src="status.media_attachments[0].url" class="rounded-lg shadow" style="width: 100%;max-height: 150px;object-fit:contain;">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p v-if="status.content_text" class="mt-3 mb-0">
|
||
|
|
<span v-if="showFull">
|
||
|
|
{{ status.content_text}}
|
||
|
|
<a class="font-weight-bold primary ml-1" href="#" @click.prevent="showFull = false">Show less</a>
|
||
|
|
</span>
|
||
|
|
<span v-else>
|
||
|
|
{{ status.content_text.substr(0, 80) + ' ...' }}
|
||
|
|
<a class="font-weight-bold primary ml-1" href="#" @click.prevent="showFull = true">Show full post</a>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-right mb-0 mb-md-n3">
|
||
|
|
<button class="btn btn-light px-3 py-2 mr-3 font-weight-bold" @click="close">{{ $t('common.cancel')}}</button>
|
||
|
|
<button class="btn btn-primary px-3 py-2 font-weight-bold" style="background-color: #3B82F6;" @click="tabIndex = 1">{{ $t('common.proceed') }}</button>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="tabIndex === 1">
|
||
|
|
<h2 class="text-center font-weight-bold">{{ $t('report.report') }}</h2>
|
||
|
|
|
||
|
|
<p class="text-center">
|
||
|
|
{{ $t('report.selectReason') }}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="mt-4">
|
||
|
|
<!-- <button class="btn btn-light btn-block rounded-pill font-weight-bold" @click="handleReason('notinterested')">I'm not interested in it</button> -->
|
||
|
|
<button class="btn btn-light btn-block rounded-pill font-weight-bold text-danger" @click="handleReason('spam')">{{ $t('menu.spam')}}</button>
|
||
|
|
<button v-if="status.sensitive == false" class="btn btn-light btn-block rounded-pill font-weight-bold text-danger" @click="handleReason('sensitive')">Adult or {{ $t('menu.sensitive')}}</button>
|
||
|
|
<button class="btn btn-light btn-block rounded-pill font-weight-bold text-danger" @click="handleReason('abusive')">{{ $t('menu.abusive')}}</button>
|
||
|
|
<button class="btn btn-light btn-block rounded-pill font-weight-bold" @click="handleReason('underage')">{{ $t('menu.underageAccount')}}</button>
|
||
|
|
<button class="btn btn-light btn-block rounded-pill font-weight-bold" @click="handleReason('copyright')">{{ $t('menu.copyrightInfringement')}}</button>
|
||
|
|
<button class="btn btn-light btn-block rounded-pill font-weight-bold" @click="handleReason('impersonation')">{{ $t('menu.impersonation')}}</button>
|
||
|
|
<!-- <button class="btn btn-light btn-block rounded-pill font-weight-bold" @click="handleReason('scam')">{{ $t('menu.scamOrFraud')}}</button> -->
|
||
|
|
<button class="btn btn-light btn-block rounded-pill mt-md-5" @click="tabIndex = 0">Go back</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="tabIndex === 2">
|
||
|
|
<div class="my-4 text-center">
|
||
|
|
<b-spinner />
|
||
|
|
|
||
|
|
<p class="small mb-0">{{ $t('report.sendingReport') }} ...</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="tabIndex === 3">
|
||
|
|
<div class="my-4">
|
||
|
|
<h2 class="text-center font-weight-bold mb-3">{{ $t('report.reported') }}</h2>
|
||
|
|
<p class="text-center py-2">
|
||
|
|
<span class="fa-stack fa-4x text-success">
|
||
|
|
<i class="far fa-check fa-stack-1x"></i>
|
||
|
|
<i class="fal fa-circle fa-stack-2x"></i>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
<p class="lead text-center">{{ $t('report.thanksMsg') }}</p>
|
||
|
|
<hr>
|
||
|
|
<p class="text-center">{{ $t('report.contactAdminMsg') }}, <a href="/site/contact" class="font-weight-bold primary">{{ $t('common.clickHere') }}</a>.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-center mb-0 mb-md-n3">
|
||
|
|
<button class="btn btn-light btn-block rounded-pill px-3 py-2 mr-3 font-weight-bold" @click="close">{{ $t('common.close') }}</button>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else-if="tabIndex === 5">
|
||
|
|
<div class="my-4">
|
||
|
|
<h2 class="text-center font-weight-bold mb-3">{{ $t('common.oops') }}</h2>
|
||
|
|
<p class="text-center py-2">
|
||
|
|
<span class="fa-stack fa-3x text-danger">
|
||
|
|
<i class="far fa-times fa-stack-1x"></i>
|
||
|
|
<i class="fal fa-circle fa-stack-2x"></i>
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
<p class="lead text-center">{{ $t('common.errorMsg') }}</p>
|
||
|
|
<hr>
|
||
|
|
<p class="text-center">{{ $t('report.contactAdminMsg') }}, <a href="/site/contact" class="font-weight-bold primary">{{ $t('common.clickHere') }}</a>.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-center mb-0 mb-md-n3">
|
||
|
|
<button class="btn btn-light btn-block rounded-pill px-3 py-2 mr-3 font-weight-bold" @click="close">{{ $t('common.close') }}</button>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</b-modal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
status: {
|
||
|
|
type: Object,
|
||
|
|
default: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
statusId: undefined,
|
||
|
|
tabIndex: 0,
|
||
|
|
showFull: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
open() {
|
||
|
|
this.$refs.modal.show();
|
||
|
|
},
|
||
|
|
|
||
|
|
close() {
|
||
|
|
this.$refs.modal.hide();
|
||
|
|
setTimeout(() => {
|
||
|
|
this.tabIndex = 0;
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
|
||
|
|
handleReason(reason) {
|
||
|
|
this.tabIndex = 2;
|
||
|
|
|
||
|
|
axios.post('/i/report', {
|
||
|
|
id: this.status.id,
|
||
|
|
report: reason,
|
||
|
|
type: 'post'
|
||
|
|
}).then(res => {
|
||
|
|
this.tabIndex = 3;
|
||
|
|
}).catch(err => {
|
||
|
|
this.tabIndex = 5;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|