{{template "member/top.html" .}}
<div class="m-b-md"> <h3 class="m-b-none">{{msg . "username"}}</h3></div>

<div class="row">

<div class="col-sm-8">
	<form id="formData">
		<section class="panel panel-default">
			<div class="panel-body">
  				<div class="alert alert-danger" id="usernameMsg" style="display: none"></div>
				<div class="form-group">
					<label>{{msg . "username"}}</label>
					<input type="text" class="form-control" id="username"
				    	value="{{.userInfo.Username}}"
				    	data-rules='[
				    		{rule: "required", msg: "inputUsername"}, 
				    		{rule: "noSpecialChars", msg: "noSpecialChars"},
				    		{rule: "minLength", data: 4, msg: "minLength", msgData: 4}
				    		]'
				    	data-msg_target="#usernameMsg"
				    />
  					{{msg . "setUsernameTips" .userInfo.Email}}
				</div>
			</div>
			<footer class="panel-footer text-right bg-light lter">
			    <button type="submit" id="usernameBtn" class="btn btn-success">{{msg . "submit"}}</button>
			</footer>
		</section>
	</form>
</div>

</div>

{{template "member/footer.html" .}}
<script>
$(function() {
//-------------
var usernameVd = new vd.init("#formData");
$("#usernameBtn").click(function(e) {
	e.preventDefault();
	if(!usernameVd.valid()) {
		return;
	}
	var username = $("#username").val();
	post("/user/updateUsername", {username: username}, function(ret) {
		if(ret.Ok) {
			showAlert('#usernameMsg', getMsg("updateUsernameSuccess"), "success");
		} else {
			showAlert('#usernameMsg', ret.Msg || getMsg("usernameIsExisted"), "danger");
		}
	}, "#usernameBtn");
	
});
});
</script>

{{template "member/end.html" .}}