@qwickapps/server 1.3.0 → 1.3.1

package/ui/src/pages/AuthPage.tsx

@@ -0,0 +1,259 @@
+import { useState, useEffect } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Chip,
+  CircularProgress,
+  Alert,
+  IconButton,
+  Tooltip,
+} from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+import BlockIcon from '@mui/icons-material/Block';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import { api, AuthConfigStatus } from '../api/controlPanelApi';
+
+/**
+ * Get the status color for the auth state
+ */
+function getStateColor(state: string): string {
+  switch (state) {
+    case 'enabled':
+      return 'var(--theme-success)';
+    case 'error':
+      return 'var(--theme-error)';
+    case 'disabled':
+    default:
+      return 'var(--theme-text-secondary)';
+  }
+}
+
+/**
+ * Get the status icon for the auth state
+ */
+function getStateIcon(state: string) {
+  switch (state) {
+    case 'enabled':
+      return <CheckCircleIcon sx={{ color: 'var(--theme-success)' }} />;
+    case 'error':
+      return <ErrorIcon sx={{ color: 'var(--theme-error)' }} />;
+    case 'disabled':
+    default:
+      return <BlockIcon sx={{ color: 'var(--theme-text-secondary)' }} />;
+  }
+}
+
+export function AuthPage() {
+  const [status, setStatus] = useState<AuthConfigStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState<string | null>(null);
+
+  const fetchStatus = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await api.getAuthConfig();
+      setStatus(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch auth status');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchStatus();
+  }, []);
+
+  const handleCopy = (key: string, value: string) => {
+    navigator.clipboard.writeText(value);
+    setCopied(key);
+    setTimeout(() => setCopied(null), 2000);
+  };
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card sx={{ bgcolor: 'var(--theme-surface)', border: '1px solid var(--theme-error)' }}>
+        <CardContent>
+          <Typography color="error">{error}</Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const configEntries = status?.config ? Object.entries(status.config) : [];
+
+  return (
+    <Box>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+        <Typography variant="h4" sx={{ color: 'var(--theme-text-primary)' }}>
+          Authentication
+        </Typography>
+        <Tooltip title="Refresh">
+          <IconButton onClick={fetchStatus} sx={{ color: 'var(--theme-text-secondary)' }}>
+            <RefreshIcon />
+          </IconButton>
+        </Tooltip>
+      </Box>
+      <Typography variant="body2" sx={{ mb: 4, color: 'var(--theme-text-secondary)' }}>
+        Auth plugin configuration status
+      </Typography>
+
+      {/* Status Card */}
+      <Card sx={{ bgcolor: 'var(--theme-surface)', mb: 3 }}>
+        <CardContent>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 2 }}>
+            {getStateIcon(status?.state || 'disabled')}
+            <Box>
+              <Typography variant="h6" sx={{ color: 'var(--theme-text-primary)' }}>
+                Status:{' '}
+                <Chip
+                  label={status?.state?.toUpperCase() || 'UNKNOWN'}
+                  size="small"
+                  sx={{
+                    bgcolor: `${getStateColor(status?.state || 'disabled')}20`,
+                    color: getStateColor(status?.state || 'disabled'),
+                    fontWeight: 600,
+                  }}
+                />
+              </Typography>
+              {status?.adapter && (
+                <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)', mt: 0.5 }}>
+                  Adapter: <strong>{status.adapter}</strong>
+                </Typography>
+              )}
+            </Box>
+          </Box>
+
+          {/* Error Message */}
+          {status?.state === 'error' && status.error && (
+            <Alert severity="error" sx={{ mb: 2 }}>
+              {status.error}
+            </Alert>
+          )}
+
+          {/* Missing Variables */}
+          {status?.missingVars && status.missingVars.length > 0 && (
+            <Alert severity="warning" sx={{ mb: 2 }}>
+              <Typography variant="body2" sx={{ fontWeight: 600, mb: 1 }}>
+                Missing environment variables:
+              </Typography>
+              <Box component="ul" sx={{ m: 0, pl: 2 }}>
+                {status.missingVars.map((v) => (
+                  <li key={v}>
+                    <code>{v}</code>
+                  </li>
+                ))}
+              </Box>
+            </Alert>
+          )}
+
+          {/* Disabled State Info */}
+          {status?.state === 'disabled' && (
+            <Alert severity="info">
+              <Typography variant="body2">
+                Authentication is disabled. Set the <code>AUTH_ADAPTER</code> environment variable to enable.
+              </Typography>
+              <Typography variant="body2" sx={{ mt: 1 }}>
+                Valid options: <code>supertokens</code>, <code>auth0</code>, <code>supabase</code>, <code>basic</code>
+              </Typography>
+            </Alert>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Configuration Table */}
+      {configEntries.length > 0 && (
+        <Card sx={{ bgcolor: 'var(--theme-surface)' }}>
+          <CardContent sx={{ pb: 0 }}>
+            <Typography variant="h6" sx={{ color: 'var(--theme-text-primary)', mb: 2 }}>
+              Current Configuration
+            </Typography>
+          </CardContent>
+          <TableContainer>
+            <Table size="small">
+              <TableHead>
+                <TableRow>
+                  <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                    Variable
+                  </TableCell>
+                  <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                    Value
+                  </TableCell>
+                  <TableCell
+                    sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)', width: 60 }}
+                  >
+                    Actions
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {configEntries.map(([key, value]) => (
+                  <TableRow key={key}>
+                    <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+                      <Typography sx={{ color: 'var(--theme-text-primary)', fontFamily: 'monospace', fontSize: 13 }}>
+                        {key}
+                      </Typography>
+                    </TableCell>
+                    <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+                      <Typography
+                        sx={{
+                          color: value.includes('*') ? 'var(--theme-text-secondary)' : 'var(--theme-text-primary)',
+                          fontFamily: 'monospace',
+                          fontSize: 13,
+                        }}
+                      >
+                        {value}
+                      </Typography>
+                    </TableCell>
+                    <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+                      <Tooltip title={copied === key ? 'Copied!' : 'Copy value'}>
+                        <IconButton
+                          size="small"
+                          onClick={() => handleCopy(key, value)}
+                          sx={{ color: copied === key ? 'var(--theme-success)' : 'var(--theme-text-secondary)' }}
+                        >
+                          <ContentCopyIcon fontSize="small" />
+                        </IconButton>
+                      </Tooltip>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Card>
+      )}
+
+      {/* No Configuration */}
+      {status?.state === 'enabled' && configEntries.length === 0 && (
+        <Card sx={{ bgcolor: 'var(--theme-surface)' }}>
+          <CardContent>
+            <Typography sx={{ color: 'var(--theme-text-secondary)', textAlign: 'center' }}>
+              No configuration details available
+            </Typography>
+          </CardContent>
+        </Card>
+      )}
+    </Box>
+  );
+}

package/ui/src/pages/PluginsPage.tsx

@@ -0,0 +1,394 @@
+import { useState, useEffect } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  CircularProgress,
+  Chip,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Collapse,
+  IconButton,
+  Alert,
+} from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import ExtensionIcon from '@mui/icons-material/Extension';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ErrorIcon from '@mui/icons-material/Error';
+import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
+import StopCircleIcon from '@mui/icons-material/StopCircle';
+import { api, PluginInfo, PluginContributions } from '../api/controlPanelApi';
+
+function getStatusIcon(status: PluginInfo['status']) {
+  switch (status) {
+    case 'active':
+      return <CheckCircleIcon sx={{ color: 'var(--theme-success)', fontSize: 20 }} />;
+    case 'error':
+      return <ErrorIcon sx={{ color: 'var(--theme-error)', fontSize: 20 }} />;
+    case 'starting':
+      return <HourglassEmptyIcon sx={{ color: 'var(--theme-warning)', fontSize: 20 }} />;
+    case 'stopped':
+      return <StopCircleIcon sx={{ color: 'var(--theme-text-secondary)', fontSize: 20 }} />;
+    default:
+      return null;
+  }
+}
+
+function getStatusColor(status: PluginInfo['status']): string {
+  switch (status) {
+    case 'active':
+      return 'var(--theme-success)';
+    case 'error':
+      return 'var(--theme-error)';
+    case 'starting':
+      return 'var(--theme-warning)';
+    case 'stopped':
+      return 'var(--theme-text-secondary)';
+    default:
+      return 'var(--theme-text-secondary)';
+  }
+}
+
+function ContributionsSummary({ counts }: { counts: PluginInfo['contributionCounts'] }) {
+  const parts: string[] = [];
+  if (counts.routes > 0) parts.push(`${counts.routes} route${counts.routes > 1 ? 's' : ''}`);
+  if (counts.menuItems > 0) parts.push(`${counts.menuItems} menu item${counts.menuItems > 1 ? 's' : ''}`);
+  if (counts.pages > 0) parts.push(`${counts.pages} page${counts.pages > 1 ? 's' : ''}`);
+  if (counts.widgets > 0) parts.push(`${counts.widgets} widget${counts.widgets > 1 ? 's' : ''}`);
+
+  if (parts.length === 0) {
+    return <Typography sx={{ color: 'var(--theme-text-secondary)', fontSize: '0.875rem' }}>No contributions</Typography>;
+  }
+
+  return (
+    <Typography sx={{ color: 'var(--theme-text-secondary)', fontSize: '0.875rem' }}>
+      {parts.join(', ')}
+    </Typography>
+  );
+}
+
+interface PluginRowProps {
+  plugin: PluginInfo;
+}
+
+function PluginRow({ plugin }: PluginRowProps) {
+  const [open, setOpen] = useState(false);
+  const [contributions, setContributions] = useState<PluginContributions | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [detailError, setDetailError] = useState<string | null>(null);
+
+  const handleToggle = async () => {
+    if (!open && !contributions && !detailError) {
+      setLoading(true);
+      setDetailError(null);
+      try {
+        const detail = await api.getPluginDetail(plugin.id);
+        setContributions(detail.contributions);
+      } catch (err) {
+        console.error('Failed to load plugin details:', err);
+        setDetailError(err instanceof Error ? err.message : 'Failed to load details');
+      } finally {
+        setLoading(false);
+      }
+    }
+    setOpen(!open);
+  };
+
+  const hasContributions =
+    plugin.contributionCounts.routes > 0 ||
+    plugin.contributionCounts.menuItems > 0 ||
+    plugin.contributionCounts.pages > 0 ||
+    plugin.contributionCounts.widgets > 0;
+
+  return (
+    <>
+      <TableRow
+        sx={{
+          '& > *': { borderBottom: open ? 'none' : undefined },
+          cursor: hasContributions ? 'pointer' : 'default',
+          '&:hover': { bgcolor: hasContributions ? 'var(--theme-background)' : undefined },
+        }}
+        onClick={hasContributions ? handleToggle : undefined}
+      >
+        <TableCell sx={{ width: 50, borderColor: 'var(--theme-border)' }}>
+          {hasContributions && (
+            <IconButton size="small" sx={{ color: 'var(--theme-text-secondary)' }}>
+              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
+            </IconButton>
+          )}
+        </TableCell>
+        <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            {getStatusIcon(plugin.status)}
+            <Typography sx={{ color: 'var(--theme-text-primary)', fontWeight: 500 }}>
+              {plugin.name}
+            </Typography>
+          </Box>
+        </TableCell>
+        <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+          <Typography sx={{ color: 'var(--theme-text-secondary)', fontFamily: 'monospace', fontSize: '0.875rem' }}>
+            {plugin.id}
+          </Typography>
+        </TableCell>
+        <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+          {plugin.version ? (
+            <Chip
+              label={`v${plugin.version}`}
+              size="small"
+              sx={{ bgcolor: 'var(--theme-background)', color: 'var(--theme-text-primary)' }}
+            />
+          ) : (
+            <Typography sx={{ color: 'var(--theme-text-secondary)' }}>-</Typography>
+          )}
+        </TableCell>
+        <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+          <Chip
+            label={plugin.status}
+            size="small"
+            sx={{
+              bgcolor: getStatusColor(plugin.status) + '20',
+              color: getStatusColor(plugin.status),
+              textTransform: 'capitalize',
+            }}
+          />
+        </TableCell>
+        <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+          <ContributionsSummary counts={plugin.contributionCounts} />
+        </TableCell>
+      </TableRow>
+
+      {/* Expanded details row */}
+      <TableRow>
+        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6} sx={{ borderColor: 'var(--theme-border)' }}>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <Box sx={{ py: 2, px: 4 }}>
+              {loading ? (
+                <Box sx={{ display: 'flex', justifyContent: 'center', py: 2 }}>
+                  <CircularProgress size={24} />
+                </Box>
+              ) : detailError ? (
+                <Alert severity="error" sx={{ mb: 1 }}>
+                  {detailError}
+                </Alert>
+              ) : contributions ? (
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                  {/* Error message if plugin failed */}
+                  {plugin.status === 'error' && plugin.error && (
+                    <Alert severity="error" sx={{ mb: 1 }}>
+                      {plugin.error}
+                    </Alert>
+                  )}
+
+                  {/* Routes */}
+                  {contributions.routes.length > 0 && (
+                    <Box>
+                      <Typography variant="subtitle2" sx={{ color: 'var(--theme-text-primary)', mb: 1 }}>
+                        Routes ({contributions.routes.length})
+                      </Typography>
+                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                        {contributions.routes.map((route, i) => (
+                          <Chip
+                            key={i}
+                            label={`${route.method.toUpperCase()} ${route.path}`}
+                            size="small"
+                            sx={{
+                              bgcolor: 'var(--theme-background)',
+                              color: 'var(--theme-text-primary)',
+                              fontFamily: 'monospace',
+                              fontSize: '0.75rem',
+                            }}
+                          />
+                        ))}
+                      </Box>
+                    </Box>
+                  )}
+
+                  {/* Menu Items */}
+                  {contributions.menuItems.length > 0 && (
+                    <Box>
+                      <Typography variant="subtitle2" sx={{ color: 'var(--theme-text-primary)', mb: 1 }}>
+                        Menu Items ({contributions.menuItems.length})
+                      </Typography>
+                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                        {contributions.menuItems.map((item) => (
+                          <Chip
+                            key={item.id}
+                            label={`${item.label} (${item.route})`}
+                            size="small"
+                            sx={{ bgcolor: 'var(--theme-background)', color: 'var(--theme-text-primary)' }}
+                          />
+                        ))}
+                      </Box>
+                    </Box>
+                  )}
+
+                  {/* Pages */}
+                  {contributions.pages.length > 0 && (
+                    <Box>
+                      <Typography variant="subtitle2" sx={{ color: 'var(--theme-text-primary)', mb: 1 }}>
+                        Pages ({contributions.pages.length})
+                      </Typography>
+                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                        {contributions.pages.map((page) => (
+                          <Chip
+                            key={page.id}
+                            label={`${page.title || page.id} (${page.route})`}
+                            size="small"
+                            sx={{ bgcolor: 'var(--theme-background)', color: 'var(--theme-text-primary)' }}
+                          />
+                        ))}
+                      </Box>
+                    </Box>
+                  )}
+
+                  {/* Widgets */}
+                  {contributions.widgets.length > 0 && (
+                    <Box>
+                      <Typography variant="subtitle2" sx={{ color: 'var(--theme-text-primary)', mb: 1 }}>
+                        Widgets ({contributions.widgets.length})
+                      </Typography>
+                      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                        {contributions.widgets.map((widget) => (
+                          <Chip
+                            key={widget.id}
+                            label={widget.title}
+                            size="small"
+                            sx={{ bgcolor: 'var(--theme-background)', color: 'var(--theme-text-primary)' }}
+                          />
+                        ))}
+                      </Box>
+                    </Box>
+                  )}
+                </Box>
+              ) : null}
+            </Box>
+          </Collapse>
+        </TableCell>
+      </TableRow>
+    </>
+  );
+}
+
+export function PluginsPage() {
+  const [plugins, setPlugins] = useState<PluginInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchPlugins = async () => {
+      try {
+        const data = await api.getPlugins();
+        setPlugins(data.plugins);
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch plugins');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPlugins();
+  }, []);
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card sx={{ bgcolor: 'var(--theme-surface)', border: '1px solid var(--theme-error)' }}>
+        <CardContent>
+          <Typography color="error">{error}</Typography>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Count plugins by status
+  const activeCount = plugins.filter((p) => p.status === 'active').length;
+  const errorCount = plugins.filter((p) => p.status === 'error').length;
+
+  return (
+    <Box>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+          <Typography variant="h4" sx={{ color: 'var(--theme-text-primary)' }}>
+            Plugins
+          </Typography>
+          <Chip
+            icon={<ExtensionIcon sx={{ fontSize: 16 }} />}
+            label={`${activeCount}/${plugins.length} active`}
+            size="small"
+            sx={{
+              bgcolor: activeCount === plugins.length ? 'var(--theme-success)20' : 'var(--theme-warning)20',
+              color: activeCount === plugins.length ? 'var(--theme-success)' : 'var(--theme-warning)',
+            }}
+          />
+          {errorCount > 0 && (
+            <Chip
+              icon={<ErrorIcon sx={{ fontSize: 16 }} />}
+              label={`${errorCount} error${errorCount > 1 ? 's' : ''}`}
+              size="small"
+              sx={{ bgcolor: 'var(--theme-error)20', color: 'var(--theme-error)' }}
+            />
+          )}
+        </Box>
+      </Box>
+      <Typography variant="body2" sx={{ mb: 4, color: 'var(--theme-text-secondary)' }}>
+        View registered plugins and their contributions to the control panel
+      </Typography>
+
+      {plugins.length === 0 ? (
+        <Card sx={{ bgcolor: 'var(--theme-surface)' }}>
+          <CardContent>
+            <Typography sx={{ color: 'var(--theme-text-secondary)', textAlign: 'center', py: 4 }}>
+              No plugins registered
+            </Typography>
+          </CardContent>
+        </Card>
+      ) : (
+        <Card sx={{ bgcolor: 'var(--theme-surface)' }}>
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)', width: 50 }} />
+                  <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                    Name
+                  </TableCell>
+                  <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                    ID
+                  </TableCell>
+                  <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                    Version
+                  </TableCell>
+                  <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                    Status
+                  </TableCell>
+                  <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                    Contributions
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {plugins.map((plugin) => (
+                  <PluginRow key={plugin.id} plugin={plugin} />
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Card>
+      )}
+    </Box>
+  );
+}

package/ui/vite.lib.config.ts

@@ -28,6 +28,11 @@ export default defineConfig({
       external: [
         'react',
         'react-dom',
+        'react/jsx-runtime',
+        'react/jsx-dev-runtime',
+        'react-is',
+        'prop-types',
+        'hoist-non-react-statics',
         'react-router-dom',
         '@mui/material',
         '@mui/icons-material',