Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-13 21:30:30 -05:00
Code Issues Activity

fix(ui): add hidden field in password sign-in form (#3623)

Browse source 
add hidden field in password sign-in form
This commit is contained in:
simeng-li 2023-03-30 10:49:51 +08:00 • committed by GitHub
parent 08f22b35c2
commit aa442ebfa5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/ui/src/pages/SignInPassword/PasswordForm/index.tsx
View file

@ -1,12 +1,13 @@
import { SignInIdentifier } from '@logto/schemas'; import { SignInIdentifier } from '@logto/schemas';
import classNames from 'classnames'; import classNames from 'classnames';
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from 'react';
import { useForm } from 'react-hook-form'; import { useForm, Controller } from 'react-hook-form';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Button from '@/components/Button'; import Button from '@/components/Button';
import ErrorMessage from '@/components/ErrorMessage'; import ErrorMessage from '@/components/ErrorMessage';
import { PasswordInputField } from '@/components/InputFields'; import { PasswordInputField } from '@/components/InputFields';
import type { IdentifierInputValue } from '@/components/InputFields/SmartInputField';
import ForgotPasswordLink from '@/containers/ForgotPasswordLink'; import ForgotPasswordLink from '@/containers/ForgotPasswordLink';
import usePasswordSignIn from '@/hooks/use-password-sign-in'; import usePasswordSignIn from '@/hooks/use-password-sign-in';
import { useForgotPasswordSettings } from '@/hooks/use-sie'; import { useForgotPasswordSettings } from '@/hooks/use-sie';
@ -25,6 +26,7 @@ type Props = {
}; };
type FormState = { type FormState = {
identifier: IdentifierInputValue;
password: string; password: string;
}; };
@ -42,10 +44,17 @@ const PasswordForm = ({
const { const {
register, register,
handleSubmit, handleSubmit,
control,
formState: { errors, isValid }, formState: { errors, isValid },
} = useForm<FormState>({ } = useForm<FormState>({
reValidateMode: 'onBlur', reValidateMode: 'onBlur',
defaultValues: { password: '' }, defaultValues: {
identifier: {
type: identifier,
value,
},
password: '',
},
}); });
useEffect(() => { useEffect(() => {
@ -58,20 +67,33 @@ const PasswordForm = ({
async (event?: React.FormEvent<HTMLFormElement>) => { async (event?: React.FormEvent<HTMLFormElement>) => {
clearErrorMessage(); clearErrorMessage();
void handleSubmit(async ({ password }, event) => { void handleSubmit(async ({ identifier: { type, value }, password }) => {
event?.preventDefault(); if (!type) {
return;
}
await onSubmit({ await onSubmit({
[identifier]: value, [type]: value,
password, password,
}); });
})(event); })(event);
}, },
[clearErrorMessage, handleSubmit, onSubmit, identifier, value] [clearErrorMessage, handleSubmit, onSubmit]
); );
return ( return (
<form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}> <form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
<Controller
control={control}
name="identifier"
render={({
field: {
name,
value: { type, value },
},
}) => <input readOnly hidden name={name} value={value} autoComplete={type} />}
/>
<PasswordInputField <PasswordInputField
autoFocus={autoFocus} autoFocus={autoFocus}
className={styles.inputField} className={styles.inputField}