bbone/application/modules/Auth/views/change_password_form.php

107 lines
4.3 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="<?php echo base_url(); ?>/assets/appimg/default.ico" />
<title>BigBamboo Enterprise</title>
<!-- Bootstrap -->
<link href="<?php echo base_url(); ?>/assets/default/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="<?php echo base_url(); ?>/assets/default/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="<?php echo base_url(); ?>/assets/default/nprogress/nprogress.css" rel="stylesheet">
<!-- Animate.css -->
<link href="<?php echo base_url(); ?>/assets/default/animate.css/animate.min.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="<?php echo base_url(); ?>/assets/default/build/css/custom.min.css" rel="stylesheet">
</head>
<style>
.field-icon {
float: right;
margin-left: -25px;
margin-top: -45px;
margin-right: 10px;
position: relative;
z-index: 3;
}
body {
/* Set the background image URL */
background-image: url("<?php echo base_url(); ?>assets/appimg/bg-4.jpg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: rgba(255, 255, 255, 0.7) !important;
}
h1,
a,
p {
color: #fff !important;
}
</style>
<body class="login">
<div class="login_wrapper">
<div class="animate form login_form">
<section class="login_content">
<form id="otp-form" data-parsley-validate class="form-horizontal form-label-left" method="post"
action="<?php echo base_url();?>Auth/change_password" enctype="multipart/form-data">
<input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>"
value="<?php echo $this->security->get_csrf_hash();?>">
<input type="hidden" id="id" name="id" value="<?php echo $id ?>">
<h1>Change Password</h1>
<div>
<input type="password" id="password" name="password" class="form-control" placeholder="Password" required="required" />
<span toggle="#password" id="toggle-password" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
<div>
<input type="password" id="confirm_password" name="confirm_password" class="form-control" placeholder="Confrim Password" required="required" />
<p id='message'></p>
</div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
<div class="clearfix"></div>
</form>
</section>
<script>
$("#toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
$('#password, #confirm_password').on('keyup', function() {
$(':input[type="submit"]').prop('disabled', true);
if ($('#password').val() == $('#confirm_password').val() && $('#confirm_password').val()
.length > 0) {
$('#message').html('Matching').css('color', 'green');
$('button[type="submit"]').attr("disabled", false);
} else if ($('#password').val().length == 0 || $('#confirm_password').val().length == 0) {
$('#message').html('');
} else
$('#message').html('Not Matching').css('color', 'red');
});
</script>
</div>
</div>
</body>
</html>