Skip to content

Commit 94c9825

Browse files
charIeszhaocharIeszhao
authored
refactor(console,phrases,schemas): improve custom profile fields UX and translations (#7687)
1 parent b919521 commit 94c9825

File tree

38 files changed

+342
-207
lines changed

38 files changed

+342
-207
lines changed

‎packages/console/src/ds-components/Textarea/index.module.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,9 @@
5050
text-decoration: underline;
5151
}
5252
}
53+
54+
.description {
55+
font: var(--font-body-2);
56+
color: var(--color-text-secondary);
57+
margin-top: _.unit(1);
58+
}

‎packages/console/src/ds-components/Textarea/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,11 @@ import styles from './index.module.scss';
77
type Props = HTMLProps<HTMLTextAreaElement> & {
88
readonly className?: string;
99
readonly error?: string | boolean;
10+
readonly description?: string;
1011
};
1112

1213
function Textarea(
13-
{ className, error, ...rest }: Props,
14+
{ className, error, description, ...rest }: Props,
1415
reference: ForwardedRef<HTMLTextAreaElement>
1516
) {
1617
return (
@@ -21,6 +22,7 @@ function Textarea(
2122
{Boolean(error) && typeof error !== 'boolean' && (
2223
<div className={styles.errorMessage}>{error}</div>
2324
)}
25+
{description && <div className={styles.description}>{description}</div>}
2426
</>
2527
);
2628
}

‎packages/console/src/pages/SignInExperience/PageContent/components/DateFormatSelector/index.tsx‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@ type Props = {
1818
};
1919

2020
function DateFormatSelector({ index }: Props) {
21-
const { t } = useTranslation(undefined, {
22-
keyPrefix: 'admin_console.sign_in_exp.custom_profile_fields.details',
23-
});
21+
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
2422
const {
2523
control,
2624
register,
@@ -56,10 +54,22 @@ function DateFormatSelector({ index }: Props) {
5654
render={({ field: { value, onChange } }) => (
5755
<Select
5856
options={[
59-
{ value: SupportedDateFormat.US, title: t('date_format_us') },
60-
{ value: SupportedDateFormat.UK, title: t('date_format_uk') },
61-
{ value: SupportedDateFormat.ISO, title: t('date_format_iso') },
62-
{ value: SupportedDateFormat.Custom, title: t('custom_date_format') },
57+
{
58+
value: SupportedDateFormat.US,
59+
title: t('sign_in_exp.custom_profile_fields.details.date_format_us'),
60+
},
61+
{
62+
value: SupportedDateFormat.UK,
63+
title: t('sign_in_exp.custom_profile_fields.details.date_format_uk'),
64+
},
65+
{
66+
value: SupportedDateFormat.ISO,
67+
title: t('sign_in_exp.custom_profile_fields.details.date_format_iso'),
68+
},
69+
{
70+
value: SupportedDateFormat.Custom,
71+
title: t('sign_in_exp.custom_profile_fields.details.custom_date_format'),
72+
},
6373
]}
6474
value={value}
6575
onChange={(value) => {
@@ -77,15 +87,24 @@ function DateFormatSelector({ index }: Props) {
7787
<FormField isRequired title="sign_in_exp.custom_profile_fields.details.custom_date_format">
7888
<TextInput
7989
{...register(`${fieldPrefix}customFormat`, { required: true })}
80-
error={formErrors?.customFormat?.message}
81-
placeholder={t('custom_date_format_placeholder')}
90+
error={
91+
formErrors?.customFormat &&
92+
t('errors.required_field_missing', {
93+
field: t(
94+
'sign_in_exp.custom_profile_fields.details.custom_date_format'
95+
).toLowerCase(),
96+
})
97+
}
98+
placeholder={t(
99+
'sign_in_exp.custom_profile_fields.details.custom_date_format_placeholder'
100+
)}
82101
description={
83102
<Trans
84103
components={{
85104
a: <TextLink targetBlank href={dateFnsDocumentationLink} />,
86105
}}
87106
>
88-
{t('custom_date_format_tip')}
107+
{t('sign_in_exp.custom_profile_fields.details.custom_date_format_tip')}
89108
</Trans>
90109
}
91110
/>

‎packages/console/src/pages/SignInExperience/PageContent/components/ProfileFieldPartSubForm/index.tsx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CustomProfileFieldType } from '@logto/schemas';
22
import { type ReactNode } from 'react';
33
import { useFormContext, Controller } from 'react-hook-form';
4-
import { useTranslation } from 'react-i18next';
4+
import { Trans, useTranslation } from 'react-i18next';
55

66
import CheckboxIcon from '@/assets/icons/field-type-checkbox.svg?react';
77
import DateIcon from '@/assets/icons/field-type-date.svg?react';
@@ -14,6 +14,7 @@ import FormField from '@/ds-components/FormField';
1414
import Select from '@/ds-components/Select';
1515
import Switch from '@/ds-components/Switch';
1616
import TextInput from '@/ds-components/TextInput';
17+
import TextLink from '@/ds-components/TextLink';
1718
import Textarea from '@/ds-components/Textarea';
1819

1920
import { type ProfileFieldForm } from '../../CollectUserProfile/types';
@@ -109,6 +110,7 @@ function ProfileFieldPartSubForm({ index }: Props) {
109110
<FormField
110111
isRequired={!isBuiltInFieldName}
111112
title="sign_in_exp.custom_profile_fields.details.label"
113+
tip={t('sign_in_exp.custom_profile_fields.details.label_tooltip')}
112114
>
113115
<Controller
114116
name={`${fieldPrefix}label`}
@@ -117,7 +119,7 @@ function ProfileFieldPartSubForm({ index }: Props) {
117119
required:
118120
!isBuiltInFieldName &&
119121
t('errors.required_field_missing', {
120-
field: t('sign_in_exp.custom_profile_fields.details.label'),
122+
field: t('sign_in_exp.custom_profile_fields.details.label').toLowerCase(),
121123
}),
122124
}}
123125
render={({ field: { value, onChange } }) => {
@@ -128,14 +130,22 @@ function ProfileFieldPartSubForm({ index }: Props) {
128130
error={formErrors?.label?.message}
129131
placeholder={t('sign_in_exp.custom_profile_fields.details.label_placeholder')}
130132
value={value || fallbackValue}
133+
description={
134+
<Trans components={{ a: <TextLink to="/sign-in-experience/content" /> }}>
135+
{t('sign_in_exp.custom_profile_fields.details.label_tip')}
136+
</Trans>
137+
}
131138
onChange={onChange}
132139
/>
133140
);
134141
}}
135142
/>
136143
</FormField>
137144
{type !== CustomProfileFieldType.Checkbox && (
138-
<FormField title="sign_in_exp.custom_profile_fields.details.placeholder">
145+
<FormField
146+
title="sign_in_exp.custom_profile_fields.details.placeholder"
147+
tip={t('sign_in_exp.custom_profile_fields.details.placeholder_tooltip')}
148+
>
139149
<TextInput
140150
{...register(`${fieldPrefix}placeholder`)}
141151
error={formErrors?.placeholder?.message}
@@ -144,7 +154,10 @@ function ProfileFieldPartSubForm({ index }: Props) {
144154
</FormField>
145155
)}
146156
{type !== CustomProfileFieldType.Checkbox && (
147-
<FormField title="sign_in_exp.custom_profile_fields.details.description">
157+
<FormField
158+
title="sign_in_exp.custom_profile_fields.details.description"
159+
tip={t('sign_in_exp.custom_profile_fields.details.description_tooltip')}
160+
>
148161
<TextInput
149162
{...register(`${fieldPrefix}description`)}
150163
error={formErrors?.description?.message}
@@ -157,10 +170,11 @@ function ProfileFieldPartSubForm({ index }: Props) {
157170
<Textarea
158171
{...register(`${fieldPrefix}options`, {
159172
required: t('errors.required_field_missing', {
160-
field: t('sign_in_exp.custom_profile_fields.details.options'),
173+
field: t('sign_in_exp.custom_profile_fields.details.options').toLowerCase(),
161174
}),
162175
})}
163176
error={formErrors?.options?.message}
177+
description={t('sign_in_exp.custom_profile_fields.details.options_tip')}
164178
placeholder={t('sign_in_exp.custom_profile_fields.details.options_placeholder')}
165179
rows={5}
166180
/>
@@ -181,7 +195,7 @@ function ProfileFieldPartSubForm({ index }: Props) {
181195
<TextInput
182196
{...register(`${fieldPrefix}format`, {
183197
required: t('errors.required_field_missing', {
184-
field: t('sign_in_exp.custom_profile_fields.details.regex'),
198+
field: t('sign_in_exp.custom_profile_fields.details.regex').toLowerCase(),
185199
}),
186200
})}
187201
error={formErrors?.format?.message}

‎packages/phrases-experience/src/locales/ar/profile.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const profile = {
1111
website: 'الموقع الإلكتروني',
1212
gender: 'الجنس',
1313
birthdate: 'تاريخ الميلاد',
14-
zoneinfo: 'معلومات المنطقة الزمنية',
14+
zoneinfo: 'المنطقة الزمنية',
1515
locale: 'اللغة والمنطقة',
1616
address: {
1717
formatted: 'العنوان',
@@ -24,7 +24,7 @@ const profile = {
2424
gender_options: {
2525
female: 'أنثى',
2626
male: 'ذكر',
27-
other: 'أفضل عدم القول',
27+
prefer_not_to_say: 'أفضل عدم القول',
2828
},
2929
};
3030

‎packages/phrases-experience/src/locales/de/profile.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const profile = {
2424
gender_options: {
2525
female: 'Weiblich',
2626
male: 'Männlich',
27-
other: 'Keine Angabe',
27+
prefer_not_to_say: 'Keine Angabe',
2828
},
2929
};
3030

‎packages/phrases-experience/src/locales/en/profile.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
const profile = {
22
name: 'Name',
33
avatar: 'Avatar',
4-
givenName: 'Given Name',
5-
familyName: 'Family Name',
6-
middleName: 'Middle Name',
7-
fullname: 'Full Name',
4+
givenName: 'Given name',
5+
familyName: 'Family name',
6+
middleName: 'Middle name',
7+
fullname: 'Full name',
88
nickname: 'Nickname',
9-
preferredUsername: 'Preferred Username',
9+
preferredUsername: 'Preferred username',
1010
profile: 'Profile',
1111
website: 'Website',
1212
gender: 'Gender',
1313
birthdate: 'Birthdate',
14-
zoneinfo: 'Zoneinfo',
14+
zoneinfo: 'Time zone',
1515
locale: 'Locale',
1616
address: {
1717
formatted: 'Address',
@@ -24,7 +24,7 @@ const profile = {
2424
gender_options: {
2525
female: 'Female',
2626
male: 'Male',
27-
other: 'Prefer not to say',
27+
prefer_not_to_say: 'Prefer not to say',
2828
},
2929
};
3030

‎packages/phrases-experience/src/locales/es/profile.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const profile = {
2424
gender_options: {
2525
female: 'Femenino',
2626
male: 'Masculino',
27-
other: 'Prefiero no decir',
27+
prefer_not_to_say: 'Prefiero no decir',
2828
},
2929
};
3030

‎packages/phrases-experience/src/locales/fr/profile.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const profile = {
2424
gender_options: {
2525
female: 'Femme',
2626
male: 'Homme',
27-
other: 'Préfère ne pas dire',
27+
prefer_not_to_say: 'Préfère ne pas dire',
2828
},
2929
};
3030

‎packages/phrases-experience/src/locales/it/profile.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const profile = {
2424
gender_options: {
2525
female: 'Femmina',
2626
male: 'Maschio',
27-
other: 'Preferisco non dire',
27+
prefer_not_to_say: 'Preferisco non dire',
2828
},
2929
};
3030

0 commit comments

Comments
 (0)