cynx-ui 1.1.0 → 1.2.0

package/index.js

@@ -4,15 +4,12 @@
 
 export { default as Button } from './components/Button.jsx';
 export { default as Input } from './components/Input.jsx';
-export { default as Layout } from './components/Layout.jsx';
 export { default as Toggle } from './components/Toggle.jsx';
 export { default as Spinner } from './components/Spinner.jsx';
 export { default as TabBar } from './components/TabBar.jsx';
 export { default as Dropdown } from './components/Dropdown.jsx';
-export { default as Notifications } from './components/Notifications.jsx';
 export { default as MultiSelect } from './components/MultiSelect.jsx';
 export { default as ImageUpload } from './components/ImageUpload.jsx';
-export { default as DeleteConfirmModal } from './components/DeleteConfirmModal.jsx';
 export { default as ChipSelect } from './components/ChipSelect.jsx';
 export { default as Checkbox } from './components/Checkbox.jsx';
 export { default as AuthOverlay } from './components/AuthOverlay.jsx';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cynx-ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/components/DeleteConfirmModal.jsx

@@ -1,119 +0,0 @@
-import { useState } from 'react';
-import Modal from './Modal.jsx';
-import { useAuth } from '../hooks/useAuth.jsx';
-import Input from './Input.jsx';
-import Spinner from './Spinner.jsx';
-
-export default function DeleteConfirmModal({ title, warning, confirm: confirmMsg, matchText, onConfirm, onClose }) {
-  const { prefs } = useAuth();
-  const mode = prefs?.delete_confirm_mode || 'password';
-  const confirmText = prefs?.delete_confirm_text || 'delete';
-  const [step,     setStep]     = useState(1);
-  const [value,    setValue]    = useState('');
-  const [error,    setError]    = useState('');
-  const [loading,  setLoading]  = useState(false);
-  const [showPass, setShowPass] = useState(false);
-
-  async function handleConfirm() {
-    setError('');
-    if (mode === 'text' && value !== confirmText) {
-      setError(`Type "${confirmText}" exactly to confirm`);
-      return;
-    }
-    if (mode === 'password' && !value) {
-      setError('Password required');
-      return;
-    }
-    setLoading(true);
-    try {
-      await onConfirm(mode === 'password' ? value : null);
-    } catch (e) {
-      setError(e.message || 'Confirmation failed');
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  const EyeIcon = () => (
-    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      {showPass
-        ? <><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></>
-        : <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>
-      }
-    </svg>
-  );
-
-  return (
-    <Modal
-      title={title}
-      onClose={onClose}
-      footer={close => (
-        step === 1 ? (
-          <>
-            <button className="btn btn-ghost" onClick={close}>Cancel</button>
-            <button className="btn btn-danger" onClick={() => setStep(2)}>Continue</button>
-          </>
-        ) : (
-          <>
-            <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
-            <button className="btn btn-danger" onClick={handleConfirm} disabled={loading || !value}>
-              {loading ? <><Spinner inline /> Deleting...</> : 'Delete'}
-            </button>
-          </>
-        )
-      )}
-    >
-      {step === 1 ? (
-        <div style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
-          <div style={{ width:36, height:36, borderRadius:'50%', background:'var(--danger-bg, #fff0f0)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
-              <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
-            </svg>
-          </div>
-          <div style={{ fontSize:'.88rem', lineHeight:1.6 }}>{warning}</div>
-        </div>
-      ) : (
-        <div>
-          <p style={{ fontSize:'.88rem', marginBottom:16, lineHeight:1.6 }}>{confirmMsg}</p>
-          {mode === 'password' ? (
-            <div className="form-group" style={{ marginBottom:0 }}>
-              <label>Enter your password to confirm</label>
-              <div style={{ position:'relative' }}>
-                <Input
-                  type={showPass ? 'text' : 'password'}
-                  placeholder="Your account password"
-                  value={value}
-                  onChange={e => setValue(e.target.value)}
-                  onKeyDown={e => e.key === 'Enter' && handleConfirm()}
-                  style={{ width:'100%', paddingRight:36 }}
-                  autoFocus
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPass(v => !v)}
-                  style={{ position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', background:'none', border:'none', cursor:'pointer', color:'var(--muted)', padding:0, display:'flex', alignItems:'center' }}
-                >
-                  <EyeIcon />
-                </button>
-              </div>
-            </div>
-          ) : (
-            <div className="form-group" style={{ marginBottom:0 }}>
-              <label>Type <strong>{confirmText}</strong> to confirm</label>
-              <Input
-                type="text"
-                placeholder={confirmText}
-                value={value}
-                onChange={e => setValue(e.target.value)}
-                onKeyDown={e => e.key === 'Enter' && handleConfirm()}
-                autoFocus
-              />
-            </div>
-          )}
-          {error && <div style={{ color:'var(--danger)', fontSize:'.78rem', marginTop:8 }}>{error}</div>}
-        </div>
-      )}
-    </Modal>
-  );
-}

package/components/Layout.jsx

@@ -1,128 +0,0 @@
-import { useState, useEffect } from 'react';
-import { NavLink, Outlet, useNavigate } from 'react-router-dom';
-import { useAuth } from '../hooks/useAuth';
-import { useBranding } from '../hooks/useBranding';
-import { getDevices } from '../lib/api';
-import useSSE from '../hooks/useSSE';
-import { SSEProvider } from '../hooks/SSEContext';
-import StatsBar from './StatsBar';
-import Input from './Input';
-import {
-  LayoutDashboard, Monitor, FileText,
-  Settings, LogOut, Bell, Search,
-  Cpu, Usb
-} from 'lucide-react';
-
-const NAV = [
-  { label: 'Dashboard',     to: '/admin/dashboard',    icon: LayoutDashboard, perm: 'dashboard.view' },
-  { label: 'Devices',       to: '/admin/devices',      icon: Monitor,         perm: 'devices.view_list' },
-  // { label: 'Audit Log',     to: '/admin/audit',        icon: FileText,        perm: 'audit.view_logs' },
-  { label: 'Firmware',      to: '/admin/firmware',     icon: Cpu,             perm: 'firmware.view_list' },
-  { label: 'Settings',      to: '/admin/settings',     icon: Settings,        permAny: ['settings.roles.view','settings.admins.view_all','settings.admins.view_own','settings.branding.app_name','settings.sso.add','settings.general.token_expiry','settings.generate.keypair','settings.view'] },
-];
-
-function BrandIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <rect x="1"   y="10" width="2.5" height="5"  rx="1" fill="rgba(255,255,255,.55)"/>
-      <rect x="4.5" y="7"  width="2.5" height="8"  rx="1" fill="rgba(255,255,255,.7)"/>
-      <rect x="8"   y="4"  width="2.5" height="11" rx="1" fill="rgba(255,255,255,.85)"/>
-      <rect x="11.5" y="1" width="2.5" height="14" rx="1" fill="#fff"/>
-    </svg>
-  );
-}
-
-export default function Layout() {
-  const { user, logout, hasPermission, hasAnyPermission } = useAuth();
-  const branding         = useBranding();
-  const navigate         = useNavigate();
-  const [stats, setStats] = useState({ total: 0, active: 0, blocked: 0, actions: 0 });
-  const [server, setServer] = useState(null);
-
-  useSSE('/api/events', {
-    'dashboard': (data) => {
-      setStats({
-        total: data.totalDevices || 0,
-        active: (data.totalDevices || 0) - (data.totalBlocked || 0),
-        blocked: data.totalBlocked || 0,
-        actions: data.totalActions || 0,
-      });
-      if (data.server) setServer(data.server);
-    },
-  });
-
-  function handleLogout() { logout(); navigate('/admin/login'); }
-
-  const initial = (user?.username || 'A')[0].toUpperCase();
-  const appName = branding.app_name || 'CAN';
-
-  return (
-    <div className="layout">
-      <aside className="sidebar">
-        <div className="sidebar-logo">
-          <div className="sidebar-logo-inner">
-            {branding.logo_light ? (
-              <img src={branding.logo_light} alt={appName}
-                style={{ height: 28, maxWidth: 120, objectFit: 'contain', flexShrink: 0 }} />
-            ) : (
-              <>
-                <div className="sidebar-logo-icon brand-icon"><BrandIcon /></div>
-                <span className="sidebar-logo-name">{appName}</span>
-              </>
-            )}
-          </div>
-        </div>
-
-        <nav className="sidebar-nav">
-          {NAV.filter(item => {
-            if (item.permAny) return hasAnyPermission(item.permAny);
-            return !item.perm || hasPermission(item.perm);
-          }).map(item => (
-            <NavLink key={item.to} to={item.to} end={item.end}
-              className={({ isActive }) => `nav-item${isActive ? ' active' : ''}`}>
-              <item.icon size={15} />
-              {item.label}
-            </NavLink>
-          ))}
-        </nav>
-
-        <div className="sidebar-footer">
-          <div className="sidebar-user" onClick={handleLogout} title="Logout">
-            <div className="avatar">{initial}</div>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div className="user-name">{user?.username}</div>
-              <div className="user-role">{user?.role}</div>
-            </div>
-            <LogOut size={13} color="rgba(255,255,255,.3)" />
-          </div>
-        </div>
-      </aside>
-
-      <div className="main">
-        <header className="topbar">
-          <div className="topbar-left">
-            <Input
-              size="sm"
-              placeholder="Search device"
-              icon={<Search size={14} />}
-              style={{ width: 220, background: 'var(--surface)', borderRadius: 8 }}
-            />
-          </div>
-          <div className="topbar-center">
-            <StatsBar {...stats} />
-          </div>
-          <div className="topbar-right">
-            <button className="topbar-icon-btn" title="Notifications">
-              <Bell size={18} />
-            </button>
-          </div>
-        </header>
-        <div className="content">
-          <SSEProvider value={{ devices: null, stats, server }}>
-            <Outlet />
-          </SSEProvider>
-        </div>
-      </div>
-    </div>
-  );
-}

package/components/Notifications.jsx

@@ -1,118 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { useEvents } from '../hooks/useEvents.jsx';
-
-const MAX_NOTIFS = 50;
-
-function eventToNotif(type, data) {
-  const id  = Date.now() + Math.random();
-  const now = new Date();
-  switch (type) {
-    // Phase B: wire up notification types for new events (passkey registered,
-    // new sign-in detected, one-time code requested, etc.) here.
-    default:
-      return null;
-  }
-}
-
-export default function Notifications() {
-  const [notifs, setNotifs]   = useState([]);
-  const [open,   setOpen]     = useState(false);
-  const ref                   = useRef(null);
-
-  const unread = notifs.filter(n => !n.read).length;
-
-  useEvents({});
-
-  function addNotif(type, data) {
-    const n = eventToNotif(type, data);
-    if (!n) return;
-    setNotifs(prev => [n, ...prev].slice(0, MAX_NOTIFS));
-    // Browser notification if permission granted
-    if ('Notification' in window && Notification.permission === 'granted') {
-      new Notification(n.title, { body: n.message });
-    }
-  }
-
-  function markAllRead() {
-    setNotifs(prev => prev.map(n => ({ ...n, read: true })));
-  }
-
-  function clearAll() {
-    setNotifs([]);
-    setOpen(false);
-  }
-
-  // Close on outside click
-  useEffect(() => {
-    function handler(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, []);
-
-  function timeAgo(date) {
-    const s = Math.floor((Date.now() - date) / 1000);
-    if (s < 60)   return `${s}s ago`;
-    if (s < 3600) return `${Math.floor(s/60)}m ago`;
-    if (s < 86400)return `${Math.floor(s/3600)}h ago`;
-    return `${Math.floor(s/86400)}d ago`;
-  }
-
-  const iconFor = () => (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
-  );
-
-  return (
-    <div ref={ref} style={{ position:'relative', height:'100%', display:'flex', alignItems:'center' }}>
-      <button
-        onClick={() => { setOpen(o => !o); if (!open && unread) markAllRead(); }}
-        style={{ position:'relative', background:'none', border:'none', cursor:'pointer', color:'var(--muted)', padding:'6px', display:'flex', alignItems:'center', borderRadius:'var(--rads)', transition:'color .15s' }}
-        onMouseEnter={e => e.currentTarget.style.color = 'var(--primary-text)'}
-        onMouseLeave={e => e.currentTarget.style.color = 'var(--muted)'}
-      >
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
-          <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
-        </svg>
-        {unread > 0 && (
-          <span style={{ position:'absolute', top:2, right:2, minWidth:16, height:16, borderRadius:8, background:'var(--danger)', color:'#fff', fontSize:10, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center', padding:'0 3px', lineHeight:1 }}>
-            {unread > 99 ? '99+' : unread}
-          </span>
-        )}
-      </button>
-
-      <div style={{
-        position:'absolute', right:0, top:'100%', width:320, zIndex:1000,
-        background:'var(--surface)', border:'1px solid var(--border)',
-        borderRadius:'var(--rads)', boxShadow:'var(--shadow-lg)',
-        opacity: open ? 1 : 0,
-        transform: open ? 'translateY(0)' : 'translateY(-6px)',
-        pointerEvents: open ? 'auto' : 'none',
-        transition: 'opacity .15s ease, transform .15s ease',
-      }}>
-        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'10px 14px', borderBottom:'1px solid var(--border)' }}>
-          <span style={{ fontSize:'.82rem', fontWeight:600 }}>Notifications</span>
-          {notifs.length > 0 && (
-            <button onClick={clearAll} style={{ fontSize:'.7rem', color:'var(--muted)', background:'none', border:'none', cursor:'pointer' }}>Clear all</button>
-          )}
-        </div>
-
-        <div style={{ maxHeight:360, overflowY:'auto' }}>
-          {notifs.length === 0 ? (
-            <div style={{ padding:'24px 16px', textAlign:'center', color:'var(--muted)', fontSize:'.8rem' }}>No notifications</div>
-          ) : notifs.map(n => (
-            <div key={n.id} style={{ display:'flex', gap:10, padding:'10px 14px', borderBottom:'1px solid var(--border-light)', background: n.read ? 'transparent' : 'var(--accent-bg)', transition:'background .2s' }}>
-              <div style={{ flexShrink:0, width:28, height:28, borderRadius:'50%', background:'var(--grey-1)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--accent)', marginTop:1 }}>
-                {iconFor(n.type)}
-              </div>
-              <div style={{ flex:1, minWidth:0 }}>
-                <div style={{ fontSize:'.78rem', fontWeight:600, marginBottom:2 }}>{n.title}</div>
-                <div style={{ fontSize:'.72rem', color:'var(--muted)', lineHeight:1.4 }}>{n.message}</div>
-                <div style={{ fontSize:'.68rem', color:'var(--muted)', marginTop:4, opacity:.7 }}>{timeAgo(n.time)}</div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}