Skip to content

[FIX] Missing bio field UI validation #26345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 2 commits into from
Jul 22, 2022
Merged

[FIX] Missing bio field UI validation #26345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
43748fb
fix: add bio field ui validation
dougfabris Jul 22, 2022
44f6373
Merge branch 'develop' into fix/bio-validation
kodiakhq[bot] Jul 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions apps/meteor/client/components/UserStatus/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
export const USER_STATUS_TEXT_MAX_LENGTH = 120;

export const colors = {
busy: 'danger-500',
away: 'warning-600',
Expand Down
3 changes: 3 additions & 0 deletions apps/meteor/client/lib/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const USER_STATUS_TEXT_MAX_LENGTH = 120;
export const BIO_TEXT_MAX_LENGTH = 260;
export const VIDEOCONF_STACK_MAX_USERS = 6;
2 changes: 1 addition & 1 deletion apps/meteor/client/sidebar/header/EditStatusModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import { useToastMessageDispatch, useSetting, useMethod, useTranslation } from '@rocket.chat/ui-contexts';
import React, { ReactElement, useState, ChangeEvent, useCallback } from 'react';

import { USER_STATUS_TEXT_MAX_LENGTH } from '../../components/UserStatus';
import UserStatusMenu from '../../components/UserStatusMenu';
import { USER_STATUS_TEXT_MAX_LENGTH } from '../../lib/constants';

type EditStatusModalProps = {
onClose: () => void;
Expand Down
18 changes: 15 additions & 3 deletions apps/meteor/client/views/account/profile/AccountProfileForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ import React, { Dispatch, ReactElement, SetStateAction, useCallback, useMemo, us
import { validateEmail } from '../../../../lib/emailValidator';
import { getUserEmailAddress } from '../../../../lib/getUserEmailAddress';
import CustomFieldsForm from '../../../components/CustomFieldsForm';
import { USER_STATUS_TEXT_MAX_LENGTH } from '../../../components/UserStatus';
import UserStatusMenu from '../../../components/UserStatusMenu';
import UserAvatarEditor from '../../../components/avatar/UserAvatarEditor';
import { USER_STATUS_TEXT_MAX_LENGTH, BIO_TEXT_MAX_LENGTH } from '../../../lib/constants';
import { AccountFormValues } from './AccountProfilePage';

type AccountProfileFormProps = {
Expand All @@ -32,6 +32,7 @@ type AccountProfileFormProps = {
onSaveStateChange: Dispatch<SetStateAction<boolean>>;
};

// TODO: Replace this form using React Hook Form
const AccountProfileForm = ({ values, handlers, user, settings, onSaveStateChange, ...props }: AccountProfileFormProps): ReactElement => {
const t = useTranslation();
const dispatchToastMessage = useToastMessageDispatch();
Expand Down Expand Up @@ -142,11 +143,20 @@ const AccountProfileForm = ({ values, handlers, user, settings, onSaveStateChang

return undefined;
}, [statusText, t]);

const bioError = useMemo(() => {
if (bio && bio.length > BIO_TEXT_MAX_LENGTH) {
return t('Max_length_is', BIO_TEXT_MAX_LENGTH);
}

return undefined;
}, [bio, t]);

const {
emails: [{ verified = false } = { verified: false }],
} = user as any;

const canSave = !![!!passwordError, !!emailError, !!usernameError, !!nameError, !!statusTextError].filter(Boolean);
const canSave = !![!!passwordError, !!emailError, !!usernameError, !!nameError, !!statusTextError, !!bioError].filter(Boolean);

useEffect(() => {
onSaveStateChange(canSave);
Expand Down Expand Up @@ -251,16 +261,18 @@ const AccountProfileForm = ({ values, handlers, user, settings, onSaveStateChang
<Field.Label>{t('Bio')}</Field.Label>
<Field.Row>
<TextAreaInput
error={bioError}
rows={3}
flexGrow={1}
value={bio}
onChange={handleBio}
addon={<Icon name='edit' size='x20' alignSelf='center' />}
/>
</Field.Row>
<Field.Error>{bioError}</Field.Error>
</Field>
),
[bio, handleBio, t],
[bio, handleBio, bioError, t],
)}
<Field>
<Grid>
Expand Down
2 changes: 1 addition & 1 deletion ...eteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import colors from '@rocket.chat/fuselage-tokens/colors';
import { useTranslation, useSetting } from '@rocket.chat/ui-contexts';
import React, { ReactElement } from 'react';

import { VIDEOCONF_STACK_MAX_USERS } from '..';
import UserAvatar from '../../../../../components/avatar/UserAvatar';
import { useVideoConfJoinCall } from '../../../../../contexts/VideoConfContext';
import { useTimeAgo } from '../../../../../hooks/useTimeAgo';
import { VIDEOCONF_STACK_MAX_USERS } from '../../../../../lib/constants';

const VideoConfListItem = ({
videoConfData,
Expand Down
1 change: 0 additions & 1 deletion apps/meteor/client/views/room/contextualBar/VideoConference/index.ts
View file
Open in desktop

This file was deleted.