submit pin prompt by pressing enter
This commit is contained in:
parent
d1085410ec
commit
03d6e13226
@ -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">
|
||||||
|
@ -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,29 +56,38 @@ export function PinPrompt({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal id="pin" onClose={() => onCancel()}>
|
<Modal id="pin" onClose={() => onCancel()}>
|
||||||
<div className="flex-column g12">
|
<form
|
||||||
<h2>
|
onSubmit={(e) => {
|
||||||
<FormattedMessage defaultMessage="Enter Pin" />
|
e.preventDefault();
|
||||||
</h2>
|
if (submitButtonRef.current) {
|
||||||
{subTitle}
|
submitButtonRef.current.click();
|
||||||
<input
|
}
|
||||||
type="number"
|
}}
|
||||||
onChange={e => setPin(e.target.value)}
|
>
|
||||||
value={pin}
|
<div className="flex-column g12">
|
||||||
autoFocus={true}
|
<h2>
|
||||||
maxLength={20}
|
<FormattedMessage defaultMessage="Enter Pin" />
|
||||||
minLength={4}
|
</h2>
|
||||||
/>
|
{subTitle}
|
||||||
{error && <b className="error">{error}</b>}
|
<input
|
||||||
<div className="flex g8">
|
type="number"
|
||||||
<button type="button" onClick={() => onCancel()}>
|
onChange={(e) => setPin(e.target.value)}
|
||||||
<FormattedMessage defaultMessage="Cancel" />
|
value={pin}
|
||||||
</button>
|
autoFocus={true}
|
||||||
<AsyncButton type="button" onClick={() => submitPin()}>
|
maxLength={20}
|
||||||
<FormattedMessage defaultMessage="Submit" />
|
minLength={4}
|
||||||
</AsyncButton>
|
/>
|
||||||
|
{error && <b className="error">{error}</b>}
|
||||||
|
<div className="flex g8">
|
||||||
|
<button type="button" onClick={() => onCancel()}>
|
||||||
|
<FormattedMessage defaultMessage="Cancel" />
|
||||||
|
</button>
|
||||||
|
<AsyncButton ref={submitButtonRef} onClick={() => submitPin()} type="submit">
|
||||||
|
<FormattedMessage defaultMessage="Submit" />
|
||||||
|
</AsyncButton>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user