Rocket.Chat/packages/rocketchat-ui-account/client/accountProfile.html

<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">
				<svg class="rc-select-avatar__upload-icon">
					<use xlink:href="#icon-{{name.toLowerCase}}"></use>
				</svg>
			</div>
		{{/if}}
	</div>
</template>
<template name="accountProfile">
	<section class="preferences-page">
		<header class="preferences-page__header">
			{{> burger}}
			<h2 style="flex: 1 1; white-space: nowrap;">{{_ "My Profile"}}</h2>
			<div class="content" style="text-align: end; max-width: 649px;  flex: 1 1 100%">
				<button class="rc-button rc-button--primary" name="send" type="submit" data-button="create" form="profile" {{canSave 'disabled'}}>{{_ "Save_changes"}}</button>
			</div>
			<div style="flex: 1 1;"></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}}
										{{#if suggestions.ready}}
											<div class="rc-select-avatar__list">
												<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-initials" aria-label="Username initials">
													{{> avatar username=initialsUsername }}
												</div>
												<div class="rc-select-avatar__list-item rc-tooltip js-select-avatar-upload" aria-label="upload file">
													<label class="rc-select-avatar__upload-label avatar" for="upload-avatar">
														<svg class="rc-select-avatar__upload-icon">
															<use xlink:href="#icon-upload"></use>
														</svg>
													</label>
													<input type="file" name="" value="" id="upload-avatar" style="display:none;">
												</div>
												{{#each service in services}}
													{{ > avatarService service}}
												{{/each}}
											</div>
										{{else}}
											<div class="rc-select-avatar__loading">
												{{_ "Loading_suggestion"}}
											</div>
										{{/if}}
									{{/if}}
							</div>
						</div>
						<div class="rc-form-group rc-grid">
							<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" value="{{realname}}" >
									</div>
								</label>
							</div>
							{{# 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">
											<svg class="rc-input__icon-svg rc-input__icon-svg--at">
												<use xlink:href="#icon-at"></use>
											</svg>
										</div>
										<input type="text" class="rc-input__element" name="username" id="username" 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">
											<svg class="rc-input__error-icon-svg rc-input__error-icon--warning">
												<use xlink:href="#icon-warning"></use>
											</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=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="Type channel name" value="{{email}}" autocomplete="false" {{ifThenElse canChange '' 'disabled'}}>
										</div>
									</label>
									{{# unless canChange}}
										<div class="rc-input__description">{{_ 'Email_Change_Disabled'}}</div>
									{{/unless}}
							</div>
							{{/with}}
							<div class="rc-input 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="Type channel name"  autocomplete="new-password" {{ifThenElse canChange '' 'disabled'}}>
										</div>
									</label>
									{{# unless canChange}}
										<div class="rc-input__description">{{_ 'Password_Change_Disabled'}}</div>
									{{/unless}}
								{{/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 class="rocket-form">
				<button class="button" id="resend-verification-email">{{_ "Resend_verification_email"}}</button>
			</div> -->
		</div>
	</section>
</template>