init users on create inbound #411

frontend/src/components/Users.vue

@@ -2,34 +2,41 @@
   <v-card :subtitle="$t('pages.clients')">
     <v-row>
       <v-col cols="12" sm="6" md="4">
-        <v-switch 
-          v-model="hasUser"
-          @change="() => {inbound.users = hasUser? [] : undefined}"
-          color="primary"
-          :label="$t('in.clients')"
-          hide-details></v-switch>
+        <v-select v-model="data.model" :items="initUsersModels" @update:model-value="data.values = []" hide-details></v-select>
+      </v-col>
+      <v-col cols="12" sm="6" md="4" v-if="data.model == 'group'">
+        <v-select v-model="data.values" multiple chips :items="groupNames" :label="$t('client.group')" hide-details></v-select>
+      </v-col>
+      <v-col cols="12" sm="8" v-if="data.model == 'client'">
+        <v-select v-model="data.values" multiple chips :items="clientNames" :label="$t('pages.clients')" hide-details></v-select>
       </v-col>
     </v-row>
   </v-card>
 </template>
 
 <script lang="ts">
+import { i18n } from '@/locales';
+
 
 export default {
-  props: ['inbound'],
+  props: ['data', 'clients'],
   data() {
     return {
-      hasUser: false,
+      initUsersModels: [
+        { title: i18n.global.t('none'), value: 'none' },
+        { title: i18n.global.t('all'), value: 'all' },
+        { title: i18n.global.t('client.group'), value: 'group' },
+        { title: i18n.global.t('pages.clients'), value: 'client' },
+      ],
     }
   },
   computed: {
-    cardTitle() {
-      this.hasUser = Object.hasOwn(this.$props.inbound,'users')
-      return this.$props.inbound?.type.toUpperCase()
+    clientNames() {
+      return this.$props.clients.map((c:any) => { return { title: c.name, value: c.id } } )
+    },
+    groupNames() {
+      return Array.from(new Set(this.$props.clients.map((c:any) => c.group)))
     },
-  },
-  mounted() {
-    this.hasUser = Object.hasOwn(this.$props.inbound,'users')
   }
 }
 </script>

frontend/src/layouts/modals/Inbound.vue

@@ -50,7 +50,7 @@
               <Tun v-if="inbound.type == inTypes.Tun" :data="inbound" />
               <TProxy v-if="inbound.type == inTypes.TProxy" :inbound="inbound" />
               <Transport v-if="Object.hasOwn(inbound,'transport')" :data="inbound" />
-              <Users v-if="HasOptionalUser.includes(inbound.type)" :inbound="inbound" />
+              <Users v-if="hasUser" :clients="clients" :data="initUsers" />
               <InTls v-if="HasTls.includes(inbound.type)"  :inbound="inbound" :tlsConfigs="tlsConfigs" :tls_id="inbound.tls_id" />
               <Multiplex v-if="Object.hasOwn(inbound,'multiplex')" direction="in" :data="inbound" />
             </v-window-item>
@@ -95,7 +95,7 @@
 </template>
 
 <script lang="ts">
-import { InTypes, createInbound, Addr } from '@/types/inbounds'
+import { InTypes, createInbound, Addr, inboundWithUsers, ShadowTLS } from '@/types/inbounds'
 import RandomUtil from '@/plugins/randomUtil'
 
 import Listen from '@/components/Listen.vue'
@@ -125,7 +125,11 @@ export default {
       loading: false,
       side: "s",
       inTypes: InTypes,
-      HasOptionalUser: [InTypes.Mixed,InTypes.SOCKS,InTypes.HTTP,InTypes.Shadowsocks],
+      inboundWithUsers: inboundWithUsers,
+      initUsers: {
+        model: 'none',
+        values: <any>[],
+      },
       HasInData: [
         InTypes.SOCKS,
         InTypes.HTTP,
@@ -179,6 +183,10 @@ export default {
         this.loading = false
       }
       this.side = "s"
+      this.initUsers = {
+        model: 'none',
+        values: [],
+      }
     },
     changeType() {
       if (!this.inbound.listen_port) this.inbound.listen_port = RandomUtil.randomIntRange(10000, 60000)
@@ -205,7 +213,22 @@ export default {
     },
     saveChanges() {
       this.loading = true
-      this.$emit('save', this.inbound)
+      if (this.hasUser) {
+        let clientIds = []
+        switch (this.initUsers.model) {
+          case 'all':
+            clientIds = this.clients.map((c:any) => c.id)
+            break
+          case 'group':
+            clientIds = this.clients.filter((c:any) => this.initUsers.values.includes(c.group)).map((c:any) => c.id)
+            break
+          case 'user':
+            clientIds = this.initUsers.values
+        }
+        this.$emit('save', this.inbound, clientIds.length > 0 ? clientIds : undefined)
+      } else {
+        this.$emit('save', this.inbound)
+      }
       this.loading = false
     },
   },
@@ -217,6 +240,15 @@ export default {
       if (this.OnlyTLS.includes(this.inbound.type) && this.inbound.tls_id == 0) return false
       return true
     },
+    clients() {
+      return Data().clients?? []
+    },
+    hasUser() {
+      if (this.$props.id > 0) return false
+      if (!inboundWithUsers.includes(this.inbound.type)) return false
+      if (this.inbound.type == InTypes.ShadowTLS && (<ShadowTLS>this.inbound).version < 3 ) return false
+      return true
+    }
   },
   watch: {
     visible(newValue) {

frontend/src/store/modules/data.ts

@@ -64,10 +64,12 @@ const Data = defineStore('Data', {
       }
       return <Client>{}
     },
+    async save (object: string, action: string, data: any, initUsers?: number[]): Promise<boolean> {
       let postData = {
         object: object,
         action: action,
         data: JSON.stringify(data, null, 2),
+        initUsers: initUsers?.join(',') ?? undefined
       }
       const msg = await HttpUtils.post('api/save', postData)
       if (msg.success) {