testing-tool/pages/Jwt/index.tsx

import { useMemo, useState } from 'react';
import { Box, Container, Paper, Stack, TextField, Typography } from '@mui/material';
import { useSnackbar } from '@/components/GlobalSnackbar';
import VpnKeyIcon from '@mui/icons-material/VpnKey';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import PageHeader from '@/components/PageHeader';
import { jwtPageStyles } from '@/config/pageTheme';
import { formatJson, parseJwt } from '@/utils/jwt';
import CopyButton from '@/components/CopyButton';
import { useTranslation } from 'react-i18next';

interface SectionProps {
  title: string;
  content: unknown;
  raw: string;
  color: string;
}

const Section = ({ title, content, color }: SectionProps) => {
  const { t } = useTranslation(['jwt']);
  return (
    <Paper
      variant="outlined"
      sx={{
        p: 2,
        borderRadius: 3,
        borderColor: `${color}40`,
        bgcolor: `${color}05`,
        position: 'relative',
      }}
    >
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
        <Typography variant="subtitle2" sx={{ fontWeight: 800, color: color, letterSpacing: 0.5 }}>
          {title}
        </Typography>
        <Box sx={{ display: 'flex', gap: 0.5 }}>
          <CopyButton text={JSON.stringify(content)} size="small" />
        </Box>
      </Box>
      <Box
        component="pre"
        sx={{
          m: 0,
          p: 1.5,
          bgcolor: 'rgba(255,255,255,0.6)',
          borderRadius: 2,
          fontSize: '0.8rem',
          fontFamily: 'monospace',
          overflowX: 'auto',
          whiteSpace: 'pre-wrap',
          wordBreak: 'break-all',
          border: '1px solid rgba(0,0,0,0.05)',
        }}
      >
        {content ? formatJson(content) : t('jwt:invalidFormat')}
      </Box>
    </Paper>
  );
};

export default function Index() {
  useSnackbar();
  const { t } = useTranslation(['jwt']);
  const [jwtInput, setJwtInput] = useState('');

  const result = useMemo(() => {
    if (!jwtInput.trim()) {
      return null;
    }
    return parseJwt(jwtInput);
  }, [jwtInput]);

  return (
    <Box>
      <Container sx={{ p: 2 }}>
        <PageHeader
          title={t('jwt:pageTitle')}
          subtitle={t('jwt:pageSubtitle')}
          icon={<VpnKeyIcon />}
        />

        <Stack spacing={2.5}>
          {/* Input Area */}
          <TextField
            multiline
            rows={4}
            placeholder={t('jwt:placeholder')}
            value={jwtInput}
            onChange={(e) => {
              // 自动去除 Bearer 前缀及首尾空白字符/换行
              const val = e.target.value.replace(/^Bearer\s*/i, '').trim();
              setJwtInput(val);
            }}
            fullWidth
            sx={jwtPageStyles.INPUT_STYLE}
          />

          {result?.error && (
            <Paper
              sx={{
                p: 2,
                bgcolor: 'error.lighter',
                color: 'error.main',
                borderRadius: 3,
                display: 'flex',
                alignItems: 'flex-start',
                gap: 1.5,
                border: '1px solid',
                borderColor: 'error.light',
              }}
            >
              <ErrorOutlineIcon sx={{ mt: 0.2 }} fontSize="small" />
              <Typography variant="body2" sx={{ fontWeight: 600 }}>
                {result.error}
              </Typography>
            </Paper>
          )}

          {result && !result.error && (
            <Stack spacing={2}>
              <Section
                title={t('jwt:headerTitle')}
                content={result.header}
                raw={result.raw.header}
                color="#fb015b" // JWT.io Header Color
              />
              <Section
                title={t('jwt:payloadTitle')}
                content={result.payload}
                raw={result.raw.payload}
                color="#d63aff" // JWT.io Payload Color
              />
              <Paper
                variant="outlined"
                sx={{
                  p: 2,
                  borderRadius: 3,
                  borderColor: 'primary.light',
                  bgcolor: 'primary.lighter',
                }}
              >
                <Box
                  sx={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    mb: 1,
                  }}
                >
                  <Typography
                    variant="subtitle2"
                    sx={{ fontWeight: 800, color: 'info.main', letterSpacing: 0.5 }}
                  >
                    {t('jwt:signatureTitle')}
                  </Typography>
                  <CopyButton text={JSON.stringify(result.raw.signature)} size="small" />
                </Box>
                <Typography
                  variant="body2"
                  sx={{
                    fontFamily: 'monospace',
                    fontSize: '0.8rem',
                    wordBreak: 'break-all',
                    color: 'text.secondary',
                    bgcolor: 'rgba(255,255,255,0.6)',
                    p: 1.5,
                    borderRadius: 2,
                    border: '1px solid rgba(0,0,0,0.05)',
                  }}
                >
                  {result.signature || t('jwt:noSignature')}
                </Typography>
              </Paper>
            </Stack>
          )}
        </Stack>
      </Container>
    </Box>
  );
}