287 lines
11 KiB
HTML
287 lines
11 KiB
HTML
{% extends 'base_AdminLTE.html' %}
|
|
|
|
{% block title %}Docklet | Information Modify{% endblock %}
|
|
|
|
{% block css_src %}
|
|
<link href="//cdn.bootcss.com/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
|
|
<link href="/static/dist/css/modalconfig.css" rel="stylesheet">
|
|
{% endblock %}
|
|
|
|
{% block panel_title %}Detail for User Infomation{% endblock %}
|
|
|
|
{% block panel_list %}
|
|
<ol class="breadcrumb">
|
|
<li>
|
|
<a href="/dashboard/">Home</a>
|
|
</li>
|
|
<li class="active">
|
|
<strong>User Info</strong>
|
|
</li>
|
|
</ol>
|
|
{% endblock %}
|
|
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<div class="box box-info">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">User Info</h3>
|
|
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<table class="table table-bordered">
|
|
<tr>
|
|
<td>User Name</td>
|
|
<td>{{ info['username'] }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nickname</td>
|
|
<td><a href="#" id="nickname" data-type="text" data-pk="1" data-url="/user/info/" data-title="Enter nickname">{{ info['nickname'] }}</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Description</td>
|
|
<td><a href="#" id="description" data-type="text" data-pk="1" data-url="/user/info/" data-title="Enter description">{{ info['description'] }}</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Truename</td>
|
|
<td>{{ info['truename'] }}</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Status</td>
|
|
<td>{{ info['status'] }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-mail</td>
|
|
<td><a href="#" id="e_mail" data-type="text" data-pk="1" data-url="/user/info/" data-title="Enter e-mail">{{ info['e_mail'] }}</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Department</td>
|
|
<td><a href="#" id="department" data-type="text" data-pk="1" data-url="/user/info/" data-title="Enter department">{{ info['department'] }}</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>ID Number</td>
|
|
<td>{{ info['student_number'] }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Telephone</td>
|
|
<td><a href="#" id="tel" data-type="text" data-pk="1" data-url="/user/info/" data-title="Enter telephone number">{{ info['tel'] }}</a></td>
|
|
</tr>
|
|
{% if info['auth_method'] == 'local' %}
|
|
<tr>
|
|
<td>password</td>
|
|
<td>
|
|
<div class="col-md-12" >
|
|
<button type="button" class="btn btn-primary btn-xs btn-block" data-toggle="modal" data-target="#ChpasswordModal"> Change Password</button>
|
|
</div>
|
|
<div class="modal inmodal" id="ChpasswordModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content animated fadeIn">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
|
<i class="fa fa-laptop modal-icon"></i>
|
|
<h4 class="modal-title">Change Password</h4>
|
|
<small class="font-bold">modify your password</small>
|
|
</div>
|
|
<div class="modal-body">
|
|
|
|
<form action="/user/info/" method="POST" id="ChpasswordForm">
|
|
<div class="form-group">
|
|
<label>Old password</label>
|
|
<input type = "password" placeholder="Enter old password" class="form-control" name="o_password" id="o_password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>New password</label>
|
|
<input type = "password" placeholder="Enter new password" class="form-control" name="n_password" id = "n_password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Verify</label>
|
|
<input type = "password" placeholder="Enter new password again" class="form-control" name="v_password" id = "v_password">
|
|
</div>
|
|
<p style="color:red" id="notCorrectFlag"></p>
|
|
</form>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary" onClick="javascript:sendChpassword();">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
</tr>
|
|
{% endif %}
|
|
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="col-lg-7">
|
|
<div class="ibox float-e-margins">
|
|
<div class="ibox-title back-change">
|
|
<h5>Avatar <small>Upload your avatar</small></h5>
|
|
<div class="ibox-tools">
|
|
<a class="collapse-link">
|
|
<i class="fa fa-chevron-up"></i>
|
|
</a>
|
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
<i class="fa fa-wrench"></i>
|
|
</a>
|
|
<a class="close-link">
|
|
<i class="fa fa-times"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="ibox-content">
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="image-crop">
|
|
<img src="/static/img/profile.png">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h4>Preview image</h4>
|
|
<div class="img-preview img-preview-sm"></div>
|
|
<h4>Comon method</h4>
|
|
<p>
|
|
You can upload new image to crop container and easy upload as your avatar
|
|
</p>
|
|
<div class="btn-group">
|
|
<label title="Upload image file" for="inputImage" class="btn btn-primary">
|
|
<input type="file" accept="image/*" name="file" id="inputImage" class="hide">
|
|
Upload new image
|
|
</label>
|
|
<label title="setavatar" id="download" class="btn btn-primary">Set as avatar</label>
|
|
</div>
|
|
<h4>Other method</h4>
|
|
<p>
|
|
Some methods to process the image
|
|
</p>
|
|
<div class="btn-group">
|
|
<button class="btn btn-white" id="zoomIn" type="button">Zoom In</button>
|
|
<button class="btn btn-white" id="zoomOut" type="button">Zoom Out</button>
|
|
<button class="btn btn-white" id="rotateLeft" type="button">Rotate Left</button>
|
|
<button class="btn btn-white" id="rotateRight" type="button">Rotate Right</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block script_src %}
|
|
<script src="//cdn.bootcss.com/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$.fn.editable.defaults.mode = 'popup';
|
|
$('#nickname').editable();
|
|
$('#description').editable();
|
|
$('#department').editable();
|
|
$('#e_mail').editable();
|
|
$('#tel').editable();
|
|
//var $image = $(".image-crop > img")
|
|
//$($image).cropper({
|
|
// aspectRatio: 1,
|
|
// preview: ".img-preview",
|
|
// done: function(data) {
|
|
// Output the result data for cropping image.
|
|
// }
|
|
//});
|
|
/*
|
|
var $inputImage = $("#inputImage");
|
|
if (window.FileReader) {
|
|
$inputImage.change(function() {
|
|
var fileReader = new FileReader(),
|
|
files = this.files,
|
|
file;
|
|
|
|
if (!files.length) {
|
|
return;
|
|
}
|
|
|
|
file = files[0];
|
|
|
|
if (/^image\/\w+$/.test(file.type)) {
|
|
fileReader.readAsDataURL(file);
|
|
fileReader.onload = function () {
|
|
$inputImage.val("");
|
|
$image.cropper("reset", true).cropper("replace", this.result);
|
|
};
|
|
} else {
|
|
showMessage("Please choose an image file.");
|
|
}
|
|
});
|
|
} else {
|
|
$inputImage.addClass("hide");
|
|
}
|
|
|
|
$("#download").click(function() {
|
|
window.open($image.cropper("getDataURL"));
|
|
});
|
|
|
|
$("#zoomIn").click(function() {
|
|
$image.cropper("zoom", 0.1);
|
|
});
|
|
|
|
$("#zoomOut").click(function() {
|
|
$image.cropper("zoom", -0.1);
|
|
});
|
|
|
|
$("#rotateLeft").click(function() {
|
|
$image.cropper("rotate", 45);
|
|
});
|
|
|
|
$("#rotateRight").click(function() {
|
|
$image.cropper("rotate", -45);
|
|
});
|
|
*/
|
|
|
|
});
|
|
function sendChpassword(){
|
|
if ($("#n_password").val() == $("#v_password").val())
|
|
{
|
|
$.post("/user/info/",
|
|
{
|
|
name: 'password',
|
|
value: $("#n_password").val(),
|
|
old_value : $("#o_password").val()
|
|
},
|
|
function(data,status){
|
|
var result = eval("("+data+")");
|
|
if (result.success == 'true')
|
|
{
|
|
location.reload();
|
|
}
|
|
else
|
|
{
|
|
$("#notCorrectFlag").html("Cannot modify your password");
|
|
}
|
|
});
|
|
}
|
|
else
|
|
{
|
|
$("#notCorrectFlag").html("Two passwords are not identical");
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
{% endblock %}
|