Added ldap and pam authentication

web/src/SyntheticGraphEditor.tsx

@@ -8,6 +8,7 @@ import { VersionTree, DiffViewer } from './VersionHistory';
 import { groupBounds, groupContaining, genGroupId, pruneGroups, type NodeGroup, type Rect } from './lib/nodeGroups';
 import { useFlowZoom, type Box } from './lib/flowZoom';
 import { useFlowDebug, formatBadge, badgeTitle, nodeDebugClass, type DebugSnapshot } from './lib/flowDebug';
+import { useAuth } from './lib/auth';
 
 interface DataSource { name: string; }
 interface SignalInfo { name: string; type?: string; }
@@ -337,8 +338,10 @@ export default function SyntheticGraphEditor({ name, create, panelId, onClose, o
   const [verReload, setVerReload] = useState(0);
 
   // Identity fields — editable only when creating a new signal.
+  const me = useAuth();
   const [newName, setNewName] = useState('');
-  const [visibility, setVisibility] = useState<'panel' | 'user' | 'global'>(panelId ? 'panel' : 'user');
+  const [visibility, setVisibility] = useState<'panel' | 'user' | 'group' | 'global'>(panelId ? 'panel' : 'user');
+  const [scopeGroups, setScopeGroups] = useState<string[]>([]);
   const [unit, setUnit] = useState('');
   const [desc, setDesc] = useState('');
   const [dispLow, setDispLow] = useState('0');
@@ -878,6 +881,7 @@ export default function SyntheticGraphEditor({ name, create, panelId, onClose, o
       if (create) {
         body.visibility = visibility;
         if (visibility === 'panel' && panelId) body.panel = panelId;
+        if (visibility === 'group') body.groups = scopeGroups;
       }
       const res = await fetch(
         create ? '/api/v1/synthetic' : `/api/v1/synthetic/${encodeURIComponent(sigName)}`,
@@ -1146,9 +1150,24 @@ export default function SyntheticGraphEditor({ name, create, panelId, onClose, o
                           onChange={(e) => setVisibility((e.target as HTMLSelectElement).value as any)}>
                           {panelId && <option value="panel">This panel only</option>}
                           <option value="user">My signals</option>
+                          <option value="group" disabled={me.groups.length === 0}>A group</option>
                           <option value="global">Global (all users)</option>
                         </select>
                       </div>
+                      {visibility === 'group' && (
+                        <div class="wizard-field">
+                          <label>Groups</label>
+                          <div class="scope-picker-groups">
+                            {me.groups.length === 0 && <span class="hint">You are not in any group.</span>}
+                            {me.groups.map(g => (
+                              <label key={g} class="scope-picker-chk">
+                                <input type="checkbox" checked={scopeGroups.includes(g)}
+                                  onChange={() => setScopeGroups(prev => prev.includes(g) ? prev.filter(x => x !== g) : [...prev, g])} />{g}
+                              </label>
+                            ))}
+                          </div>
+                        </div>
+                      )}
                     </Fragment>
                   ) : (
                     <p class="hint">Editing <b>{name}</b>.</p>