fix(ui): add form submit event (#1489)

* fix(ui): add form submit event add form submit event * fix(ui): cr fix cr fix
logto-io · Jul 8, 2022 · f52fa58 · f52fa58
1 parent 7da1de3
commit f52fa58
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 57 deletions.
diff --git a/packages/ui/src/containers/CreateAccount/index.tsx b/packages/ui/src/containers/CreateAccount/index.tsx
@@ -60,17 +60,22 @@ const CreateAccount = ({ className, autoFocus }: Props) => {
 
  const { result, run: asyncRegister } = useApi(register, registerErrorHandlers);
 
- const onSubmitHandler = useCallback(async () => {
- if (!validateForm()) {
- return;
- }
+ const onSubmitHandler = useCallback(
+ async (event?: React.FormEvent<HTMLFormElement>) => {
+ event?.preventDefault();
 
- if (!(await termsValidation())) {
- return;
- }
+  if (!validateForm()) {
+  return;
+  }
 
- void asyncRegister(fieldValue.username, fieldValue.password);
- }, [validateForm, termsValidation, asyncRegister, fieldValue]);
+ if (!(await termsValidation())) {
+ return;
+ }
+
+ void asyncRegister(fieldValue.username, fieldValue.password);
+ },
+ [validateForm, termsValidation, asyncRegister, fieldValue]
+ );
 
  useEffect(() => {
  if (result?.redirectTo) {
@@ -79,7 +84,7 @@ const CreateAccount = ({ className, autoFocus }: Props) => {
  }, [result]);
 
  return (
- <form className={classNames(styles.form, className)}>
+ <form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
  <Input
  autoFocus={autoFocus}
  className={styles.inputField}
@@ -117,7 +122,7 @@ const CreateAccount = ({ className, autoFocus }: Props) => {
  />
  <TermsOfUse className={styles.terms} />
 
- <Button onClick={onSubmitHandler}>{t('action.create')}</Button>
+ <Button onClick={async () => onSubmitHandler()}>{t('action.create')}</Button>
  </form>
  );
 };

diff --git a/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx b/packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
@@ -67,17 +67,22 @@ const EmailPasswordless = ({ type, autoFocus, className }: Props) => {
  const sendPasscode = getSendPasscodeApi(type, 'email');
  const { result, run: asyncSendPasscode } = useApi(sendPasscode, errorHandlers);
 
- const onSubmitHandler = useCallback(async () => {
- if (!validateForm()) {
- return;
- }
+ const onSubmitHandler = useCallback(
+ async (event?: React.FormEvent<HTMLFormElement>) => {
+ event?.preventDefault();
 
- if (!(await termsValidation())) {
- return;
- }
+  if (!validateForm()) {
+  return;
+  }
 
- void asyncSendPasscode(fieldValue.email);
- }, [validateForm, termsValidation, asyncSendPasscode, fieldValue.email]);
+ if (!(await termsValidation())) {
+ return;
+ }
+
+ void asyncSendPasscode(fieldValue.email);
+ },
+ [validateForm, termsValidation, asyncSendPasscode, fieldValue.email]
+ );
 
  const onModalCloseHandler = useCallback(() => {
  setShowPasswordlessConfirmModal(false);
@@ -97,7 +102,7 @@ const EmailPasswordless = ({ type, autoFocus, className }: Props) => {
 
  return (
  <>
- <form className={classNames(styles.form, className)}>
+ <form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
  <Input
  type="email"
  name="email"
@@ -114,7 +119,7 @@ const EmailPasswordless = ({ type, autoFocus, className }: Props) => {
 
  <TermsOfUse className={styles.terms} />
 
- <Button onClick={onSubmitHandler}>{t('action.continue')}</Button>
+ <Button onClick={async () => onSubmitHandler()}>{t('action.continue')}</Button>
  </form>
  <PasswordlessConfirmModal
  isOpen={showPasswordlessConfirmModal}

diff --git a/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx b/packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
@@ -77,17 +77,22 @@ const PhonePasswordless = ({ type, autoFocus, className }: Props) => {
  [isValidPhoneNumber]
  );
 
- const onSubmitHandler = useCallback(async () => {
- if (!validateForm()) {
- return;
- }
+ const onSubmitHandler = useCallback(
+ async (event?: React.FormEvent<HTMLFormElement>) => {
+ event?.preventDefault();
 
- if (!(await termsValidation())) {
- return;
- }
+  if (!validateForm()) {
+  return;
+  }
 
- void asyncSendPasscode(fieldValue.phone);
- }, [validateForm, termsValidation, asyncSendPasscode, fieldValue.phone]);
+ if (!(await termsValidation())) {
+ return;
+ }
+
+ void asyncSendPasscode(fieldValue.phone);
+ },
+ [validateForm, termsValidation, asyncSendPasscode, fieldValue.phone]
+ );
 
  const onModalCloseHandler = useCallback(() => {
  setShowPasswordlessConfirmModal(false);
@@ -112,7 +117,7 @@ const PhonePasswordless = ({ type, autoFocus, className }: Props) => {
 
  return (
  <>
- <form className={classNames(styles.form, className)}>
+ <form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
  <PhoneInput
  name="phone"
  placeholder={t('input.phone_number')}
@@ -128,7 +133,7 @@ const PhonePasswordless = ({ type, autoFocus, className }: Props) => {
  />
  <TermsOfUse className={styles.terms} />
 
- <Button onClick={onSubmitHandler}>{t('action.continue')}</Button>
+ <Button onClick={async () => onSubmitHandler()}>{t('action.continue')}</Button>
  </form>
  <PasswordlessConfirmModal
  isOpen={showPasswordlessConfirmModal}

diff --git a/packages/ui/src/containers/UsernameSignin/index.tsx b/packages/ui/src/containers/UsernameSignin/index.tsx
@@ -55,28 +55,33 @@ const UsernameSignin = ({ className, autoFocus }: Props) => {
 
  const { result, run: asyncSignInBasic } = useApi(signInBasic, errorHandlers);
 
- const onSubmitHandler = useCallback(async () => {
- setFormErrorMessage(undefined);
-
- if (!validateForm()) {
- return;
- }
-
- if (!(await termsValidation())) {
- return;
- }
-
- const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial);
-
- void asyncSignInBasic(fieldValue.username, fieldValue.password, socialToBind);
- }, [
- setFormErrorMessage,
- validateForm,
- termsValidation,
- asyncSignInBasic,
- fieldValue.username,
- fieldValue.password,
- ]);
+ const onSubmitHandler = useCallback(
+ async (event?: React.FormEvent<HTMLFormElement>) => {
+ event?.preventDefault();
+
+ setFormErrorMessage(undefined);
+
+ if (!validateForm()) {
+ return;
+ }
+
+ if (!(await termsValidation())) {
+ return;
+ }
+
+ const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial);
+
+ void asyncSignInBasic(fieldValue.username, fieldValue.password, socialToBind);
+ },
+ [
+ setFormErrorMessage,
+ validateForm,
+ termsValidation,
+ asyncSignInBasic,
+ fieldValue.username,
+ fieldValue.password,
+ ]
+ );
 
  useEffect(() => {
  if (result?.redirectTo) {
@@ -85,7 +90,7 @@ const UsernameSignin = ({ className, autoFocus }: Props) => {
  }, [result]);
 
  return (
- <form className={classNames(styles.form, className)}>
+ <form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
  <Input
  autoFocus={autoFocus}
  className={styles.inputField}
@@ -109,7 +114,7 @@ const UsernameSignin = ({ className, autoFocus }: Props) => {
  )}
  <TermsOfUse className={styles.terms} />
 
- <Button onClick={onSubmitHandler}>{t('action.sign_in')}</Button>
+ <Button onClick={async () => onSubmitHandler()}>{t('action.sign_in')}</Button>
  </form>
  );
 };