Merge branch 'instance-description' into 'develop'

Instance description

Closes #30

See merge request funkwhale/funkwhale!50

CHANGELOG

@@ -12,6 +12,11 @@ Changelog
 - Front: Fixed broken redirection on login
 - Front: Fixed broken error handling on settings and login form
 
+About page:
+
+There is a brand new about page on instances (/about), and instance
+owner can now provide a name, a short and a long description for their instance via the admin (/api/admin/dynamic_preferences/globalpreferencemodel/).
+
 Transcoding:
 
 Basic transcoding is now available to/from the following formats : ogg and mp3.

api/funkwhale_api/instance/dynamic_preferences_registry.py

@@ -1,9 +1,42 @@
+from django.forms import widgets
+
 from dynamic_preferences import types
 from dynamic_preferences.registries import global_preferences_registry
 
 raven = types.Section('raven')
+instance = types.Section('instance')
 
 
+@global_preferences_registry.register
+class InstanceName(types.StringPreference):
+    show_in_api = True
+    section = instance
+    name = 'name'
+    default = ''
+    help_text = 'Instance public name'
+    verbose_name = 'The public name of your instance'
+
+
+@global_preferences_registry.register
+class InstanceShortDescription(types.StringPreference):
+    show_in_api = True
+    section = instance
+    name = 'short_description'
+    default = ''
+    verbose_name = 'Instance succinct description'
+
+
+@global_preferences_registry.register
+class InstanceLongDescription(types.StringPreference):
+    show_in_api = True
+    section = instance
+    name = 'long_description'
+    default = ''
+    help_text = 'Instance long description (markdown allowed)'
+    field_kwargs = {
+        'widget': widgets.Textarea
+    }
+
 @global_preferences_registry.register
 class RavenDSN(types.StringPreference):
     show_in_api = True

api/tests/instance/test_preferences.py

@@ -1,3 +1,5 @@
+import pytest
+
 from django.urls import reverse
 
 from dynamic_preferences.api import serializers
@@ -20,3 +22,14 @@ def test_can_list_settings_via_api(preferences, api_client):
     for p in response.data:
         i = '__'.join([p['section'], p['name']])
         assert i in expected_preferences
+
+
+@pytest.mark.parametrize('pref,value', [
+    ('instance__name', 'My instance'),
+    ('instance__short_description', 'For music lovers'),
+    ('instance__long_description', 'For real music lovers'),
+])
+def test_instance_settings(pref, value, preferences):
+    preferences[pref] = value
+
+    assert preferences[pref] == value

front/src/App.vue

@@ -9,6 +9,9 @@
           <div class="three wide column">
             <h4 class="ui header">Links</h4>
             <div class="ui link list">
+              <router-link class="item" to="/about">
+                About this instance
+              </router-link>
               <a href="https://funkwhale.audio" class="item" target="_blank">Official website</a>
               <a href="https://docs.funkwhale.audio" class="item" target="_blank">Documentation</a>
               <a href="https://code.eliotberriot.com/funkwhale/funkwhale" class="item" target="_blank">Source code</a>

front/src/components/About.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="main pusher">
+    <div class="ui vertical center aligned stripe segment">
+      <div class="ui text container">
+        <h1 class="ui huge header">
+            <template v-if="instance.name.value">About {{ instance.name.value }}</template>
+            <template v-else="instance.name.value">About this instance</template>
+        </h1>
+      </div>
+    </div>
+    <div class="ui vertical stripe segment">
+      <p v-if="!instance.short_description.value && !instance.long_description.value">
+        Unfortunately, owners of this instance did not yet take the time to complete this page.</p>
+      <div
+        v-if="instance.short_description.value"
+        class="ui middle aligned stackable text container">
+        <p>{{ instance.short_description.value }}</p>
+      </div>
+      <div
+        v-if="instance.long_description.value"
+        class="ui middle aligned stackable text container"
+        v-html="$options.filters.markdown(instance.long_description.value)">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  created () {
+    this.$store.dispatch('instance/fetchSettings')
+  },
+  computed: {
+    ...mapState({
+      instance: state => state.instance.settings.instance
+    })
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

front/src/components/Home.vue

@@ -6,6 +6,10 @@
             Welcome on funkwhale
         </h1>
         <p>We think listening music should be simple.</p>
+        <router-link class="ui icon button" to="/about">
+          <i class="info icon"></i>
+          Learn more about this instance
+        </router-link>
         <router-link class="ui icon teal button" to="/library">
           Get me to the library
           <i class="right arrow icon"></i>

front/src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import PageNotFound from '@/components/PageNotFound'
+import About from '@/components/About'
 import Home from '@/components/Home'
 import Login from '@/components/auth/Login'
 import Signup from '@/components/auth/Signup'
@@ -33,6 +34,11 @@ export default new Router({
       name: 'index',
       component: Home
     },
+    {
+      path: '/about',
+      name: 'about',
+      component: About
+    },
     {
       path: '/login',
       name: 'login',

front/src/store/instance.js

@@ -6,6 +6,17 @@ export default {
   namespaced: true,
   state: {
     settings: {
+      instance: {
+        name: {
+          value: ''
+        },
+        short_description: {
+          value: ''
+        },
+        long_description: {
+          value: ''
+        }
+      },
       users: {
         registration_enabled: {
           value: true
@@ -40,7 +51,7 @@ export default {
         })
         commit('settings', sections)
         if (payload && payload.callback) {
-          callback()
+          payload.callback()
         }
       }, response => {
         logger.default.error('Error while fetching settings', response.data)