From 43288e66862f6a667a266de90e05666b2a79165c Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Wed, 27 May 2026 13:43:35 +0200
Subject: [PATCH] refactor(forms): modernize random buttons in client +
 outbound modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the last holdouts of the old random-affordance patterns:
- ClientFormModal's five "↻" text buttons (email / subId / auth /
  password / uuid) now use <Button icon={<ReloadOutlined />} /> so
  they match the icon-based actions elsewhere in the form.
- OutboundFormModal's WireGuard private-key SyncOutlined-in-label
  becomes a real button inside a Space.Compact next to the key
  field — same pattern the inbound side already uses.

The shared .random-icon CSS class has no remaining consumers after
this and the previous inbound-form pass, so drop it from utils.css.
---
 .../src/pages/clients/ClientFormModal.tsx     | 11 ++++---
 frontend/src/pages/xray/OutboundFormModal.tsx | 33 +++++++++----------
 frontend/src/styles/utils.css                 |  6 ----
 3 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/frontend/src/pages/clients/ClientFormModal.tsx b/frontend/src/pages/clients/ClientFormModal.tsx
index 9f469c5c..619094d0 100644
--- a/frontend/src/pages/clients/ClientFormModal.tsx
+++ b/frontend/src/pages/clients/ClientFormModal.tsx
@@ -14,6 +14,7 @@ import {
   Tag,
   message,
 } from 'antd';
+import { ReloadOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
 
@@ -369,7 +370,7 @@ export default function ClientFormModal({
                     style={{ flex: 1 }}
                     onChange={(e) => update('email', e.target.value)}
                   />
-                  <Button onClick={() => update('email', RandomUtil.randomLowerAndNum(12))}>↻</Button>
+                  <Button icon={<ReloadOutlined />} onClick={() => update('email', RandomUtil.randomLowerAndNum(12))} />
                 </Space.Compact>
               </Form.Item>
             </Col>
@@ -377,7 +378,7 @@ export default function ClientFormModal({
               <Form.Item label={t('pages.clients.subId')}>
                 <Space.Compact style={{ display: 'flex' }}>
                   <Input value={form.subId} style={{ flex: 1 }} onChange={(e) => update('subId', e.target.value)} />
-                  <Button onClick={() => update('subId', RandomUtil.randomLowerAndNum(16))}>↻</Button>
+                  <Button icon={<ReloadOutlined />} onClick={() => update('subId', RandomUtil.randomLowerAndNum(16))} />
                 </Space.Compact>
               </Form.Item>
             </Col>
@@ -388,7 +389,7 @@ export default function ClientFormModal({
               <Form.Item label={t('pages.clients.hysteriaAuth')}>
                 <Space.Compact style={{ display: 'flex' }}>
                   <Input value={form.auth} style={{ flex: 1 }} onChange={(e) => update('auth', e.target.value)} />
-                  <Button onClick={() => update('auth', RandomUtil.randomLowerAndNum(16))}>↻</Button>
+                  <Button icon={<ReloadOutlined />} onClick={() => update('auth', RandomUtil.randomLowerAndNum(16))} />
                 </Space.Compact>
               </Form.Item>
             </Col>
@@ -396,7 +397,7 @@ export default function ClientFormModal({
               <Form.Item label={t('pages.clients.password')}>
                 <Space.Compact style={{ display: 'flex' }}>
                   <Input value={form.password} style={{ flex: 1 }} onChange={(e) => update('password', e.target.value)} />
-                  <Button onClick={() => update('password', RandomUtil.randomLowerAndNum(16))}>↻</Button>
+                  <Button icon={<ReloadOutlined />} onClick={() => update('password', RandomUtil.randomLowerAndNum(16))} />
                 </Space.Compact>
               </Form.Item>
             </Col>
@@ -407,7 +408,7 @@ export default function ClientFormModal({
               <Form.Item label={t('pages.clients.uuid')}>
                 <Space.Compact style={{ display: 'flex' }}>
                   <Input value={form.uuid} style={{ flex: 1 }} onChange={(e) => update('uuid', e.target.value)} />
-                  <Button onClick={() => update('uuid', RandomUtil.randomUUID())}>↻</Button>
+                  <Button icon={<ReloadOutlined />} onClick={() => update('uuid', RandomUtil.randomUUID())} />
                 </Space.Compact>
               </Form.Item>
             </Col>
diff --git a/frontend/src/pages/xray/OutboundFormModal.tsx b/frontend/src/pages/xray/OutboundFormModal.tsx
index 00b10bf9..ec67698b 100644
--- a/frontend/src/pages/xray/OutboundFormModal.tsx
+++ b/frontend/src/pages/xray/OutboundFormModal.tsx
@@ -13,7 +13,7 @@ import {
   Tabs,
   message,
 } from 'antd';
-import { DeleteOutlined, MinusOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons';
+import { DeleteOutlined, MinusOutlined, PlusOutlined, ReloadOutlined } from '@ant-design/icons';
 
 import FinalMaskForm from '@/components/FinalMaskForm';
 import HeaderMapEditor from '@/components/HeaderMapEditor';
@@ -977,23 +977,20 @@ export default function OutboundFormModal({
                         <Form.Item label={t('pages.inbounds.address')} name={['settings', 'address']}>
                           <Input placeholder="comma-separated, e.g. 10.0.0.1,fd00::1" />
                         </Form.Item>
-                        <Form.Item
-                          label={
-                            <>
-                              {t('pages.inbounds.privatekey')}
-                              <SyncOutlined
-                                className="random-icon"
-                                onClick={() => {
-                                  const pair = Wireguard.generateKeypair();
-                                  form.setFieldValue(['settings', 'secretKey'], pair.privateKey);
-                                  form.setFieldValue(['settings', 'pubKey'], pair.publicKey);
-                                }}
-                              />
-                            </>
-                          }
-                          name={['settings', 'secretKey']}
-                        >
-                          <Input />
+                        <Form.Item label={t('pages.inbounds.privatekey')}>
+                          <Space.Compact block>
+                            <Form.Item name={['settings', 'secretKey']} noStyle>
+                              <Input style={{ width: 'calc(100% - 32px)' }} />
+                            </Form.Item>
+                            <Button
+                              icon={<ReloadOutlined />}
+                              onClick={() => {
+                                const pair = Wireguard.generateKeypair();
+                                form.setFieldValue(['settings', 'secretKey'], pair.privateKey);
+                                form.setFieldValue(['settings', 'pubKey'], pair.publicKey);
+                              }}
+                            />
+                          </Space.Compact>
                         </Form.Item>
                         <Form.Item label={t('pages.inbounds.publicKey')} name={['settings', 'pubKey']}>
                           <Input disabled />
diff --git a/frontend/src/styles/utils.css b/frontend/src/styles/utils.css
index cff6fe63..047e053f 100644
--- a/frontend/src/styles/utils.css
+++ b/frontend/src/styles/utils.css
@@ -16,12 +16,6 @@
 
 .zero-margin { margin: 0; }
 
-.random-icon {
-  margin-left: 4px;
-  cursor: pointer;
-  color: var(--ant-color-primary);
-}
-
 .danger-icon {
   margin-left: 8px;
   cursor: pointer;