@digitaldefiance/express-suite-react-components 2.8.5 → 2.9.2

package/src/components/ExpirationSecondsSelector.tsx

@@ -0,0 +1,65 @@
+import { MenuItem, TextField } from '@mui/material';
+import { FormikProps } from 'formik';
+import { ChangeEvent, FC } from 'react';
+
+export interface ExpirationSecondsSelectorProps {
+  name: string;
+  label: string;
+  formik: FormikProps<any>;
+  optionValues: number[];
+  optionNames: string[];
+  onChange?: (value: number) => void;
+}
+
+export const ExpirationSecondsSelector: FC<ExpirationSecondsSelectorProps> = ({
+  name,
+  label,
+  formik,
+  optionValues,
+  optionNames,
+  onChange,
+}) => {
+  return (
+    <TextField
+      select
+      fullWidth
+      label={label}
+      name={name}
+      value={formik.values[name] ?? ''}
+      onChange={(event: ChangeEvent<HTMLInputElement>) => {
+        const selectedValue = event.target.value;
+        formik.setFieldValue(name, selectedValue);
+        if (onChange) {
+          onChange(parseInt(selectedValue));
+        }
+      }}
+      error={formik.touched[name] && Boolean(formik.errors[name])}
+      helperText={formik.touched[name] && (formik.errors[name] as string)}
+      sx={{
+        mt: 1,
+        '& .MuiSelect-select': {
+          paddingRight: '32px',
+        },
+        '& .MuiOutlinedInput-root': {
+          '& fieldset': {
+            borderColor: 'rgba(0, 0, 0, 0.23)',
+          },
+          '&:hover fieldset': {
+            borderColor: 'rgba(0, 0, 0, 0.87)',
+          },
+          '&.Mui-focused fieldset': {
+            borderColor: 'primary.main',
+          },
+        },
+      }}
+    >
+      {optionNames.map((name: string, index: number) => (
+        <MenuItem key={name} value={optionValues[index]}>
+          {name}
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+};
+
+export default ExpirationSecondsSelector;

package/src/components/Flag.tsx

@@ -0,0 +1,53 @@
+import { CoreLanguageCode } from '@digitaldefiance/i18n-lib';
+import { getFlagCode } from '@digitaldefiance/suite-core-lib';
+import { Box, SxProps, Theme } from '@mui/material';
+import { FC } from 'react';
+
+export interface FlagProps {
+  language: string;
+  sx?: SxProps<Theme>;
+}
+
+/**
+ * A simple component to display a flag icon for a given language.
+ *
+ * Props:
+ *   language: The language to display a flag for, as a StringLanguages enum value.
+ *   sx: Optional styles to apply to the component.
+ *
+ * Returns a Box component with an SVG flag icon from flagcdn.com as a ::before pseudo-element.
+ * The flag is sized to 1.5rem by default, but can be overridden by passing a custom sx prop.
+ * The component also includes an aria-label for accessibility, set to `Flag for <language>`.
+ */
+export const Flag: FC<FlagProps> = ({ language, sx }) => {
+  const flagContent = getFlagCode(language);
+  if (!flagContent) {
+    return null;
+  }
+  return (
+    <Box
+      component="span"
+      aria-label={`Flag for ${language}`}
+      sx={{
+        fontSize: '1.5rem',
+        lineHeight: 1,
+        verticalAlign: 'middle',
+        '&::before': {
+          content: `" "`,
+          display: 'inline-block',
+          width: '1em',
+          height: '1em',
+          backgroundImage: `url(https://flagcdn.com/${flagContent.toLowerCase()}.svg)`,
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center',
+          border: '1px solid rgba(0, 0, 0, 0.1)',
+          borderRadius: '2px',
+        },
+        ...sx,
+      }}
+    />
+  );
+};
+
+export default Flag;

package/src/components/ForgotPasswordForm.tsx

@@ -0,0 +1,120 @@
+import { Alert, Box, Button, Container, TextField, Typography } from '@mui/material';
+import { useFormik } from 'formik';
+import { FC, useState } from 'react';
+import * as Yup from 'yup';
+import { SuiteCoreComponentId, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
+import { useI18n } from '../contexts';
+
+export interface ForgotPasswordFormValues {
+  email: string;
+}
+
+export interface ForgotPasswordFormProps {
+  onSubmit: (values: ForgotPasswordFormValues) => Promise<void>;
+  emailValidation?: Yup.StringSchema;
+  labels?: {
+    title?: string;
+    email?: string;
+    sendResetLink?: string;
+    successMessage?: string;
+  };
+}
+
+export const ForgotPasswordForm: FC<ForgotPasswordFormProps> = ({
+  onSubmit,
+  emailValidation,
+  labels = {},
+}) => {
+  const { tComponent } = useI18n();
+  const [success, setSuccess] = useState(false);
+  const [apiError, setApiError] = useState<string>('');
+
+  const validation = {
+    email: emailValidation || Yup.string()
+      .email(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_InvalidEmail))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+  };
+
+  const translatedLabels = {
+    title: labels.title || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ForgotPassword_Title),
+    email: labels.email || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Email),
+    sendResetLink: labels.sendResetLink || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ForgotPassword_SendResetLink),
+    successMessage: labels.successMessage || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.PasswordReset_Success),
+  };
+
+  const formik = useFormik<ForgotPasswordFormValues>({
+    initialValues: {
+      email: '',
+    },
+    validationSchema: Yup.object({
+      email: validation.email,
+    }),
+    onSubmit: async (values) => {
+      try {
+        await onSubmit(values);
+        setSuccess(true);
+        setApiError('');
+      } catch (error: any) {
+        setApiError(error.response?.data?.message || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.ForgotPassword_Error));
+        setSuccess(false);
+      }
+    },
+  });
+
+  return (
+    <Container maxWidth="sm">
+      <Box
+        sx={{
+          mt: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" gutterBottom>
+          {translatedLabels.title}
+        </Typography>
+
+        <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
+          <TextField
+            fullWidth
+            id="email"
+            name="email"
+            label={translatedLabels.email}
+            value={formik.values.email}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={Boolean(formik.touched.email && formik.errors.email)}
+            helperText={formik.touched.email && formik.errors.email}
+            margin="normal"
+          />
+
+          {apiError && (
+            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
+              {apiError}
+            </Alert>
+          )}
+
+          {success && (
+            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
+              {translatedLabels.successMessage}
+            </Alert>
+          )}
+
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            sx={{ mt: 3, mb: 2 }}
+            disabled={formik.isSubmitting}
+          >
+            {translatedLabels.sendResetLink}
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default ForgotPasswordForm;

package/src/components/LoginForm.tsx

@@ -0,0 +1,307 @@
+import { Visibility, VisibilityOff } from '@mui/icons-material';
+import {
+  Alert,
+  Box,
+  Button,
+  Container,
+  IconButton,
+  InputAdornment,
+  Link,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import { FC, useState } from 'react';
+import * as Yup from 'yup';
+import { SuiteCoreComponentId, SuiteCoreStringKey, Constants } from '@digitaldefiance/suite-core-lib';
+import { useI18n } from '../contexts';
+
+export interface LoginFormValues {
+  email?: string;
+  username?: string;
+  password?: string;
+  mnemonic?: string;
+  [key: string]: any;
+}
+
+export interface LoginFormProps {
+  onSubmit: (values: LoginFormValues) => Promise<void>;
+  loginType?: 'email' | 'username';
+  authType?: 'password' | 'mnemonic';
+  allowLoginTypeToggle?: boolean;
+  allowAuthTypeToggle?: boolean;
+  showForgotPassword?: boolean;
+  showSignUp?: boolean;
+  forgotPasswordLink?: string;
+  signUpLink?: string;
+  emailLabel?: string;
+  usernameLabel?: string;
+  passwordLabel?: string;
+  mnemonicLabel?: string;
+  signInButtonText?: string;
+  forgotPasswordText?: string;
+  signUpText?: string;
+  useUsernameText?: string;
+  useEmailText?: string;
+  useMnemonicText?: string;
+  usePasswordText?: string;
+  toggleVisibilityLabel?: string;
+  titleText?: string;
+  emailValidation?: Yup.StringSchema;
+  usernameValidation?: Yup.StringSchema;
+  passwordValidation?: Yup.StringSchema;
+  mnemonicValidation?: Yup.StringSchema;
+  additionalFields?: (formik: ReturnType<typeof useFormik<LoginFormValues>>) => React.ReactNode;
+  additionalInitialValues?: Record<string, any>;
+  additionalValidation?: Record<string, Yup.Schema>;
+}
+
+export const LoginForm: FC<LoginFormProps> = ({
+  onSubmit,
+  loginType: initialLoginType = 'email',
+  authType: initialAuthType = 'password',
+  allowLoginTypeToggle = true,
+  allowAuthTypeToggle = true,
+  showForgotPassword = true,
+  showSignUp = true,
+  forgotPasswordLink = '/forgot-password',
+  signUpLink = '/register',
+  emailLabel,
+  usernameLabel,
+  passwordLabel,
+  mnemonicLabel,
+  signInButtonText,
+  forgotPasswordText,
+  signUpText,
+  useUsernameText,
+  useEmailText,
+  useMnemonicText,
+  usePasswordText,
+  toggleVisibilityLabel,
+  titleText,
+  emailValidation,
+  usernameValidation,
+  passwordValidation,
+  mnemonicValidation,
+  additionalFields,
+  additionalInitialValues = {},
+  additionalValidation = {},
+}) => {
+  const { tComponent } = useI18n();
+  const [loginType, setLoginType] = useState<'email' | 'username'>(initialLoginType);
+  const [authType, setAuthType] = useState<'password' | 'mnemonic'>(initialAuthType);
+  const [showSecret, setShowSecret] = useState(false);
+
+  // Use translations with fallbacks
+  const labels = {
+    title: titleText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_Title),
+    email: emailLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Email),
+    username: usernameLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Username),
+    password: passwordLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Password),
+    mnemonic: mnemonicLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_Mnemonic),
+    signIn: signInButtonText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.SignInButton),
+    forgotPassword: forgotPasswordText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_ForgotPassword),
+    signUp: signUpText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_SignUp),
+    useUsername: useUsernameText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_UseUsername),
+    useEmail: useEmailText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Login_UseEmailAddress),
+    useMnemonic: useMnemonicText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UseMnemonic),
+    usePassword: usePasswordText || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UsePassword),
+    toggleVisibility: toggleVisibilityLabel || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.TogglePasswordVisibility),
+  };
+
+  const validation = {
+    email: emailValidation || Yup.string()
+      .email(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_InvalidEmail))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    username: usernameValidation || Yup.string()
+      .matches(Constants.UsernameRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_UsernameRegexErrorTemplate))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    password: passwordValidation || Yup.string()
+      .min(1, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+    mnemonic: mnemonicValidation || Yup.string()
+      .matches(Constants.MnemonicRegex, tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_InvalidMnemonic))
+      .required(tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Validation_Required)),
+  };
+
+  const formik = useFormik<LoginFormValues>({
+    initialValues: {
+      email: '',
+      username: '',
+      mnemonic: '',
+      password: '',
+      ...additionalInitialValues,
+    },
+    validationSchema: Yup.object({
+      [loginType]: loginType === 'email' ? validation.email : validation.username,
+      ...(authType === 'mnemonic'
+        ? { mnemonic: validation.mnemonic }
+        : { password: validation.password }),
+      ...additionalValidation,
+    }),
+    enableReinitialize: true,
+    onSubmit: async (values, { setStatus }) => {
+      try {
+        setStatus(null);
+        await onSubmit(values);
+      } catch (error: any) {
+        setStatus(error.message || tComponent<SuiteCoreStringKey>(SuiteCoreComponentId, SuiteCoreStringKey.Common_UnexpectedError));
+        throw error;
+      }
+    },
+  });
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Box
+        sx={{
+          marginTop: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography component="h1" variant="h5">
+          {labels.title}
+        </Typography>
+        <Box component="form" onSubmit={formik.handleSubmit} sx={{ mt: 1, width: '100%' }}>
+          {formik.status && (
+            <Alert severity="error" sx={{ mb: 2 }}>
+              {formik.status}
+            </Alert>
+          )}
+          <TextField
+            margin="normal"
+            fullWidth
+            id={loginType}
+            label={loginType === 'email' ? labels.email : labels.username}
+            name={loginType}
+            autoComplete={loginType === 'email' ? 'email' : 'username'}
+            autoFocus
+            value={loginType === 'email' ? formik.values.email : formik.values.username}
+            onChange={formik.handleChange}
+            error={formik.touched[loginType] && Boolean(formik.errors[loginType])}
+            helperText={formik.touched[loginType] && formik.errors[loginType]}
+          />
+          {authType === 'password' ? (
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label={labels.password}
+              id="password"
+              type={showSecret ? 'text' : 'password'}
+              value={formik.values.password}
+              onChange={formik.handleChange}
+              error={formik.touched.password && Boolean(formik.errors.password)}
+              helperText={formik.touched.password && formik.errors.password}
+              slotProps={{
+                input: {
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton
+                        aria-label={labels.toggleVisibility}
+                        onClick={() => setShowSecret(!showSecret)}
+                        edge="end"
+                      >
+                        {showSecret ? <VisibilityOff /> : <Visibility />}
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                },
+              }}
+            />
+          ) : (
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="mnemonic"
+              label={labels.mnemonic}
+              id="mnemonic"
+              multiline
+              rows={3}
+              value={formik.values.mnemonic}
+              onChange={formik.handleChange}
+              error={formik.touched.mnemonic && Boolean(formik.errors.mnemonic)}
+              helperText={formik.touched.mnemonic && formik.errors.mnemonic}
+              type={showSecret ? 'text' : 'password'}
+              slotProps={{
+                input: {
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton
+                        aria-label={labels.toggleVisibility}
+                        onClick={() => setShowSecret(!showSecret)}
+                        edge="end"
+                      >
+                        {showSecret ? <VisibilityOff /> : <Visibility />}
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                },
+              }}
+            />
+          )}
+          {additionalFields && additionalFields(formik)}
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            sx={{ mt: 3, mb: 2 }}
+            disabled={formik.isSubmitting}
+          >
+            {labels.signIn}
+          </Button>
+          {(showForgotPassword || showSignUp) && (
+            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+              {showForgotPassword && (
+                <Link href={forgotPasswordLink} variant="body2">
+                  {labels.forgotPassword}
+                </Link>
+              )}
+              {showSignUp && (
+                <Link href={signUpLink} variant="body2">
+                  {labels.signUp}
+                </Link>
+              )}
+            </Box>
+          )}
+          {(allowLoginTypeToggle || allowAuthTypeToggle) && (
+            <Box sx={{ display: 'flex', gap: 1, mt: 2 }}>
+              {allowLoginTypeToggle && (
+                <Button
+                  fullWidth
+                  variant="text"
+                  onClick={() => {
+                    const newType = loginType === 'email' ? 'username' : 'email';
+                    formik.setFieldValue(loginType, '');
+                    setLoginType(newType);
+                  }}
+                >
+                  {loginType === 'email' ? labels.useUsername : labels.useEmail}
+                </Button>
+              )}
+              {allowAuthTypeToggle && (
+                <Button
+                  fullWidth
+                  variant="text"
+                  onClick={() => {
+                    const newType = authType === 'password' ? 'mnemonic' : 'password';
+                    formik.setFieldValue(authType, '');
+                    setAuthType(newType);
+                  }}
+                >
+                  {authType === 'password' ? labels.useMnemonic : labels.usePassword}
+                </Button>
+              )}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default LoginForm;

package/src/components/LogoutPage.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+export interface LogoutPageProps {
+  onLogout: () => Promise<void> | void;
+  onNavigate?: (path: string) => void;
+  redirectTo?: string;
+}
+
+export const LogoutPage = ({ onLogout, onNavigate, redirectTo = '/login' }: LogoutPageProps) => {
+  useEffect(() => {
+    const performLogout = async () => {
+      await onLogout();
+      onNavigate?.(redirectTo);
+    };
+    performLogout();
+  }, [onLogout, onNavigate, redirectTo]);
+
+  return null;
+};
+
+export default LogoutPage;