EVOLUTION-NINJA
Edit File: Login-balu.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript" src="<?php echo base_url('public/assets/js/jquery-3.6.0.min.js'); ?>"></script> <script src="<?php echo base_url('public/assets/toastr/toastr.min.js');?>"></script> <link rel="stylesheet" href="<?php echo base_url('public/assets/toastr/toastr.min.css');?>"> </head> <body> <form id="loginform"> <label> Email <input type="text" name="email" required> </label><br> <label> password <input type="text" name="password" required> </label><br> <!-- captcha start --> <div id="user-input" class="inline"> <input type="text" id="usercaptcha" placeholder="Captcha code" /> </div> <div class="inline" onclick="generate()"> refresh </div> <div id="image" class="inline" selectable="False"> </div> <!-- captcha end --> <button class="btn btn-primary" id="login-btn">Login</button> </form> <p id="key"></p> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js "></script> <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet"> <script> $(document).ready(function () { $('#loginform').submit(function (e) { e.preventDefault(); formdata = new FormData($(this)[0]); const captcha = document.getElementById("image").innerHTML; const usercaptcha = document.getElementById('usercaptcha').value; if (captcha == usercaptcha) { $('#login-btn').text('loding'); $('#login-btn').attr('disabled', 'disabled'); $.ajax({ type: 'post', url: '<?php echo base_url("user-login");?>', data: formdata, contentType: false, processData: false, success: function (response) { console.log(response); if (response.result == 1) { $("#login-btn").removeAttr('disabled'); $("#login-btn").text("Login"); Swal.fire({ icon: "success", title: response.message, showConfirmButton: false, timer: 2000, }) .then(function () { window.location.href = "<?php echo base_url('dashboard');?>"; }) } else if (response.result == 0) { $("#login-btn").removeAttr('disabled'); $("#login-btn").text("Login"); Swal.fire({ icon: "error", title: response.message }); } else { $("#login-btn").removeAttr('disabled'); $("#login-btn").text("Login"); Swal.fire({ icon: "error", title: response.message }); } }, error: function (xhr, textStatus, errorThrown) { console.error(xhr.responseText); } }) } else if (usercaptcha == '') { toastr.error('Please enter captcha'); } else { toastr.error('Invalid captcha'); } }) }) </script> <script> let captcha; function generate() { document.getElementById("usercaptcha").value = ""; captcha = document.getElementById("image"); let uniquechar = ""; const randomchar = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for (let i = 1; i < 5; i++) { uniquechar += randomchar.charAt( Math.random() * randomchar.length) } captcha.innerHTML = uniquechar; } function printmsg() { const usr_input = document .getElementById("submit").value; if (usr_input == captcha.innerHTML) { let s = document.getElementById("key") .innerHTML = "Matched"; generate(); } else { let s = document.getElementById("key") .innerHTML = "not Matched"; generate(); } } generate() </script> <style> #image { margin-top: 10px; box-shadow: 5px 5px 5px 5px gray; width: 60px; padding: 5px; font-weight: 400; padding-bottom: 0px; height: 40px; user-select: none; text-decoration: line-through; font-style: italic; font-size: x-large; border: red 2px solid; margin-left: 10px; } </style> </body> </html>