front/src/App.vue

@@ -13,6 +13,7 @@
       <set-instance-modal @update:show="showSetInstanceModal = $event" :show="showSetInstanceModal"></set-instance-modal>
       <service-messages v-if="messages.length > 0"/>
       <router-view :key="$route.fullPath"></router-view>
+      <div class="ui hidden divider"></div>
       <div class="ui fitted divider"></div>
       <app-footer
         :version="version"

front/src/components/Home.vue

 <template>
-  <main class="main pusher" v-title="labels.title">
+  <main class="main pusher" v-title="title">
     <section class="ui vertical center aligned stripe segment">
-      <div class="ui text container">
       <h1 class="ui huge header">
-          <translate translate-context="Content/Home/Title/Verb">Welcome on Funkwhale</translate>
+        <translate translate-context="Content/Home/Title/Verb" :translate-params="{podName: config.podName}">Welcome on %{ podName}</translate>
       </h1>
-        <p><translate translate-context="Content/Home/Title">We think listening to music should be simple.</translate></p>
-        <router-link class="ui icon button" to="/about">
-          <i class="info icon"></i>
-          <translate translate-context="Content/Home/Button.Label/Verb">Learn more about this instance</translate>
-        </router-link>
-        <router-link class="ui icon teal button" to="/library">
-          <translate translate-context="Content/Home/Button.Label/Verb">Get me to the library</translate>
-          <i class="right arrow icon"></i>
-        </router-link>
-      </div>
+      <p v-if="config.shortDescription">{{ config.shortDescription }}</p>
+      <!-- <img src="http://placekitten.com/800/300" alt=""> -->
     </section>
-    <section class="ui vertical stripe segment">
-      <div class="ui middle aligned stackable text container">
-        <div class="ui grid">
-          <div class="row">
-            <div class="eight wide left floated column">
-              <h2 class="ui header">
-                <translate translate-context="Content/Home/Title">Why funkwhale?</translate>
-              </h2>
-              <p><translate translate-context="Content/Home/Paragraph">That's simple: we loved Grooveshark and we want to build something even better.</translate></p>
-            </div>
-            <div class="four wide left floated column">
-              <img class="ui medium image" src="../assets/logo/logo.png" />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ui middle aligned stackable text container">
-        <div class="ui hidden divider"></div>
-        <h2 class="ui header">
-          <translate translate-context="Content/Home/Title">Unlimited music</translate>
-        </h2>
-        <p><translate translate-context="Content/Home/Paragraph">Funkwhale is designed to make it easy to listen to music you like, or to discover new artists.</translate></p>
-        <div class="ui list">
-          <div class="item">
-            <i class="sound icon"></i>
-            <div class="content">
-              <translate translate-context="Content/Home/List item/Verb">Click once, listen for hours using built-in radios</translate>
-            </div>
-          </div>
-          <div class="item">
-            <i class="heart icon"></i>
-            <div class="content">
-              <translate translate-context="Content/Home/List item/Verb">Keep a track of your favorite songs</translate>
-            </div>
-          </div>
-          <div class="item">
-            <i class="list icon"></i>
-            <div class="content">
-              <translate translate-context="Content/Home/List item">Playlists? We got them</translate>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ui middle aligned stackable text container">
-        <div class="ui hidden divider"></div>
-        <h2 class="ui header">
-          <translate translate-context="Content/Home/Title">A clean library</translate>
+    <div class="ui container">
+      <div class="ui stackable two column grid">
+        <section class="column">
+          <div class="ui container">
+            <h2 class="ui huge header">
+              <translate translate-context="Content/Home/Title/Verb">Login</translate>
             </h2>
-        <p><translate translate-context="Content/Home/Paragraph">Funkwhale takes care of handling your music</translate>.</p>
-        <div class="ui list">
-          <div class="item">
-            <i class="tag icon"></i>
-            <div class="content" v-html="musicbrainzItem"></div>
+            <login-form></login-form>
           </div>
-          <div class="item">
-            <i class="plus icon"></i>
-            <div class="content">
-              <translate translate-context="Content/Home/List item">Covers, lyrics, our goal is to have them all ;)</translate>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ui middle aligned stackable text container">
           <div class="ui hidden divider"></div>
-        <h2 class="ui header">
-          <translate translate-context="Content/Home/Title">Easy to use</translate>
+          <div class="ui container">
+            <h2 class="ui huge header">
+              <translate translate-context="Content/Home/Title">Create an account</translate>
             </h2>
-        <p><translate translate-context="Content/Home/Paragraph">Funkwhale is dead simple to use.</translate></p>
-        <div class="ui list">
-          <div class="item">
-            <i class="book icon"></i>
-            <div class="content">
-              <translate translate-context="Content/Home/List item">No add-ons, no plugins : you only need a web library</translate>
-            </div>
-          </div>
-          <div class="item">
-            <i class="wizard icon"></i>
-            <div class="content">
-              <translate translate-context="Content/Home/List item">Access your music from a clean interface that focuses on what really matters</translate>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ui middle aligned stackable text container">
-        <div class="ui hidden divider"></div>
-        <h2 class="ui header">
-          <translate translate-context="Content/Home/Title">Your music, your way</translate>
-        </h2>
-        <p><translate translate-context="Content/Home/Paragraph">Funkwhale is free and gives you control on your music.</translate></p>
-        <div class="ui list">
-          <div class="item">
-            <i class="smile icon"></i>
-            <div class="content">
-              <translate translate-context="Content/Home/List item">The plaform is free and open-source, you can install it and modify it without worries</translate>
-            </div>
-          </div>
-          <div class="item">
-            <i class="protect icon"></i>
-            <div class="content">
-              <translate translate-context="Content/Home/List item">We do not track you or bother you with ads</translate>
-            </div>
-          </div>
-          <div class="item">
-            <i class="users icon"></i>
-            <div class="content">
-              <translate translate-context="Content/Home/List item">You can invite friends and family to your instance so they can enjoy your music</translate>
-            </div>
+            <signup-form></signup-form>
           </div>
+        </section>
       </div>
     </div>
-    </section>
   </main>
 </template>
 
 <script>
+import axios from 'axios'
+import _ from '@/lodash'
+
+import SignupForm from "@/components/auth/SignupForm"
+import LoginForm from "@/components/auth/LoginForm"
+
 export default {
   data() {
     return {
-      musicbrainzUrl: "https://musicbrainz.org/"
+      error: null,
+      nodeinfo: null,
+      isLoading: false,
     }
   },
+  components: {
+    LoginForm,
+    SignupForm,
+  },
+  async created () {
+    await this.fetchNodeInfo()
+  },
   computed: {
-    labels() {
-      return {
-        title: this.$pgettext('Head/Home/Title', "Welcome")
+    title () {
+      return 'Funkwhale'
+    },
+    config () {
+      let base = this.nodeinfo || {}
+      let config = {}
+      let instanceUrl = this.$store.state.instance.instanceUrl
+      var tmp = document.createElement('a')
+      tmp.href = instanceUrl
+      config.podName = _.get(base, 'metadata.nodeName', tmp.hostname)
+      config.shortDescription = _.get(base, 'metadata.shortDescription')
+
+      return config
     }
   },
-    musicbrainzItem () {
-      let msg = this.$pgettext('Content/Home/List item/Verb', 'Get quality metadata about your music thanks to <a href="%{ url }" target="_blank">MusicBrainz</a>')
-      return this.$gettextInterpolate(msg, {url: this.musicbrainzUrl})
+  methods: {
+    async fetchNodeInfo () {
+      this.isLoading = true
+      let url = 'instance/nodeinfo/2.0/'
+      try {
+        let response = await axios.get(url)
+        this.nodeinfo = response.data
+      } catch (e) {
+        this.error = e
+        console.log('Cannot fetch nodeinfo!', e)
+      }
+      this.isLoading = false
     }
   },
   watch: {
@@ -159,7 +92,6 @@ export default {
       immediate: true
     }
   }
-
 }
 </script>
 
@@ -171,4 +103,7 @@ export default {
 .ui.list .list.icon {
   padding: 0;
 }
+main > div.ui.container {
+  width: 900px;
+}
 </style>

front/src/components/auth/Login.vue → front/src/components/auth/LoginForm.vue

 <template>
-  <main class="main pusher" v-title="labels.title">
-    <section class="ui vertical stripe segment">
-      <div class="ui small text container">
-        <h2><translate translate-context="Content/Login/Title/Verb">Log in to your Funkwhale account</translate></h2>
   <form class="ui form" @submit.prevent="submit()">
+    <slot name="title"></slot>
     <div v-if="error" class="ui negative message">
       <div class="header"><translate translate-context="Content/Login/Error message.Title">We cannot log you in</translate></div>
       <ul class="list">
@@ -43,9 +40,6 @@
         <translate translate-context="*/Login/*/Verb">Login</translate>
     </button>
   </form>
-      </div>
-    </section>
-  </main>
 </template>
 
 <script>
@@ -81,10 +75,8 @@ export default {
   computed: {
     labels() {
       let usernamePlaceholder = this.$pgettext('Content/Login/Input.Placeholder', "Enter your username or email")
-      let title = this.$pgettext('Head/Login/Title', "Log In")
       return {
         usernamePlaceholder,
-        title
       }
     }
   },

front/src/components/auth/Signup.vue → front/src/components/auth/SignupForm.vue

 <template>
-  <main class="main pusher" v-title="labels.title">
-    <section class="ui vertical stripe segment">
-      <div class="ui small text container">
-        <h2><translate translate-context="Content/Signup/Title">Create a funkwhale account</translate></h2>
   <form
     :class="['ui', {'loading': isLoadingInstanceSetting}, 'form']"
     @submit.prevent="submit()">
+    <slot name="title"></slot>
     <p class="ui message" v-if="!$store.state.instance.settings.users.registration_enabled.value">
       <translate translate-context="Content/Signup/Form/Paragraph">Registration are closed on this instance, you will need an invitation code to signup.</translate>
     </p>
@@ -54,9 +51,6 @@
       <translate translate-context="Content/Signup/Button.Label">Create my account</translate>
     </button>
   </form>
-      </div>
-    </section>
-  </main>
 </template>
 
 <script>
@@ -94,7 +88,6 @@ export default {
   },
   computed: {
     labels() {
-      let title = this.$pgettext("*/Signup/Title", "Sign Up")
       let placeholder = this.$pgettext(
         "Content/Signup/Form/Placeholder",
         "Enter your invitation code (case insensitive)"
@@ -102,7 +95,6 @@ export default {
       let usernamePlaceholder = this.$pgettext("Content/Signup/Form/Placeholder", "Enter your username")
       let emailPlaceholder = this.$pgettext("Content/Signup/Form/Placeholder", "Enter your email")
       return {
-        title,
         usernamePlaceholder,
         emailPlaceholder,
         placeholder
@@ -140,7 +132,3 @@ export default {
   }
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-</style>

front/src/router/index.js

@@ -30,7 +30,7 @@ export default new Router({
       path: '/login',
       name: 'login',
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/Login"),
+        import(/* webpackChunkName: "core" */ "@/views/auth/Login"),
       props: (route) => ({ next: route.query.next || '/library' })
     },
     {
@@ -85,7 +85,7 @@ export default new Router({
       path: '/signup',
       name: 'signup',
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/Signup"),
+        import(/* webpackChunkName: "core" */ "@/views/auth/Signup"),
       props: (route) => ({
         defaultInvitation: route.query.invitation
       })

front/src/style/_main.scss

@@ -354,6 +354,9 @@ input + .help {
   min-width: 150px;
 }
 
+.ui.hidden.divider, .ui.fitted.divider {
+  clear: both;
+}
 
 
 @import "./themes/_light.scss";

front/src/views/auth/Login.vue

+<template>
+  <main class="main pusher" v-title="labels.title">
+    <section class="ui vertical stripe segment">
+      <div class="ui small text container">
+        <h2 slot="title"><translate translate-context="Content/Login/Title/Verb">Log in to your Funkwhale account</translate></h2>
+        <login-form :next="next"></login-form>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+import LoginForm from "@/components/auth/LoginForm"
+import PasswordInput from "@/components/forms/PasswordInput"
+
+export default {
+  components: {
+    LoginForm
+  },
+  props: {
+    next: { type: String, default: "/library" }
+  },
+  computed: {
+    labels() {
+      let title = this.$pgettext('Head/Login/Title', "Log In")
+      return {
+        title
+      }
+    }
+  },
+}
+</script>

front/src/views/auth/Signup.vue

+<template>
+  <main class="main pusher" v-title="labels.title">
+    <section class="ui vertical stripe segment">
+      <div class="ui small text container">
+        <signup-form :default-invitation="defaultInvitation" :next="next">
+          <h2 slot="title"><translate translate-context="Content/Signup/Title">Create a funkwhale account</translate></h2>
+        </signup-form>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script>
+import axios from "axios"
+import logger from "@/logging"
+
+import SignupForm from "@/components/auth/SignupForm"
+
+export default {
+  components: {
+    SignupForm
+  },
+  props: {
+    defaultInvitation: { type: String, required: false, default: null },
+    next: { type: String, default: "/" }
+  },
+  computed: {
+    labels() {
+      let title = this.$pgettext("*/Signup/Title", "Sign Up")
+      return {
+        title,
+      }
+    }
+  }
+}
+</script>