Targets working?

server/routers/auth/verifyTargetAccess.ts

@@ -33,7 +33,7 @@ export async function verifyTargetAccess(req: Request, res: Response, next: Next
 
     const resourceId = target[0].resourceId;
 
-    if (resourceId) {
+    if (!resourceId) {
         return next(
             createHttpError(
                 HttpCode.INTERNAL_SERVER_ERROR,

src/app/[orgId]/resources/[resourceId]/targets/page.tsx

@@ -13,9 +13,15 @@ import api from "@app/api"
 import { AxiosResponse } from "axios"
 import { ListTargetsResponse } from "@server/routers/target/listTargets"
 
+const isValidIPAddress = (ip: string) => {
+    const ipv4Regex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+    return ipv4Regex.test(ip);
+}
+
 export default function ReverseProxyTargets({ params }: { params: { resourceId: string } }) {
     const [targets, setTargets] = useState<ListTargetsResponse["targets"]>([])
     const [nextId, setNextId] = useState(1)
+    const [ipError, setIpError] = useState("")
 
     useEffect(() => {
         if (typeof window !== "undefined") {
@@ -30,21 +36,27 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
     const [newTarget, setNewTarget] = useState({
         resourceId: params.resourceId,
         ip: "",
-        method: "GET",
+        method: "http",
         port: 80,
-        protocol: "http",
+        protocol: "TCP",
     })
 
-    const addTarget = async () => {
+    const addTarget = () => {
-        const res = await api.put(`/resource/${params.resourceId}/target`, {
+        if (!isValidIPAddress(newTarget.ip)) {
+            setIpError("Invalid IP address format");
+            return;
+        }
+        setIpError("");
+
+        api.put(`/resource/${params.resourceId}/target`, {
             ...newTarget,
             resourceId: undefined
         })
             .catch((err) => {
                 console.error(err)
 
-        });
+            }).then((res) => {
-
+                // console.log(res)
                 setTargets([...targets, { ...newTarget, targetId: nextId, enabled: true }])
                 setNextId(nextId + 1)
                 setNewTarget({
@@ -54,11 +66,17 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                     port: 80,
                     protocol: "http",
                 })
+            });
+
     }
 
-    const removeTarget = async (targetId: number) => {
+    const removeTarget = (targetId: number) => {
-        setTargets(targets.filter((target) => target.targetId !== targetId))
+        api.delete(`/target/${targetId}`)
-        const res = await api.delete(`/target/${targetId}`)
+            .catch((err) => {
+                console.error(err)
+            }).then((res) => {
+                setTargets(targets.filter((target) => target.targetId !== targetId));
+            });
     }
 
     const toggleTarget = (targetId: number) => {
@@ -67,7 +85,12 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                 target.targetId === targetId ? { ...target, enabled: !target.enabled } : target
             )
         )
-        const res = api.post(`/target/${targetId}`, { enabled: !targets.find((target) => target.targetId === targetId)?.enabled })
+        api.post(`/target/${targetId}`, { enabled: !targets.find((target) => target.targetId === targetId)?.enabled })
+            .catch((err) => {
+                console.error(err)
+            }).then((res) => {
+                console.log(res)
+            });
 
         // Add a visual feedback
         const targetElement = document.getElementById(`target-${targetId}`)
@@ -81,11 +104,6 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
 
     return (
         <div className="space-y-6">
-            {/* <Card>
-                <CardHeader> */}
-                    {/* <CardTitle>Add New Target</CardTitle>
-                </CardHeader>
-                <CardContent> */}
             <form
                 onSubmit={(e) => {
                     e.preventDefault()
@@ -99,9 +117,13 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                         <Input
                             id="ip"
                             value={newTarget.ip}
-                                    onChange={(e) => setNewTarget({ ...newTarget, ip: e.target.value })}
+                            onChange={(e) => {
+                                setNewTarget({ ...newTarget, ip: e.target.value })
+                                setIpError("")
+                            }}
                             required
                         />
+                        {ipError && <p className="text-red-500 text-sm">{ipError}</p>}
                     </div>
                     <div className="space-y-2">
                         <Label htmlFor="method">Method</Label>
@@ -113,10 +135,8 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                                 <SelectValue placeholder="Select method" />
                             </SelectTrigger>
                             <SelectContent>
-                                        <SelectItem value="GET">GET</SelectItem>
+                                <SelectItem value="http">HTTP</SelectItem>
-                                        <SelectItem value="POST">POST</SelectItem>
+                                <SelectItem value="https">HTTPS</SelectItem>
-                                        <SelectItem value="PUT">PUT</SelectItem>
-                                        <SelectItem value="DELETE">DELETE</SelectItem>
                             </SelectContent>
                         </Select>
                     </div>
@@ -140,8 +160,8 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                                 <SelectValue placeholder="Select protocol" />
                             </SelectTrigger>
                             <SelectContent>
-                                        <SelectItem value="http">HTTP</SelectItem>
+                                <SelectItem value="UDP">UDP</SelectItem>
-                                        <SelectItem value="https">HTTPS</SelectItem>
+                                <SelectItem value="TCP">TCP</SelectItem>
                             </SelectContent>
                         </Select>
                     </div>
@@ -150,24 +170,32 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                     <PlusCircle className="mr-2 h-4 w-4" /> Add Target
                 </Button>
             </form>
-                {/* </CardContent>
-            </Card> */}
 
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <div className="space-y-4">
                 {targets.map((target) => (
-                    <Card key={target.targetId} id={`target-${target.targetId}`} >
+                    <Card key={target.targetId} id={`target-${target.targetId}`} className="w-full p-4">
-                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                        <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2 px-0 pt-0">
-                            <CardTitle className="text-sm font-medium flex items-center">
+                            <CardTitle className="text-lg font-medium flex items-center">
-                                <Server className="mr-2 h-4 w-4" />
+                                <Server className="mr-2 h-5 w-5" />
                                 Target {target.targetId}
                             </CardTitle>
+                            <div className="flex flex-col items-end space-y-2">
                                 <Switch
                                     checked={target.enabled}
                                     onCheckedChange={() => toggleTarget(target.targetId)}
                                 />
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                                    onClick={() => removeTarget(target.targetId)}
+                                >
+                                    <Trash2 className="h-4 w-4" />
+                                </Button>
+                            </div>
                         </CardHeader>
-                        <CardContent>
+                        <CardContent className="px-0 py-2">
-                            <div className="grid gap-2">
+                            <div className="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
                                 <div className="flex items-center">
                                     <Globe className="mr-2 h-4 w-4 text-muted-foreground" />
                                     <span className="text-sm">{target.ip}:{target.port}</span>
@@ -181,14 +209,6 @@ export default function ReverseProxyTargets({ params }: { params: { resourceId:
                                     <Badge variant={target.enabled ? "default" : "secondary"}>{target.protocol?.toUpperCase()}</Badge>
                                 </div>
                             </div>
-                            <Button
-                                variant="destructive"
-                                size="sm"
-                                className="mt-4 w-full"
-                                onClick={() => removeTarget(target.targetId)}
-                            >
-                                <Trash2 className="mr-2 h-4 w-4" /> Remove
-                            </Button>
                         </CardContent>
                     </Card>
                 ))}