Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

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

Browse source 
* fix(ui): add form submit event

add form submit event

* fix(ui): cr fix

cr fix
This commit is contained in:
simeng-li 2022-07-08 21:14:09 +08:00 committed by GitHub
parent 7da1de33e9
commit f52fa5891d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 73 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/ui/src/containers/CreateAccount/index.tsx
View file

@ -60,7 +60,10 @@ const CreateAccount = ({ className, autoFocus }: Props) => {
const { result, run: asyncRegister } = useApi(register, registerErrorHandlers);
const onSubmitHandler = useCallback(async () => {
const onSubmitHandler = useCallback(
async (event?: React.FormEvent<HTMLFormElement>) => {
event?.preventDefault();
if (!validateForm()) {
return;
}
@ -70,7 +73,9 @@ const CreateAccount = ({ className, autoFocus }: Props) => {
}
void asyncRegister(fieldValue.username, fieldValue.password);
}, [validateForm, termsValidation, asyncRegister, fieldValue]);
},
[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>
);
};

13
packages/ui/src/containers/Passwordless/EmailPasswordless.tsx
View file

@ -67,7 +67,10 @@ const EmailPasswordless = ({ type, autoFocus, className }: Props) => {
const sendPasscode = getSendPasscodeApi(type, 'email');
const { result, run: asyncSendPasscode } = useApi(sendPasscode, errorHandlers);
const onSubmitHandler = useCallback(async () => {
const onSubmitHandler = useCallback(
async (event?: React.FormEvent<HTMLFormElement>) => {
event?.preventDefault();
if (!validateForm()) {
return;
}
@ -77,7 +80,9 @@ const EmailPasswordless = ({ type, autoFocus, className }: Props) => {
}
void asyncSendPasscode(fieldValue.email);
}, [validateForm, termsValidation, 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}

13
packages/ui/src/containers/Passwordless/PhonePasswordless.tsx
View file

@ -77,7 +77,10 @@ const PhonePasswordless = ({ type, autoFocus, className }: Props) => {
[isValidPhoneNumber]
);
const onSubmitHandler = useCallback(async () => {
const onSubmitHandler = useCallback(
async (event?: React.FormEvent<HTMLFormElement>) => {
event?.preventDefault();
if (!validateForm()) {
return;
}
@ -87,7 +90,9 @@ const PhonePasswordless = ({ type, autoFocus, className }: Props) => {
}
void asyncSendPasscode(fieldValue.phone);
}, [validateForm, termsValidation, 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}

15
packages/ui/src/containers/UsernameSignin/index.tsx
View file

@ -55,7 +55,10 @@ const UsernameSignin = ({ className, autoFocus }: Props) => {
const { result, run: asyncSignInBasic } = useApi(signInBasic, errorHandlers);
const onSubmitHandler = useCallback(async () => {
const onSubmitHandler = useCallback(
async (event?: React.FormEvent<HTMLFormElement>) => {
event?.preventDefault();
setFormErrorMessage(undefined);
if (!validateForm()) {
@ -69,14 +72,16 @@ const UsernameSignin = ({ className, autoFocus }: Props) => {
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>
);
};