????
Your IP : 216.73.216.168
<% layout('./layouts/userLayout.eta') %>
<div class="content">
<div class="page-inner">
<div class="page-header">
<h4 class="page-title">Thông tin tài khoản</h4>
<ul class="breadcrumbs">
<li class="nav-home"><a href="/"><i class="flaticon-home"></i></a></li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-item"><a href="/main">Giao diện chính</a></li>
<li class="separator"><i class="flaticon-right-arrow"></i></li>
<li class="nav-item">Thông tin tài khoản</li>
</ul>
</div>
<div class="row">
<div class="col-md-4">
<div class="card card-profile">
<div class="card-header bg-info">
<div class="profile-picture">
<div class="avatar avatar-xl"><img class="avatar-img rounded-circle" src="/avatar" alt="Ảnh đại diện">
</div>
</div>
</div>
<div class="card-body">
<div class="user-profile text-center">
<label class="btn btn-warning btn-sm">
<i class="fas fa-pencil-alt"></i> Thay ảnh đại diện <input id="avatar-input" type="file"
accept="image/*" style="display: none;">
</label>
<div class="name"><%= it.User.FullName %></div>
</div>
</div>
<div class="card-footer"></div>
</div>
</div>
<div class="col-md-8">
<div class="card card-with-nav">
<div class="card-header">
<div class="row row-nav-line">
<ul class="nav nav-tabs nav-line nav-primary" role="tablist">
<li class="nav-item">
<a id="link-authTab" class="nav-link active" href="#authTab" data-toggle="pill" role="tab"
aria-controls="authTab">Thông
tin đăng nhập</a>
</li>
<li class="nav-item">
<a id="link-detailTab" class="nav-link" href="#detailTab" data-toggle="pill" role="tab"
aria-controls="detailTab">Thông
tin Cá nhân</a>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div id="authTab" class="tab-pane fade show active" role="tabpanel" aria-labelledby="link-authTab">
<form id="authForm" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default">
<label class="fw-bold">Tên đăng nhập</label>
<input class="form-control" type="text" name="username" value="<%= it.User.Username %>" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default">
<label class="fw-bold" for="cur-pass">Mật khẩu cũ</label>
<input id="cur-pass" class="form-control" type="password" name="curpassword"
placeholder="Nhập mật khẩu cũ" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default">
<label class="fw-bold" for="new-pass">Mật khẩu mới</label>
<input id="new-pass" class="form-control" type="password" name="newpassword"
placeholder="Nhập mật khẩu mới" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-default">
<label class="fw-bold" for="confirm-pass">Xác nhận mật khẩu mới</label>
<input id="confirm-pass" class="form-control" type="password" name="confirmpassword"
placeholder="Nhập lại mật khẩu mới" title="Mật khẩu xác nhận không trùng khớp">
</div>
</div>
</div>
<div class="text-right">
<button id="changePassBtn" class="btn btn-round btn-secondary" type="submit"><i
class="fa fa-key"></i> Đổi mật khẩu</button>
</div>
</form>
</div>
<div id="detailTab" class="tab-pane fade" role="tabpanel" aria-labelledby="link-detailTab">
<form id="detailForm" action="/profile/edit" method="POST" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default">
<label class="fw-bold">Họ tên</label>
<input class="form-control" type="text" name="fullname" placeholder="Nhập họ tên..."
value="<%= it.User.FullName %>" title="Họ tên không được bỏ trống" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-check form-check-inline">
<!-- <label class="placeholder"><b>Giới tính</b></label> -->
<div class="custom-control custom-radio">
<% if (it.User.Gender) { %>
<input id="male-check" class="custom-control-input" name="gender" type="radio" value="1" checked="checked">
<% } else { %>
<input id="male-check" class="custom-control-input" name="gender" type="radio" value="1">
<% } %>
<label class="mr-5 custom-control-label" for="male-check">Nam</label>
</div>
<div class="custom-control custom-radio">
<% if (it.User.Gender) { %>
<input id="female-check" class="custom-control-input" name="gender" type="radio" value="0">
<% } else { %>
<input id="female-check" class="custom-control-input" name="gender" type="radio" value="0"
checked="checked" >
<% } %>
<label class="custom-control-label" for="female-check">Nữ</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group form-group-default">
<label class="fw-bold">Ngày sinh</label>
<input id="birthday" class="form-control" type="text" name="birthday"
placeholder="Nhập ngày sinh (dd/mm/yyyy)..." value="<%= it.User.Birthday && new Date(it.User.Birthday).toLocaleDateString('vi-VN') %>">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-default">
<label class="fw-bold">Số thẻ căn cước, CMND hoặc hộ chiếu</label>
<input class="form-control" type="text" name="idnumber"
placeholder="Nhập số thẻ căn cước, CMND hoặc hộ chiếu..." value="<%= it.User.IdNumber %>" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group form-group-default">
<label class="fw-bold">Địa chỉ</label>
<input class="form-control" type="text" name="address" placeholder="Nhập địa chỉ..."
value="<% it.User.Address %>">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-default">
<label class="fw-bold">Email</label>
<input class="form-control" type="email" name="email" placeholder="Nhập địa chỉ email..."
value="<%= it.User.Email %>" title="Địa chỉ email không chính xác">
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-default">
<label class="fw-bold">Số điện thoại</label>
<input class="form-control" type="text" name="phone" placeholder="Nhập số điện thoại..."
value="<%= it.User.Telephone %>" title="Chỉ được nhập số hoặc dấu chấm">
</div>
</div>
</div>
<div class="text-right">
<button id="editBtn" class="btn btn-round btn-primary"><i class="fas fa-pen-fancy"></i> Cập
nhật</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Avatar Modal -->
<div class="modal" id="avatar-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title w-100 text-center">Sửa ảnh đại diện</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body justify-content-center">
<img class="rounded-circle" width="100" height="100" src="http://placehold.it/100x100" alt="Xem trước">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">Cập nhật</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#birthday").datepicker({
format: "dd/mm/yyyy",
autoclose: true,
language: "vi"
});
$("#birthday").inputmask('datetime', { inputFormat: "dd/mm/yyyy" });
$("#authForm").validate({
validClass: "success",
rules: {
newpassword: {},
confirmpassword: { equalTo: "#new-pass" }
},
highlight: function (element) {
$(element).closest(".form-group").removeClass("has-primary").addClass("has-error");
},
success: function (element) {
$(element).closest(".form-group").removeClass("has-error").addClass("has-primary");
},
submitHandler: function (domForm) {
$.ajax({
url: "/taikhoan/matkhau",
method: "POST",
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
data: $(domForm).serialize(),
success: function (result, textStatus, jqXHR) {
Swal.fire({
text: "Đổi mật khẩu thành công!\nXin vui lòng đăng nhập lại!",
type: 'success',
timer: 1500
}).then(function (result) { location.replace('/logout') })
},
error: function (jqXHR, textStatus, err) {
Swal.fire({
text: jqXHR.responseText,
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
});
}
});
$("#detailForm").validate({
validClass: "success",
rules: {
idnumber: {
pattern: /^([A-Z]?[0-9]){8,12}$/
},
phone: {
pattern: /^[0-9/.]{10,12}$/
}
},
messages: {
idnumber: {
required: "Số thẻ căn cước, CMND không được để trống",
pattern: "Từ 7 đến 12 ký tự số, chỉ cho phép ký tự đầu tiên là chữ cái viết hoa"
}
},
highlight: function (element) {
$(element).closest(".form-group").removeClass("has-primary").addClass("has-error");
},
success: function (element) {
$(element).closest(".form-group").removeClass("has-error").addClass("has-primary");
},
submitHandler: function (domForm) {
$.ajax({
url: "/taikhoan/thongtin",
method: "POST",
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: $(domForm).serialize(),
success: function (result, textStatus, jqXHR) {
location.replace(location.href);
},
error: function (jqXHR, textStatus, err) {
Swal.fire({
text: jqXHR.responseText,
type: 'error',
showConfirmButton: false,
timer: 1500
})
}
});
}
});
//Sửa avatar
$("#avatar-input").on("change", function (e) {
let file = this.files[0];
let fileRdr = new FileReader();
fileRdr.onload = function (e) {
// $('#avatar-modal img').attr('src', e.target.result);
$('<span/>').kendoDialog({
title: 'Xem trước ảnh',
content: `<img width="150" height="150" class="rounded-circle" src="${e.target.result}">`,
position: {
top: 0
}
}).data('kendoDialog').open();
};
fileRdr.readAsDataURL(file);
// $("#avatar-modal").modal("show");
});
})
</script>