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

Manually submit pin

Browse Source
This commit is contained in:
Kieran 2023-09-23 17:08:03 +01:00
parent ef6714f856
commit 58d5983316
No known key found for this signature in database
GPG Key ID: DE71CEB3925BE941
1 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import useLogin from "Hooks/useLogin"; import useLogin from "Hooks/useLogin";
import "./PinPrompt.css"; import "./PinPrompt.css";
import { ReactNode, useEffect, useState } from "react"; import { ReactNode, useState } from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import useEventPublisher from "Hooks/useEventPublisher"; import useEventPublisher from "Hooks/useEventPublisher";
import { LoginStore, createPublisher, sessionNeedsPin } from "Login"; import { LoginStore, createPublisher, sessionNeedsPin } from "Login";
@ -8,8 +8,8 @@ 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 AsyncButton from "./AsyncButton";
const PinLen = 6;
export function PinPrompt({ export function PinPrompt({
onResult, onResult,
onCancel, onCancel,
@ -23,38 +23,32 @@ export function PinPrompt({
const [error, setError] = useState(""); const [error, setError] = useState("");
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => { async function submitPin() {
if (!isNaN(Number(e.key)) && pin.length < PinLen) { if (pin.length < 4) {
setPin(s => (s += e.key)); setError(formatMessage({
defaultMessage: "Pin too short"
}));
return;
} }
if (e.key === "Backspace") { setError("");
setPin(s => s.slice(0, -1));
} else {
e.preventDefault();
}
};
useEffect(() => { try {
if (pin.length > 0) { await onResult(pin);
setError(""); } catch (e) {
console.error(e);
if (e instanceof InvalidPinError) {
setError(
formatMessage({
defaultMessage: "Incorrect pin",
}),
);
} else if (e instanceof Error) {
setError(e.message);
}
} finally {
setPin("");
} }
}
if (pin.length === PinLen) {
onResult(pin).catch(e => {
console.error(e);
setPin("");
if (e instanceof InvalidPinError) {
setError(
formatMessage({
defaultMessage: "Incorrect pin",
}),
);
} else if (e instanceof Error) {
setError(e.message);
}
});
}
}, [pin]);
return ( return (
<Modal id="pin" onClose={() => onCancel()}> <Modal id="pin" onClose={() => onCancel()}>
@ -63,12 +57,15 @@ export function PinPrompt({
<FormattedMessage defaultMessage="Enter Pin" /> <FormattedMessage defaultMessage="Enter Pin" />
</h2> </h2>
{subTitle} {subTitle}
<input type="number" onKeyDown={handleKey} value={pin} autoFocus={true} maxLength={PinLen} /> <input type="number" onChange={e => setPin(e.target.value)} value={pin} autoFocus={true} maxLength={20} minLength={4} />
{error && <b className="error">{error}</b>} {error && <b className="error">{error}</b>}
<div> <div className="flex g8">
<button type="button" onClick={() => onCancel()}> <button type="button" onClick={() => onCancel()}>
<FormattedMessage defaultMessage="Cancel" /> <FormattedMessage defaultMessage="Cancel" />
</button> </button>
<AsyncButton type="button" onClick={() => submitPin()}>
<FormattedMessage defaultMessage="Submit" />
</AsyncButton>
</div> </div>
</div> </div>
</Modal> </Modal>