easyctf-2017/web/pages/settings.html

<style>
	.btn-file {
		position: relative;
		overflow: hidden;
	}
	.btn-file input[type=file] {
		position: absolute;
		top: 0;
		right: 0;
		min-width: 100%;
		min-height: 100%;
		font-size: 100px;
		text-align: right;
		filter: alpha(opacity=0);
		opacity: 0;
		background: red;
		cursor: inherit;
		display: block;
	}
</style>

<div class="row">
	<div class="col-sm-3 col-xs-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h4 class="panel-title">Account Settings</h4>
			</div>
			<div class="list-group">
				<a href="#profile" class="list-group-item" data-scroll>Profile</a>
				<a href="#email" class="list-group-item" data-scroll>Email</a>
				<a href="#security" class="list-group-item" data-scroll>Security</a>
			</div>
		</div>
	</div>
	<div class="col-sm-9 col-xs-12">
		<section id="profile">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">Public Profile</h4>
				</div>
				<div class="panel-body">
					<label>Profile Picture</label>
					<div class="row">
						<div class="col-sm-2">
							<img src="/api/user/avatar/{{ user.uid }}?{{ timestamp }}" id="avatar" style="width:100%;max-height:256px;" />
						</div>
						<div class="col-sm-10">
							<div class="row">
								<div class="btn-group">
									<div class="btn btn-primary btn-file" id="file_upload">
										<i class="fa fa-fw fa-upload"></i> Upload new picture
										<input type="file" name="file" id="file" accept="image/*" />
									</div>
									<a class="btn btn-default" href="javascript:remove_profile_picture();">
										<i class="fa fa-fw fa-trash"></i> Remove profile picture
									</a>
								</div>
							</div>
							<div class="row">
								<p><i>If you remove your picture, an automatically generated <a href="http://en.wikipedia.org/wiki/Identicon" target="_blank">identicon</a> will be used.</i></p>
							</div1>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section id="email">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">Email</h4>
				</div>
				<div class="panel-body">
					<p>Hi.</p>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">Email Preferences</h4>
				</div>
				<div class="panel-body">
					<p>Hi.</p>
				</div>
			</div>
		</section>
		<section id="security">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">Change Password</h4>
				</div>
				<div class="panel-body">
					<p>Hi.</p>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">Active Sessions</h4>
				</div>
				<div class="panel-body">
					<p>Hi.</p>
				</div>
			</div>
		</section>
	</div>
</div>

<script type="text/javascript">
	smoothScroll.init({
		speed: 480,
		easing: "easeOutCubic",
		offset: $("#navbar").outerHeight(),
		updateURL: false
	});
	var dataURItoBlob = function(dataURI) {
		var byteString = atob(dataURI.split(",")[1]);
		var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
		var ab = new ArrayBuffer(byteString.length);
		var ia = new Uint8Array(ab);
		for (var i = 0; i < byteString.length; i++) {
			ia[i] = byteString.charCodeAt(i);
		}
		var blob = new Blob([ ab ], { type: mimeString });
		return blob;
	}
	var MAX_SIZE = 256;
	var uploadListener = function(e) {
		try {
			$("#file_upload").attr("disabled", "disabled");
			$("#file_upload").html("<i class='fa fa-fw fa-circle-o-notch fa-spin'></i> Uploading...");
			var file = e.target.files[0];
			var reader = new FileReader();
			reader.onload = (function(_file) {
				return function(progress) {
					var img = document.createElement("img");
					img.src = progress.target.result;
					var width = img.width;
					var height = img.height;
					
					if (width > height) {
						if (width > MAX_SIZE) {
							height *= MAX_SIZE / width;
							width = MAX_SIZE;
						}
					} else {
						if (height > MAX_SIZE) {
							width *= MAX_SIZE / height;
							height = MAX_SIZE;
						}
					}
					img.cwidth = width;
					img.cheight = height;

					var data = new FormData();
					data.append("file", dataURItoBlob(img.src));
					data.append("csrf_token", $.cookie("csrf_token"));
					$.ajax({
						type: "POST",
						url: "/api/user/avatar/upload",
						data: data,
						processData: false,
						contentType: false,
					}).done(function(result) {
						if (result["success"] == 1) {
							$("#file_upload").removeClass("btn-primary");
							$("#file_upload").addClass("btn-success");
							$("#file_upload").html("<i class='fa fa-fw fa-check'></i> Done! Reloading...");
							location.reload(true);
						}
					}).fail(function() {
						$("#file_upload").removeClass("btn-primary");
						$("#file_upload").addClass("btn-danger");
						$("#file_upload").html("<i class='fa fa-fw fa-ban'></i> Error. Reloading...");
						location.reload(true);
					});
				};
			})(file);
			reader.readAsDataURL(file);
		} catch (e) {
			console.log(e);
			$("#file_upload").removeClass("btn-primary");
			$("#file_upload").addClass("btn-danger");
			$("#file_upload").html("<i class='fa fa-fw fa-ban'></i> Error. Reloading...");
			location.reload(true);
		}
	};
	$(document).ready(function() {
		if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
			console.log("Your browser doesn't support file upload.");
		} else {
			document.getElementById("file").addEventListener("change", uploadListener, false);
		};
	});
</script>