Regression: nickname field in user profile. (#18359)

* Added nickname field, hints for disabled fields

* More missing nicknames

client/account/AccountProfileForm.js

@@ -45,6 +45,7 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 		bio,
 		statusType,
 		customFields,
+		nickname,
 	} = values;
 
 	const {
@@ -58,6 +59,7 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 		handleStatusType,
 		handleBio,
 		handleCustomFields,
+		handleNickname,
 	} = handlers;
 
 	const previousEmail = getUserEmailAddress(user);
@@ -136,6 +138,9 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 				<Field.Row>
 					<TextInput error={nameError} disabled={!allowRealNameChange} flexGrow={1} value={realname} onChange={handleRealname}/>
 				</Field.Row>
+				{!allowRealNameChange && <Field.Hint>
+					{t('RealName_Change_Disabled')}
+				</Field.Hint>}
 				<Field.Error>
 					{nameError}
 				</Field.Error>
@@ -145,6 +150,9 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 				<Field.Row>
 					<TextInput error={usernameError} disabled={!canChangeUsername} flexGrow={1} value={username} onChange={handleUsername} addon={<Icon name='at' size='x20'/>}/>
 				</Field.Row>
+				{!canChangeUsername && <Field.Hint>
+					{t('Username_Change_Disabled')}
+				</Field.Hint>}
 				<Field.Error>
 					{usernameError}
 				</Field.Error>
@@ -155,10 +163,19 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 			<Field.Row>
 				<TextInput error={statusTextError} disabled={!allowUserStatusMessageChange} flexGrow={1} value={statusText} onChange={handleStatusText} addon={<UserStatusMenu margin='neg-x2' onChange={handleStatusType} initialStatus={statusType}/>}/>
 			</Field.Row>
+			{!allowUserStatusMessageChange && <Field.Hint>
+				{t('StatusMessage_Change_Disabled')}
+			</Field.Hint>}
 			<Field.Error>
 				{statusTextError}
 			</Field.Error>
 		</Field>, [t, statusTextError, allowUserStatusMessageChange, statusText, handleStatusText, handleStatusType, statusType])}
+		{useMemo(() => <Field>
+			<Field.Label>{t('Nickname')}</Field.Label>
+			<Field.Row>
+				<TextInput flexGrow={1} value={nickname} onChange={handleNickname} addon={<Icon name='edit' size='x20' alignSelf='center'/>}/>
+			</Field.Row>
+		</Field>, [nickname, handleNickname, t])}
 		{useMemo(() => <Field>
 			<Field.Label>{t('Bio')}</Field.Label>
 			<Field.Row>
@@ -183,6 +200,9 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 									disabled={!allowEmailChange}
 								/>
 							</Field.Row>
+							{!allowEmailChange && <Field.Hint>
+								{t('Email_Change_Disabled')}
+							</Field.Hint>}
 							<Field.Error>
 								{t(emailError)}
 							</Field.Error>
@@ -203,6 +223,9 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 							<Field.Row>
 								<PasswordInput autoComplete='off' disabled={!allowPasswordChange} error={passwordError} flexGrow={1} value={password} onChange={handlePassword} addon={<Icon name='key' size='x20'/>}/>
 							</Field.Row>
+							{!allowPasswordChange && <Field.Hint>
+								{t('Password_Change_Disabled')}
+							</Field.Hint>}
 						</Field>, [t, password, handlePassword, passwordError, allowPasswordChange])}
 						{useMemo(() => <Field>
 							<AnimatedVisibility visibility={password ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN }>

client/account/AccountProfilePage.js

@@ -54,6 +54,7 @@ const getInitialValues = (user) => ({
 	statusType: user.status ?? '',
 	bio: user.bio ?? '',
 	customFields: user.customFields ?? {},
+	nickname: user.nickname ?? '',
 });
 
 const AccountProfilePage = () => {
@@ -62,7 +63,7 @@ const AccountProfilePage = () => {
 
 	const user = useUser();
 
-	const { values, handlers, hasUnsavedChanges } = useForm(getInitialValues(user));
+	const { values, handlers, hasUnsavedChanges, commit } = useForm(getInitialValues(user));
 	const [canSave, setCanSave] = useState(true);
 	const setModal = useSetModal();
 	const [loggingOut, setLoggingOut] = useState(false);
@@ -124,6 +125,7 @@ const AccountProfilePage = () => {
 		statusType,
 		customFields,
 		bio,
+		nickname,
 	} = values;
 
 	const { handleAvatar } = handlers;
@@ -143,8 +145,10 @@ const AccountProfilePage = () => {
 					...allowUserStatusMessageChange && { statusText },
 					...typedPassword && { typedPassword: SHA256(typedPassword) },
 					statusType,
+					nickname,
 					bio: bio || '',
 				}, customFields);
+				commit();
 				dispatchToastMessage({ type: 'success', message: t('Profile_saved_successfully') });
 			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });
@@ -185,6 +189,8 @@ const AccountProfilePage = () => {
 		customFields,
 		statusType,
 		setModal,
+		commit,
+		nickname,
 	]);
 
 	const handleLogoutOtherLocations = useCallback(async () => {

client/admin/users/UserInfo.js

@@ -32,6 +32,7 @@ export function UserInfoWithData({ uid, username, ...props }) {
 			bio,
 			utcOffset,
 			lastLogin,
+			nickname,
 		} = user;
 		return {
 			name: showRealNames ? name : username,
@@ -48,6 +49,7 @@ export function UserInfoWithData({ uid, username, ...props }) {
 			createdAt: user.createdAt,
 			status: UserStatus.getStatus(status),
 			customStatus: statusText,
+			nickname,
 		};
 	}, [data, showRealNames]);
 

client/channel/UserCard/index.js

@@ -59,6 +59,7 @@ const UserCardWithData = ({ username, onClose, target, open, rid }) => {
 			statusText = status,
 			bio = defaultValue,
 			utcOffset = defaultValue,
+			nickname,
 		} = user;
 
 		return {
@@ -74,6 +75,7 @@ const UserCardWithData = ({ username, onClose, target, open, rid }) => {
 			),
 			status: UserStatus.getStatus(status),
 			customStatus: statusText,
+			nickname,
 		};
 	}, [data, username, showRealNames, state]);
 

client/channel/UserInfo/index.js

@@ -38,6 +38,7 @@ export const UserInfoWithData = React.memo(function UserInfoWithData({ uid, user
 			bio,
 			utcOffset,
 			lastLogin,
+			nickname,
 		} = user;
 		return {
 			name: showRealNames ? name : username,
@@ -55,6 +56,7 @@ export const UserInfoWithData = React.memo(function UserInfoWithData({ uid, user
 			// localTime: <LocalTime offset={utcOffset} />,
 			status: UserStatus.getStatus(status),
 			customStatus: statusText,
+			nickname,
 		};
 	}, [data, showRealNames]);
 

client/components/basic/UserCard.js

@@ -47,7 +47,7 @@ const Role = ({ children }) => <Tag
 	children={children}
 />;
 
-const UserCardConteiner = forwardRef((props, ref) => <Box rcx-user-card bg='surface' elevation='2' p='x24' display='flex' borderRadius='x2' width='439px' {...props} ref={ref}/>);
+const UserCardContainer = forwardRef((props, ref) => <Box rcx-user-card bg='surface' elevation='2' p='x24' display='flex' borderRadius='x2' width='439px' {...props} ref={ref}/>);
 const UserCard = forwardRef(({
 	className,
 	style,
@@ -69,8 +69,9 @@ const UserCard = forwardRef(({
 	actions,
 	localTime = <Skeleton width='100%'/>,
 	onClose,
+	nickname,
 	t = (e) => e,
-}, ref) => <UserCardConteiner className={className} ref={ref} style={style}>
+}, ref) => <UserCardContainer className={className} ref={ref} style={style}>
 	<Box>
 		<UserAvatar username={username} size='x124'/>
 		{ actions && <Box flexGrow={0} display='flex' mb='x8' align='center' justifyContent='center'>
@@ -79,6 +80,7 @@ const UserCard = forwardRef(({
 	</Box>
 	<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={1} mis='x24' width='1px'>
 		<Username status={status} name={name}/>
+		{nickname && <Info title={t('Nickname')}>{nickname}</Info>}
 		{ customStatus && <Info>{customStatus}</Info> }
 		<Roles>{roles}</Roles>
 		<Info>{localTime}</Info>
@@ -86,7 +88,7 @@ const UserCard = forwardRef(({
 		{open && <a onClick={open}>{t('See_full_profile')}</a>}
 	</Box>
 	{onClose && <Box><ActionButton icon='cross' onClick={onClose}/></Box>}
-</UserCardConteiner>);
+</UserCardContainer>);
 
 
 export default UserCard;

client/components/basic/UserInfo.js

@@ -32,6 +32,7 @@ export const UserInfo = React.memo(function UserInfo({
 	customFields = [],
 	name,
 	data,
+	nickname,
 	// onChange,
 	actions,
 	...props
@@ -68,6 +69,11 @@ export const UserInfo = React.memo(function UserInfo({
 				<Info>{name}</Info>
 			</>}
 
+			{nickname && <>
+				<Label>{t('Nickname')}</Label>
+				<Info>{nickname}</Info>
+			</>}
+
 			{bio && <>
 				<Label>{t('Bio')}</Label>
 				<Info withTruncatedText={false}><MarkdownText content={bio}/></Info>
@@ -89,9 +95,9 @@ export const UserInfo = React.memo(function UserInfo({
 				</Info>
 			</>}
 
-			{ customFields && customFields.map((customField) => <React.Fragment key={customField.label}>
+			{ customFields && Object.entries(customFields).map(([label, value]) => <React.Fragment key={label}>
-				<Label>{t(customField.label)}</Label>
+				<Label>{t(label)}</Label>
-				<Info>{customField.value}</Info>
+				<Info>{value}</Info>
 			</React.Fragment>) }
 
 			<Label>{t('Created_at')}</Label>