@qwickapps/server 1.2.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/DashboardPage.tsx

@@ -1,38 +1,19 @@
 import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   Box,
   Card,
   CardContent,
+  CardActionArea,
   Typography,
-  Grid,
   CircularProgress,
   Chip,
 } from '@mui/material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ErrorIcon from '@mui/icons-material/Error';
 import WarningIcon from '@mui/icons-material/Warning';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import MemoryIcon from '@mui/icons-material/Memory';
-import StorageIcon from '@mui/icons-material/Storage';
 import { api, HealthResponse, InfoResponse } from '../api/controlPanelApi';
-
-function formatUptime(ms: number): string {
-  const seconds = Math.floor(ms / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
-
-  if (days > 0) {
-    return `${days}d ${hours % 24}h ${minutes % 60}m`;
-  }
-  if (hours > 0) {
-    return `${hours}h ${minutes % 60}m`;
-  }
-  if (minutes > 0) {
-    return `${minutes}m ${seconds % 60}s`;
-  }
-  return `${seconds}s`;
-}
+import { DashboardWidgetRenderer, PluginWidgetRenderer } from '../dashboard';
 
 function getStatusIcon(status: string) {
   switch (status) {
@@ -61,6 +42,7 @@ function getStatusColor(status: string): string {
 }
 
 export function DashboardPage() {
+  const navigate = useNavigate();
   const [health, setHealth] = useState<HealthResponse | null>(null);
   const [info, setInfo] = useState<InfoResponse | null>(null);
   const [loading, setLoading] = useState(true);
@@ -119,7 +101,7 @@ export function DashboardPage() {
         Real-time overview of {info?.product || 'your service'}
       </Typography>
 
-      {/* Status Banner */}
+      {/* Service Status Banner - clickable to navigate to Health page */}
       <Card
         sx={{
           mb: 4,
@@ -127,138 +109,35 @@ export function DashboardPage() {
           border: `2px solid ${getStatusColor(health?.status || 'unknown')}`,
         }}
       >
-        <CardContent sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            {getStatusIcon(health?.status || 'unknown')}
-            <Box>
-              <Typography variant="h6" sx={{ color: 'var(--theme-text-primary)' }}>
-                Service Status: {health?.status?.charAt(0).toUpperCase()}{health?.status?.slice(1)}
-              </Typography>
-              <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
-                Last updated: {health?.timestamp ? new Date(health.timestamp).toLocaleString() : 'N/A'}
-              </Typography>
-            </Box>
-          </Box>
-          <Chip
-            label={`${healthyCount}/${totalCount} checks passing`}
-            sx={{
-              bgcolor: getStatusColor(health?.status || 'unknown') + '20',
-              color: getStatusColor(health?.status || 'unknown'),
-            }}
-          />
-        </CardContent>
-      </Card>
-
-      {/* Stats Grid */}
-      <Grid container spacing={3} sx={{ mb: 4 }}>
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
-            <CardContent>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-                <AccessTimeIcon sx={{ color: 'var(--theme-primary)' }} />
-                <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
-                  Uptime
+        <CardActionArea onClick={() => navigate('/health')}>
+          <CardContent sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              {getStatusIcon(health?.status || 'unknown')}
+              <Box>
+                <Typography variant="h6" sx={{ color: 'var(--theme-text-primary)' }}>
+                  Service Status: {health?.status?.charAt(0).toUpperCase()}{health?.status?.slice(1)}
                 </Typography>
-              </Box>
-              <Typography variant="h4" sx={{ color: 'var(--theme-primary)' }}>
-                {health ? formatUptime(health.uptime) : 'N/A'}
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
-            <CardContent>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-                <CheckCircleIcon sx={{ color: 'var(--theme-success)' }} />
                 <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
-                  Health Checks
+                  Click to view detailed health information
                 </Typography>
               </Box>
-              <Typography variant="h4" sx={{ color: 'var(--theme-success)' }}>
-                {healthyCount}/{totalCount}
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
-            <CardContent>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-                <MemoryIcon sx={{ color: 'var(--theme-warning)' }} />
-                <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
-                  Version
-                </Typography>
-              </Box>
-              <Typography variant="h4" sx={{ color: 'var(--theme-text-primary)' }}>
-                {info?.version || 'N/A'}
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
+            </Box>
+            <Chip
+              label={`${healthyCount}/${totalCount} checks passing`}
+              sx={{
+                bgcolor: getStatusColor(health?.status || 'unknown') + '20',
+                color: getStatusColor(health?.status || 'unknown'),
+              }}
+            />
+          </CardContent>
+        </CardActionArea>
+      </Card>
 
-        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
-          <Card sx={{ bgcolor: 'var(--theme-surface)', height: '100%' }}>
-            <CardContent>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
-                <StorageIcon sx={{ color: 'var(--theme-info)' }} />
-                <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)' }}>
-                  Product
-                </Typography>
-              </Box>
-              <Typography variant="h5" sx={{ color: 'var(--theme-text-primary)' }}>
-                {info?.product || 'N/A'}
-              </Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-      </Grid>
+      {/* Plugin widgets (from server-side widget contributions) */}
+      <PluginWidgetRenderer />
 
-      {/* Health Checks Detail */}
-      <Card sx={{ bgcolor: 'var(--theme-surface)' }}>
-        <CardContent>
-          <Typography variant="h6" sx={{ mb: 3, color: 'var(--theme-text-primary)' }}>
-            Health Checks
-          </Typography>
-          <Grid container spacing={2}>
-            {healthChecks.map(([name, check]) => (
-              <Grid size={{ xs: 12, sm: 6, md: 4 }} key={name}>
-                <Box
-                  sx={{
-                    p: 2,
-                    borderRadius: 1,
-                    bgcolor: 'var(--theme-background)',
-                    border: `1px solid ${getStatusColor(check.status)}40`,
-                  }}
-                >
-                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                      {getStatusIcon(check.status)}
-                      <Typography sx={{ color: 'var(--theme-text-primary)', fontWeight: 500 }}>
-                        {name}
-                      </Typography>
-                    </Box>
-                    {check.latency !== undefined && (
-                      <Chip
-                        label={`${check.latency}ms`}
-                        size="small"
-                        sx={{ bgcolor: 'var(--theme-surface)', color: 'var(--theme-text-secondary)' }}
-                      />
-                    )}
-                  </Box>
-                  {check.error && (
-                    <Typography variant="caption" sx={{ color: 'var(--theme-error)' }}>
-                      {check.error}
-                    </Typography>
-                  )}
-                </Box>
-              </Grid>
-            ))}
-          </Grid>
-        </CardContent>
-      </Card>
+      {/* Legacy widgets from context (for backwards compatibility) */}
+      <DashboardWidgetRenderer />
     </Box>
   );
 }