feat: Phase 2 — auth, node/edge modals, API wiring

- Login page: full-screen dark, grid bg, JWT flow - Auth store (Zustand) + API client (axios + interceptors) - NodeModal: add/edit form (type, label, hostname, IP, check method) - EdgeModal: link type picker + VLAN ID + label on connect - App: auth gate, canvas load from API (fallback to demo), Ctrl+S save - CanvasContainer: expose onConnect prop for edge modal flow
2026-03-06 23:33:55 +01:00
parent 9bb34c99cc
commit 150302c3f7
10 changed files with 776 additions and 29 deletions
@@ -0,0 +1,92 @@
+import { useState } from 'react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { EDGE_TYPE_LABELS, type EdgeData, type EdgeType } from '@/types'
+
+const EDGE_TYPES = Object.entries(EDGE_TYPE_LABELS) as [EdgeType, string][]
+
+interface EdgeModalProps {
+  open: boolean
+  onClose: () => void
+  onSubmit: (data: EdgeData) => void
+}
+
+export function EdgeModal({ open, onClose, onSubmit }: EdgeModalProps) {
+  const [type, setType] = useState<EdgeType>('ethernet')
+  const [label, setLabel] = useState('')
+  const [vlanId, setVlanId] = useState('')
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSubmit({
+      type,
+      label: label || undefined,
+      vlan_id: type === 'vlan' && vlanId ? parseInt(vlanId) : undefined,
+    })
+    onClose()
+    setType('ethernet')
+    setLabel('')
+    setVlanId('')
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+      <DialogContent className="bg-[#161b22] border-[#30363d] text-foreground max-w-xs">
+        <DialogHeader>
+          <DialogTitle className="text-sm font-semibold">Connect Nodes</DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="flex flex-col gap-3 mt-2">
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs text-muted-foreground">Link Type</Label>
+            <Select value={type} onValueChange={(v) => setType(v as EdgeType)}>
+              <SelectTrigger className="bg-[#21262d] border-[#30363d] text-sm h-8">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="bg-[#21262d] border-[#30363d]">
+                {EDGE_TYPES.map(([value, label]) => (
+                  <SelectItem key={value} value={value} className="text-sm">{label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {type === 'vlan' && (
+            <div className="flex flex-col gap-1.5">
+              <Label className="text-xs text-muted-foreground">VLAN ID</Label>
+              <Input
+                type="number"
+                min={1}
+                max={4094}
+                value={vlanId}
+                onChange={(e) => setVlanId(e.target.value)}
+                placeholder="e.g. 20"
+                className="bg-[#21262d] border-[#30363d] font-mono text-sm h-8"
+              />
+            </div>
+          )}
+
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs text-muted-foreground">Label <span className="text-muted-foreground/50">(optional)</span></Label>
+            <Input
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder="e.g. 1G, trunk..."
+              className="bg-[#21262d] border-[#30363d] text-sm h-8"
+            />
+          </div>
+
+          <div className="flex justify-end gap-2 pt-1">
+            <Button type="button" variant="ghost" size="sm" onClick={onClose}>Cancel</Button>
+            <Button type="submit" size="sm" className="bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90">
+              Connect
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}