Moved Modal t set instance url to a separate dedicated file

SetInstanceModal.vue
This commit is contained in:
jovuit 2019-02-25 14:03:53 +01:00 committed by Eliot Berriot
parent 8beb08d677
commit 1d7ad6978a
15 changed files with 205 additions and 103 deletions

View File

@ -0,0 +1,3 @@
Better workflow for connecting to another instance (#715)
Changing the instance used is now better integrated in the App, and it is checked that the chosen instance and the suggested instances are valid and running Funkwhale servers.

View File

@ -1,5 +1,5 @@
<template>
<div id="app">
<div id="app" :key="String($store.state.instance.instanceUrl)">
<!-- here, we display custom stylesheets, if any -->
<link
v-for="url in customStylesheets"
@ -8,40 +8,16 @@
:href="url"
:key="url"
>
<div class="ui main text container instance-chooser" v-if="!$store.state.instance.instanceUrl">
<div class="ui padded segment">
<h1 class="ui header">
<translate>Choose your instance</translate>
</h1>
<form class="ui form" @submit.prevent="$store.dispatch('instance/setUrl', instanceUrl)">
<p>
<translate>You need to select an instance in order to continue</translate>
</p>
<div class="ui action input">
<input type="text" v-model="instanceUrl">
<button type="submit" class="ui button">
<translate>Submit</translate>
</button>
</div>
<p>
<translate>Suggested choices</translate>
</p>
<div class="ui bulleted list">
<div class="ui item" v-for="url in suggestedInstances">
<a @click="instanceUrl = url; $store.dispatch('instance/setUrl', url)">{{ url }}</a>
</div>
</div>
</form>
</div>
</div>
<template v-else>
<template>
<sidebar></sidebar>
<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 fitted divider"></div>
<app-footer
:version="version"
@show:shortcuts-modal="showShortcutsModal = !showShortcutsModal"
@show:set-instance-modal="showSetInstanceModal = !showSetInstanceModal"
></app-footer>
<playlist-modal v-if="$store.state.auth.authenticated"></playlist-modal>
<filter-modal v-if="$store.state.auth.authenticated"></filter-modal>
@ -66,6 +42,7 @@ import locales from './locales'
import PlaylistModal from '@/components/playlists/PlaylistModal'
import FilterModal from '@/components/moderation/FilterModal'
import ShortcutsModal from '@/components/ShortcutsModal'
import SetInstanceModal from '@/components/SetInstanceModal'
export default {
name: 'app',
@ -76,7 +53,8 @@ export default {
PlaylistModal,
ShortcutsModal,
GlobalEvents,
ServiceMessages
ServiceMessages,
SetInstanceModal,
},
data () {
return {
@ -84,6 +62,7 @@ export default {
nodeinfo: null,
instanceUrl: null,
showShortcutsModal: false,
showSetInstanceModal: false,
}
},
created () {
@ -131,12 +110,6 @@ export default {
self.nodeinfo = response.data
})
},
switchInstance () {
let confirm = window.confirm(this.$gettext('This will erase your local data and disconnect you, do you want to continue?'))
if (confirm) {
this.$store.commit('instance/instanceUrl', null)
}
},
autodetectLanguage () {
let userLanguage = navigator.language || navigator.userLanguage
let available = locales.locales.map(e => { return e.code })
@ -257,7 +230,6 @@ export default {
console.log('No momentjs locale available for', shortLocale)
})
})
console.log(moment.locales())
}
}
}

View File

@ -13,9 +13,9 @@
<div class="item" v-if="version">
<translate :translate-params="{version: version}" >Version %{version}</translate>
</div>
<a @click="switchInstance" class="item" >
<div role="button" class="item" @click="$emit('show:set-instance-modal')" >
<translate>Use another instance</translate>
</a>
</div>
</div>
<div class="ui form">
<div class="ui field">
@ -66,18 +66,6 @@ import axios from 'axios'
export default {
props: ["version"],
methods: {
switchInstance() {
let confirm = window.confirm(
this.$gettext(
"This will erase your local data and disconnect you, do you want to continue?"
)
)
if (confirm) {
this.$store.commit("instance/instanceUrl", null)
}
}
},
computed: {
...mapState({
messages: state => state.ui.messages
@ -88,13 +76,6 @@ export default {
parser.href = url
return parser.hostname
},
suggestedInstances() {
let instances = [
this.$store.getters["instance/defaultUrl"](),
"https://demo.funkwhale.audio"
]
return instances
}
}
}
</script>

View File

@ -0,0 +1,146 @@
<template>
<modal @update:show="$emit('update:show', $event); isError = false" :show="show">
<div class="header"><translate :translate-context="'Popup/Instance/Title'">Choose your instance</translate></div>
<div class="scrolling content">
<div v-if="isError" class="ui negative message">
<div class="header"><translate :translate-context="'Popup/Instance/Error message.Title'">It is not possible to connect to the given URL</translate></div>
<ul class="list">
<li><translate :translate-context="'Popup/Instance/Error message.List item'">The server might be down</translate></li>
<li><translate :translate-context="'Popup/Instance/Error message.List item'">The given address is not a Funkwhale server</translate></li>
</ul>
</div>
<form class="ui form" @submit.prevent="checkAndSwitch(instanceUrl)">
<p v-if="$store.state.instance.instanceUrl" class="description" :translate-context="'Popup/Login/Paragraph'" v-translate="{url: $store.state.instance.instanceUrl, hostname: instanceHostname }">
You are currently connected to <a href="%{ url }" target="_blank">%{ hostname }&nbsp;<i class="external icon"></i></a>. If you continue, you will be disconnected from your current instance and all your local data will be deleted.
</p>
<p v-else>
<translate :translate-context="'Popup/Instance/Paragraph'">To continue, please select the Funkwhale instance you want to connect to. Enter the address directly, or select one of the suggested choices.</translate>
</p>
<div class="field">
<label><translate :translate-context="'Popup/Instance/Input.Label/Noun'">Instance URL</translate></label>
<div class="ui action input">
<input type="text" v-model="instanceUrl" placeholder="https://funkwhale.server">
<button type="submit" :class="['ui', 'icon', {loading: isLoading}, 'button']">
<translate :translate-context="'*/*/Button.Label/Verb'">Submit</translate>
</button>
</div>
</div>
</form>
<div class="ui hidden divider"></div>
<form class="ui form" @submit.prevent="">
<div class="field">
<label><translate :translate-context="'Popup/Instance/List.Label'">Suggested choices</translate></label>
<button v-for="url in suggestedInstances" @click="checkAndSwitch(url)" class="ui basic button">{{ url }}</button>
</div>
</form>
</div>
<div class="actions">
<div class="ui cancel button"><translate :translate-context="'*/*/Button.Label/Verb'">Cancel</translate></div>
</div>
</modal>
</template>
<script>
import Modal from '@/components/semantic/Modal'
import axios from 'axios'
export default {
props: ['show'],
components: {
Modal,
},
data() {
return {
instanceUrl: null,
nodeinfo: null,
isError: false,
isLoading: false,
path: 'api/v1/instance/nodeinfo/2.0/',
}
},
methods: {
fetchNodeInfo () {
let self = this
axios.get('instance/nodeinfo/2.0/').then(response => {
self.nodeinfo = response.data
})
},
fetchUrl (url) {
let urlFetch = url
if (!urlFetch.endsWith('/')) {
urlFetch = `${urlFetch}/${this.path}`
} else {
urlFetch = `${urlFetch}${this.path}`
}
if (!urlFetch.startsWith('https://') && !urlFetch.startsWith('http://')) {
urlFetch = `https://${urlFetch}`
}
return urlFetch
},
requestDistantNodeInfo (url) {
var self = this
axios.get(this.fetchUrl(url)).then(function (response) {
self.isLoading = false
if(!url.startsWith('https://') && !url.startsWith('http://')) {
url = `https://${url}`
}
self.switchInstance(url)
}).catch(function (error) {
self.isLoading = false
self.isError = true
})
},
switchInstance (url) {
// Here we disconnect from the current instance and reconnect to the new one. No check is performed...
this.$emit('update:show', false)
this.isError = false
let msg = this.$pgettext('*/Instance/Message', 'You are now using the Funkwhale instance at %{ url }')
this.$store.commit('ui/addMessage', {
content: this.$gettextInterpolate(msg, {url: url}),
date: new Date()
})
let self = this
this.$nextTick(() => {
self.$store.commit('instance/instanceUrl', null)
self.$store.dispatch('instance/setUrl', url)
})
},
checkAndSwitch (url) {
// First we have to check if the address is a valid FW server. If yes, we switch:
this.isError = false // Clear error message if any...
this.isLoading = true
this.requestDistantNodeInfo(url)
},
},
computed: {
suggestedInstances () {
let instances = this.$store.state.instance.knownInstances.slice(0)
if (this.$store.state.instance.frontSettings.defaultServerUrl) {
let serverUrl = this.$store.state.instance.frontSettings.defaultServerUrl
if (!serverUrl.endsWith('/')) {
serverUrl = serverUrl + '/'
}
instances.push(serverUrl)
}
let self = this
instances.push(this.$store.getters['instance/defaultUrl'](), 'https://demo.funkwhale.audio/')
return _.uniq(instances.filter((e) => {return e != self.$store.state.instance.instanceUrl}))
},
instanceHostname() {
let url = this.$store.state.instance.instanceUrl
let parser = document.createElement("a")
parser.href = url
return parser.hostname
},
},
watch: {
'$store.state.instance.instanceUrl' () {
this.$store.dispatch('instance/fetchSettings')
this.fetchNodeInfo()
},
},
}
</script>
<style scoped>
</style>