Added client isolation settings. Fixed mobile UI

templates/client_portal.html

@@ -9,13 +9,13 @@
     * { box-sizing: border-box; }
     [x-cloak] { display: none !important; }
     body { margin: 0; min-height: 100vh; background: #edf3ef; color: #18232d; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
-    button, input { font: inherit; }
+    button, input, select { font: inherit; }
     button { min-height: 40px; border: 1px solid #18342f; border-radius: 8px; padding: .55rem .85rem; background: #18342f; color: #fff; cursor: pointer; font-weight: 750; }
     button.secondary { background: #fff; color: #18342f; border-color: #c7d4ce; }
     button.ghost { background: transparent; color: #42515d; border-color: transparent; }
     button.danger { background: #a8312d; border-color: #a8312d; color: #fff; }
     button:disabled { opacity: .48; cursor: default; }
-    input { width: 100%; min-height: 42px; border: 1px solid #c7d4ce; border-radius: 8px; padding: .55rem .7rem; color: #18232d; background: #fff; }
+    input, select { width: 100%; min-height: 42px; border: 1px solid #c7d4ce; border-radius: 8px; padding: .55rem .7rem; color: #18232d; background: #fff; }
     code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; background: #f1f4f2; color: #26313a; padding: .18rem .4rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; }
     .portal { min-height: 100vh; display: flex; flex-direction: column; }
     .topbar { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.94); border-bottom: 1px solid #d6dfda; backdrop-filter: blur(12px); }
@@ -62,7 +62,8 @@
     .server-status-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #18232d; font-size: .86rem; font-weight: 850; }
     .server-status-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #69777f; font-size: .74rem; font-weight: 750; }
     .server-status-muted { color: #69777f; font-size: .82rem; }
-    .create { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem; padding: 0 1rem 1rem; align-items: end; }
+    .create { display: flex; justify-content: flex-end; padding: 0 1rem 1rem; }
+    .create-plus { width: 44px; min-width: 44px; height: 44px; padding: 0; font-size: 1.55rem; line-height: 1; }
     .field { display: grid; gap: .32rem; min-width: 0; }
     .field label { color: #34424b; font-size: .83rem; font-weight: 800; }
     .notice { border: 1px solid #d6dfda; border-left-width: 4px; border-radius: 8px; background: #fff; padding: .75rem .85rem; display: grid; gap: .25rem; box-shadow: 0 8px 24px rgba(24, 52, 47, .06); }
@@ -87,7 +88,7 @@
     .meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
     .meta-item { min-width: 0; display: grid; gap: .24rem; }
     .meta-label { color: #69777f; font-size: .77rem; font-weight: 800; }
-    .key-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5rem; align-items: center; }
+    .key-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .5rem; align-items: center; }
     .key-actions .server-button { justify-self: stretch; }
     .key-updated { color: #69777f; font-size: .82rem; overflow-wrap: anywhere; }
     .backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 1rem; background: rgba(16, 28, 36, .42); }
@@ -115,12 +116,15 @@
     .modal-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
     .telegram-sheet { width: min(480px, 100%); }
     .telegram-copy { color: #53616c; line-height: 1.45; margin: 0; }
+    .form-stack { display: grid; gap: .8rem; }
+    .field-hint { margin: 0; color: #69777f; font-size: .82rem; line-height: 1.4; }
+    .warning-box { border: 1px solid #e5c76c; border-radius: 8px; background: #fff8df; color: #5f4911; padding: .7rem; font-size: .86rem; line-height: 1.4; }
     .guide-list { margin: 0; padding-left: 1.2rem; color: #34424b; display: grid; gap: .45rem; line-height: 1.4; }
     .guide-list a { color: #18342f; font-weight: 850; }
     .guide-list a.disabled { color: #69777f; pointer-events: none; text-decoration: none; }
     .secret-box { display: grid; gap: .35rem; border: 1px solid #d6dfda; border-radius: 8px; background: #f7faf8; padding: .7rem; }
     .secret-box code { display: block; padding: .55rem .65rem; font-size: .92rem; white-space: normal; overflow-wrap: anywhere; }
-    @media (max-width: 720px) {
+    @media (max-width: 900px) {
         .topbar-inner { align-items: flex-start; flex-direction: column; }
         .top-actions { width: 100%; justify-content: space-between; }
         .user-pill { max-width: 100%; }
@@ -219,11 +223,7 @@
                 </template>
             </div>
             <div class="create">
-                <div class="field">
-                    <label for="client-name">{{ t.configs_new_key }}</label>
-                    <input id="client-name" x-model="newName" @keydown.enter.prevent="createClient()" placeholder="{{ t.configs_name_placeholder }}">
-                </div>
-                <button type="button" @click="createClient()" :disabled="busy">{{ t.configs_create }}</button>
+                <button type="button" class="create-plus" @click="openCreateClient()" :disabled="busy" title="{{ t.configs_new_key }}" aria-label="{{ t.configs_new_key }}">+</button>
             </div>
         </section>
 
@@ -265,10 +265,15 @@
                                 <span class="meta-label">{{ t.configs_public_key }}</span>
                                 <code x-text="shortKey(client.public_key)"></code>
                             </div>
+                            <div class="meta-item">
+                                <span class="meta-label">{{ t.configs_group }}</span>
+                                <code x-text="client.group_name || '{{ t.configs_group_isolated }}'"></code>
+                            </div>
                         </div>
 
                         <div class="key-actions">
                             <button type="button" class="server-button" @click="openServers(client)" :disabled="busy || !client.enabled">{{ t.configs_choose_server }}</button>
+                            <button type="button" class="secondary" @click="openGroupEditor(client)" :disabled="busy">{{ t.configs_change_group }}</button>
                             <button type="button" class="secondary" @click="setEnabled(client, !client.enabled)" :disabled="busy" x-text="client.enabled ? '{{ t.configs_disable }}' : '{{ t.configs_enable }}'"></button>
                             <button type="button" class="danger" @click="deleteClient(client)" :disabled="busy">{{ t.users_delete }}</button>
                         </div>
@@ -280,6 +285,45 @@
         </template>
     </main>
 
+    <template x-if="clientModal">
+        <div class="backdrop" x-cloak @click.self="closeClientModal()">
+            <section class="sheet">
+                <div class="sheet-head">
+                    <div class="sheet-title">
+                        <h2 x-text="clientModal.mode === 'create' ? '{{ t.configs_new_key }}' : '{{ t.configs_change_group }}'"></h2>
+                        <span x-show="clientModal.client" x-text="clientModal.client ? clientModal.client.name : ''"></span>
+                    </div>
+                    <button type="button" class="ghost" @click="closeClientModal()">{{ t.admin_close }}</button>
+                </div>
+                <div class="form-stack">
+                    <template x-if="clientModal.mode === 'create'">
+                        <div class="field">
+                            <label for="client-modal-name">{{ t.configs_name }}</label>
+                            <input id="client-modal-name" x-model="clientModal.name" placeholder="{{ t.configs_name_placeholder }}">
+                        </div>
+                    </template>
+                    <div class="field">
+                        <label for="client-modal-group">{{ t.configs_group }}</label>
+                        <input id="client-modal-group" x-model="clientModal.groupName" list="vpn-client-groups" placeholder="{{ t.configs_group_placeholder }}">
+                        <datalist id="vpn-client-groups">
+                            <template x-for="group in groups" :key="group">
+                                <option :value="group"></option>
+                            </template>
+                        </datalist>
+                        <p class="field-hint">{{ t.configs_group_hint }}</p>
+                    </div>
+                    <template x-if="clientModal.mode === 'group'">
+                        <div class="warning-box">{{ t.configs_group_rotation_warning }}</div>
+                    </template>
+                </div>
+                <div class="modal-actions">
+                    <button type="button" class="secondary" @click="closeClientModal()">{{ t.admin_close }}</button>
+                    <button type="button" @click="clientModal.mode === 'create' ? createClient() : changeClientGroup()" :disabled="busy">{{ t.settings_save }}</button>
+                </div>
+            </section>
+        </div>
+    </template>
+
     <template x-if="serverModal">
         <div class="backdrop" x-cloak @click.self="closeServers()">
             <section class="sheet">
@@ -433,7 +477,8 @@
 function clientPortal() {
     return {
         clients: [],
-        newName: '',
+        groups: [],
+        clientModal: null,
         busy: false,
         status: '',
         error: '',
@@ -493,6 +538,7 @@ function clientPortal() {
             try {
                 const data = await this.request('/api/vpn-clients');
                 this.clients = data.clients || [];
+                this.groups = data.groups || [];
             } catch (e) {
                 this.showError(e);
             } finally {
@@ -680,17 +726,42 @@ function clientPortal() {
             if (this.telegram.linked) return '{{ t.telegram_connected_message }}';
             return '{{ t.telegram_not_connected_message }}';
         },
+        openCreateClient() {
+            this.clientModal = { mode: 'create', name: '', groupName: '', client: null };
+        },
+        openGroupEditor(client) {
+            this.clientModal = {
+                mode: 'group',
+                name: client.name || '',
+                groupName: client.group_name || '',
+                client,
+            };
+        },
+        closeClientModal() {
+            if (!this.busy) this.clientModal = null;
+        },
+        rememberGroup(groupName) {
+            const group = String(groupName || '').trim();
+            if (group && !this.groups.includes(group)) {
+                this.groups.push(group);
+                this.groups.sort((left, right) => left.localeCompare(right));
+            }
+        },
         async createClient() {
+            if (!this.clientModal || this.clientModal.mode !== 'create') return;
             this.clearNotice();
             this.busy = true;
             try {
+                const name = this.clientModal.name;
+                const groupName = this.clientModal.groupName.trim() || null;
                 const data = await this.request('/api/vpn-clients', {
                     method: 'POST',
-                    body: JSON.stringify({ name: this.newName }),
+                    body: JSON.stringify({ name, group_name: groupName }),
                 });
                 this.clients.push(data.client);
                 delete this.serverConfigs[data.client.id];
-                this.newName = '';
+                this.rememberGroup(data.client.group_name);
+                this.clientModal = null;
                 this.applyResponseNotice(data, '{{ t.notice_create_success }}');
             } catch (e) {
                 this.showError(e);
@@ -698,6 +769,35 @@ function clientPortal() {
                 this.busy = false;
             }
         },
+        async changeClientGroup() {
+            if (!this.clientModal || this.clientModal.mode !== 'group') return;
+            const client = this.clientModal.client;
+            const groupName = this.clientModal.groupName.trim() || null;
+            if ((client.group_name || null) === groupName) {
+                this.clientModal = null;
+                return;
+            }
+            if (!confirm('{{ t.configs_group_rotation_confirm }}')) return;
+
+            this.clearNotice();
+            this.busy = true;
+            try {
+                const data = await this.request(`/api/vpn-clients/${client.id}/group`, {
+                    method: 'POST',
+                    body: JSON.stringify({ group_name: groupName }),
+                });
+                const index = this.clients.findIndex((item) => item.id === client.id);
+                if (index !== -1) this.clients[index] = data.client;
+                delete this.serverConfigs[client.id];
+                this.rememberGroup(data.client.group_name);
+                this.clientModal = null;
+                this.applyResponseNotice(data, '{{ t.configs_group_changed }}');
+            } catch (e) {
+                this.showError(e);
+            } finally {
+                this.busy = false;
+            }
+        },
         async setEnabled(client, enabled) {
             this.clearNotice();
             this.busy = true;