Fix flow of setting instance url

front/src/components/auth/SignupForm.vue

@@ -211,6 +211,7 @@ export default {
   },
   created () {
     const self = this
+    // TODO (wvffle): Await action result and remove callback from the instance store
     this.$store.dispatch('instance/fetchSettings', {
       callback: function () {
         self.isLoadingInstanceSetting = false

front/src/init/instance.ts

@@ -25,14 +25,7 @@ export const install: InitModule = async ({ store, router }) => {
   }
 
   if (!store.state.instance.instanceUrl) {
-    // We have several way to guess the API server url. By order of precedence:
-    // 1. use the url provided in settings.json, if any
-    // 2. use the url specified when building via VUE_APP_INSTANCE_URL
-    // 3. use the current url
-    const defaultInstanceUrl = store.state.instance.frontSettings.defaultServerUrl ||
-      import.meta.env.VUE_APP_INSTANCE_URL ||
-      location.origin
-
+    const defaultInstanceUrl = store.state.instance.frontSettings.defaultServerUrl
     store.commit('instance/instanceUrl', defaultInstanceUrl)
   } else {
     // needed to trigger initialization of axios / service worker / web socket

front/src/store/instance.ts

@@ -5,16 +5,18 @@ import { Module } from 'vuex'
 import { RootState } from '~/store/index'
 
 export interface State {
-  frontSettings: {
-    defaultServerUrl: string
-    additionalStylesheets: string[] // TODO (wvffle): Ensure it's not nullable
-  }
+  frontSettings: FrontendSettings
   instanceUrl?: string
   knownInstances: string[]
   nodeinfo: unknown | null // TODO (wvffle): Get nodeinfo type from swagger automatically
   settings: Settings
 }
 
+interface FrontendSettings {
+  defaultServerUrl: string
+  additionalStylesheets: string[] // TODO (wvffle): Ensure it's not nullable
+}
+
 interface InstanceSettings {
   name: { value: string }
   short_description: { value: string }
@@ -46,14 +48,20 @@ interface Settings {
 
 const logger = useLogger()
 
+// We have several way to guess the API server url. By order of precedence:
+// 1. use the url provided in settings.json, if any
+// 2. use the url specified when building via VUE_APP_INSTANCE_URL
+// 3. use the current url
+const instanceUrl = import.meta.env.VUE_APP_INSTANCE_URL as string || location.origin
+
 const store: Module<State, RootState> = {
   namespaced: true,
   state: {
     frontSettings: {
-      defaultServerUrl: location.origin,
+      defaultServerUrl: instanceUrl,
       additionalStylesheets: []
     },
-    instanceUrl: import.meta.env.VUE_APP_INSTANCE_URL as string,
+    instanceUrl,
     knownInstances: [],
     nodeinfo: null,
     settings: {
@@ -102,9 +110,6 @@ const store: Module<State, RootState> = {
     nodeinfo: (state, value) => {
       state.nodeinfo = value
     },
-    frontSettings: (state, value) => {
-      state.frontSettings = value
-    },
     instanceUrl: (state, value) => {
       if (value && !value.endsWith('/')) {
         value = value + '/'
@@ -158,29 +163,34 @@ const store: Module<State, RootState> = {
       })
     },
     // Send a request to the login URL and save the returned JWT
-    fetchSettings ({ commit }, payload) {
-      return axios.get('instance/settings/').then(response => {
-        logger.info('Successfully fetched instance settings')
+    async fetchSettings ({ commit }, payload) {
+      const response = await axios.get('instance/settings/')
+        .catch(err => logger.error('Error while fetching settings', err.response.data))
 
-        type SettingsSection = { section: string, name: string }
-        const sections = response.data.reduce((map: Record<string, Record<string, SettingsSection>>, entry: SettingsSection) => {
-          map[entry.section] ??= {}
-          map[entry.section][entry.name] = entry
-          return map
-        }, {})
+      if (!response) return
 
-        commit('settings', sections)
-        payload?.callback?.()
-      }, response => {
-        logger.error('Error while fetching settings', response.data)
-      })
+      logger.info('Successfully fetched instance settings')
+
+      type SettingsSection = { section: string, name: string }
+      const sections = response.data.reduce((map: Record<string, Record<string, SettingsSection>>, entry: SettingsSection) => {
+        map[entry.section] ??= {}
+        map[entry.section][entry.name] = entry
+        return map
+      }, {})
+
+      commit('settings', sections)
+      payload?.callback?.()
     },
-    fetchFrontSettings ({ commit }) {
-      return axios.get('/settings.json').then(response => {
-        commit('frontSettings', response.data)
-      }, () => {
-        logger.error('Error when fetching front-end configuration (or no customization available)')
-      })
+    async fetchFrontSettings ({ state }) {
+      const response = await axios.get('/front/settings.json')
+        .catch(() => logger.error('Error when fetching front-end configuration (or no customization available)'))
+
+      if (!response) return
+
+      for (const [key, value] of Object.entries(response.data as FrontendSettings)) {
+        if (key === 'defaultServerUrl' && !value) continue
+        state.frontSettings[key as keyof FrontendSettings] = value
+      }
     }
   }
 }