feat: use computed for api domain (#722)

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: vikunja/frontend#722
Co-authored-by: dpschen <dpschen@noreply.kolaente.de>
Co-committed-by: dpschen <dpschen@noreply.kolaente.de>
This commit is contained in:
dpschen 2021-09-08 21:48:30 +00:00 committed by konrad
parent 96ef926dde
commit 432c6babf2
1 changed files with 17 additions and 14 deletions

View File

@ -24,7 +24,7 @@
</div> </div>
<div class="api-url-info" v-else> <div class="api-url-info" v-else>
<i18n path="apiConfig.signInOn"> <i18n path="apiConfig.signInOn">
<span class="url" v-tooltip="apiUrl"> {{ apiDomain() }} </span> <span class="url" v-tooltip="apiUrl"> {{ apiDomain }} </span>
</i18n> </i18n>
<br /> <br />
<a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a> <a @click="() => (configureApi = true)">{{ $t('apiConfig.change') }}</a>
@ -46,23 +46,24 @@
</template> </template>
<script> <script>
const API_DEFAULT_PORT = 3456
export default { export default {
name: 'apiConfig', name: 'apiConfig',
data() { data() {
return { return {
configureApi: false, configureApi: false,
apiUrl: '', apiUrl: window.API_URL,
errorMsg: '', errorMsg: '',
successMsg: '', successMsg: '',
} }
}, },
created() { created() {
this.apiUrl = window.API_URL
if (this.apiUrl === '') { if (this.apiUrl === '') {
this.configureApi = true this.configureApi = true
} }
}, },
methods: { computed: {
apiDomain() { apiDomain() {
if (window.API_URL.startsWith('/api/v1')) { if (window.API_URL.startsWith('/api/v1')) {
return window.location.host return window.location.host
@ -72,6 +73,8 @@ export default {
.split(/[/?#]/) .split(/[/?#]/)
return urlParts[0] return urlParts[0]
}, },
},
methods: {
setApiUrl() { setApiUrl() {
if (this.apiUrl === '') { if (this.apiUrl === '') {
return return
@ -131,17 +134,17 @@ export default {
return Promise.reject(e) return Promise.reject(e)
}) })
.catch((e) => { .catch((e) => {
// Check if it is reachable at port 3456 and https // Check if it is reachable at port API_DEFAULT_PORT and https
if (urlToCheck.port !== 3456) { if (urlToCheck.port !== API_DEFAULT_PORT) {
urlToCheck.protocol = 'https:' urlToCheck.protocol = 'https:'
urlToCheck.port = 3456 urlToCheck.port = API_DEFAULT_PORT
window.API_URL = urlToCheck.toString() window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update') return this.$store.dispatch('config/update')
} }
return Promise.reject(e) return Promise.reject(e)
}) })
.catch((e) => { .catch((e) => {
// Check if it is reachable at :3456 and /api/v1 and https // Check if it is reachable at :API_DEFAULT_PORT and /api/v1 and https
urlToCheck.pathname = origUrlToCheck.pathname urlToCheck.pathname = origUrlToCheck.pathname
if ( if (
!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1') &&
@ -154,17 +157,17 @@ export default {
return Promise.reject(e) return Promise.reject(e)
}) })
.catch((e) => { .catch((e) => {
// Check if it is reachable at port 3456 and http // Check if it is reachable at port API_DEFAULT_PORT and http
if (urlToCheck.port !== 3456) { if (urlToCheck.port !== API_DEFAULT_PORT) {
urlToCheck.protocol = 'http:' urlToCheck.protocol = 'http:'
urlToCheck.port = 3456 urlToCheck.port = API_DEFAULT_PORT
window.API_URL = urlToCheck.toString() window.API_URL = urlToCheck.toString()
return this.$store.dispatch('config/update') return this.$store.dispatch('config/update')
} }
return Promise.reject(e) return Promise.reject(e)
}) })
.catch((e) => { .catch((e) => {
// Check if it is reachable at :3456 and /api/v1 and http // Check if it is reachable at :API_DEFAULT_PORT and /api/v1 and http
urlToCheck.pathname = origUrlToCheck.pathname urlToCheck.pathname = origUrlToCheck.pathname
if ( if (
!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1') &&
@ -179,14 +182,14 @@ export default {
.catch(() => { .catch(() => {
// Still not found, url is still invalid // Still not found, url is still invalid
this.successMsg = '' this.successMsg = ''
this.errorMsg = this.$t('apiConfig.error', {domain: this.apiDomain()}) this.errorMsg = this.$t('apiConfig.error', {domain: this.apiDomain})
window.API_URL = oldUrl window.API_URL = oldUrl
}) })
.then((r) => { .then((r) => {
if (typeof r !== 'undefined') { if (typeof r !== 'undefined') {
// Set it + save it to local storage to save us the hoops // Set it + save it to local storage to save us the hoops
this.errorMsg = '' this.errorMsg = ''
this.successMsg = this.$t('apiConfig.success', {domain: this.apiDomain()}) this.successMsg = this.$t('apiConfig.success', {domain: this.apiDomain})
localStorage.setItem('API_URL', window.API_URL) localStorage.setItem('API_URL', window.API_URL)
this.configureApi = false this.configureApi = false
this.apiUrl = window.API_URL this.apiUrl = window.API_URL