amplify-material-ui/lib/esm/auth/use-username-field.js

A Material-UI based implementation of aws amplify

import * as React from 'react';
import { useIntl } from 'react-intl';
import { Field } from 'formik';
import { TextField } from 'formik-mui';
import { PhoneField } from '../ui';
import { UsernameAttribute } from './types';
export var useUsernameField = function (usernameAttribute) {
    var formatMessage = useIntl().formatMessage;
    switch (usernameAttribute) {
        case UsernameAttribute.EMAIL:
            return {
                usernamefieldName: 'email',
                usernameField: (React.createElement(Field, { variant: "outlined", margin: "normal", required: true, fullWidth: true, id: "email", label: formatMessage({
                        id: 'global.labels.email',
                        defaultMessage: 'Email',
                    }), name: "email", autoFocus: true, component: TextField })),
            };
        case UsernameAttribute.PHONE_NUMBER:
            return {
                usernamefieldName: 'phone',
                usernameField: (React.createElement(PhoneField, { required: true, label: formatMessage({
                        id: 'global.labels.phoneNumber',
                        defaultMessage: 'Phone Number',
                    }) })),
            };
        default:
            return {
                usernamefieldName: 'username',
                usernameField: (React.createElement(Field, { variant: "outlined", margin: "normal", required: true, fullWidth: true, id: "username", label: formatMessage({
                        id: 'global.labels.username',
                        defaultMessage: 'Username',
                    }), name: "username", autoFocus: true, component: TextField })),
            };
    }
};