add ApiHost option for ConfigGenerator (#705)

easytier-web/frontend/src/components/ConfigGenerator.vue

@@ -1,16 +1,32 @@
 <script setup lang="ts">
 import { NetworkTypes } from 'easytier-frontend-lib';
-import { ref } from 'vue';
+import {computed, ref} from 'vue';
 import { Api } from 'easytier-frontend-lib'
+import {AutoComplete, Divider} from "primevue";
+import {getInitialApiHost, cleanAndLoadApiHosts, saveApiHost} from "../modules/api-host"
 
-const defaultApiHost = 'https://config-server.easytier.cn'
+const api = computed<Api.ApiClient>(() => new Api.ApiClient(apiHost.value));
-const api = new Api.ApiClient(defaultApiHost);
+
+
+const apiHost = ref<string>(getInitialApiHost())
+const apiHostSuggestions = ref<Array<string>>([])
+const apiHostSearch = async (event: { query: string }) => {
+  apiHostSuggestions.value = [];
+  let hosts = cleanAndLoadApiHosts();
+  if (event.query) {
+    apiHostSuggestions.value.push(event.query);
+  }
+  hosts.forEach((host) => {
+    apiHostSuggestions.value.push(host.value);
+  });
+}
 
 const newNetworkConfig = ref<NetworkTypes.NetworkConfig>(NetworkTypes.DEFAULT_NETWORK_CONFIG());
 const toml_config = ref<string>("Press 'Run Network' to generate TOML configuration");
 
 const generateConfig = (config: NetworkTypes.NetworkConfig) => {
-    api.generate_config({
+  saveApiHost(apiHost.value)
+  api.value?.generate_config({
         config: config
     }).then((res) => {
         if (res.error) {
@@ -29,6 +45,14 @@ const generateConfig = (config: NetworkTypes.NetworkConfig) => {
     <div class="flex items-center justify-center m-5">
         <div class="sm:block md:flex w-full">
             <div class="sm:w-full md:w-1/2 p-4">
+                <div class="flex flex-col">
+                  <div class="w-11/12 self-center ">
+                    <label>ApiHost</label>
+                    <AutoComplete id="api-host" v-model="apiHost" dropdown :suggestions="apiHostSuggestions"
+                                  @complete="apiHostSearch" class="w-full" />
+                    <Divider />
+                  </div>
+                </div>
                 <Config :cur-network="newNetworkConfig" @run-network="generateConfig" />
             </div>
             <div class="sm:w-full md:w-1/2 p-4 bg-gray-100">

easytier-web/frontend/src/components/Login.vue

@@ -4,6 +4,7 @@ import { Card, InputText, Password, Button, AutoComplete } from 'primevue';
 import { useRouter } from 'vue-router';
 import { useToast } from 'primevue/usetoast';
 import { Api } from 'easytier-frontend-lib';
+import {getInitialApiHost, cleanAndLoadApiHosts, saveApiHost} from "../modules/api-host"
 
 defineProps<{
     isRegistering: boolean;
@@ -20,56 +21,6 @@ const registerPassword = ref('');
 const captcha = ref('');
 const captchaSrc = computed(() => api.value.captcha_url());
 
-interface ApiHost {
-    value: string;
-    usedAt: number;
-}
-
-const isValidHttpUrl = (s: string): boolean => {
-    let url;
-
-    try {
-        url = new URL(s);
-    } catch (_) {
-        return false;
-    }
-
-    return url.protocol === "http:" || url.protocol === "https:";
-}
-
-const cleanAndLoadApiHosts = (): Array<ApiHost> => {
-    const maxHosts = 10;
-    const apiHosts = localStorage.getItem('apiHosts');
-    if (apiHosts) {
-        const hosts: Array<ApiHost> = JSON.parse(apiHosts);
-        // sort by usedAt
-        hosts.sort((a, b) => b.usedAt - a.usedAt);
-
-        // only keep the first 10
-        if (hosts.length > maxHosts) {
-            hosts.splice(maxHosts);
-        }
-
-        localStorage.setItem('apiHosts', JSON.stringify(hosts));
-        return hosts;
-    } else {
-        return [];
-    }
-};
-
-const saveApiHost = (host: string) => {
-    console.log('Save API Host:', host);
-    if (!isValidHttpUrl(host)) {
-        console.error('Invalid API Host:', host);
-        return;
-    }
-
-    let hosts = cleanAndLoadApiHosts();
-    const newHost: ApiHost = { value: host, usedAt: Date.now() };
-    hosts = hosts.filter((h) => h.value !== host);
-    hosts.push(newHost);
-    localStorage.setItem('apiHosts', JSON.stringify(hosts));
-};
 
 const onSubmit = async () => {
     // Add your login logic here
@@ -100,16 +51,6 @@ const onRegister = async () => {
     }
 };
 
-const getInitialApiHost = (): string => {
-    const hosts = cleanAndLoadApiHosts();
-    if (hosts.length > 0) {
-        return hosts[0].value;
-    } else {
-        return defaultApiHost;
-    }
-};
-
-const defaultApiHost = 'https://config-server.easytier.cn'
 const apiHost = ref<string>(getInitialApiHost())
 const apiHostSuggestions = ref<Array<string>>([])
 const apiHostSearch = async (event: { query: string }) => {
@@ -124,10 +65,7 @@ const apiHostSearch = async (event: { query: string }) => {
 }
 
 onMounted(() => {
-    let hosts = cleanAndLoadApiHosts();
+
-    if (hosts.length === 0) {
-        saveApiHost(defaultApiHost);
-    }
 });
 
 </script>

easytier-web/frontend/src/modules/api-host.ts

@@ -0,0 +1,64 @@
+const defaultApiHost = 'https://config-server.easytier.cn';
+
+interface ApiHost {
+    value: string;
+    usedAt: number;
+}
+
+const isValidHttpUrl = (s: string): boolean => {
+    let url;
+
+    try {
+        url = new URL(s);
+    } catch (_) {
+        return false;
+    }
+
+    return url.protocol === "http:" || url.protocol === "https:";
+};
+
+const cleanAndLoadApiHosts = (): Array<ApiHost> => {
+    const maxHosts = 10;
+    const apiHosts = localStorage.getItem('apiHosts');
+    if (apiHosts) {
+        const hosts: Array<ApiHost> = JSON.parse(apiHosts);
+        // sort by usedAt
+        hosts.sort((a, b) => b.usedAt - a.usedAt);
+
+        // only keep the first 10
+        if (hosts.length > maxHosts) {
+            hosts.splice(maxHosts);
+        }
+
+        localStorage.setItem('apiHosts', JSON.stringify(hosts));
+        return hosts;
+    } else {
+        return [];
+    }
+};
+
+const saveApiHost = (host: string) => {
+    console.log('Save API Host:', host);
+    if (!isValidHttpUrl(host)) {
+        console.error('Invalid API Host:', host);
+        return;
+    }
+
+    let hosts = cleanAndLoadApiHosts();
+    const newHost: ApiHost = {value: host, usedAt: Date.now()};
+    hosts = hosts.filter((h) => h.value !== host);
+    hosts.push(newHost);
+    localStorage.setItem('apiHosts', JSON.stringify(hosts));
+};
+
+const getInitialApiHost = (): string => {
+    const hosts = cleanAndLoadApiHosts();
+    if (hosts.length > 0) {
+        return hosts[0].value;
+    } else {
+        saveApiHost(defaultApiHost)
+        return defaultApiHost;
+    }
+};
+
+export {getInitialApiHost, cleanAndLoadApiHosts, saveApiHost}