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

submit pin prompt by pressing enter

Browse Source
This commit is contained in:
Martti Malmi
2023-09-27 10:55:48 +03:00
parent d1085410ec
commit 03d6e13226
2 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/app/src/Element/AsyncButton.tsx
View File

@ -6,6 +6,7 @@ interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
disabled?: boolean; disabled?: boolean;
onClick(e: React.MouseEvent): Promise<void> | void; onClick(e: React.MouseEvent): Promise<void> | void;
children?: React.ReactNode; children?: React.ReactNode;
ref?: React.Ref<HTMLButtonElement>;
} }
export default function AsyncButton(props: AsyncButtonProps) { export default function AsyncButton(props: AsyncButtonProps) {
@ -28,7 +29,7 @@ export default function AsyncButton(props: AsyncButtonProps) {
} }
return ( return (
<button className="spinner-button" type="button" disabled={loading || props.disabled} {...props} onClick={handle}> <button ref={props.ref} className="spinner-button" type="button" disabled={loading || props.disabled} {...props} onClick={handle}>
<span style={{ visibility: loading ? "hidden" : "visible" }}>{props.children}</span> <span style={{ visibility: loading ? "hidden" : "visible" }}>{props.children}</span>
{loading && ( {loading && (
<span className="spinner-wrapper"> <span className="spinner-wrapper">

16
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, useState } from "react"; import {ReactNode, useRef, useState} from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import { unwrap } from "@snort/shared"; import { unwrap } from "@snort/shared";
import { EventPublisher, InvalidPinError, PinEncrypted, PinEncryptedPayload } from "@snort/system"; import { EventPublisher, InvalidPinError, PinEncrypted, PinEncryptedPayload } from "@snort/system";
@ -23,6 +23,7 @@ export function PinPrompt({
const [pin, setPin] = useState(""); const [pin, setPin] = useState("");
const [error, setError] = useState(""); const [error, setError] = useState("");
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const submitButtonRef = useRef<HTMLButtonElement>(null);
async function submitPin() { async function submitPin() {
if (pin.length < 4) { if (pin.length < 4) {
@ -55,6 +56,14 @@ export function PinPrompt({
return ( return (
<Modal id="pin" onClose={() => onCancel()}> <Modal id="pin" onClose={() => onCancel()}>
<form
onSubmit={(e) => {
e.preventDefault();
if (submitButtonRef.current) {
submitButtonRef.current.click();
}
}}
>
<div className="flex-column g12"> <div className="flex-column g12">
<h2> <h2>
<FormattedMessage defaultMessage="Enter Pin" /> <FormattedMessage defaultMessage="Enter Pin" />
@ -62,7 +71,7 @@ export function PinPrompt({
{subTitle} {subTitle}
<input <input
type="number" type="number"
onChange={e => setPin(e.target.value)} onChange={(e) => setPin(e.target.value)}
value={pin} value={pin}
autoFocus={true} autoFocus={true}
maxLength={20} maxLength={20}
@ -73,11 +82,12 @@ export function PinPrompt({
<button type="button" onClick={() => onCancel()}> <button type="button" onClick={() => onCancel()}>
<FormattedMessage defaultMessage="Cancel" /> <FormattedMessage defaultMessage="Cancel" />
</button> </button>
<AsyncButton type="button" onClick={() => submitPin()}> <AsyncButton ref={submitButtonRef} onClick={() => submitPin()} type="submit">
<FormattedMessage defaultMessage="Submit" /> <FormattedMessage defaultMessage="Submit" />
</AsyncButton> </AsyncButton>
</div> </div>
</div> </div>
</form>
</Modal> </Modal>
); );
} }