BBnepal-Accounts/application/views/admin/reset-password.php

<style>
.con-pass {
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
    color: #878a8d;
}

.passwrd-icon {
    top : 2px !important;
}
</style>
<div class="login-wrap">
   <div class="login-box-cover-outter forget-box-cover-outter">
       <div class="login-box-cover"> 
        <div class="login-heading"> 
            <h2>Erisn Classroom Admin Portal</h2>

        </div>
        <div class="login-box-cover"> 
            <?php if($this->session->flashdata('failed')) { ?>

                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <p><?php echo $this->session->flashdata('failed') ?></p>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

            <?php } ?>
            <div class="login-box">
                <h3>Reset your Password</h3>
                <form method="post" action="<?php echo base_url() ?>/admin/reset_admin_password/<?php echo $encodedKey ?>" id="pwdForm">
                    <div class="login-row">
                        <input type="hidden" name="id" value="<?php echo $id ?>">
                    </div>
                    <div class="login-row">
                        <label class="login-lbl">
                         New Password*
                     </label>
                     <div class="password-wrp">
                        <input type="password" name="password" id="password" class="form-control" placeholder="Enter your password">
                        <span class="passwrd-icon icon-y"><i class="far fa-eye"></i></span>
                    </div>
                    <!-- <p class="loginErr">Please enter correct data</p> -->
                </div>
                <div class="login-row">
                    <label class="login-lbl">
                        Retype New Password*
                    </label>
                    <div class="password-wrp">
                        <input type="password" id="confirm-password" name="confirm_password" class=" form-control" placeholder="Enter your password">
                        <span class="con-pass icon-y eye-icon"><i class="far fa-eye"></i></span>
                    </div>
                    <!-- <p class="loginErr">Please enter correct data</p> -->
                </div> 
                <!-- <p class="loginSuccess">Data verified successfully</p> -->
                <div class="login-row">
                    <button class="common-btn">Submit</button>
                </div>
            </form>
            <div class="backto-login">
                <a href="<?php echo base_url() ?>admin"> &lt Back to login </a>
            </div>
        </div>
    </div>
</div> 
</div> </div>

<script>

    jQuery.validator.addMethod("passwordregex", function(value, element) {
  return this.optional( element ) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!#%*?&])[A-Za-z\d@$#!%*?&]{6,16}$/.test( value );
}, 'Your password must be atleast 6 characters long, which inculdes one upper case, one numerical value and one special character.');

    $("#pwdForm").validate({

        ignore: ":hidden",  
        rules: {
            password: {
                required: true,
                minlength: 6,
                maxlength: 16,
                passwordregex:true
            },
            confirm_password : {
                required : true,
                minlength : 6,
                equalTo : '#password'
            }
        },
        messages: {

            password : {
                required : 'Please enter a valid password',
                minlength : 'Password should be more than 6 characters',
                maxlength : 'Password should not exceed 16 Characters'
            },
            confirm_password : {
                required : 'Please re-enter your password',
                equalTo : "Please enter the same password again."
            },

        },
        submitHandler: function(form) {                    
            form.submit();
        }
    });
</script>

<script>
    $(".con-pass").click(function() {

        $(".con-pass").toggleClass("eye-icon");

        var input = $("#confirm-password");
        if (input.attr("type") == "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    }); 
</script>