easyctf-2017/web/pages/settings.html
2016-03-03 18:27:10 -06:00

192 lines
No EOL
5.5 KiB
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>