resources/assets/components/admin/AdminDirectory.vue
<template>
<div v-if="loaded">
<div class="header bg-primary pb-2 mt-n4">
<div class="container-fluid">
<div class="header-body">
<div class="row align-items-center py-4">
<div class="col-lg-6 col-7">
<p class="display-1 text-white d-inline-block mb-0">Directory</p>
<p class="h3 text-white font-weight-light">Manage your server listing on pixelfed.org</p>
</div>
<div class="col-lg-6 col-5">
<p class="text-right">
<button class="btn btn-outline-white btn-lg px-5 py-2" @click="save">Save changes</button>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-md-3">
<div class="nav-wrapper">
<div class="nav flex-column nav-pills" id="tabs-icons-text" role="tablist" aria-orientation="vertical">
<div v-for="tab in tabs" class="nav-item">
<a class="nav-link mb-sm-3" :class="{ active: tabIndex === tab.id }" href="#" @click.prevent="toggleTab(tab.id)">
<i :class="tab.icon"></i>
<span class="ml-2">{{ tab.title }}</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-9">
<div class="card shadow mt-3">
<div class="card-body">
<div class="tab-content">
<div v-if="tabIndex === 1" class="tab-pane fade show active">
<div v-if="!isSubmitting && !state.awaiting_approval && !state.is_active" class="d-flex align-items-center justify-content-center">
<div class="text-center mb-4">
<p>
<i class="far fa-exclamation-triangle fa-5x text-lighter"></i>
</p>
<p class="display-3 mb-1">Awaiting Submission</p>
<p v-if="!state.is_eligible && !state.submission_exists" class="lead mt-0 text-muted">Your directory listing isn't completed yet</p>
<div v-else-if="state.is_eligible && !state.submission_exists" class="mb-4">
<p class="lead mt-0 text-muted">Your directory listing is ready for submission!</p>
<button
class="btn btn-primary btn-lg font-weight-bold px-5 text-uppercase"
@click="handleSubmit">
Submit my Server to pixelfed.org
</button>
</div>
</div>
</div>
<div v-else-if="!isSubmitting && state.awaiting_approval && !state.is_active">
<div class="card card-body shadow-none border d-flex align-items-center justify-content-center py-5">
<p class="display-3 mb-1">Awaiting Approval</p>
<p class="text-primary mb-1">Awaiting submission approval from pixelfed.org, please check back later!</p>
<p class="small text-muted mb-0">If you are still waiting for approval after 24 hours please contact the Pixelfed team.</p>
</div>
</div>
<div v-else-if="!isSubmitting && state.awaiting_approval && state.is_active">
<div class="card card-body shadow-none border d-flex align-items-center justify-content-center py-5">
<p class="display-3 mb-1">Awaiting Update Approval</p>
<p class="text-primary mb-1">Awaiting updated submission approval from pixelfed.org, please check back later!</p>
<p class="small text-muted mb-0">If you are still waiting for approval after 24 hours please contact the Pixelfed team.</p>
</div>
</div>
<div v-else-if="!isSubmitting && !state.awaiting_approval && state.is_active">
<div class="card card-body shadow-none border d-flex align-items-center justify-content-center py-5">
<h2 class="font-weight-bold">Active Listing</h2>
<p class="my-3">
<i class="far fa-check-circle fa-4x text-success"></i>
</p>
<p class="mt-2 mb-0">Your server directory listing on <a href="#" class="font-weight-bold">pixelfed.org</a> is active</p>
<button
class="btn btn-primary btn-sm mt-3 font-weight-bold px-5 text-uppercase"
@click="handleSubmit">
Update my listing on pixelfed.org
</button>
</div>
</div>
<div v-else-if="isSubmitting">
<div class="card card-body shadow-none border d-flex align-items-center justify-content-center py-5">
<b-spinner variant="primary" />
<p class="lead my-0 text-primary">Sending submission...</p>
</div>
</div>
<div v-else>
<div class="card card-body shadow-none border d-flex align-items-center justify-content-center py-5">
<p class="display-3 mb-1">Oops! An unexpected error occured</p>
<p class="text-primary mb-1">Ask the Pixelfed team for assistance.</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="card text-left">
<div class="list-group list-group-flush">
<div class="list-group-item">
<template v-if="requirements.curated_onboarding === true">
<i class="far fa-exclamation-circle text-success"></i>
<span class="ml-2 font-weight-bold">
Curated account registration
</span>
</template>
<template v-else>
<i
class="far"
:class="[ requirements.open_registration ? 'fa-check-circle text-success' : 'fa-exclamation-circle text-danger']"></i>
<span class="ml-2 font-weight-bold">
{{ requirements.open_registration ? 'Open' : 'Closed' }} account registration
</span>
</template>
</div>
<div class="list-group-item">
<i
class="far"
:class="[ requirements.oauth_enabled ? 'fa-check-circle text-success' : 'fa-exclamation-circle text-danger']"></i>
<span class="ml-2 font-weight-bold">
{{ requirements.oauth_enabled ? 'Enabled' : 'Disabled' }} mobile apis/oauth
</span>
</div>
<div class="list-group-item">
<i
class="far"
:class="[ requirements.activitypub_enabled ? 'fa-check-circle text-success' : 'fa-exclamation-circle text-danger']"></i>
<span class="ml-2 font-weight-bold">
{{ requirements.activitypub_enabled ? 'Enabled' : 'Disabled' }} activitypub federation
</span>
</div>
<div class="list-group-item">
<i
class="far"
:class="[ form.summary && form.summary.length && form.location && form.location.length ? 'fa-check-circle text-success' : 'fa-exclamation-circle text-danger']"></i>
<span class="ml-2 font-weight-bold">
{{ form.summary && form.summary.length && form.location && form.location.length ? 'Configured' : 'Missing' }} server details
</span>
</div>
<div class="list-group-item">
<i
class="far"
:class="[ requirements_validator && requirements_validator.length == 0 ? 'fa-check-circle text-success' : 'fa-exclamation-circle text-danger']"></i>
<span class="ml-2 font-weight-bold">
{{ requirements_validator && requirements_validator.length == 0 ? 'Valid' : 'Invalid' }} feature requirements
</span>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card text-left">
<div class="list-group list-group-flush">
<div class="list-group-item">
<i
class="far"
:class="[ form.contact_account ? 'fa-check-circle text-success' : 'fa-exclamation-circle text-danger']"></i>
<span class="ml-2 font-weight-bold">
{{ form.contact_account ? 'Configured' : 'Missing' }} admin account
</span>
</div>
<div class="list-group-item">
<i
class="far"
:class="[ form.contact_email ? 'fa-check-circle text-success' : 'fa-exclamation-circle text-danger']"></i>
<span class="ml-2 font-weight-bold">
{{ form.contact_email ? 'Configured' : 'Missing' }} contact email
</span>
</div>
<div class="list-group-item">
<i
class="far"
:class="[ selectedPosts && selectedPosts.length ? 'fa-check-circle text-success' : 'fa-exclamation-circle text-danger']"></i>
<span class="ml-2 font-weight-bold">
{{ selectedPosts && selectedPosts.length ? 'Configured' : 'Missing' }} favourite posts
</span>
</div>
<div class="list-group-item">
<i
class="far"
:class="[ form.privacy_pledge ? 'fa-check-circle text-success' : 'fa-exclamation-circle text-danger']"></i>
<span class="ml-2 font-weight-bold">
{{ form.privacy_pledge ? 'Configured' : 'Missing' }} privacy pledge
</span>
</div>
<div class="list-group-item">
<i
class="far"
:class="[ communityGuidelines && communityGuidelines.length ? 'fa-check-circle text-success' : 'fa-exclamation-circle text-danger']"></i>
<span class="ml-2 font-weight-bold">
{{ communityGuidelines && communityGuidelines.length ? 'Configured' : 'Missing' }} community guidelines
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="tabIndex === 2" class="tab-pane fade show active">
<p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
</div>
<div v-else-if="tabIndex === 3" class="tab-pane fade show active" role="tabpanel">
<h2 class="display-4 mb-0">Server Details</h2>
<p class="small text-muted">Edit your server details to better describe it</p>
<hr class="mt-0">
<div class="row">
<div class="col-12 col-md-6">
<div class="card shadow-none border card-body">
<div class="form-group mb-0">
<label for="form-summary" class="font-weight-bold">Summary</label>
<textarea
class="form-control form-control-muted"
id="form-summary"
rows="3"
placeholder="A descriptive summary of your instance up to 140 characters long. HTML is not allowed."
v-model="form.summary"></textarea>
<p class="help-text small text-muted text-right">
{{ form.summary && form.summary.length ? form.summary.length : 0 }}/140
</p>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card shadow-none border card-body">
<div class="form-group mb-0">
<label for="form-summary" class="font-weight-bold">Location</label>
<select v-model="form.location" class="form-control form-control-muted">
<option selected disabled value="0">Select the country your server is in</option>
<option v-for="c in initialData.countries" :value="c">{{ c }}</option>
</select>
<p class="form-text small text-muted">Select the country your server is hosted in, even if you are in a different country</p>
</div>
</div>
</div>
</div>
<div class="list-group mb-4">
<div class="list-group-item">
<label class="font-weight-bold mb-0">Server Banner</label>
<p class="small">Add an optional banner image to your directory listing</p>
<div class="row">
<div class="col-12 col-md-6">
<div class="card mb-0 shadow-none border">
<div v-if="!form.banner_image" class="card-body bg-primary text-white">
<p class="text-center mb-2">
<i class="far fa-exclamation-circle fa-2x"></i>
</p>
<p class="text-center mb-0">No banner image</p>
</div>
<div v-else>
<a :href="form.banner_image" target="_blank">
<img :src="form.banner_image" class="card-img-top">
</a>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div v-if="!isUploadingBanner" class="custom-file">
<input
ref="bannerImageRef"
type="file"
class="custom-file-input"
id="banner_image"
@change="uploadBannerImage"
>
<label class="custom-file-label" for="banner_image">Choose file</label>
<p class="form-text text-muted small mb-0">Must be 1920 by 1080 pixels</p>
<p class="form-text text-muted small mb-0">Must be a <kbd>JPEG</kbd> or <kbd>PNG</kbd> image no larger than 5MB.</p>
<div v-if="form.banner_image && !form.banner_image.endsWith('default.jpg')">
<button
class="btn btn-danger font-weight-bold btn-block mt-5"
@click="deleteBannerImage">Delete banner image</button>
</div>
</div>
<div v-else class="text-center">
<b-spinner variant="primary" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="card shadow-none border card-body">
<div class="form-group mb-0">
<label for="form-summary" class="font-weight-bold">Primary Language</label>
<select v-model="form.primary_locale" class="form-control form-control-muted" disabled>
<option v-for="c in initialData.available_languages" :value="c.code">{{ c.name }}</option>
</select>
<p class="form-text text-muted small mb-0">The primary language of your server, to edit this value you need to set the <kbd>APP_LOCALE</kbd> .env value</p>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="tabIndex === 4" class="tab-pane fade show active" role="tabpanel">
<h2 class="display-4 mb-0">Admin Contact</h2>
<p class="small text-muted">Set a designated admin account and public email address</p>
<hr class="mt-0">
<div class="row">
<div class="col-12 col-md-6">
<div v-if="initialData.admins.length" class="form-group">
<label for="form-summary" class="font-weight-bold">Designated Admin</label>
<select v-model="form.contact_account" class="form-control form-control-muted">
<option disabled="" value="0">Select a designated admin</option>
<option v-for="(acct, index) in initialData.admins" :key="'pfc-' + acct + index" :value="acct.pid">{{ acct.username }}</option>
</select>
</div>
<div v-else class="px-3 pb-2 pt-0 border border-danger rounded">
<p class="lead font-weight-bold text-danger">No admin(s) found</p>
<ul class="text-danger">
<li>Admins must be active</li>
<li>Admins must have 2FA setup and enabled</li>
</ul>
</div>
</div>
<div class="col-12 col-md-6">
<div class="form-group">
<label for="form-summary" class="font-weight-bold">Public Email</label>
<input
class="form-control form-control-muted"
placeholder="info@example.org"
v-model="form.contact_email" />
<p class="help-text small text-muted">
Must be a valid email address
</p>
</div>
</div>
</div>
</div>
<div v-else-if="tabIndex === 5" class="tab-pane fade show active" role="tabpanel">
<h2 class="display-4 mb-0">Favourite Posts</h2>
<p class="small text-muted">Show off a few favourite posts from your server</p>
<hr class="mt-0 mb-1">
<div v-show="selectedPosts && selectedPosts.length !== 12" class="nav-wrapper">
<ul class="nav nav-pills nav-fill flex-column flex-md-row" role="tablist">
<li class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0 active" id="favposts-1-tab" data-toggle="tab" href="#favposts-1" role="tab" aria-controls="favposts-1" aria-selected="true">{{ this.selectedPosts.length ? this.selectedPosts.length : ''}} Selected Posts</a>
</li>
<li v-if="selectedPosts && selectedPosts.length < 12" class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" id="favposts-2-tab" data-toggle="tab" href="#favposts-2" role="tab" aria-controls="favposts-2" aria-selected="false">Add by post id</a>
</li>
<li v-if="selectedPosts && selectedPosts.length < 12" class="nav-item">
<a class="nav-link mb-sm-3 mb-md-0" id="favposts-3-tab" data-toggle="tab" href="#favposts-3" role="tab" aria-controls="favposts-3" aria-selected="false" @click="initPopularPosts">Add by popularity</a>
</li>
</ul>
</div>
<div class="tab-content mt-3">
<div class="tab-pane fade list-fade-bottom show active" id="favposts-1" role="tabpanel" aria-labelledby="favposts-1-tab">
<div v-if="selectedPosts && selectedPosts.length" style="max-height: 520px; overflow-y: auto;">
<div
v-for="post in selectedPosts"
:key="'sp-' + post.id"
class="list-group-item border-primary form-control-muted"
>
<div class="media align-items-center">
<div class="custom-control custom-checkbox mr-2">
<input type="checkbox" class="custom-control-input" checked :id="`checkbox-sp-${post.id}`" @change="toggleSelectedPost(post)">
<label class="custom-control-label" :for="`checkbox-sp-${post.id}`"></label>
</div>
<img :src="post.media_attachments[0].url" class="border rounded-sm mr-3" width="100" height="100" style="object-fit: cover;" loading="lazy">
<div class="media-body">
<p class="lead mt-0 mb-0 font-weight-bold">@{{ post.account.username }}</p>
<p class="text-muted mb-0" style="font-size: 14px;">
<span><span class="font-weight-bold">{{ formatCount(post.favourites_count) }}</span> Likes</span>
<span class="mx-2">·</span>
<span><span class="font-weight-bold">{{ formatCount(post.account.followers_count) }}</span> Followers</span>
<span class="mx-2">·</span>
<span>Created <span class="font-weight-bold">{{ formatDateTime(post.created_at) }}</span></span>
</p>
</div>
<a class="btn btn-outline-primary btn-sm rounded-pill" :href="post.url" target="_blank">View</a>
</div>
</div>
<div class="mt-5 mb-5 pt-3"></div>
</div>
<div v-else>
<div class="card card-body bg-lighter text-center py-5">
<p class="text-light mb-1"><i class="far fa-info-circle fa-3x"></i></p>
<p class="h2 mb-0">0 posts selected</p>
<p class="small mb-0">You can select up to 12 favourite posts by id or popularity</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="favposts-2" role="tabpanel" aria-labelledby="favposts-2-tab">
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<label class="font-weight-bold">Find and add by post id</label>
<div class="input-group mb-3">
<input
type="number"
class="form-control form-control-muted border"
placeholder="Post id"
min="1"
max="99999999999999999999"
v-model="favouritePostByIdInput"
:disabled="favouritePostByIdFetching">
<div class="input-group-append">
<button v-if="!favouritePostByIdFetching" class="btn btn-outline-primary" type="button" @click="handlePostByIdSearch">
Search
</button>
<button v-else class="btn btn-outline-primary" disabled>
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
</button>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card card-body bg-primary">
<div class="d-flex align-items-center text-white">
<i class="far fa-info-circle mr-2"></i>
<p class="small mb-0 font-weight-bold">A post id is the numerical id found in post urls</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade list-fade-bottom mb-0" id="favposts-3" role="tabpanel" aria-labelledby="favposts-3-tab">
<div v-if="popularPostsLoaded" class="list-group" style="max-height: 520px; overflow-y: auto;">
<div
v-for="post in popularPosts"
:key="'pp-' + post.id"
class="list-group-item"
:class="[ selectedPosts.includes(post) ? 'border-primary form-control-muted': '' ]">
<div class="media align-items-center">
<div class="custom-control custom-checkbox mr-2">
<input type="checkbox" class="custom-control-input" :id="`checkbox-pp-${post.id}`" @change="togglePopularPost(post.id, post)" :checked="selectedPosts.includes(post)">
<label class="custom-control-label" :for="`checkbox-pp-${post.id}`"></label>
</div>
<img :src="post.media_attachments[0].url" class="border rounded-sm mr-3" width="100" height="100" style="object-fit: cover;" loading="lazy">
<div class="media-body">
<p class="lead mt-0 mb-0 font-weight-bold">@{{ post.account.username }}</p>
<p class="text-muted mb-0" style="font-size: 14px;">
<span><span class="font-weight-bold">{{ formatCount(post.favourites_count) }}</span> Likes</span>
<span class="mx-2">·</span>
<span><span class="font-weight-bold">{{ formatCount(post.account.followers_count) }}</span> Followers</span>
<span class="mx-2">·</span>
<span>Created <span class="font-weight-bold">{{ formatDateTime(post.created_at) }}</span></span>
</p>
</div>
<a class="btn btn-outline-primary btn-sm rounded-pill" :href="post.url" target="_blank">View</a>
</div>
</div>
<div class="mt-5 mb-3"></div>
</div>
<div v-else class="text-center py-5">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="tabIndex === 6" class="tab-pane fade show active" role="tabpanel">
<h2 class="display-4 mb-0">Privacy Pledge</h2>
<p class="small text-muted">Pledge to keep you and your data private and securely stored</p>
<hr class="mt-0">
<p>To qualify for the Privacy Pledge, you must abide by the following rules:</p>
<ul class="font-weight-bold">
<li>No analytics or 3rd party trackers*</li>
<li>User data is not sold to any 3rd parties</li>
<li>Data is stored securely in accordance with industry standards</li>
<li>Admin accounts are protected with 2FA</li>
<li>Follow strict support procedures to keep your accounts safe</li>
<li>Give at least 6 months warning in the event we shut down</li>
</ul>
<p class="small text-muted mb-0">You may use 3rd party services like captchas on specific pages, so long as they are clearly defined in your privacy policy</p>
<hr>
<p>
<div class="custom-control custom-checkbox mr-2">
<input type="checkbox" class="custom-control-input" id="privacy-pledge" v-model="form.privacy_pledge">
<label class="custom-control-label font-weight-bold" for="privacy-pledge">I agree to the uphold the Privacy Pledge</label>
</div>
</p>
</div>
<div v-else-if="tabIndex === 7" class="tab-pane fade show active" role="tabpanel">
<h2 class="display-4 mb-0">Community Guidelines</h2>
<p class="small text-muted">A few ground rules to keep your community healthy and safe.</p>
<hr class="mt-0">
<ol v-if="communityGuidelines && communityGuidelines.length" class="font-weight-bold">
<li v-for="rule in communityGuidelines" class="text-primary"><span class="lead ml-1 text-dark">{{ rule }}</span></li>
</ol>
<div v-else class="card bg-primary text-white">
<div class="card-body text-center py-5">
<p class="mb-n3"><i class="far fa-exclamation-circle fa-3x"></i></p>
<p class="lead mb-0">No Community Guidelines have been set</p>
</div>
</div>
<hr>
<p class="mb-0">You can manage Community Guidelines on the <a href="/i/admin/settings">Settings page</a></p>
</div>
<div v-else-if="tabIndex === 8" class="tab-pane fade show active" role="tabpanel">
<h2 class="display-4 mb-0">Feature Requirements</h2>
<p class="small text-muted">The minimum requirements for Directory inclusion.</p>
<hr class="mt-0">
<div class="row">
<div class="col-12 col-md-6">
<div class="list-group">
<div class="list-group-item d-flex align-items-center">
<div>
<i
class="far fa-2x mr-4"
:class="[
!requirements_validator.hasOwnProperty('media_types') ?
'fa-check-circle text-success' :
'fa-exclamation-circle text-danger'
]">
</i>
</div>
<div>
<p class="font-weight-bold text-dark my-0">Media Types</p>
<p class="mb-0 small text-muted">Allowed MIME types. image/jpeg and image/png by default</p>
<p v-if="requirements_validator.hasOwnProperty('media_types')" class="mb-0 text-danger font-weight-bold">{{ requirements_validator.media_types[0] }}</p>
</div>
</div>
<div v-if="feature_config.optimize_image" class="list-group-item d-flex align-items-center">
<div>
<i
class="far fa-2x mr-4"
:class="[
!requirements_validator.hasOwnProperty('image_quality') ?
'fa-check-circle text-success' :
'fa-exclamation-circle text-danger'
]">
</i>
</div>
<div>
<p class="font-weight-bold text-dark my-0">Image Quality</p>
<p class="mb-0 small text-muted">Image optimization is enabled, the image quality must be a value between 1-100.</p>
<p v-if="requirements_validator.hasOwnProperty('image_quality')" class="mb-0 text-danger font-weight-bold">{{ requirements_validator.image_quality[0] }}</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div>
<i
class="far fa-2x mr-4"
:class="[
!requirements_validator.hasOwnProperty('max_photo_size') ?
'fa-check-circle text-success' :
'fa-exclamation-circle text-danger'
]">
</i>
</div>
<div>
<p class="font-weight-bold text-dark my-0">Max Photo Size</p>
<p class="mb-0 small text-muted">Max photo upload size in kb. Must be between 15-100 MB.</p>
<p v-if="requirements_validator.hasOwnProperty('max_photo_size')" class="mb-0 text-danger font-weight-bold">{{ requirements_validator.max_photo_size[0] }}</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div>
<i
class="far fa-2x mr-4"
:class="[
!requirements_validator.hasOwnProperty('max_caption_length') ?
'fa-check-circle text-success' :
'fa-exclamation-circle text-danger'
]">
</i>
</div>
<div>
<p class="font-weight-bold text-dark my-0">Max Caption Length</p>
<p class="mb-0 small text-muted">The max caption length limit. Must be between 500-10000.</p>
<p v-if="requirements_validator.hasOwnProperty('max_caption_length')" class="mb-0 text-danger font-weight-bold">{{ requirements_validator.max_caption_length[0] }}</p>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="list-group">
<div class="list-group-item d-flex align-items-center">
<div>
<i
class="far fa-2x mr-4"
:class="[
!requirements_validator.hasOwnProperty('max_altext_length') ?
'fa-check-circle text-success' :
'fa-exclamation-circle text-danger'
]">
</i>
</div>
<div>
<p class="font-weight-bold text-dark my-0">Max Alt-text length</p>
<p class="mb-0 small text-muted">The alt-text length limit. Must be between 1000-5000.</p>
<p v-if="requirements_validator.hasOwnProperty('max_altext_length')" class="mb-0 text-danger font-weight-bold">{{ requirements_validator.max_altext_length[0] }}</p>
</div>
</div>
<div v-if="feature_config.enforce_account_limit" class="list-group-item d-flex align-items-center">
<div>
<i
class="far fa-2x mr-4"
:class="[
!requirements_validator.hasOwnProperty('max_account_size') ?
'fa-check-circle text-success' :
'fa-exclamation-circle text-danger'
]">
</i>
</div>
<div>
<p class="font-weight-bold text-dark my-0">Max Account Size</p>
<p class="mb-0 small text-muted">The account storage limit. Must be 1GB at minimum.</p>
<p v-if="requirements_validator.hasOwnProperty('max_account_size')" class="mb-0 text-danger font-weight-bold">{{ requirements_validator.max_account_size[0] }}</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div>
<i
class="far fa-2x mr-4"
:class="[
!requirements_validator.hasOwnProperty('max_album_length') ?
'fa-check-circle text-success' :
'fa-exclamation-circle text-danger'
]">
</i>
</div>
<div>
<p class="font-weight-bold text-dark my-0">Max Album Length</p>
<p class="mb-0 small text-muted">Max photos per album post. Must be between 4-20.</p>
<p v-if="requirements_validator.hasOwnProperty('max_album_length')" class="mb-0 text-danger font-weight-bold">{{ requirements_validator.max_album_length[0] }}</p>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div>
<i
class="far fa-2x mr-4"
:class="[
!requirements_validator.hasOwnProperty('account_deletion') ?
'fa-check-circle text-success' :
'fa-exclamation-circle text-danger'
]">
</i>
</div>
<div>
<p class="font-weight-bold text-dark my-0">Account Deletion</p>
<p class="mb-0 small text-muted">Allow users to delete their own account.</p>
<p v-if="requirements_validator.hasOwnProperty('account_deletion')" class="mb-0 text-danger font-weight-bold">{{ requirements_validator.account_deletion[0] }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else-if="tabIndex === 9" class="tab-pane fade show active" role="tabpanel">
<h2 class="display-4 mb-0">User Testimonials</h2>
<p class="small text-muted">Add testimonials from your users.</p>
<hr class="mt-0">
<div class="row">
<div class="col-12 col-md-6 list-fade-bottom">
<div class="list-group pb-5" style="max-height: 520px; overflow-y: auto;">
<div
v-for="(testimonial, idx) in testimonials"
class="list-group-item"
:class="[ idx == (testimonials.length - 1) ? 'mb-5' : '' ]">
<div class="d-flex justify-content-between align-items-center">
<div class="media">
<img :src="testimonial.profile.avatar" class="mr-3 rounded-circle" width="40" h="40">
<div class="media-body">
<p class="font-weight-bold mb-0">
{{ testimonial.profile.username }}
</p>
<p class="small text-muted mt-n1 mb-0">
Member Since {{ formatDate(testimonial.profile.created_at) }}
</p>
</div>
</div>
<div>
<p class="mb-0 small">
<a
href="#"
@click.prevent="editTestimonial(testimonial)">
Edit
</a>
</p>
<p class="mb-0 small">
<a
href="#"
class="text-danger"
@click.prevent="deleteTestimonial(testimonial)">
Delete
</a>
</p>
</div>
</div>
<hr class="my-1">
<p class="small font-weight-bold text-muted mb-0 text-center">Testimonial</p>
<div class="border rounded px-3">
<p v-html="testimonial.body" class="my-2 small" style="white-space: pre-wrap;"></p>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div v-if="isEditingTestimonial" class="card">
<div class="card-header font-weight-bold">
Edit Testimonial
</div>
<div class="card-body">
<div class="form-group">
<label for="form-summary" class="font-weight-bold">Username</label>
<input
class="form-control form-control-muted"
placeholder="test"
v-model="editingTestimonial.profile.username"
disabled />
</div>
<div class="form-group">
<label for="form-summary" class="font-weight-bold">Testimonial</label>
<textarea
class="form-control form-control-muted"
rows="5"
v-model="editingTestimonial.body"></textarea>
<div class="d-flex justify-content-between">
<p class="help-text small text-muted mb-0">
Text only, up to 500 characters
</p>
<p class="help-text small text-muted mb-0">
{{ editingTestimonial.body ? editingTestimonial.body.length : 0 }}/500
</p>
</div>
</div>
</div>
<div class="card-footer">
<button
type="button"
class="btn btn-primary btn-block"
@click="saveEditTestimonial">
Save
</button>
<button
type="button"
class="btn btn-secondary btn-block"
@click="cancelEditTestimonial">
Cancel
</button>
</div>
</div>
<div v-else class="card">
<template v-if="testimonials.length < 10">
<div class="card-header font-weight-bold">
Add New Testimonial
</div>
<div class="card-body">
<div class="form-group">
<label for="form-summary" class="font-weight-bold">Username</label>
<input
class="form-control form-control-muted"
placeholder="test"
v-model="testimonial.username" />
<p class="help-text small text-muted">
Must be a valid user account
</p>
</div>
<div class="form-group">
<label for="form-summary" class="font-weight-bold">Testimonial</label>
<textarea
class="form-control form-control-muted"
rows="5"
v-model="testimonial.body"></textarea>
<div class="d-flex justify-content-between">
<p class="help-text small text-muted mb-0">
Text only, up to 500 characters
</p>
<p class="help-text small text-muted mb-0">
{{ testimonial.body ? testimonial.body.length : 0 }}/500
</p>
</div>
</div>
</div>
<div class="card-footer">
<button
type="button"
class="btn btn-primary btn-block"
@click="saveTestimonial">Save Testimonial</button>
</div>
</template>
<template v-else>
<div class="card-body text-center">
<p class="lead">You can't add any more testimonials</p>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else>
<div class="container my-5 py-5 text-center">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
loaded: false,
initialData: {},
tabIndex: 1,
tabs: [
{ id: 1, title: "Overview", icon: "far fa-home" },
// { id: 2, title: "Status", icon: "far fa-asterisk" },
{ id: 3, title: "Server Details", icon: "far fa-info-circle" },
{ id: 4, title: "Admin Contact", icon: "far fa-user-crown" },
{ id: 5, title: "Favourite Posts", icon: "far fa-heart" },
{ id: 6, title: "Privacy Pledge", icon: "far fa-eye-slash" },
{ id: 7, title: "Community Guidelines", icon: "far fa-smile-beam" },
{ id: 8, title: "Feature Requirements", icon: "far fa-bolt" },
{ id: 9, title: "User Testimonials", icon: "far fa-comment-smile"}
],
form: {
summary: "",
location: 0,
contact_account: 0,
contact_email: "",
privacy_pledge: undefined,
banner_image: undefined,
locale: 0
},
requirements: {
activitypub_enabled: undefined,
open_registration: undefined,
oauth_enabled: undefined,
curated_onboarding: undefined,
},
feature_config: [],
requirements_validator: [],
popularPostsLoaded: false,
popularPosts: [],
selectedPopularPosts: [],
selectedPosts: [],
favouritePostByIdInput: "",
favouritePostByIdFetching: false,
communityGuidelines: [],
isUploadingBanner: false,
state: {
is_eligible: false,
submission_exists: false,
awaiting_approval: false,
is_active: false,
submission_timestamp: undefined,
},
isSubmitting: false,
testimonial: {
username: undefined,
body: undefined
},
testimonials: [],
isEditingTestimonial: false,
editingTestimonial: undefined,
}
},
mounted() {
this.fetchInitialData();
},
methods: {
toggleTab(idx) {
this.tabIndex = idx;
},
fetchInitialData() {
axios.get('/i/admin/api/directory/initial-data')
.then(res => {
this.initialData = res.data;
if(res.data.activitypub_enabled) {
this.requirements.activitypub_enabled = res.data.activitypub_enabled;
}
if(res.data.open_registration) {
this.requirements.open_registration = res.data.open_registration;
}
if(res.data.curated_onboarding) {
this.requirements.curated_onboarding = res.data.curated_onboarding;
}
if(res.data.oauth_enabled) {
this.requirements.oauth_enabled = res.data.oauth_enabled;
}
if(res.data.summary) {
this.form.summary = res.data.summary;
}
if(res.data.location) {
this.form.location = res.data.location;
}
if(res.data.favourite_posts) {
this.selectedPosts = res.data.favourite_posts;
}
if(res.data.admin) {
this.form.contact_account = res.data.admin;
}
if(res.data.contact_email) {
this.form.contact_email = res.data.contact_email;
}
if(res.data.community_guidelines) {
this.communityGuidelines = res.data.community_guidelines;
}
if(res.data.privacy_pledge) {
this.form.privacy_pledge = res.data.privacy_pledge;
}
if(res.data.feature_config) {
this.feature_config = res.data.feature_config;
}
if(res.data.requirements_validator) {
this.requirements_validator = res.data.requirements_validator;
}
if(res.data.banner_image) {
this.form.banner_image = res.data.banner_image;
}
if(res.data.primary_locale) {
this.form.primary_locale = res.data.primary_locale;
}
if(res.data.is_eligible) {
this.state.is_eligible = res.data.is_eligible;
}
if(res.data.testimonials) {
this.testimonials = res.data.testimonials;
}
if(res.data.submission_state) {
this.state.is_active = res.data.submission_state.active_submission;
this.state.submission_exists = res.data.submission_state.pending_submission;
this.state.awaiting_approval = res.data.submission_state.pending_submission;
}
})
.then(() => {
this.loaded = true;
})
},
initPopularPosts() {
if(this.popularPostsLoaded) {
return;
}
axios.get('/i/admin/api/directory/popular-posts')
.then(res => {
this.popularPosts = res.data.filter(pp => !this.selectedPosts.map(sp => sp.id).includes(pp.id));
})
.then(() => {
this.popularPostsLoaded = true;
})
},
formatCount(c) {
return window.App.util.format.count(c);
},
formatDateTime(ts) {
let date = new Date(ts);
return new Intl.DateTimeFormat('en-US', {dateStyle: 'medium', timeStyle: 'short'}).format(date);
},
formatDate(ts) {
let date = new Date(ts);
return new Intl.DateTimeFormat('en-US', {month: 'short', year: 'numeric'}).format(date);
},
formatTimestamp(ts) {
return window.App.util.format.timeAgo(ts);
},
togglePopularPost(id, post) {
if(!this.selectedPosts.length) {
this.selectedPosts.push(post);
return;
}
const exists = this.selectedPosts.map(sp => sp.id).includes(id);
if(exists) {
this.selectedPosts = this.selectedPosts.filter(i => i.id != id);
} else {
if(this.selectedPosts.length >= 12) {
swal('Oops!', 'You can only select 12 popular posts', 'error');
event.currentTarget.checked = false;
return;
}
this.selectedPosts.push(post);
}
},
toggleSelectedPost(post) {
this.selectedPosts = this.selectedPosts.filter(i => i.id !== post.id);
},
handlePostByIdSearch() {
event.currentTarget.blur();
if(this.selectedPosts.length >= 12) {
swal('Oops', 'You can only select 12 posts', 'error');
return;
}
this.favouritePostByIdFetching = true;
axios.post('/i/admin/api/directory/add-by-id', {
q: this.favouritePostByIdInput
})
.then(res => {
if(this.selectedPosts.map(p => p.id).includes(res.data.id)) {
swal('Oops!', 'You already selected this post!', 'error');
return;
}
this.selectedPosts.push(res.data);
this.favouritePostByIdInput = "";
this.popularPosts = this.popularPosts.filter(pp => pp.id != res.data.id);
})
.then(() => {
this.favouritePostByIdFetching = false;
$('#favposts-1-tab').tab('show');
})
.catch(err => {
swal('Invalid Post', 'The post id you added is not valid', 'error');
this.favouritePostByIdFetching = false;
})
},
save() {
axios.post('/i/admin/api/directory/save', {
'location': this.form.location,
'summary': this.form.summary,
'admin_uid': this.form.contact_account,
'contact_email': this.form.contact_email,
'favourite_posts': this.selectedPosts.map(p => p.id),
'privacy_pledge': this.form.privacy_pledge
})
.then(res => {
swal('Success!', 'Successfully saved directory settings', 'success');
})
.catch(err => {
swal('Oops!', err.response.data.message, 'error');
})
},
uploadBannerImage() {
this.isUploadingBanner = true;
if(!window.confirm('Are you sure you want to update your server banner image?')) {
this.isUploadingBanner = false;
return;
}
let formData = new FormData();
formData.append('banner_image', this.$refs.bannerImageRef.files[0]);
axios.post('/i/admin/api/directory/save',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(res => {
this.form.banner_image = res.data.banner_image;
this.isUploadingBanner = false;
})
.catch(err => {
swal('Error', err.response.data.message, 'error');
this.isUploadingBanner = false;
})
},
deleteBannerImage() {
if(!window.confirm('Are you sure you want to delete your server banner image?')) {
return;
}
axios.delete('/i/admin/api/directory/banner-image')
.then(res => {
this.form.banner_image = res.data;
})
.catch(err => {
console.log(err);
})
},
handleSubmit() {
if(!window.confirm('Are you sure you want to submit your server?')) {
return;
}
this.isSubmitting = true;
axios.post('/i/admin/api/directory/submit')
.then(res => {
setTimeout(() => {
this.isSubmitting = false;
// this.state.awaiting_approval = true;
this.state.is_active = true;
console.log(res.data);
}, 3000);
})
.catch(err => {
swal('Error', err.response.data.message, 'error');
})
},
deleteTestimonial(testimonial) {
if(!window.confirm('Are you sure you want to delete the testimonial by ' + testimonial.profile.username + '?')) {
return;
}
axios.post('/i/admin/api/directory/testimonial/delete', {
profile_id: testimonial.profile.id
})
.then(res => {
this.testimonials = this.testimonials.filter(t => {
return t.profile.id != testimonial.profile.id
})
})
},
editTestimonial(testimonial) {
this.isEditingTestimonial = true;
this.editingTestimonial = testimonial;
},
saveTestimonial() {
event.currentTarget?.blur();
axios.post('/i/admin/api/directory/testimonial/save', {
username: this.testimonial.username,
body: this.testimonial.body
})
.then(res => {
this.testimonials.push(res.data);
this.testimonial = {
username: undefined,
body: undefined
}
})
.catch(err => {
let msg = err.response.data.hasOwnProperty('error') ? err.response.data.error :
err.response.data.message;
swal('Oops!', msg, 'error');
})
},
cancelEditTestimonial() {
event.currentTarget?.blur();
this.isEditingTestimonial = false;
this.editingTestimonial = {};
},
saveEditTestimonial() {
event.currentTarget?.blur();
axios.post('/i/admin/api/directory/testimonial/update', {
profile_id: this.editingTestimonial.profile.id,
body: this.editingTestimonial.body
})
.then(res => {
this.isEditingTestimonial = false;
this.editingTestimonial = {};
})
}
},
watch: {
selectedPosts: function(posts) {
let ids = posts.map(p => p.id);
this.popularPosts = this.popularPosts.filter(pp => !ids.includes(pp.id));
},
}
}
</script>