From 1d9820a59b055fcb39fd476ec53631072ac871e5 Mon Sep 17 00:00:00 2001
From: gabriellsh <40830821+gabriellsh@users.noreply.github.com>
Date: Tue, 19 May 2020 23:42:17 -0300
Subject: [PATCH] [NEW] Added custom fields to Add/Edit user (#17681)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>
---
 client/admin/users/AddUser.js               | 161 +++++---------------
 client/admin/users/CustomFieldsForm.js      |  80 ++++++++++
 client/admin/users/EditUser.js              | 159 ++++++-------------
 client/admin/users/UserForm.js              | 125 +++++++++++++++
 client/helpers/capitalize.js                |   4 +
 client/hooks/useEndpointDataExperimental.js |   7 +-
 client/hooks/useForm.js                     |  11 +-
 7 files changed, 303 insertions(+), 244 deletions(-)
 create mode 100644 client/admin/users/CustomFieldsForm.js
 create mode 100644 client/admin/users/UserForm.js
 create mode 100644 client/helpers/capitalize.js

diff --git a/client/admin/users/AddUser.js b/client/admin/users/AddUser.js
index 3b1076655daf..6547c9d8e00a 100644
--- a/client/admin/users/AddUser.js
+++ b/client/admin/users/AddUser.js
@@ -1,147 +1,68 @@
-import React, { useMemo, useState, useCallback } from 'react';
-import { Field, TextInput, Box, ToggleSwitch, Icon, TextAreaInput, MultiSelectFiltered, Margins, Button } from '@rocket.chat/fuselage';
+import React, { useMemo, useCallback } from 'react';
+import { Field, Box, Button } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useEndpointData } from '../../hooks/useEndpointData';
 import { useEndpointAction } from '../../hooks/useEndpointAction';
-import { isEmail } from '../../../app/utils/lib/isEmail.js';
 import { useRoute } from '../../contexts/RouterContext';
-import VerticalBar from '../../components/basic/VerticalBar';
+import { useForm } from '../../hooks/useForm';
+import UserForm from './UserForm';
 
 
 export function AddUser({ roles, ...props }) {
 	const t = useTranslation();
 
-	const [newData, setNewData] = useState({});
-
 	const router = useRoute('admin-users');
 
 	const roleData = useEndpointData('roles.list', '') || {};
 
+	const {
+		values,
+		handlers,
+		reset,
+		hasUnsavedChanges,
+	} = useForm({
+		roles: [],
+		name: '',
+		username: '',
+		statusText: '',
+		bio: '',
+		email: '',
+		password: '',
+		verified: false,
+		requirePasswordChange: false,
+		setRandomPassword: false,
+		sendWelcomeEmail: true,
+		joinDefaultChannels: true,
+		customFields: {},
+	});
+
 	const goToUser = (id) => router.push({
 		context: 'info',
 		id,
 	});
 
-	const saveQuery = useMemo(() => ({
-		...Object.fromEntries(Object.entries(newData).filter(([, value]) => value !== null)),
-	}), [JSON.stringify(newData)]);
+	const saveQuery = useMemo(() => values, [JSON.stringify(values)]);
 
 	const saveAction = useEndpointAction('POST', 'users.create', saveQuery, t('User_created_successfully'));
 
-	const handleSave = async () => {
-		if (Object.keys(newData).length) {
-			const result = await saveAction();
-			if (result.success) {
-				goToUser(result.user._id);
-			}
+	const handleSave = useCallback(async () => {
+		const result = await saveAction();
+		if (result.success) {
+			goToUser(result.user._id);
 		}
-	};
-
-	const handleChange = (field, getValue = (e) => e.currentTarget.value) => (e) => setNewData({ ...newData, [field]: getValue(e) });
+	}, [saveAction]);
 
-	const {
-		roles: selectedRoles = [],
-		name = '',
-		username = '',
-		statusText = '',
-		bio = '',
-		email = '',
-		password = '',
-		verified = false,
-		requirePasswordChange = false,
-		setRandomPassword = false,
-		sendWelcomeEmail = true,
-		joinDefaultChannels = true,
-	} = newData;
+	const availableRoles = useMemo(() => (roleData && roleData.roles ? roleData.roles.map(({ _id, description }) => [_id, description || _id]) : []), [JSON.stringify(roleData)]);
 
-	const availableRoles = roleData && roleData.roles ? roleData.roles.map(({ _id, description }) => [_id, description || _id]) : [];
+	const append = useMemo(() => <Field>
+		<Field.Row>
+			<Box display='flex' flexDirection='row' justifyContent='space-between' w='full'>
+				<Button flexGrow={1} disabled={!hasUnsavedChanges} onClick={reset} mie='x4'>{t('Cancel')}</Button>
+				<Button flexGrow={1} disabled={!hasUnsavedChanges} onClick={handleSave}>{t('Save')}</Button>
+			</Box>
+		</Field.Row>
+	</Field>, [reset, handleSave]);
 
-	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
-		<Field>
-			<Field.Label>{t('Name')}</Field.Label>
-			<Field.Row>
-				<TextInput flexGrow={1} value={name} onChange={handleChange('name')}/>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('Username')}</Field.Label>
-			<Field.Row>
-				<TextInput flexGrow={1} value={username} onChange={handleChange('username')} addon={<Icon name='at' size='x20'/>}/>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('Email')}</Field.Label>
-			<Field.Row>
-				<TextInput flexGrow={1} value={email} error={!isEmail(email) && email.length > 0 ? 'error' : undefined} onChange={handleChange('email')} addon={<Icon name='mail' size='x20'/>}/>
-			</Field.Row>
-			<Field.Row>
-				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between' mbs='x4'>
-					<Box>{t('Verified')}</Box><ToggleSwitch checked={verified} onChange={handleChange('verified', () => !verified)} />
-				</Box>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('StatusMessage')}</Field.Label>
-			<Field.Row>
-				<TextInput flexGrow={1} value={statusText} onChange={handleChange('statusText')} addon={<Icon name='edit' size='x20'/>}/>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('Bio')}</Field.Label>
-			<Field.Row>
-				<TextAreaInput rows={3} flexGrow={1} value={bio} onChange={handleChange('bio')} addon={<Icon name='edit' size='x20' alignSelf='center'/>}/>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('Password')}</Field.Label>
-			<Field.Row>
-				<TextInput flexGrow={1} value={password} onChange={handleChange('password')} addon={<Icon name='key' size='x20'/>}/>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Row>
-				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
-					<Box>{t('Require_password_change')}</Box><ToggleSwitch disabled={setRandomPassword} checked={setRandomPassword || requirePasswordChange} onChange={handleChange('requirePasswordChange', () => !requirePasswordChange)} />
-				</Box>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Row>
-				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
-					<Box>{t('Set_random_password_and_send_by_email')}</Box><ToggleSwitch checked={setRandomPassword} onChange={handleChange('setRandomPassword', () => !setRandomPassword)} />
-				</Box>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('Roles')}</Field.Label>
-			<Field.Row>
-				<MultiSelectFiltered options={availableRoles} value={selectedRoles} onChange={handleChange('roles', (value) => value)} placeholder={t('Select_role')} />
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Row>
-				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
-					<Box>{t('Join_default_channels')}</Box><ToggleSwitch checked={joinDefaultChannels} onChange={handleChange('joinDefaultChannels', () => !joinDefaultChannels)} />
-				</Box>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Row>
-				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
-					<Box>{t('Send_welcome_email')}</Box><ToggleSwitch checked={sendWelcomeEmail} onChange={handleChange('sendWelcomeEmail', () => !sendWelcomeEmail)} />
-				</Box>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Row>
-				<Box display='flex' flexDirection='row' justifyContent='space-between' w='full'>
-					<Margins inlineEnd='x4'>
-						<Button flexGrow={1} onClick={() => setNewData({})}>{t('Cancel')}</Button>
-						<Button mie='none' flexGrow={1} onClick={handleSave}>{t('Save')}</Button>
-					</Margins>
-				</Box>
-			</Field.Row>
-		</Field>
-	</VerticalBar.ScrollableContent>;
+	return <UserForm formValues={values} formHandlers={handlers} availableRoles={availableRoles} append={append} {...props}/>;
 }
diff --git a/client/admin/users/CustomFieldsForm.js b/client/admin/users/CustomFieldsForm.js
new file mode 100644
index 000000000000..e6ee3074fa5b
--- /dev/null
+++ b/client/admin/users/CustomFieldsForm.js
@@ -0,0 +1,80 @@
+import React, { useMemo, useEffect } from 'react';
+import { TextInput, Select, Field, Divider, Box } from '@rocket.chat/fuselage';
+
+import { useSetting } from '../../contexts/SettingsContext';
+import { useForm } from '../../hooks/useForm';
+import { useTranslation } from '../../contexts/TranslationContext';
+import { capitalize } from '../../helpers/capitalize';
+
+const CustomTextInput = (props) => {
+	const t = useTranslation();
+	const { name, required, minLength, maxLength, setState, state } = props;
+	const verify = useMemo(() => {
+		const error = [];
+		if (!state && required) { error.push(t('Field_required')); }
+		if (state.length < minLength) { error.push(t('Min_length_is', minLength)); }
+		return error.join(', ');
+	}, [required, minLength, maxLength, state]);
+
+	return useMemo(() => <Field>
+		<Field.Label>{name}</Field.Label>
+		<Field.Row>
+			<TextInput name={name} error={verify} maxLength={maxLength} flexGrow={1} value={state} required={required} onChange={(e) => setState(e.currentTarget.value)}/>
+		</Field.Row>
+		<Field.Error>{verify}</Field.Error>
+	</Field>, [name, verify, state, required]);
+};
+
+const CustomSelect = (props) => {
+	const t = useTranslation();
+	const { name, required, options, setState, state } = props;
+	const mappedOptions = useMemo(() => Object.values(options).map((value) => [value, value]), [...options]);
+	const verify = useMemo(() => (!state.length && required ? t('Field_required') : ''), [required, state]);
+
+	return useMemo(() => <Field>
+		<Field.Label>{name}</Field.Label>
+		<Field.Row>
+			<Select name={name} error={verify} flexGrow={1} value={state} options={mappedOptions} required={required} onChange={(val) => setState(val)}/>
+		</Field.Row>
+		<Field.Error>{verify}</Field.Error>
+	</Field>, [name, verify, state, required, JSON.stringify(mappedOptions)]);
+};
+
+const CustomFieldsAssembler = ({ formValues, formHandlers, customFields, ...props }) => Object.entries(customFields).map(([key, value]) => {
+	const extraProps = {
+		key,
+		name: key,
+		setState: formHandlers[`handle${ capitalize(key) }`],
+		state: formValues[key],
+		...value,
+	};
+	return value.type === 'text'
+		? <CustomTextInput {...extraProps} {...props}/>
+		: <CustomSelect {...extraProps} {...props}/>;
+});
+
+export default function CustomFieldsForm({ customFieldsData, setCustomFieldsData, ...props }) {
+	const t = useTranslation();
+
+	const customFieldsJson = useSetting('Accounts_CustomFields');
+
+	const customFields = useMemo(() => JSON.parse(customFieldsJson || '{}'), []);
+
+	if (!Object.values(customFields).length) {
+		return null;
+	}
+
+	const defaultFields = useMemo(() => Object.entries(customFields).reduce((data, [key, value]) => { data[key] = value.defaultValue ?? ''; return data; }, {}), []);
+
+	const { values, handlers } = useForm({ ...defaultFields, ...customFieldsData });
+
+	useEffect(() => {
+		setCustomFieldsData(values);
+	}, [JSON.stringify(values)]);
+
+	return <>
+		<Divider />
+		<Box fontScale='s2'>{t('Custom_Fields')}</Box>
+		<CustomFieldsAssembler formValues={values} formHandlers={handlers} customFields={customFields} {...props}/>
+	</>;
+}
diff --git a/client/admin/users/EditUser.js b/client/admin/users/EditUser.js
index 055b61576116..522f355928ae 100644
--- a/client/admin/users/EditUser.js
+++ b/client/admin/users/EditUser.js
@@ -1,22 +1,21 @@
 import React, { useMemo, useState, useCallback } from 'react';
-import { Field, TextInput, Box, Skeleton, ToggleSwitch, Icon, TextAreaInput, MultiSelectFiltered, Margins, Button } from '@rocket.chat/fuselage';
+import { Box, Skeleton, Field, Margins, Button } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
-import { useEndpointData } from '../../hooks/useEndpointData';
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
 import { useEndpointAction } from '../../hooks/useEndpointAction';
 import { useEndpointUpload } from '../../hooks/useEndpointUpload';
-import { isEmail } from '../../../app/utils/lib/isEmail.js';
 import { useRoute } from '../../contexts/RouterContext';
 import UserAvatarEditor from '../../components/basic/avatar/UserAvatarEditor';
-import VerticalBar from '../../components/basic/VerticalBar';
+import { useForm } from '../../hooks/useForm';
+import UserForm from './UserForm';
 
 export function EditUserWithData({ userId, ...props }) {
 	const t = useTranslation();
-	const roleData = useEndpointData('roles.list', '') || {};
+	const { data: roleData, state: roleState, error: roleError } = useEndpointDataExperimental('roles.list', '') || {};
 	const { data, state, error } = useEndpointDataExperimental('users.info', useMemo(() => ({ userId }), [userId]));
 
-	if (state === ENDPOINT_STATES.LOADING) {
+	if ([state, roleState].includes(ENDPOINT_STATES.LOADING)) {
 		return <Box w='full' pb='x24' {...props}>
 			<Skeleton mbe='x4'/>
 			<Skeleton mbe='x8' />
@@ -27,19 +26,32 @@ export function EditUserWithData({ userId, ...props }) {
 		</Box>;
 	}
 
-	if (error) {
+	if (error || roleError) {
 		return <Box mbs='x16' {...props}>{t('User_not_found')}</Box>;
 	}
 
 	return <EditUser data={data.user} roles={roleData.roles} {...props}/>;
 }
 
+const getInitialValue = (data) => ({
+	roles: data.roles,
+	name: data.name ?? '',
+	username: data.username,
+	status: data.status,
+	bio: data.bio ?? '',
+	email: (data.emails && data.emails[0].address) || '',
+	emailVerified: (data.emails && data.emails[0].verified) || false,
+	setRandomPassword: false,
+	requirePasswordChange: data.setRandomPassword || false,
+	customFields: data.customFields ?? {},
+});
+
 export function EditUser({ data, roles, ...props }) {
 	const t = useTranslation();
 
-	const [newData, setNewData] = useState({});
 	const [avatarObj, setAvatarObj] = useState();
-	const hasUnsavedChanges = useMemo(() => Object.values(newData).filter((current) => current === null).length < Object.keys(newData).length, [JSON.stringify(newData)]) || avatarObj;
+
+	const { values, handlers, reset, hasUnsavedChanges } = useForm(getInitialValue(data));
 
 	const router = useRoute('admin-users');
 
@@ -50,8 +62,8 @@ export function EditUser({ data, roles, ...props }) {
 
 	const saveQuery = useMemo(() => ({
 		userId: data._id,
-		data: Object.fromEntries(Object.entries(newData).filter(([, value]) => value !== null)),
-	}), [data._id, JSON.stringify(newData)]);
+		data: values,
+	}), [data._id, JSON.stringify(values)]);
 
 	const saveAvatarQuery = useMemo(() => ({
 		userId: data._id,
@@ -77,113 +89,30 @@ export function EditUser({ data, roles, ...props }) {
 		return saveAvatarAction(avatarObj);
 	};
 
-	const handleSave = async () => {
-		if (hasUnsavedChanges) {
-			const result = await saveAction();
-			if (result.success) {
-				if (avatarObj) {
-					await updateAvatar();
-				}
-				goToUser(data._id);
+	const handleSave = useCallback(async () => {
+		const result = await saveAction();
+		if (result.success) {
+			if (avatarObj) {
+				await updateAvatar();
 			}
+			goToUser(data._id);
 		}
-	};
+	}, [saveAction, updateAvatar]);
 
-	const rolesAreEqual = (a, b) => {
-		if (a.length !== b.length) { return false; }
-		const result = a.reduce((acc, aValue) => {
-			const onlyOneMatches = b.reduce((acc, bValue) => (aValue === bValue ? acc + 1 : acc + 0), 0) === 1;
-			return onlyOneMatches ? acc + 1 : acc + 0;
-		}, 0);
-		return result === a.length;
-	};
+	const availableRoles = roles.map(({ _id, description }) => [_id, description || _id]);
 
-	const testEqual = (a, b) => a === b || !(a || b);
-	const handleChange = (field, currentValue, getValue = (e) => e.currentTarget.value, areEqual = testEqual) => (e) => setNewData({ ...newData, [field]: areEqual(getValue(e), currentValue) ? null : getValue(e) });
+	const prepend = useMemo(() => <UserAvatarEditor username={data.username} setAvatarObj={setAvatarObj}/>, []);
 
-	const availableRoles = roles.map(({ _id, description }) => [_id, description || _id]);
-	const selectedRoles = newData.roles ?? data.roles;
-	const name = newData.name ?? data.name ?? '';
-	const username = newData.username ?? data.username;
-	const status = newData.status ?? data.status;
-	const bio = newData.bio ?? data.bio ?? '';
-	const email = newData.email ?? (data.emails && data.emails[0].address);
-	const emailVerified = newData.verified ?? (data.emails && data.emails[0].verified);
-	const setRandomPassword = newData.setRandomPassword || false;
-	const requirePasswordChange = setRandomPassword || newData.requirePasswordChange || false;
-
-	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} qa-admin-user-edit='form' { ...props }>
-		<UserAvatarEditor username={data.username} setAvatarObj={setAvatarObj}/>
-		<Field>
-			<Field.Label>{t('Name')}</Field.Label>
-			<Field.Row>
-				<TextInput flexGrow={1} value={name} onChange={handleChange('name', data.name)}/>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('Username')}</Field.Label>
-			<Field.Row>
-				<TextInput flexGrow={1} value={username} onChange={handleChange('username', data.username)} addon={<Icon name='at' size='x20'/>}/>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('Email')}</Field.Label>
-			<Field.Row>
-				<TextInput flexGrow={1} value={email} error={!isEmail(email) ? 'error' : undefined} onChange={handleChange('email', data.emails && data.emails[0].address)} addon={<Icon name='mail' size='x20'/>}/>
-			</Field.Row>
-			<Field.Row>
-				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between' mbs='x4'>
-					<Box>{t('Verified')}</Box><ToggleSwitch checked={emailVerified} onChange={handleChange('verified', data.emails && data.emails[0].verified, () => !emailVerified)} />
-				</Box>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('StatusMessage')}</Field.Label>
-			<Field.Row>
-				<TextInput flexGrow={1} value={status} onChange={handleChange('status', data.status)} addon={<Icon name='edit' size='x20'/>}/>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('Bio')}</Field.Label>
-			<Field.Row>
-				<TextAreaInput rows={3} flexGrow={1} value={bio} onChange={handleChange('bio', data.bio)} addon={<Icon name='edit' size='x20' alignSelf='center'/>}/>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('Password')}</Field.Label>
-			<Field.Row>
-				<TextInput flexGrow={1} value={newData.password || ''} onChange={handleChange('password', '')} addon={<Icon name='key' size='x20'/>}/>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Row>
-				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
-					<Box>{t('Require_password_change')}</Box><ToggleSwitch checked={requirePasswordChange} disabled={setRandomPassword} onChange={handleChange('requirePasswordChange', false, () => !requirePasswordChange)} />
-				</Box>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Row>
-				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
-					<Box>{t('Set_random_password_and_send_by_email')}</Box><ToggleSwitch checked={setRandomPassword} onChange={handleChange('setRandomPassword', false, () => !setRandomPassword)} />
-				</Box>
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Label>{t('Roles')}</Field.Label>
-			<Field.Row>
-				<MultiSelectFiltered options={availableRoles} value={selectedRoles} onChange={handleChange('roles', data.roles, (value) => value, rolesAreEqual)} placeholder={t('Select_role')} />
-			</Field.Row>
-		</Field>
-		<Field>
-			<Field.Row>
-				<Box display='flex' flexDirection='row' justifyContent='space-between' w='full'>
-					<Margins inlineEnd='x4'>
-						<Button flexGrow={1} type='reset' disabled={!hasUnsavedChanges} onClick={() => setNewData({})}>{t('Reset')}</Button>
-						<Button mie='none' flexGrow={1} disabled={!hasUnsavedChanges} onClick={handleSave}>{t('Save')}</Button>
-					</Margins>
-				</Box>
-			</Field.Row>
-		</Field>
-	</VerticalBar.ScrollableContent>;
+	const append = useMemo(() => <Field>
+		<Field.Row>
+			<Box display='flex' flexDirection='row' justifyContent='space-between' w='full'>
+				<Margins inlineEnd='x4'>
+					<Button flexGrow={1} type='reset' disabled={!hasUnsavedChanges} onClick={reset}>{t('Reset')}</Button>
+					<Button mie='none' flexGrow={1} disabled={!hasUnsavedChanges} onClick={handleSave}>{t('Save')}</Button>
+				</Margins>
+			</Box>
+		</Field.Row>
+	</Field>, [handleSave, reset]);
+
+	return <UserForm formValues={values} formHandlers={handlers} availableRoles={availableRoles} prepend={prepend} append={append} {...props}/>;
 }
diff --git a/client/admin/users/UserForm.js b/client/admin/users/UserForm.js
new file mode 100644
index 000000000000..048074c7fe00
--- /dev/null
+++ b/client/admin/users/UserForm.js
@@ -0,0 +1,125 @@
+import React, { useCallback, useMemo } from 'react';
+import { Field, TextInput, TextAreaInput, MultiSelectFiltered, Box, ToggleSwitch, Icon } from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../contexts/TranslationContext';
+import { isEmail } from '../../../app/utils/lib/isEmail.js';
+import VerticalBar from '../../components/basic/VerticalBar';
+import CustomFieldsForm from './CustomFieldsForm';
+
+
+export default function UserForm({ formValues, formHandlers, availableRoles, append, prepend, ...props }) {
+	const t = useTranslation();
+
+	const {
+		name,
+		username,
+		email,
+		verified,
+		statusText,
+		bio,
+		password,
+		setRandomPassword,
+		requirePasswordChange,
+		roles,
+		customFields,
+		joinDefaultChannels,
+		sendWelcomeEmail,
+	} = formValues;
+
+	const {
+		handleName,
+		handleUsername,
+		handleEmail,
+		handleVerified,
+		handleStatusText,
+		handleBio,
+		handlePassword,
+		handleSetRandomPassword,
+		handleRequirePasswordChange,
+		handleRoles,
+		handleCustomFields,
+		handleJoinDefaultChannels,
+		handleSendWelcomeEmail,
+	} = formHandlers;
+
+	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
+		{ prepend }
+		{useMemo(() => <Field>
+			<Field.Label>{t('Name')}</Field.Label>
+			<Field.Row>
+				<TextInput flexGrow={1} value={name} onChange={handleName}/>
+			</Field.Row>
+		</Field>, [name, handleName])}
+		{useMemo(() => <Field>
+			<Field.Label>{t('Username')}</Field.Label>
+			<Field.Row>
+				<TextInput flexGrow={1} value={username} onChange={handleUsername} addon={<Icon name='at' size='x20'/>}/>
+			</Field.Row>
+		</Field>, [username, handleUsername])}
+		{useMemo(() => <Field>
+			<Field.Label>{t('Email')}</Field.Label>
+			<Field.Row>
+				<TextInput flexGrow={1} value={email} error={!isEmail(email) && email.length > 0 ? 'error' : undefined} onChange={handleEmail} addon={<Icon name='mail' size='x20'/>}/>
+			</Field.Row>
+			<Field.Row>
+				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between' mbs='x4'>
+					<Box>{t('Verified')}</Box><ToggleSwitch checked={verified} onChange={handleVerified} />
+				</Box>
+			</Field.Row>
+		</Field>, [email, handleEmail, verified, handleVerified])}
+		{useMemo(() => <Field>
+			<Field.Label>{t('StatusMessage')}</Field.Label>
+			<Field.Row>
+				<TextInput flexGrow={1} value={statusText} onChange={handleStatusText} addon={<Icon name='edit' size='x20'/>}/>
+			</Field.Row>
+		</Field>, [statusText, handleStatusText])}
+		{useMemo(() => <Field>
+			<Field.Label>{t('Bio')}</Field.Label>
+			<Field.Row>
+				<TextAreaInput rows={3} flexGrow={1} value={bio} onChange={handleBio} addon={<Icon name='edit' size='x20' alignSelf='center'/>}/>
+			</Field.Row>
+		</Field>, [bio, handleBio])}
+		{useMemo(() => <Field>
+			<Field.Label>{t('Password')}</Field.Label>
+			<Field.Row>
+				<TextInput flexGrow={1} value={password} onChange={handlePassword} addon={<Icon name='key' size='x20'/>}/>
+			</Field.Row>
+		</Field>, [password, handlePassword])}
+		{useMemo(() => <Field>
+			<Field.Row>
+				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
+					<Box>{t('Require_password_change')}</Box><ToggleSwitch disabled={setRandomPassword} checked={setRandomPassword || requirePasswordChange} onChange={handleRequirePasswordChange} />
+				</Box>
+			</Field.Row>
+		</Field>, [requirePasswordChange, handleRequirePasswordChange])}
+		{useMemo(() => <Field>
+			<Field.Row>
+				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
+					<Box>{t('Set_random_password_and_send_by_email')}</Box><ToggleSwitch checked={setRandomPassword} onChange={handleSetRandomPassword} />
+				</Box>
+			</Field.Row>
+		</Field>, [setRandomPassword, handleSetRandomPassword])}
+		{useMemo(() => <Field>
+			<Field.Label>{t('Roles')}</Field.Label>
+			<Field.Row>
+				<MultiSelectFiltered options={availableRoles} value={roles} onChange={handleRoles} placeholder={t('Select_role')} flexShrink={1}/>
+			</Field.Row>
+		</Field>, [...roles, handleRoles, JSON.stringify(availableRoles)])}
+		{useMemo(() => handleJoinDefaultChannels && <Field>
+			<Field.Row>
+				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
+					<Box>{t('Join_default_channels')}</Box><ToggleSwitch checked={joinDefaultChannels} onChange={handleJoinDefaultChannels} />
+				</Box>
+			</Field.Row>
+		</Field>, [joinDefaultChannels, handleJoinDefaultChannels])}
+		{useMemo(() => handleSendWelcomeEmail && <Field>
+			<Field.Row>
+				<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
+					<Box>{t('Send_welcome_email')}</Box><ToggleSwitch checked={sendWelcomeEmail} onChange={handleSendWelcomeEmail} />
+				</Box>
+			</Field.Row>
+		</Field>, [sendWelcomeEmail, handleSendWelcomeEmail])}
+		<CustomFieldsForm customFieldsData={customFields} setCustomFieldsData={handleCustomFields}/>
+		{ append }
+	</VerticalBar.ScrollableContent>;
+}
diff --git a/client/helpers/capitalize.js b/client/helpers/capitalize.js
new file mode 100644
index 000000000000..e709a37503bf
--- /dev/null
+++ b/client/helpers/capitalize.js
@@ -0,0 +1,4 @@
+export const capitalize = (s) => {
+	if (typeof s !== 'string') { return ''; }
+	return s.charAt(0).toUpperCase() + s.slice(1);
+};
diff --git a/client/hooks/useEndpointDataExperimental.js b/client/hooks/useEndpointDataExperimental.js
index 5e3e16361cfa..dd284a7a6c84 100644
--- a/client/hooks/useEndpointDataExperimental.js
+++ b/client/hooks/useEndpointDataExperimental.js
@@ -5,14 +5,13 @@ import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
 
 export const ENDPOINT_STATES = {
 	LOADING: 'LOADING',
-	DELAYING: 'DELAYING',
 	DONE: 'DONE',
 	ERROR: 'ERROR',
 };
 
 const defaultState = { data: null, state: ENDPOINT_STATES.LOADING };
 
-export const useEndpointDataExperimental = (endpoint, params = {}) => {
+export const useEndpointDataExperimental = (endpoint, params = {}, { delayTimeout = 1000 } = {}) => {
 	const [data, setData] = useState(defaultState);
 
 	const getData = useEndpoint('GET', endpoint);
@@ -27,8 +26,8 @@ export const useEndpointDataExperimental = (endpoint, params = {}) => {
 					return;
 				}
 
-				setData({ state: ENDPOINT_STATES.DELAYING });
-			}, 1000);
+				setData({ delaying: true, state: ENDPOINT_STATES.LOADING });
+			}, delayTimeout);
 
 			try {
 				setData(defaultState);
diff --git a/client/hooks/useForm.js b/client/hooks/useForm.js
index 2d7f213b21a0..90d967d93fcc 100644
--- a/client/hooks/useForm.js
+++ b/client/hooks/useForm.js
@@ -1,20 +1,19 @@
 import { useState, useCallback } from 'react';
 
-const getValue = (e) => (e.currentTarget ? e.currentTarget.value : e);
+import { capitalize } from '../helpers/capitalize';
 
-const capitalize = (s) => {
-	if (typeof s !== 'string') { return ''; }
-	return s.charAt(0).toUpperCase() + s.slice(1);
-};
+const getValue = (e) => (e.currentTarget ? e.currentTarget.value : e);
 
 export const useForm = (obj) => {
 	const resetCallbacks = [];
+	const hasUnsavedChanges = [];
 	const ret = Object.keys(obj).sort().reduce((ret, key) => {
 		const value = obj[key];
 		const [data, setData] = useState(value);
 
 		ret.values = { ...ret.values, [key]: data };
 		ret.handlers = { ...ret.handlers, [`handle${ capitalize(key) }`]: useCallback(typeof value !== 'boolean' ? (e) => setData(getValue(e)) : () => setData(!data), [data]) };
+		hasUnsavedChanges.push(JSON.stringify(value) !== JSON.stringify(data));
 		resetCallbacks.push(() => setData(value));
 
 		return ret;
@@ -24,5 +23,7 @@ export const useForm = (obj) => {
 		resetCallbacks.forEach((reset) => reset());
 	};
 
+	ret.hasUnsavedChanges = hasUnsavedChanges.filter(Boolean).length > 0;
+
 	return ret;
 };