Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

autosubmit function remove in the signup app #1627

Merged
merged 3 commits into from
Mar 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 5 additions & 20 deletions src/components/Login/ResponseCodeForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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>) {
Expand All @@ -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>) {
Expand Down Expand Up @@ -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 (
Expand Down
21 changes: 18 additions & 3 deletions src/components/Signup/SignupEnterCode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
Loading