Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix pin input for mobile

Browse Source
This commit is contained in:
Kieran
2023-09-22 17:18:22 +01:00
parent 9ec2e8b2e6
commit 200727635c
1 changed files with 11 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/app/src/Element/PinPrompt.tsx
View File

@ -8,7 +8,6 @@ import { unwrap } from "@snort/shared";
import { EventPublisher, InvalidPinError, PinEncrypted, PinEncryptedPayload } from "@snort/system"; import { EventPublisher, InvalidPinError, PinEncrypted, PinEncryptedPayload } from "@snort/system";
import { DefaultPowWorker } from "index"; import { DefaultPowWorker } from "index";
import Modal from "./Modal"; import Modal from "./Modal";
import Spinner from "Icons/Spinner";
const PinLen = 6; const PinLen = 6;
export function PinPrompt({ export function PinPrompt({
@ -24,22 +23,16 @@ export function PinPrompt({
const [error, setError] = useState(""); const [error, setError] = useState("");
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
useEffect(() => { const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
const handleKey = (e: KeyboardEvent) => { if (!isNaN(Number(e.key)) && pin.length < PinLen) {
console.debug(e); setPin(s => (s += e.key));
if (!isNaN(Number(e.key)) && pin.length < PinLen) { }
setPin(s => (s += e.key)); if (e.key === "Backspace") {
} setPin(s => s.slice(0, -1));
if (e.key === "Backspace") { } else {
setPin(s => s.slice(0, -1)); e.preventDefault();
} else { }
e.preventDefault(); };
}
};
const handler = (e: Event) => handleKey(e as KeyboardEvent);
document.addEventListener("keydown", handler);
return () => document.removeEventListener("keydown", handler);
}, [pin]);
useEffect(() => { useEffect(() => {
if (pin.length > 0) { if (pin.length > 0) {
@ -63,14 +56,6 @@ export function PinPrompt({
} }
}, [pin]); }, [pin]);
const boxes = [];
if (pin.length === PinLen) {
boxes.push(<Spinner className="flex f-center f-1" />);
} else {
for (let x = 0; x < PinLen; x++) {
boxes.push(<div className="pin-box flex f-center f-1">{pin[x]}</div>);
}
}
return ( return (
<Modal id="pin" onClose={() => onCancel()}> <Modal id="pin" onClose={() => onCancel()}>
<div className="flex-column g12"> <div className="flex-column g12">
@ -78,7 +63,7 @@ export function PinPrompt({
<FormattedMessage defaultMessage="Enter Pin" /> <FormattedMessage defaultMessage="Enter Pin" />
</h2> </h2>
{subTitle} {subTitle}
<div className="flex g4">{boxes}</div> <input type="number" onKeyDown={handleKey} value={pin} autoFocus={true} maxLength={PinLen} />
{error && <b className="error">{error}</b>} {error && <b className="error">{error}</b>}
<div> <div>
<button type="button" onClick={() => onCancel()}> <button type="button" onClick={() => onCancel()}>