Switch auth to plain-text password env var (remove bcrypt)
- Replace ADMIN_PASSWORD_HASH with ADMIN_PASSWORD in auth route and docker-compose - Remove bcryptjs / @types/bcryptjs dependencies - Delete scripts/hashPassword.ts (no longer needed) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,56 +1,205 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
DndContext,
|
||||
DragOverlay,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragStartEvent,
|
||||
type DragEndEvent,
|
||||
} from '@dnd-kit/core';
|
||||
import { SortableContext, horizontalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
|
||||
import { toast } from 'sonner';
|
||||
import { useRackStore } from '../../store/useRackStore';
|
||||
import { apiClient } from '../../api/client';
|
||||
import { RackToolbar } from './RackToolbar';
|
||||
import { RackColumn } from './RackColumn';
|
||||
import { DevicePalette } from './DevicePalette';
|
||||
import { AddModuleModal } from '../modals/AddModuleModal';
|
||||
import { RackSkeleton } from '../ui/Skeleton';
|
||||
import type { ModuleType } from '../../types';
|
||||
import { MODULE_TYPE_COLORS, MODULE_TYPE_LABELS } from '../../lib/constants';
|
||||
import { cn } from '../../lib/utils';
|
||||
|
||||
interface PendingDrop {
|
||||
rackId: string;
|
||||
uPosition: number;
|
||||
type: ModuleType;
|
||||
}
|
||||
|
||||
function DragOverlayItem({ type }: { type: ModuleType }) {
|
||||
const colors = MODULE_TYPE_COLORS[type];
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'px-3 py-1.5 rounded border text-xs font-semibold text-white shadow-2xl opacity-90 pointer-events-none',
|
||||
colors.bg,
|
||||
colors.border
|
||||
)}
|
||||
>
|
||||
{MODULE_TYPE_LABELS[type]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ModuleDragOverlay({ label }: { label: string }) {
|
||||
return (
|
||||
<div className="px-3 py-1.5 rounded border bg-slate-600 border-slate-400 text-xs font-semibold text-white shadow-2xl opacity-90 pointer-events-none">
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function RackPlanner() {
|
||||
const { racks, loading, fetchRacks } = useRackStore();
|
||||
const { racks, loading, fetchRacks, moveModule, updateRack } = useRackStore();
|
||||
const canvasRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Drag state
|
||||
const [activePaletteType, setActivePaletteType] = useState<ModuleType | null>(null);
|
||||
const [activeDragModuleLabel, setActiveDragModuleLabel] = useState<string | null>(null);
|
||||
const [draggingModuleId, setDraggingModuleId] = useState<string | null>(null);
|
||||
const [pendingDrop, setPendingDrop] = useState<PendingDrop | null>(null);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRacks().catch(() => toast.error('Failed to load racks'));
|
||||
}, [fetchRacks]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-[#0f1117]">
|
||||
<RackToolbar rackCanvasRef={canvasRef} />
|
||||
function handleDragStart(event: DragStartEvent) {
|
||||
const data = event.active.data.current as Record<string, unknown>;
|
||||
if (data?.dragType === 'palette') {
|
||||
setActivePaletteType(data.type as ModuleType);
|
||||
} else if (data?.dragType === 'module') {
|
||||
setDraggingModuleId(data.moduleId as string);
|
||||
setActiveDragModuleLabel(data.label as string);
|
||||
}
|
||||
}
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* Main rack canvas */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<RackSkeleton />
|
||||
) : racks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-3 text-center px-4">
|
||||
<div className="w-16 h-16 bg-slate-800 rounded-xl border border-slate-700 flex items-center justify-center">
|
||||
<svg width="32" height="32" viewBox="0 0 18 18" fill="none">
|
||||
<rect x="1" y="2" width="16" height="3" rx="1" fill="#475569" />
|
||||
<rect x="1" y="7" width="16" height="3" rx="1" fill="#475569" opacity="0.7" />
|
||||
<rect x="1" y="12" width="16" height="3" rx="1" fill="#475569" opacity="0.4" />
|
||||
</svg>
|
||||
async function handleDragEnd(event: DragEndEvent) {
|
||||
const { active, over } = event;
|
||||
setActivePaletteType(null);
|
||||
setActiveDragModuleLabel(null);
|
||||
setDraggingModuleId(null);
|
||||
|
||||
if (!over) return;
|
||||
|
||||
const dragData = active.data.current as Record<string, unknown>;
|
||||
const dropData = over.data.current as Record<string, unknown> | undefined;
|
||||
|
||||
// --- Palette → slot: open AddModuleModal pre-filled ---
|
||||
if (dragData?.dragType === 'palette' && dropData?.dropType === 'slot') {
|
||||
setPendingDrop({
|
||||
type: dragData.type as ModuleType,
|
||||
rackId: dropData.rackId as string,
|
||||
uPosition: dropData.uPosition as number,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// --- Module → slot: move the module ---
|
||||
if (dragData?.dragType === 'module' && dropData?.dropType === 'slot') {
|
||||
const moduleId = dragData.moduleId as string;
|
||||
const targetRackId = dropData.rackId as string;
|
||||
const targetUPosition = dropData.uPosition as number;
|
||||
|
||||
// No-op if dropped on own position
|
||||
if (dragData.fromRackId === targetRackId && dragData.fromUPosition === targetUPosition) return;
|
||||
|
||||
try {
|
||||
await moveModule(moduleId, targetRackId, targetUPosition);
|
||||
toast.success('Module moved');
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'Move failed');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// --- Rack header → rack header: reorder racks ---
|
||||
if (dragData?.dragType === 'rack' && over.data.current?.dragType === 'rack') {
|
||||
const oldIndex = racks.findIndex((r) => r.id === active.id);
|
||||
const newIndex = racks.findIndex((r) => r.id === over.id);
|
||||
if (oldIndex === newIndex) return;
|
||||
|
||||
const reordered = arrayMove(racks, oldIndex, newIndex);
|
||||
// Persist new displayOrder values
|
||||
try {
|
||||
await Promise.all(
|
||||
reordered.map((rack, idx) =>
|
||||
rack.displayOrder !== idx ? apiClient.racks.update(rack.id, { displayOrder: idx }) : Promise.resolve(rack)
|
||||
)
|
||||
);
|
||||
// Refresh store to sync
|
||||
await fetchRacks();
|
||||
} catch {
|
||||
toast.error('Failed to save rack order');
|
||||
await fetchRacks(); // rollback
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const rackIds = racks.map((r) => r.id);
|
||||
|
||||
return (
|
||||
<DndContext sensors={sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
|
||||
<div className="flex flex-col h-screen bg-[#0f1117]">
|
||||
<RackToolbar rackCanvasRef={canvasRef} />
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<DevicePalette />
|
||||
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<RackSkeleton />
|
||||
) : racks.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-3 text-center px-4">
|
||||
<div className="w-16 h-16 bg-slate-800 rounded-xl border border-slate-700 flex items-center justify-center">
|
||||
<svg width="32" height="32" viewBox="0 0 18 18" fill="none">
|
||||
<rect x="1" y="2" width="16" height="3" rx="1" fill="#475569" />
|
||||
<rect x="1" y="7" width="16" height="3" rx="1" fill="#475569" opacity="0.7" />
|
||||
<rect x="1" y="12" width="16" height="3" rx="1" fill="#475569" opacity="0.4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-300 font-medium">No racks yet</p>
|
||||
<p className="text-slate-500 text-sm mt-1">
|
||||
Click <strong className="text-slate-300">Add Rack</strong> in the toolbar to create your first rack.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-slate-300 font-medium">No racks yet</p>
|
||||
<p className="text-slate-500 text-sm mt-1">
|
||||
Click <strong className="text-slate-300">Add Rack</strong> in the toolbar to create your first rack.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
ref={canvasRef}
|
||||
className="flex gap-4 p-4 min-h-full items-start"
|
||||
style={{ background: '#0f1117' }}
|
||||
>
|
||||
{racks.map((rack) => (
|
||||
<RackColumn key={rack.id} rack={rack} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
) : (
|
||||
<SortableContext items={rackIds} strategy={horizontalListSortingStrategy}>
|
||||
<div
|
||||
ref={canvasRef}
|
||||
className="flex gap-4 p-4 min-h-full items-start"
|
||||
style={{ background: '#0f1117' }}
|
||||
>
|
||||
{racks.map((rack) => (
|
||||
<RackColumn key={rack.id} rack={rack} draggingModuleId={draggingModuleId} />
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DragOverlay dropAnimation={null}>
|
||||
{activePaletteType && <DragOverlayItem type={activePaletteType} />}
|
||||
{activeDragModuleLabel && <ModuleDragOverlay label={activeDragModuleLabel} />}
|
||||
</DragOverlay>
|
||||
|
||||
{pendingDrop && (
|
||||
<AddModuleModal
|
||||
open={true}
|
||||
onClose={() => setPendingDrop(null)}
|
||||
rackId={pendingDrop.rackId}
|
||||
uPosition={pendingDrop.uPosition}
|
||||
initialType={pendingDrop.type}
|
||||
/>
|
||||
)}
|
||||
</DndContext>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user