@micha.bigler/ui-core-micha 3.14.4 → 4.0.1

package/src/components/PasskeysComponent.jsx

@@ -1,252 +0,0 @@
-// src/auth/components/PasskeysComponent.jsx
-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 { useTranslation } from 'react-i18next';
-import { fetchPasskeys, deletePasskey } from '../auth/authApi';
-import { registerPasskey } from '../utils/authService';
-import { FEATURES } from '../auth/authConfig';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export const PASSKEYS_ALERT_SX = { mb: 2 };
-export const PASSKEYS_DIVIDER_SX = { mb: 2 };
-
-export function PasskeysComponent() {
-  const { t, i18n } = useTranslation();
-
-  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 [messageKey, setMessageKey] = useState(null);
-  const [errorKey, setErrorKey] = useState(null);
-
-  const passkeysSupported =
-    typeof window !== 'undefined' && !!window.PublicKeyCredential;
-
-  const loadPasskeys = async () => {
-    setErrorKey(null);
-    try {
-      const data = await fetchPasskeys();
-      setPasskeys(Array.isArray(data) ? data : []);
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.PASSKEY_LIST_FAILED'));
-    } finally {
-      setLoading(false);
-      setReloading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (!FEATURES.passkeysEnabled || !passkeysSupported) {
-      setLoading(false);
-      return;
-    }
-    loadPasskeys();
-  }, [passkeysSupported]);
-
-  const handleCreate = async () => {
-    setMessageKey(null);
-    setErrorKey(null);
-
-    if (!FEATURES.passkeysEnabled || !passkeysSupported) {
-      setErrorKey(t('Auth.PASSKEY_NOT_AVAILABLE_ENV'));
-      return;
-    }
-
-    setCreating(true);
-    try {
-      const fallbackName =
-        name?.trim() || `Passkey on ${navigator.platform || 'this device'}`;
-
-      await registerPasskey(fallbackName);
-      setMessageKey('Auth.PASSKEY_CREATE_SUCCESS');
-      setName('');
-
-      setReloading(true);
-      await loadPasskeys();
-    } catch (err) {
-      // registerPasskey wirft normalisierte Errors mit .code
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.PASSKEY_CREATE_FAILED'));
-    } finally {
-      setCreating(false);
-    }
-  };
-
-  const handleDelete = async (id) => {
-    setMessageKey(null);
-    setErrorKey(null);
-
-    setDeletingIds((prev) => new Set(prev).add(id));
-    try {
-      await deletePasskey(id);
-      setPasskeys((prev) => prev.filter((pk) => pk.id !== id));
-      setMessageKey('Auth.PASSKEY_DELETE_SUCCESS');
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.PASSKEY_DELETE_FAILED'));
-    } finally {
-      setDeletingIds((prev) => {
-        const next = new Set(prev);
-        next.delete(id);
-        return next;
-      });
-    }
-  };
-
-  if (!FEATURES.passkeysEnabled) {
-    return (
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          {t('Auth.PASSKEYS_TITLE')}
-        </Typography>
-        <Typography variant="body2" color="text.secondary">
-          {t('Auth.PASSKEYS_DISABLED_PROJECT')}
-        </Typography>
-      </Box>
-    );
-  }
-
-  return (
-    <Box>
-      <Typography variant="h6" gutterBottom>
-        {t('Auth.PASSKEYS_TITLE')}
-      </Typography>
-      <Typography variant="body2" sx={{ mb: 1 }}>
-        {t('Auth.PASSKEYS_DESCRIPTION')}
-      </Typography>
-
-      {!passkeysSupported && (
-        <Alert severity="info" sx={PASSKEYS_ALERT_SX}>
-          {t('Auth.PASSKEY_BROWSER_NOT_SUPPORTED')}
-        </Alert>
-      )}
-
-      {messageKey && (
-        <Alert severity="success" sx={PASSKEYS_ALERT_SX}>
-          {t(messageKey)}
-        </Alert>
-      )}
-      {errorKey && (
-        <Alert severity="error" sx={PASSKEYS_ALERT_SX}>
-          {errorKey}
-        </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={t('Auth.PASSKEY_NAME_LABEL')}
-              placeholder={t('Auth.PASSKEY_NAME_PLACEHOLDER')}
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              disabled={creating}
-              fullWidth
-            />
-            <Button
-              variant="outlined"
-              onClick={handleCreate}
-              disabled={creating}
-            >
-              {creating
-                ? t('Auth.PASSKEY_ADD_BUTTON_LOADING')
-                : t('Auth.PASSKEY_ADD_BUTTON')}
-            </Button>
-          </Stack>
-        </Box>
-      )}
-
-      <Divider sx={PASSKEYS_DIVIDER_SX} />
-
-      {/* List of existing passkeys */}
-      {loading ? (
-        <Box sx={{ py: 2, display: 'flex', justifyContent: 'center' }}>
-          <CircularProgress size={24} />
-        </Box>
-      ) : (
-        <Box>
-          <Typography variant="subtitle1" gutterBottom>
-            {t('Auth.PASSKEY_EXISTING_TITLE')}
-          </Typography>
-
-          {reloading && (
-            <Box sx={{ py: 1, display: 'flex', justifyContent: 'center' }}>
-              <CircularProgress size={20} />
-            </Box>
-          )}
-
-          {passkeys.length === 0 ? (
-            <Typography variant="body2" color="text.secondary">
-              {t('Auth.PASSKEY_NONE')}
-            </Typography>
-          ) : (
-            <List dense>
-              {passkeys.map((pk) => (
-                <ListItem key={pk.id} divider>
-                  <ListItemText
-                    primary={pk.name || t('Auth.PASSKEY_DEFAULT_NAME')}
-                    secondary={
-                      pk.last_used_at
-                        ? t('Auth.PASSKEY_LAST_USED_AT', {
-                            value: pk.last_used_at,
-                          })
-                        : pk.created_at
-                        ? t('Auth.PASSKEY_CREATED_AT', {
-                            value: pk.created_at,
-                          })
-                        : undefined
-                    }
-                  />
-                  <ListItemSecondaryAction>
-                    <Tooltip title={t('Auth.PASSKEY_DELETE_TOOLTIP')}>
-                      <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>
-  );
-};
-

package/src/components/PasswordChangeForm.jsx

@@ -1,87 +0,0 @@
-import React, { useState } from 'react';
-import { Box, TextField, Button, Stack } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-/**
- * A simplified form to handle password changes.
- * Does not require password confirmation.
- */
-export function PasswordChangeForm({
-  onSubmit,
-  submitting = false,
-  passwordRulesHint,
-  minPasswordLength = 8,
-  allowNumericPassword = false,
-}) {
-  const { t } = useTranslation();
-  const [currentPassword, setCurrentPassword] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [localErrorKey, setLocalErrorKey] = useState(null);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!onSubmit) return;
-
-    setLocalErrorKey(null);
-
-    if (minPasswordLength > 0 && newPassword.length < minPasswordLength) {
-      setLocalErrorKey('Auth.PASSWORD_TOO_SHORT_LOCAL');
-      return;
-    }
-
-    if (!allowNumericPassword && /^\d+$/.test(newPassword)) {
-      setLocalErrorKey('Auth.PASSWORD_NUMERIC_LOCAL');
-      return;
-    }
-
-    // Parent steuert Loading/Errors, hier nur Aufruf
-    await onSubmit(currentPassword, newPassword);
-
-    // Optional: Felder zurücksetzen bei Erfolg (macht dein Parent aktuell so)
-    setCurrentPassword('');
-    setNewPassword('');
-  };
-
-  return (
-    <Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 500 }}>
-      {localErrorKey && (
-        <Box sx={{ color: 'error.main', fontSize: 14, mb: 2 }}>
-          {t(localErrorKey)}
-        </Box>
-      )}
-      <Stack spacing={2}>
-        <TextField
-          label={t('Auth.CURRENT_PASSWORD_LABEL')}
-          type="password"
-          value={currentPassword}
-          onChange={(e) => setCurrentPassword(e.target.value)}
-          required
-          fullWidth
-          disabled={submitting}
-        />
-        <TextField
-          label={t('Auth.NEW_PASSWORD_LABEL')}
-          type="password"
-          value={newPassword}
-          onChange={(e) => setNewPassword(e.target.value)}
-          required
-          fullWidth
-          disabled={submitting}
-          helperText={passwordRulesHint || t('Auth.PASSWORD_RULES_HINT')}
-        />
-        <Box>
-          <Button
-            type="submit"
-            variant="contained"
-            disabled={submitting}
-          >
-            {submitting
-              ? t('Auth.CHANGE_PASSWORD_BUTTON_LOADING')
-              : t('Auth.CHANGE_PASSWORD_BUTTON')}
-          </Button>
-        </Box>
-      </Stack>
-    </Box>
-  );
-};
-

package/src/components/PasswordResetRequestForm.jsx

@@ -1,43 +0,0 @@
-// src/auth/components/PasswordResetRequestForm.jsx
-import React, { useState } from 'react';
-import { Box, TextField, Button } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-export function PasswordResetRequestForm({ onSubmit, submitting = false }) {
-  const { t } = useTranslation();
-  const [email, setEmail] = useState('');
-
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    if (!onSubmit) return;
-    onSubmit(email);
-  };
-
-  return (
-    <Box
-      component="form"
-      onSubmit={handleSubmit}
-      sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }}
-    >
-      <TextField
-        label={t('Auth.EMAIL_LABEL')}
-        type="email"
-        required
-        fullWidth
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        disabled={submitting}
-      />
-      <Button
-        type="submit"
-        variant="contained"
-        disabled={submitting}
-      >
-        {submitting
-          ? t('Auth.RESET_REQUEST_BUTTON_LOADING')
-          : t('Auth.RESET_REQUEST_BUTTON')}
-      </Button>
-    </Box>
-  );
-};
-

package/src/components/PasswordSetForm.jsx

@@ -1,97 +0,0 @@
-// src/auth/components/PasswordSetForm.jsx
-import React, { useState } from 'react';
-import { Box, TextField, Button } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-
-/**
- * Simple form to set a new password (once, with confirmation).
- * Caller passes onSubmit(newPassword) and handles redirect / API call.
- */
-export function PasswordSetForm({
-  onSubmit,
-  submitting = false,
-  passwordRulesHint,
-  minPasswordLength = 8,
-  allowNumericPassword = false,
-}) {
-  const { t } = useTranslation();
-
-  const [password1, setPassword1] = useState('');
-  const [password2, setPassword2] = useState('');
-  const [localErrorKey, setLocalErrorKey] = useState(null);
-
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    setLocalErrorKey(null);
-
-    if (!password1 || !password2) {
-      setLocalErrorKey('Auth.PASSWORD_SET_LOCAL_REQUIRED');
-      return;
-    }
-
-    if (password1 !== password2) {
-      setLocalErrorKey('Auth.PASSWORD_SET_LOCAL_MISMATCH');
-      return;
-    }
-
-    if (minPasswordLength > 0 && password1.length < minPasswordLength) {
-      setLocalErrorKey('Auth.PASSWORD_TOO_SHORT_LOCAL');
-      return;
-    }
-
-    if (!allowNumericPassword && /^\d+$/.test(password1)) {
-      setLocalErrorKey('Auth.PASSWORD_NUMERIC_LOCAL');
-      return;
-    }
-
-    if (onSubmit) {
-      onSubmit(password1);
-    }
-  };
-
-  return (
-    <Box
-      component="form"
-      onSubmit={handleSubmit}
-      sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 2 }}
-    >
-      {localErrorKey && (
-        <Box sx={{ color: 'error.main', fontSize: 14 }}>
-          {t(localErrorKey)}
-        </Box>
-      )}
-
-      <TextField
-        label={t('Auth.NEW_PASSWORD_LABEL')}
-        type="password"
-        fullWidth
-        autoComplete="new-password"
-        value={password1}
-        onChange={(e) => setPassword1(e.target.value)}
-        disabled={submitting}
-        helperText={passwordRulesHint || t('Auth.PASSWORD_RULES_HINT')}
-      />
-
-      <TextField
-        label={t('Auth.PASSWORD_CONFIRM_LABEL')}
-        type="password"
-        fullWidth
-        autoComplete="new-password"
-        value={password2}
-        onChange={(e) => setPassword2(e.target.value)}
-        disabled={submitting}
-      />
-
-      <Button
-        type="submit"
-        variant="contained"
-        disabled={submitting}
-      >
-        {submitting
-          ? t('Auth.PASSWORD_SET_BUTTON_LOADING')
-          : t('Auth.PASSWORD_SET_BUTTON')}
-      </Button>
-    </Box>
-  );
-};
-