@qwickapps/server 1.5.2 → 1.6.1

package/ui/src/pages/PreferencesPage.tsx

@@ -0,0 +1,240 @@
+/**
+ * PreferencesPage Component
+ *
+ * User preferences management page with JSON editor.
+ * Preferences are stored as flexible JSON objects per user.
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import { useState, useEffect } from 'react';
+import {
+  Box,
+  Card,
+  CardContent,
+  TextField,
+  Typography,
+  Alert,
+  CircularProgress,
+  Chip,
+} from '@mui/material';
+import { Button } from '@qwickapps/react-framework';
+import { api } from '../api/controlPanelApi';
+import { MAX_PREFERENCES_SIZE, MAX_NESTING_DEPTH } from '../config/preferences';
+
+/**
+ * Check if an object exceeds maximum nesting depth
+ */
+function exceedsMaxDepth(obj: unknown, depth = 0): boolean {
+  if (depth > MAX_NESTING_DEPTH) return true;
+  if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+    return Object.values(obj as Record<string, unknown>).some(v => exceedsMaxDepth(v, depth + 1));
+  }
+  if (Array.isArray(obj)) {
+    return obj.some(v => exceedsMaxDepth(v, depth + 1));
+  }
+  return false;
+}
+
+export function PreferencesPage() {
+  const [jsonText, setJsonText] = useState('{}');
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+  const [jsonError, setJsonError] = useState<string | null>(null);
+  const [hasChanges, setHasChanges] = useState(false);
+
+  // Load preferences on mount
+  useEffect(() => {
+    const fetchPreferences = async () => {
+      try {
+        const response = await api.getPreferences();
+        setJsonText(JSON.stringify(response.preferences, null, 2));
+        setError(null);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load preferences');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPreferences();
+  }, []);
+
+  // Handle JSON text changes
+  const handleJsonChange = (value: string) => {
+    setJsonText(value);
+    setHasChanges(true);
+    setSuccess(false);
+
+    // Validate JSON syntax and nesting depth
+    try {
+      const parsed = JSON.parse(value);
+
+      // Check nesting depth
+      if (exceedsMaxDepth(parsed)) {
+        setJsonError(`Preferences object too deeply nested (max ${MAX_NESTING_DEPTH} levels)`);
+        return;
+      }
+
+      setJsonError(null);
+    } catch (err) {
+      setJsonError(err instanceof Error ? err.message : 'Invalid JSON');
+    }
+  };
+
+  // Save preferences
+  const handleSave = async () => {
+    if (jsonError) {
+      return;
+    }
+
+    try {
+      const parsedPreferences = JSON.parse(jsonText);
+      setSaving(true);
+      setError(null);
+
+      const response = await api.updatePreferences(parsedPreferences);
+      setJsonText(JSON.stringify(response.preferences, null, 2));
+      setSuccess(true);
+      setHasChanges(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save preferences');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Reset to defaults
+  const handleReset = async () => {
+    if (!confirm('Reset all preferences to defaults? This cannot be undone.')) {
+      return;
+    }
+
+    try {
+      setSaving(true);
+      setError(null);
+
+      await api.deletePreferences();
+
+      // Reload preferences after reset
+      const response = await api.getPreferences();
+      setJsonText(JSON.stringify(response.preferences, null, 2));
+      setSuccess(true);
+      setHasChanges(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to reset preferences');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Format JSON
+  const handleFormat = () => {
+    try {
+      const parsed = JSON.parse(jsonText);
+      setJsonText(JSON.stringify(parsed, null, 2));
+      setJsonError(null);
+    } catch (err) {
+      // JSON already invalid, error already shown
+    }
+  };
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  const charCount = jsonText.length;
+  const sizePercent = (charCount / MAX_PREFERENCES_SIZE) * 100;
+
+  return (
+    <Box>
+      <Box sx={{ mb: 3, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Box>
+          <Typography variant="h4" sx={{ color: 'var(--theme-text-primary)' }}>
+            Preferences
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'var(--theme-text-secondary)', mt: 0.5 }}>
+            Manage your user preferences as JSON
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Chip
+            label={`${charCount.toLocaleString()} / ${MAX_PREFERENCES_SIZE.toLocaleString()} bytes`}
+            size="small"
+            color={sizePercent > 90 ? 'error' : sizePercent > 75 ? 'warning' : 'default'}
+          />
+        </Box>
+      </Box>
+
+      {error && (
+        <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError(null)}>
+          {error}
+        </Alert>
+      )}
+
+      {success && (
+        <Alert severity="success" sx={{ mb: 2 }} onClose={() => setSuccess(false)}>
+          Preferences saved successfully
+        </Alert>
+      )}
+
+      <Card sx={{ bgcolor: 'var(--theme-surface)', mb: 2 }}>
+        <CardContent>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+            <Typography variant="h6" sx={{ color: 'var(--theme-text-primary)' }}>
+              Preferences JSON
+            </Typography>
+            <Button
+              variant="outlined"
+              onClick={handleFormat}
+              disabled={!!jsonError}
+            >
+              Format JSON
+            </Button>
+          </Box>
+
+          <TextField
+            fullWidth
+            multiline
+            rows={20}
+            value={jsonText}
+            onChange={(e) => handleJsonChange(e.target.value)}
+            error={!!jsonError}
+            helperText={jsonError || `Edit your preferences as JSON. Max ${MAX_PREFERENCES_SIZE.toLocaleString()} bytes, max ${MAX_NESTING_DEPTH} levels deep.`}
+            sx={{
+              '& .MuiInputBase-root': {
+                fontFamily: 'monospace',
+                fontSize: '0.875rem',
+              },
+            }}
+          />
+        </CardContent>
+      </Card>
+
+      <Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
+        <Button
+          variant="outlined"
+          onClick={handleReset}
+          disabled={saving}
+          color="error"
+        >
+          Reset to Defaults
+        </Button>
+        <Button
+          variant="contained"
+          onClick={handleSave}
+          disabled={!!jsonError || !hasChanges || saving}
+          loading={saving}
+        >
+          Save Preferences
+        </Button>
+      </Box>
+    </Box>
+  );
+}

package/ui/src/pages/UsersPage.tsx

@@ -38,6 +38,7 @@ import LocalOfferIcon from '@mui/icons-material/LocalOffer';
 import BlockIcon from '@mui/icons-material/Block';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import DeleteIcon from '@mui/icons-material/Delete';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import {
   api,
   type User,
@@ -93,6 +94,10 @@ export function UsersPage({
   const [bans, setBans] = useState<Ban[]>([]);
   const [bansTotal, setBansTotal] = useState(0);
 
+  // Invitations state
+  const [invitations, setInvitations] = useState<User[]>([]);
+  const [invitationsTotal, setInvitationsTotal] = useState(0);
+
   // Shared state
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -106,6 +111,16 @@ export function UsersPage({
     expiresAt: '',
   });
 
+  // Invite dialog state
+  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
+  const [newInvite, setNewInvite] = useState({
+    email: '',
+    name: '',
+    role: '',
+    expiresInDays: 7,
+  });
+  const [inviteResult, setInviteResult] = useState<{ token: string; inviteLink: string } | null>(null);
+
   // Entitlements lookup state
   const [entitlementsDialogOpen, setEntitlementsDialogOpen] = useState(false);
   const [entitlementsSearch, setEntitlementsSearch] = useState('');
@@ -192,6 +207,23 @@ export function UsersPage({
     }
   }, [features.bans]);
 
+  // Fetch invitations
+  const fetchInvitations = useCallback(async () => {
+    if (!features.users) return;
+
+    setLoading(true);
+    try {
+      const data = await api.getInvitations();
+      setInvitations(data.users || []);
+      setInvitationsTotal(data.total);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch invitations');
+    } finally {
+      setLoading(false);
+    }
+  }, [features.users]);
+
   // Initial fetch and tab-based fetching
   useEffect(() => {
     if (!featuresLoaded) return;
@@ -200,8 +232,10 @@ export function UsersPage({
       fetchUsers();
     } else if (activeTab === 1 && features.bans) {
       fetchBans();
+    } else if (activeTab === 2 && features.users) {
+      fetchInvitations();
     }
-  }, [activeTab, featuresLoaded, features.users, features.bans, fetchUsers, fetchBans]);
+  }, [activeTab, featuresLoaded, features.users, features.bans, fetchUsers, fetchBans, fetchInvitations]);
 
   // Fetch bans count for stats (only on initial load)
   useEffect(() => {
@@ -248,6 +282,36 @@ export function UsersPage({
     }
   };
 
+  // Invite handlers
+  const handleInviteUser = async () => {
+    try {
+      const result = await api.inviteUser({
+        email: newInvite.email,
+        name: newInvite.name || undefined,
+        role: newInvite.role || undefined,
+        expiresInDays: newInvite.expiresInDays,
+      });
+      setInviteResult({ token: result.token, inviteLink: result.inviteLink });
+      setSuccess('User invitation created successfully');
+      fetchUsers();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to invite user');
+    }
+  };
+
+  const handleCopyInviteLink = () => {
+    if (inviteResult) {
+      navigator.clipboard.writeText(inviteResult.inviteLink);
+      setSuccess('Invite link copied to clipboard');
+    }
+  };
+
+  const handleCloseInviteDialog = () => {
+    setInviteDialogOpen(false);
+    setNewInvite({ email: '', name: '', role: '', expiresInDays: 7 });
+    setInviteResult(null);
+  };
+
   // Entitlements handlers
   const handleEntitlementsSearch = async () => {
     if (!entitlementsSearch.trim()) {
@@ -362,6 +426,7 @@ export function UsersPage({
   const tabs: { label: string; count?: number }[] = [];
   if (features.users) tabs.push({ label: 'Users', count: usersTotal });
   if (features.bans) tabs.push({ label: 'Banned', count: bansTotal });
+  if (features.users) tabs.push({ label: 'Invitations', count: invitationsTotal });
 
   if (!featuresLoaded) {
     return (
@@ -380,6 +445,14 @@ export function UsersPage({
         </Box>
         <Box sx={{ display: 'flex', gap: 1 }}>
           {headerActions}
+          {features.users && (
+            <Button
+              variant="primary"
+              icon="person_add"
+              label="Invite User"
+              onClick={() => setInviteDialogOpen(true)}
+            />
+          )}
           {features.entitlements && (
             <Button
               variant="outlined"
@@ -390,7 +463,7 @@ export function UsersPage({
           )}
           {features.bans && (
             <Button
-              variant="primary"
+              variant="outlined"
               color="error"
               icon="block"
               label="Ban User"
@@ -645,9 +718,159 @@ export function UsersPage({
               </Table>
             </TableContainer>
           )}
+
+          {/* Invitations Tab */}
+          {activeTab === 2 && features.users && (
+            <TableContainer>
+              <Table>
+                <TableHead>
+                  <TableRow>
+                    <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>Email</TableCell>
+                    <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>Name</TableCell>
+                    <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>Created</TableCell>
+                    <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>Expires</TableCell>
+                    <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>Status</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {invitations.map((invitation) => {
+                    const isExpired = invitation.invitation_expires_at && new Date(invitation.invitation_expires_at) < new Date();
+                    return (
+                      <TableRow key={invitation.id}>
+                        <TableCell sx={{ color: 'var(--theme-text-primary)', borderColor: 'var(--theme-border)' }}>
+                          <Text variant="body1" content={invitation.email} fontWeight="500" />
+                        </TableCell>
+                        <TableCell sx={{ color: 'var(--theme-text-primary)', borderColor: 'var(--theme-border)' }}>
+                          {invitation.name || '--'}
+                        </TableCell>
+                        <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                          {formatDate(invitation.created_at)}
+                        </TableCell>
+                        <TableCell sx={{ color: 'var(--theme-text-secondary)', borderColor: 'var(--theme-border)' }}>
+                          {formatDate(invitation.invitation_expires_at)}
+                        </TableCell>
+                        <TableCell sx={{ borderColor: 'var(--theme-border)' }}>
+                          <Chip
+                            size="small"
+                            label={isExpired ? 'Expired' : 'Pending'}
+                            sx={{
+                              bgcolor: isExpired ? 'var(--theme-error)20' : 'var(--theme-warning)20',
+                              color: isExpired ? 'var(--theme-error)' : 'var(--theme-warning)',
+                            }}
+                          />
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                  {invitations.length === 0 && !loading && (
+                    <TableRow>
+                      <TableCell colSpan={5} align="center" sx={{ py: 4, color: 'var(--theme-text-secondary)' }}>
+                        No pending invitations
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          )}
         </CardContent>
       </Card>
 
+      {/* Invite User Dialog */}
+      {features.users && (
+        <Dialog
+          open={inviteDialogOpen}
+          onClose={handleCloseInviteDialog}
+          maxWidth="sm"
+          fullWidth
+        >
+          <DialogTitle>Invite User</DialogTitle>
+          <DialogContent>
+            {!inviteResult ? (
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
+                <TextField
+                  label="Email"
+                  fullWidth
+                  required
+                  value={newInvite.email}
+                  onChange={(e) => setNewInvite({ ...newInvite, email: e.target.value })}
+                  placeholder="user@example.com"
+                  type="email"
+                />
+                <TextField
+                  label="Name (Optional)"
+                  fullWidth
+                  value={newInvite.name}
+                  onChange={(e) => setNewInvite({ ...newInvite, name: e.target.value })}
+                  placeholder="Enter user's full name"
+                />
+                <TextField
+                  label="Role (Optional)"
+                  fullWidth
+                  value={newInvite.role}
+                  onChange={(e) => setNewInvite({ ...newInvite, role: e.target.value })}
+                  placeholder="e.g., admin, editor, viewer"
+                  helperText="Stored in user metadata for your app to use"
+                />
+                <TextField
+                  label="Invitation Expiry"
+                  type="number"
+                  fullWidth
+                  value={newInvite.expiresInDays}
+                  onChange={(e) => setNewInvite({ ...newInvite, expiresInDays: parseInt(e.target.value) || 7 })}
+                  InputProps={{
+                    endAdornment: <InputAdornment position="end">days</InputAdornment>,
+                  }}
+                  helperText="How many days until the invitation expires"
+                />
+              </Box>
+            ) : (
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
+                <Alert severity="success">
+                  Invitation created successfully! Share this link with the user:
+                </Alert>
+                <TextField
+                  label="Invitation Link"
+                  fullWidth
+                  value={inviteResult.inviteLink}
+                  InputProps={{
+                    readOnly: true,
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <Tooltip title="Copy to clipboard">
+                          <IconButton onClick={handleCopyInviteLink} edge="end">
+                            <ContentCopyIcon />
+                          </IconButton>
+                        </Tooltip>
+                      </InputAdornment>
+                    ),
+                  }}
+                  helperText="Click the icon to copy the link to clipboard"
+                />
+                <Alert severity="info">
+                  The user will need to visit this link to activate their account.
+                </Alert>
+              </Box>
+            )}
+          </DialogContent>
+          <DialogActions>
+            <Button
+              variant="text"
+              label="Close"
+              onClick={handleCloseInviteDialog}
+            />
+            {!inviteResult && (
+              <Button
+                variant="primary"
+                label="Create Invitation"
+                onClick={handleInviteUser}
+                disabled={!newInvite.email}
+              />
+            )}
+          </DialogActions>
+        </Dialog>
+      )}
+
       {/* Ban User Dialog */}
       {features.bans && (
         <Dialog