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

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

@ -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>
);
};

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

@ -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}

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

@ -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}

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

@ -55,28 +55,33 @@ const UsernameSignin = ({ className, autoFocus }: Props) => {
const { result, run: asyncSignInBasic } = useApi(signInBasic, errorHandlers);
const onSubmitHandler = useCallback(async () => {
setFormErrorMessage(undefined);
const onSubmitHandler = useCallback(
async (event?: React.FormEvent<HTMLFormElement>) => {
event?.preventDefault();
if (!validateForm()) {
return;
}
setFormErrorMessage(undefined);
if (!(await termsValidation())) {
return;
}
if (!validateForm()) {
return;
}
const socialToBind = getSearchParameters(location.search, SearchParameters.bindWithSocial);
if (!(await termsValidation())) {
return;
}
void asyncSignInBasic(fieldValue.username, fieldValue.password, socialToBind);
}, [
setFormErrorMessage,
validateForm,
termsValidation,
asyncSignInBasic,
fieldValue.username,
fieldValue.password,
]);
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>
);
};