Merge branch 'feature/about-page' into 'develop'

Feature/about page

Closes #699

See merge request pleroma/pleroma-fe!985

7 files changed, 195 insertions, 4 deletions

diff --git a/src/components/about/about.js b/src/components/about/about.js
index ae1cb182..1df25845 100644
--- a/src/components/about/about.js
+++ b/src/components/about/about.js
@@ -1,15 +1,24 @@
 import InstanceSpecificPanel from '../instance_specific_panel/instance_specific_panel.vue'
 import FeaturesPanel from '../features_panel/features_panel.vue'
 import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'
+import StaffPanel from '../staff_panel/staff_panel.vue'
+import MRFTransparencyPanel from '../mrf_transparency_panel/mrf_transparency_panel.vue'
 
 const About = {
   components: {
     InstanceSpecificPanel,
     FeaturesPanel,
-    TermsOfServicePanel
+    TermsOfServicePanel,
+    StaffPanel,
+    MRFTransparencyPanel
   },
   computed: {
-    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }
+    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    showInstanceSpecificPanel () {
+      return this.$store.state.instance.showInstanceSpecificPanel &&
+        !this.$store.getters.mergedConfig.hideISP &&
+        this.$store.state.instance.instanceSpecificPanelContent
+    }
   }
 }
 
diff --git a/src/components/about/about.vue b/src/components/about/about.vue
index 62ae16ea..518f6184 100644
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="sidebar">
-    <instance-specific-panel />
-    <features-panel v-if="showFeaturesPanel" />
+    <instance-specific-panel v-if="showInstanceSpecificPanel" />
+    <staff-panel />
     <terms-of-service-panel />
+    <MRFTransparencyPanel />
+    <features-panel v-if="showFeaturesPanel" />
   </div>
 </template>
 
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.js b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
new file mode 100644
index 00000000..20f8a08a
--- /dev/null
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
@@ -0,0 +1,16 @@
+import { mapState } from 'vuex'
+
+const MRFTransparencyPanel = {
+  computed: mapState({
+    federationPolicy: state => state.instance.federationPolicy,
+    mrfPolicies: state => state.instance.federationPolicy.mrf_policies,
+    acceptInstances: state => state.instance.federationPolicy.mrf_simple.accept,
+    rejectInstances: state => state.instance.federationPolicy.mrf_simple.reject,
+    quarantineInstances: state => state.instance.federationPolicy.quarantined_instances,
+    ftlRemovalInstances: state => state.instance.federationPolicy.mrf_simple.federated_timeline_removal,
+    mediaNsfwInstances: state => state.instance.federationPolicy.mrf_simple.media_nsfw,
+    mediaRemovalInstances: state => state.instance.federationPolicy.mrf_simple.media_removal
+  })
+}
+
+export default MRFTransparencyPanel
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
new file mode 100644
index 00000000..2640d68c
--- /dev/null
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -0,0 +1,122 @@
+<template>
+  <div
+    v-if="federationPolicy"
+    class="mrf-transparency-panel"
+  >
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background">
+        <div class="title">
+          {{ $t("about.federation") }}
+        </div>
+      </div>
+      <div class="panel-body">
+        <div class="mrf-section">
+          <h2>{{ $t("about.mrf_policies") }}</h2>
+          <p>{{ $t("about.mrf_policies_desc") }}</p>
+
+          <ul>
+            <li
+              v-for="policy in mrfPolicies"
+              :key="policy"
+              v-text="policy"
+            />
+          </ul>
+
+          <h2>{{ $t("about.mrf_policy_simple") }}</h2>
+
+          <div v-if="acceptInstances.length">
+            <h4>{{ $t("about.mrf_policy_simple_accept") }}</h4>
+
+            <p>{{ $t("about.mrf_policy_simple_accept_desc") }}</p>
+
+            <ul>
+              <li
+                v-for="instance in acceptInstances"
+                :key="instance"
+                v-text="instance"
+              />
+            </ul>
+          </div>
+
+          <div v-if="rejectInstances.length">
+            <h4>{{ $t("about.mrf_policy_simple_reject") }}</h4>
+
+            <p>{{ $t("about.mrf_policy_simple_reject_desc") }}</p>
+
+            <ul>
+              <li
+                v-for="instance in rejectInstances"
+                :key="instance"
+                v-text="instance"
+              />
+            </ul>
+          </div>
+
+          <div v-if="quarantineInstances.length">
+            <h4>{{ $t("about.mrf_policy_simple_quarantine") }}</h4>
+
+            <p>{{ $t("about.mrf_policy_simple_quarantine_desc") }}</p>
+
+            <ul>
+              <li
+                v-for="instance in quarantineInstances"
+                :key="instance"
+                v-text="instance"
+              />
+            </ul>
+          </div>
+
+          <div v-if="ftlRemovalInstances.length">
+            <h4>{{ $t("about.mrf_policy_simple_ftl_removal") }}</h4>
+
+            <p>{{ $t("about.mrf_policy_simple_ftl_removal_desc") }}</p>
+
+            <ul>
+              <li
+                v-for="instance in ftlRemovalInstances"
+                :key="instance"
+                v-text="instance"
+              />
+            </ul>
+          </div>
+
+          <div v-if="mediaNsfwInstances.length">
+            <h4>{{ $t("about.mrf_policy_simple_media_nsfw") }}</h4>
+
+            <p>{{ $t("about.mrf_policy_simple_media_nsfw_desc") }}</p>
+
+            <ul>
+              <li
+                v-for="instance in mediaNsfwInstances"
+                :key="instance"
+                v-text="instance"
+              />
+            </ul>
+          </div>
+
+          <div v-if="mediaRemovalInstances.length">
+            <h4>{{ $t("about.mrf_policy_simple_media_removal") }}</h4>
+
+            <p>{{ $t("about.mrf_policy_simple_media_removal_desc") }}</p>
+
+            <ul>
+              <li
+                v-for="instance in mediaRemovalInstances"
+                :key="instance"
+                v-text="instance"
+              />
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./mrf_transparency_panel.js"></script>
+
+<style lang="scss">
+.mrf-section {
+  margin: 1em;
+}
+</style>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 614fadf4..28589bb1 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -38,6 +38,11 @@
             {{ $t("nav.twkn") }}
           </router-link>
         </li>
+        <li>
+          <router-link :to="{ name: 'about' }">
+            {{ $t("nav.about") }}
+          </router-link>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/components/staff_panel/staff_panel.js b/src/components/staff_panel/staff_panel.js
new file mode 100644
index 00000000..93e950ad
--- /dev/null
+++ b/src/components/staff_panel/staff_panel.js
@@ -0,0 +1,14 @@
+import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+
+const StaffPanel = {
+  components: {
+    BasicUserCard
+  },
+  computed: {
+    staffAccounts () {
+      return this.$store.state.instance.staffAccounts
+    }
+  }
+}
+
+export default StaffPanel
diff --git a/src/components/staff_panel/staff_panel.vue b/src/components/staff_panel/staff_panel.vue
new file mode 100644
index 00000000..1d13003d
--- /dev/null
+++ b/src/components/staff_panel/staff_panel.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="staff-panel">
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background">
+        <div class="title">
+          {{ $t("about.staff") }}
+        </div>
+      </div>
+      <div class="panel-body">
+        <basic-user-card
+          v-for="user in staffAccounts"
+          :key="user.screen_name"
+          :user="user"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./staff_panel.js" ></script>
+
+<style lang="scss">
+</style>