ui.js

const React = require('react');
const {Text, Box, useInput, useApp} = require('ink');
const {getConfigVar} = require('./config');
const {getCredentials, writeProfile} = require('./lib/authenticator');

const getConfig = flags => {
	const tokenTtl = flags.duration || getConfigVar('TOKEN_TTL') || '43200';
	const profileName = flags.profile || getConfigVar('TOKEN_PROFILE_NAME') || getConfigVar('PROFILE_NAME');
	const accountName = flags.user || getConfigVar('ACCOUNT_NAME');
	const accountNumber = flags.account || getConfigVar('ACCOUNT_NUMBER');
	const mainProfileName = flags.source || getConfigVar('MAIN_PROFILE_NAME') || 'default';

	return {tokenTtl, profileName, accountName, accountNumber, mainProfileName};
};

const App = (flags = {}) => {
	const {tokenTtl, profileName, accountName, accountNumber, mainProfileName} = getConfig(flags);
	const {exit} = useApp();
	const [token, setToken] = React.useState('');
	const [done, setDone] = React.useState(false);
	const [error, setError] = React.useState(false);
	const [isProcessing, setIsProcessing] = React.useState(false);

	// Validate required configuration
	React.useEffect(() => {
		const missing = [];
		if (!profileName) {
			missing.push('profile name (--profile or TOKEN_PROFILE_NAME)');
		}

		if (!accountName) {
			missing.push('account name (--user or ACCOUNT_NAME)');
		}

		if (!accountNumber) {
			missing.push('account number (--account or ACCOUNT_NUMBER)');
		}

		if (missing.length > 0) {
			setError(new Error(`Missing required configuration: ${missing.join(', ')}`));
		}
	}, [profileName, accountName, accountNumber]);

	useInput((input, key) => {
		// Don't process input if there are configuration errors
		if (error) {
			if (key.escape || (key.ctrl && input === 'c')) {
				exit();
			}

			return;
		}

		if (key.delete || key.backspace) {
			setToken(token.slice(0, -1));
			return;
		}

		if (key.return) {
			if (token.length !== 6) {
				setError(new Error('MFA token must be 6 digits'));
				return;
			}

			setIsProcessing(true);
			(async () => {
				try {
					const cred = await getCredentials({token, profileName, mainProfileName, accountNumber, accountName, tokenTtl});
					writeProfile(profileName)(cred);
					setDone(true);
				} catch (error) {
					setError(error);
				} finally {
					setIsProcessing(false);

					setTimeout(() => exit(), 1000); // Give user time to see success message
				}
			})();

			return;
		}

		// Handle both single digits and pasted multi-digit strings
		if (/^\d+$/.test(input)) {
			const newToken = `${token}${input}`.slice(0, 6);
			setToken(newToken);
		}
	});

	if (error) {
		return (
			<Box flexDirection="column">
				<Text color="red">❌ Error: {error.message}</Text>
				<Text color="yellow">
					Run &apos;mfa --help&apos; for usage information.
				</Text>
			</Box>
		);
	}

	return (
		<Box flexDirection="column">
			<Box marginBottom={1}>
				<Text color="blue">🔐 AWS MFA Token Generator</Text>
			</Box>
			<Box flexDirection="column" marginBottom={1}>
				<Text>📋 Configuration:</Text>
				<Text>   Profile: <Text color="cyan">{profileName}</Text></Text>
				<Text>   Account: <Text color="cyan">{accountNumber}</Text></Text>
				<Text>   User: <Text color="cyan">{accountName}</Text></Text>
				<Text>   Source: <Text color="cyan">{mainProfileName}</Text></Text>
				<Text>   Duration: <Text color="cyan">{tokenTtl}s</Text></Text>
			</Box>

			{!isProcessing && !done && (
				<Box>
					<Text>
						🔢 Enter MFA code from your authenticator app: <Text color="green">{token.replace(/./g, '*').slice(0, -1)}{token.slice(-1)}</Text>
					</Text>
				</Box>
			)}

			{isProcessing && (
				<Box>
					<Text color="blue">⏳ Processing MFA token...</Text>
				</Box>
			)}

			{done && (
				<Box>
					<Text color="green">✅ Credentials successfully updated in profile &apos;{profileName}&apos;!</Text>
				</Box>
			)}
		</Box>
	);
};

module.exports = App;