@digitaldefiance/express-suite-react-components 5.0.1 → 5.0.2

package/src/components/BackupCodeLoginForm.tsx

@@ -0,0 +1,489 @@
+import {
+  Constants,
+  SuiteCoreComponentId,
+  SuiteCoreStringKey,
+  SuiteCoreStringKeyValue,
+} from '@digitaldefiance/suite-core-lib';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Container,
+  FormControlLabel,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { useFormik } from 'formik';
+import { FC, useState } from 'react';
+import * as Yup from 'yup';
+import { useI18n } from '../contexts';
+
+export interface BackupCodeLoginFormValues {
+  email: string;
+  username: string;
+  code: string;
+  newPassword?: string;
+  confirmNewPassword?: string;
+  recoverMnemonic: boolean;
+}
+
+export interface BackupCodeLoginFormProps {
+  onSubmit: (
+    identifier: string,
+    code: string,
+    isEmail: boolean,
+    recoverMnemonic: boolean,
+    newPassword?: string
+  ) => Promise<
+    | { token: string; codeCount: number; mnemonic?: string; message?: string }
+    | { error: string; status?: number }
+  >;
+  onNavigate?: (path: string, state?: Record<string, unknown>) => void;
+  isAuthenticated?: boolean;
+  validationSchema?: Yup.ObjectSchema<BackupCodeLoginFormValues>;
+  labels?: {
+    title?: string;
+    email?: string;
+    username?: string;
+    code?: string;
+    newPassword?: string;
+    confirmPassword?: string;
+    recoverMnemonic?: string;
+    login?: string;
+    useUsername?: string;
+    useEmail?: string;
+    dashboard?: string;
+    generateNewCodes?: string;
+    mnemonicLabel?: string;
+    codesRemaining?: string;
+  };
+}
+
+export const BackupCodeLoginForm: FC<BackupCodeLoginFormProps> = ({
+  onSubmit,
+  onNavigate,
+  isAuthenticated = false,
+  validationSchema,
+  labels = {},
+}) => {
+  const { tComponent } = useI18n();
+  const [loginType, setLoginType] = useState<'email' | 'username'>('email');
+  const [loginError, setLoginError] = useState<string | null>(null);
+  const [recoveredMnemonic, setRecoveredMnemonic] = useState<string | null>(
+    null
+  );
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [codesRemaining, setCodesRemaining] = useState<number | null>(null);
+
+  const translatedLabels = {
+    title:
+      labels.title ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.BackupCodeRecovery_Title
+      ),
+    email:
+      labels.email ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_Email
+      ),
+    username:
+      labels.username ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_Username
+      ),
+    code:
+      labels.code ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_BackupCode
+      ),
+    newPassword:
+      labels.newPassword ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_NewPassword
+      ),
+    confirmPassword:
+      labels.confirmPassword ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_ConfirmNewPassword
+      ),
+    recoverMnemonic:
+      labels.recoverMnemonic ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.BackupCodeRecovery_RecoverMnemonic
+      ),
+    login:
+      labels.login ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.BackupCodeRecovery_Login
+      ),
+    useUsername:
+      labels.useUsername ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Login_UseUsername
+      ),
+    useEmail:
+      labels.useEmail ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Login_UseEmailAddress
+      ),
+    dashboard:
+      labels.dashboard ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_Dashboard
+      ),
+    generateNewCodes:
+      labels.generateNewCodes ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes
+      ),
+    mnemonicLabel:
+      labels.mnemonicLabel ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Common_Mnemonic
+      ),
+    codesRemaining:
+      labels.codesRemaining ||
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.BackupCodeRecovery_CodesRemainingTemplate
+      ),
+    unexpectedError: tComponent<SuiteCoreStringKeyValue>(
+      SuiteCoreComponentId,
+      SuiteCoreStringKey.Common_UnexpectedError
+    ),
+  };
+
+  const yupFieldValidation = {
+    email: Yup.string()
+      .email(
+        tComponent<SuiteCoreStringKeyValue>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Validation_InvalidEmail
+        )
+      )
+      .required(
+        tComponent<SuiteCoreStringKeyValue>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Validation_Required
+        )
+      ),
+    username: Yup.string()
+      .matches(
+        Constants.UsernameRegex,
+        tComponent<SuiteCoreStringKeyValue>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Validation_UsernameRegexErrorTemplate
+        )
+      )
+      .required(
+        tComponent<SuiteCoreStringKeyValue>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Validation_Required
+        )
+      ),
+    code: Yup.string()
+      .required(
+        tComponent<SuiteCoreStringKeyValue>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Validation_Required
+        )
+      )
+      .matches(
+        Constants.BACKUP_CODES.DisplayRegex,
+        tComponent<SuiteCoreStringKeyValue>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Validation_InvalidBackupCode
+        )
+      ),
+    password: Yup.string().matches(
+      Constants.PasswordRegex,
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Validation_PasswordRegexErrorTemplate
+      )
+    ),
+    confirmPassword: Yup.string().oneOf(
+      [Yup.ref('newPassword')],
+      tComponent<SuiteCoreStringKeyValue>(
+        SuiteCoreComponentId,
+        SuiteCoreStringKey.Validation_PasswordMatch
+      )
+    ),
+  };
+
+  const formik = useFormik<BackupCodeLoginFormValues>({
+    initialValues: {
+      email: '',
+      username: '',
+      code: '',
+      newPassword: '',
+      confirmNewPassword: '',
+      recoverMnemonic: false,
+    },
+    validationSchema:
+      validationSchema ??
+      Yup.object({
+        [loginType]:
+          loginType === 'email'
+            ? yupFieldValidation.email
+            : yupFieldValidation.username,
+        code: yupFieldValidation.code,
+        newPassword: yupFieldValidation.password,
+        confirmNewPassword: yupFieldValidation.confirmPassword,
+      }),
+    enableReinitialize: true,
+    onSubmit: async (values, { setSubmitting }) => {
+      try {
+        const loginResult = await onSubmit(
+          loginType === 'email' ? values.email : values.username,
+          values.code,
+          loginType === 'email',
+          values.recoverMnemonic,
+          values.newPassword && values.newPassword.length > 0
+            ? values.newPassword
+            : undefined
+        );
+        if ('error' in loginResult) {
+          setLoginError(loginResult.error);
+          setCodesRemaining(null);
+          setRecoveredMnemonic(null);
+          return;
+        }
+        setLoginError(null);
+        if (loginResult.codeCount) {
+          setCodesRemaining(loginResult.codeCount);
+        }
+        if (loginResult.mnemonic) {
+          setRecoveredMnemonic(loginResult.mnemonic);
+        }
+        if (loginResult.message) {
+          setSuccessMessage(loginResult.message);
+        }
+      } catch {
+        setLoginError(translatedLabels.unexpectedError);
+      } finally {
+        setSubmitting(false);
+      }
+    },
+  });
+
+  if (
+    isAuthenticated &&
+    recoveredMnemonic === null &&
+    codesRemaining === null
+  ) {
+    onNavigate?.('/dashboard');
+    return null;
+  }
+
+  return (
+    <Container component="main" maxWidth="xs">
+      <Box
+        sx={{
+          marginTop: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Typography component="h1" variant="h5">
+          {translatedLabels.title}
+        </Typography>
+        <Box
+          component="form"
+          onSubmit={formik.handleSubmit}
+          sx={{ mt: 1, width: '100%' }}
+        >
+          {!isAuthenticated && (
+            <>
+              <TextField
+                margin="normal"
+                fullWidth
+                id={loginType}
+                label={
+                  loginType === 'email'
+                    ? translatedLabels.email
+                    : translatedLabels.username
+                }
+                name={loginType}
+                autoComplete={loginType === 'email' ? 'email' : 'username'}
+                autoFocus
+                value={
+                  loginType === 'email'
+                    ? formik.values.email
+                    : formik.values.username
+                }
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={
+                  formik.touched[loginType] && Boolean(formik.errors[loginType])
+                }
+                helperText={
+                  formik.touched[loginType] && formik.errors[loginType]
+                }
+                disabled={isAuthenticated}
+              />
+              <TextField
+                margin="normal"
+                required
+                fullWidth
+                name="code"
+                label={translatedLabels.code}
+                id="code"
+                value={formik.values.code}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={formik.touched.code && Boolean(formik.errors.code)}
+                helperText={formik.touched.code && formik.errors.code}
+                disabled={isAuthenticated}
+              />
+              <TextField
+                margin="normal"
+                fullWidth
+                name="newPassword"
+                label={translatedLabels.newPassword}
+                type="password"
+                id="newPassword"
+                value={formik.values.newPassword}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={
+                  formik.touched.newPassword &&
+                  Boolean(formik.errors.newPassword)
+                }
+                helperText={
+                  formik.touched.newPassword && formik.errors.newPassword
+                }
+                disabled={isAuthenticated}
+              />
+              <TextField
+                margin="normal"
+                fullWidth
+                name="confirmNewPassword"
+                label={translatedLabels.confirmPassword}
+                type="password"
+                id="confirmNewPassword"
+                value={formik.values.confirmNewPassword}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={
+                  formik.touched.confirmNewPassword &&
+                  Boolean(formik.errors.confirmNewPassword)
+                }
+                helperText={
+                  formik.touched.confirmNewPassword &&
+                  formik.errors.confirmNewPassword
+                }
+                disabled={isAuthenticated}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={formik.values.recoverMnemonic}
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    name="recoverMnemonic"
+                  />
+                }
+                label={translatedLabels.recoverMnemonic}
+                disabled={isAuthenticated}
+              />
+            </>
+          )}
+          {successMessage && (
+            <Typography color="success.main" variant="body2" sx={{ mt: 1 }}>
+              {successMessage}
+            </Typography>
+          )}
+          {recoveredMnemonic && (
+            <Box sx={{ mt: 2, p: 2, bgcolor: 'grey.100', borderRadius: 1 }}>
+              <Typography variant="subtitle2" gutterBottom>
+                {translatedLabels.mnemonicLabel}:
+              </Typography>
+              <Typography variant="body2" sx={{ fontFamily: 'monospace' }}>
+                {recoveredMnemonic}
+              </Typography>
+              <Button
+                fullWidth
+                variant="contained"
+                sx={{ mt: 2 }}
+                onClick={() => onNavigate?.('/dashboard')}
+              >
+                {translatedLabels.dashboard}
+              </Button>
+            </Box>
+          )}
+          {codesRemaining !== null && (
+            <Box sx={{ mt: 2 }}>
+              <Typography variant="body2">
+                {translatedLabels.codesRemaining.replace(
+                  '{count}',
+                  String(codesRemaining)
+                )}
+              </Typography>
+              <Button
+                fullWidth
+                variant="contained"
+                sx={{ mt: 2 }}
+                onClick={() =>
+                  onNavigate?.('/backup-codes', { codeCount: codesRemaining })
+                }
+              >
+                {translatedLabels.generateNewCodes}
+              </Button>
+            </Box>
+          )}
+          {loginError && (
+            <Typography color="error" variant="body2" sx={{ mt: 1 }}>
+              {loginError}
+            </Typography>
+          )}
+          {!isAuthenticated && (
+            <>
+              <Button
+                type="submit"
+                fullWidth
+                variant="contained"
+                sx={{ mt: 3, mb: 2 }}
+                disabled={formik.isSubmitting}
+              >
+                {translatedLabels.login}
+              </Button>
+              <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                <Button
+                  fullWidth
+                  variant="text"
+                  onClick={() => {
+                    const newType =
+                      loginType === 'email' ? 'username' : 'email';
+                    formik.setFieldValue(loginType, '');
+                    setLoginType(newType);
+                  }}
+                >
+                  {loginType === 'email'
+                    ? translatedLabels.useUsername
+                    : translatedLabels.useEmail}
+                </Button>
+              </Box>
+            </>
+          )}
+        </Box>
+      </Box>
+    </Container>
+  );
+};
+
+export default BackupCodeLoginForm;