emv
Version:
EMV / Chip and PIN CLI and library for PC/SC card readers
28 lines • 2.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback } from 'react';
import { Box, Text, useInput, useStdin } from 'ink';
import TextInput from 'ink-text-input';
import { Header, Footer, CardBox, LoadingSpinner } from '../components/index.js';
export function PinScreen({ onSubmit, onBack, loading, attemptsLeft, isRawModeSupported: isRawModeProp, }) {
const [pin, setPin] = useState('');
const { isRawModeSupported: isRawModeFromStdin } = useStdin();
const isRawModeSupported = isRawModeProp ?? isRawModeFromStdin;
useInput((_input, key) => {
if (key.escape) {
onBack();
}
});
const handleSubmit = useCallback((value) => {
if (value.length >= 4 && value.length <= 12 && /^\d+$/.test(value)) {
onSubmit(value);
}
}, [onSubmit]);
if (loading) {
return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, {}), _jsx(LoadingSpinner, { message: "Verifying PIN..." })] }));
}
return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, {}), _jsxs(CardBox, { title: "PIN Verification", children: [attemptsLeft !== undefined && attemptsLeft < 3 && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "yellow", bold: true, children: ["\u26A0 Warning: ", attemptsLeft, " attempt", attemptsLeft !== 1 ? 's' : '', ' ', "remaining!"] }) })), _jsx(Text, { color: "gray", children: "Enter your 4-12 digit PIN:" }), _jsx(Text, { children: " " }), _jsxs(Box, { children: [_jsxs(Text, { color: "cyan", bold: true, children: ["PIN:", ' '] }), isRawModeSupported ? (_jsx(TextInput, { value: pin, onChange: setPin, onSubmit: handleSubmit, mask: "\u2022" })) : (_jsx(Text, { color: "gray", children: "(raw mode not supported)" }))] }), _jsx(Text, { children: " " }), _jsx(Text, { color: "gray", dimColor: true, children: "PIN is sent in plaintext - use only with test cards!" })] }), _jsx(Footer, { hints: [
{ keys: 'Enter', description: 'Submit' },
{ keys: 'Esc', description: 'Back' },
] })] }));
}
//# sourceMappingURL=PinScreen.js.map