shiny-url-input-box 1.1.1 → 1.3.0

package/src/ShinyUrlApiKeys.tsx

@@ -0,0 +1,305 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Box,
+  Paper,
+  Typography,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  IconButton,
+  TextField,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Alert,
+  Chip,
+  Snackbar,
+  CircularProgress
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { getDefaultApiBaseUrl } from './shortener';
+
+export interface ShinyUrlApiKeysProps {
+  apiKey: string; // The user's/admin's token to authenticate
+  apiBaseUrl?: string;
+  className?: string;
+}
+
+interface ApiKeyData {
+  _id: string;
+  name: string;
+  key: string;
+  isActive: boolean;
+  createdAt: string;
+  lastUsedAt?: string;
+}
+
+export const ShinyUrlApiKeys: React.FC<ShinyUrlApiKeysProps> = ({
+  apiKey,
+  apiBaseUrl,
+  className = ''
+}) => {
+  const [loading, setLoading] = useState(true);
+  const [keys, setKeys] = useState<ApiKeyData[]>([]);
+  const [openDialog, setOpenDialog] = useState(false);
+  const [newKeyName, setNewKeyName] = useState('');
+  const [createdKey, setCreatedKey] = useState<string | null>(null);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+  const [creating, setCreating] = useState(false);
+
+  const baseUrl = apiBaseUrl || getDefaultApiBaseUrl();
+
+  const fetchKeys = useCallback(async () => {
+    if (!apiKey) return;
+    setLoading(true);
+    try {
+      const response = await fetch(`${baseUrl}/api/admin/api-keys`, {
+        headers: {
+          'Authorization': `Bearer ${apiKey}`
+        }
+      });
+      if (response.ok) {
+        const result = await response.json();
+        setKeys(result.data || []);
+      }
+    } catch (error) {
+      console.error('Failed to fetch keys', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiKey, baseUrl]);
+
+  useEffect(() => {
+    fetchKeys();
+  }, [fetchKeys]);
+
+  const handleCreate = async () => {
+    setCreating(true);
+    try {
+      const response = await fetch(`${baseUrl}/api/admin/api-keys`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${apiKey}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ name: newKeyName || 'Default Key' })
+      });
+      
+      const result = await response.json();
+      
+      if (result.success && result.data) {
+        setCreatedKey(result.data.key);
+        setOpenDialog(false);
+        setNewKeyName('');
+        setSnackbarMessage('API key created successfully! Copy it now - you won\'t be able to see it again.');
+        setSnackbarOpen(true);
+        fetchKeys(); // Refresh list
+      }
+    } catch (error) {
+      setSnackbarMessage('Failed to create key');
+      setSnackbarOpen(true);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleToggle = async (id: string, currentStatus: boolean) => {
+    try {
+      const response = await fetch(`${baseUrl}/api/admin/api-keys/${id}`, {
+        method: 'PATCH',
+        headers: {
+          'Authorization': `Bearer ${apiKey}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ isActive: !currentStatus })
+      });
+      
+      if (response.ok) {
+        setSnackbarMessage('API key updated successfully');
+        setSnackbarOpen(true);
+        fetchKeys(); // Refresh list
+      }
+    } catch (error) {
+      setSnackbarMessage('Failed to update key');
+      setSnackbarOpen(true);
+    }
+  };
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard.writeText(text);
+    setSnackbarMessage('Copied to clipboard!');
+    setSnackbarOpen(true);
+  };
+
+  const formatKey = (key: string) => {
+    if (key.length > 20) {
+      return key.substring(0, 10) + '...' + key.substring(key.length - 4);
+    }
+    return key;
+  };
+
+  if (!apiKey) {
+     return <Typography color="error">Authentication required</Typography>;
+  }
+
+  return (
+    <Box className={className}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+        <Typography variant="h4">API Keys</Typography>
+        <Button
+          variant="contained"
+          startIcon={<AddIcon />}
+          onClick={() => setOpenDialog(true)}
+        >
+          Create New Key
+        </Button>
+      </Box>
+
+      <Paper>
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Name</TableCell>
+                <TableCell>Key</TableCell>
+                <TableCell>Status</TableCell>
+                <TableCell>Created</TableCell>
+                <TableCell>Last Used</TableCell>
+                <TableCell>Actions</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={6} align="center">
+                    <CircularProgress size={24} />
+                  </TableCell>
+                </TableRow>
+              ) : keys.length > 0 ? (
+                keys.map((key) => (
+                  <TableRow key={key._id}>
+                    <TableCell>{key.name || 'Default Key'}</TableCell>
+                    <TableCell>
+                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        <Typography variant="body2" sx={{ fontFamily: 'monospace' }}>
+                          {formatKey(key.key)}
+                        </Typography>
+                        <IconButton
+                          size="small"
+                          onClick={() => handleCopy(key.key)}
+                          title="Copy full key"
+                        >
+                          <ContentCopyIcon fontSize="small" />
+                        </IconButton>
+                      </Box>
+                    </TableCell>
+                    <TableCell>
+                      <Chip
+                        label={key.isActive ? 'Active' : 'Disabled'}
+                        color={key.isActive ? 'success' : 'default'}
+                        size="small"
+                      />
+                    </TableCell>
+                    <TableCell>
+                      {new Date(key.createdAt).toLocaleDateString()}
+                    </TableCell>
+                    <TableCell>
+                      {key.lastUsedAt
+                        ? new Date(key.lastUsedAt).toLocaleDateString()
+                        : 'Never'}
+                    </TableCell>
+                    <TableCell>
+                      <Button
+                        size="small"
+                        variant="outlined"
+                        color={key.isActive ? 'error' : 'success'}
+                        onClick={() => handleToggle(key._id, key.isActive)}
+                      >
+                        {key.isActive ? 'Disable' : 'Enable'}
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={6} align="center">
+                    No API keys found. Create your first key to start using the service.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Paper>
+
+      <Dialog open={openDialog} onClose={() => setOpenDialog(false)}>
+        <DialogTitle>Create New API Key</DialogTitle>
+        <DialogContent>
+          <TextField
+            autoFocus
+            margin="dense"
+            label="Key Name (optional)"
+            fullWidth
+            variant="outlined"
+            value={newKeyName}
+            onChange={(e) => setNewKeyName(e.target.value)}
+            placeholder="e.g., Production Key, Development Key"
+            sx={{ mt: 2 }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
+          <Button
+            onClick={handleCreate}
+            variant="contained"
+            disabled={creating}
+          >
+            {creating ? 'Creating...' : 'Create'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      <Dialog open={!!createdKey} onClose={() => setCreatedKey(null)}>
+        <DialogTitle>API Key Created</DialogTitle>
+        <DialogContent>
+          <Alert severity="warning" sx={{ mb: 2 }}>
+            Copy this key now! You won't be able to see it again.
+          </Alert>
+          <TextField
+            fullWidth
+            value={createdKey || ''}
+            InputProps={{
+              readOnly: true,
+            }}
+            sx={{ mb: 2 }}
+          />
+          <Button
+            fullWidth
+            variant="contained"
+            startIcon={<ContentCopyIcon />}
+            onClick={() => createdKey && handleCopy(createdKey)}
+          >
+            Copy Key
+          </Button>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setCreatedKey(null)}>Close</Button>
+        </DialogActions>
+      </Dialog>
+
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={3000}
+        onClose={() => setSnackbarOpen(false)}
+        message={snackbarMessage}
+      />
+    </Box>
+  );
+};

package/src/ShinyUrlDetailsModal.tsx

@@ -0,0 +1,397 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Box,
+  Typography,
+  Tabs,
+  Tab,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Chip,
+  Grid,
+  Card,
+  CardContent,
+  CircularProgress
+} from '@mui/material';
+import {
+  LineChart,
+  Line,
+  BarChart,
+  Bar,
+  PieChart,
+  Pie,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from 'recharts';
+import { getDefaultApiBaseUrl } from './shortener';
+
+export interface ShinyUrlDetailsModalProps {
+  open: boolean;
+  urlId: string | null;
+  onClose: () => void;
+  apiKey: string;
+  apiBaseUrl?: string;
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`url-tabpanel-${index}`}
+      aria-labelledby={`url-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#82ca9d'];
+
+export const ShinyUrlDetailsModal: React.FC<ShinyUrlDetailsModalProps> = ({ 
+  open, 
+  urlId, 
+  onClose,
+  apiKey,
+  apiBaseUrl
+}) => {
+  const [tabValue, setTabValue] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [urlData, setUrlData] = useState<any>(null);
+  const [clicksData, setClicksData] = useState<any[]>([]);
+  const [analyticsData, setAnalyticsData] = useState<any>(null);
+  const baseUrl = apiBaseUrl || getDefaultApiBaseUrl();
+
+  useEffect(() => {
+    if (open && urlId && apiKey) {
+      setLoading(true);
+      Promise.all([
+        fetch(`${baseUrl}/api/urls/${urlId}`, {
+          headers: { 'Authorization': `Bearer ${apiKey}` }
+        }).then(res => res.json()),
+        fetch(`${baseUrl}/api/analytics/url/${urlId}?limit=1000`, {
+           headers: { 'Authorization': `Bearer ${apiKey}` }
+        }).then(res => res.json()), // Clicks
+        fetch(`${baseUrl}/api/analytics/url/${urlId}/stats?days=30`, {
+           headers: { 'Authorization': `Bearer ${apiKey}` }
+        }).then(res => res.json())  // Analytics
+      ]).then(([urlRes, clicksRes, analyticsRes]) => {
+         if(urlRes.success) setUrlData(urlRes.data);
+         if(clicksRes.success) setClicksData(clicksRes.data || []);
+         if(analyticsRes.success) setAnalyticsData(analyticsRes.data);
+      }).catch(err => {
+         console.error("Failed to fetch url details", err);
+      }).finally(() => {
+         setLoading(false);
+      });
+    }
+  }, [open, urlId, apiKey, baseUrl]);
+
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  // Prepare chart data
+  const clicksOverTime = analyticsData?.clicksOverTime?.map((item: any) => ({
+    date: item._id,
+    clicks: item.count,
+  })) || [];
+
+  const deviceData = analyticsData?.deviceBreakdown?.map((item: any) => ({
+    name: item._id || 'Unknown',
+    value: item.count,
+  })) || [];
+
+  const browserData = analyticsData?.browserBreakdown?.slice(0, 5).map((item: any) => ({
+    name: item._id || 'Unknown',
+    clicks: item.count,
+  })) || [];
+
+  const osData = analyticsData?.osBreakdown?.slice(0, 5).map((item: any) => ({
+    name: item._id || 'Unknown',
+    clicks: item.count,
+  })) || [];
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
+      <DialogTitle>
+        <Box>
+          <Typography variant="h6">URL Details & Analytics</Typography>
+          {urlData && (
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+              <strong>Short Code:</strong>{' '}
+              <Typography
+                component="a"
+                href={`${baseUrl}/${urlData.shortCode}`}
+                target="_blank"
+                rel="noopener"
+                sx={{
+                  color: 'primary.main',
+                  textDecoration: 'none',
+                  fontFamily: 'monospace',
+                  '&:hover': {
+                    textDecoration: 'underline',
+                  },
+                }}
+              >
+                {urlData.shortCode}
+              </Typography>{' '}
+              | <strong>Total Clicks:</strong> {urlData.clicks || 0}
+            </Typography>
+          )}
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        {loading ? (
+          <Box sx={{ p: 3, textAlign: 'center' }}>
+            <CircularProgress />
+            <Typography sx={{ mt: 2 }}>Loading...</Typography>
+          </Box>
+        ) : (
+          <>
+            {urlData && (
+              <Box sx={{ mb: 3 }}>
+                <Typography variant="body2" sx={{ mb: 1 }}>
+                  <strong>Original URL:</strong>
+                </Typography>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    wordBreak: 'break-all',
+                    bgcolor: 'action.hover',
+                    p: 1,
+                    borderRadius: 1,
+                  }}
+                >
+                  {urlData.originalUrl}
+                </Typography>
+              </Box>
+            )}
+
+            <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 2 }}>
+              <Tabs value={tabValue} onChange={handleTabChange}>
+                <Tab label="Analytics" />
+                <Tab label="Click History" />
+              </Tabs>
+            </Box>
+
+            <TabPanel value={tabValue} index={0}>
+              {analyticsData ? (
+                <Grid container spacing={3}>
+                  <Grid item xs={12} md={6}>
+                    <Card>
+                      <CardContent>
+                        <Typography variant="h6" gutterBottom>
+                          Total Clicks
+                        </Typography>
+                        <Typography variant="h3" color="primary">
+                          {analyticsData.totalClicks}
+                        </Typography>
+                      </CardContent>
+                    </Card>
+                  </Grid>
+                  <Grid item xs={12} md={6}>
+                    <Card>
+                      <CardContent>
+                        <Typography variant="h6" gutterBottom>
+                          Unique Users
+                        </Typography>
+                        <Typography variant="h3" color="secondary">
+                          {analyticsData.uniqueUsers}
+                        </Typography>
+                      </CardContent>
+                    </Card>
+                  </Grid>
+
+                  <Grid item xs={12}>
+                    <Paper sx={{ p: 2 }}>
+                      <Typography variant="h6" gutterBottom>
+                        Clicks Over Time (Last 30 Days)
+                      </Typography>
+                      <ResponsiveContainer width="100%" height={300}>
+                        <LineChart data={clicksOverTime}>
+                          <CartesianGrid strokeDasharray="3 3" />
+                          <XAxis dataKey="date" />
+                          <YAxis />
+                          <Tooltip />
+                          <Legend />
+                          <Line
+                            type="monotone"
+                            dataKey="clicks"
+                            stroke="#1976d2"
+                            strokeWidth={2}
+                          />
+                        </LineChart>
+                      </ResponsiveContainer>
+                    </Paper>
+                  </Grid>
+
+                  <Grid item xs={12} md={6}>
+                    <Paper sx={{ p: 2 }}>
+                      <Typography variant="h6" gutterBottom>
+                        Device Breakdown
+                      </Typography>
+                      <ResponsiveContainer width="100%" height={250}>
+                        <PieChart>
+                          <Pie
+                            data={deviceData}
+                            cx="50%"
+                            cy="50%"
+                            labelLine={false}
+                            label={({ name, percent }: any) =>
+                              `${name}: ${(percent * 100).toFixed(0)}%`
+                            }
+                            outerRadius={80}
+                            fill="#8884d8"
+                            dataKey="value"
+                          >
+                            {deviceData.map((_entry: any, index: number) => (
+                              <Cell
+                                key={`cell-${index}`}
+                                fill={COLORS[index % COLORS.length]}
+                              />
+                            ))}
+                          </Pie>
+                          <Tooltip />
+                        </PieChart>
+                      </ResponsiveContainer>
+                    </Paper>
+                  </Grid>
+
+                  <Grid item xs={12} md={6}>
+                    <Paper sx={{ p: 2 }}>
+                      <Typography variant="h6" gutterBottom>
+                        Top Browsers
+                      </Typography>
+                      <ResponsiveContainer width="100%" height={250}>
+                        <BarChart data={browserData}>
+                          <CartesianGrid strokeDasharray="3 3" />
+                          <XAxis dataKey="name" />
+                          <YAxis />
+                          <Tooltip />
+                          <Bar dataKey="clicks" fill="#1976d2" />
+                        </BarChart>
+                      </ResponsiveContainer>
+                    </Paper>
+                  </Grid>
+
+                  <Grid item xs={12}>
+                    <Paper sx={{ p: 2 }}>
+                      <Typography variant="h6" gutterBottom>
+                        Top Operating Systems
+                      </Typography>
+                      <ResponsiveContainer width="100%" height={250}>
+                        <BarChart data={osData}>
+                          <CartesianGrid strokeDasharray="3 3" />
+                          <XAxis dataKey="name" />
+                          <YAxis />
+                          <Tooltip />
+                          <Bar dataKey="clicks" fill="#00C49F" />
+                        </BarChart>
+                      </ResponsiveContainer>
+                    </Paper>
+                  </Grid>
+                </Grid>
+              ) : (
+                <Typography>No analytics data available</Typography>
+              )}
+            </TabPanel>
+
+            <TabPanel value={tabValue} index={1}>
+              <TableContainer component={Paper}>
+                <Table>
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>Date & Time</TableCell>
+                      <TableCell>IP Address</TableCell>
+                      <TableCell>Device</TableCell>
+                      <TableCell>Browser</TableCell>
+                      <TableCell>OS</TableCell>
+                      <TableCell>Referer</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {clicksData.length === 0 ? (
+                      <TableRow>
+                        <TableCell colSpan={6} align="center">
+                          No clicks recorded yet
+                        </TableCell>
+                      </TableRow>
+                    ) : (
+                      clicksData.map((click: any, index: number) => (
+                        <TableRow key={index}>
+                          <TableCell>
+                            {new Date(click.clickedAt).toLocaleString()}
+                          </TableCell>
+                          <TableCell>
+                            <Chip label={click.ipAddress} size="small" />
+                          </TableCell>
+                          <TableCell>
+                            <Chip
+                              label={click.device || 'Unknown'}
+                              size="small"
+                              color="primary"
+                              variant="outlined"
+                            />
+                          </TableCell>
+                          <TableCell>{click.browser || 'Unknown'}</TableCell>
+                          <TableCell>{click.os || 'Unknown'}</TableCell>
+                          <TableCell>
+                            {click.referer ? (
+                              <Typography
+                                variant="body2"
+                                sx={{
+                                  maxWidth: 200,
+                                  overflow: 'hidden',
+                                  textOverflow: 'ellipsis',
+                                  whiteSpace: 'nowrap',
+                                }}
+                                title={click.referer}
+                              >
+                                {click.referer}
+                              </Typography>
+                            ) : (
+                              <Typography variant="body2" color="text.secondary">
+                                Direct
+                              </Typography>
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      ))
+                    )}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            </TabPanel>
+          </>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};