Added the ability to change the server

components/serverChanger.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <p class="font-bold text-xl text-center">Server</p>
+    <div class=" w-full mt-4">
+      <input type="text" autocomplete="server" v-model="newServerUrl" class="input input-bordered w-full join-item" />
+    </div>
+
+    <button class="btn w-full btn-warning mt-8" @click="changeServer(newServerUrl)">Change Server</button>
+  </div>
+</template>
+
+<script setup>
+import {useServer} from "~/composables/useServer";
+
+const server = useServer;
+
+const newServerUrl = ref(server.getUrl())
+
+const emit = defineEmits(['serverChanged'])
+
+const changeServer = (newUrl) => {
+  server.setUrl(newUrl);
+
+  emit('serverChanged');
+}
+
+</script>
+
+<style scoped>
+
+</style>

composables/useApi.ts

@@ -1,3 +1,5 @@
+import {useServer} from "~/composables/useServer";
+
 export const useApi = function <T> (request : any, opts : any = {}) {
     const config = useRuntimeConfig()
     const auth = useNuxtApp().$auth.state();
@@ -7,5 +9,5 @@ export const useApi = function <T> (request : any, opts : any = {}) {
         opts.headers.Authorization = 'Bearer ' + auth.token;
     }
 
-    return useFetch<T>(request, { baseURL: config.public.apiURL, ...opts })
+    return useFetch<T>(request, { baseURL: useServer.getUrl(), ...opts })
 }

composables/useApiLoader.ts

@@ -18,6 +18,7 @@ import {AccumulationsApi} from "~/libs/api/accumulations/AccumulationsApi";
 import {ReportsApi} from "~/libs/api/reports/ReportsApi";
 import {ca} from "date-fns/locale";
 import {useStorage} from "@vueuse/core";
+import {useServer} from "~/composables/useServer";
 
 export const useApiLoader = new class ApiLoader {
     private readonly serverConfigs: ConfigManager;
@@ -98,13 +99,10 @@ export const useApiLoader = new class ApiLoader {
     }
 
     public connectWebsocket() : void {
-        const config = useRuntimeConfig()
         const auth = useNuxtApp().$auth.state();
 
-        this.websocketClient = new WebSocket(config.public.apiURL
-            .replace("https://", "wss://")
-            .replace("http://", "ws://") +
-            "websockets/events"
+        this.websocketClient = new WebSocket(
+            useServer.getWebSocketUrl() + "websockets/events"
         );
 
         this.websocketClient.onmessage = (event) => {

composables/useLazyApi.ts

@@ -1,4 +1,5 @@
 import {useLazyFetch} from "#app";
+import {useServer} from "~/composables/useServer";
 
 export const useLazyApi = function <T> (request : any, opts : any = {}) {
     const config = useRuntimeConfig()
@@ -9,5 +10,5 @@ export const useLazyApi = function <T> (request : any, opts : any = {}) {
         opts.headers.authorization = 'Bearer ' + auth.token;
     }
 
-    return useLazyFetch<T>(request, { baseURL: config.public.baseURL, ...opts })
+    return useLazyFetch<T>(request, { baseURL: useServer.getUrl(), ...opts })
 }

composables/useServer.ts

@@ -0,0 +1,31 @@
+import {useStorage} from "@vueuse/core";
+
+export const useServer = new class FinWaveServer {
+    public getUrl() : string {
+        const configValue = this.getConfigUrl();
+
+        if (this.allowCustomUrl())
+            return useStorage("server_url", configValue).value;
+
+        return configValue;
+    }
+
+    public getWebSocketUrl() : string {
+        return this.getUrl()
+            .replace("https://", "wss://")
+            .replace("http://", "ws://");
+    }
+
+    public allowCustomUrl() : boolean {
+        return useRuntimeConfig().public.allowCustomApiURL;
+    }
+
+    public getConfigUrl() : string {
+        return useRuntimeConfig().public.apiURL;
+    }
+
+    public setUrl(url : string) : void {
+        if (this.allowCustomUrl())
+            useStorage("server_url", "").value = url;
+    }
+}

libs/api/reports/ReportsApi.ts

@@ -1,6 +1,7 @@
 import {AbstractApi} from "~/libs/api/AbstractApi";
 import {Ref} from "vue";
 import {TransactionsFilter} from "~/libs/api/transactions/TransactionsFilter";
+import {useServer} from "~/composables/useServer";
 
 export class ReportsApi extends AbstractApi {
     private notifyListeners : Array<Function> = new Array<Function>();
@@ -54,6 +55,6 @@ export class ReportsApi extends AbstractApi {
     public getDownloadURL(token: string) : string {
         const config = useRuntimeConfig();
 
-        return config.public.apiURL + "files/reports/get?token=" + token;
+        return useServer.getUrl() + "files/reports/get?token=" + token;
     }
 }

middleware/auth.ts

@@ -3,7 +3,7 @@ import {navigateTo} from "#app";
 export default defineNuxtRouteMiddleware((to, from) => {
     const {$serverConfigs, $auth} = useNuxtApp();
 
-    const serverAvailable = $serverConfigs.serverAvailable;
+    const serverAvailable = $serverConfigs ? $serverConfigs.serverAvailable : false;
 
     if (!serverAvailable)
         return navigateTo("/serverNotAvailable");

middleware/serverAvailable.ts

@@ -0,0 +1,10 @@
+import {navigateTo} from "#app";
+
+export default defineNuxtRouteMiddleware((to, from) => {
+    const {$serverConfigs} = useNuxtApp();
+
+    const serverAvailable = $serverConfigs ? $serverConfigs.serverAvailable : false;
+
+    if (!serverAvailable)
+        return navigateTo("/serverNotAvailable");
+})

middleware/serverNotAvailable.ts

@@ -0,0 +1,10 @@
+import {navigateTo} from "#app";
+
+export default defineNuxtRouteMiddleware((to, from) => {
+    const {$serverConfigs} = useNuxtApp();
+
+    const serverAvailable = $serverConfigs ? $serverConfigs.serverAvailable : false;
+
+    if (serverAvailable)
+        return navigateTo("/");
+})

nuxt.config.ts

@@ -65,6 +65,7 @@ const config: NuxtConfig = {
     runtimeConfig: {
         public: {
             apiURL: process.env.NUXT_PUBLIC_API_URL || 'http://localhost:8080/',
+            allowCustomApiURL: process.env.NUXT_ALLOW_CUSTOM_API_URL || false,
         },
     }
 }

pages/login.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="hero min-h-screen">
-    <div class="hero-content w-full">
+    <div class="hero-content w-full flex-col">
+      <server-changer v-if="server.allowCustomUrl()" class="panel lg:w-1/3" @serverChanged="reloadPage"/>
+
       <div class="panel lg:w-1/3">
         <p class="font-bold text-xl text-center">{{ $t('loginPage.title') }}</p>
 
@@ -54,9 +56,11 @@
 
 <script setup>
 import {useApiLoader} from "~/composables/useApiLoader";
+import {useServer} from "~/composables/useServer";
 
 definePageMeta({
   middleware: [
+    "server-available",
     () => {
       if (useNuxtApp().$auth.state().authed.value)
         return navigateTo("/");
@@ -74,9 +78,15 @@ const errorMessage = ref("");
 const loading = ref(false);
 
 const { $auth, $serverConfigs, $toastsManager } = useNuxtApp();
+const server = useServer;
+
 const { t, locale } = useI18n();
 const configs = $serverConfigs.configs.users;
 
+const reloadPage = () => {
+  window.location.reload();
+}
+
 const singIn = async () => {
   if (login.value === "" || login.value == null) {
     errorMessage.value = "loginPage.errors.needUsername";

pages/register.vue

@@ -65,6 +65,7 @@
 <script setup>
 definePageMeta({
   middleware: [
+    "server-available",
     () => {
     const {$serverConfigs, $auth} = useNuxtApp()
 

pages/serverNotAvailable.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="hero min-h-screen bg-base-200">
-    <div class="hero-content text-center">
-      <div class="max-w-md">
+    <div class="hero-content text-center w-full flex-col">
+      <div class="max-w-md border-error border-2 rounded-2xl p-4">
         <h1 class="text-5xl font-bold text-error">
           {{ $t("errorPage.title") }}
         </h1>
@@ -10,14 +10,29 @@
         </p>
         <a href="/" class="btn btn-neutral">{{ $t("errorPage.tryAgain") }}</a>
       </div>
+
+      <server-changer v-if="server.allowCustomUrl()" class="panel lg:w-1/3" @serverChanged="reloadPage"/>
     </div>
   </div>
 </template>
 
 <script setup>
+import {useServer} from "~/composables/useServer";
+
 definePageMeta({
+  middleware: [
+    "server-not-available"
+  ],
   layout: false,
 });
+
+const server = useServer;
+
+const reloadPage = () => {
+  window.location.reload();
+}
+
+
 </script>
 
 <style scoped>

plugins/2.api.ts

@@ -1,9 +1,14 @@
 import {useApiLoader} from "#imports";
+import {ca} from "date-fns/locale";
 
 export default defineNuxtPlugin(async nuxtApp => {
-    await useApiLoader.fetch();
+    try {
+        await useApiLoader.fetch();
 
-    useApiLoader.connectWebsocket();
+        useApiLoader.connectWebsocket();
+    }catch (e) {
+        console.log(e)
+    }
 
     return useApiLoader.getProvider();
 })