feat: config templates #53, #34, #33

Author: 0xJacky

.air.toml

@@ -13,7 +13,7 @@ bin = "tmp/main"
 # Customize binary.
 full_bin = "APP_ENV=dev APP_USER=air ./tmp/main"
 # Watch these filename extensions.
-include_ext = ["go", "tpl", "tmpl", "html"]
+include_ext = ["go", "tpl", "tmpl", "html", "conf"]
 # Ignore these filename extensions or directories.
 exclude_dir = ["assets", "tmp", "vendor", "frontend/node_modules", "upload"]
 # Watch these directories if you specified.

frontend/components.d.ts

@@ -28,6 +28,8 @@ declare module '@vue/runtime-core' {
     ALayoutFooter: typeof import('ant-design-vue/es')['LayoutFooter']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
+    AList: typeof import('ant-design-vue/es')['List']
+    AListItem: typeof import('ant-design-vue/es')['ListItem']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']

frontend/src/api/template.ts

@@ -0,0 +1,25 @@
+import Curd from '@/api/curd'
+import http from '@/lib/http'
+
+class Template extends Curd {
+    get_config_list() {
+        return http.get('template/configs')
+    }
+
+    get_block_list() {
+        return http.get('template/blocks')
+    }
+
+    get_config(name: string) {
+        return http.get('template/config/' + name)
+    }
+
+    get_block(name: string) {
+        return http.get('template/block/' + name)
+    }
+
+}
+
+const template = new Template('/template')
+
+export default template

frontend/src/components/SetLanguage/SetLanguage.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import gettext from '@/gettext'
 
-
 import {ref, watch} from 'vue'
 
 import {useSettingsStore} from '@/pinia'

frontend/src/layouts/BaseLayout.vue

@@ -39,7 +39,7 @@ const lang = computed(() => {
 
 </script>
 <template>
-    <a-config-provider :locale="lang">
+    <a-config-provider :locale="lang" :autoInsertSpaceInButton="false">
         <a-layout style="min-height: 100%;">
             <div class="drawer-sidebar">
                 <a-drawer

frontend/src/views/domain/DomainAdd.vue

@@ -8,6 +8,7 @@ import ngx from '@/api/ngx'
 import {computed, reactive, ref} from 'vue'
 import {message} from 'ant-design-vue'
 import {useRouter} from 'vue-router'
+import template from '@/api/template'
 
 const {$gettext, interpolate} = useGettext()
 
@@ -39,7 +40,7 @@ function init() {
 
 function save() {
     ngx.build_config(ngx_config).then(r => {
-        domain.save(config.name, {content: r.content, enabled: true}).then(() => {
+        domain.save(config.name, {name: config.name, content: r.content, enabled: true}).then(() => {
             message.success($gettext('Saved successfully'))
 
             domain.enable(config.name).then(() => {
@@ -89,15 +90,13 @@ const has_server_name = computed(() => {
                 <a-step :title="$gettext('Configure SSL')"/>
                 <a-step :title="$gettext('Finished')"/>
             </a-steps>
-
             <template v-if="current_step===0">
                 <a-form layout="vertical">
                     <a-form-item :label="$gettext('Configuration Name')">
                         <a-input v-model:value="config.name"/>
                     </a-form-item>
                 </a-form>
 
-
                 <directive-editor :ngx_directives="ngx_config.servers[0].directives"/>
                 <br/>
                 <location-editor :locations="ngx_config.servers[0].locations"/>

frontend/src/views/domain/cert/IssueCert.vue

@@ -166,6 +166,7 @@ const modalClosable = ref(false)
     <a-modal
         :title="$gettext('Obtaining certificate')"
         v-model:visible="modalVisible"
+        :mask-closable="modalClosable"
         :footer="null" :closable="modalClosable" force-render>
         <a-progress
             :stroke-color="progressStrokeColor"

frontend/src/views/domain/ngx_conf/ConfigTemplate.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import {useGettext} from 'vue3-gettext'
+import template from '@/api/template'
+import {computed, ref} from 'vue'
+import {storeToRefs} from 'pinia'
+import {useSettingsStore} from '@/pinia'
+import Template from '@/views/template/Template.vue'
+import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.vue'
+import LocationEditor from '@/views/domain/ngx_conf/LocationEditor.vue'
+import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
+
+const {$gettext} = useGettext()
+const {language} = storeToRefs(useSettingsStore())
+const props = defineProps(['ngx_config', 'current_server_index'])
+
+const blocks = ref([])
+const data: any = ref({})
+const visible = ref(false)
+
+function get_block_list() {
+    template.get_block_list().then(r => {
+        blocks.value = r.data
+    })
+}
+
+get_block_list()
+
+function view(name: string) {
+    visible.value = true
+    template.get_block(name).then(r => {
+        data.value = r
+    })
+}
+
+const trans_description = computed(() => {
+    return (item: any) => item.description?.[language.value] ?? item.description?.en ?? ''
+})
+
+async function add() {
+
+    if (data.value.custom) {
+        props.ngx_config.custom += '\n' + data.value.custom
+    }
+
+    props.ngx_config.custom = props.ngx_config.custom.trim()
+
+    if (data.value.locations) {
+        props.ngx_config.servers[props.current_server_index].locations.push(...data.value.locations)
+    }
+
+    if (data.value.directives) {
+        props.ngx_config.servers[props.current_server_index].directives.push(...data.value.directives)
+    }
+
+    visible.value = false
+}
+</script>
+
+<template>
+    <div>
+        <h2 v-translate>Config Templates</h2>
+        <div class="config-list-wrapper">
+            <a-list
+                :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 2, xl: 2, xxl: 2, xxxl: 2 }"
+                :data-source="blocks"
+            >
+                <template #renderItem="{ item }">
+                    <a-list-item>
+                        <a-card size="small" :title="item.name">
+                            <template #extra>
+                                <a-button type="link" @click="view(item.filename)">View</a-button>
+                            </template>
+                            <p>{{ $gettext('Author') }}: {{ item.author }}</p>
+                            <p>{{ $gettext('Description') }}: {{ trans_description(item) }}</p>
+                        </a-card>
+                    </a-list-item>
+                </template>
+            </a-list>
+        </div>
+        <a-modal
+            :title="data.name"
+            v-model:visible="visible"
+            :mask="false"
+            :ok-text="$gettext('Add')"
+            @ok="add"
+        >
+            <p>{{ $gettext('Author') }}: {{ data.author }}</p>
+            <p>{{ $gettext('Description') }}: {{ trans_description(data) }}</p>
+            <template v-if="data.custom">
+                <h2>{{ $gettext('Custom') }}</h2>
+                <code-editor v-model:content="data.custom" default-height="150px"/>
+            </template>
+            <directive-editor v-if="data.directives" :ngx_directives="data.directives" :readonly="true"/>
+            <br/>
+            <location-editor v-if="data.locations" :locations="data.locations" :readonly="true"/>
+        </a-modal>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.config-list-wrapper {
+    max-height: 200px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+</style>

frontend/src/views/domain/ngx_conf/LocationEditor.vue

@@ -7,7 +7,7 @@ import draggable from 'vuedraggable'
 
 const {$gettext} = useGettext()
 
-const props = defineProps(['locations'])
+const props = defineProps(['locations', 'readonly'])
 
 let location = reactive({
     comments: '',
@@ -52,7 +52,7 @@ function remove(index: number) {
                     <HolderOutlined/>
                     {{ $gettext('Location') }}
                 </template>
-                <template #extra>
+                <template #extra v-if="!readonly">
                     <a-popconfirm @confirm="remove(index)"
                                   :title="$gettext('Are you sure you want to remove this location?')"
                                   :ok-text="$gettext('Yes')"
@@ -94,7 +94,7 @@ function remove(index: number) {
         </a-form>
     </a-modal>
 
-    <div>
+    <div v-if="!readonly">
         <a-button block @click="add">{{ $gettext('Add Location') }}</a-button>
     </div>
 </template>

frontend/src/views/domain/ngx_conf/NgxConfigEditor.vue

@@ -6,6 +6,8 @@ import {useRoute, useRouter} from 'vue-router'
 import {useGettext} from 'vue3-gettext'
 import Cert from '@/views/domain/cert/Cert.vue'
 import LogEntry from '@/views/domain/ngx_conf/LogEntry.vue'
+import ConfigTemplate from '@/views/domain/ngx_conf/ConfigTemplate.vue'
+import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 
 const {$gettext} = useGettext()
 
@@ -151,6 +153,9 @@ watch(current_server_index, () => {
             <a-switch @change="change_tls"/>
         </a-form-item>
 
+        <h2>{{ $gettext('Custom') }}</h2>
+        <code-editor v-model:content="ngx_config.custom" default-height="150px"/>
+
         <a-tabs v-model:activeKey="current_server_index">
             <a-tab-pane :tab="'Server '+(k+1)" v-for="(v,k) in props.ngx_config.servers" :key="k">
                 <log-entry
@@ -175,9 +180,11 @@ watch(current_server_index, () => {
                         <h3 v-translate>Comments</h3>
                         <a-textarea v-model:value="v.comments" :bordered="false"/>
                     </template>
-
                     <directive-editor :ngx_directives="v.directives"/>
                     <br/>
+                    <config-template :ngx_config="ngx_config"
+                                     :current_server_index="current_server_index"/>
+                    <br/>
                     <location-editor :locations="v.locations"/>
                 </div>