From d5f5add61acd9c949436586545a13a551060035f Mon Sep 17 00:00:00 2001
From: "web@ppanel" <web@ppanel.dev>
Date: Mon, 2 Dec 2024 13:22:43 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style(node):=20Form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/admin/app/dashboard/server/node-form.tsx | 139 ++++++++++--------
 1 file changed, 76 insertions(+), 63 deletions(-)

diff --git a/apps/admin/app/dashboard/server/node-form.tsx b/apps/admin/app/dashboard/server/node-form.tsx
index 052dddc..c63d7c2 100644
--- a/apps/admin/app/dashboard/server/node-form.tsx
+++ b/apps/admin/app/dashboard/server/node-form.tsx
@@ -452,7 +452,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
                     control={form.control}
                     name='vmess.host'
                     render={({ field }) => (
-                      <FormItem>
+                      <FormItem className='col-span-2'>
                         <FormLabel>{t('form.Host Name')}</FormLabel>
                         <FormControl>
                           <EnhancedInput
@@ -486,70 +486,11 @@ export default function NodeForm<T extends { [x: string]: any }>({
                       </FormItem>
                     )}
                   />
-                  <FormField
-                    control={form.control}
-                    name='vmess.tls_config.server_name'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.serverName')}</FormLabel>
-                        <FormControl>
-                          <EnhancedInput
-                            {...field}
-                            onValueChange={(value) => {
-                              form.setValue(field.name, value);
-                            }}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name='vmess.enable_tls'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.enableTls')}</FormLabel>
-                        <FormControl>
-                          <div className='pt-2'>
-                            <Switch
-                              checked={!!field.value}
-                              onCheckedChange={(value) => {
-                                form.setValue(field.name, value);
-                              }}
-                            />
-                          </div>
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                  <FormField
-                    control={form.control}
-                    name='vmess.tls_config.allow_insecure'
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t('form.allowInsecure')}</FormLabel>
-                        <FormControl>
-                          <div className='pt-2'>
-                            <Switch
-                              checked={!!field.value}
-                              onCheckedChange={(value) => {
-                                form.setValue(field.name, value);
-                              }}
-                            />
-                          </div>
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-
                   <FormField
                     control={form.control}
                     name='vmess.network'
                     render={({ field }) => (
-                      <FormItem>
+                      <FormItem className='col-span-2'>
                         <FormLabel>{t('form.networkType')}</FormLabel>
                         <FormControl>
                           <Select
@@ -579,6 +520,78 @@ export default function NodeForm<T extends { [x: string]: any }>({
                       </FormItem>
                     )}
                   />
+                  <FormField
+                    control={form.control}
+                    name='vmess.enable_tls'
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>
+                          {t('form.enableTls')}
+                          <Sheet>
+                            <SheetTrigger asChild>
+                              <a className='text-primary ml-2 cursor-pointer'>{t('form.edit')}</a>
+                            </SheetTrigger>
+                            <SheetContent className='p-4'>
+                              <SheetHeader>
+                                <SheetTitle>{t('form.editSecurity')}</SheetTitle>
+                              </SheetHeader>
+                              <div className='grid grid-cols-1 gap-2 pt-4'>
+                                <FormField
+                                  control={form.control}
+                                  name='vmess.tls_config.server_name'
+                                  render={({ field }) => (
+                                    <FormItem>
+                                      <FormLabel>{t('form.serverName')}</FormLabel>
+                                      <FormControl>
+                                        <EnhancedInput
+                                          {...field}
+                                          onValueChange={(value) => {
+                                            form.setValue(field.name, value);
+                                          }}
+                                        />
+                                      </FormControl>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+                                <FormField
+                                  control={form.control}
+                                  name='vmess.tls_config.allow_insecure'
+                                  render={({ field }) => (
+                                    <FormItem>
+                                      <FormLabel>{t('form.allowInsecure')}</FormLabel>
+                                      <FormControl>
+                                        <div className='pt-2'>
+                                          <Switch
+                                            checked={!!field.value}
+                                            onCheckedChange={(value) => {
+                                              form.setValue(field.name, value);
+                                            }}
+                                          />
+                                        </div>
+                                      </FormControl>
+                                      <FormMessage />
+                                    </FormItem>
+                                  )}
+                                />
+                              </div>
+                            </SheetContent>
+                          </Sheet>
+                        </FormLabel>
+                        <FormControl>
+                          <div className='pt-2'>
+                            <Switch
+                              checked={!!field.value}
+                              onCheckedChange={(value) => {
+                                form.setValue(field.name, value);
+                              }}
+                            />
+                          </div>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
                   <FormField
                     control={form.control}
                     name='vmess.transport'
@@ -1116,7 +1129,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
                     control={form.control}
                     name='vless.network'
                     render={({ field }) => (
-                      <FormItem>
+                      <FormItem className='col-span-2'>
                         <FormLabel>{t('form.networkType')}</FormLabel>
                         <FormControl>
                           <Select
@@ -1151,7 +1164,7 @@ export default function NodeForm<T extends { [x: string]: any }>({
                     control={form.control}
                     name='vless.xtls'
                     render={({ field }) => (
-                      <FormItem className='col-span-2'>
+                      <FormItem>
                         <FormLabel>{t('form.xtls')}</FormLabel>
                         <FormControl>
                           <Select