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

refactor(ui): properly set autocomplete props (#3175)

Browse source
This commit is contained in:
simeng-li 2023-02-22 10:59:44 +08:00 committed by GitHub
parent 6858f3c8dc
commit d5bac1560a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/ui/src/components/InputFields/SmartInputField/index.tsx
View file

@ -62,11 +62,11 @@ const SmartInputField = (
return (
<InputField
{...getInputHtmlProps(enabledTypes, identifierType)}
{...rest}
ref={innerRef}
isSuffixFocusVisible={Boolean(inputValue)}
isPrefixVisible={identifierType === SignInIdentifier.Phone}
{...getInputHtmlProps(enabledTypes, identifierType)}
value={inputValue}
prefix={conditional(
isPhoneEnabled && (

5
packages/ui/src/components/InputFields/SmartInputField/utils.test.ts
View file

@ -16,6 +16,7 @@ describe('Smart Input Field Util Methods', () => {
expect(props.pattern).toBe('[0-9]*');
expect(props.inputMode).toBe('numeric');
expect(props.placeholder).toBe('input.phone_number');
expect(props.autoComplete).toBe('tel');
});
it('Should return correct html props for email', () => {
@ -23,18 +24,21 @@ describe('Smart Input Field Util Methods', () => {
expect(props.type).toBe('email');
expect(props.inputMode).toBe('email');
expect(props.placeholder).toBe('input.email');
expect(props.autoComplete).toBe('email');
});
it('Should return correct html props for username', () => {
const props = getInputHtmlProps([SignInIdentifier.Username], SignInIdentifier.Username);
expect(props.type).toBe('text');
expect(props.placeholder).toBe('input.username');
expect(props.autoComplete).toBe('username');
});
it('Should return correct html props for username email or phone', () => {
const props = getInputHtmlProps(enabledTypes, SignInIdentifier.Username);
expect(props.type).toBe('text');
expect(props.placeholder).toBe('input.username / input.email / input.phone_number');
expect(props.autoComplete).toBe('username email tel');
});
it('Should return correct html props for email or phone', () => {
@ -44,6 +48,7 @@ describe('Smart Input Field Util Methods', () => {
);
expect(props.type).toBe('text');
expect(props.placeholder).toBe('input.email / input.phone_number');
expect(props.autoComplete).toBe('email tel');
});
});
});

10
packages/ui/src/components/InputFields/SmartInputField/utils.ts
View file

@ -10,12 +10,16 @@ import type { IdentifierInputType } from './use-smart-input-field';
export const getInputHtmlProps = (
enabledTypes: IdentifierInputType[],
currentType?: IdentifierInputType
): Pick<HTMLProps<HTMLInputElement>, 'type' | 'pattern' | 'inputMode' | 'placeholder'> => {
): Pick<
HTMLProps<HTMLInputElement>,
'type' | 'pattern' | 'inputMode' | 'placeholder' | 'autoComplete'
> => {
if (currentType === SignInIdentifier.Phone && enabledTypes.length === 1) {
return {
type: 'tel',
pattern: '[0-9]*',
inputMode: 'numeric',
autoComplete: 'tel',
placeholder: i18next.t<'translation', TFuncKey>('input.phone_number'),
};
}
@ -24,12 +28,16 @@ export const getInputHtmlProps = (
return {
type: 'email',
inputMode: 'email',
autoComplete: 'email',
placeholder: i18next.t<'translation', TFuncKey>('input.email'),
};
}
return {
type: 'text',
autoComplete: enabledTypes
.map((type) => (type === SignInIdentifier.Phone ? 'tel' : type))
.join(' '),
placeholder: enabledTypes
.map((type) => i18next.t<'translation', TFuncKey>(identifierInputPlaceholderMap[type]))
.join(' / '),

2
packages/ui/src/pages/Continue/IdentifierProfileForm/index.tsx
View file

@ -101,7 +101,7 @@ const IdentifierProfileForm = ({
}}
render={({ field }) => (
<SmartInputField
autoComplete="new-identifier"
autoComplete="off"
autoFocus={autoFocus}
className={styles.inputField}
{...field}

1
packages/ui/src/pages/ForgotPassword/ForgotPasswordForm/index.tsx
View file

@ -102,7 +102,6 @@ const ForgotPasswordForm = ({
}}
render={({ field }) => (
<SmartInputField
autoComplete="identifier"
autoFocus={autoFocus}
className={styles.inputField}
{...field}

2
packages/ui/src/pages/Register/IdentifierRegisterForm/index.tsx
View file

@ -89,7 +89,7 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
}}
render={({ field }) => (
<SmartInputField
autoComplete="new-identifier"
autoComplete="off"
autoFocus={autoFocus}
className={styles.inputField}
{...field}

1
packages/ui/src/pages/SignIn/IdentifierSignInForm/index.tsx
View file

@ -87,7 +87,6 @@ const IdentifierSignInForm = ({ className, autoFocus, signInMethods }: Props) =>
}}
render={({ field }) => (
<SmartInputField
autoComplete="identifier"
autoFocus={autoFocus}
className={styles.inputField}
{...field}

1
packages/ui/src/pages/SignIn/PasswordSignInForm/index.tsx
View file

@ -96,7 +96,6 @@ const PasswordSignInForm = ({ className, autoFocus, signInMethods }: Props) => {
}}
render={({ field }) => (
<SmartInputField
autoComplete="identifier"
autoFocus={autoFocus}
className={styles.inputField}
{...field}