Pony.fm/public/templates/account/settings.html

<div>
	<h1>Account Settings</h1>
	<form ng-submit="updateAccount()" class="pfm-form account-settings-form">
		<ul class="toolbar">
			<li>
				<button type="submit" class="btn" ng-class="{disabled: !isDirty || isSaving, 'btn-primary': isDirty}">
					Save Changes
					<i ng-show="isSaving" class="icon-cog icon-spin icon-large"></i>
				</button>
			</li>
		</ul>
		<div class="stretch-to-bottom">
			<div class="row-fluid">
				<div class="form-row span6" ng-class="{'has-error': errors.display_name != null}">
					<label for="sync_names" class="strong"><input ng-disabled="isSaving" ng-change="touchModel();" id="sync_names" type="checkbox" ng-model="settings.sync_names" /> Sync my MLP Forums display name with Pony.fm</label>
					<input type="text" ng-disabled="isSaving" ng-change="touchModel()" ng-show="!settings.sync_names" placeholder="Display Name" id="display_name" ng-model="settings.display_name" />
					<div ng-show="settings.sync_names" class="alert alert-info">Your current MLP Forums display name is <strong>{{settings.mlpforums_name}}</strong></div>
					<div class="error">{{errors.display_name}}</div>
				</div>
				<div class="form-row span6">
					<label for="can_see_explicit_content"><input ng-change="touchModel()" ng-disabled="isLoading" id="can_see_explicit_content" type="checkbox" ng-model="settings.can_see_explicit_content" /> Can See Explicit Content</label>
				</div>
			</div>
			<div class="row-fluid">
				<div class="form-row span6" ng-class="{'has-error': errors.bio != null}">
					<label class="strong" for="bio">Bio</label>
					<textarea id="bio" placeholder="bio (optional)" ng-model="settings.bio" ng-disabled="isLoading" ng-change="touchModel()"></textarea>
					<div class="error">{{errors.description}}</div>
				</div>
				<div class="form-row span6" ng-class="{'has-error': errors.avatar != null || errors.gravatar != null}">
					<label for="uses_gravatar">
						<input ng-change="touchModel()" ng-disabled="isLoading" id="uses_gravatar" type="checkbox" ng-model="settings.uses_gravatar" /> Use Gravatar
					</label>
					<div ng-show="!settings.uses_gravatar">
						<pfm-image-upload set-image="setAvatar" image="settings.avatar_url" />
					</div>
					<input type="text" ng-disabled="isSaving" ng-change="touchModel()" ng-show="settings.uses_gravatar" placeholder="Gravatar Email" ng-model="settings.gravatar" />
					<div class="error" ng-show="errors.avatar != null">{{errors.avatar}}</div>
					<div class="error" ng-show="errors.gravatar != null">{{errors.gravatar}}</div>
				</div>
			</div>
		</div>
	</form>
</div>