diff --git a/front/src/App.vue b/front/src/App.vue
index e401d475e05955a42eb24c0625325306b1d9e956..0e8d00354b3ef5b8ee8d7bc6b89bfd8cec2dbb7c 100644
--- a/front/src/App.vue
+++ b/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"
diff --git a/front/src/components/Home.vue b/front/src/components/Home.vue
index bbcc9a8f959a89b9d20ffadc402acfa74da5274b..e7357561eb4ecb507fb9cec8bfe350b779fa93de 100644
--- a/front/src/components/Home.vue
+++ b/front/src/components/Home.vue
@@ -1,151 +1,84 @@
<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>
- </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>
+ <h1 class="ui huge header">
+ <translate translate-context="Content/Home/Title/Verb" :translate-params="{podName: config.podName}">Welcome on %{ podName}</translate>
+ </h1>
+ <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>
- </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>
- </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>
- </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 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>
+ <login-form></login-form>
</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 class="ui hidden divider"></div>
+ <div class="ui container">
+ <h2 class="ui huge header">
+ <translate translate-context="Content/Home/Title">Create an account</translate>
+ </h2>
+ <signup-form></signup-form>
</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>
- </div>
- </div>
+ </section>
</div>
- </section>
+ </div>
</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'
},
- 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})
+ 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
+ }
+ },
+ 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>
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index 4c6c6d61e4893dbf2e400426afaa717af648ab54..d7c8420db690dc6167be883269c925702cb0a6df 100644
--- a/front/src/style/_main.scss
+++ b/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";