Kieran/snort
5
14
Fork 14
Code Issues 37 Pull Requests 1 Packages Projects Releases 24 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
Show Stats 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">

56
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,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>
); );
} }