feat(core-config-modal): add unsaved changes confirmation dialog

Author: x0sina

dashboard/public/statics/locales/en.json

@@ -1938,7 +1938,9 @@
     "keyPairGenerationFailed": "Failed to generate key pair",
     "shortIdGenerationFailed": "Failed to generate short ID",
     "shadowsocksPasswordGenerated": "Password generated successfully",
-    "shadowsocksPasswordGenerationFailed": "Failed to generate password"
+    "shadowsocksPasswordGenerationFailed": "Failed to generate password",
+    "discardChangesTitle": "Discard changes?",
+    "discardChangesDescription": "Your unsaved kernel configuration changes will be lost if you close this editor."
   },
   "coreEditor": {
     "nameRequired": "Name is required",

dashboard/public/statics/locales/fa.json

@@ -1853,7 +1853,9 @@
     "keyPairGenerationFailed": "تولید جفت کلید ناموفق بود",
     "shortIdGenerationFailed": "تولید شناسه کوتاه ناموفق بود",
     "shadowsocksPasswordGenerated": "رمز عبور با موفقیت تولید شد",
-    "shadowsocksPasswordGenerationFailed": "تولید رمز عبور ناموفق بود"
+    "shadowsocksPasswordGenerationFailed": "تولید رمز عبور ناموفق بود",
+    "discardChangesTitle": "لغو تغییرات؟",
+    "discardChangesDescription": "اگر این ویرایشگر را ببندید، تغییرات ذخیره‌نشدهٔ پیکربندی هسته از بین خواهد رفت."
   },
   "coreEditor": {
     "nameRequired": "نام الزامی است",

dashboard/public/statics/locales/ru.json

@@ -1827,7 +1827,9 @@
     "keyPairGenerationFailed": "Не удалось сгенерировать пару ключей",
     "shortIdGenerationFailed": "Не удалось сгенерировать короткий ID",
     "shadowsocksPasswordGenerated": "Пароль успешно сгенерирован",
-    "shadowsocksPasswordGenerationFailed": "Не удалось сгенерировать пароль"
+    "shadowsocksPasswordGenerationFailed": "Не удалось сгенерировать пароль",
+    "discardChangesTitle": "Отменить изменения?",
+    "discardChangesDescription": "Несохранённые изменения конфигурации ядра будут потеряны, если закрыть редактор."
   },
   "coreEditor": {
     "nameRequired": "Укажите имя",

dashboard/public/statics/locales/zh.json

@@ -1900,7 +1900,9 @@
     "keyPairGenerationFailed": "密钥对生成失败",
     "shortIdGenerationFailed": "短 ID 生成失败",
     "shadowsocksPasswordGenerated": "密码生成成功",
-    "shadowsocksPasswordGenerationFailed": "密码生成失败"
+    "shadowsocksPasswordGenerationFailed": "密码生成失败",
+    "discardChangesTitle": "放弃更改？",
+    "discardChangesDescription": "如果关闭此编辑器，未保存的内核配置更改将会丢失。"
   },
   "coreEditor": {
     "nameRequired": "名称为必填项",

dashboard/src/features/nodes/dialogs/core-config-modal.tsx

@@ -1,5 +1,6 @@
 import { CodeEditorPanel } from '@/components/common/code-editor-panel'
 import { CopyButton } from '@/components/common/copy-button'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
@@ -79,6 +80,7 @@ export default function CoreConfigModal({ isDialogOpen, onOpenChange, form, edit
   const [selectedVlessVariant, setSelectedVlessVariant] = useState<VlessKeyVariant>('x25519')
   const [vlessAdvancedSeed, setVlessAdvancedSeed] = useState<VlessBuilderOptions | undefined>(undefined)
   const [isVlessAdvancedModalOpen, setIsVlessAdvancedModalOpen] = useState(false)
+  const [discardChangesOpen, setDiscardChangesOpen] = useState(false)
 
   // Results dialog state
   const [isResultsDialogOpen, setIsResultsDialogOpen] = useState(false)
@@ -278,6 +280,32 @@ export default function CoreConfigModal({ isDialogOpen, onOpenChange, form, edit
     generateWireGuardKeys()
   }, [generateWireGuardKeys, generatedWireGuardKeyPair, showResultDialog])
 
+  const closeModal = useCallback(() => {
+    setDiscardChangesOpen(false)
+    onOpenChange(false)
+  }, [onOpenChange])
+
+  const handleDialogOpenChange = useCallback(
+    (open: boolean) => {
+      if (open) {
+        onOpenChange(true)
+        return
+      }
+      if (createCoreMutation.isPending || modifyCoreMutation.isPending || form.formState.isSubmitting) return
+      if (form.formState.isDirty) {
+        setDiscardChangesOpen(true)
+        return
+      }
+      closeModal()
+    },
+    [closeModal, createCoreMutation.isPending, form.formState.isDirty, form.formState.isSubmitting, modifyCoreMutation.isPending, onOpenChange],
+  )
+
+  const confirmDiscardChanges = useCallback(() => {
+    form.reset()
+    closeModal()
+  }, [closeModal, form])
+
   const onSubmit = async (values: CoreConfigFormValues) => {
     try {
       // Validate JSON first
@@ -335,8 +363,8 @@ export default function CoreConfigModal({ isDialogOpen, onOpenChange, form, edit
       // Invalidate core config queries after successful action
       queryClient.invalidateQueries({ queryKey: ['/api/cores'] })
       queryClient.invalidateQueries({ queryKey: ['/api/cores/simple'] })
-      onOpenChange(false)
-      form.reset()
+      form.reset(values)
+      closeModal()
     } catch (error: any) {
       console.error('Core config operation failed:', error)
       console.error('Error response:', error?.response)
@@ -782,7 +810,7 @@ export default function CoreConfigModal({ isDialogOpen, onOpenChange, form, edit
         }}
       />
       {renderResultDialog()}
-      <Dialog open={isDialogOpen} onOpenChange={onOpenChange}>
+      <Dialog open={isDialogOpen} onOpenChange={handleDialogOpenChange}>
         <DialogContent className="h-full w-full max-w-5xl md:h-auto">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
@@ -1072,7 +1100,7 @@ export default function CoreConfigModal({ isDialogOpen, onOpenChange, form, edit
                   )}
 
                   <div className="flex justify-end gap-2">
-                    <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={createCoreMutation.isPending || modifyCoreMutation.isPending}>
+                    <Button type="button" variant="outline" onClick={() => handleDialogOpenChange(false)} disabled={createCoreMutation.isPending || modifyCoreMutation.isPending}>
                       {t('cancel')}
                     </Button>
                     <LoaderButton
@@ -1090,6 +1118,22 @@ export default function CoreConfigModal({ isDialogOpen, onOpenChange, form, edit
           </Form>
         </DialogContent>
       </Dialog>
+      <AlertDialog open={discardChangesOpen} onOpenChange={setDiscardChangesOpen}>
+        <AlertDialogContent dir={dir}>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('coreConfigModal.discardChangesTitle', { defaultValue: 'Discard changes?' })}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('coreConfigModal.discardChangesDescription', {
+                defaultValue: 'Your unsaved kernel configuration changes will be lost if you close this editor.',
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={confirmDiscardChanges}>{t('coreEditor.leave', { defaultValue: 'Leave' })}</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </>
   )
 }