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

package/src/components/SecurityComponent.jsx

@@ -1,141 +0,0 @@
-// src/auth/components/SecurityComponent.jsx
-import React, { useContext, useMemo, useState } from 'react';
-import {
-  Box,
-  Typography,
-  Divider,
-  Alert,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { PasswordChangeForm } from './PasswordChangeForm';
-import { SocialLoginButtons } from './SocialLoginButtons';
-import { PasskeysComponent } from './PasskeysComponent';
-import { MFAComponent } from './MFAComponent';
-import { changePassword } from '../auth/authApi';
-import { startSocialLogin } from '../utils/authService';
-import { AuthContext } from '../auth/AuthContext';
-import { resolveErrorText } from '../utils/resolveErrorText';
-
-export const SECURITY_ALERT_SX = { mb: 2 };
-export const SECURITY_DIVIDER_SX = { my: 3 };
-
-export function SecurityComponent({
-  fromRecovery = false,
-  fromWeakLogin = false,
-}) {
-  const { t, i18n } = useTranslation();
-  const { authMethods } = useContext(AuthContext);
-
-  const [messageKey, setMessageKey] = useState(null);
-  const [errorKey, setErrorKey] = useState(null);
-
-  const socialProviders = Array.isArray(authMethods?.social_providers)
-    ? authMethods.social_providers
-    : [];
-  const canChangePassword = Boolean(authMethods?.password_change);
-  const socialLoginEnabled = Boolean(authMethods?.social_login) && socialProviders.length > 0;
-  const passkeysEnabled = Boolean(authMethods?.passkeys_manage);
-  const mfaEnabled = Boolean(authMethods?.mfa_enabled);
-
-  const sectionOrder = useMemo(
-    () => [
-      canChangePassword ? 'password' : null,
-      socialLoginEnabled ? 'social' : null,
-      passkeysEnabled ? 'passkeys' : null,
-      mfaEnabled ? 'mfa' : null,
-    ].filter(Boolean),
-    [canChangePassword, socialLoginEnabled, passkeysEnabled, mfaEnabled],
-  );
-
-  const needsDividerAfter = (section) => {
-    const idx = sectionOrder.indexOf(section);
-    return idx !== -1 && idx < sectionOrder.length - 1;
-  };
-
-  const handleSocialClick = async (provider) => {
-    setMessageKey(null);
-    setErrorKey(null);
-    try {
-      await startSocialLogin(provider, {
-        process: 'connect',
-        callbackUrl: `${window.location.origin}/account?tab=security`,
-      });
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.SOCIAL_LOGIN_FAILED'));
-    }
-  };
-
-  const handlePasswordChange = async (currentPassword, newPassword) => {
-    setMessageKey(null);
-    setErrorKey(null);
-    try {
-      await changePassword(currentPassword, newPassword);
-      setMessageKey('Auth.RESET_PASSWORD_SUCCESS');
-    } catch (err) {
-      setErrorKey(resolveErrorText(i18n, err, 'Auth.PASSWORD_CHANGE_FAILED'));
-    }
-  };
-
-  return (
-    <Box>
-      {fromRecovery && (
-        <Alert severity="warning" sx={SECURITY_ALERT_SX}>
-          {t('Security.RECOVERY_LOGIN_WARNING')}
-        </Alert>
-      )}
-
-      {fromWeakLogin && (
-        <Alert severity="warning" sx={SECURITY_ALERT_SX}>
-          {t('Security.WEAK_LOGIN_WARNING')}
-        </Alert>
-      )}
-
-      {messageKey && (
-        <Alert severity="success" sx={SECURITY_ALERT_SX}>
-          {t(messageKey)}
-        </Alert>
-      )}
-      {errorKey && (
-        <Alert severity="error" sx={SECURITY_ALERT_SX}>
-          {errorKey}
-        </Alert>
-      )}
-
-      {canChangePassword && (
-        <>
-          <Typography variant="h6" gutterBottom>
-            {t('Auth.LOGIN_PASSWORD_LABEL')}
-          </Typography>
-          <PasswordChangeForm onSubmit={handlePasswordChange} />
-          {needsDividerAfter('password') && <Divider sx={SECURITY_DIVIDER_SX} />}
-        </>
-      )}
-
-      {socialLoginEnabled && (
-        <>
-          <Typography variant="h6" gutterBottom>
-            {t('Security.SOCIAL_SECTION_TITLE')}
-          </Typography>
-          <Typography variant="body2" sx={{ mb: 1 }}>
-            {t('Security.SOCIAL_SECTION_DESCRIPTION')}
-          </Typography>
-          <SocialLoginButtons
-            onProviderClick={handleSocialClick}
-            providers={socialProviders}
-          />
-          {needsDividerAfter('social') && <Divider sx={SECURITY_DIVIDER_SX} />}
-        </>
-      )}
-
-      {passkeysEnabled && (
-        <>
-          <PasskeysComponent />
-          {needsDividerAfter('passkeys') && <Divider sx={SECURITY_DIVIDER_SX} />}
-        </>
-      )}
-
-      {mfaEnabled && <MFAComponent />}
-    </Box>
-  );
-};
-

package/src/components/SocialLoginButtons.jsx

@@ -1,83 +0,0 @@
-// src/auth/components/SocialLoginButtons.jsx
-import React from 'react';
-import { Stack, Button, Box } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { SOCIAL_PROVIDERS } from '../auth/authConfig';
-
-/**
- * Renders buttons for social login providers.
- * The caller passes a handler that receives the provider key.
- */
-export function SocialLoginButtons({ onProviderClick, providers }) {
-  const { t } = useTranslation();
-
-  const handleClick = (provider) => {
-    if (onProviderClick) {
-      onProviderClick(provider);
-    }
-  };
-
-  const activeProviders = Array.isArray(providers) && providers.length > 0
-    ? providers
-    : [SOCIAL_PROVIDERS.google, SOCIAL_PROVIDERS.microsoft];
-
-  return (
-    <Stack spacing={1.5}>
-      {activeProviders.includes(SOCIAL_PROVIDERS.google) && (
-        <Button
-          variant="outlined"
-          fullWidth
-          onClick={() => handleClick(SOCIAL_PROVIDERS.google)}
-          startIcon={
-            <Box
-              sx={{
-                width: 24,
-                height: 24,
-                borderRadius: '50%',
-                border: '1px solid',
-                borderColor: 'divider',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                fontWeight: 700,
-                fontSize: 14,
-              }}
-            >
-              G
-            </Box>
-          }
-        >
-          {t('Auth.LOGIN_SOCIAL_GOOGLE')}
-        </Button>
-      )}
-
-      {activeProviders.includes(SOCIAL_PROVIDERS.microsoft) && (
-        <Button
-          variant="outlined"
-          fullWidth
-          onClick={() => handleClick(SOCIAL_PROVIDERS.microsoft)}
-          startIcon={
-            <Box
-              sx={{
-                width: 24,
-                height: 24,
-                display: 'grid',
-                gridTemplateColumns: '1fr 1fr',
-                gridTemplateRows: '1fr 1fr',
-                gap: '1px',
-              }}
-            >
-              <Box sx={{ bgcolor: 'primary.main', opacity: 0.9 }} />
-              <Box sx={{ bgcolor: 'primary.main', opacity: 0.7 }} />
-              <Box sx={{ bgcolor: 'primary.main', opacity: 0.7 }} />
-              <Box sx={{ bgcolor: 'primary.main', opacity: 0.9 }} />
-            </Box>
-          }
-        >
-          {t('Auth.LOGIN_SOCIAL_MICROSOFT')}
-        </Button>
-      )}
-    </Stack>
-  );
-};
-

package/src/components/SoftChip.jsx

@@ -1,93 +0,0 @@
-import { Box, Chip, Tooltip, Typography } from '@mui/material';
-import { alpha, darken, useTheme } from '@mui/material/styles';
-
-/**
- * A soft tinted annotation chip -- two variants (`caveat`, `status`), four semantic tones. Colour
- * is derived from `theme.palette[tone]` (fill `alpha(main, .12)`, border `alpha(main, .30)`, text
- * and dot `darken(main, .3)`) rather than restated as a literal, so all four tones track the theme
- * and pass AA against the blended fill.
- *
- * Promoted from two independent builds (hram's `ResearchComponents/SoftChip.jsx`, the inline lane
- * pill in cockpit's `BoardView.jsx`). `status` uses the baseline's `overline` typography variant --
- * the second build (cockpit) had already converged on 11/600, uppercase, .4px tracking, which is
- * `overline` in all but the weight step, so this satisfies the kit's shadow-check without a new
- * baseline variant. `caveat` keeps its raw 12/500 -- there is no baseline variant for it (`caption`
- * is 12/400) and adding one is a baseline decision that does not belong in this promotion; the
- * corresponding kitSxRegistry entry carries a stated exemption rather than a silent one.
- */
-const TINT = 0.12;
-const BORDER_TINT = 0.3;
-
-export const SOFT_CHIP_ROOT_SX = {
-  height: 'auto',
-};
-
-export const SOFT_CHIP_CAVEAT_SX = {
-  borderRadius: 1,
-  fontSize: 12,
-  fontWeight: 500,
-};
-
-export const SOFT_CHIP_STATUS_SX = {
-  borderRadius: '999px',
-};
-
-export default function SoftChip({
-  label,
-  tone = 'warning',
-  variant = 'caveat',
-  icon,
-  border = true,
-  title,
-  ...rest
-}) {
-  const theme = useTheme();
-  const palette = theme.palette[tone] ?? theme.palette.warning;
-  const isStatus = variant === 'status';
-  const dotColor = darken(palette.main, 0.3);
-
-  const chip = (
-    <Chip
-      size="small"
-      label={isStatus ? (
-        <Typography variant="overline" component="span" sx={{ color: 'inherit' }}>
-          {label}
-        </Typography>
-      ) : label}
-      icon={icon ?? (
-        <Box
-          component="span"
-          sx={{
-            width: 6,
-            height: 6,
-            borderRadius: '50%',
-            bgcolor: dotColor,
-            flex: 'none',
-          }}
-        />
-      )}
-      sx={[
-        SOFT_CHIP_ROOT_SX,
-        isStatus ? SOFT_CHIP_STATUS_SX : SOFT_CHIP_CAVEAT_SX,
-        {
-          bgcolor: alpha(palette.main, TINT),
-          color: darken(palette.main, 0.3),
-          border: '1px solid',
-          borderColor: border ? alpha(palette.main, BORDER_TINT) : 'transparent',
-          cursor: title ? 'help' : 'default',
-          '& .MuiChip-label': { px: 1, py: 0.5 },
-          '& .MuiChip-icon': { ml: 1, mr: -0.5 },
-        },
-      ]}
-      {...rest}
-    />
-  );
-
-  return title ? (
-    <Tooltip title={title} enterTouchDelay={0}>
-      {chip}
-    </Tooltip>
-  ) : (
-    chip
-  );
-}

package/src/components/StatTile.jsx

@@ -1,39 +0,0 @@
-import { Box, Typography } from '@mui/material';
-
-/**
- * A small bordered KPI tile: muted label, one bold tabular value, optional caption.
- * Promoted from two independent builds (hram's `ResearchComponents/StatTile.jsx`, the inline
- * version in fitness-monitor's `BodyHistoryPage.jsx`) -- `flex: 1` with a `minWidth` floor covers
- * both builds' row behaviours with one rule, and `tabular-nums` is unconditional so a row of
- * tiles reads as a row.
- */
-export default function StatTile({ label, value, caption, accent = false, children, minWidth = 120 }) {
-  return (
-    <Box
-      sx={{
-        flex: 1,
-        minWidth,
-        border: '1px solid',
-        borderColor: accent ? 'primary.main' : 'divider',
-        borderWidth: accent ? 2 : 1,
-        borderRadius: 1,
-        p: { xs: 1, sm: 1.5 },
-      }}
-    >
-      <Typography variant="caption" color="text.secondary" display="block">
-        {label}
-      </Typography>
-      {value !== undefined && (
-        <Typography variant="h5" component="div" sx={{ fontVariantNumeric: 'tabular-nums' }}>
-          {value}
-        </Typography>
-      )}
-      {caption && (
-        <Typography variant="caption" color="text.secondary" display="block">
-          {caption}
-        </Typography>
-      )}
-      {children}
-    </Box>
-  );
-}