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

refactor(console): remove redundant hasError prop from text input (#3672)

Browse source
This commit is contained in:
Xiao Yijun 2023-04-10 11:20:49 +08:00 committed by GitHub
parent 764d0dd5ac
commit 4220f554db
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 38 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/console/src/components/MultiTextInput/index.tsx
View file

@ -71,9 +71,7 @@ function MultiTextInput({
>
<div className={styles.deletableInput}>
<TextInput
hasError={Boolean(
error?.inputs?.[fieldIndex] ?? (fieldIndex === 0 && error?.required)
)}
error={Boolean(error?.inputs?.[fieldIndex] ?? (fieldIndex === 0 && error?.required))}
value={fieldValue}
placeholder={placeholder}
onChange={({ currentTarget: { value } }) => {

21
packages/console/src/components/TextInput/index.tsx
View file

@ -14,24 +14,13 @@ import {
import * as styles from './index.module.scss';
type Props = Omit<HTMLProps<HTMLInputElement>, 'size'> & {
hasError?: boolean;
errorMessage?: string;
error?: string | boolean;
icon?: ReactElement;
suffix?: ReactElement;
};
function TextInput(
{
errorMessage,
hasError = Boolean(errorMessage),
icon,
suffix,
disabled,
className,
readOnly,
type = 'text',
...rest
}: Props,
{ error, icon, suffix, disabled, className, readOnly, type = 'text', ...rest }: Props,
reference: Ref<Nullable<HTMLInputElement>>
) {
const innerRef = useRef<HTMLInputElement>(null);
@ -64,7 +53,7 @@ function TextInput(
<div
className={classNames(
styles.container,
hasError && styles.error,
error && styles.error,
icon && styles.withIcon,
disabled && styles.disabled,
readOnly && styles.readOnly
@ -77,7 +66,9 @@ function TextInput(
className: classNames([suffix.props.className, styles.suffix]),
})}
</div>
{hasError && errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
{Boolean(error) && typeof error === 'string' && (
<div className={styles.errorMessage}>{error}</div>
)}
</div>
);
}

2
packages/console/src/mdx-components/UriInputField/index.tsx
View file

@ -99,7 +99,7 @@ function UriInputField({ appId, name, title, isSingle = false }: Props) {
<TextInput
className={styles.field}
value={value[0]}
errorMessage={errorObject?.required ?? errorObject?.inputs?.[0]}
error={errorObject?.required ?? errorObject?.inputs?.[0]}
onChange={({ currentTarget: { value } }) => {
onChange([value]);
}}

3
packages/console/src/onboarding/pages/SignInExperience/index.tsx
View file

@ -137,8 +137,7 @@ function SignInExperience() {
validate: (value) =>
!value || uriValidator(value) || t('errors.invalid_uri_format'),
})}
hasError={Boolean(errors.logo)}
errorMessage={errors.logo?.message}
error={errors.logo?.message}
/>
)}
</FormField>

5
packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
View file

@ -79,15 +79,14 @@ function CreatePermissionModal({ resourceId, onClose }: Props) {
message: t('api_resource_details.permission.forbidden_space_in_name'),
},
})}
hasError={Boolean(errors.name)}
errorMessage={errors.name?.message}
error={errors.name?.message}
/>
</FormField>
<FormField isRequired title="api_resource_details.permission.description">
<TextInput
placeholder={t('api_resource_details.permission.description_placeholder')}
{...register('description', { required: true })}
hasError={Boolean(errors.description)}
error={Boolean(errors.description)}
/>
</FormField>
</form>

4
packages/console/src/pages/ApiResourceDetails/ApiResourceSettings/index.tsx
View file

@ -61,7 +61,7 @@ function ApiResourceSettings() {
<FormField isRequired title="api_resources.api_name">
<TextInput
{...register('name', { required: true })}
hasError={Boolean(errors.name)}
error={Boolean(errors.name)}
readOnly={isLogtoManagementApiResource}
placeholder={t('api_resources.api_name_placeholder')}
/>
@ -73,7 +73,7 @@ function ApiResourceSettings() {
valueAsNumber: true,
})}
type="number"
hasError={Boolean(errors.accessTokenTtl)}
error={Boolean(errors.accessTokenTtl)}
placeholder={t('api_resource_details.token_expiration_time_in_seconds_placeholder')}
/>
</FormField>

2
packages/console/src/pages/ApplicationDetails/components/Settings.tsx
View file

@ -48,7 +48,7 @@ function Settings({ data }: Props) {
<FormField isRequired title="application_details.application_name">
<TextInput
{...register('name', { required: true })}
hasError={Boolean(errors.name)}
error={Boolean(errors.name)}
placeholder={t('application_details.application_name_placeholder')}
/>
</FormField>

2
packages/console/src/pages/Applications/components/CreateForm/index.tsx
View file

@ -118,7 +118,7 @@ function CreateForm({ isOpen, onClose }: Props) {
<TextInput
{...register('name', { required: true })}
placeholder={t('applications.application_name_placeholder')}
hasError={Boolean(errors.name)}
error={Boolean(errors.name)}
/>
</FormField>
<FormField title="applications.application_description">

2
packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx
View file

@ -77,7 +77,7 @@ function SenderTester({ connectorFactoryId, connectorType, className, parse }: P
className={styles.textField}
>
<TextInput
hasError={Boolean(inputError)}
error={Boolean(inputError)}
type={isSms ? 'tel' : 'email'}
placeholder={
isSms

2
packages/console/src/pages/Connectors/components/ConfigForm/index.tsx
View file

@ -125,7 +125,7 @@ function ConfigForm({ formItems }: Props) {
// This will happen when connector's version is ahead of AC
return (
<TextInput
hasError={hasError}
error={hasError}
value={typeof value === 'string' ? value : ''}
onChange={onChange}
/>

10
packages/console/src/pages/Connectors/components/ConnectorForm/BasicForm.tsx
View file

@ -69,15 +69,14 @@ function BasicForm({
<FormField isRequired title="connectors.guide.name" tip={t('connectors.guide.name_tip')}>
<TextInput
placeholder={t('connectors.guide.name_placeholder')}
hasError={Boolean(errors.name)}
error={Boolean(errors.name)}
{...register('name', { required: true })}
/>
</FormField>
<FormField title="connectors.guide.logo" tip={t('connectors.guide.logo_tip')}>
<TextInput
placeholder={t('connectors.guide.logo_placeholder')}
hasError={Boolean(errors.logo)}
errorMessage={errors.logo?.message}
error={errors.logo?.message}
{...register('logo', {
validate: (value) =>
!value || uriValidator(value) || t('errors.invalid_uri_format'),
@ -88,8 +87,7 @@ function BasicForm({
<FormField title="connectors.guide.logo_dark" tip={t('connectors.guide.logo_dark_tip')}>
<TextInput
placeholder={t('connectors.guide.logo_dark_placeholder')}
hasError={Boolean(errors.logoDark)}
errorMessage={errors.logoDark?.message}
error={errors.logoDark?.message}
{...register('logoDark', {
validate: (value) =>
!value || uriValidator(value) || t('errors.invalid_uri_format'),
@ -129,7 +127,7 @@ function BasicForm({
>
<TextInput
placeholder={t('connectors.guide.target_placeholder')}
hasError={Boolean(errors.target)}
error={Boolean(errors.target)}
disabled={!isAllowEditTarget}
{...register('target', { required: true })}
/>

2
packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx
View file

@ -144,7 +144,7 @@ function BasicUserInfoUpdateModal({ field, value: initialValue, isOpen, onClose
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
placeholder={getInputPlaceholder()}
errorMessage={errors[field]?.message}
error={errors[field]?.message}
onKeyDown={(event) => {
if (event.key === 'Enter') {
void onSubmit();

4
packages/console/src/pages/Profile/containers/ChangePasswordModal/index.tsx
View file

@ -106,7 +106,7 @@ function ChangePasswordModal() {
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
type={showPassword ? 'text' : 'password'}
errorMessage={errors.newPassword?.message}
error={errors.newPassword?.message}
suffix={
<IconButton
onMouseDown={(event) => {
@ -125,7 +125,7 @@ function ChangePasswordModal() {
validate: (value) => value === watch('newPassword') || t('profile.password.do_not_match'),
})}
type={showPassword ? 'text' : 'password'}
errorMessage={errors.confirmPassword?.message}
error={errors.confirmPassword?.message}
suffix={
<IconButton
onMouseDown={(event) => {

2
packages/console/src/pages/Profile/containers/LinkEmailModal/index.tsx
View file

@ -63,7 +63,7 @@ function LinkEmailModal() {
})}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
errorMessage={errors.email?.message}
error={errors.email?.message}
onKeyDown={(event) => {
if (event.key === 'Enter') {
onSubmit();

2
packages/console/src/pages/Profile/containers/VerifyPasswordModal/index.tsx
View file

@ -79,7 +79,7 @@ function VerifyPasswordModal() {
{...register('password', { required: t('profile.password.required') })}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
errorMessage={errors.password?.message}
error={errors.password?.message}
type={showPassword ? 'text' : 'password'}
suffix={
<IconButton

4
packages/console/src/pages/RoleDetails/RoleSettings/index.tsx
View file

@ -52,12 +52,12 @@ function RoleSettings() {
learnMoreLink="https://docs.logto.io/docs/recipes/rbac/manage-permissions-and-roles#manage-roles"
>
<FormField isRequired title="role_details.field_name">
<TextInput {...register('name', { required: true })} hasError={Boolean(errors.name)} />
<TextInput {...register('name', { required: true })} error={Boolean(errors.name)} />
</FormField>
<FormField isRequired title="role_details.field_description">
<TextInput
{...register('description', { required: true })}
hasError={Boolean(errors.description)}
error={Boolean(errors.description)}
/>
</FormField>
</FormCard>

4
packages/console/src/pages/Roles/components/CreateRoleForm/index.tsx
View file

@ -83,14 +83,14 @@ function CreateRoleForm({ onClose }: Props) {
: true,
})}
placeholder={t('roles.role_name_placeholder')}
errorMessage={errors.name?.message}
error={errors.name?.message}
/>
</FormField>
<FormField isRequired title="roles.role_description">
<TextInput
{...register('description', { required: true })}
placeholder={t('roles.role_description_placeholder')}
hasError={Boolean(errors.description)}
error={Boolean(errors.description)}
/>
</FormField>
<FormField title="roles.assign_permissions">

9
packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx
View file

@ -86,8 +86,7 @@ function BrandingForm() {
validate: (value) =>
!value || uriValidator(value) || t('errors.invalid_uri_format'),
})}
hasError={Boolean(errors.branding?.logoUrl)}
errorMessage={errors.branding?.logoUrl?.message}
error={errors.branding?.logoUrl?.message}
placeholder={t('sign_in_exp.branding.logo_image_url_placeholder')}
/>
</FormField>
@ -97,8 +96,7 @@ function BrandingForm() {
validate: (value) =>
!value || uriValidator(value) || t('errors.invalid_uri_format'),
})}
hasError={Boolean(errors.branding?.favicon)}
errorMessage={errors.branding?.favicon?.message}
error={errors.branding?.favicon?.message}
placeholder={t('sign_in_exp.branding.favicon')}
/>
</FormField>
@ -157,8 +155,7 @@ function BrandingForm() {
validate: (value) =>
!value || uriValidator(value) || t('errors.invalid_uri_format'),
})}
hasError={Boolean(errors.branding?.darkLogoUrl)}
errorMessage={errors.branding?.darkLogoUrl?.message}
error={errors.branding?.darkLogoUrl?.message}
placeholder={t('sign_in_exp.branding.dark_logo_image_url_placeholder')}
/>
</FormField>

6
packages/console/src/pages/SignInExperience/tabs/Others/TermsForm.tsx
View file

@ -24,8 +24,7 @@ function TermsForm() {
{...register('termsOfUseUrl', {
validate: (value) => !value || uriValidator(value) || t('errors.invalid_uri_format'),
})}
hasError={Boolean(errors.termsOfUseUrl)}
errorMessage={errors.termsOfUseUrl?.message}
error={errors.termsOfUseUrl?.message}
placeholder={t('sign_in_exp.others.terms_of_use.terms_of_use_placeholder')}
/>
</FormField>
@ -34,8 +33,7 @@ function TermsForm() {
{...register('privacyPolicyUrl', {
validate: (value) => !value || uriValidator(value) || t('errors.invalid_uri_format'),
})}
hasError={Boolean(errors.termsOfUseUrl)}
errorMessage={errors.termsOfUseUrl?.message}
error={errors.termsOfUseUrl?.message}
placeholder={t('sign_in_exp.others.terms_of_use.privacy_policy_placeholder')}
/>
</FormField>

3
packages/console/src/pages/UserDetails/UserSettings/index.tsx
View file

@ -116,8 +116,7 @@ function UserSettings() {
validate: (value) =>
!value || uriValidator(value) || t('errors.invalid_uri_format'),
})}
hasError={Boolean(errors.avatar)}
errorMessage={errors.avatar?.message}
error={errors.avatar?.message}
placeholder={t('user_details.field_avatar_placeholder')}
/>
</FormField>

9
packages/console/src/pages/Users/components/CreateForm/index.tsx
View file

@ -109,16 +109,11 @@ function CreateForm({ onClose, onCreate }: Props) {
message: t('errors.username_pattern_error'),
},
})}
hasError={Boolean(errors.username)}
errorMessage={errors.username?.message}
error={errors.username?.message}
/>
</FormField>
<FormField title="users.create_form_name">
<TextInput
{...register('name')}
hasError={Boolean(errors.name)}
errorMessage={errors.name?.message}
/>
<TextInput {...register('name')} error={errors.name?.message} />
</FormField>
</form>
</ModalLayout>