nodebb/public/templates/accountedit.tpl

<div class="well">

   
 
	<!-- Change Picture Modal -->
	<div id="change-picture-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	    <h3 id="myModalLabel">Change Picture</h3>
	  </div>
	  <div class="modal-body">

	    <div id="gravatar-box">
		    <img id="user-gravatar-picture" src="" class="img-polaroid user-profile-picture">
		    <span class="user-picture-label">Gravatar</span>
   		    <i class='icon-ok icon-2x'></i>
	    </div>
	    <br/>
	    <div id="uploaded-box">
		    <img id="user-uploaded-picture" src="" class="img-polaroid user-profile-picture">
		    <span class="user-picture-label">Uploaded picture</span>
		    <i class='icon-ok icon-2x'></i>
	    </div>
	    
	    <a id="uploadPictureBtn" href="#">Upload new picture</a>
	    
	  </div>
	  <div class="modal-footer">
	    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
	    <button id="savePictureChangesBtn" class="btn btn-primary">Save changes</button>
	  </div>
	</div>
	

	<!-- Upload picture modal-->
	<div id="upload-picture-modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	    <h3 id="myModalLabel">Upload Picture</h3>
	  </div>
	  <div class="modal-body">
	    
	    <form id="uploadForm" action="/users/uploadpicture" method="post" enctype="multipart/form-data">
	    	<input id="userPhotoInput" type="file" name="userPhoto" >
	    </form>
	    
	    <div id="upload-progress-box" class="progress progress-striped active hide">
			<div id="upload-progress-bar" class="bar" style="width: 0%;"></div>
		</div>
	    
	    <div id="alert-status" class="alert hide"></div>
   		<div id="alert-success" class="alert alert-success hide"></div>
   		<div id="alert-error" class="alert alert-error hide"></div>
   	
	  </div>
	  <div class="modal-footer">
	    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
	    <button id="pictureUploadSubmitBtn" class="btn btn-primary">Upload Picture</button>
	  </div>
	</div>
    
    <div class="account-username-box">
		<span class="account-username">
			<a href="/users/{username}">{username}</a> >
			<a href="/users/{username}/edit">edit</a>
		</span>
		<div class="account-sub-links inline-block pull-right">
			<span id="friendsLink" class="pull-right"><a href="/users/{username}/friends">friends</a></span>
			<span id="editLink" class="pull-right"><a href="/users/{username}/edit">edit</a></span>
		</div>
	</div>

	<div class="row-fluid">
		<div class="span3" style="text-align: center; margin-bottom:20px;">
		    <div class="account-picture-block text-center">
		        <img id="user-current-picture" class="user-profile-picture" src="{picture}" /><br/>
		        <a id="changePictureBtn" href="#" class="btn btn-primary">change picture</a>
		    </div>
		</div>
	      
		<div class="span9">
		     <div class="inline-block">
				<form class='form-horizontal'>
				<div class="control-group">
				    <label class="control-label" for="inputEmail">Email</label>
				    <div class="controls">
				      <input type="text" id="inputEmail" placeholder="Email" value="{email}">
				    </div>
				  </div>
				  
				  <div class="control-group">
				    <label class="control-label" for="inputFullname">Full Name</label>
				    <div class="controls">
				      <input type="text" id="inputFullname" placeholder="Full Name" value="{fullname}">
				    </div>
				  </div>
				  
				   <div class="control-group">
				    <label class="control-label" for="inputWebsite">Website</label>
				    <div class="controls">
				      <input type="text" id="inputWebsite" placeholder="http://website.com" value="{website}">
				    </div>
				  </div>
				 
				  <div class="control-group">
				    <label class="control-label" for="inputLocation">Location</label>
				    <div class="controls">
				      <input type="text" id="inputLocation" placeholder="Location" value="{location}">
				    </div>
				  </div>
				  
				  <div class="control-group">
				    <label class="control-label" for="inputBirthday">Birthday</label>
				    <div class="controls">
				      <input type="date" id="inputBirthday" placeholder="mm/dd/yyyy" value="{birthday}">
				    </div>
				  </div>

				  <div class="control-group">
				    <label class="control-label" for="inputSignature">Signature</label>
				    <div class="controls">
				      <textarea id="inputSignature" placeholder="max 150 chars" rows="5">{signature}</textarea>
				    </div>
				  </div>
				 
				 <input type="hidden" id="inputUID" value="{uid}">
				 
				  <div class="form-actions">
				    <a id="submitBtn" href="#" class="btn btn-primary">Save changes</a>
				    <a href="/users/{username}" class="btn">Cancel</a>
				  </div>
				  
				</form>
		    </div>
	    </div>
    </div>  
</div>

<input type="hidden" template-variable="gravatarpicture" value="{gravatarpicture}" />
<input type="hidden" template-variable="uploadedpicture" value="{uploadedpicture}" />

<script type="text/javascript" src="/src/forum/accountedit.js"></script>