@micha.bigler/ui-core-micha 1.2.7 → 1.2.8

package/dist/components/PasskeysComponent.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { Box, Typography, Stack, Button, TextField, IconButton, CircularProgress, Alert, List, ListItem, ListItemText, ListItemSecondaryAction, Tooltip, Divider, } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { authApi } from '../auth/authApi';
+import { FEATURES } from '../auth/authConfig';
+const PasskeysComponent = () => {
+    const [passkeys, setPasskeys] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [reloading, setReloading] = useState(false);
+    const [name, setName] = useState('');
+    const [creating, setCreating] = useState(false);
+    const [deletingIds, setDeletingIds] = useState(new Set());
+    const [message, setMessage] = useState('');
+    const [error, setError] = useState('');
+    const passkeysSupported = typeof window !== 'undefined' && !!window.PublicKeyCredential;
+    const loadPasskeys = async () => {
+        var _a, _b;
+        setError('');
+        try {
+            const data = await authApi.fetchPasskeys();
+            setPasskeys(data);
+        }
+        catch (err) {
+            const msg = ((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) ||
+                (err === null || err === void 0 ? void 0 : err.message) ||
+                'Could not load passkeys.';
+            setError(msg);
+        }
+        finally {
+            setLoading(false);
+            setReloading(false);
+        }
+    };
+    useEffect(() => {
+        if (!FEATURES.passkeysEnabled || !passkeysSupported) {
+            setLoading(false);
+            return;
+        }
+        loadPasskeys();
+    }, [passkeysSupported]);
+    const handleCreate = async () => {
+        var _a, _b;
+        setMessage('');
+        setError('');
+        if (!FEATURES.passkeysEnabled || !passkeysSupported) {
+            setError('Passkeys are not available in this environment.');
+            return;
+        }
+        setCreating(true);
+        try {
+            const fallbackName = (name === null || name === void 0 ? void 0 : name.trim()) ||
+                `Passkey on ${navigator.platform || 'this device'}`;
+            await authApi.registerPasskey(fallbackName);
+            setMessage('Passkey added successfully.');
+            setName('');
+            setReloading(true);
+            await loadPasskeys();
+        }
+        catch (err) {
+            const msg = ((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) ||
+                (err === null || err === void 0 ? void 0 : err.message) ||
+                'Could not add passkey.';
+            setError(msg);
+        }
+        finally {
+            setCreating(false);
+        }
+    };
+    const handleDelete = async (id) => {
+        var _a, _b;
+        setMessage('');
+        setError('');
+        setDeletingIds((prev) => new Set(prev).add(id));
+        try {
+            await authApi.deletePasskey(id);
+            setPasskeys((prev) => prev.filter((pk) => pk.id !== id));
+            setMessage('Passkey deleted.');
+        }
+        catch (err) {
+            const msg = ((_b = (_a = err === null || err === void 0 ? void 0 : err.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.detail) ||
+                (err === null || err === void 0 ? void 0 : err.message) ||
+                'Could not delete passkey.';
+            setError(msg);
+        }
+        finally {
+            setDeletingIds((prev) => {
+                const next = new Set(prev);
+                next.delete(id);
+                return next;
+            });
+        }
+    };
+    if (!FEATURES.passkeysEnabled) {
+        return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Passkeys" }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: "Passkeys are disabled for this project." })] }));
+    }
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Passkeys" }), _jsx(Typography, { variant: "body2", sx: { mb: 1 }, children: "Use passkeys for passwordless sign-in on this device." }), !passkeysSupported && (_jsx(Alert, { severity: "info", sx: { mb: 2 }, children: "Passkeys are not supported in this browser." })), message && (_jsx(Alert, { severity: "success", sx: { mb: 2 }, children: message })), error && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error })), passkeysSupported && (_jsx(Box, { sx: { mb: 3 }, children: _jsxs(Stack, { spacing: 2, direction: { xs: 'column', sm: 'row' }, alignItems: { xs: 'stretch', sm: 'flex-start' }, children: [_jsx(TextField, { label: "Passkey name", placeholder: "e.g. MacBook, iPhone", value: name, onChange: (e) => setName(e.target.value), disabled: creating, fullWidth: true }), _jsx(Button, { variant: "outlined", onClick: handleCreate, disabled: creating, children: creating ? 'Adding…' : 'Add passkey' })] }) })), _jsx(Divider, { sx: { mb: 2 } }), loading ? (_jsx(Box, { sx: { py: 2, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, { size: 24 }) })) : (_jsxs(Box, { children: [_jsx(Typography, { variant: "subtitle1", gutterBottom: true, children: "Existing passkeys" }), reloading && (_jsx(Box, { sx: { py: 1, display: 'flex', justifyContent: 'center' }, children: _jsx(CircularProgress, { size: 20 }) })), passkeys.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.secondary", children: "No passkeys registered yet." })) : (_jsx(List, { dense: true, children: passkeys.map((pk) => (_jsxs(ListItem, { divider: true, children: [_jsx(ListItemText, { primary: pk.name || 'Passkey', secondary: pk.last_used_at
+                                        ? `Last used: ${pk.last_used_at}`
+                                        : pk.created_at
+                                            ? `Created: ${pk.created_at}`
+                                            : undefined }), _jsx(ListItemSecondaryAction, { children: _jsx(Tooltip, { title: "Delete passkey for this device", children: _jsx("span", { children: _jsx(IconButton, { edge: "end", "aria-label": "delete", onClick: () => handleDelete(pk.id), disabled: deletingIds.has(pk.id), size: "small", children: deletingIds.has(pk.id) ? (_jsx(CircularProgress, { size: 18 })) : (_jsx(DeleteIcon, { fontSize: "small" })) }) }) }) })] }, pk.id))) }))] }))] }));
+};
+export default PasskeysComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "private": false,

package/src/components/PasskeysComponent.jsx

@@ -0,0 +1,250 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Box,
+  Typography,
+  Stack,
+  Button,
+  TextField,
+  IconButton,
+  CircularProgress,
+  Alert,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction,
+  Tooltip,
+  Divider,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { authApi } from '../auth/authApi';
+import { FEATURES } from '../auth/authConfig';
+
+const PasskeysComponent = () => {
+  const [passkeys, setPasskeys] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [reloading, setReloading] = useState(false);
+
+  const [name, setName] = useState('');
+  const [creating, setCreating] = useState(false);
+  const [deletingIds, setDeletingIds] = useState(new Set());
+
+  const [message, setMessage] = useState('');
+  const [error, setError] = useState('');
+
+  const passkeysSupported =
+    typeof window !== 'undefined' && !!window.PublicKeyCredential;
+
+  const loadPasskeys = async () => {
+    setError('');
+    try {
+      const data = await authApi.fetchPasskeys();
+      setPasskeys(data);
+    } catch (err) {
+      const msg =
+        err?.response?.data?.detail ||
+        err?.message ||
+        'Could not load passkeys.';
+      setError(msg);
+    } finally {
+      setLoading(false);
+      setReloading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!FEATURES.passkeysEnabled || !passkeysSupported) {
+      setLoading(false);
+      return;
+    }
+    loadPasskeys();
+  }, [passkeysSupported]);
+
+  const handleCreate = async () => {
+    setMessage('');
+    setError('');
+
+    if (!FEATURES.passkeysEnabled || !passkeysSupported) {
+      setError('Passkeys are not available in this environment.');
+      return;
+    }
+
+    setCreating(true);
+    try {
+      const fallbackName =
+        name?.trim() ||
+        `Passkey on ${navigator.platform || 'this device'}`;
+
+      await authApi.registerPasskey(fallbackName);
+      setMessage('Passkey added successfully.');
+      setName('');
+
+      setReloading(true);
+      await loadPasskeys();
+    } catch (err) {
+      const msg =
+        err?.response?.data?.detail ||
+        err?.message ||
+        'Could not add passkey.';
+      setError(msg);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleDelete = async (id) => {
+    setMessage('');
+    setError('');
+
+    setDeletingIds((prev) => new Set(prev).add(id));
+    try {
+      await authApi.deletePasskey(id);
+      setPasskeys((prev) => prev.filter((pk) => pk.id !== id));
+      setMessage('Passkey deleted.');
+    } catch (err) {
+      const msg =
+        err?.response?.data?.detail ||
+        err?.message ||
+        'Could not delete passkey.';
+      setError(msg);
+    } finally {
+      setDeletingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    }
+  };
+
+  if (!FEATURES.passkeysEnabled) {
+    return (
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Passkeys
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Passkeys are disabled for this project.
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>
+        Passkeys
+      </Typography>
+      <Typography variant="body2" sx={{ mb: 1 }}>
+        Use passkeys for passwordless sign-in on this device.
+      </Typography>
+
+      {!passkeysSupported && (
+        <Alert severity="info" sx={{ mb: 2 }}>
+          Passkeys are not supported in this browser.
+        </Alert>
+      )}
+
+      {message && (
+        <Alert severity="success" sx={{ mb: 2 }}>
+          {message}
+        </Alert>
+      )}
+      {error && (
+        <Alert severity="error" sx={{ mb: 2 }}>
+          {error}
+        </Alert>
+      )}
+
+      {/* Add passkey form */}
+      {passkeysSupported && (
+        <Box sx={{ mb: 3 }}>
+          <Stack
+            spacing={2}
+            direction={{ xs: 'column', sm: 'row' }}
+            alignItems={{ xs: 'stretch', sm: 'flex-start' }}
+          >
+            <TextField
+              label="Passkey name"
+              placeholder="e.g. MacBook, iPhone"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              disabled={creating}
+              fullWidth
+            />
+            <Button
+              variant="outlined"
+              onClick={handleCreate}
+              disabled={creating}
+            >
+              {creating ? 'Adding…' : 'Add passkey'}
+            </Button>
+          </Stack>
+        </Box>
+      )}
+
+      <Divider sx={{ mb: 2 }} />
+
+      {/* List of existing passkeys */}
+      {loading ? (
+        <Box sx={{ py: 2, display: 'flex', justifyContent: 'center' }}>
+          <CircularProgress size={24} />
+        </Box>
+      ) : (
+        <Box>
+          <Typography variant="subtitle1" gutterBottom>
+            Existing passkeys
+          </Typography>
+
+          {reloading && (
+            <Box sx={{ py: 1, display: 'flex', justifyContent: 'center' }}>
+              <CircularProgress size={20} />
+            </Box>
+          )}
+
+          {passkeys.length === 0 ? (
+            <Typography variant="body2" color="text.secondary">
+              No passkeys registered yet.
+            </Typography>
+          ) : (
+            <List dense>
+              {passkeys.map((pk) => (
+                <ListItem key={pk.id} divider>
+                  <ListItemText
+                    primary={pk.name || 'Passkey'}
+                    secondary={
+                      pk.last_used_at
+                        ? `Last used: ${pk.last_used_at}`
+                        : pk.created_at
+                        ? `Created: ${pk.created_at}`
+                        : undefined
+                    }
+                  />
+                  <ListItemSecondaryAction>
+                    <Tooltip title="Delete passkey for this device">
+                      <span>
+                        <IconButton
+                          edge="end"
+                          aria-label="delete"
+                          onClick={() => handleDelete(pk.id)}
+                          disabled={deletingIds.has(pk.id)}
+                          size="small"
+                        >
+                          {deletingIds.has(pk.id) ? (
+                            <CircularProgress size={18} />
+                          ) : (
+                            <DeleteIcon fontSize="small" />
+                          )}
+                        </IconButton>
+                      </span>
+                    </Tooltip>
+                  </ListItemSecondaryAction>
+                </ListItem>
+              ))}
+            </List>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default PasskeysComponent;