accounts-frontend/packages/app/services/errorsDict/errorsDict.tsx

import React, { ComponentType, ReactElement, ReactNode } from 'react';
import { Link } from 'react-router-dom';
import { FormattedMessage as Message } from 'react-intl';

import { RelativeTime } from 'app/components/ui';

import messages from './errorsDict.intl.json';

const SuggestResetPassword: ComponentType = () => (
    <>
        <br />
        <Message
            {...messages.suggestResetPassword}
            values={{
                forgotYourPassword: (
                    <Link to="/forgot-password">
                        <Message {...messages.forgotYourPassword} />
                    </Link>
                ),
            }}
        />
    </>
);

const ResendKey: ComponentType<{ url: string }> = ({ url }) => (
    <>
        {' '}
        <Link to={url}>
            <Message {...messages.doYouWantRequestKey} />
        </Link>
    </>
);

const errorsMap: Record<string, (props?: Record<string, any>) => ReactElement> = {
    'error.login_required': () => <Message {...messages.loginRequired} />,
    'error.login_not_exist': () => <Message {...messages.loginNotExist} />,
    'error.password_required': () => <Message {...messages.passwordRequired} />,

    'error.password_incorrect': (props) => (
        // props are handled in validationErrorsHandler in components/auth/actions
        <>
            <Message {...messages.invalidPassword} />
            {props && props.isGuest ? <SuggestResetPassword /> : null}
        </>
    ),

    'error.username_required': () => <Message {...messages.usernameRequired} />,
    'error.username_invalid': () => <Message {...messages.usernameInvalid} />,
    'error.username_too_short': () => <Message {...messages.usernameTooShort} />,
    'error.username_too_long': () => <Message {...messages.usernameTooLong} />,
    'error.username_not_available': () => <Message {...messages.usernameUnavailable} />,

    'error.email_required': () => <Message {...messages.emailRequired} />,
    'error.email_too_long': () => <Message {...messages.emailToLong} />,
    'error.email_invalid': () => <Message {...messages.emailInvalid} />,
    'error.email_is_tempmail': () => <Message {...messages.emailIsTempmail} />,
    'error.email_not_available': (props) => (
        // props are handled in validationErrorsHandler in components/auth/actions
        <>
            <Message {...messages.emailNotAvailable} />
            {props && props.isGuest ? <SuggestResetPassword /> : null}
        </>
    ),

    'error.totp_required': () => <Message {...messages.totpRequired} />,
    'error.totp_incorrect': () => <Message {...messages.totpIncorrect} />,
    'error.otp_already_enabled': () => <Message {...messages.mfaAlreadyEnabled} />,

    'error.rePassword_required': () => <Message {...messages.rePasswordRequired} />,
    'error.password_too_short': () => <Message {...messages.passwordTooShort} />,
    'error.rePassword_does_not_match': () => <Message {...messages.passwordsDoesNotMatch} />,
    'error.rulesAgreement_required': () => <Message {...messages.rulesAgreementRequired} />,
    'error.key_required': () => <Message {...messages.keyRequired} />,
    'error.key_not_exists': (props) => (
        <>
            <Message {...messages.keyNotExists} />
            {props && props.repeatUrl ? <ResendKey url={props.repeatUrl} /> : null}
        </>
    ),
    'error.key_expire': (props) => errorsMap['error.key_not_exists'](props),

    'error.newPassword_required': () => <Message {...messages.newPasswordRequired} />,
    'error.newRePassword_required': () => <Message {...messages.newRePasswordRequired} />,

    'error.account_not_activated': () => <Message {...messages.accountNotActivated} />,
    'error.account_banned': () => <Message {...messages.accountBanned} />,

    'error.recently_sent_message': (props) => (
        <Message
            {...messages.emailFrequency}
            values={{
                // for msLeft @see AuthError.jsx
                time: <RelativeTime timestamp={props!.msLeft} />,
            }}
        />
    ),

    'error.email_not_found': () => <Message {...messages.emailNotFound} />,
    'error.account_already_activated': () => <Message {...messages.accountAlreadyActivated} />,

    'error.captcha_required': () => <Message {...messages.captchaRequired} />,
    'error.captcha_invalid': (props) => errorsMap['error.captcha_required'](props),

    'error.redirectUri_required': () => <Message {...messages.redirectUriRequired} />,
    'error.redirectUri_invalid': () => <Message {...messages.redirectUriInvalid} />,
};

interface ErrorLiteral {
    type: string;
    payload?: Record<string, any>;
}

type Error = string | ErrorLiteral;

export function resolve(error: Error): ReactNode {
    let payload = {};

    if (typeof error !== 'string') {
        payload = error.payload || {};
        error = error.type;
    }

    return errorsMap[error] ? errorsMap[error](payload) : error;
}