EVOLUTION-NINJA
Edit File: registrantionForm.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smart Finance</title> <!-- bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> <!-- bootstrap end --> <link rel="stylesheet" href="<?php echo base_url('public/assets/css/font-awesome.min.css')?>"> <!-- all css of login page in loginpage.css --> <link rel="stylesheet" href="<?php echo base_url('public/assets/css/loginpage.css');?>"> <!-- poppins fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <script type="text/javascript" src="<?php echo base_url('public/assets/js/jquery-3.6.0.min.js'); ?>"></script> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> </head> <style> .signhead { color: #2B4D66; font-size: 23px; padding: 0; font-weight: 700; } .pas { width: 80% !important } .swal-toast-green { background-color: #28a745 !important; /* Green background */ color: white; margin-top:30px; } </style> <body> <section class="financelogin" > <div class="loginform" > <img src="public/assets/images/finnce logo.png" alt="Finance Logo" class="loginlogo"> <p class="signhead">Register</p> <div style="width:75%;margin:auto;border:0.5px solid #B7B4B4"></div> <form id="form2" class="formdetails" > <div class="lo"> <label for="username" class="filednames">User Name</label> <div class="inpfields"> <input type="text" placeholder="Enter Username" name="username" id="username" required pattern="([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})|([a-zA-Z0-9_-]{3,20})"> </div> </div> <div class="lo"> <label for="Email" class="filednames">Email</label> <div class="inpfields"> <input type="email" placeholder="Enter Email" name="Email" id="Email" required pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"> </div> </div> <div class="lo"> <label for="phno" class="filednames">Phone Number</label> <div class="inpfields"> <input type="text" placeholder="Mobile Number" name="phone" id="phone" required> </div> </div> <div class="lo"> <label for="password" class="filednames">Password</label> <div class="inpfields"> <input type="password" placeholder="Enter New Password" name="password" id="password" class="passwordinput pas" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&*!])[A-Za-z\d@#$%^&*!]{8,16}$" required data-toggle="tooltip" data-placement="bottom" title="Password must be 8-16 characters long, contain at least one uppercase letter, one lowercase letter, one digit, and one special character (@, #, $, %, ^, &, *, etc.)."> <i class="fa fa-eye-slash" aria-hidden="true" id="togglepass"></i> </div> </div> <div class="lo"> <label for="referral" class="filednames">Referral Code [optional]</label> <div class="inpfields"> <input type="text" placeholder="Enter Referral Code" name="referral_code" id="referral_code" > </div> </div> <button type="submit" class="loginbutton" id="log-btn">Sign Up</button> </form> <div style="width:75%;margin:auto;border:0.5px solid #B7B4B4"></div> <div><a href="<?php echo base_url('loginpage');?>" class="changeFields">Already have an account ? log in</a> </div> </div> </section> </body> <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 () { $('#form2').submit(function (e) { e.preventDefault() formdata = new FormData($(this)[0]); $('#log-btn').text('loding'); $('#log-btn').attr('disabled', 'disabled'); $.ajax({ type: 'post', url: '<?php echo base_url("register");?>', data: formdata, contentType: false, processData: false, success: function (response) { // console.log(response); if (response.result == 1) { $("#log-btn").removeAttr('disabled'); $("#log-btn").text("Sign Up"); $('#username').val(''); $('#password').val(''); $('#phone').val(''); $('#Email').val(''); $('#referral_code').val(''); Swal.fire({ icon: "success", title: response.message, timer: 3000, toast: true, position: 'center', showConfirmButton: false, timerProgressBar: true, customClass: { popup: 'swal-toast-green' }, didOpen: (toast) => { toast.addEventListener('mouseenter', Swal.stopTimer); toast.addEventListener('mouseleave', Swal.resumeTimer); } }); window.location.href = "<?php echo base_url('loginpage');?>"; } else if (response.result == 0) { $("#log-btn").removeAttr('disabled'); $("#log-btn").text("Sign Up"); Swal.fire({ icon: "error", title: response.message }); } else { $("#log-btn").removeAttr('disabled'); $("#log-btn").text("Sign Up"); Swal.fire({ icon: "error", title: response.message }); } }, error: function (xhr, textStatus, errorThrown) { console.error(xhr.responseText); } }) }) }) </script> <script> document.addEventListener('DOMContentLoaded', function () { const eyechange = document.getElementById("togglepass"); const togglepassword = document.querySelector(".passwordinput"); eyechange.addEventListener("click", function () { if (togglepassword.type === "password") { togglepassword.type = "text"; eyechange.classList.remove("fa-eye-slash"); eyechange.classList.add("fa-eye") } else { togglepassword.type = "password"; eyechange.classList.remove("fa-eye"); eyechange.classList.add("fa-eye-slash") } }) }) </script> </html>