fix: better error messages

backend/routers/firewall.py

@@ -29,9 +29,6 @@ class RuleInfo(BaseModel):
     policy: str
     enabled: bool
 
-class RuleAddResponse(BaseModel):
-    status:str|list[dict]
-
 class RenameForm(BaseModel):
     name:str
 
@@ -158,15 +155,12 @@ def parse_and_check_rule(rule:RuleModel):
         raise HTTPException(status_code=400, detail="Invalid action")
     return rule
 
-@app.post('/rules/set', response_model=RuleAddResponse)
+@app.post('/rules/set', response_model=StatusMessageModel)
 async def add_new_service(form: RuleFormAdd):
     """Add a new service"""
     if form.policy not in ["accept", "drop", "reject"]:
         raise HTTPException(status_code=400, detail="Invalid policy")
     rules = [parse_and_check_rule(ele) for ele in form.rules]
-    errors = [({"rule":i} | ele) for i, ele in enumerate(rules) if isinstance(ele, dict)]
-    if len(errors) > 0:
-        return {'status': errors}
     try:
         db.queries(["DELETE FROM rules"]+
             [("""

frontend/src/js/utils.tsx

@@ -35,7 +35,10 @@ export async function getapi(path:string):Promise<any>{
             headers: { "Authorization" : "Bearer " + window.localStorage.getItem("access_token")}
         }).then(res => {
                 if(res.status === 401) window.location.reload()
-                if(!res.ok) reject(res.statusText)
+                if(!res.ok){
+                    const errorDefault = res.statusText
+                    return res.json().then( res => reject(getErrorMessageFromServerResponse(res, errorDefault)) ).catch( _err => reject(errorDefault)) 
+                }
                 res.json().then( res => resolve(res) ).catch( err => reject(err))
             })
             .catch(err => {
@@ -58,6 +61,24 @@ export function getErrorMessage(e: any) {
 	return error;
 }
 
+
+export function getErrorMessageFromServerResponse(e: any, def:string = "Unknown error") {
+    if (e.status){
+        return e.status
+    }
+    if (e.detail){
+        if (typeof e.detail == "string")
+            return e.detail
+        if (e.detail[0] && e.detail[0].msg)
+            return e.detail[0].msg
+    }
+    if (e.error){
+        return e.error
+    }
+    return def
+}
+
+
 export async function postapi(path:string,data:any,is_form:boolean=false):Promise<any>{
     return await new Promise((resolve, reject) => {
         fetch(`${IS_DEV?`http://${DEV_IP_BACKEND}`:""}/api/${path}`, {
@@ -72,7 +93,10 @@ export async function postapi(path:string,data:any,is_form:boolean=false):Promis
         }).then(res => {
             if(res.status === 401) window.location.reload() 
             if(res.status === 406) resolve({status:"Wrong Password"})
-            if(!res.ok) reject(res.statusText)
+            if(!res.ok){
+                const errorDefault = res.statusText
+                return res.json().then( res => reject(getErrorMessageFromServerResponse(res, errorDefault)) ).catch( _err => reject(errorDefault)) 
+            }
             res.json().then( res => resolve(res) ).catch( err => reject(err))
         })
         .catch(err => {