feat: Online modify settings #32

frontend/components.d.ts

@@ -21,6 +21,7 @@ declare module '@vue/runtime-core' {
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
+    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     ALayout: typeof import('ant-design-vue/es')['Layout']
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']

frontend/src/api/settings.ts

@@ -0,0 +1,12 @@
+import http from '@/lib/http'
+
+const settings = {
+    get() {
+        return http.get('/settings')
+    },
+    save(data: any) {
+        return http.post('/settings', data)
+    }
+}
+
+export default settings

frontend/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue

@@ -40,7 +40,7 @@ function save() {
 </script>
 
 <template>
-    <div>
+    <div class="dir-editor-item">
         <div class="input-wrapper">
             <code-editor v-if="directive.directive === If" v-model:content="directive.params"
                          defaultHeight="100px" style="width: 100%;"/>
@@ -71,7 +71,7 @@ function save() {
                         <a-form-item :label="$gettext('Comments')">
                             <a-textarea v-model:value="directive.comments"/>
                         </a-form-item>
-                        <a-form-item :label="$gettext('Include Content')" v-if="directive.directive==='include'">
+                        <a-form-item :label="$gettext('Content')" v-if="directive.directive==='include'">
                             <code-editor v-model:content="content"
                                          defaultHeight="200px" style="width: 100%;"/>
                             <div class="save-btn">
@@ -87,6 +87,10 @@ function save() {
 </template>
 
 <style lang="less" scoped>
+.dir-editor-item {
+    margin: 15px 0;
+}
+
 .directive-editor-extra {
     background-color: #fafafa;
     padding: 10px 20px;
@@ -116,6 +120,5 @@ function save() {
     display: flex;
     gap: 10px;
     align-items: center;
-    margin: 15px 0;
 }
 </style>

frontend/src/views/preference/Preference.vue

@@ -1,22 +1,45 @@
 <script setup lang="ts">
 import {useGettext} from 'vue3-gettext'
-import {reactive} from 'vue'
+import {reactive, ref} from 'vue'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
 import {useSettingsStore} from '@/pinia'
 import {dark_mode} from '@/lib/theme'
+import settings from '@/api/settings'
+import {message} from 'ant-design-vue'
 
 const {$gettext} = useGettext()
 
 const settingsStore = useSettingsStore()
+const theme = ref('auto')
+const data = ref({
+    server: {
+        http_port: 9000,
+        run_mode: 'debug',
+        jwt_secret: '',
+        start_cmd: '',
+        email: '',
+        http_challenge_port: 9180
+    },
+    nginx_log: {
+        access_log_path: '',
+        error_log_path: ''
+    }
+})
 
-const data = reactive({
-    theme: settingsStore.theme
+settings.get().then(r => {
+    data.value = r
 })
 
 function save() {
-    settingsStore.set_theme(data.theme)
-    settingsStore.set_preference_theme(data.theme)
-    dark_mode(data.theme === 'dark')
+    settingsStore.set_theme(theme.value)
+    settingsStore.set_preference_theme(theme.value)
+    dark_mode(theme.value === 'dark')
+    settings.save(data.value).then(r => {
+        data.value = r
+        message.success($gettext('Save successfully'))
+    }).catch(e => {
+        message.error(e?.message ?? $gettext('Server error'))
+    })
 }
 </script>
 
@@ -24,8 +47,23 @@ function save() {
     <a-card :title="$gettext('Preference')">
         <div class="preference-container">
             <a-form layout="vertical">
+                <a-form-item :label="$gettext('HTTP Port')">
+                    <p>{{ data.server.http_port }}</p>
+                </a-form-item>
+                <a-form-item :label="$gettext('Run Mode')">
+                    <p>{{ data.server.run_mode }}</p>
+                </a-form-item>
+                <a-form-item :label="$gettext('Jwt Secret')">
+                    <p>{{ data.server.jwt_secret }}</p>
+                </a-form-item>
+                <a-form-item :label="$gettext('Terminal Start Command')">
+                    <p>{{ data.server.start_cmd }}</p>
+                </a-form-item>
+                <a-form-item :label="$gettext('HTTP Challenge Port')">
+                    <a-input-number v-model:value="data.server.http_challenge_port"/>
+                </a-form-item>
                 <a-form-item :label="$gettext('Theme')">
-                    <a-select v-model:value="data.theme">
+                    <a-select v-model:value="theme">
                         <a-select-option value="auto">
                             {{ $gettext('Auto') }}
                         </a-select-option>
@@ -37,6 +75,12 @@ function save() {
                         </a-select-option>
                     </a-select>
                 </a-form-item>
+                <a-form-item :label="$gettext('Nginx Access Log Path')">
+                    <a-input v-model:value="data.nginx_log.access_log_path"/>
+                </a-form-item>
+                <a-form-item :label="$gettext('Nginx Error Log Path')">
+                    <a-input v-model:value="data.nginx_log.error_log_path"/>
+                </a-form-item>
             </a-form>
         </div>
     </a-card>

server/api/settings.go

@@ -0,0 +1,38 @@
+package api
+
+import (
+	"github.com/0xJacky/Nginx-UI/server/settings"
+	"github.com/gin-gonic/gin"
+	"net/http"
+)
+
+func GetSettings(c *gin.Context) {
+	c.JSON(http.StatusOK, gin.H{
+		"server":    settings.ServerSettings,
+		"nginx_log": settings.NginxLogSettings,
+	})
+}
+
+func SaveSettings(c *gin.Context) {
+	var json struct {
+		Server   settings.Server   `json:"server"`
+		NginxLog settings.NginxLog `json:"nginx_log"`
+	}
+
+	if !BindAndValid(c, &json) {
+		return
+	}
+
+	settings.Conf.Section("server").Key("Email").SetValue(json.Server.Email)
+	settings.Conf.Section("server").Key("HTTPChallengePort").SetValue(json.Server.HTTPChallengePort)
+	settings.Conf.Section("nginx_log").Key("AccessLogPath").SetValue(json.NginxLog.AccessLogPath)
+	settings.Conf.Section("nginx_log").Key("ErrorLogPath").SetValue(json.NginxLog.ErrorLogPath)
+
+	err := settings.Save()
+	if err != nil {
+		ErrHandler(c, err)
+		return
+	}
+
+	GetSettings(c)
+}

server/router/routers.go

@@ -3,7 +3,6 @@ package router
 import (
 	"bufio"
 	"github.com/0xJacky/Nginx-UI/server/api"
-	"github.com/0xJacky/Nginx-UI/server/settings"
 	"github.com/gin-contrib/static"
 	"github.com/gin-gonic/gin"
 	"net/http"
@@ -34,13 +33,6 @@ func InitRouter() *gin.Engine {
 
 	root := r.Group("/api")
 	{
-
-		root.GET("settings", func(c *gin.Context) {
-			c.JSON(http.StatusOK, gin.H{
-				"demo": settings.ServerSettings.Demo,
-			})
-		})
-
 		root.GET("install", api.InstallLockCheck)
 		root.POST("install", api.InstallNginxUI)
 
@@ -96,6 +88,10 @@ func InitRouter() *gin.Engine {
 			// Nginx log
 			g.GET("nginx_log", api.NginxLog)
 			g.POST("nginx_log", api.GetNginxLogPage)
+
+			// Settings
+			g.GET("settings", api.GetSettings)
+			g.POST("settings", api.SaveSettings)
 		}
 	}
 

server/settings/settings.go

@@ -16,22 +16,21 @@ var (
 )
 
 type Server struct {
-	HttpPort          string
-	RunMode           string
-	WebSocketToken    string
-	JwtSecret         string
-	HTTPChallengePort string
-	Email             string
-	Database          string
-	StartCmd          string
-	CADir             string
-	Demo              bool
-	PageSize          int
+	HttpPort          string `json:"http_port"`
+	RunMode           string `json:"run_mode"`
+	JwtSecret         string `json:"jwt_secret"`
+	HTTPChallengePort string `json:"http_challenge_port"`
+	Email             string `json:"email"`
+	Database          string `json:"database"`
+	StartCmd          string `json:"start_cmd"`
+	CADir             string `json:"ca_dir"`
+	Demo              bool   `json:"demo"`
+	PageSize          int    `json:"page_size"`
 }
 
 type NginxLog struct {
-	AccessLogPath string
-	ErrorLogPath  string
+	AccessLogPath string `json:"access_log_path"`
+	ErrorLogPath  string `json:"error_log_path"`
 }
 
 var ServerSettings = &Server{

template/template.go

@@ -0,0 +1,6 @@
+package template
+
+import "embed"
+
+//go:embed *
+var DistFS embed.FS