submit pin prompt by pressing enter

packages/app/src/Element/AsyncButton.tsx

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

packages/app/src/Element/PinPrompt.tsx

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