From 1935af83c339991bafe137209abcdd2a64736d6e Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Sun, 11 Oct 2020 10:13:35 +0000
Subject: [PATCH] Allow setting api url from the login screen (#264)

Cleanup

Use the http factory everywhere instead of the created element

Use the current domain if the api path is relative to the frontend host

Format

Prevent setting an empty url

Fix styling

Add changing api url

Add change url component

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/264
Co-Authored-By: konrad <konrad@kola-entertainments.de>
Co-Committed-By: konrad <konrad@kola-entertainments.de>
---
 src/App.vue                           |   3 -
 src/components/misc/api-config.vue    | 170 ++++++++++++++++++++++++++
 src/http-common/index.js              |   8 +-
 src/main.js                           |   6 +
 src/store/modules/auth.js             |   6 +-
 src/store/modules/config.js           |   8 +-
 src/styles/components/_all.scss       |   1 +
 src/styles/components/api-config.scss |  12 ++
 src/styles/theme/form.scss            |   4 +
 src/views/user/Login.vue              |   6 +-
 10 files changed, 214 insertions(+), 10 deletions(-)
 create mode 100644 src/components/misc/api-config.vue
 create mode 100644 src/styles/components/api-config.scss

diff --git a/src/App.vue b/src/App.vue
index add6b28f..5fb763ea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -158,7 +158,6 @@
 						</a>
 
 						<aside class="menu namespaces-lists">
-							<div :class="{ 'is-loading': namespaceService.loading}" class="spinner"></div>
 							<template v-for="n in namespaces">
 								<div :key="n.id">
 									<router-link
@@ -320,7 +319,6 @@
 import router from './router'
 import {mapState} from 'vuex'
 
-import NamespaceService from './services/namespace'
 import authTypes from './models/authTypes'
 import Rights from './models/rights.json'
 
@@ -337,7 +335,6 @@ export default {
 	},
 	data() {
 		return {
-			namespaceService: NamespaceService,
 			menuActive: true,
 			currentDate: new Date(),
 			userMenuActive: false,
diff --git a/src/components/misc/api-config.vue b/src/components/misc/api-config.vue
new file mode 100644
index 00000000..b1519447
--- /dev/null
+++ b/src/components/misc/api-config.vue
@@ -0,0 +1,170 @@
+<template>
+	<div class="api-config">
+		<div v-if="configureApi">
+			<label class="label" for="api-url">Vikunja URL</label>
+			<div class="field has-addons">
+				<div class="control is-expanded">
+					<input
+						class="input" id="api-url"
+						placeholder="eg. https://localhost:3456"
+						required
+						type="url"
+						v-focus
+						v-model="apiUrl"
+						@keyup.enter="setApiUrl"
+					/>
+				</div>
+				<div class="control">
+					<a class="button is-primary" @click="setApiUrl" :disabled="apiUrl === ''">
+						Change
+					</a>
+				</div>
+			</div>
+		</div>
+		<div class="api-url-info" v-else>
+			Sign in to your Vikunja account on <span v-tooltip="apiUrl">{{ apiDomain() }}</span><br/>
+			<a @click="() => configureApi = true">change</a>
+		</div>
+
+		<div class="notification is-success mt-2" v-if="successMsg !== '' && errorMsg === ''">
+			{{ successMsg }}
+		</div>
+		<div class="notification is-danger mt-2" v-if="errorMsg !== '' && successMsg === ''">
+			{{ errorMsg }}
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'apiConfig',
+	data() {
+		return {
+			configureApi: false,
+			apiUrl: '',
+			errorMsg: '',
+			successMsg: '',
+		}
+	},
+	created() {
+		this.apiUrl = window.API_URL
+		if (this.apiUrl === '') {
+			this.configureApi = true
+		}
+	},
+	methods: {
+		apiDomain() {
+			if (window.API_URL.startsWith('/api/v1')) {
+				return window.location.host
+			}
+			const urlParts = window.API_URL.replace('http://', '').replace('https://', '').split(/[/?#]/)
+			return urlParts[0]
+		},
+		setApiUrl() {
+			if (this.apiUrl === '') {
+				return
+			}
+
+			let urlToCheck = this.apiUrl
+
+			// Check if the url has an http prefix
+			if (!urlToCheck.startsWith('http://') && !urlToCheck.startsWith('https://')) {
+				urlToCheck = `http://${urlToCheck}`
+			}
+
+			urlToCheck = new URL(urlToCheck)
+			const origUrlToCheck = urlToCheck
+
+			const oldUrl = window.API_URL
+			window.API_URL = urlToCheck.toString()
+
+			// Check if the api is reachable at the provided url
+			this.$store.dispatch('config/update')
+				.catch(e => {
+					// Check if it is reachable at /api/v1 and http
+					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it has a port and if not check if it is reachable at https
+					if (urlToCheck.protocol === 'http:') {
+						urlToCheck.protocol = 'https:'
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it is reachable at /api/v1 and https
+					urlToCheck.pathname = origUrlToCheck.pathname
+					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it is reachable at port 3456 and https
+					if (urlToCheck.port !== 3456) {
+						urlToCheck.protocol = 'https:'
+						urlToCheck.port = 3456
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it is reachable at :3456 and /api/v1 and https
+					urlToCheck.pathname = origUrlToCheck.pathname
+					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it is reachable at port 3456 and http
+					if (urlToCheck.port !== 3456) {
+						urlToCheck.protocol = 'http:'
+						urlToCheck.port = 3456
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it is reachable at :3456 and /api/v1 and http
+					urlToCheck.pathname = origUrlToCheck.pathname
+					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(() => {
+					// Still not found, url is still invalid
+					this.successMsg = ''
+					this.errorMsg = `Could not find or use Vikunja installation at "${this.apiDomain()}".`
+					window.API_URL = oldUrl
+				})
+				.then(r => {
+					if (typeof r !== 'undefined') {
+						// Set it + save it to local storage to save us the hoops
+						this.errorMsg = ''
+						this.successMsg = `Using Vikunja installation at "${this.apiDomain()}".`
+						localStorage.setItem('API_URL', window.API_URL)
+						this.configureApi = false
+						this.apiUrl = window.API_URL
+					}
+				})
+		},
+	},
+}
+</script>
diff --git a/src/http-common/index.js b/src/http-common/index.js
index f833ebf6..66835fc5 100644
--- a/src/http-common/index.js
+++ b/src/http-common/index.js
@@ -1,5 +1,7 @@
 import axios from 'axios'
 
-export const HTTP = axios.create({
-	baseURL: window.API_URL,
-})
+export const HTTPFactory = () => {
+	return axios.create({
+		baseURL: window.API_URL,
+	})
+}
diff --git a/src/main.js b/src/main.js
index d520b305..e502bcff 100644
--- a/src/main.js
+++ b/src/main.js
@@ -73,6 +73,12 @@ import {store} from './store'
 
 console.info(`Vikunja frontend version ${VERSION}`)
 
+// Check if we have an api url in local storage and use it if that's the case
+const apiUrlFromStorage = localStorage.getItem('API_URL')
+if (apiUrlFromStorage !== null) {
+	window.API_URL = apiUrlFromStorage
+}
+
 // Make sure the api url does not contain a / at the end
 if (window.API_URL.substr(window.API_URL.length - 1, window.API_URL.length) === '/') {
 	window.API_URL = window.API_URL.substr(0, window.API_URL.length - 1)
diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
index d833b5bb..a33d24ed 100644
--- a/src/store/modules/auth.js
+++ b/src/store/modules/auth.js
@@ -1,4 +1,4 @@
-import {HTTP} from '@/http-common'
+import {HTTPFactory} from '@/http-common'
 import {ERROR_MESSAGE, LOADING} from '../mutation-types'
 import UserModel from '../../models/user'
 
@@ -32,6 +32,7 @@ export default {
 	actions: {
 		// Logs a user in with a set of credentials.
 		login(ctx, credentials) {
+			const HTTP = HTTPFactory()
 			ctx.commit(LOADING, true, {root: true})
 
 			// Delete an eventually preexisting old token
@@ -78,6 +79,7 @@ export default {
 		// Registers a new user and logs them in.
 		// Not sure if this is the right place to put the logic in, maybe a seperate js component would be better suited.
 		register(ctx, credentials) {
+			const HTTP = HTTPFactory()
 			return HTTP.post('register', {
 				username: credentials.username,
 				email: credentials.email,
@@ -98,6 +100,7 @@ export default {
 		},
 
 		linkShareAuth(ctx, hash) {
+			const HTTP = HTTPFactory()
 			return HTTP.post('/shares/' + hash + '/auth')
 				.then(r => {
 					localStorage.setItem('token', r.data.token)
@@ -128,6 +131,7 @@ export default {
 		},
 		// Renews the api token and saves it to local storage
 		renewToken(ctx) {
+			const HTTP = HTTPFactory()
 			if (!ctx.state.authenticated) {
 				return
 			}
diff --git a/src/store/modules/config.js b/src/store/modules/config.js
index ad4234eb..c9b65131 100644
--- a/src/store/modules/config.js
+++ b/src/store/modules/config.js
@@ -1,5 +1,5 @@
 import {CONFIG} from '../mutation-types'
-import {HTTP} from '@/http-common'
+import {HTTPFactory} from '@/http-common'
 
 export default {
 	namespaced: true,
@@ -40,10 +40,14 @@ export default {
 	},
 	actions: {
 		update(ctx) {
-			HTTP.get('info')
+			const HTTP = HTTPFactory()
+
+			return HTTP.get('info')
 				.then(r => {
 					ctx.commit(CONFIG, r.data)
+					return Promise.resolve(r)
 				})
+				.catch(e => Promise.reject(e))
 		},
 	},
 }
\ No newline at end of file
diff --git a/src/styles/components/_all.scss b/src/styles/components/_all.scss
index 20ebc661..43ad9651 100644
--- a/src/styles/components/_all.scss
+++ b/src/styles/components/_all.scss
@@ -21,3 +21,4 @@
 @import 'namespaces';
 @import 'legal';
 @import 'keyboard-shortcuts';
+@import 'api-config';
diff --git a/src/styles/components/api-config.scss b/src/styles/components/api-config.scss
new file mode 100644
index 00000000..02fb1841
--- /dev/null
+++ b/src/styles/components/api-config.scss
@@ -0,0 +1,12 @@
+.api-config {
+  margin-bottom: .75rem;
+}
+
+.api-url-info {
+  font-size: .9rem;
+  text-align: right;
+
+  span {
+    border-bottom: 1px dashed $primary;
+  }
+}
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index 6718ed19..bf8be685 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -76,6 +76,10 @@
   }
 }
 
+.field.has-addons .button {
+  height: 2.5rem;
+}
+
 .input,
 .textarea {
   transition: all $transition;
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 4a9b52b5..f134e781 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -5,6 +5,7 @@
 			<div class="notification is-success has-text-centered" v-if="confirmedEmailSuccess">
 				You successfully confirmed your email! You can log in now.
 			</div>
+			<api-config/>
 			<form @submit.prevent="submit" id="loginform">
 				<div class="field">
 					<label class="label" for="username">Username</label>
@@ -76,13 +77,15 @@
 import {mapState} from 'vuex'
 
 import router from '../../router'
-import {HTTP} from '@/http-common'
+import {HTTPFactory} from '@/http-common'
 import message from '../../message'
 import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
 import legal from '../../components/misc/legal'
+import ApiConfig from '@/components/misc/api-config'
 
 export default {
 	components: {
+		ApiConfig,
 		legal,
 	},
 	data() {
@@ -91,6 +94,7 @@ export default {
 		}
 	},
 	beforeMount() {
+		const HTTP = HTTPFactory()
 		// Try to verify the email
 		// FIXME: Why is this here? Can we find a better place for this?
 		let emailVerifyToken = localStorage.getItem('emailConfirmToken')