pixelfed/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">&commat;{{ 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">&commat;{{ 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>