From cec3cd30856c401909128a4423930f8feb25cf4c Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Thu, 25 Jun 2020 23:00:37 -0300
Subject: [PATCH 01/15] Rewrite user Profile

---
 app/ui-account/client/account.html            |   2 +-
 app/ui-account/client/account.js              |   2 +-
 client/account/AccountProfileForm.js          | 208 ++++++++++++++
 client/account/AccountProfilePage.js          | 269 ++++++++++++++++++
 client/account/AccountRoute.js                |  28 ++
 client/admin/users/UserForm.js                |  11 +-
 client/admin/users/UserInfoActions.js         |  49 +---
 .../ConfirmOwnerChangeWarningModal.js         |  54 ++++
 .../users => components}/CustomFieldsForm.js  |  32 +--
 .../basic/avatar/UserAvatarEditor.js          |  22 +-
 .../components/basic/userStatus/UserStatus.js |  13 +
 .../basic/userStatus/UserStatusMenu.js        |  82 ++++++
 client/helpers/getUserEmailAddress.js         |   1 +
 client/hooks/useUpdateAvatar.js               |  55 ++++
 client/routes.js                              |   7 +-
 15 files changed, 752 insertions(+), 83 deletions(-)
 create mode 100644 client/account/AccountProfileForm.js
 create mode 100644 client/account/AccountProfilePage.js
 create mode 100644 client/account/AccountRoute.js
 create mode 100644 client/components/ConfirmOwnerChangeWarningModal.js
 rename client/{admin/users => components}/CustomFieldsForm.js (74%)
 create mode 100644 client/components/basic/userStatus/UserStatus.js
 create mode 100644 client/components/basic/userStatus/UserStatusMenu.js
 create mode 100644 client/helpers/getUserEmailAddress.js
 create mode 100644 client/hooks/useUpdateAvatar.js

diff --git a/app/ui-account/client/account.html b/app/ui-account/client/account.html
index 537dbcdf8dc2..2ac2689ab4f9 100644
--- a/app/ui-account/client/account.html
+++ b/app/ui-account/client/account.html
@@ -1,4 +1,4 @@
-<template name="account">
+<template name="account2">
 	<section class="page-container page-home page-static">
 		<header class="fixed-title border-component-color">
 			{{> burger}}
diff --git a/app/ui-account/client/account.js b/app/ui-account/client/account.js
index 633c799ad356..2359331bb410 100644
--- a/app/ui-account/client/account.js
+++ b/app/ui-account/client/account.js
@@ -5,7 +5,7 @@ import { SideNav } from '../../ui-utils';
 import '../../../client/account/sidebarItems';
 
 
-Template.account.onRendered(function() {
+Template.account2.onRendered(function() {
 	Tracker.afterFlush(function() {
 		SideNav.setFlex('accountFlex');
 		SideNav.openFlex();
diff --git a/client/account/AccountProfileForm.js b/client/account/AccountProfileForm.js
new file mode 100644
index 000000000000..73495ec3b2c6
--- /dev/null
+++ b/client/account/AccountProfileForm.js
@@ -0,0 +1,208 @@
+import React, { useCallback, useMemo, useEffect, useState } from 'react';
+import { Field, FieldGroup, TextInput, TextAreaInput, Box, Icon, AnimatedVisibility, PasswordInput, Button } from '@rocket.chat/fuselage';
+import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
+
+import { useTranslation } from '../contexts/TranslationContext';
+import { isEmail } from '../../app/utils/lib/isEmail.js';
+import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
+import { useMethod } from '../contexts/ServerContext';
+import { getUserEmailAddress } from '../helpers/getUserEmailAddress';
+import { UserAvatarEditor } from '../components/basic/avatar/UserAvatarEditor';
+import CustomFieldsForm from '../components/CustomFieldsForm';
+import UserStatusMenu from '../components/basic/userStatus/UserStatusMenu';
+
+export default function AccountProfileForm({ values, handlers, user, settings, setCanSave, ...props }) {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const checkUsernameAvailability = useMethod('checkUsernameAvailability');
+	const getAvatarSuggestions = useMethod('getAvatarSuggestion');
+	const sendConfirmationEmail = useMethod('sendConfirmationEmail');
+
+	const [usernameError, setUsernameError] = useState();
+	const [avatarSuggestions, setAvatarSuggestions] = useState();
+
+	const {
+		allowRealNameChange,
+		allowUserStatusMessageChange,
+		allowEmailChange,
+		allowPasswordChange,
+		allowUserAvatarChange,
+		canChangeUsername,
+		namesRegex,
+		requireName,
+	} = settings;
+
+	const {
+		realname,
+		email,
+		username,
+		password,
+		confirmationPassword,
+		statusText,
+		bio,
+		statusType,
+		customFields,
+	} = values;
+
+	const {
+		handleRealname,
+		handleEmail,
+		handleUsername,
+		handlePassword,
+		handleConfirmationPassword,
+		handleAvatar,
+		handleStatusText,
+		handleStatusType,
+		handleBio,
+		handleCustomFields,
+	} = handlers;
+
+	const previousEmail = getUserEmailAddress(user);
+
+	const handleSendConfirmationEmail = useCallback(async () => {
+		if (email !== previousEmail) {
+			return;
+		}
+		try {
+			await sendConfirmationEmail(email);
+			dispatchToastMessage({ type: 'success', message: t('Verification_email_sent') });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	}, [dispatchToastMessage, email, previousEmail, sendConfirmationEmail, t]);
+
+	const passwordError = useMemo(() => (!password || !confirmationPassword || password === confirmationPassword ? undefined : t('Passwords_do_not_match')), [t, password, confirmationPassword]);
+	const emailError = useMemo(() => (isEmail(email) ? undefined : 'error-invalid-email-address'), [email]);
+	const checkUsername = useDebouncedCallback(async (username) => {
+		if (user.username === username) { return setUsernameError(undefined); }
+		if (!namesRegex.test(username)) { return setUsernameError(t('error-invalid-username')); }
+		const isAvailable = await checkUsernameAvailability(username);
+		if (!isAvailable) { return setUsernameError(t('Username_already_exist')); }
+		setUsernameError(undefined);
+	}, 400, [namesRegex, t, user.username, checkUsernameAvailability, setUsernameError]);
+
+	useEffect(() => {
+		const getSuggestions = async () => {
+			const suggestions = await getAvatarSuggestions();
+			setAvatarSuggestions(suggestions);
+		};
+		getSuggestions();
+	}, [getAvatarSuggestions]);
+
+	useEffect(() => {
+		checkUsername(username);
+	}, [checkUsername, username]);
+
+	useEffect(() => {
+		if (!password) {
+			handleConfirmationPassword('');
+		}
+	}, [password, handleConfirmationPassword]);
+
+	const nameError = useMemo(() => {
+		if (user.name === realname) { return undefined; }
+		if (!realname && requireName) { return t('Field_required'); }
+	}, [realname, requireName, t, user.name]);
+
+	const statusTextError = useMemo(() => (!statusText || statusText.length <= 120 || statusText.length === 0 ? undefined : t('Max_length_is', '120')), [statusText, t]);
+	const { emails: [{ verified = false }] } = user;
+
+	const canSave = !![
+		!!passwordError,
+		!!emailError,
+		!!usernameError,
+		!!nameError,
+		!!statusTextError,
+	].filter(Boolean);
+
+	useEffect(() => {
+		setCanSave(canSave);
+	}, [canSave, setCanSave]);
+
+	return <FieldGroup is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
+		{useMemo(() => <Field>
+			<UserAvatarEditor username={username} setAvatarObj={handleAvatar} disabled={!allowUserAvatarChange} suggestions={avatarSuggestions}/>
+		</Field>, [username, handleAvatar, allowUserAvatarChange, avatarSuggestions])}
+		<Box display='flex' flexDirection='row' justifyContent='space-between'>
+			{useMemo(() => <Field mie='x8'>
+				<Field.Label flexGrow={0}>{t('Name')}</Field.Label>
+				<Field.Row>
+					<TextInput error={nameError} disabled={!allowRealNameChange} flexGrow={1} value={realname} onChange={handleRealname}/>
+				</Field.Row>
+				<Field.Error>
+					{nameError}
+				</Field.Error>
+			</Field>, [t, realname, handleRealname, allowRealNameChange, nameError])}
+			{useMemo(() => <Field mis='x8' >
+				<Field.Label flexGrow={0}>{t('Username')}</Field.Label>
+				<Field.Row>
+					<TextInput error={usernameError} disabled={!canChangeUsername} flexGrow={1} value={username} onChange={handleUsername} addon={<Icon name='at' size='x20'/>}/>
+				</Field.Row>
+				<Field.Error>
+					{usernameError}
+				</Field.Error>
+			</Field>, [t, username, handleUsername, canChangeUsername, usernameError])}
+		</Box>
+		{useMemo(() => <Field>
+			<Field.Label>{t('StatusMessage')}</Field.Label>
+			<Field.Row>
+				<TextInput error={statusTextError} disabled={!allowUserStatusMessageChange} flexGrow={1} value={statusText} onChange={handleStatusText} addon={<UserStatusMenu margin='neg-x2' onChange={handleStatusType} initialStatus={statusType}/>}/>
+			</Field.Row>
+			<Field.Error>
+				{statusTextError}
+			</Field.Error>
+		</Field>, [t, statusTextError, allowUserStatusMessageChange, statusText, handleStatusText, handleStatusType, statusType])}
+		{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, t])}
+		<Box display='flex' flexDirection='row' justifyContent='space-between' alignItems='flex-start'>
+			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={0}>
+				{useMemo(() => <Field mie='x8' flexGrow={1}>
+					<Field.Label>{t('Email')}</Field.Label>
+					<Field.Row>
+						<TextInput
+							flexGrow={1}
+							value={email}
+							error={emailError}
+							onChange={handleEmail}
+							addon={
+								<Icon name={ verified ? 'circle-check' : 'mail' } size='x20'/>
+							}
+							disabled={!allowEmailChange}
+						/>
+					</Field.Row>
+					<Field.Error>
+						{t(emailError)}
+					</Field.Error>
+				</Field>, [t, email, handleEmail, verified, allowEmailChange, emailError])}
+				{useMemo(() => !verified && <Field>
+					<Button disabled={email !== previousEmail} ghost onClick={handleSendConfirmationEmail}>
+						{t('Resend_verification_email')}
+					</Button>
+				</Field>, [verified, t, email, previousEmail, handleSendConfirmationEmail])}
+			</Box>
+			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={0} mis='x8'>
+				{useMemo(() => <Field flexGrow={1} mbe='x8'>
+					<Field.Label>{t('Password')}</Field.Label>
+					<Field.Row>
+						<PasswordInput disabled={!allowPasswordChange} error={passwordError} flexGrow={1} value={password} onChange={handlePassword} addon={<Icon name='key' size='x20'/>}/>
+					</Field.Row>
+				</Field>, [t, password, handlePassword, passwordError, allowPasswordChange])}
+				{useMemo(() => <AnimatedVisibility visibility={password ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN }><Field>
+					<Field.Label>{t('Confirm_password')}</Field.Label>
+					<Field.Row>
+						<PasswordInput error={passwordError} flexGrow={1} value={confirmationPassword} onChange={handleConfirmationPassword} addon={<Icon name='key' size='x20'/>}/>
+					</Field.Row>
+					<Field.Error>
+						{passwordError}
+					</Field.Error>
+				</Field></AnimatedVisibility>, [t, confirmationPassword, handleConfirmationPassword, password, passwordError])}
+			</Box>
+		</Box>
+		<CustomFieldsForm customFieldsData={customFields} setCustomFieldsData={handleCustomFields}/>
+	</FieldGroup>;
+}
diff --git a/client/account/AccountProfilePage.js b/client/account/AccountProfilePage.js
new file mode 100644
index 000000000000..ffaa9c24f96e
--- /dev/null
+++ b/client/account/AccountProfilePage.js
@@ -0,0 +1,269 @@
+import { SHA256 } from 'meteor/sha';
+import React, { useMemo, useState, useCallback } from 'react';
+import { ButtonGroup, Button, Box, Icon, PasswordInput, TextInput } from '@rocket.chat/fuselage';
+
+import Page from '../components/basic/Page';
+import AccountProfileForm from './AccountProfileForm';
+import ConfirmOwnerChangeWarningModal from '../components/ConfirmOwnerChangeWarningModal';
+import { useTranslation } from '../contexts/TranslationContext';
+import { useForm } from '../hooks/useForm';
+import { useSetting } from '../contexts/SettingsContext';
+import { useUser } from '../contexts/UserContext';
+import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
+import { useMethod } from '../contexts/ServerContext';
+import { Modal } from '../components/basic/Modal';
+import { useUpdateAvatar } from '../hooks/useUpdateAvatar';
+import { getUserEmailAddress } from '../helpers/getUserEmailAddress';
+
+const ActionConfirmModal = ({ onSave, onCancel, title, text, isPassword, ...props }) => {
+	const t = useTranslation();
+	const [inputText, setInputText] = useState('');
+
+	const handleChange = useCallback((e) => setInputText(e.currentTarget.value), [setInputText]);
+	const handleSave = useCallback(() => { onSave(inputText); onCancel(); }, [inputText, onSave, onCancel]);
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon color='danger' name='modal-warning' size={20}/>
+			<Modal.Title>{title}</Modal.Title>
+			<Modal.Close onClick={onCancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			<Box mb='x8'>{text}</Box>
+			{isPassword && <PasswordInput w='full' value={inputText} onChange={handleChange}/>}
+			{!isPassword && <TextInput w='full' value={inputText} onChange={handleChange}/>}
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button ghost onClick={onCancel}>{t('Cancel')}</Button>
+				<Button primary danger onClick={handleSave}>{t('Continue')}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+const getInitialValues = (user) => ({
+	realname: user.name ?? '',
+	email: getUserEmailAddress(user) ?? '',
+	username: user.username ?? '',
+	password: '',
+	confirmationPassword: '',
+	avatar: '',
+	url: user.avatarUrl ?? '',
+	statusText: user.statusText ?? '',
+	statusType: user.status ?? '',
+	bio: user.bio ?? '',
+	customFields: user.customFields ?? {},
+});
+
+const AccountProfilePage = (props) => {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const user = useUser();
+
+	const { values, handlers, hasUnsavedChanges } = useForm(getInitialValues(user));
+	const [canSave, setCanSave] = useState(true);
+	const [modal, setModal] = useState(null);
+	const [loggingOut, setLoggingOut] = useState(false);
+
+	const logoutOtherClients = useMethod('logoutOtherClients');
+	const deleteOwnAccount = useMethod('deleteUserOwnAccount');
+	const saveFn = useMethod('saveUserProfile');
+
+	const closeModal = useCallback(() => setModal(null), [setModal]);
+
+	const localPassword = !!(user && user.services && user.services.password && user.services.password.bcrypt.trim());
+	const requirePasswordConfirmation = (values.email !== getUserEmailAddress(user) || !!values.password) && localPassword;
+
+	const erasureType = useSetting('Message_ErasureType');
+	const allowRealNameChange = useSetting('Accounts_AllowRealNameChange');
+	const allowUserStatusMessageChange = useSetting('Accounts_AllowUserStatusMessageChange');
+	const allowUsernameChange = useSetting('Accounts_AllowUsernameChange');
+	const allowEmailChange = useSetting('Accounts_AllowEmailChange');
+	const allowPasswordChange = useSetting('Accounts_AllowPasswordChange');
+	const allowUserAvatarChange = useSetting('Accounts_AllowUserAvatarChange');
+	const allowDeleteOwnAccount = useSetting('Accounts_AllowDeleteOwnAccount');
+	const ldapEnabled = useSetting('LDAP_Enable');
+	const requireName = useSetting('Accounts_RequireNameForSignUp');
+	const namesRegexSetting = useSetting('UTF8_Names_Validation');
+
+	const namesRegex = useMemo(() => new RegExp(`^${ namesRegexSetting }$`), [namesRegexSetting]);
+
+	const canChangeUsername = allowUsernameChange && !ldapEnabled;
+
+	const settings = useMemo(() => ({
+		allowRealNameChange,
+		allowUserStatusMessageChange,
+		allowEmailChange,
+		allowPasswordChange,
+		allowUserAvatarChange,
+		allowDeleteOwnAccount,
+		canChangeUsername,
+		requireName,
+		namesRegex,
+	}), [
+		allowDeleteOwnAccount,
+		allowEmailChange,
+		allowPasswordChange,
+		allowRealNameChange,
+		allowUserAvatarChange,
+		allowUserStatusMessageChange,
+		canChangeUsername,
+		requireName,
+		namesRegex,
+	]);
+
+	const {
+		realname,
+		email,
+		avatar,
+		username,
+		password,
+		statusText,
+		statusType,
+		customFields,
+		bio,
+	} = values;
+
+	const { handleAvatar } = handlers;
+
+	const updateAvatar = useUpdateAvatar(avatar, user._id);
+
+	const onSave = useCallback(async () => {
+		const save = async (typedPassword) => {
+			try {
+				const avatarResult = await updateAvatar();
+				if (avatarResult) { handleAvatar(''); }
+				await saveFn({
+					...allowRealNameChange && { realname },
+					...allowEmailChange && getUserEmailAddress(user) !== email && { email },
+					...allowPasswordChange && { password },
+					...canChangeUsername && { username },
+					...allowUserStatusMessageChange && { statusText },
+					...typedPassword && { typedPassword: SHA256(typedPassword) },
+					statusType,
+					bio: bio || '',
+				}, customFields);
+				dispatchToastMessage({ type: 'success', message: t('Profile_saved_successfully') });
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		};
+
+		if (requirePasswordConfirmation) {
+			return setModal(() => <ActionConfirmModal
+				onSave={save}
+				onCancel={closeModal}
+				title={t('Please_enter_your_password')}
+				text={t('For_your_security_you_must_enter_your_current_password_to_continue')}
+				isPassword
+			/>);
+		}
+
+		save();
+	}, [
+		saveFn,
+		allowEmailChange,
+		allowPasswordChange,
+		allowRealNameChange,
+		allowUserStatusMessageChange,
+		bio,
+		canChangeUsername,
+		email,
+		password,
+		realname,
+		statusText,
+		username,
+		user,
+		updateAvatar,
+		handleAvatar,
+		closeModal,
+		requirePasswordConfirmation,
+		dispatchToastMessage,
+		t,
+		customFields,
+		statusType,
+	]);
+
+	const handleLogoutOtherLocations = useCallback(async () => {
+		setLoggingOut(true);
+		try {
+			await logoutOtherClients();
+			dispatchToastMessage({ type: 'success', message: t('Logged_out_of_other_clients_successfully') });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+		setLoggingOut(false);
+	}, [logoutOtherClients, dispatchToastMessage, t]);
+
+	const handleDeleteOwnAccount = useCallback(async () => {
+		const save = async (passwordOrUsername) => {
+			try {
+				await deleteOwnAccount(SHA256(passwordOrUsername));
+				dispatchToastMessage({ type: 'success', message: t('User_has_been_deleted') });
+			} catch (error) {
+				if (error.error === 'user-last-owner') {
+					const { shouldChangeOwner, shouldBeRemoved } = error.details;
+					return setModal(() => <ConfirmOwnerChangeWarningModal
+						onConfirm={() => { deleteOwnAccount(SHA256(passwordOrUsername), true); }}
+						onCancel={closeModal}
+						contentTitle={t(`Delete_User_Warning_${ erasureType }`)}
+						confirmLabel={t('Continue')}
+						shouldChangeOwner={shouldChangeOwner}
+						shouldBeRemoved={shouldBeRemoved}
+					/>);
+				}
+
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		};
+
+		const title = t('Are_you_sure_you_want_to_delete_your_account');
+		if (localPassword) {
+			return setModal(() => <ActionConfirmModal
+				onSave={save}
+				onCancel={closeModal}
+				title={title}
+				text={t('For_your_security_you_must_enter_your_current_password_to_continue')}
+				isPassword
+			/>);
+		}
+		return setModal(() => <ActionConfirmModal
+			onSave={save}
+			onCancel={closeModal}
+			title={title}
+			text={t('If_you_are_sure_type_in_your_username')}
+			isPassword
+		/>);
+	}, [closeModal, deleteOwnAccount, dispatchToastMessage, erasureType, localPassword, t]);
+
+	return <>
+		<Page {...props}>
+			<Page.Header title={t('Profile')}>
+				<ButtonGroup>
+					<Button primary disabled={!hasUnsavedChanges || !canSave || loggingOut} onClick={onSave}>
+						{t('Save_changes')}
+					</Button>
+				</ButtonGroup>
+			</Page.Header>
+			<Page.ScrollableContent>
+				<Box maxWidth='x600' w='full' alignSelf='center'>
+					<AccountProfileForm values={values} handlers={handlers} user={user} settings={settings} setCanSave={setCanSave}/>
+					<ButtonGroup stretch mb='x12'>
+						<Button ghost onClick={handleLogoutOtherLocations} flexGrow={0} disabled={loggingOut}>
+							{t('Logout_Others')}
+						</Button>
+						{allowDeleteOwnAccount && <Button ghost danger onClick={handleDeleteOwnAccount}>
+							<Icon name='trash' size='x20' mie='x4'/>
+							{t('Delete_my_account')}
+						</Button>}
+					</ButtonGroup>
+				</Box>
+			</Page.ScrollableContent>
+		</Page>
+		{ modal }
+	</>;
+};
+
+export default AccountProfilePage;
diff --git a/client/account/AccountRoute.js b/client/account/AccountRoute.js
new file mode 100644
index 000000000000..9f6479d83c42
--- /dev/null
+++ b/client/account/AccountRoute.js
@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+
+import { useRouteParameter, useRoute } from '../contexts/RouterContext';
+import { SideNav } from '../../app/ui-utils';
+import AccountProfilePage from './AccountProfilePage';
+import { createAccountSidebarTemplate } from './sidebarItems';
+
+createAccountSidebarTemplate();
+
+const AccountRoute = () => {
+	const page = useRouteParameter('group');
+	const router = useRoute('account');
+
+	useEffect(() => { !page && router.push({ group: 'profile' }); }, [page, router]);
+
+	useEffect(() => {
+		SideNav.setFlex('accountFlex');
+		SideNav.openFlex();
+	});
+
+	return <>
+		{{
+			profile: <AccountProfilePage />,
+		}[page]}
+	</>;
+};
+
+export default AccountRoute;
diff --git a/client/admin/users/UserForm.js b/client/admin/users/UserForm.js
index cd39eaf59323..83e27e36f4a4 100644
--- a/client/admin/users/UserForm.js
+++ b/client/admin/users/UserForm.js
@@ -1,11 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
-import { Field, TextInput, TextAreaInput, MultiSelectFiltered, Box, ToggleSwitch, Icon } from '@rocket.chat/fuselage';
+import { Field, TextInput, TextAreaInput, MultiSelectFiltered, Box, ToggleSwitch, Icon, Divider } 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';
-
+import CustomFieldsForm from '../../components/CustomFieldsForm';
 
 export default function UserForm({ formValues, formHandlers, availableRoles, append, prepend, ...props }) {
 	const t = useTranslation();
@@ -119,7 +118,11 @@ export default function UserForm({ formValues, formHandlers, availableRoles, app
 				</Box>
 			</Field.Row>
 		</Field>, [handleSendWelcomeEmail, t, sendWelcomeEmail])}
-		<CustomFieldsForm customFieldsData={customFields} setCustomFieldsData={handleCustomFields}/>
+		<>
+			<Divider />
+			<Box fontScale='s2'>{t('Custom_Fields')}</Box>
+			<CustomFieldsForm customFieldsData={customFields} setCustomFieldsData={handleCustomFields}/>
+		</>
 		{ append }
 	</VerticalBar.ScrollableContent>;
 }
diff --git a/client/admin/users/UserInfoActions.js b/client/admin/users/UserInfoActions.js
index 2f210645da4c..b3748201b856 100644
--- a/client/admin/users/UserInfoActions.js
+++ b/client/admin/users/UserInfoActions.js
@@ -8,8 +8,7 @@ import { usePermission } from '../../contexts/AuthorizationContext';
 import { useToastMessageDispatch } from '../../contexts/ToastMessagesContext';
 import { useMethod, useEndpoint } from '../../contexts/ServerContext';
 import { useSetting } from '../../contexts/SettingsContext';
-import RawText from '../../components/basic/RawText';
-
+import ConfirmOwnerChangeWarningModal from '../../components/ConfirmOwnerChangeWarningModal';
 
 const DeleteWarningModal = ({ onDelete, onCancel, ...props }) => {
 	const t = useTranslation();
@@ -33,52 +32,6 @@ const DeleteWarningModal = ({ onDelete, onCancel, ...props }) => {
 	</Modal>;
 };
 
-const ConfirmOwnerChangeWarningModal = ({ onConfirm, onCancel, contentTitle = '', confirmLabel = '', shouldChangeOwner, shouldBeRemoved, ...props }) => {
-	const t = useTranslation();
-
-	let changeOwnerRooms = '';
-	if (shouldChangeOwner.length > 0) {
-		if (shouldChangeOwner.length === 1) {
-			changeOwnerRooms = t('A_new_owner_will_be_assigned_automatically_to_the__roomName__room', { roomName: shouldChangeOwner.pop() });
-		} else if (shouldChangeOwner.length <= 5) {
-			changeOwnerRooms = t('A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__', { count: shouldChangeOwner.length, rooms: shouldChangeOwner.join(', ') });
-		} else {
-			changeOwnerRooms = t('A_new_owner_will_be_assigned_automatically_to__count__rooms', { count: shouldChangeOwner.length });
-		}
-	}
-
-	let removedRooms = '';
-	if (shouldBeRemoved.length > 0) {
-		if (shouldBeRemoved.length === 1) {
-			removedRooms = t('The_empty_room__roomName__will_be_removed_automatically', { roomName: shouldBeRemoved.pop() });
-		} else if (shouldBeRemoved.length <= 5) {
-			removedRooms = t('__count__empty_rooms_will_be_removed_automatically__rooms__', { count: shouldBeRemoved.length, rooms: shouldBeRemoved.join(', ') });
-		} else {
-			removedRooms = t('__count__empty_rooms_will_be_removed_automatically', { count: shouldBeRemoved.length });
-		}
-	}
-
-	return <Modal {...props}>
-		<Modal.Header>
-			<Icon color='danger' name='modal-warning' size={20}/>
-			<Modal.Title>{t('Are_you_sure')}</Modal.Title>
-			<Modal.Close onClick={onCancel}/>
-		</Modal.Header>
-		<Modal.Content fontScale='p1'>
-			{contentTitle}
-
-			{ changeOwnerRooms && <Box marginBlock='x16'><RawText>{changeOwnerRooms}</RawText></Box> }
-			{ removedRooms && <Box marginBlock='x16'><RawText>{removedRooms}</RawText></Box> }
-		</Modal.Content>
-		<Modal.Footer>
-			<ButtonGroup align='end'>
-				<Button ghost onClick={onCancel}>{t('Cancel')}</Button>
-				<Button primary danger onClick={onConfirm}>{confirmLabel}</Button>
-			</ButtonGroup>
-		</Modal.Footer>
-	</Modal>;
-};
-
 const SuccessModal = ({ onClose, ...props }) => {
 	const t = useTranslation();
 	return <Modal {...props}>
diff --git a/client/components/ConfirmOwnerChangeWarningModal.js b/client/components/ConfirmOwnerChangeWarningModal.js
new file mode 100644
index 000000000000..6c81808a45b9
--- /dev/null
+++ b/client/components/ConfirmOwnerChangeWarningModal.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Box, Button, ButtonGroup, Icon } from '@rocket.chat/fuselage';
+
+import RawText from './basic/RawText';
+import { Modal } from './basic/Modal';
+import { useTranslation } from '../contexts/TranslationContext';
+
+const ConfirmOwnerChangeWarningModal = ({ onConfirm, onCancel, contentTitle = '', confirmLabel = '', shouldChangeOwner, shouldBeRemoved, ...props }) => {
+	const t = useTranslation();
+
+	let changeOwnerRooms = '';
+	if (shouldChangeOwner.length > 0) {
+		if (shouldChangeOwner.length === 1) {
+			changeOwnerRooms = t('A_new_owner_will_be_assigned_automatically_to_the__roomName__room', { roomName: shouldChangeOwner.pop() });
+		} else if (shouldChangeOwner.length <= 5) {
+			changeOwnerRooms = t('A_new_owner_will_be_assigned_automatically_to_those__count__rooms__rooms__', { count: shouldChangeOwner.length, rooms: shouldChangeOwner.join(', ') });
+		} else {
+			changeOwnerRooms = t('A_new_owner_will_be_assigned_automatically_to__count__rooms', { count: shouldChangeOwner.length });
+		}
+	}
+
+	let removedRooms = '';
+	if (shouldBeRemoved.length > 0) {
+		if (shouldBeRemoved.length === 1) {
+			removedRooms = t('The_empty_room__roomName__will_be_removed_automatically', { roomName: shouldBeRemoved.pop() });
+		} else if (shouldBeRemoved.length <= 5) {
+			removedRooms = t('__count__empty_rooms_will_be_removed_automatically__rooms__', { count: shouldBeRemoved.length, rooms: shouldBeRemoved.join(', ') });
+		} else {
+			removedRooms = t('__count__empty_rooms_will_be_removed_automatically', { count: shouldBeRemoved.length });
+		}
+	}
+
+	return <Modal {...props}>
+		<Modal.Header>
+			<Icon color='danger' name='modal-warning' size={20}/>
+			<Modal.Title>{t('Are_you_sure')}</Modal.Title>
+			<Modal.Close onClick={onCancel}/>
+		</Modal.Header>
+		<Modal.Content fontScale='p1'>
+			{contentTitle}
+
+			{ changeOwnerRooms && <Box marginBlock='x16'><RawText>{changeOwnerRooms}</RawText></Box> }
+			{ removedRooms && <Box marginBlock='x16'><RawText>{removedRooms}</RawText></Box> }
+		</Modal.Content>
+		<Modal.Footer>
+			<ButtonGroup align='end'>
+				<Button ghost onClick={onCancel}>{t('Cancel')}</Button>
+				<Button primary danger onClick={onConfirm}>{confirmLabel}</Button>
+			</ButtonGroup>
+		</Modal.Footer>
+	</Modal>;
+};
+
+export default ConfirmOwnerChangeWarningModal;
diff --git a/client/admin/users/CustomFieldsForm.js b/client/components/CustomFieldsForm.js
similarity index 74%
rename from client/admin/users/CustomFieldsForm.js
rename to client/components/CustomFieldsForm.js
index 45d03c5c8205..3e1e4ed040dd 100644
--- a/client/admin/users/CustomFieldsForm.js
+++ b/client/components/CustomFieldsForm.js
@@ -1,14 +1,13 @@
 import React, { useMemo, useEffect, useState } from 'react';
-import { TextInput, Select, Field, Divider, Box } from '@rocket.chat/fuselage';
+import { TextInput, Select, Field } from '@rocket.chat/fuselage';
 
-import { useSetting } from '../../contexts/SettingsContext';
-import { useForm } from '../../hooks/useForm';
-import { useTranslation } from '../../contexts/TranslationContext';
-import { capitalize } from '../../helpers/capitalize';
+import { useSetting } from '../contexts/SettingsContext';
+import { useForm } from '../hooks/useForm';
+import { useTranslation } from '../contexts/TranslationContext';
+import { capitalize } from '../helpers/capitalize';
 
-const CustomTextInput = (props) => {
+const CustomTextInput = ({ name, required, minLength, maxLength, setState, state, className }) => {
 	const t = useTranslation();
-	const { name, required, minLength, maxLength, setState, state } = props;
 	const verify = useMemo(() => {
 		const error = [];
 		if (!state && required) { error.push(t('Field_required')); }
@@ -16,28 +15,27 @@ const CustomTextInput = (props) => {
 		return error.join(', ');
 	}, [state, required, minLength, t]);
 
-	return useMemo(() => <Field>
+	return useMemo(() => <Field className={className}>
 		<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, maxLength, state, required, setState]);
+	</Field>, [name, verify, maxLength, state, required, setState, className]);
 };
 
-const CustomSelect = (props) => {
+const CustomSelect = ({ name, required, options, setState, state, className }) => {
 	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.length, t]);
 
-	return useMemo(() => <Field>
+	return useMemo(() => <Field className={className}>
 		<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, mappedOptions, required, setState]);
+	</Field>, [name, verify, state, mappedOptions, required, setState, className]);
 };
 
 const CustomFieldsAssembler = ({ formValues, formHandlers, customFields, ...props }) => Object.entries(customFields).map(([key, value]) => {
@@ -54,8 +52,6 @@ const CustomFieldsAssembler = ({ formValues, formHandlers, customFields, ...prop
 });
 
 export default function CustomFieldsForm({ customFieldsData, setCustomFieldsData, ...props }) {
-	const t = useTranslation();
-
 	const customFieldsJson = useSetting('Accounts_CustomFields');
 
 	// TODO: add deps. Left this way so that a possible change in the setting can't crash the page (useForm generates states automatically)
@@ -83,9 +79,5 @@ export default function CustomFieldsForm({ customFieldsData, setCustomFieldsData
 		return null;
 	}
 
-	return <>
-		<Divider />
-		<Box fontScale='s2'>{t('Custom_Fields')}</Box>
-		<CustomFieldsAssembler formValues={values} formHandlers={handlers} customFields={customFields} {...props}/>
-	</>;
+	return <CustomFieldsAssembler formValues={values} formHandlers={handlers} customFields={customFields} {...props}/>;
 }
diff --git a/client/components/basic/avatar/UserAvatarEditor.js b/client/components/basic/avatar/UserAvatarEditor.js
index 13152a3f934d..7306b66fbfc2 100644
--- a/client/components/basic/avatar/UserAvatarEditor.js
+++ b/client/components/basic/avatar/UserAvatarEditor.js
@@ -5,13 +5,26 @@ import { useTranslation } from '../../../contexts/TranslationContext';
 import { useFileInput } from '../../../hooks/useFileInput';
 import UserAvatar from './UserAvatar';
 
-export function UserAvatarEditor({ username, setAvatarObj }) {
+function UserAvatarSuggestions({ suggestions, setAvatarObj, setNewAvatarSource, ...props }) {
+	const handleClick = useCallback((suggestion) => () => {
+		setAvatarObj(suggestion);
+		setNewAvatarSource(suggestion.blob);
+	}, [setAvatarObj, setNewAvatarSource]);
+
+	return <Margins inline='x4' {...props}>
+		{Object.values(suggestions).map((suggestion) => <Button square onClick={handleClick(suggestion)}>
+			<UserAvatar key={suggestion.service} title={suggestion.service} size='x36' url={suggestion.blob} mie='x4'/>
+		</Button>)}
+	</Margins>;
+}
+
+export function UserAvatarEditor({ username, setAvatarObj, suggestions }) {
 	const t = useTranslation();
 	const [avatarFromUrl, setAvatarFromUrl] = useState('');
 	const [newAvatarSource, setNewAvatarSource] = useState();
 
-	const setUploadedPreview = useCallback(async (file, formData) => {
-		setAvatarObj(formData);
+	const setUploadedPreview = useCallback(async (file, avatarObj) => {
+		setAvatarObj(avatarObj);
 		setNewAvatarSource(URL.createObjectURL(file));
 	}, [setAvatarObj]);
 
@@ -42,10 +55,11 @@ export function UserAvatarEditor({ username, setAvatarObj }) {
 						<Button square mis='none' onClick={clickReset}><UserAvatar size='x36' username={`%40${ username }`} mie='x4'/></Button>
 						<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
 						<Button square mie='none' onClick={clickUrl}><Icon name='permalink' size='x20'/></Button>
+						{suggestions && <UserAvatarSuggestions suggestions={suggestions} setAvatarObj={setAvatarObj} setNewAvatarSource={setNewAvatarSource}/>}
 					</Margins>
 				</Box>
 				<Box>{t('Use_url_for_avatar')}</Box>
-				<TextInput flexGrow={0} placehloder={t('Use_url_for_avatar')} value={avatarFromUrl} onChange={handleAvatarFromUrlChange}/>
+				<TextInput flexGrow={0} placeholder={t('Use_url_for_avatar')} value={avatarFromUrl} onChange={handleAvatarFromUrlChange}/>
 			</Box>
 		</Box>
 	</Box>;
diff --git a/client/components/basic/userStatus/UserStatus.js b/client/components/basic/userStatus/UserStatus.js
new file mode 100644
index 000000000000..dd4cd2836490
--- /dev/null
+++ b/client/components/basic/userStatus/UserStatus.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Box } from '@rocket.chat/fuselage';
+
+const statusColors = {
+	offline: 'neutral-500',
+	busy: 'danger-500',
+	away: 'warning-500',
+	online: 'success-500',
+};
+
+const UserStatus = React.memo(({ status, ...props }) => <Box size='x12' borderRadius='full' backgroundColor={statusColors[status]} {...props}/>);
+
+export default UserStatus;
diff --git a/client/components/basic/userStatus/UserStatusMenu.js b/client/components/basic/userStatus/UserStatusMenu.js
new file mode 100644
index 000000000000..3fac8866c4ec
--- /dev/null
+++ b/client/components/basic/userStatus/UserStatusMenu.js
@@ -0,0 +1,82 @@
+import React, { useRef, useCallback, useState, useMemo, useEffect } from 'react';
+import {
+	Button,
+	PositionAnimated,
+	Options,
+	useCursor,
+	Box,
+} from '@rocket.chat/fuselage';
+
+import { useTranslation } from '../../../contexts/TranslationContext';
+import UserStatus from './UserStatus';
+
+const UserStatusMenu = ({
+	onChange = () => {},
+	optionWidth,
+	initialStatus = 'offline',
+	placement = 'bottom right',
+	...props
+}) => {
+	const t = useTranslation();
+
+	const [status, setStatus] = useState(initialStatus);
+
+	const options = useMemo(() => [
+		['online', <Box display='flex' flexDirection='row' alignItems='center'><UserStatus status='online'/>{t('Online')}</Box>],
+		['busy', <Box display='flex' flexDirection='row' alignItems='center'><UserStatus status='busy'/>{t('Busy')}</Box>],
+		['away', <Box display='flex' flexDirection='row' alignItems='center'><UserStatus status='away'/>{t('Away')}</Box>],
+		['offline', <Box display='flex' flexDirection='row' alignItems='center'><UserStatus status='offline'/>{t('Invisible')}</Box>],
+	], [t]);
+
+	const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] = useCursor(-1, options, ([selected], [, hide]) => {
+		setStatus(selected);
+		reset();
+		hide();
+	});
+
+	const ref = useRef();
+	const onClick = useCallback(() => {
+		ref.current.focus() & show();
+		ref.current.classList.add('focus-visible');
+	}, [show]);
+
+	const handleSelection = useCallback(([selected]) => {
+		setStatus(selected);
+		reset();
+		hide();
+	}, [hide, reset]);
+
+	useEffect(() => onChange(status), [status, onChange]);
+
+	return (
+		<>
+			<Button
+				ref={ref}
+				small
+				ghost
+				onClick={onClick}
+				onBlur={hide}
+				onKeyUp={handleKeyUp}
+				onKeyDown={handleKeyDown}
+				{...props}
+			>
+				<UserStatus status={status}/>
+			</Button>
+			<PositionAnimated
+				width='auto'
+				visible={visible}
+				anchor={ref}
+				placement={placement}
+			>
+				<Options
+					width={optionWidth}
+					onSelect={handleSelection}
+					options={options}
+					cursor={cursor}
+				/>
+			</PositionAnimated>
+		</>
+	);
+};
+
+export default UserStatusMenu;
diff --git a/client/helpers/getUserEmailAddress.js b/client/helpers/getUserEmailAddress.js
new file mode 100644
index 000000000000..716a5c4c6258
--- /dev/null
+++ b/client/helpers/getUserEmailAddress.js
@@ -0,0 +1 @@
+export const getUserEmailAddress = (user) => user.emails && user.emails[0] && user.emails[0].address;
diff --git a/client/hooks/useUpdateAvatar.js b/client/hooks/useUpdateAvatar.js
new file mode 100644
index 000000000000..8aa8e1fa30fe
--- /dev/null
+++ b/client/hooks/useUpdateAvatar.js
@@ -0,0 +1,55 @@
+import { useMemo, useCallback } from 'react';
+
+import { useMethod } from '../contexts/ServerContext';
+import { useEndpointAction } from './useEndpointAction';
+import { useTranslation } from '../contexts/TranslationContext';
+import { useEndpointUpload } from './useEndpointUpload';
+import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
+
+export const useUpdateAvatar = (avatarObj, userId) => {
+	const t = useTranslation();
+	const avatarUrl = avatarObj?.avatarUrl;
+
+	const successText = t('Avatar_changed_successfully');
+	const setAvatarFromService = useMethod('setAvatarFromService');
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const saveAvatarQuery = useMemo(() => ({
+		userId,
+		avatarUrl,
+	}), [avatarUrl, userId]);
+
+	const resetAvatarQuery = useMemo(() => ({
+		userId,
+	}), [userId]);
+
+	const saveAvatarAction = useEndpointUpload('users.setAvatar', saveAvatarQuery, successText);
+	const saveAvatarUrlAction = useEndpointAction('POST', 'users.setAvatar', saveAvatarQuery, successText);
+	const resetAvatarAction = useEndpointAction('POST', 'users.resetAvatar', resetAvatarQuery, successText);
+
+	const updateAvatar = useCallback(async () => {
+		if (avatarObj === 'reset') {
+			return resetAvatarAction();
+		}
+		if (avatarObj.avatarUrl) {
+			return saveAvatarUrlAction();
+		}
+		if (avatarObj.service) {
+			const { blob, contentType, service } = avatarObj;
+			try {
+				await setAvatarFromService(blob, contentType, service);
+				dispatchToastMessage({ type: 'success', message: successText });
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+			return;
+		}
+		if (avatarObj instanceof FormData) {
+			avatarObj.set('userId', userId);
+			return saveAvatarAction(avatarObj);
+		}
+	}, [avatarObj, dispatchToastMessage, resetAvatarAction, saveAvatarAction, saveAvatarUrlAction, setAvatarFromService, successText, userId]);
+
+	return updateAvatar;
+};
diff --git a/client/routes.js b/client/routes.js
index 28e402592dd8..383b24378d8c 100644
--- a/client/routes.js
+++ b/client/routes.js
@@ -106,11 +106,8 @@ FlowRouter.route('/directory/:tab?', {
 
 FlowRouter.route('/account/:group?', {
 	name: 'account',
-	action: (params) => {
-		if (!params.group) {
-			params.group = 'profile';
-		}
-		BlazeLayout.render('main', { center: `account${ s.capitalize(params.group, true) }` });
+	action: () => {
+		renderRouteComponent(() => import('./account/AccountRoute'), { template: 'main', region: 'center' });
 	},
 	triggersExit: [function() {
 		$('.main-content').addClass('rc-old');

From bfc24a8634cebb7f9a2049f92b3972e972125753 Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Mon, 29 Jun 2020 20:59:11 -0300
Subject: [PATCH 02/15] Removed old Files

---
 app/ui-account/client/account.html        |  10 -
 app/ui-account/client/account.js          |  13 -
 app/ui-account/client/accountProfile.html | 219 --------
 app/ui-account/client/accountProfile.js   | 610 ----------------------
 app/ui-account/client/index.js            |   4 -
 5 files changed, 856 deletions(-)
 delete mode 100644 app/ui-account/client/account.html
 delete mode 100644 app/ui-account/client/account.js
 delete mode 100644 app/ui-account/client/accountProfile.html
 delete mode 100644 app/ui-account/client/accountProfile.js

diff --git a/app/ui-account/client/account.html b/app/ui-account/client/account.html
deleted file mode 100644
index 2ac2689ab4f9..000000000000
--- a/app/ui-account/client/account.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<template name="account2">
-	<section class="page-container page-home page-static">
-		<header class="fixed-title border-component-color">
-			{{> burger}}
-			<h2>
-				<span class="room-title">{{_ "User_Settings"}}</span>
-			</h2>
-		</header>
-	</section>
-</template>
diff --git a/app/ui-account/client/account.js b/app/ui-account/client/account.js
deleted file mode 100644
index 2359331bb410..000000000000
--- a/app/ui-account/client/account.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Tracker } from 'meteor/tracker';
-import { Template } from 'meteor/templating';
-
-import { SideNav } from '../../ui-utils';
-import '../../../client/account/sidebarItems';
-
-
-Template.account2.onRendered(function() {
-	Tracker.afterFlush(function() {
-		SideNav.setFlex('accountFlex');
-		SideNav.openFlex();
-	});
-});
diff --git a/app/ui-account/client/accountProfile.html b/app/ui-account/client/accountProfile.html
deleted file mode 100644
index 62ff0bdea641..000000000000
--- a/app/ui-account/client/accountProfile.html
+++ /dev/null
@@ -1,219 +0,0 @@
-<template name="avatarService">
-	<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar" aria-label="{{name}}">
-		{{#if suggestion}}
-			{{> avatar url=suggestion.blob}}
-		{{/if}}
-		{{#if service}}
-			<div class="rc-select-avatar__upload-label avatar">
-				{{> icon block="rc-select-avatar__upload-icon" icon=name.toLowerCase }}
-			</div>
-		{{/if}}
-	</div>
-</template>
-<template name="accountProfile">
-	<section class="preferences-page preferences-page--new">
-		{{#header sectionName="Profile" buttons=true fullpage=true}}
-			<div class="rc-header__section-button">
-				<button class="rc-button rc-button--primary" name="send" type="submit" data-button="create" form="profile" {{canSave 'disabled'}}>{{_ "Save_changes"}}</button>
-			</div>
-		{{/header}}
-		<div class="preferences-page__content">
-			<form id="profile" autocomplete="off" class="container">
-				<fieldset class="rc-form-legend">
-					<legend style="margin-bottom: 2.5rem;">{{_ "Profile_details"}}</legend>
-					<div>
-						<div class="rc-form-group">
-							<label class="rc-form-label">{{_ "Profile_picture"}}</label>
-							<div class="rc-select-avatar">
-									<div class="rc-select-avatar__preview">
-									{{# unless avatarPreview}}
-											{{> avatar username=username}}
-									{{else}}
-											{{> avatar url=avatarPreview.blob}}
-									{{/unless}}
-								</div>
-									{{#if allowAvatarChange}}
-										<div class="rc-select-avatar__list">
-											<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-initials" aria-label="{{_ "initials_avatar" }}">
-												{{> avatar username=initialsUsername }}
-											</div>
-											<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-upload" aria-label="{{_ "Upload_user_avatar" }}">
-												<label class="rc-select-avatar__upload-label avatar" for="upload-avatar">
-													{{> icon block="rc-select-avatar__upload-icon" icon="upload"}}
-												</label>
-												<input type="file" name="" value="" id="upload-avatar" style="display:none;" accept="image/x-png,image/gif,image/jpeg,image/svg+xml">
-											</div>
-											<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-url {{selectUrl}}"	aria-label="{{_ "Use_url_for_avatar" }}">
-												<label class="rc-select-avatar__upload-label avatar">
-													{{> icon block="rc-select-avatar__upload-icon" icon="permalink"}}
-												</label>
-											</div>
-											{{#if suggestions.ready}}
-												{{#each service in services}}
-													{{ > avatarService service}}
-												{{/each}}
-											{{else}}
-												<div class="rc-select-avatar__loading">
-													{{_ "Loading_suggestion"}}
-												</div>
-											{{/if}}
-											<div class="rc-input">
-
-												<label class="rc-input__label">
-													<div class="rc-input__title">{{_ "Use_url_for_avatar"}}</div>
-													<div class="rc-input__wrapper">
-														<input name="avatar_url" class="rc-input__element js-avatar-url-input" placeholder="{{_ "Use_url_for_avatar"}}">
-													</div>
-												</label>
-											</div>
-										</div>
-									{{/if}}
-							</div>
-						</div>
-						<div class="rc-form-group rc-grid">
-							{{# with canChange=allowRealNameChange}}
-							<div class="rc-input rc-w50 padded {{#if nameInvalid}}rc-input--error{{/if}}">
-								<label class="rc-input__label">
-									<div class="rc-input__title">{{_ "Name"}}</div>
-									<div class="rc-input__wrapper">
-										<input type="text" class="rc-input__element" name="realname" id="realname" placeholder="{{_ "Name_Placeholder" }}" value="{{realname}}" {{ifThenElse canChange '' 'disabled'}}>
-									</div>
-								</label>
-								{{# unless canChange}}
-									<div class="rc-input__description">{{_ 'RealName_Change_Disabled'}}</div>
-								{{/unless}}
-							</div>
-							{{/with}}
-							{{# with canChange=allowUsernameChange}}
-							<div class="rc-input rc-w50 padded {{#if usernameInvalid}}rc-input--error{{/if}} {{#unless usernameAvaliable}}rc-input--error{{/unless}}">
-								<label class="rc-input__label">
-									<div class="rc-input__title">{{_ "Username"}}</div>
-									<div class="rc-input__wrapper">
-										<div class="rc-input__icon">
-											{{> icon block="rc-input__icon-svg" icon="at"}}
-										</div>
-										<input type="text" class="rc-input__element" name="username" id="username" placeholder="{{_ "Username_Placeholder" }}" value="{{username}}" {{ifThenElse canChange '' 'disabled'}}>
-									</div>
-								</label>
-								{{# unless canChange}}
-									<div class="rc-input__description">{{_ 'Username_Change_Disabled'}}</div>
-								{{/unless}}
-								{{#unless usernameAvaliable}}
-									<div class="rc-input__error">
-										<div class="rc-input__error-icon">
-											{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
-										</div>
-										<div class="rc-input__error-message">{{_ "Username_already_exist"}}</div>
-									</div>
-								{{/unless}}
-							</div>
-							{{/with}}
-						</div>
-						<div class="rc-form-group rc-grid">
-							{{# with canChange=allowStatusMessageChange}}
-								<div class="rc-input rc-w100 padded {{#if statusMessageInvalid}}rc-input--error{{/if}}">
-									<label class="rc-input__label">
-										<div class="rc-input__title">{{_ "StatusMessage"}}</div>
-										<div class="rc-input__wrapper">
-											<div class="rc-input__icon js-status-type edit-status-type-icon--{{statusType}}">
-												{{> icon block="rc-input__icon-svg" icon="circle"}}
-												{{> icon block="rc-input__icon-svg" icon="arrow-down"}}
-											</div>
-
-											<input type="text" class="rc-input__element" maxlength="120" name="statusText" id="statusText" placeholder="{{_ "StatusMessage_Placeholder" }}" value="{{get 'statusText'}}" {{ifThenElse canChange '' 'disabled'}}>
-										</div>
-									</label>
-									{{# unless canChange}}
-										<div class="rc-input__description">{{_ 'StatusMessage_Change_Disabled'}}</div>
-									{{/unless}}
-								</div>
-							{{/with}}
-						</div>
-						<div class="rc-form-group">
-							<div class="rc-input rc-w100 padded">
-								<label class="rc-input__label">
-									<div class="rc-input__title">{{_ "Bio"}}</div>
-									<div class="rc-input__wrapper">
-										<textarea type="text" class="rc-input__element" name="bio" id="bio" maxlength="260" rows="4" style="height: auto" placeholder="{{_ "Bio_Placeholder" }}" value="{{get 'bio'}}"></textarea>
-									</div>
-								</label>
-							</div>
-						</div>
-						<div class="rc-form-group rc-grid">
-							{{#with canChange=allowEmailChange}}
-							<div class="rc-input rc-w50 padded {{#if emailInvalid}}rc-input--error{{/if}}">
-								<label class="rc-input__label">
-									<div class="rc-input__title">{{_ "Email"}}</div>
-									<div class="rc-input__wrapper">
-										<input name="email" type="text" class="rc-input__element" placeholder="{{_ "Email_Placeholder" }}" value="{{email}}" autocomplete="false" {{ifThenElse canChange '' 'disabled'}}>
-										{{#unless emailVerified}}
-											<div class="rc-input__icon rc-input__icon--right">
-												{{> icon block="rc-input__icon-svg" icon="circle-cross"}}
-											</div>
-										{{else}}
-											<div class="rc-input__icon rc-input__icon--right">
-												{{> icon block="rc-input__icon-svg" icon="checkmark-circled"}}
-											</div>
-										{{/unless}}
-									</div>
-								</label>
-								{{#unless canChange}}
-									<div class="rc-input__description">{{_ 'Email_Change_Disabled'}}</div>
-								{{/unless}}
-								{{#unless emailVerified}}
-									<div class="rc-input__error">
-										<button class="rc-button rc-button--small" id="resend-verification-email"  {{canResendEmailConf 'disabled'}}>{{_ "Resend_verification_email"}}</button>
-									</div>
-								{{/unless}}
-							</div>
-							{{/with}}
-							<div class="rc-input{{#if confirmationPasswordInvalid}} rc-input--error{{/if}} rc-w50 padded">
-								{{#with canChange=allowPasswordChange}}
-									<label class="rc-input__label">
-										<div class="rc-input__title">{{_ "New_password"}}</div>
-										<div class="rc-input__wrapper">
-											<input name="password" type="password" class="rc-input__element" placeholder="{{_ "New_Password_Placeholder"}}"  autocomplete="new-password" {{ifThenElse canChange '' 'disabled'}}>
-										</div>
-									</label>
-									{{#if canConfirmNewPassword}}
-									<label class="rc-input__label">
-										<div class="rc-input__title">{{_ "Confirm_new_password"}}</div>
-										<div class="rc-input__wrapper">
-											<input name="confirmation-password" type="password" class="rc-input__element" placeholder="{{_ "Confirm_New_Password_Placeholder"}}" autocomplete="confirm-new-password">
-										</div>
-									</label>
-									{{/if}}
-									{{# unless canChange}}
-										<div class="rc-input__description">{{_ 'Password_Change_Disabled'}}</div>
-									{{/unless}}
-									{{#if confirmationPasswordInvalid}}
-										<div class="rc-input__error">
-											<div class="rc-input__error-icon">
-												{{> icon block="rc-input__error-icon" icon="warning" classes="rc-input__error-icon-svg"}}
-											</div>
-											<div class="rc-input__error-message">{{_ 'Passwords_do_not_match'}}</div>
-										</div>
-									{{/if}}
-								{{/with}}
-							</div>
-						</div>
-					</div>
-				</fieldset>
-				<fieldset>
-					<!-- <legend style="margin-bottom: 2.5rem;">Custom Fields</legend> -->
-					{{> customFieldsForm hideFromForm=false formData=customFields new=true}}
-				</fieldset>
-				<div class="rc-form-group rc-grid">
-					<div class="rc-input rc-w50 padded">
-						<button class="rc-button js-logout">{{_ "Logout_Others"}}</button>
-					</div>
-					{{#if allowDeleteOwnAccount}}
-					<div class="rc-input rc-w50 padded">
-						<button class="rc-button rc-button--red js-delete-account"><i class="icon-trash"></i><span>{{_ "Delete_my_account"}}</span></button>
-					</div>
-					{{/if}}
-				</div>
-			</form>
-		</div>
-	</section>
-</template>
diff --git a/app/ui-account/client/accountProfile.js b/app/ui-account/client/accountProfile.js
deleted file mode 100644
index 8d8a316d5eb1..000000000000
--- a/app/ui-account/client/accountProfile.js
+++ /dev/null
@@ -1,610 +0,0 @@
-import { SHA256 } from 'meteor/sha';
-import { ReactiveVar } from 'meteor/reactive-var';
-import { ReactiveDict } from 'meteor/reactive-dict';
-import { Meteor } from 'meteor/meteor';
-import { Tracker } from 'meteor/tracker';
-import { FlowRouter } from 'meteor/kadira:flow-router';
-import { Template } from 'meteor/templating';
-import _ from 'underscore';
-import s from 'underscore.string';
-import toastr from 'toastr';
-
-import { modal, SideNav, warnUserDeletionMayRemoveRooms, popover } from '../../ui-utils/client';
-import { t, handleError } from '../../utils/client';
-import { settings } from '../../settings/client';
-import { Notifications } from '../../notifications/client';
-import { callbacks } from '../../callbacks/client';
-import { getPopoverStatusConfig } from '../../ui/client';
-
-const validateEmail = (email) => /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
-const validateUsername = (username) => {
-	const reg = new RegExp(`^${ settings.get('UTF8_Names_Validation') }$`);
-	return reg.test(username);
-};
-const validateName = (name) => (name && name.length) || !settings.get('Accounts_RequireNameForSignUp');
-const validateStatusMessage = (statusMessage) => {
-	if (!statusMessage || statusMessage.length <= 120 || statusMessage.length === 0) {
-		return true;
-	}
-};
-const validatePassword = (password, confirmationPassword) => {
-	if (!confirmationPassword) {
-		return true;
-	}
-
-	return password === confirmationPassword;
-};
-
-const filterNames = (old) => {
-	const reg = new RegExp(`^${ settings.get('UTF8_Names_Validation') }$`);
-	return [...old.replace(' ', '')].filter((f) => reg.test(f)).join('');
-};
-const filterEmail = (old) => old.replace(' ', '');
-
-const setAvatar = function(event, template) {
-	const { blob, contentType, service } = this.suggestion;
-
-	template.avatar.set({
-		service,
-		contentType,
-		blob,
-	});
-};
-const loginWith = function(event, template) {
-	const loginWithService = `loginWith${ s.capitalize(this.name) }`;
-	const serviceConfig = {};
-	Meteor[loginWithService](serviceConfig, function(error) {
-		if (error && error.error) {
-			if (error.error === 'github-no-public-email') {
-				return alert(t('github_no_public_email'));
-			}
-			return toastr.error(error.message);
-		}
-		template.getSuggestions();
-	});
-};
-const isUserEmailVerified = (user) => user.emails && user.emails[0] && user.emails[0].verified;
-const getUserEmailAddress = (user) => user.emails && user.emails[0] && user.emails[0].address;
-
-Template.accountProfile.helpers({
-	emailInvalid() {
-		return !validateEmail(Template.instance().email.get());
-	},
-	usernameInvalid() {
-		return !validateUsername(Template.instance().username.get());
-	},
-	usernameAvaliable() {
-		return Template.instance().usernameAvaliable.get() !== false;
-	},
-	nameInvalid() {
-		return !validateName(Template.instance().realname.get());
-	},
-	statusMessageInvalid() {
-		return !validateStatusMessage(Template.instance().fields.get('statusText'));
-	},
-	confirmationPasswordInvalid() {
-		const { password, confirmationPassword } = Template.instance();
-		return !validatePassword(password.get(), confirmationPassword.get());
-	},
-	selectUrl() {
-		return Template.instance().url.get().trim() ? '' : 'disabled';
-	},
-	services() {
-		const suggestions = Template.instance().suggestions.get();
-
-		if (suggestions.avatars) {
-			return Object.keys(suggestions.avatars).map((service) => ({
-				name: service,
-				// TODO: improve this fix
-				service: !suggestions.avatars[service.toLowerCase()] ? settings.get(`Accounts_OAuth_${ s.capitalize(service.toLowerCase()) }`) : false,
-				suggestion: suggestions.avatars[service.toLowerCase()],
-			}))
-				.filter(({ service, suggestion }) => service || suggestion);
-		}
-	},
-	initialsUsername() {
-		const user = Meteor.user();
-		return `@${ user && user.username }`;
-	},
-	avatarPreview() {
-		return Template.instance().avatar.get();
-	},
-	suggestions() {
-		return Template.instance().suggestions.get();
-	},
-	ifThenElse(condition, val, not = '') {
-		return condition ? val : not;
-	},
-	canSave(ret) {
-		const instance = Template.instance();
-		instance.dep.depend();
-		const realname = instance.realname.get();
-
-		const statusType = instance.statusType.get();
-		const statusText = instance.fields.get('statusText');
-		const bio = instance.fields.get('bio');
-		const username = instance.username.get();
-		const password = instance.password.get();
-		const confirmationPassword = instance.confirmationPassword.get();
-		const email = instance.email.get();
-		const usernameAvaliable = instance.usernameAvaliable.get();
-		const avatar = instance.avatar.get();
-		const user = Meteor.user();
-		const { customFields = {} } = user;
-		if (instance.view.isRendered) {
-			if (instance.findAll('[data-customfield="true"]').some((el) => {
-				const key = el.getAttribute('name');
-				const value = customFields[key] || '';
-				return el.value !== value;
-			})) {
-				return;
-			}
-		}
-
-		if (!avatar && user.bio === bio && user.name === realname && user.username === username && getUserEmailAddress(user) === email && statusText === user.statusText && !password && statusType === user.status) {
-			return ret;
-		}
-
-		if (!validateEmail(email) || !validatePassword(password, confirmationPassword) || (!validateUsername(username) || usernameAvaliable !== true) || !validateName(realname) || !validateStatusMessage(statusText)) {
-			return ret;
-		}
-	},
-	canResendEmailConf(ret) {
-		const email = Template.instance().email.get();
-		const user = Meteor.user();
-		if (getUserEmailAddress(user) && getUserEmailAddress(user) !== email) {
-			return ret;
-		}
-	},
-	allowDeleteOwnAccount() {
-		return settings.get('Accounts_AllowDeleteOwnAccount');
-	},
-	realname() {
-		return Meteor.user().name;
-	},
-	username() {
-		return Meteor.user().username;
-	},
-	email() {
-		const user = Meteor.user();
-		return getUserEmailAddress(user);
-	},
-	emailVerified() {
-		const user = Meteor.user();
-		return isUserEmailVerified(user);
-	},
-	allowRealNameChange() {
-		return settings.get('Accounts_AllowRealNameChange');
-	},
-	allowStatusMessageChange() {
-		return settings.get('Accounts_AllowUserStatusMessageChange');
-	},
-	allowUsernameChange() {
-		return settings.get('Accounts_AllowUsernameChange') && settings.get('LDAP_Enable') !== true;
-	},
-	allowEmailChange() {
-		return settings.get('Accounts_AllowEmailChange');
-	},
-	allowPasswordChange() {
-		return settings.get('Accounts_AllowPasswordChange');
-	},
-	canConfirmNewPassword() {
-		const password = Template.instance().password.get();
-		return settings.get('Accounts_AllowPasswordChange') && password && password !== '';
-	},
-	allowAvatarChange() {
-		return settings.get('Accounts_AllowUserAvatarChange');
-	},
-	customFields() {
-		return Meteor.user().customFields;
-	},
-	statusType() {
-		return Meteor.user().status;
-	},
-	get(field) {
-		return Template.instance().fields.get(field);
-	},
-});
-
-Template.accountProfile.onCreated(function() {
-	const user = Meteor.user();
-
-	this.fields = new ReactiveDict({
-		statusText: user.statusText,
-		bio: user.bio,
-	});
-
-	const self = this;
-	self.dep = new Tracker.Dependency();
-	self.realname = new ReactiveVar(user.name);
-	self.email = new ReactiveVar(getUserEmailAddress(user));
-	self.username = new ReactiveVar(user.username);
-	self.password = new ReactiveVar();
-	self.confirmationPassword = new ReactiveVar();
-	self.suggestions = new ReactiveVar();
-	self.avatar = new ReactiveVar();
-	self.url = new ReactiveVar('');
-	self.usernameAvaliable = new ReactiveVar(true);
-	self.statusText = new ReactiveVar(user.statusText);
-	self.statusType = new ReactiveVar(user.status);
-
-	Notifications.onLogged('updateAvatar', () => self.avatar.set());
-	self.getSuggestions = function() {
-		self.suggestions.set(undefined);
-		Meteor.call('getAvatarSuggestion', function(error, avatars) {
-			self.suggestions.set({ ready: true, avatars });
-		});
-	};
-	self.getSuggestions();
-	const settingsTemplate = this.parentTemplate(3);
-	if (settingsTemplate.child == null) {
-		settingsTemplate.child = [];
-	}
-	settingsTemplate.child.push(this);
-	this.clearForm = function() {
-		this.find('[name=password]').value = '';
-	};
-	this.changePassword = function(newPassword, callback) {
-		const instance = this;
-		if (!newPassword) {
-			return callback();
-		} if (!settings.get('Accounts_AllowPasswordChange')) {
-			toastr.remove();
-			toastr.error(t('Password_Change_Disabled'));
-			instance.clearForm();
-		}
-	};
-	this.save = function(typedPassword, cb) {
-		const avatar = self.avatar.get();
-		if (avatar) {
-			const params = [avatar.blob];
-
-			params.push(avatar.contentType);
-
-			params.push(avatar.service);
-			Meteor.call('setAvatarFromService', ...params, function(err) {
-				if (err && err.details && err.details.timeToReset) {
-					toastr.error(t('error-too-many-requests', {
-						seconds: parseInt(err.details.timeToReset / 1000),
-					}));
-				} else {
-					toastr.success(t('Avatar_changed_successfully'));
-					callbacks.run('userAvatarSet', avatar.service);
-				}
-			});
-		}
-		const instance = this;
-		const data = {};
-		const user = Meteor.user();
-		if (typedPassword) {
-			data.typedPassword = typedPassword;
-		}
-		if (s.trim(self.password.get()) && settings.get('Accounts_AllowPasswordChange')) {
-			data.newPassword = self.password.get();
-		}
-		if (s.trim(self.realname.get()) !== user.name) {
-			if (!settings.get('Accounts_AllowRealNameChange')) {
-				toastr.remove();
-				toastr.error(t('RealName_Change_Disabled'));
-				instance.clearForm();
-				return cb && cb();
-			}
-			data.realname = s.trim(self.realname.get());
-		}
-		if (s.trim(self.fields.get('statusText')) !== user.statusText) {
-			if (!settings.get('Accounts_AllowUserStatusMessageChange')) {
-				toastr.remove();
-				toastr.error(t('StatusMessage_Change_Disabled'));
-				instance.clearForm();
-				return cb && cb();
-			}
-
-			data.statusText = s.trim(self.fields.get('statusText'));
-		}
-
-		if (s.trim(self.fields.get('bio')) !== user.statusText) {
-			data.bio = s.trim(self.fields.get('bio'));
-		}
-		if (self.statusType.get() !== user.statusType) {
-			data.statusType = self.statusType.get();
-		}
-		if (s.trim(self.username.get()) !== user.username) {
-			if (!settings.get('Accounts_AllowUsernameChange')) {
-				toastr.remove();
-				toastr.error(t('Username_Change_Disabled'));
-				instance.clearForm();
-				return cb && cb();
-			}
-			data.username = s.trim(self.username.get());
-		}
-		if (s.trim(self.email.get()) !== getUserEmailAddress(user)) {
-			if (!settings.get('Accounts_AllowEmailChange')) {
-				toastr.remove();
-				toastr.error(t('Email_Change_Disabled'));
-				instance.clearForm();
-				return cb && cb();
-			}
-			data.email = s.trim(self.email.get());
-		}
-
-		const customFields = {};
-		$('[data-customfield=true]').each(function() {
-			customFields[this.name] = $(this).val() || '';
-		});
-
-		if (Object.keys(data).length + Object.keys(customFields).length === 0) {
-			return cb && cb();
-		}
-		Meteor.call('saveUserProfile', data, customFields, function(error, results) {
-			cb && cb();
-			if (results) {
-				toastr.remove();
-				toastr.success(t('Profile_saved_successfully'));
-				modal.close();
-				instance.clearForm();
-				self.password.set();
-			}
-			if (error) {
-				toastr.remove();
-				handleError(error);
-			}
-		});
-	};
-});
-
-Template.accountProfile.onRendered(function() {
-	Tracker.afterFlush(() => {
-		if (!settings.get('Accounts_AllowUserProfileChange')) {
-			FlowRouter.go('home');
-		}
-		this.clearForm();
-		SideNav.setFlex('accountFlex');
-		SideNav.openFlex();
-	});
-});
-
-const checkAvailability = _.debounce((username, { usernameAvaliable }) => {
-	Meteor.call('checkUsernameAvailability', username, function(error, data) {
-		usernameAvaliable.set(data);
-	});
-}, 800);
-
-Template.accountProfile.events({
-	'change [data-customfield="true"], input [data-customfield="true"]': _.debounce((e, i) => {
-		i.dep.changed();
-	}, 300),
-	'click .js-select-avatar-initials'() {
-		Meteor.call('resetAvatar', function(err) {
-			if (err && err.details && err.details.timeToReset) {
-				toastr.error(t('error-too-many-requests', {
-					seconds: parseInt(err.details.timeToReset / 1000),
-				}));
-			} else {
-				toastr.success(t('Avatar_changed_successfully'));
-				callbacks.run('userAvatarSet', 'initials');
-			}
-		});
-	},
-	'click .js-select-avatar-url'(e, instance, ...args) {
-		const url = instance.url.get().trim();
-		if (!url) {
-			return;
-		}
-		setAvatar.apply({
-			suggestion: {
-				service: 'url',
-				blob: url,
-				contentType: '',
-			},
-		}, [e, instance, ...args]);
-	},
-	'click .js-status-type'(e, instance) {
-		popover.open(getPopoverStatusConfig(e.currentTarget, (status) => instance.statusType.set(status)));
-	},
-	'input .js-avatar-url-input'(e, instance) {
-		const text = e.target.value;
-		instance.url.set(text);
-	},
-	'click .js-select-avatar'(...args) {
-		this.suggestion ? setAvatar.apply(this, args) : loginWith.apply(this, args);
-	},
-	'input [name=email]'(e, instance) {
-		const input = e.target;
-		const position = input.selectionEnd || input.selectionStart;
-		const { length } = input.value;
-		const modified = filterEmail(input.value);
-		input.value = modified;
-		document.activeElement === input && e && /input/i.test(e.type) && (input.selectionEnd = position + input.value.length - length);
-		instance.email.set(modified);
-	},
-	'input [name=username]'(e, instance) {
-		const input = e.target;
-		const position = input.selectionEnd || input.selectionStart;
-		const { length } = input.value;
-		const modified = filterNames(input.value);
-		input.value = modified;
-		document.activeElement === input && e && /input/i.test(e.type) && (input.selectionEnd = position + input.value.length - length);
-		instance.username.set(modified);
-		instance.usernameAvaliable.set();
-		checkAvailability(modified, instance);
-	},
-	'input [name=realname]'(e, instance) {
-		instance.realname.set(e.target.value);
-	},
-	'input [name=password]'(e, instance) {
-		instance.password.set(e.target.value);
-
-		if (e.target.value.length === 0) {
-			instance.confirmationPassword.set('');
-		}
-	},
-	'input [name=bio], input [name=statusText]'(e, instance) {
-		instance.fields.set(e.target.name, e.target.value);
-	},
-	'input [name=confirmation-password]'(e, instance) {
-		instance.confirmationPassword.set(e.target.value);
-	},
-	'submit form'(e, instance) {
-		e.preventDefault();
-		const user = Meteor.user();
-		const email = instance.email.get();
-		const password = instance.password.get();
-
-		const send = $(e.target.send);
-		send.addClass('loading');
-		const reqPass = ((email !== getUserEmailAddress(user))
-			|| s.trim(password)) && (user && user.services && user.services.password && s.trim(user.services.password.bcrypt));
-		if (!reqPass) {
-			return instance.save(undefined, () => setTimeout(() => send.removeClass('loading'), 1000));
-		}
-		modal.open({
-			title: t('Please_enter_your_password'),
-			text: t('For_your_security_you_must_enter_your_current_password_to_continue'),
-			type: 'input',
-			inputType: 'password',
-			showCancelButton: true,
-			closeOnConfirm: false,
-			confirmButtonText: t('Save'),
-			cancelButtonText: t('Cancel'),
-		}, (typedPassword) => {
-			if (typedPassword) {
-				toastr.remove();
-				toastr.warning(t('Please_wait_while_your_profile_is_being_saved'));
-				instance.save(SHA256(typedPassword), () => send.removeClass('loading'));
-				instance.password.set();
-				instance.confirmationPassword.set();
-			} else {
-				modal.showInputError(t('You_need_to_type_in_your_password_in_order_to_do_this'));
-				return false;
-			}
-		});
-	},
-	'click .js-logout'(e) {
-		e.preventDefault();
-		$(e.target).addClass('loading');
-		Meteor.logoutOtherClients(function(error) {
-			setTimeout(function functionName() {
-				if (error) {
-					toastr.remove();
-					handleError(error);
-				} else {
-					toastr.remove();
-					toastr.success(t('Logged_out_of_other_clients_successfully'));
-				}
-
-				$(e.target).removeClass('loading');
-			}, 1000);
-		});
-	},
-	'click .js-delete-account'(e) {
-		e.preventDefault();
-		const user = Meteor.user();
-
-		const deleteOwnAccount = (deleteConfirmation, confirmRelinquish = false) => {
-			Meteor.call('deleteUserOwnAccount', deleteConfirmation, confirmRelinquish, function(error) {
-				if (error) {
-					toastr.remove();
-
-					if (error.error === 'user-last-owner') {
-						const { shouldChangeOwner, shouldBeRemoved } = error.details;
-						warnUserDeletionMayRemoveRooms(user._id, () => deleteOwnAccount(deleteConfirmation, true), {
-							confirmButtonKey: 'Continue',
-							closeOnConfirm: true,
-							skipModalIfEmpty: true,
-							shouldChangeOwner,
-							shouldBeRemoved,
-						});
-						return;
-					}
-
-					modal.showInputError(t('Your_password_is_wrong'));
-				} else {
-					modal.close();
-				}
-			});
-		};
-
-		if (s.trim(user && user.services && user.services.password && user.services.password.bcrypt)) {
-			modal.open({
-				title: t('Are_you_sure_you_want_to_delete_your_account'),
-				text: t('If_you_are_sure_type_in_your_password'),
-				type: 'input',
-				inputType: 'password',
-				showCancelButton: true,
-				closeOnConfirm: false,
-				confirmButtonText: t('Delete'),
-				cancelButtonText: t('Cancel'),
-			}, (typedPassword) => {
-				if (typedPassword) {
-					toastr.remove();
-					toastr.warning(t('Please_wait_while_your_account_is_being_deleted'));
-
-					deleteOwnAccount(SHA256(typedPassword));
-				} else {
-					modal.showInputError(t('You_need_to_type_in_your_password_in_order_to_do_this'));
-					return false;
-				}
-			});
-		} else {
-			modal.open({
-				title: t('Are_you_sure_you_want_to_delete_your_account'),
-				text: t('If_you_are_sure_type_in_your_username'),
-				type: 'input',
-				showCancelButton: true,
-				closeOnConfirm: false,
-				confirmButtonText: t('Delete'),
-				cancelButtonText: t('Cancel'),
-			}, (deleteConfirmation) => {
-				const user = Meteor.user();
-				if (deleteConfirmation === (user && user.username)) {
-					toastr.remove();
-					toastr.warning(t('Please_wait_while_your_account_is_being_deleted'));
-
-					deleteOwnAccount(deleteConfirmation);
-				} else {
-					modal.showInputError(t('You_need_to_type_in_your_username_in_order_to_do_this'));
-					return false;
-				}
-			});
-		}
-	},
-	'click #resend-verification-email'(e) {
-		const user = Meteor.user();
-		e.preventDefault();
-		e.currentTarget.innerHTML = `${ e.currentTarget.innerHTML } ...`;
-		e.currentTarget.disabled = true;
-		Meteor.call('sendConfirmationEmail', getUserEmailAddress(user), (error, results) => {
-			if (results) {
-				toastr.success(t('Verification_email_sent'));
-			} else if (error) {
-				handleError(error);
-			}
-			e.currentTarget.innerHTML = e.currentTarget.innerHTML.replace(' ...', '');
-			e.currentTarget.disabled = false;
-		});
-	},
-	'change .js-select-avatar-upload [type=file]'(event, template) {
-		const e = event.originalEvent || event;
-		let { files } = e.target;
-		if (!files || files.length === 0) {
-			files = (e.dataTransfer && e.dataTransfer.files) || [];
-		}
-		Object.keys(files).forEach((key) => {
-			const blob = files[key];
-			if (!/image\/.+/.test(blob.type)) {
-				return;
-			}
-			const reader = new FileReader();
-			reader.readAsDataURL(blob);
-			reader.onloadend = function() {
-				template.avatar.set({
-					service: 'upload',
-					contentType: blob.type,
-					blob: reader.result,
-				});
-				callbacks.run('userAvatarSet', 'upload');
-			};
-		});
-	},
-
-});
diff --git a/app/ui-account/client/index.js b/app/ui-account/client/index.js
index 6bc4fa0a1735..1da9c8928d77 100644
--- a/app/ui-account/client/index.js
+++ b/app/ui-account/client/index.js
@@ -1,12 +1,8 @@
-import './account.html';
 import './accountIntegrations.html';
 import './accountPreferences.html';
-import './accountProfile.html';
 import './avatar/avatar.html';
 import './avatar/prompt.html';
-import './account';
 import './accountIntegrations';
 import './accountPreferences';
-import './accountProfile';
 import './avatar/avatar';
 import './avatar/prompt';

From 4dac36fcb9b5d4704b99c81d04a41232480175f5 Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Mon, 29 Jun 2020 21:05:41 -0300
Subject: [PATCH 03/15] Remove unused module

---
 client/routes.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/routes.js b/client/routes.js
index 383b24378d8c..00de91749a02 100644
--- a/client/routes.js
+++ b/client/routes.js
@@ -1,5 +1,4 @@
 import mem from 'mem';
-import s from 'underscore.string';
 import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
 import { Tracker } from 'meteor/tracker';

From 796d08bbc21d547d6ce848c28347e9446360b7bc Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Tue, 30 Jun 2020 15:21:49 -0300
Subject: [PATCH 04/15] Fix rebase

---
 client/account/AccountRoute.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/account/AccountRoute.js b/client/account/AccountRoute.js
index 9f6479d83c42..966b933aed3b 100644
--- a/client/account/AccountRoute.js
+++ b/client/account/AccountRoute.js
@@ -3,9 +3,7 @@ import React, { useEffect } from 'react';
 import { useRouteParameter, useRoute } from '../contexts/RouterContext';
 import { SideNav } from '../../app/ui-utils';
 import AccountProfilePage from './AccountProfilePage';
-import { createAccountSidebarTemplate } from './sidebarItems';
-
-createAccountSidebarTemplate();
+import './sidebarItems';
 
 const AccountRoute = () => {
 	const page = useRouteParameter('group');

From f30e5909ee1f6d11776d1fdaadccaa17e138e67a Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Tue, 30 Jun 2020 15:36:52 -0300
Subject: [PATCH 05/15] Change buttons

---
 client/account/AccountProfileForm.js | 2 +-
 client/account/AccountProfilePage.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/account/AccountProfileForm.js b/client/account/AccountProfileForm.js
index 73495ec3b2c6..5ddcec5d6d8e 100644
--- a/client/account/AccountProfileForm.js
+++ b/client/account/AccountProfileForm.js
@@ -180,7 +180,7 @@ export default function AccountProfileForm({ values, handlers, user, settings, s
 					</Field.Error>
 				</Field>, [t, email, handleEmail, verified, allowEmailChange, emailError])}
 				{useMemo(() => !verified && <Field>
-					<Button disabled={email !== previousEmail} ghost onClick={handleSendConfirmationEmail}>
+					<Button disabled={email !== previousEmail} onClick={handleSendConfirmationEmail}>
 						{t('Resend_verification_email')}
 					</Button>
 				</Field>, [verified, t, email, previousEmail, handleSendConfirmationEmail])}
diff --git a/client/account/AccountProfilePage.js b/client/account/AccountProfilePage.js
index ffaa9c24f96e..05fec4938fff 100644
--- a/client/account/AccountProfilePage.js
+++ b/client/account/AccountProfilePage.js
@@ -251,10 +251,10 @@ const AccountProfilePage = (props) => {
 				<Box maxWidth='x600' w='full' alignSelf='center'>
 					<AccountProfileForm values={values} handlers={handlers} user={user} settings={settings} setCanSave={setCanSave}/>
 					<ButtonGroup stretch mb='x12'>
-						<Button ghost onClick={handleLogoutOtherLocations} flexGrow={0} disabled={loggingOut}>
+						<Button onClick={handleLogoutOtherLocations} flexGrow={0} disabled={loggingOut}>
 							{t('Logout_Others')}
 						</Button>
-						{allowDeleteOwnAccount && <Button ghost danger onClick={handleDeleteOwnAccount}>
+						{allowDeleteOwnAccount && <Button danger onClick={handleDeleteOwnAccount}>
 							<Icon name='trash' size='x20' mie='x4'/>
 							{t('Delete_my_account')}
 						</Button>}

From 5f39780f120ec430fc5224aa35acfc1925c6c013 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Wed, 1 Jul 2020 10:36:35 -0300
Subject: [PATCH 06/15] Review

---
 client/account/AccountProfileForm.js | 96 +++++++++++++++-------------
 client/account/AccountProfilePage.js |  8 +--
 2 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/client/account/AccountProfileForm.js b/client/account/AccountProfileForm.js
index 5ddcec5d6d8e..de4f816e5626 100644
--- a/client/account/AccountProfileForm.js
+++ b/client/account/AccountProfileForm.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useEffect, useState } from 'react';
-import { Field, FieldGroup, TextInput, TextAreaInput, Box, Icon, AnimatedVisibility, PasswordInput, Button } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, TextInput, TextAreaInput, Box, Icon, AnimatedVisibility, PasswordInput, Button, Grid } from '@rocket.chat/fuselage';
 import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
 
 import { useTranslation } from '../contexts/TranslationContext';
@@ -159,50 +159,56 @@ export default function AccountProfileForm({ values, handlers, user, settings, s
 				<TextAreaInput rows={3} flexGrow={1} value={bio} onChange={handleBio} addon={<Icon name='edit' size='x20' alignSelf='center'/>}/>
 			</Field.Row>
 		</Field>, [bio, handleBio, t])}
-		<Box display='flex' flexDirection='row' justifyContent='space-between' alignItems='flex-start'>
-			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={0}>
-				{useMemo(() => <Field mie='x8' flexGrow={1}>
-					<Field.Label>{t('Email')}</Field.Label>
-					<Field.Row>
-						<TextInput
-							flexGrow={1}
-							value={email}
-							error={emailError}
-							onChange={handleEmail}
-							addon={
-								<Icon name={ verified ? 'circle-check' : 'mail' } size='x20'/>
-							}
-							disabled={!allowEmailChange}
-						/>
-					</Field.Row>
-					<Field.Error>
-						{t(emailError)}
-					</Field.Error>
-				</Field>, [t, email, handleEmail, verified, allowEmailChange, emailError])}
-				{useMemo(() => !verified && <Field>
-					<Button disabled={email !== previousEmail} onClick={handleSendConfirmationEmail}>
-						{t('Resend_verification_email')}
-					</Button>
-				</Field>, [verified, t, email, previousEmail, handleSendConfirmationEmail])}
-			</Box>
-			<Box display='flex' flexDirection='column' flexGrow={1} flexShrink={0} mis='x8'>
-				{useMemo(() => <Field flexGrow={1} mbe='x8'>
-					<Field.Label>{t('Password')}</Field.Label>
-					<Field.Row>
-						<PasswordInput disabled={!allowPasswordChange} error={passwordError} flexGrow={1} value={password} onChange={handlePassword} addon={<Icon name='key' size='x20'/>}/>
-					</Field.Row>
-				</Field>, [t, password, handlePassword, passwordError, allowPasswordChange])}
-				{useMemo(() => <AnimatedVisibility visibility={password ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN }><Field>
-					<Field.Label>{t('Confirm_password')}</Field.Label>
-					<Field.Row>
-						<PasswordInput error={passwordError} flexGrow={1} value={confirmationPassword} onChange={handleConfirmationPassword} addon={<Icon name='key' size='x20'/>}/>
-					</Field.Row>
-					<Field.Error>
-						{passwordError}
-					</Field.Error>
-				</Field></AnimatedVisibility>, [t, confirmationPassword, handleConfirmationPassword, password, passwordError])}
-			</Box>
-		</Box>
+		<Field>
+			<Grid>
+				<Grid.Item>
+					<FieldGroup display='flex' flexDirection='column' flexGrow={1} flexShrink={0}>
+						{useMemo(() => <Field>
+							<Field.Label>{t('Email')}</Field.Label>
+							<Field.Row>
+								<TextInput
+									flexGrow={1}
+									value={email}
+									error={emailError}
+									onChange={handleEmail}
+									addon={
+										<Icon name={ verified ? 'circle-check' : 'mail' } size='x20'/>
+									}
+									disabled={!allowEmailChange}
+								/>
+							</Field.Row>
+							<Field.Error>
+								{t(emailError)}
+							</Field.Error>
+						</Field>, [t, email, handleEmail, verified, allowEmailChange, emailError])}
+						{useMemo(() => !verified && <Field>
+							<Button disabled={email !== previousEmail} onClick={handleSendConfirmationEmail}>
+								{t('Resend_verification_email')}
+							</Button>
+						</Field>, [verified, t, email, previousEmail, handleSendConfirmationEmail])}
+					</FieldGroup>
+				</Grid.Item>
+				<Grid.Item>
+					<FieldGroup display='flex' flexDirection='column' flexGrow={1} flexShrink={0}>
+						{useMemo(() => <Field>
+							<Field.Label>{t('Password')}</Field.Label>
+							<Field.Row>
+								<PasswordInput autocomplete='off' disabled={!allowPasswordChange} error={passwordError} flexGrow={1} value={password} onChange={handlePassword} addon={<Icon name='key' size='x20'/>}/>
+							</Field.Row>
+						</Field>, [t, password, handlePassword, passwordError, allowPasswordChange])}
+						{useMemo(() => <AnimatedVisibility visibility={password ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN }><Field>
+							<Field.Label>{t('Confirm_password')}</Field.Label>
+							<Field.Row>
+								<PasswordInput autocomplete='off' error={passwordError} flexGrow={1} value={confirmationPassword} onChange={handleConfirmationPassword} addon={<Icon name='key' size='x20'/>}/>
+							</Field.Row>
+							{ passwordError && <Field.Error>
+								{passwordError}
+							</Field.Error> }
+						</Field></AnimatedVisibility>, [t, confirmationPassword, handleConfirmationPassword, password, passwordError])}
+					</FieldGroup>
+				</Grid.Item>
+			</Grid>
+		</Field>
 		<CustomFieldsForm customFieldsData={customFields} setCustomFieldsData={handleCustomFields}/>
 	</FieldGroup>;
 }
diff --git a/client/account/AccountProfilePage.js b/client/account/AccountProfilePage.js
index 05fec4938fff..08be81108f1e 100644
--- a/client/account/AccountProfilePage.js
+++ b/client/account/AccountProfilePage.js
@@ -56,7 +56,7 @@ const getInitialValues = (user) => ({
 	customFields: user.customFields ?? {},
 });
 
-const AccountProfilePage = (props) => {
+const AccountProfilePage = () => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
@@ -239,7 +239,7 @@ const AccountProfilePage = (props) => {
 	}, [closeModal, deleteOwnAccount, dispatchToastMessage, erasureType, localPassword, t]);
 
 	return <>
-		<Page {...props}>
+		<Page>
 			<Page.Header title={t('Profile')}>
 				<ButtonGroup>
 					<Button primary disabled={!hasUnsavedChanges || !canSave || loggingOut} onClick={onSave}>
@@ -247,7 +247,7 @@ const AccountProfilePage = (props) => {
 					</Button>
 				</ButtonGroup>
 			</Page.Header>
-			<Page.ScrollableContent>
+			<Page.ScrollableContentWithShadow>
 				<Box maxWidth='x600' w='full' alignSelf='center'>
 					<AccountProfileForm values={values} handlers={handlers} user={user} settings={settings} setCanSave={setCanSave}/>
 					<ButtonGroup stretch mb='x12'>
@@ -260,7 +260,7 @@ const AccountProfilePage = (props) => {
 						</Button>}
 					</ButtonGroup>
 				</Box>
-			</Page.ScrollableContent>
+			</Page.ScrollableContentWithShadow>
 		</Page>
 		{ modal }
 	</>;

From 4eb49cc4ec53f1bc300a062cf44c99fc6cc1e509 Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Wed, 1 Jul 2020 13:50:52 -0300
Subject: [PATCH 07/15] Use avatar ETag.

---
 .../client/components/ThreadListMessage.js    |  4 ++--
 client/account/AccountProfileForm.js          |  4 ++--
 client/admin/users/EditUser.js                |  2 +-
 client/components/basic/avatar/UserAvatar.js  | 23 ++++++++++++++++---
 .../basic/avatar/UserAvatarEditor.js          | 18 +++++++--------
 5 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/app/threads/client/components/ThreadListMessage.js b/app/threads/client/components/ThreadListMessage.js
index 4fe07ce40113..2ce4672932a1 100644
--- a/app/threads/client/components/ThreadListMessage.js
+++ b/app/threads/client/components/ThreadListMessage.js
@@ -44,13 +44,13 @@ const followStyle = css`
 	}
 `;
 
-export default function ThreadListMessage({ _id, msg, following, username, name, ts, replies, participants, handleFollowButton, unread, mention, all, t = (e) => e, formatDate = (e) => e, tlm, className = [], ...props }) {
+export default function ThreadListMessage({ _id, msg, following, username, name, ts, replies, participants, handleFollowButton, unread, mention, all, t = (e) => e, formatDate = (e) => e, tlm, className = [], u: { _id: userId }, ...props }) {
 	const button = !following ? 'bell-off' : 'bell';
 	const actionLabel = t(!following ? 'Not_Following' : 'Following');
 
 	return <Box rcx-contextual-message pi='x20' pb='x16' pbs='x16' display='flex' {...props} className={[...isIterable(className) ? className : [className], !following && followStyle].filter(Boolean)}>
 		<Container mb='neg-x2'>
-			<UserAvatar username={username} rcx-message__avatar size='x36'/>
+			<UserAvatar username={username} userId={userId} rcx-message__avatar size='x36'/>
 		</Container>
 		<Container width='1px' mb='neg-x4' flexGrow={1}>
 			<Header>
diff --git a/client/account/AccountProfileForm.js b/client/account/AccountProfileForm.js
index de4f816e5626..3a831b3b3568 100644
--- a/client/account/AccountProfileForm.js
+++ b/client/account/AccountProfileForm.js
@@ -122,8 +122,8 @@ export default function AccountProfileForm({ values, handlers, user, settings, s
 
 	return <FieldGroup is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
 		{useMemo(() => <Field>
-			<UserAvatarEditor username={username} setAvatarObj={handleAvatar} disabled={!allowUserAvatarChange} suggestions={avatarSuggestions}/>
-		</Field>, [username, handleAvatar, allowUserAvatarChange, avatarSuggestions])}
+			<UserAvatarEditor userId={user._id} username={username} setAvatarObj={handleAvatar} disabled={!allowUserAvatarChange} suggestions={avatarSuggestions}/>
+		</Field>, [username, handleAvatar, allowUserAvatarChange, avatarSuggestions, user._id])}
 		<Box display='flex' flexDirection='row' justifyContent='space-between'>
 			{useMemo(() => <Field mie='x8'>
 				<Field.Label flexGrow={0}>{t('Name')}</Field.Label>
diff --git a/client/admin/users/EditUser.js b/client/admin/users/EditUser.js
index 9a8c149bc3c2..fe11a1925257 100644
--- a/client/admin/users/EditUser.js
+++ b/client/admin/users/EditUser.js
@@ -102,7 +102,7 @@ export function EditUser({ data, roles, ...props }) {
 
 	const canSaveOrReset = hasUnsavedChanges || avatarObj;
 
-	const prepend = useMemo(() => <UserAvatarEditor username={data.username} setAvatarObj={setAvatarObj}/>, [data.username]);
+	const prepend = useMemo(() => <UserAvatarEditor userId={data._id} username={data.username} setAvatarObj={setAvatarObj}/>, [data._id, data.username]);
 
 	const append = useMemo(() => <Field>
 		<Field.Row>
diff --git a/client/components/basic/avatar/UserAvatar.js b/client/components/basic/avatar/UserAvatar.js
index d5bc6b16a3c0..3aef5af3f08c 100644
--- a/client/components/basic/avatar/UserAvatar.js
+++ b/client/components/basic/avatar/UserAvatar.js
@@ -1,8 +1,25 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { Meteor } from 'meteor/meteor';
 import { Avatar } from '@rocket.chat/fuselage';
 
-function UserAvatar({ url, username, ...props }) {
-	const avatarUrl = url || `/avatar/${ username }`;
+import { getUserAvatarURL } from '../../../../app/utils/lib/getUserAvatarURL';
+
+const useAvatarUrl = ({ url, username, userId }) => useMemo(() => {
+	if (url) {
+		return url;
+	}
+
+	if (userId) {
+		const { username: foundUsername, avatarETag } = Meteor.users.findOne({ _id: userId }, { fields: { username: 1, avatarETag: 1 } });
+
+		return getUserAvatarURL(foundUsername, avatarETag);
+	}
+
+	return getUserAvatarURL(username);
+}, [url, username, userId]);
+
+function UserAvatar({ url, username, userId, ...props }) {
+	const avatarUrl = useAvatarUrl({ url, username, userId });
 	return <Avatar url={avatarUrl} title={username} {...props}/>;
 }
 
diff --git a/client/components/basic/avatar/UserAvatarEditor.js b/client/components/basic/avatar/UserAvatarEditor.js
index 7306b66fbfc2..f605bf6f1cea 100644
--- a/client/components/basic/avatar/UserAvatarEditor.js
+++ b/client/components/basic/avatar/UserAvatarEditor.js
@@ -5,20 +5,20 @@ import { useTranslation } from '../../../contexts/TranslationContext';
 import { useFileInput } from '../../../hooks/useFileInput';
 import UserAvatar from './UserAvatar';
 
-function UserAvatarSuggestions({ suggestions, setAvatarObj, setNewAvatarSource, ...props }) {
+function UserAvatarSuggestions({ suggestions, setAvatarObj, setNewAvatarSource, disabled, ...props }) {
 	const handleClick = useCallback((suggestion) => () => {
 		setAvatarObj(suggestion);
 		setNewAvatarSource(suggestion.blob);
 	}, [setAvatarObj, setNewAvatarSource]);
 
 	return <Margins inline='x4' {...props}>
-		{Object.values(suggestions).map((suggestion) => <Button square onClick={handleClick(suggestion)}>
-			<UserAvatar key={suggestion.service} title={suggestion.service} size='x36' url={suggestion.blob} mie='x4'/>
+		{Object.values(suggestions).map((suggestion) => <Button key={suggestion.service} disabled={disabled} square onClick={handleClick(suggestion)}>
+			<UserAvatar title={suggestion.service} size='x36' url={suggestion.blob} mie='x4'/>
 		</Button>)}
 	</Margins>;
 }
 
-export function UserAvatarEditor({ username, setAvatarObj, suggestions }) {
+export function UserAvatarEditor({ username, setAvatarObj, suggestions, disabled, userId }) {
 	const t = useTranslation();
 	const [avatarFromUrl, setAvatarFromUrl] = useState('');
 	const [newAvatarSource, setNewAvatarSource] = useState();
@@ -48,14 +48,14 @@ export function UserAvatarEditor({ username, setAvatarObj, suggestions }) {
 	return <Box display='flex' flexDirection='column' fontScale='p2'>
 		{t('Profile_picture')}
 		<Box display='flex' flexDirection='row' mbs='x4'>
-			<UserAvatar size='x120' url={url} username={username} style={{ objectFit: 'contain' }} mie='x4'/>
+			<UserAvatar size='x120' url={url} userId={userId} username={username} style={{ objectFit: 'contain' }} mie='x4'/>
 			<Box display='flex' flexDirection='column' flexGrow='1' justifyContent='space-between' mis='x4'>
 				<Box display='flex' flexDirection='row' mbs='none'>
 					<Margins inline='x4'>
-						<Button square mis='none' onClick={clickReset}><UserAvatar size='x36' username={`%40${ username }`} mie='x4'/></Button>
-						<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
-						<Button square mie='none' onClick={clickUrl}><Icon name='permalink' size='x20'/></Button>
-						{suggestions && <UserAvatarSuggestions suggestions={suggestions} setAvatarObj={setAvatarObj} setNewAvatarSource={setNewAvatarSource}/>}
+						<Button square mis='none' onClick={clickReset} disabled={disabled}><UserAvatar size='x36' url={`/avatar/%40${ username }`} mie='x4'/></Button>
+						<Button square onClick={clickUpload} disabled={disabled}><Icon name='upload' size='x20'/></Button>
+						<Button square mie='none' onClick={clickUrl} disabled={disabled}><Icon name='permalink' size='x20'/></Button>
+						{suggestions && <UserAvatarSuggestions suggestions={suggestions} setAvatarObj={setAvatarObj} setNewAvatarSource={setNewAvatarSource} disabled={disabled}/>}
 					</Margins>
 				</Box>
 				<Box>{t('Use_url_for_avatar')}</Box>

From 5402457e426107153a741d68005743464a05e0e8 Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Fri, 10 Jul 2020 19:19:14 -0300
Subject: [PATCH 08/15] Review WIP

---
 client/account/AccountProfileForm.js          |  6 +--
 client/account/AccountProfilePage.js          | 51 +++++++++----------
 .../components/basic/userStatus/UserStatus.js |  7 +--
 client/helpers/statusColors.js                |  8 +++
 4 files changed, 37 insertions(+), 35 deletions(-)
 create mode 100644 client/helpers/statusColors.js

diff --git a/client/account/AccountProfileForm.js b/client/account/AccountProfileForm.js
index 3a831b3b3568..9aaf6662c77a 100644
--- a/client/account/AccountProfileForm.js
+++ b/client/account/AccountProfileForm.js
@@ -11,7 +11,7 @@ import { UserAvatarEditor } from '../components/basic/avatar/UserAvatarEditor';
 import CustomFieldsForm from '../components/CustomFieldsForm';
 import UserStatusMenu from '../components/basic/userStatus/UserStatusMenu';
 
-export default function AccountProfileForm({ values, handlers, user, settings, setCanSave, ...props }) {
+export default function AccountProfileForm({ values, handlers, user, settings, onSaveStateChange, ...props }) {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
@@ -117,8 +117,8 @@ export default function AccountProfileForm({ values, handlers, user, settings, s
 	].filter(Boolean);
 
 	useEffect(() => {
-		setCanSave(canSave);
-	}, [canSave, setCanSave]);
+		onSaveStateChange(canSave);
+	}, [canSave, onSaveStateChange]);
 
 	return <FieldGroup is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
 		{useMemo(() => <Field>
diff --git a/client/account/AccountProfilePage.js b/client/account/AccountProfilePage.js
index 08be81108f1e..fc98ec0b0c21 100644
--- a/client/account/AccountProfilePage.js
+++ b/client/account/AccountProfilePage.js
@@ -11,6 +11,7 @@ import { useSetting } from '../contexts/SettingsContext';
 import { useUser } from '../contexts/UserContext';
 import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
 import { useMethod } from '../contexts/ServerContext';
+import { useSetModal } from '../contexts/ModalContext';
 import { Modal } from '../components/basic/Modal';
 import { useUpdateAvatar } from '../hooks/useUpdateAvatar';
 import { getUserEmailAddress } from '../helpers/getUserEmailAddress';
@@ -64,7 +65,7 @@ const AccountProfilePage = () => {
 
 	const { values, handlers, hasUnsavedChanges } = useForm(getInitialValues(user));
 	const [canSave, setCanSave] = useState(true);
-	const [modal, setModal] = useState(null);
+	const setModal = useSetModal();
 	const [loggingOut, setLoggingOut] = useState(false);
 
 	const logoutOtherClients = useMethod('logoutOtherClients');
@@ -184,6 +185,7 @@ const AccountProfilePage = () => {
 		t,
 		customFields,
 		statusType,
+		setModal,
 	]);
 
 	const handleLogoutOtherLocations = useCallback(async () => {
@@ -236,34 +238,31 @@ const AccountProfilePage = () => {
 			text={t('If_you_are_sure_type_in_your_username')}
 			isPassword
 		/>);
-	}, [closeModal, deleteOwnAccount, dispatchToastMessage, erasureType, localPassword, t]);
+	}, [closeModal, deleteOwnAccount, dispatchToastMessage, erasureType, localPassword, t, setModal]);
 
-	return <>
-		<Page>
-			<Page.Header title={t('Profile')}>
-				<ButtonGroup>
-					<Button primary disabled={!hasUnsavedChanges || !canSave || loggingOut} onClick={onSave}>
-						{t('Save_changes')}
+	return <Page>
+		<Page.Header title={t('Profile')}>
+			<ButtonGroup>
+				<Button primary disabled={!hasUnsavedChanges || !canSave || loggingOut} onClick={onSave}>
+					{t('Save_changes')}
+				</Button>
+			</ButtonGroup>
+		</Page.Header>
+		<Page.ScrollableContentWithShadow>
+			<Box maxWidth='x600' w='full' alignSelf='center'>
+				<AccountProfileForm values={values} handlers={handlers} user={user} settings={settings} onSaveStateChange={setCanSave}/>
+				<ButtonGroup stretch mb='x12'>
+					<Button onClick={handleLogoutOtherLocations} flexGrow={0} disabled={loggingOut}>
+						{t('Logout_Others')}
 					</Button>
+					{allowDeleteOwnAccount && <Button danger onClick={handleDeleteOwnAccount}>
+						<Icon name='trash' size='x20' mie='x4'/>
+						{t('Delete_my_account')}
+					</Button>}
 				</ButtonGroup>
-			</Page.Header>
-			<Page.ScrollableContentWithShadow>
-				<Box maxWidth='x600' w='full' alignSelf='center'>
-					<AccountProfileForm values={values} handlers={handlers} user={user} settings={settings} setCanSave={setCanSave}/>
-					<ButtonGroup stretch mb='x12'>
-						<Button onClick={handleLogoutOtherLocations} flexGrow={0} disabled={loggingOut}>
-							{t('Logout_Others')}
-						</Button>
-						{allowDeleteOwnAccount && <Button danger onClick={handleDeleteOwnAccount}>
-							<Icon name='trash' size='x20' mie='x4'/>
-							{t('Delete_my_account')}
-						</Button>}
-					</ButtonGroup>
-				</Box>
-			</Page.ScrollableContentWithShadow>
-		</Page>
-		{ modal }
-	</>;
+			</Box>
+		</Page.ScrollableContentWithShadow>
+	</Page>;
 };
 
 export default AccountProfilePage;
diff --git a/client/components/basic/userStatus/UserStatus.js b/client/components/basic/userStatus/UserStatus.js
index dd4cd2836490..73fd3adc1ce3 100644
--- a/client/components/basic/userStatus/UserStatus.js
+++ b/client/components/basic/userStatus/UserStatus.js
@@ -1,12 +1,7 @@
 import React from 'react';
 import { Box } from '@rocket.chat/fuselage';
 
-const statusColors = {
-	offline: 'neutral-500',
-	busy: 'danger-500',
-	away: 'warning-500',
-	online: 'success-500',
-};
+import statusColors from '../../../helpers/statusColors';
 
 const UserStatus = React.memo(({ status, ...props }) => <Box size='x12' borderRadius='full' backgroundColor={statusColors[status]} {...props}/>);
 
diff --git a/client/helpers/statusColors.js b/client/helpers/statusColors.js
new file mode 100644
index 000000000000..c33e65a83a16
--- /dev/null
+++ b/client/helpers/statusColors.js
@@ -0,0 +1,8 @@
+const statusColors = {
+	offline: 'neutral-500',
+	busy: 'danger-500',
+	away: 'warning-500',
+	online: 'success-500',
+};
+
+export default statusColors;

From 3a5689e9f343ccaf15870f75c610e256f9fbddcc Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Fri, 10 Jul 2020 19:19:14 -0300
Subject: [PATCH 09/15] Review

---
 .../client/components/ThreadListMessage.js    |  2 +-
 client/account/AccountProfileForm.js          | 16 +++---
 client/account/AccountProfilePage.js          | 51 +++++++++----------
 client/components/basic/avatar/UserAvatar.js  | 25 ++-------
 .../basic/avatar/UserAvatarEditor.js          | 13 ++---
 .../components/basic/userStatus/UserStatus.js |  7 +--
 client/helpers/statusColors.js                |  8 +++
 client/hooks/useAvatarUrlFromUserId.js        | 13 +++++
 8 files changed, 69 insertions(+), 66 deletions(-)
 create mode 100644 client/helpers/statusColors.js
 create mode 100644 client/hooks/useAvatarUrlFromUserId.js

diff --git a/app/threads/client/components/ThreadListMessage.js b/app/threads/client/components/ThreadListMessage.js
index 2ce4672932a1..0d3a37f3feb9 100644
--- a/app/threads/client/components/ThreadListMessage.js
+++ b/app/threads/client/components/ThreadListMessage.js
@@ -50,7 +50,7 @@ export default function ThreadListMessage({ _id, msg, following, username, name,
 
 	return <Box rcx-contextual-message pi='x20' pb='x16' pbs='x16' display='flex' {...props} className={[...isIterable(className) ? className : [className], !following && followStyle].filter(Boolean)}>
 		<Container mb='neg-x2'>
-			<UserAvatar username={username} userId={userId} rcx-message__avatar size='x36'/>
+			<UserAvatar userId={userId} rcx-message__avatar size='x36'/>
 		</Container>
 		<Container width='1px' mb='neg-x4' flexGrow={1}>
 			<Header>
diff --git a/client/account/AccountProfileForm.js b/client/account/AccountProfileForm.js
index 3a831b3b3568..9b329f2574a9 100644
--- a/client/account/AccountProfileForm.js
+++ b/client/account/AccountProfileForm.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useEffect, useState } from 'react';
 import { Field, FieldGroup, TextInput, TextAreaInput, Box, Icon, AnimatedVisibility, PasswordInput, Button, Grid } from '@rocket.chat/fuselage';
-import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
+import { useDebouncedCallback, useSafely } from '@rocket.chat/fuselage-hooks';
 
 import { useTranslation } from '../contexts/TranslationContext';
 import { isEmail } from '../../app/utils/lib/isEmail.js';
@@ -11,7 +11,9 @@ import { UserAvatarEditor } from '../components/basic/avatar/UserAvatarEditor';
 import CustomFieldsForm from '../components/CustomFieldsForm';
 import UserStatusMenu from '../components/basic/userStatus/UserStatusMenu';
 
-export default function AccountProfileForm({ values, handlers, user, settings, setCanSave, ...props }) {
+const STATUS_TEXT_MAX_LENGTH = 120;
+
+export default function AccountProfileForm({ values, handlers, user, settings, onSaveStateChange, ...props }) {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 
@@ -20,7 +22,7 @@ export default function AccountProfileForm({ values, handlers, user, settings, s
 	const sendConfirmationEmail = useMethod('sendConfirmationEmail');
 
 	const [usernameError, setUsernameError] = useState();
-	const [avatarSuggestions, setAvatarSuggestions] = useState();
+	const [avatarSuggestions, setAvatarSuggestions] = useSafely(useState());
 
 	const {
 		allowRealNameChange,
@@ -88,7 +90,7 @@ export default function AccountProfileForm({ values, handlers, user, settings, s
 			setAvatarSuggestions(suggestions);
 		};
 		getSuggestions();
-	}, [getAvatarSuggestions]);
+	}, [getAvatarSuggestions, setAvatarSuggestions]);
 
 	useEffect(() => {
 		checkUsername(username);
@@ -105,7 +107,7 @@ export default function AccountProfileForm({ values, handlers, user, settings, s
 		if (!realname && requireName) { return t('Field_required'); }
 	}, [realname, requireName, t, user.name]);
 
-	const statusTextError = useMemo(() => (!statusText || statusText.length <= 120 || statusText.length === 0 ? undefined : t('Max_length_is', '120')), [statusText, t]);
+	const statusTextError = useMemo(() => (!statusText || statusText.length <= STATUS_TEXT_MAX_LENGTH || statusText.length === 0 ? undefined : t('Max_length_is', STATUS_TEXT_MAX_LENGTH)), [statusText, t]);
 	const { emails: [{ verified = false }] } = user;
 
 	const canSave = !![
@@ -117,8 +119,8 @@ export default function AccountProfileForm({ values, handlers, user, settings, s
 	].filter(Boolean);
 
 	useEffect(() => {
-		setCanSave(canSave);
-	}, [canSave, setCanSave]);
+		onSaveStateChange(canSave);
+	}, [canSave, onSaveStateChange]);
 
 	return <FieldGroup is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
 		{useMemo(() => <Field>
diff --git a/client/account/AccountProfilePage.js b/client/account/AccountProfilePage.js
index 08be81108f1e..fc98ec0b0c21 100644
--- a/client/account/AccountProfilePage.js
+++ b/client/account/AccountProfilePage.js
@@ -11,6 +11,7 @@ import { useSetting } from '../contexts/SettingsContext';
 import { useUser } from '../contexts/UserContext';
 import { useToastMessageDispatch } from '../contexts/ToastMessagesContext';
 import { useMethod } from '../contexts/ServerContext';
+import { useSetModal } from '../contexts/ModalContext';
 import { Modal } from '../components/basic/Modal';
 import { useUpdateAvatar } from '../hooks/useUpdateAvatar';
 import { getUserEmailAddress } from '../helpers/getUserEmailAddress';
@@ -64,7 +65,7 @@ const AccountProfilePage = () => {
 
 	const { values, handlers, hasUnsavedChanges } = useForm(getInitialValues(user));
 	const [canSave, setCanSave] = useState(true);
-	const [modal, setModal] = useState(null);
+	const setModal = useSetModal();
 	const [loggingOut, setLoggingOut] = useState(false);
 
 	const logoutOtherClients = useMethod('logoutOtherClients');
@@ -184,6 +185,7 @@ const AccountProfilePage = () => {
 		t,
 		customFields,
 		statusType,
+		setModal,
 	]);
 
 	const handleLogoutOtherLocations = useCallback(async () => {
@@ -236,34 +238,31 @@ const AccountProfilePage = () => {
 			text={t('If_you_are_sure_type_in_your_username')}
 			isPassword
 		/>);
-	}, [closeModal, deleteOwnAccount, dispatchToastMessage, erasureType, localPassword, t]);
+	}, [closeModal, deleteOwnAccount, dispatchToastMessage, erasureType, localPassword, t, setModal]);
 
-	return <>
-		<Page>
-			<Page.Header title={t('Profile')}>
-				<ButtonGroup>
-					<Button primary disabled={!hasUnsavedChanges || !canSave || loggingOut} onClick={onSave}>
-						{t('Save_changes')}
+	return <Page>
+		<Page.Header title={t('Profile')}>
+			<ButtonGroup>
+				<Button primary disabled={!hasUnsavedChanges || !canSave || loggingOut} onClick={onSave}>
+					{t('Save_changes')}
+				</Button>
+			</ButtonGroup>
+		</Page.Header>
+		<Page.ScrollableContentWithShadow>
+			<Box maxWidth='x600' w='full' alignSelf='center'>
+				<AccountProfileForm values={values} handlers={handlers} user={user} settings={settings} onSaveStateChange={setCanSave}/>
+				<ButtonGroup stretch mb='x12'>
+					<Button onClick={handleLogoutOtherLocations} flexGrow={0} disabled={loggingOut}>
+						{t('Logout_Others')}
 					</Button>
+					{allowDeleteOwnAccount && <Button danger onClick={handleDeleteOwnAccount}>
+						<Icon name='trash' size='x20' mie='x4'/>
+						{t('Delete_my_account')}
+					</Button>}
 				</ButtonGroup>
-			</Page.Header>
-			<Page.ScrollableContentWithShadow>
-				<Box maxWidth='x600' w='full' alignSelf='center'>
-					<AccountProfileForm values={values} handlers={handlers} user={user} settings={settings} setCanSave={setCanSave}/>
-					<ButtonGroup stretch mb='x12'>
-						<Button onClick={handleLogoutOtherLocations} flexGrow={0} disabled={loggingOut}>
-							{t('Logout_Others')}
-						</Button>
-						{allowDeleteOwnAccount && <Button danger onClick={handleDeleteOwnAccount}>
-							<Icon name='trash' size='x20' mie='x4'/>
-							{t('Delete_my_account')}
-						</Button>}
-					</ButtonGroup>
-				</Box>
-			</Page.ScrollableContentWithShadow>
-		</Page>
-		{ modal }
-	</>;
+			</Box>
+		</Page.ScrollableContentWithShadow>
+	</Page>;
 };
 
 export default AccountProfilePage;
diff --git a/client/components/basic/avatar/UserAvatar.js b/client/components/basic/avatar/UserAvatar.js
index 3aef5af3f08c..249a00226e4f 100644
--- a/client/components/basic/avatar/UserAvatar.js
+++ b/client/components/basic/avatar/UserAvatar.js
@@ -1,26 +1,11 @@
-import React, { useMemo } from 'react';
-import { Meteor } from 'meteor/meteor';
+import React from 'react';
 import { Avatar } from '@rocket.chat/fuselage';
 
-import { getUserAvatarURL } from '../../../../app/utils/lib/getUserAvatarURL';
+import { useAvatarUrlFromUserId } from '../../../hooks/useAvatarUrlFromUserId';
 
-const useAvatarUrl = ({ url, username, userId }) => useMemo(() => {
-	if (url) {
-		return url;
-	}
-
-	if (userId) {
-		const { username: foundUsername, avatarETag } = Meteor.users.findOne({ _id: userId }, { fields: { username: 1, avatarETag: 1 } });
-
-		return getUserAvatarURL(foundUsername, avatarETag);
-	}
-
-	return getUserAvatarURL(username);
-}, [url, username, userId]);
-
-function UserAvatar({ url, username, userId, ...props }) {
-	const avatarUrl = useAvatarUrl({ url, username, userId });
-	return <Avatar url={avatarUrl} title={username} {...props}/>;
+function UserAvatar({ userId, ...props }) {
+	const [username, url] = useAvatarUrlFromUserId({ userId });
+	return <Avatar url={url} title={username} {...props}/>;
 }
 
 export default UserAvatar;
diff --git a/client/components/basic/avatar/UserAvatarEditor.js b/client/components/basic/avatar/UserAvatarEditor.js
index f605bf6f1cea..b19ff2c813c1 100644
--- a/client/components/basic/avatar/UserAvatarEditor.js
+++ b/client/components/basic/avatar/UserAvatarEditor.js
@@ -1,9 +1,9 @@
 import React, { useState, useCallback } from 'react';
-import { Box, Button, Icon, TextInput, Margins } from '@rocket.chat/fuselage';
+import { Box, Button, Icon, TextInput, Margins, Avatar } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../../contexts/TranslationContext';
 import { useFileInput } from '../../../hooks/useFileInput';
-import UserAvatar from './UserAvatar';
+import { useAvatarUrlFromUserId } from '../../../hooks/useAvatarUrlFromUserId';
 
 function UserAvatarSuggestions({ suggestions, setAvatarObj, setNewAvatarSource, disabled, ...props }) {
 	const handleClick = useCallback((suggestion) => () => {
@@ -13,7 +13,7 @@ function UserAvatarSuggestions({ suggestions, setAvatarObj, setNewAvatarSource,
 
 	return <Margins inline='x4' {...props}>
 		{Object.values(suggestions).map((suggestion) => <Button key={suggestion.service} disabled={disabled} square onClick={handleClick(suggestion)}>
-			<UserAvatar title={suggestion.service} size='x36' url={suggestion.blob} mie='x4'/>
+			<Avatar title={suggestion.service} size='x36' url={suggestion.blob} mie='x4'/>
 		</Button>)}
 	</Margins>;
 }
@@ -39,7 +39,8 @@ export function UserAvatarEditor({ username, setAvatarObj, suggestions, disabled
 		setAvatarObj('reset');
 	};
 
-	const url = newAvatarSource || undefined;
+	const [, originalAvatarUrl] = useAvatarUrlFromUserId(userId);
+	const url = newAvatarSource || originalAvatarUrl;
 
 	const handleAvatarFromUrlChange = (event) => {
 		setAvatarFromUrl(event.currentTarget.value);
@@ -48,11 +49,11 @@ export function UserAvatarEditor({ username, setAvatarObj, suggestions, disabled
 	return <Box display='flex' flexDirection='column' fontScale='p2'>
 		{t('Profile_picture')}
 		<Box display='flex' flexDirection='row' mbs='x4'>
-			<UserAvatar size='x120' url={url} userId={userId} username={username} style={{ objectFit: 'contain' }} mie='x4'/>
+			<Avatar size='x120' url={url} style={{ objectFit: 'contain' }} mie='x4'/>
 			<Box display='flex' flexDirection='column' flexGrow='1' justifyContent='space-between' mis='x4'>
 				<Box display='flex' flexDirection='row' mbs='none'>
 					<Margins inline='x4'>
-						<Button square mis='none' onClick={clickReset} disabled={disabled}><UserAvatar size='x36' url={`/avatar/%40${ username }`} mie='x4'/></Button>
+						<Button square mis='none' onClick={clickReset} disabled={disabled}><Avatar size='x36' url={`/avatar/%40${ username }`} mie='x4'/></Button>
 						<Button square onClick={clickUpload} disabled={disabled}><Icon name='upload' size='x20'/></Button>
 						<Button square mie='none' onClick={clickUrl} disabled={disabled}><Icon name='permalink' size='x20'/></Button>
 						{suggestions && <UserAvatarSuggestions suggestions={suggestions} setAvatarObj={setAvatarObj} setNewAvatarSource={setNewAvatarSource} disabled={disabled}/>}
diff --git a/client/components/basic/userStatus/UserStatus.js b/client/components/basic/userStatus/UserStatus.js
index dd4cd2836490..73fd3adc1ce3 100644
--- a/client/components/basic/userStatus/UserStatus.js
+++ b/client/components/basic/userStatus/UserStatus.js
@@ -1,12 +1,7 @@
 import React from 'react';
 import { Box } from '@rocket.chat/fuselage';
 
-const statusColors = {
-	offline: 'neutral-500',
-	busy: 'danger-500',
-	away: 'warning-500',
-	online: 'success-500',
-};
+import statusColors from '../../../helpers/statusColors';
 
 const UserStatus = React.memo(({ status, ...props }) => <Box size='x12' borderRadius='full' backgroundColor={statusColors[status]} {...props}/>);
 
diff --git a/client/helpers/statusColors.js b/client/helpers/statusColors.js
new file mode 100644
index 000000000000..c33e65a83a16
--- /dev/null
+++ b/client/helpers/statusColors.js
@@ -0,0 +1,8 @@
+const statusColors = {
+	offline: 'neutral-500',
+	busy: 'danger-500',
+	away: 'warning-500',
+	online: 'success-500',
+};
+
+export default statusColors;
diff --git a/client/hooks/useAvatarUrlFromUserId.js b/client/hooks/useAvatarUrlFromUserId.js
new file mode 100644
index 000000000000..cdd5d9a38c4b
--- /dev/null
+++ b/client/hooks/useAvatarUrlFromUserId.js
@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { Meteor } from 'meteor/meteor';
+
+import { useReactiveValue } from './useReactiveValue';
+import { getUserAvatarURL } from '../../app/utils/lib/getUserAvatarURL';
+
+export const useAvatarUrlFromUserId = (userId) => {
+	const user = useReactiveValue(() => Meteor.users.findOne({ _id: userId }, { fields: { username: 1, avatarETag: 1 } }), [userId]);
+
+	const { username, avatarETag } = user;
+
+	return useMemo(() => [username, getUserAvatarURL(username, avatarETag)], [username, avatarETag]);
+};

From 76fcd1cb6c809e1ee730e80d5a3713b46701c265 Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilhermegazzo@gmail.com>
Date: Mon, 13 Jul 2020 23:57:30 -0300
Subject: [PATCH 10/15] Update client/helpers/getUserEmailAddress.js

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>
---
 client/helpers/getUserEmailAddress.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/helpers/getUserEmailAddress.js b/client/helpers/getUserEmailAddress.js
index 716a5c4c6258..31d8b1f54403 100644
--- a/client/helpers/getUserEmailAddress.js
+++ b/client/helpers/getUserEmailAddress.js
@@ -1 +1 @@
-export const getUserEmailAddress = (user) => user.emails && user.emails[0] && user.emails[0].address;
+export const getUserEmailAddress = (user) => user.emails?.find(({ address }) => !!address)?.address;

From 2a99ab4398ab86c1470391c50c956fbddeef05aa Mon Sep 17 00:00:00 2001
From: Guilherme Gazzo <guilherme@gazzo.xyz>
Date: Tue, 14 Jul 2020 00:26:55 -0300
Subject: [PATCH 11/15] Fix review

---
 client/account/AccountProfileForm.js          | 10 ++--
 client/account/AccountProfilePage.js          |  2 +-
 client/account/AccountRoute.js                |  9 ++--
 client/admin/users/EditUser.js                |  2 +-
 client/admin/users/UserForm.js                |  8 ++--
 client/admin/users/UserInfo.js                |  4 +-
 client/admin/users/UsersTable.js              |  5 +-
 client/components/basic/avatar/UserAvatar.js  | 25 ++--------
 .../basic/avatar/UserAvatarEditor.js          |  4 +-
 client/views/directory/UserTab.js             | 48 +++++++++----------
 10 files changed, 46 insertions(+), 71 deletions(-)

diff --git a/client/account/AccountProfileForm.js b/client/account/AccountProfileForm.js
index 9aaf6662c77a..61506124b5e9 100644
--- a/client/account/AccountProfileForm.js
+++ b/client/account/AccountProfileForm.js
@@ -120,10 +120,10 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 		onSaveStateChange(canSave);
 	}, [canSave, onSaveStateChange]);
 
-	return <FieldGroup is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
+	return <FieldGroup is='form' autoComplete='off' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
 		{useMemo(() => <Field>
-			<UserAvatarEditor userId={user._id} username={username} setAvatarObj={handleAvatar} disabled={!allowUserAvatarChange} suggestions={avatarSuggestions}/>
-		</Field>, [username, handleAvatar, allowUserAvatarChange, avatarSuggestions, user._id])}
+			<UserAvatarEditor etag={user.avatarETag} username={username} setAvatarObj={handleAvatar} disabled={!allowUserAvatarChange} suggestions={avatarSuggestions}/>
+		</Field>, [username, handleAvatar, allowUserAvatarChange, avatarSuggestions, user.avatarETag])}
 		<Box display='flex' flexDirection='row' justifyContent='space-between'>
 			{useMemo(() => <Field mie='x8'>
 				<Field.Label flexGrow={0}>{t('Name')}</Field.Label>
@@ -193,13 +193,13 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 						{useMemo(() => <Field>
 							<Field.Label>{t('Password')}</Field.Label>
 							<Field.Row>
-								<PasswordInput autocomplete='off' disabled={!allowPasswordChange} error={passwordError} flexGrow={1} value={password} onChange={handlePassword} addon={<Icon name='key' size='x20'/>}/>
+								<PasswordInput autoComplete='off' disabled={!allowPasswordChange} error={passwordError} flexGrow={1} value={password} onChange={handlePassword} addon={<Icon name='key' size='x20'/>}/>
 							</Field.Row>
 						</Field>, [t, password, handlePassword, passwordError, allowPasswordChange])}
 						{useMemo(() => <AnimatedVisibility visibility={password ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN }><Field>
 							<Field.Label>{t('Confirm_password')}</Field.Label>
 							<Field.Row>
-								<PasswordInput autocomplete='off' error={passwordError} flexGrow={1} value={confirmationPassword} onChange={handleConfirmationPassword} addon={<Icon name='key' size='x20'/>}/>
+								<PasswordInput autoComplete='off' error={passwordError} flexGrow={1} value={confirmationPassword} onChange={handleConfirmationPassword} addon={<Icon name='key' size='x20'/>}/>
 							</Field.Row>
 							{ passwordError && <Field.Error>
 								{passwordError}
diff --git a/client/account/AccountProfilePage.js b/client/account/AccountProfilePage.js
index fc98ec0b0c21..873bccf7d948 100644
--- a/client/account/AccountProfilePage.js
+++ b/client/account/AccountProfilePage.js
@@ -249,7 +249,7 @@ const AccountProfilePage = () => {
 			</ButtonGroup>
 		</Page.Header>
 		<Page.ScrollableContentWithShadow>
-			<Box maxWidth='x600' w='full' alignSelf='center'>
+			<Box maxWidth='600px' w='full' alignSelf='center'>
 				<AccountProfileForm values={values} handlers={handlers} user={user} settings={settings} onSaveStateChange={setCanSave}/>
 				<ButtonGroup stretch mb='x12'>
 					<Button onClick={handleLogoutOtherLocations} flexGrow={0} disabled={loggingOut}>
diff --git a/client/account/AccountRoute.js b/client/account/AccountRoute.js
index 966b933aed3b..feadd02ade5f 100644
--- a/client/account/AccountRoute.js
+++ b/client/account/AccountRoute.js
@@ -16,11 +16,10 @@ const AccountRoute = () => {
 		SideNav.openFlex();
 	});
 
-	return <>
-		{{
-			profile: <AccountProfilePage />,
-		}[page]}
-	</>;
+	if (page === 'profile') {
+		return <AccountProfilePage />;
+	}
+	return null;
 };
 
 export default AccountRoute;
diff --git a/client/admin/users/EditUser.js b/client/admin/users/EditUser.js
index fe11a1925257..c9e20749a741 100644
--- a/client/admin/users/EditUser.js
+++ b/client/admin/users/EditUser.js
@@ -102,7 +102,7 @@ export function EditUser({ data, roles, ...props }) {
 
 	const canSaveOrReset = hasUnsavedChanges || avatarObj;
 
-	const prepend = useMemo(() => <UserAvatarEditor userId={data._id} username={data.username} setAvatarObj={setAvatarObj}/>, [data._id, data.username]);
+	const prepend = useMemo(() => <UserAvatarEditor username={data.username} etag={data.avatarETag} setAvatarObj={setAvatarObj}/>, [data.username, data.avatarETag]);
 
 	const append = useMemo(() => <Field>
 		<Field.Row>
diff --git a/client/admin/users/UserForm.js b/client/admin/users/UserForm.js
index 83e27e36f4a4..298c5cc0b0a0 100644
--- a/client/admin/users/UserForm.js
+++ b/client/admin/users/UserForm.js
@@ -118,11 +118,9 @@ export default function UserForm({ formValues, formHandlers, availableRoles, app
 				</Box>
 			</Field.Row>
 		</Field>, [handleSendWelcomeEmail, t, sendWelcomeEmail])}
-		<>
-			<Divider />
-			<Box fontScale='s2'>{t('Custom_Fields')}</Box>
-			<CustomFieldsForm customFieldsData={customFields} setCustomFieldsData={handleCustomFields}/>
-		</>
+		<Divider />
+		<Box fontScale='s2'>{t('Custom_Fields')}</Box>
+		<CustomFieldsForm customFieldsData={customFields} setCustomFieldsData={handleCustomFields}/>
 		{ append }
 	</VerticalBar.ScrollableContent>;
 }
diff --git a/client/admin/users/UserInfo.js b/client/admin/users/UserInfo.js
index 10243071d1c4..555df21ff651 100644
--- a/client/admin/users/UserInfo.js
+++ b/client/admin/users/UserInfo.js
@@ -10,6 +10,7 @@ import { UserInfoActions } from './UserInfoActions';
 import MarkdownText from '../../components/basic/MarkdownText';
 import VerticalBar from '../../components/basic/VerticalBar';
 import { FormSkeleton } from './Skeleton';
+import UserAvatar from '../../components/basic/avatar/UserAvatar';
 
 const useTimezoneClock = (utcOffset = 0, updateInterval) => {
 	const [time, setTime] = useState();
@@ -57,12 +58,11 @@ export function UserInfo({ data, onChange, ...props }) {
 
 	const lastLogin = data.lastLogin ? DateFormat.formatDateAndTime(data.lastLogin) : '';
 
-	const avatarUrl = roomTypes.getConfig('d').getAvatarPath({ name: data.username || data.name, type: 'd', _id: data._id });
 
 	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} {...props}>
 		<Box display='flex' flexDirection='column' alignItems='center' flexShrink={0} withTruncatedText>
 			<Margins block='x2' inline='auto'>
-				<Avatar size={'x120'} title={data.username} url={avatarUrl}/>
+				<UserAvatar size={'x120'} title={data.username} username={data.username} etag={data.avatarETag}/>
 				<Box fontScale='h1' withTruncatedText>{data.name || data.username}</Box>
 				{!!data.name && <Box fontScale='p1' color='hint' withTruncatedText>@{data.username}</Box>}
 				<Box fontScale='p1' color='hint' withTruncatedText>{data.status}</Box>
diff --git a/client/admin/users/UsersTable.js b/client/admin/users/UsersTable.js
index b673bf500c86..224a14e3311e 100644
--- a/client/admin/users/UsersTable.js
+++ b/client/admin/users/UsersTable.js
@@ -7,6 +7,7 @@ import { useTranslation } from '../../contexts/TranslationContext';
 import { getUserAvatarURL } from '../../../app/utils/client';
 import { useRoute } from '../../contexts/RouterContext';
 import { useEndpointData } from '../../hooks/useEndpointData';
+import UserAvatar from '../../components/basic/avatar/UserAvatar';
 
 const style = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };
 
@@ -79,12 +80,10 @@ export function UsersTable() {
 	].filter(Boolean), [sort, onHeaderClick, t, mediaQuery]);
 
 	const renderRow = useCallback(({ emails, _id, username, name, roles, status, avatarETag }) => {
-		const avatarUrl = getUserAvatarURL(username, avatarETag);
-
 		return <Table.Row key={_id} onKeyDown={onClick(_id)} onClick={onClick(_id)} tabIndex={0} role='link' action qa-user-id={_id}>
 			<Table.Cell style={style}>
 				<Box display='flex' alignItems='center'>
-					<Avatar size={mediaQuery ? 'x28' : 'x40'} title={username} url={avatarUrl} />
+					<UserAvatar size={mediaQuery ? 'x28' : 'x40'} title={username} username={username} etag={avatarETag}/>
 					<Box display='flex' style={style} mi='x8'>
 						<Box display='flex' flexDirection='column' alignSelf='center' style={style}>
 							<Box fontScale='p2' style={style} color='default'>{name || username}</Box>
diff --git a/client/components/basic/avatar/UserAvatar.js b/client/components/basic/avatar/UserAvatar.js
index 3aef5af3f08c..0d4f3c40cffd 100644
--- a/client/components/basic/avatar/UserAvatar.js
+++ b/client/components/basic/avatar/UserAvatar.js
@@ -1,26 +1,9 @@
-import React, { useMemo } from 'react';
-import { Meteor } from 'meteor/meteor';
+import React from 'react';
 import { Avatar } from '@rocket.chat/fuselage';
 
-import { getUserAvatarURL } from '../../../../app/utils/lib/getUserAvatarURL';
-
-const useAvatarUrl = ({ url, username, userId }) => useMemo(() => {
-	if (url) {
-		return url;
-	}
-
-	if (userId) {
-		const { username: foundUsername, avatarETag } = Meteor.users.findOne({ _id: userId }, { fields: { username: 1, avatarETag: 1 } });
-
-		return getUserAvatarURL(foundUsername, avatarETag);
-	}
-
-	return getUserAvatarURL(username);
-}, [url, username, userId]);
-
-function UserAvatar({ url, username, userId, ...props }) {
-	const avatarUrl = useAvatarUrl({ url, username, userId });
-	return <Avatar url={avatarUrl} title={username} {...props}/>;
+function UserAvatar({ url, username, etag, ...props }) {
+	const avatarUrl = url || `/avatar/${ username }${ etag ? `?etag=${ etag }` : '' }`;
+	return <Avatar rounded url={avatarUrl} title={username} {...props}/>;
 }
 
 export default UserAvatar;
diff --git a/client/components/basic/avatar/UserAvatarEditor.js b/client/components/basic/avatar/UserAvatarEditor.js
index f605bf6f1cea..f35260b44176 100644
--- a/client/components/basic/avatar/UserAvatarEditor.js
+++ b/client/components/basic/avatar/UserAvatarEditor.js
@@ -18,7 +18,7 @@ function UserAvatarSuggestions({ suggestions, setAvatarObj, setNewAvatarSource,
 	</Margins>;
 }
 
-export function UserAvatarEditor({ username, setAvatarObj, suggestions, disabled, userId }) {
+export function UserAvatarEditor({ username, setAvatarObj, suggestions, disabled, etag }) {
 	const t = useTranslation();
 	const [avatarFromUrl, setAvatarFromUrl] = useState('');
 	const [newAvatarSource, setNewAvatarSource] = useState();
@@ -48,7 +48,7 @@ export function UserAvatarEditor({ username, setAvatarObj, suggestions, disabled
 	return <Box display='flex' flexDirection='column' fontScale='p2'>
 		{t('Profile_picture')}
 		<Box display='flex' flexDirection='row' mbs='x4'>
-			<UserAvatar size='x120' url={url} userId={userId} username={username} style={{ objectFit: 'contain' }} mie='x4'/>
+			<UserAvatar size='x120' url={url} username={username} etag={etag} style={{ objectFit: 'contain' }} mie='x4'/>
 			<Box display='flex' flexDirection='column' flexGrow='1' justifyContent='space-between' mis='x4'>
 				<Box display='flex' flexDirection='row' mbs='none'>
 					<Margins inline='x4'>
diff --git a/client/views/directory/UserTab.js b/client/views/directory/UserTab.js
index 21e54f010d75..6aa381e23323 100644
--- a/client/views/directory/UserTab.js
+++ b/client/views/directory/UserTab.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useState, useCallback, useEffect } from 'react';
-import { Box, Table, Flex, Avatar, TextInput, Icon } from '@rocket.chat/fuselage';
+import { Box, Table, Flex, TextInput, Icon } from '@rocket.chat/fuselage';
 import { useMediaQuery } from '@rocket.chat/fuselage-hooks';
 
 import { GenericTable, Th } from '../../components/GenericTable';
@@ -7,10 +7,10 @@ import { useTranslation } from '../../contexts/TranslationContext';
 import { useRoute } from '../../contexts/RouterContext';
 import { usePermission } from '../../contexts/AuthorizationContext';
 import { useQuery } from './hooks';
-import { getUserAvatarURL } from '../../../app/utils/client';
 import { useEndpointData } from '../../hooks/useEndpointData';
 import { useFormatDate } from '../../hooks/useFormatDate';
 import NotAuthorizedPage from '../../admin/NotAuthorizedPage';
+import UserAvatar from '../../components/basic/avatar/UserAvatar';
 
 const style = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };
 
@@ -72,38 +72,34 @@ function UserTable({
 
 	const formatDate = useFormatDate();
 
-	const renderRow = useCallback(({ createdAt, emails, _id, username, name, domain, bio, avatarETag }) => {
-		const avatarUrl = getUserAvatarURL(username, avatarETag);
-
-		return <Table.Row key={_id} onKeyDown={onClick(username)} onClick={onClick(username)} tabIndex={0} role='link' action>
-			<Table.Cell>
-				<Flex.Container>
-					<Box>
-						<Flex.Item>
-							<Avatar size='x40' title={username} url={avatarUrl} />
-						</Flex.Item>
-						<Box style={style} grow={1} mi='x8'>
-							<Box display='flex'>
-								<Box fontScale='p2' style={style}>{name || username}</Box> <Box mi='x4'/> <Box fontScale='p1' color='hint' style={style}>{username}</Box>
-							</Box>
-							<Box fontScale='p1' color='hint' style={style}> {bio} </Box>
+	const renderRow = useCallback(({ createdAt, emails, _id, username, name, domain, bio, avatarETag }) => <Table.Row key={_id} onKeyDown={onClick(username)} onClick={onClick(username)} tabIndex={0} role='link' action>
+		<Table.Cell>
+			<Flex.Container>
+				<Box>
+					<Flex.Item>
+						<UserAvatar size='x40' title={username} username={username} etag={avatarETag} />
+					</Flex.Item>
+					<Box style={style} grow={1} mi='x8'>
+						<Box display='flex'>
+							<Box fontScale='p2' style={style}>{name || username}</Box> <Box mi='x4'/> <Box fontScale='p1' color='hint' style={style}>{username}</Box>
 						</Box>
+						<Box fontScale='p1' color='hint' style={style}> {bio} </Box>
 					</Box>
-				</Flex.Container>
-			</Table.Cell>
-			{mediaQuery && canViewFullOtherUserInfo
+				</Box>
+			</Flex.Container>
+		</Table.Cell>
+		{mediaQuery && canViewFullOtherUserInfo
 			&& <Table.Cell style={style} >
 				{emails && emails[0].address}
 			</Table.Cell>}
-			{federation
+		{federation
 		&& <Table.Cell style={style}>
 			{domain}
 		</Table.Cell>}
-			{mediaQuery && <Table.Cell fontScale='p1' color='hint' style={style}>
-				{formatDate(createdAt)}
-			</Table.Cell>}
-		</Table.Row>;
-	}, [mediaQuery, federation, canViewFullOtherUserInfo, formatDate, onClick]);
+		{mediaQuery && <Table.Cell fontScale='p1' color='hint' style={style}>
+			{formatDate(createdAt)}
+		</Table.Cell>}
+	</Table.Row>, [mediaQuery, federation, canViewFullOtherUserInfo, formatDate, onClick]);
 
 	return <GenericTable FilterComponent={FilterByText} header={header} renderRow={renderRow} results={data.result} total={data.total} setParams={setParams} />;
 }

From 14144e910c54751e8e6d8487c24f2130b87fe0ea Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 14 Jul 2020 00:48:48 -0300
Subject: [PATCH 12/15] Fix UserAvatar usage

---
 app/threads/client/components/ThreadListMessage.js | 4 ++--
 client/components/basic/avatar/UserAvatar.js       | 6 +++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/threads/client/components/ThreadListMessage.js b/app/threads/client/components/ThreadListMessage.js
index 0d3a37f3feb9..edf93297e49d 100644
--- a/app/threads/client/components/ThreadListMessage.js
+++ b/app/threads/client/components/ThreadListMessage.js
@@ -44,13 +44,13 @@ const followStyle = css`
 	}
 `;
 
-export default function ThreadListMessage({ _id, msg, following, username, name, ts, replies, participants, handleFollowButton, unread, mention, all, t = (e) => e, formatDate = (e) => e, tlm, className = [], u: { _id: userId }, ...props }) {
+export default function ThreadListMessage({ _id, msg, following, username, name, ts, replies, participants, handleFollowButton, unread, mention, all, t = (e) => e, formatDate = (e) => e, tlm, className = [], ...props }) {
 	const button = !following ? 'bell-off' : 'bell';
 	const actionLabel = t(!following ? 'Not_Following' : 'Following');
 
 	return <Box rcx-contextual-message pi='x20' pb='x16' pbs='x16' display='flex' {...props} className={[...isIterable(className) ? className : [className], !following && followStyle].filter(Boolean)}>
 		<Container mb='neg-x2'>
-			<UserAvatar userId={userId} rcx-message__avatar size='x36'/>
+			<UserAvatar title={username} username={username} rcx-message__avatar size='x36'/>
 		</Container>
 		<Container width='1px' mb='neg-x4' flexGrow={1}>
 			<Header>
diff --git a/client/components/basic/avatar/UserAvatar.js b/client/components/basic/avatar/UserAvatar.js
index 0d4f3c40cffd..6b30f236a65e 100644
--- a/client/components/basic/avatar/UserAvatar.js
+++ b/client/components/basic/avatar/UserAvatar.js
@@ -2,8 +2,12 @@ import React from 'react';
 import { Avatar } from '@rocket.chat/fuselage';
 
 function UserAvatar({ url, username, etag, ...props }) {
+	// NOW, `username` and `etag` props are enough to determine the whole state of
+	// this component, but it must be as performatic as possible as it will be
+	// rendered many times; and some of the state can be derived at the ancestors.
+	// Ideally, it should be a purely visual component.
 	const avatarUrl = url || `/avatar/${ username }${ etag ? `?etag=${ etag }` : '' }`;
-	return <Avatar rounded url={avatarUrl} title={username} {...props}/>;
+	return <Avatar url={avatarUrl} title={username} {...props}/>;
 }
 
 export default UserAvatar;

From 05c76d289bf0101d5495d4862f0a7b70f9e624c9 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 14 Jul 2020 01:09:02 -0300
Subject: [PATCH 13/15] Remove unused imports

---
 client/admin/users/UserInfo.js   |  3 +--
 client/admin/users/UsersTable.js | 41 +++++++++++++++-----------------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/client/admin/users/UserInfo.js b/client/admin/users/UserInfo.js
index 555df21ff651..1ba3065ebbf4 100644
--- a/client/admin/users/UserInfo.js
+++ b/client/admin/users/UserInfo.js
@@ -1,10 +1,9 @@
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { Box, Avatar, Margins, Chip, Tag } from '@rocket.chat/fuselage';
+import { Box, Margins, Chip, Tag } from '@rocket.chat/fuselage';
 import moment from 'moment';
 
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
 import { useTranslation } from '../../contexts/TranslationContext';
-import { roomTypes } from '../../../app/utils/client';
 import { DateFormat } from '../../../app/lib';
 import { UserInfoActions } from './UserInfoActions';
 import MarkdownText from '../../components/basic/MarkdownText';
diff --git a/client/admin/users/UsersTable.js b/client/admin/users/UsersTable.js
index 224a14e3311e..c99bbcfb589b 100644
--- a/client/admin/users/UsersTable.js
+++ b/client/admin/users/UsersTable.js
@@ -1,13 +1,12 @@
-import { Box, Table, Avatar, TextInput, Icon } from '@rocket.chat/fuselage';
+import { Box, Table, TextInput, Icon } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMediaQuery } from '@rocket.chat/fuselage-hooks';
 import React, { useMemo, useCallback, useState, useEffect } from 'react';
 
+import UserAvatar from '../../components/basic/avatar/UserAvatar';
 import { GenericTable, Th } from '../../components/GenericTable';
 import { useTranslation } from '../../contexts/TranslationContext';
-import { getUserAvatarURL } from '../../../app/utils/client';
 import { useRoute } from '../../contexts/RouterContext';
 import { useEndpointData } from '../../hooks/useEndpointData';
-import UserAvatar from '../../components/basic/avatar/UserAvatar';
 
 const style = { whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' };
 
@@ -79,27 +78,25 @@ export function UsersTable() {
 		<Th key={'status'} direction={sort[1]} active={sort[0] === 'status'} onClick={onHeaderClick} sort='status' w='x100'>{t('Status')}</Th>,
 	].filter(Boolean), [sort, onHeaderClick, t, mediaQuery]);
 
-	const renderRow = useCallback(({ emails, _id, username, name, roles, status, avatarETag }) => {
-		return <Table.Row key={_id} onKeyDown={onClick(_id)} onClick={onClick(_id)} tabIndex={0} role='link' action qa-user-id={_id}>
-			<Table.Cell style={style}>
-				<Box display='flex' alignItems='center'>
-					<UserAvatar size={mediaQuery ? 'x28' : 'x40'} title={username} username={username} etag={avatarETag}/>
-					<Box display='flex' style={style} mi='x8'>
-						<Box display='flex' flexDirection='column' alignSelf='center' style={style}>
-							<Box fontScale='p2' style={style} color='default'>{name || username}</Box>
-							{!mediaQuery && name && <Box fontScale='p1' color='hint' style={style}> {`@${ username }`} </Box>}
-						</Box>
+	const renderRow = useCallback(({ emails, _id, username, name, roles, status, avatarETag }) => <Table.Row key={_id} onKeyDown={onClick(_id)} onClick={onClick(_id)} tabIndex={0} role='link' action qa-user-id={_id}>
+		<Table.Cell style={style}>
+			<Box display='flex' alignItems='center'>
+				<UserAvatar size={mediaQuery ? 'x28' : 'x40'} title={username} username={username} etag={avatarETag}/>
+				<Box display='flex' style={style} mi='x8'>
+					<Box display='flex' flexDirection='column' alignSelf='center' style={style}>
+						<Box fontScale='p2' style={style} color='default'>{name || username}</Box>
+						{!mediaQuery && name && <Box fontScale='p1' color='hint' style={style}> {`@${ username }`} </Box>}
 					</Box>
 				</Box>
-			</Table.Cell>
-			{mediaQuery && <Table.Cell>
-				<Box fontScale='p2' style={style} color='hint'>{ username }</Box> <Box mi='x4'/>
-			</Table.Cell>}
-			<Table.Cell style={style}>{emails && emails.length && emails[0].address}</Table.Cell>
-			{mediaQuery && <Table.Cell style={style}>{roles && roles.join(', ')}</Table.Cell>}
-			<Table.Cell fontScale='p1' color='hint' style={style}>{status}</Table.Cell>
-		</Table.Row>;
-	}, [mediaQuery, onClick]);
+			</Box>
+		</Table.Cell>
+		{mediaQuery && <Table.Cell>
+			<Box fontScale='p2' style={style} color='hint'>{ username }</Box> <Box mi='x4'/>
+		</Table.Cell>}
+		<Table.Cell style={style}>{emails && emails.length && emails[0].address}</Table.Cell>
+		{mediaQuery && <Table.Cell style={style}>{roles && roles.join(', ')}</Table.Cell>}
+		<Table.Cell fontScale='p1' color='hint' style={style}>{status}</Table.Cell>
+	</Table.Row>, [mediaQuery, onClick]);
 
 	return <GenericTable FilterComponent={FilterByText} header={header} renderRow={renderRow} results={data.users} total={data.total} setParams={setParams} params={params} />;
 }

From 083c31465070a07ddaca3950c8ba3cc209b4c132 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 14 Jul 2020 01:17:36 -0300
Subject: [PATCH 14/15] Relax spacing in UserStatusMenu

---
 .../basic/userStatus/UserStatusMenu.js        | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/components/basic/userStatus/UserStatusMenu.js b/client/components/basic/userStatus/UserStatusMenu.js
index 3fac8866c4ec..9dc8816db951 100644
--- a/client/components/basic/userStatus/UserStatusMenu.js
+++ b/client/components/basic/userStatus/UserStatusMenu.js
@@ -2,6 +2,7 @@ import React, { useRef, useCallback, useState, useMemo, useEffect } from 'react'
 import {
 	Button,
 	PositionAnimated,
+	Margins,
 	Options,
 	useCursor,
 	Box,
@@ -21,12 +22,21 @@ const UserStatusMenu = ({
 
 	const [status, setStatus] = useState(initialStatus);
 
-	const options = useMemo(() => [
-		['online', <Box display='flex' flexDirection='row' alignItems='center'><UserStatus status='online'/>{t('Online')}</Box>],
-		['busy', <Box display='flex' flexDirection='row' alignItems='center'><UserStatus status='busy'/>{t('Busy')}</Box>],
-		['away', <Box display='flex' flexDirection='row' alignItems='center'><UserStatus status='away'/>{t('Away')}</Box>],
-		['offline', <Box display='flex' flexDirection='row' alignItems='center'><UserStatus status='offline'/>{t('Invisible')}</Box>],
-	], [t]);
+	const options = useMemo(() => {
+		const renderOption = (status, label) => <Box display='flex' flexDirection='row' alignItems='center'>
+			<Margins inlineEnd='x8'>
+				<UserStatus status={status} />
+			</Margins>
+			{label}
+		</Box>;
+
+		return [
+			['online', renderOption('online', t('Online'))],
+			['busy', renderOption('busy', t('Busy'))],
+			['away', renderOption('away', t('Away'))],
+			['offline', renderOption('offline', t('Invisible'))],
+		];
+	}, [t]);
 
 	const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] = useCursor(-1, options, ([selected], [, hide]) => {
 		setStatus(selected);

From 234d56ad33ce561b6b64ef34d8bb342a75b25531 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 14 Jul 2020 01:47:20 -0300
Subject: [PATCH 15/15] Harden layout positioning in AccountProfileForm

---
 client/account/AccountProfileForm.js | 36 +++++++++++++++++-----------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/client/account/AccountProfileForm.js b/client/account/AccountProfileForm.js
index a72197a7b1dc..5965e50a30e0 100644
--- a/client/account/AccountProfileForm.js
+++ b/client/account/AccountProfileForm.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useEffect, useState } from 'react';
-import { Field, FieldGroup, TextInput, TextAreaInput, Box, Icon, AnimatedVisibility, PasswordInput, Button, Grid } from '@rocket.chat/fuselage';
+import { Field, FieldGroup, TextInput, TextAreaInput, Box, Icon, AnimatedVisibility, PasswordInput, Button, Grid, Margins } from '@rocket.chat/fuselage';
 import { useDebouncedCallback, useSafely } from '@rocket.chat/fuselage-hooks';
 
 import { useTranslation } from '../contexts/TranslationContext';
@@ -122,7 +122,11 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 		onSaveStateChange(canSave);
 	}, [canSave, onSaveStateChange]);
 
-	return <FieldGroup is='form' autoComplete='off' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
+	const handleSubmit = useCallback((e) => {
+		e.preventDefault();
+	}, []);
+
+	return <FieldGroup is='form' autoComplete='off' onSubmit={handleSubmit} {...props}>
 		{useMemo(() => <Field>
 			<UserAvatarEditor etag={user.avatarETag} username={username} setAvatarObj={handleAvatar} disabled={!allowUserAvatarChange} suggestions={avatarSuggestions}/>
 		</Field>, [username, handleAvatar, allowUserAvatarChange, avatarSuggestions, user.avatarETag])}
@@ -184,9 +188,11 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 							</Field.Error>
 						</Field>, [t, email, handleEmail, verified, allowEmailChange, emailError])}
 						{useMemo(() => !verified && <Field>
-							<Button disabled={email !== previousEmail} onClick={handleSendConfirmationEmail}>
-								{t('Resend_verification_email')}
-							</Button>
+							<Margins blockEnd='x28'>
+								<Button disabled={email !== previousEmail} onClick={handleSendConfirmationEmail}>
+									{t('Resend_verification_email')}
+								</Button>
+							</Margins>
 						</Field>, [verified, t, email, previousEmail, handleSendConfirmationEmail])}
 					</FieldGroup>
 				</Grid.Item>
@@ -198,15 +204,17 @@ export default function AccountProfileForm({ values, handlers, user, settings, o
 								<PasswordInput autoComplete='off' disabled={!allowPasswordChange} error={passwordError} flexGrow={1} value={password} onChange={handlePassword} addon={<Icon name='key' size='x20'/>}/>
 							</Field.Row>
 						</Field>, [t, password, handlePassword, passwordError, allowPasswordChange])}
-						{useMemo(() => <AnimatedVisibility visibility={password ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN }><Field>
-							<Field.Label>{t('Confirm_password')}</Field.Label>
-							<Field.Row>
-								<PasswordInput autoComplete='off' error={passwordError} flexGrow={1} value={confirmationPassword} onChange={handleConfirmationPassword} addon={<Icon name='key' size='x20'/>}/>
-							</Field.Row>
-							{ passwordError && <Field.Error>
-								{passwordError}
-							</Field.Error> }
-						</Field></AnimatedVisibility>, [t, confirmationPassword, handleConfirmationPassword, password, passwordError])}
+						{useMemo(() => <Field>
+							<AnimatedVisibility visibility={password ? AnimatedVisibility.VISIBLE : AnimatedVisibility.HIDDEN }>
+								<Field.Label>{t('Confirm_password')}</Field.Label>
+								<Field.Row>
+									<PasswordInput autoComplete='off' error={passwordError} flexGrow={1} value={confirmationPassword} onChange={handleConfirmationPassword} addon={<Icon name='key' size='x20'/>}/>
+								</Field.Row>
+								{ passwordError && <Field.Error>
+									{passwordError}
+								</Field.Error> }
+							</AnimatedVisibility>
+						</Field>, [t, confirmationPassword, handleConfirmationPassword, password, passwordError])}
 					</FieldGroup>
 				</Grid.Item>
 			</Grid>