mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-63041] Convert many inputs to the Input component, replace clientError with more correct client-side validation that conforms to the input (#31279)

Просмотр исходного кода 
* [MM-63041] Convert many inputs to the Input component, replace clientError with more correct client-side validation that conforms to the input

* Fix line length

* PR feedback

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Devin Binnie
2025-06-11 17:02:32 -04:00
коммит произвёл GitHub
родитель e6be282568
Коммит 65d3d5984f
13 изменённых файлов: 255 добавлений и 220 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

28
webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap
Просмотреть файл

@@ -78,33 +78,7 @@ exports[`components/SettingItemMax should match snapshot, on clientError 1`] = `
<hr />
<div
role="alert"
>
<div
className="form-group"
>
<label
className="col-sm-12 has-error"
>
<i
className="icon icon-alert-circle-outline"
role="img"
/>
<span
className="sr-only"
>
<MemoizedFormattedMessage
defaultMessage="Error"
id="setting_item_max.error"
/>
</span>
<span
id="clientError"
>
clientError
</span>
</label>
</div>
</div>
/>
<SaveButton
disabled={false}
onClick={[Function]}

34
webapp/channels/src/components/setting_item_max.tsx
Просмотреть файл

@@ -19,11 +19,6 @@ type Props = {
containerStyle?: string;
serverError?: ReactNode;
/**
* Client error
*/
clientError?: ReactNode;
/**
* Settings extra information
*/
@@ -51,6 +46,7 @@ type Props = {
shiftEnter?: boolean;
saveButtonText?: string;
saveButtonClassName?: string;
isValid?: boolean;
}
export default class SettingItemMax extends React.PureComponent<Props> {
settingList: React.RefObject<HTMLDivElement>;
@@ -120,31 +116,6 @@ export default class SettingItemMax extends React.PureComponent<Props> {
};
render() {
let clientError = null;
if (this.props.clientError) {
clientError = (
<div className='form-group'>
<label
className='col-sm-12 has-error'
>
<i
className='icon icon-alert-circle-outline'
role='img'
/>
<span className='sr-only'>
<FormattedMessage
id='setting_item_max.error'
defaultMessage='Error'
/>
</span>
<span id='clientError'>
{this.props.clientError}
</span>
</label>
</div>
);
}
let serverError = null;
if (this.props.serverError) {
serverError = (
@@ -193,7 +164,7 @@ export default class SettingItemMax extends React.PureComponent<Props> {
<SaveButton
defaultMessage={this.props.saveButtonText}
saving={this.props.saving}
disabled={this.props.saving}
disabled={this.props.saving || this.props.isValid === false}
onClick={this.handleSubmit}
btnClass={this.props.saveButtonClassName}
/>
@@ -267,7 +238,6 @@ export default class SettingItemMax extends React.PureComponent<Props> {
role='alert'
>
{serverError}
{clientError}
</div>
{submit}
<button

8
webapp/channels/src/components/user_settings/general/user_settings_general.test.tsx
Просмотреть файл

@@ -141,8 +141,8 @@ describe('components/user_settings/general/UserSettingsGeneral', () => {
<UserSettingsGeneral {...props}/>
</Provider>,
);
expect(wrapper.find('#position').length).toBe(1);
expect(wrapper.find('#position').is('input')).toBeTruthy();
expect(wrapper.find('#position').length).toBe(2);
expect(wrapper.find('#position.Input').is('input')).toBeTruthy();
props.ldapPositionAttributeSet = true;
props.samlPositionAttributeSet = false;
@@ -767,7 +767,7 @@ describe('components/user_settings/general/UserSettingsGeneral', () => {
renderWithContext(<UserSettingsGeneral {...props}/>);
userEvent.type(screen.getByRole('textbox', {name: urlAttribute.name}), 'ftp://invalid-scheme');
userEvent.click(screen.getByRole('button', {name: 'Save'}));
userEvent.tab();
expect(await screen.findByText('Please enter a valid url.')).toBeInTheDocument();
expect(saveCustomProfileAttribute).not.toHaveBeenCalled();
@@ -804,7 +804,7 @@ describe('components/user_settings/general/UserSettingsGeneral', () => {
renderWithContext(<UserSettingsGeneral {...props}/>);
userEvent.type(screen.getByRole('textbox', {name: emailAttribute.name}), 'invalid-email');
userEvent.click(screen.getByRole('button', {name: 'Save'}));
userEvent.tab();
expect(await screen.findByText('Please enter a valid email address.')).toBeInTheDocument();
expect(saveCustomProfileAttribute).not.toHaveBeenCalled();

189
webapp/channels/src/components/user_settings/general/user_settings_general.tsx
Просмотреть файл

@@ -22,6 +22,7 @@ import {trackEvent} from 'actions/telemetry_actions.jsx';
import SettingItem from 'components/setting_item';
import SettingItemMax from 'components/setting_item_max';
import SettingPicture from 'components/setting_picture';
import Input from 'components/widgets/inputs/input/input';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
import {AnnouncementBarMessages, AnnouncementBarTypes, AcceptedProfileImageTypes, Constants, ValidationErrors} from 'utils/constants';
@@ -183,7 +184,7 @@ type State = {
sectionIsSaving: boolean;
showSpinner: boolean;
resendStatus?: string;
clientError?: string | null;
pictureError?: string | null;
serverError?: string | {server_error_id: string; message: string};
emailError?: string;
customAttributeValues: Record<string, string | string[]>;
@@ -245,19 +246,6 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
const user = Object.assign({}, this.props.user);
const username = this.state.username.trim().toLowerCase();
const {formatMessage} = this.props.intl;
const usernameError = Utils.isValidUsername(username);
if (usernameError) {
let errObj;
if (usernameError.id === ValidationErrors.RESERVED_NAME) {
errObj = {clientError: formatMessage(holders.usernameReserved), serverError: ''};
} else {
errObj = {clientError: formatMessage(holders.usernameRestrictions, {min: Constants.MIN_USERNAME_LENGTH, max: Constants.MAX_USERNAME_LENGTH}), serverError: ''};
}
this.setState(errObj);
return;
}
if (user.username === username) {
this.updateSection('');
return;
@@ -310,34 +298,37 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
const confirmEmail = this.state.confirmEmail.trim().toLowerCase();
const currentPassword = this.state.currentPassword;
const {formatMessage} = this.props.intl;
if (email === user.email && (confirmEmail === '' || confirmEmail === user.email)) {
this.updateSection('');
return;
}
if (email === '' || !isEmail(email)) {
this.setState({emailError: formatMessage(holders.validEmail), clientError: '', serverError: ''});
return;
}
if (email !== confirmEmail) {
this.setState({emailError: formatMessage(holders.emailMatch), clientError: '', serverError: ''});
return;
}
if (currentPassword === '') {
this.setState({emailError: formatMessage(holders.emptyPassword), clientError: '', serverError: ''});
return;
}
user.email = email;
user.password = currentPassword;
trackEvent('settings', 'user_settings_update', {field: 'email'});
this.submitUser(user, true);
};
isEmailValid = () => {
const email = this.state.email.trim().toLowerCase();
const confirmEmail = this.state.confirmEmail.trim().toLowerCase();
const currentPassword = this.state.currentPassword;
if (email === '' || !isEmail(email)) {
return false;
}
if (email !== confirmEmail) {
return false;
}
if (currentPassword === '') {
return false;
}
return true;
};
submitUser = (user: UserProfile, emailUpdated: boolean) => {
const {formatMessage} = this.props.intl;
this.setState({sectionIsSaving: true});
@@ -367,7 +358,7 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
} else {
serverError = err;
}
this.setState({serverError, emailError: '', clientError: '', sectionIsSaving: false});
this.setState({serverError, emailError: '', sectionIsSaving: false});
}
});
};
@@ -384,7 +375,7 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
} else {
serverError = err;
}
this.setState({serverError, emailError: '', clientError: '', sectionIsSaving: false});
this.setState({serverError, emailError: '', pictureError: '', sectionIsSaving: false});
}
};
@@ -403,10 +394,10 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
const file = this.state.pictureFile;
if (!AcceptedProfileImageTypes.includes(file.type)) {
this.setState({clientError: formatMessage(holders.validImage), serverError: ''});
this.setState({pictureError: formatMessage(holders.validImage), serverError: ''});
return;
} else if (file.size > this.props.maxFileSize) {
this.setState({clientError: formatMessage(holders.imageTooLarge), serverError: ''});
this.setState({pictureError: formatMessage(holders.imageTooLarge), serverError: ''});
return;
}
@@ -442,8 +433,6 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
};
submitAttribute = async (settings: string[]) => {
const {formatMessage} = this.props.intl;
const attributeID = settings[0];
const attributeField = this.props.customProfileAttributeFields.find((field) => field.id === attributeID);
if (attributeField === undefined) {
@@ -454,7 +443,7 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
if (typeof attributeValue === 'string' && attributeField.attrs && attributeField.attrs.value_type) {
if (attributeField.attrs.value_type === 'email') {
if (attributeValue !== '' && !isEmail(attributeValue)) {
this.setState({clientError: formatMessage(holders.validEmail), emailError: '', serverError: ''});
this.setState({emailError: '', serverError: ''});
return;
}
}
@@ -462,7 +451,7 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
if (attributeValue !== '') {
const validURL = validHttpUrl(attributeValue);
if (!validURL) {
this.setState({clientError: formatMessage(holders.validUrl), emailError: '', serverError: ''});
this.setState({emailError: '', serverError: ''});
return;
}
let validLink = validURL.toString();
@@ -487,7 +476,7 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
this.setState({customAttributeValues: {...this.state.customAttributeValues, ...data}});
} else if (err) {
const serverError = err.message;
this.setState({serverError, emailError: '', clientError: '', sectionIsSaving: false});
this.setState({serverError, emailError: '', sectionIsSaving: false});
}
});
};
@@ -529,7 +518,7 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
this.setState({pictureFile: e.target.files[0]});
this.submitActive = true;
this.setState({clientError: null});
this.setState({pictureError: null});
} else {
this.setState({pictureFile: null});
}
@@ -564,7 +553,7 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
};
updateSection = (section: string) => {
this.setState(Object.assign({}, this.setupInitialState(this.props), {clientError: '', serverError: '', emailError: '', sectionIsSaving: false}));
this.setState(Object.assign({}, this.setupInitialState(this.props), {pictureError: '', serverError: '', emailError: '', sectionIsSaving: false}));
this.submitActive = false;
this.props.updateSection(section);
};
@@ -647,15 +636,24 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
/>
</label>
<div className='col-sm-7'>
<input
<Input
autoFocus={true}
id='primaryEmail'
className='form-control'
name='primaryEmail'
type='email'
onChange={this.updateEmail}
maxLength={Constants.MAX_EMAIL_LENGTH}
value={this.state.email}
aria-label={formatMessage({id: 'user.settings.general.newEmail', defaultMessage: 'New Email'})}
validate={(value) => {
if (value === '' || !isEmail(value as string)) {
return {
type: 'error',
value: formatMessage(holders.validEmail),
};
}
return undefined;
}}
/>
</div>
</div>
@@ -675,14 +673,23 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
/>
</label>
<div className='col-sm-7'>
<input
<Input
id='confirmEmail'
className='form-control'
name='confirmEmail'
type='email'
onChange={this.updateConfirmEmail}
maxLength={Constants.MAX_EMAIL_LENGTH}
value={this.state.confirmEmail}
aria-label={formatMessage({id: 'user.settings.general.confirmEmail', defaultMessage: 'Confirm Email'})}
validate={(value) => {
if (this.state.email !== value) {
return {
type: 'error',
value: formatMessage(holders.emailMatch),
};
}
return undefined;
}}
/>
</div>
</div>
@@ -702,13 +709,22 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
/>
</label>
<div className='col-sm-7'>
<input
<Input
id='currentPassword'
className='form-control'
name='currentPassword'
type='password'
onChange={this.updateCurrentPassword}
value={this.state.currentPassword}
aria-label={formatMessage({id: 'user.settings.general.currentPassword', defaultMessage: 'Current Password'})}
validate={(value) => {
if (value === '') {
return {
type: 'error',
value: formatMessage(holders.emptyPassword),
};
}
return undefined;
}}
/>
</div>
</div>
@@ -838,8 +854,8 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
submit={submit}
saving={this.state.sectionIsSaving}
serverError={this.state.serverError}
clientError={this.state.emailError}
updateSection={this.updateSection}
isValid={this.isEmailValid()}
/>
);
}
@@ -959,10 +975,10 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
/>
</label>
<div className='col-sm-7'>
<input
<Input
id='firstName'
name='firstName'
autoFocus={true}
className='form-control'
type='text'
onChange={this.updateFirstName}
maxLength={Constants.MAX_FIRSTNAME_LENGTH}
@@ -989,9 +1005,9 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
/>
</label>
<div className='col-sm-7'>
<input
<Input
id='lastName'
className='form-control'
name='lastName'
type='text'
onChange={this.updateLastName}
maxLength={Constants.MAX_LASTNAME_LENGTH}
@@ -1042,7 +1058,6 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
submit={submit}
saving={this.state.sectionIsSaving}
serverError={this.state.serverError}
clientError={this.state.clientError}
updateSection={this.updateSection}
extraInfo={extraInfo}
/>
@@ -1125,10 +1140,10 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
>
<label className='col-sm-5 control-label'>{nicknameLabel}</label>
<div className='col-sm-7'>
<input
<Input
id='nickname'
name='nickname'
autoFocus={true}
className='form-control'
type='text'
onChange={this.updateNickname}
value={this.state.nickname}
@@ -1159,7 +1174,6 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
submit={submit}
saving={this.state.sectionIsSaving}
serverError={this.state.serverError}
clientError={this.state.clientError}
updateSection={this.updateSection}
extraInfo={extraInfo}
/>
@@ -1227,17 +1241,33 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
>
<label className='col-sm-5 control-label'>{usernameLabel}</label>
<div className='col-sm-7'>
<input
<Input
id='username'
name='username'
autoFocus={true}
maxLength={Constants.MAX_USERNAME_LENGTH}
className='form-control'
type='text'
onChange={this.updateUsername}
value={this.state.username}
autoCapitalize='off'
onFocus={Utils.moveCursorToEnd}
aria-label={formatMessage({id: 'user.settings.general.username', defaultMessage: 'Username'})}
validate={(value) => {
const usernameError = Utils.isValidUsername(value as string);
if (usernameError) {
if (usernameError.id === ValidationErrors.RESERVED_NAME) {
return {
type: 'error',
value: formatMessage(holders.usernameReserved),
};
}
return {
type: 'error',
value: formatMessage(holders.usernameRestrictions, {min: Constants.MIN_USERNAME_LENGTH, max: Constants.MAX_USERNAME_LENGTH}),
};
}
return undefined;
}}
/>
</div>
</div>,
@@ -1271,9 +1301,9 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
submit={submit}
saving={this.state.sectionIsSaving}
serverError={this.state.serverError}
clientError={this.state.clientError}
updateSection={this.updateSection}
extraInfo={extraInfo}
isValid={Utils.isValidUsername(this.state.username) === undefined}
/>
);
}
@@ -1328,10 +1358,10 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
>
<label className='col-sm-5 control-label'>{positionLabel}</label>
<div className='col-sm-7'>
<input
<Input
id='position'
name='position'
autoFocus={true}
className='form-control'
type='text'
onChange={this.updatePosition}
value={this.state.position}
@@ -1363,7 +1393,6 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
submit={submit}
saving={this.state.sectionIsSaving}
serverError={this.state.serverError}
clientError={this.state.clientError}
updateSection={this.updateSection}
extraInfo={extraInfo}
/>
@@ -1450,6 +1479,31 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
let extraInfo: JSX.Element|string;
let submit = null;
const validate = () => {
if (attribute.attrs?.value_type === 'email') {
const value = this.state.customAttributeValues[attribute.id] as string;
if (value && !isEmail(value)) {
return {
type: 'error' as const,
value: formatMessage(holders.validEmail),
};
}
}
if (attribute.attrs?.value_type === 'url') {
const value = this.state.customAttributeValues[attribute.id] as string;
if (value) {
const validURL = validHttpUrl(value);
if (!validURL) {
return {
type: 'error' as const,
value: formatMessage(holders.validUrl),
};
}
}
}
return undefined;
};
if ((this.props.user.auth_service === Constants.LDAP_SERVICE && attribute.attrs?.ldap) ||
(this.props.user.auth_service === Constants.SAML_SERVICE && attribute.attrs?.saml)) {
extraInfo = (
@@ -1504,10 +1558,10 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
>
<label className='col-sm-5 control-label'>{attributeLabel}</label>
<div className='col-sm-7'>
<input
<Input
id={sectionName}
name={sectionName}
autoFocus={true}
className='form-control'
type={inputType}
onChange={this.updateAttribute}
value={getDisplayValue(this.state.customAttributeValues[attribute.id]) as string}
@@ -1515,6 +1569,7 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
autoCapitalize='off'
onFocus={Utils.moveCursorToEnd}
aria-label={attribute.name}
validate={validate}
/>
</div>
</div>,
@@ -1540,9 +1595,9 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
submit={submit}
saving={this.state.sectionIsSaving}
serverError={this.state.serverError}
clientError={this.state.clientError}
updateSection={this.updateSection}
extraInfo={extraInfo}
isValid={validate() === undefined}
/>
);
}
@@ -1638,7 +1693,7 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
src={imgSrc}
defaultImageSrc={Utils.defaultImageURLForUser(user.id)}
serverError={this.state.serverError}
clientError={this.state.clientError}
clientError={this.state.pictureError}
updateSection={(e: React.MouseEvent) => {
this.updateSection('');
e.preventDefault();

118
webapp/channels/src/components/user_settings/security/user_settings_security.tsx
Просмотреть файл

@@ -20,6 +20,7 @@ import ExternalLink from 'components/external_link';
import SettingItem from 'components/setting_item';
import SettingItemMax from 'components/setting_item_max';
import ToggleModalButton from 'components/toggle_modal_button';
import Input from 'components/widgets/inputs/input/input';
import icon50 from 'images/icon50x50.png';
import Constants from 'utils/constants';
@@ -75,7 +76,6 @@ type State = {
currentPassword: string;
newPassword: string;
confirmPassword: string;
passwordError: React.ReactNode;
serverError: string | null;
tokenError: string;
savingPassword: boolean;
@@ -93,7 +93,6 @@ export class SecurityTab extends React.PureComponent<Props, State> {
currentPassword: '',
newPassword: '',
confirmPassword: '',
passwordError: '',
serverError: '',
tokenError: '',
authService: this.props.user.auth_service,
@@ -123,41 +122,8 @@ export class SecurityTab extends React.PureComponent<Props, State> {
const user = this.props.user;
const currentPassword = this.state.currentPassword;
const newPassword = this.state.newPassword;
const confirmPassword = this.state.confirmPassword;
if (currentPassword === '') {
this.setState({
passwordError: this.props.intl.formatMessage({
id: 'user.settings.security.currentPasswordError',
defaultMessage: 'Please enter your current password.',
}),
serverError: '',
});
return;
}
const {valid, error} = isValidPassword(
newPassword,
this.props.passwordConfig,
);
if (!valid && error) {
this.setState({
passwordError: error,
serverError: '',
});
return;
}
if (newPassword !== confirmPassword) {
const defaultState = Object.assign(this.getDefaultState(), {
passwordError: this.props.intl.formatMessage({
id: 'user.settings.security.passwordMatchError',
defaultMessage:
'The new passwords you entered do not match.',
}),
serverError: '',
});
this.setState(defaultState);
if (!this.isPasswordValid()) {
return;
}
@@ -180,11 +146,30 @@ export class SecurityTab extends React.PureComponent<Props, State> {
} else {
state.serverError = err;
}
state.passwordError = '';
this.setState(state);
}
};
isPasswordValid = () => {
if (this.state.currentPassword === '') {
return false;
}
const {valid, error} = isValidPassword(
this.state.newPassword,
this.props.passwordConfig,
);
if (!valid && error) {
return false;
}
if (this.state.newPassword !== this.state.confirmPassword) {
return false;
}
return true;
};
updateCurrentPassword = (e: React.ChangeEvent<HTMLInputElement>) => {
this.setState({currentPassword: e.target.value});
};
@@ -233,7 +218,6 @@ export class SecurityTab extends React.PureComponent<Props, State> {
newPassword: '',
confirmPassword: '',
serverError: null,
passwordError: null,
});
break;
default:
@@ -268,10 +252,10 @@ export class SecurityTab extends React.PureComponent<Props, State> {
/>
</label>
<div className='col-sm-7'>
<input
<Input
id='currentPassword'
name='currentPassword'
autoFocus={true}
className='form-control'
type='password'
onChange={this.updateCurrentPassword}
value={this.state.currentPassword}
@@ -279,6 +263,20 @@ export class SecurityTab extends React.PureComponent<Props, State> {
id: 'user.settings.security.currentPassword',
defaultMessage: 'Current Password',
})}
validate={(value) => {
if (typeof value !== 'string' || value === '') {
return {
type: 'error' as const,
value: (
<FormattedMessage
id='user.settings.security.currentPasswordError'
defaultMessage='Please enter your current password.'
/>
),
};
}
return undefined;
}}
/>
</div>
</div>,
@@ -298,9 +296,9 @@ export class SecurityTab extends React.PureComponent<Props, State> {
/>
</label>
<div className='col-sm-7'>
<input
<Input
id='newPassword'
className='form-control'
name='newPassword'
type='password'
onChange={this.updateNewPassword}
value={this.state.newPassword}
@@ -308,6 +306,19 @@ export class SecurityTab extends React.PureComponent<Props, State> {
id: 'user.settings.security.newPassword',
defaultMessage: 'New Password',
})}
validate={(value) => {
const {valid, error} = isValidPassword(
value as string,
this.props.passwordConfig,
);
if (!valid) {
return {
type: 'error' as const,
value: error,
};
}
return undefined;
}}
/>
</div>
</div>,
@@ -327,9 +338,9 @@ export class SecurityTab extends React.PureComponent<Props, State> {
/>
</label>
<div className='col-sm-7'>
<input
<Input
id='confirmPassword'
className='form-control'
name='confirmPassword'
type='password'
onChange={this.updateConfirmPassword}
value={this.state.confirmPassword}
@@ -337,6 +348,23 @@ export class SecurityTab extends React.PureComponent<Props, State> {
id: 'user.settings.security.retypePassword',
defaultMessage: 'Retype New Password',
})}
validate={(value) => {
if (typeof value !== 'string') {
return undefined;
}
if (this.state.newPassword !== value) {
return {
type: 'error' as const,
value: (
<FormattedMessage
id='user.settings.security.passwordMatchError'
defaultMessage='The new passwords you entered do not match.'
/>
),
};
}
return undefined;
}}
/>
</div>
</div>,
@@ -435,8 +463,8 @@ export class SecurityTab extends React.PureComponent<Props, State> {
submit={submit}
saving={this.state.savingPassword}
serverError={this.state.serverError}
clientError={this.state.passwordError}
updateSection={this.handleUpdateSection}
isValid={this.isPasswordValid()}
/>
);
}

9
webapp/channels/src/components/widgets/inputs/input/input.tsx
Просмотреть файл

@@ -43,6 +43,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
clearable?: boolean;
clearableTooltipText?: string;
onClear?: () => void;
validate?: (value: React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>['value']) => CustomMessageInputType | undefined;
}
const Input = React.forwardRef((
@@ -75,6 +76,7 @@ const Input = React.forwardRef((
onBlur,
onChange,
onClear,
validate,
...otherProps
}: InputProps,
ref?: React.Ref<HTMLInputElement | HTMLTextAreaElement>,
@@ -151,6 +153,13 @@ const Input = React.forwardRef((
};
const validateInput = () => {
if (validate) {
const validationError = validate(value);
if (validationError) {
setCustomInputLabel(validationError);
}
}
// Only check for required field validation on blur
// Length validation is handled through derived values in the render function
if (required && (value === null || value === '')) {

13
webapp/channels/src/sass/routes/_settings.scss
Просмотреть файл

@@ -296,6 +296,19 @@
margin-block-start: 24px;
}
}
.Input_fieldset {
background: var(--center-channel-bg);
.Input_wrapper {
padding: 0 12px;
.Input {
height: 28px;
border: none;
}
}
}
}
.timezone-container {