pass
unknown
plain_text
2 years ago
23 kB
3
Indexable
<%- include('../include/header.ejs') %>
<style>
.checkPassword{
border: 1px solid rgb(217, 44, 44) !important;
}
</style>
<%- include('../include/navbar.ejs') %>
<%= %>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
<div class="page-content" style="margin-top: 120px;">
<div class="container-fluid">
<!-- <div class="position-relative">
<div class=" profile-setting-img">
<img src="assets/images/profile-bg.jpg" class="profile-wid-img" alt="">
</div>
</div> -->
<div class="row">
<% let type = ""
if(role_name !="AP"){
type="none";
} %>
<div class="col">
<div class="card mt-xxl-n5">
<div class="card-header">
<ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link text-body active" data-bs-toggle="tab" href="#personalDetails" role="tab" aria-selected="true" >
<i class="fas fa-home"></i>
Personal Details
</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link text-body" data-bs-toggle="tab" href="#changePassword" role="tab" aria-selected="false" tabindex="-1">
<i class="far fa-user"></i>
Change Password
</a>
</li>
</ul>
</div>
<div class="card-body p-4">
<div class="tab-content">
<div class="tab-pane active show" id="personalDetails" role="tabpanel">
<form action="javascript:void(0);">
<div class="row">
<div class="col-lg-4">
<div class="mb-3">
<label for="phonenumberInput" class="form-label">NAME</label>
<input type="text" class="form-control" name="user_name" id="user_name" placeholder="<%= user_name%>" value="<%= user_name%>" readonly>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label for="phonenumberInput" class="form-label">ROLE</label>
<input type="text" class="form-control" name="role_name" id="role_name" value="<%= role_name%>"placeholder="<%= role_name%>" readonly>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label for="firstnameInput" class="form-label"> lOGIN ID </label>
<input type="text" class="form-control" name="login_id" id="login_id" value="<%= login_id%>"placeholder="<%= login_id%>" readonly>
</div>
</div>
<!--end col-->
<!-- <div class="col-lg-6">
<div class="mb-3">
<label for="lastnameInput" class="form-label">Last
Name</label>
<input type="text" class="form-control" id="lastnameInput" placeholder="Enter your lastname" value="Adame">
</div>
</div> -->
<!--end col-->
<div class="col-lg-4">
<div class="mb-3">
<label for="phonenumberInput" class="form-label">Phone
Number</label>
<input type="text" class="form-control" id="mobileNo" placeholder="<%= user[0].mobileNo%>" value="<%= user[0].mobileNo%>" readonly>
</div>
</div>
<!--end col-->
<div class="col-lg-4">
<div class="mb-3">
<label for="emailInput" class="form-label">Email
Address</label>
<input type="text" class="form-control" id="email" placeholder="<%= email%>" value="<%= email%>" readonly>
</div>
</div>
<!--end col-->
<!--end col-->
<div class="col-lg-4" style="display: <%= type%>;">
<div class="mb-3">
<label for="cityInput" class="form-label">City</label>
<input type="text" class="form-control" id="cityInput" placeholder="City" value="<%= user[0].user_City%>">
</div>
</div>
<!--end col-->
<div class="col-lg-4" style="display: <%= type%>;">
<div class="mb-3">
<label for="countryInput" class="form-label">State</label>
<input type="text" class="form-control" id="countryInput" placeholder="State" value="<%= user[0].user_State%>">
</div>
</div>
</div>
</form>
</div>
<!--end tab-pane-->
<div class="tab-pane" id="changePassword" role="tabpanel">
<form action="javascript:void(0);">
<div class="row g-2">
<span class="alert alert-success mb-xl-0" id="otpmsg" style="display: none;"></span>
<span class="alert alert-danger mb-xl-0" id="error_msg" style="display: none;"></span>
<span class="alert alert-success mb-xl-0" id="success_msg" style="display: none;"></span>
</div>
<div class="row g-2">
<!--end col-->
<div class="col-lg-3">
<div>
<label for="OTP" class="form-label">Enter OTP</label>
<input type="password" class="form-control" id="OTP" placeholder="Enter OTP" autocomplete="off">
</div>
</div>
<div class="col-lg-3">
<label for="old_Password" class="form-label">Old Password*</label>
<div style="width: 100%;" class="form-icon right">
<input type="password" class="form-control" id="old_Password" placeholder="Enter new password" autocomplete="off">
<i class="ri-eye-fill old_password_eye_open" style="display: flex; cursor: pointer;" onclick="show_hide_old_password('old_password_eye_open')"></i>
<i class="ri-eye-close-fill old_password_eye_open_close" style="display: none; cursor: pointer;" onclick="show_hide_old_password('old_password_eye_open_close')"></i>
</div>
<div>
</div>
</div>
<div class="col-lg-3">
<label for="newpasswordInput" class="form-label">New Password*</label>
<div style="width: 100%;" class="form-icon right">
<input type="password" class="form-control" id="New_Password" placeholder="Enter new password" autocomplete="off">
<i class="ri-eye-fill new_password_eye_open" style="display: flex; cursor: pointer;" onclick="show_hide_new_password('new_password_eye_open')"></i>
<i class="ri-eye-close-fill new_password_eye_open_close" style="display: none; cursor: pointer;" onclick="show_hide_new_password('new_password_eye_open_close')"></i>
</div>
</div>
<!--end col-->
<div class="col-lg-3">
<label for="Conform_New_Password" class="form-label">Confirm Password*</label>
<div style="width: 100%;" class="form-icon right">
<input type="password" class="form-control" id="Conform_New_Password" placeholder="Confirm password" autocomplete="off" oninput="checkpassword()">
<i class="ri-eye-fill confirm_new_password_eye_open" style="display: flex; cursor: pointer;" onclick="show_hide_confirm_new_password('confirm_new_password_eye_open')"></i>
<i class="ri-eye-close-fill confirm_new_password_eye_open_close" style="display: none; cursor: pointer;" onclick="show_hide_confirm_new_password('confirm_new_password_eye_open_close')"></i>
</div>
</div>
<!--end col-->
<div class="col-lg-6">
<div class="mb-3">
<a id="otp" onclick="SendOTP()"class="link-primary text-decoration-underline" style="cursor: pointer;"> Send OTP</a>
</div>
<!-- <span class="alert alert-success mb-xl-0" id="otpmsg" style="display: none;"></span>
<span class="alert alert-danger mb-xl-0" id="error_msg" style="display: none;"></span>
<span class="alert alert-success mb-xl-0" id="success_msg" style="display: none;"></span> -->
</div>
<!--end col-->
<div class="col-lg-6">
<div class="text-end">
<!-- <button type="submit" class="btn btn-success" onclick="SendOTP();">Send OTP</button> -->
<button type="submit" class="btn btn-success" onclick="ChangePassword();">Change Password</button>
</div>
</div>
<!--end col-->
</div>
<!--end row-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end col-->
</div>
<!--end row-->
</div>
<%- include('../include/footer.ejs') %>
</div>
</div>
<%- include('../include/scripts.ejs') %>
<script>
function checkpassword(){
let newPassword = document.querySelector('#New_Password');
let confirmPassword = document.querySelector('#Conform_New_Password');
if(confirmPassword.value != newPassword.value){
confirmPassword.classList.add('checkPassword')
}else{
confirmPassword.classList.remove('checkPassword')
}
}
function show_hide_confirm_new_password(param){
if(param == 'confirm_new_password_eye_open'){
document.querySelector('.confirm_new_password_eye_open').style.display='none';
document.querySelector('.confirm_new_password_eye_open_close').style.display='flex';
document.querySelector('#Conform_New_Password').type='text';
}else{
document.querySelector('.confirm_new_password_eye_open').style.display='flex';
document.querySelector('.confirm_new_password_eye_open_close').style.display='none';
document.querySelector('#Conform_New_Password').type='password';
}
}
function show_hide_old_password(param){
if(param == 'old_password_eye_open'){
document.querySelector('.old_password_eye_open').style.display='none';
document.querySelector('.old_password_eye_open_close').style.display='flex';
document.querySelector('#old_Password').type='text';
}else{
document.querySelector('.old_password_eye_open').style.display='flex';
document.querySelector('.old_password_eye_open_close').style.display='none';
document.querySelector('#old_Password').type='password';
}
}
function show_hide_new_password(param){
if(param == 'new_password_eye_open'){
document.querySelector('.new_password_eye_open').style.display='none';
document.querySelector('.new_password_eye_open_close').style.display='flex';
document.querySelector('#New_Password').type='text';
}else{
document.querySelector('.new_password_eye_open').style.display='flex';
document.querySelector('.new_password_eye_open_close').style.display='none';
document.querySelector('#New_Password').type='password';
}
}
</script>
<script>
function SendOTP(){
var role_name = $("#role_name").val();
var login_id = $("#login_id").val();
var user_name = $("#user_name").val();
var email = $("#email").val();
var mobileNo = $("#mobileNo").val();
var formData = {
role_name: role_name,
login_id: login_id,
user_name: user_name,
email: email,
mobileNo: mobileNo,
};
//console.log(formData);
$.ajax({
type: "POST",
url: "/OTPLog",
data: JSON.stringify(formData),
contentType: "application/json",
dataType: "json",
success: function (data) {
if(data.status=="success"){
setTimeout(function () {
$("#otpmsg").show().html(data.message)
$(".alert").fadeOut(5000);
})
}
}
});
}
</script>
<script>
function ChangePassword() {
var role_name = $("#role_name").val();
var login_id = $("#login_id").val();
var user_name = $("#user_name").val();
var email = $("#email").val();
var mobileNo = $("#mobileNo").val();
var OTP = $("#OTP").val();
var old_Password = $("#old_Password").val();
var New_Password = $("#New_Password").val();
var Conform_New_Password = $("#Conform_New_Password").val();
var formData = {
role_name: role_name,
login_id: login_id,
user_name: user_name,
email: email,
mobileNo: mobileNo,
OTP: OTP,
old_Password: old_Password,
New_Password: New_Password,
Conform_New_Password: Conform_New_Password,
};
// console.log(formData);
$.ajax({
type: "POST",
url: "/change_pass",
data: JSON.stringify(formData),
contentType: "application/json",
dataType: "json",
error: function (xhr, status, error) {
const message=(xhr.responseJSON.message);
// console.log(message)
// $(document).ready(function(){
// $("button").click(function(){
// $("#error_msg").html(message).fadeOut(5000);
// });
// });
$("#error_msg").show().html(message).fadeOut(10000);
},
success: function (data) {
$("#success_msg").show().html(data.message)
//$("#success_msg").show();
if(data.status=="success"){
setTimeout(function () {
location.reload();
$(".alert").fadeOut("slow");
}, 1000);
}
}
});
}
</script>