Add change url component

src/components/misc/api-config.vue

@@ -0,0 +1,70 @@
+<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"
+					/>
+				</div>
+				<div class="control">
+					<a class="button is-primary">
+						Change
+					</a>
+				</div>
+			</div>
+		</div>
+		<span v-else>
+			Using Vikunja installation at {{ apiDomain() }}. <a @click="() => configureApi = true">change</a>
+		</span>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'apiConfig',
+	data() {
+		return {
+			configureApi: false,
+			apiUrl: '',
+			error: '',
+		}
+	},
+	created() {
+		this.apiUrl = window.API_URL
+		if (this.apiUrl === '') {
+			this.configureApi = true
+		}
+		console.log(this.apiUrl, this.configureApi)
+	},
+	methods: {
+		apiDomain() {
+			const urlParts = window.API_URL.replace('http://', '').replace('https://', '').split(/[/?#]/)
+			return urlParts[0]
+		},
+		setApiUrl() {
+			// 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
+		},
+	},
+}
+</script>
+
+<style scoped>
+.api-config {
+	margin-bottom: .75rem;
+}
+</style>

src/styles/theme/form.scss

@@ -76,6 +76,10 @@
   }
 }
 
+.field.has-addons .button {
+  height: 2.5rem;
+}
+
 .input,
 .textarea {
   transition: all $transition;

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>
@@ -80,9 +81,11 @@ import {HTTP} 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() {