function TabMfaData()

in src/pages/Settings/tabMfaData.js [92:251]


function TabMfaData(props) {
	const classes = useStyles();
	const { width } = useWindowDimensions();
	const [editMode, setEditMode] = React.useState(false)
	const [mfaType, setMfaType] = React.useState('');
	const [totpDialog, setTotpDialog] = React.useState(false);
	const [snackBarOps, setSnackBarOps] = React.useState({
		type: 'info',
		open: false,
		vertical: 'top',
		horizontal: 'center',
		autoHide: 0,
		message: ''
	});

	const getPreferredMFA = () => {
		Auth.currentAuthenticatedUser()
			.then(CognitoUser => {
				Auth.getPreferredMFA(CognitoUser, {
					// Optional, by default is false.
					// If set to true, it will get the MFA type from server side instead of from local cache.
					bypassCache: false
				})
					.then((data) => {
						// set preferred MFA Type
						setMfaType(data)
					})
					.catch(err => {
						console.log(err);

						setSnackBarOps({
							type: 'error',
							open: true,
							vertical: 'top',
							horizontal: 'center',
							autoHide: 3000,
							message: I18n.get('TAB_MFA_DATA_MESSAGE_EROR')
						})
					})
			})
			.catch(err => {
				console.log(err);

				setSnackBarOps({
					type: 'error',
					open: true,
					vertical: 'top',
					horizontal: 'center',
					autoHide: 3000,
					message: I18n.get('TAB_MFA_DATA_MESSAGE_EROR')
				})
			})
	};

	/*
	 * get the current preferred MFA and setMfaType
	*/
	if (mfaType === '') {
		getPreferredMFA();
	}

	/*
	* mfaType: SMS || TOTP || NOMFA
	*/
	const setPreferredMFA = (mfaType) => {
		Auth.currentAuthenticatedUser()
			.then(CognitoUser => {
				Auth.setPreferredMFA(CognitoUser, mfaType)
					.then((data) => {
						setEditMode(false);

						if (data === "SUCCESS")
							setSnackBarOps({
								type: 'success',
								open: true,
								vertical: 'top',
								horizontal: 'center',
								autoHide: 3000,
								message: I18n.get('TAB_MFA_DATA_MESSAGE_SET_MFATYPE_SUCCESS')
							})

						getPreferredMFA();
					})
					.catch(err => {
						console.log(err);

						setSnackBarOps({
							type: 'error',
							open: true,
							vertical: 'top',
							horizontal: 'center',
							autoHide: 3000,
							message: I18n.get('TAB_MFA_DATA_MESSAGE_EROR')
						})
					})
			})
			.catch(err => {
				console.log(err);

				setSnackBarOps({
					type: 'error',
					open: true,
					vertical: 'top',
					horizontal: 'center',
					autoHide: 3000,
					message: I18n.get('TAB_MFA_DATA_MESSAGE_EROR')
				})
			})
	};

	const handleCancelClick = () => {
		setEditMode(false);
		getPreferredMFA();
	};

	const handleSaveClick = () => {
		switch (mfaType) {
			case 'SOFTWARE_TOKEN_MFA':
				setTotpDialog(true);
				break;
			case 'SMS_MFA':
				setPreferredMFA('SMS');
				break;
			default:
				setPreferredMFA('NOMFA');
				break;
		}
	};

	const handleTotpDialogClose = (successful = false) => {
		setTotpDialog(false);

		if (successful) {
			setSnackBarOps({
				type: 'success',
				open: true,
				vertical: 'top',
				horizontal: 'center',
				autoHide: 3000,
				message: I18n.get('TAB_MFA_DATA_MESSAGE_VERIFY_TOTP_TOKEN_SUCCESS')
			})

			setPreferredMFA('TOTP');

			getPreferredMFA();
		}
	}

	const handleMfaTypeChange = (value) => {
		setEditMode(true);
		setMfaType(value);
	};

	return (
		<div className={classes.root}>
			{snackBarOps.open && (
				<AppSnackbar ops={snackBarOps} />
			)}

			{totpDialog && (<MfaTotpConfigDialog open={totpDialog} close={(successful) => handleTotpDialogClose(successful)} />)}