Add changing api url

src/components/misc/api-config.vue

@@ -11,10 +11,11 @@
 						type="url"
 						v-focus
 						v-model="apiUrl"
+						@keyup.enter="setApiUrl"
 					/>
 				</div>
 				<div class="control">
-					<a class="button is-primary">
+					<a class="button is-primary" @click="setApiUrl">
 						Change
 					</a>
 				</div>
@@ -23,6 +24,13 @@
 		<span v-else>
 			Using Vikunja installation at {{ apiDomain() }}. <a @click="() => configureApi = true">change</a>
 		</span>
+
+		<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>
 
@@ -33,7 +41,8 @@ export default {
 		return {
 			configureApi: false,
 			apiUrl: '',
-			error: '',
+			errorMsg: '',
+			successMsg: '',
 		}
 	},
 	created() {
@@ -41,7 +50,6 @@ export default {
 		if (this.apiUrl === '') {
 			this.configureApi = true
 		}
-		console.log(this.apiUrl, this.configureApi)
 	},
 	methods: {
 		apiDomain() {
@@ -49,15 +57,104 @@ export default {
 			return urlParts[0]
 		},
 		setApiUrl() {
+			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
-
-			// Check if it is reachable directly
-
-			// Check if it has a port and if not check if it is reachable at port 80, 443, 3456
-
-			// Check if it is reachable with or without /v1/api/
-
-			// Set it + save it to local storage to save us the hoops
+			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
+					}
+				})
 		},
 	},
 }

src/http-common/index.js

@@ -1,5 +1,9 @@
 import axios from 'axios'
 
-export const HTTP = axios.create({
-	baseURL: window.API_URL,
-})
+export const HTTPFactory = () => {
+	return axios.create({
+		baseURL: window.API_URL,
+	})
+}
+
+export const HTTP = HTTPFactory()

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)

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))
 		},
 	},
 }