Merge pull request #1627 from SUNET/eunju-remove-autosubmit-signup

autosubmit function remove in the signup app
SUNET · Mar 15, 2024 · 56e3077 · 56e3077
2 parents d1834e9 + d8be023
commit 56e3077
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/src/components/Login/ResponseCodeForm.tsx b/src/components/Login/ResponseCodeForm.tsx
@@ -28,11 +28,7 @@ export function ResponseCodeForm(props: ResponseCodeFormProps): JSX.Element {
   return (
     <FinalForm<ResponseCodeValues>
       onSubmit={(values) => {
-        setShowSpinner(true);
-        setTimeout(() => {
-          props.handleSubmitCode(values);
-          setShowSpinner(false);
-        }, 1000);
+        props.handleSubmitCode(values);
       }}
       initialValues={initialValues}
       render={(formProps) => {
@@ -94,7 +90,6 @@ interface CodeFieldProps {
 function CodeField({ num, value, disabled = false, autoFocus = undefined }: CodeFieldProps) {
   const inputsRef = useRef<HTMLInputElement[]>([]);
   const form = useForm();
-  const [isPasted, setIsPasted] = useState(false);
 
   function validateCodeForm(value: number): string | undefined {
     if (!value) {
@@ -130,9 +125,6 @@ function CodeField({ num, value, disabled = false, autoFocus = undefined }: Code
     ) {
       target?.previousElementSibling?.focus();
     }
-    if (form.getState().valid && !isPasted) {
-      form.submit();
-    }
   }
 
   function handleArrows(event: React.KeyboardEvent<HTMLInputElement>) {
@@ -146,6 +138,10 @@ function CodeField({ num, value, disabled = false, autoFocus = undefined }: Code
       event.preventDefault();
       target.nextElementSibling.focus();
     }
+
+    if ((form.getState().valid && event.key === "Enter") || event.keyCode === 13) {
+      form.submit();
+    }
   }
 
   function handlePaste(event: React.ClipboardEvent<HTMLInputElement>) {
@@ -199,17 +195,6 @@ function CodeField({ num, value, disabled = false, autoFocus = undefined }: Code
           updateInputAndForm(input as HTMLInputElement, cursorPosition + i, digit);
         });
     }
-
-    // Trigger form submission if all inputs are filled
-    const allInputsFilled = Array.from(inputs).every((input) => (input as HTMLInputElement).value !== "");
-    if (allInputsFilled && form.getState().valid) {
-      setIsPasted(true);
-
-      setTimeout(() => {
-        form.submit();
-        setIsPasted(false);
-      }, 1000); // 1 second delay
-    }
   }
 
   return (

diff --git a/src/components/Signup/SignupEnterCode.tsx b/src/components/Signup/SignupEnterCode.tsx
@@ -60,22 +60,37 @@ export function SignupEnterCode(): JSX.Element {
     }
 
     // 'convert' from FormRenderProps to a simple "disabled" boolean
-    return <ResponseCodeAbortButton disabled={props.formProps.submitting} />;
+    return (
+      <ResponseCodeAbortButton
+        disabled={props.formProps.submitting}
+        invalid={props.formProps.invalid}
+        submit={props.formProps.form.submit}
+      />
+    );
   }
 
-  function ResponseCodeAbortButton(props: { disabled: boolean }) {
+  function ResponseCodeAbortButton(props: { disabled: boolean; invalid: boolean; submit: () => void }) {
     // abort button usable from both ResponseCodeButtons and when isExpired below
     return (
       <div className="buttons">
         <EduIDButton
-          type="submit"
+          type="button"
           buttonstyle="secondary"
           onClick={handleAbortButtonOnClick}
           id="response-code-abort-button"
           disabled={props.disabled}
         >
           <FormattedMessage defaultMessage="Cancel" description="Short code form" />
         </EduIDButton>
+        <EduIDButton
+          type="submit"
+          buttonstyle="primary"
+          onClick={props.submit}
+          id="response-code-ok-button"
+          disabled={props.invalid}
+        >
+          <FormattedMessage defaultMessage="Ok" description="Short code form Ok button" />
+        </EduIDButton>
       </div>
     );
   }