<div class="alertBox">
</div>
<form id="userCP">
    <div class="table">
        <div class="tableCell">
            <span style="display:flex; margin: 0.25em;">Username</span>
            <input type="text" name="username" id="username" />
        </div>
        <div class="tableCell">
            <span style="display:flex; margin: 0.25em;">Banner Color</span>
            <input type="color" name="bannercolor" id="bannercolor" />
        </div>
    </div>
    <div class="table">
        <div class="tableCell">
            <span style="display:flex; margin: 0.25em;">New Password</span>
            <input type="password" name="updatedpassword" id="updatedpassword"/>
        </div>
        <div class="table">
            <span style="display:flex; margin: 0.25em;">Repeat New Password</span>
            <input type="password" name="updatedpasswordrepeat" id="updatedpasswordrepeat" />
        </div>
    </div>

    <div id="userAvatar" style="margin: 1em 0;">
    </div>
    <span style="display:flex; margin: 0.25em;">Avatar URL</span>
    <input style="width: 35%;" type="text" id="avatarurl" name="avatarurl" /><br />
    <input id="updateprofile" type="submit" name="submit" value="Update" />
</form>

<script>
$.getJSON("_userinfo", function(result) {
  $("#userAvatar").css('background-image', "".concat("url(", result.user['avatarURL'], ")"));
  $("#username").val(result.user.username);
  $("#bannercolor").val(result.profile.bannerColor);
  $("#avatarurl").val(result.user.avatarURL);

});
$('#updateprofile').click(function (e) {

    if (user.id == 0)
        return false;
  e.preventDefault();
  $.getJSON("_updateuser",
  {
    username : $('#username').val(),
    bannercolor : $('#bannercolor').val(),
    avatarurl : $('#avatarurl').val(),
    updatedpassword  : $('#updatedpassword').val(),
    updatedpasswordrepeat: $('#updatedpasswordrepeat').val()
  },

  function(result) {
    if (result["errorCode"] == 0)
      window.location.replace(result["destination"]);
    else {
      showErrorMessage(result["errorCode"]);
    }
  });


});
</script>