From 3e0c394d59b7f31c506a09cdcc223ad205ca28f2 Mon Sep 17 00:00:00 2001
From: sayaliparab <sayali00015@gmail.com>
Date: Wed, 12 Jun 2024 17:32:47 +0530
Subject: [PATCH] Restconfirm

---
 public/assets/css/light/main.css              |   2 +-
 .../Admin/pages/auth/password_reset.blade.php | 411 ++++++++++++------
 2 files changed, 273 insertions(+), 140 deletions(-)

diff --git a/public/assets/css/light/main.css b/public/assets/css/light/main.css
index 1deb9db..a35bfba 100644
--- a/public/assets/css/light/main.css
+++ b/public/assets/css/light/main.css
@@ -536,7 +536,7 @@ input[type=search]::-ms-reveal {
 /*      Form Group Label       */
 .form-group label, label {
   font-size: 15px;
-  color: #090101;
+  color: #ff0000;
   letter-spacing: 1px;
   display: inline-block;
   margin-bottom: 0.5rem;
diff --git a/resources/views/Admin/pages/auth/password_reset.blade.php b/resources/views/Admin/pages/auth/password_reset.blade.php
index de8d6c3..01a0952 100644
--- a/resources/views/Admin/pages/auth/password_reset.blade.php
+++ b/resources/views/Admin/pages/auth/password_reset.blade.php
@@ -3,161 +3,291 @@
 @section('content')
 <style>
     /* styles.css */
-    .password-wrapper {
-    position: relative;
-    width: 100%;
-}
+    /* .password-wrapper {
+        position: relative;
+        width: 100%;
+    }
 
-.toggle-password {
-    position: absolute;
-    top: 50%;
-    right: 10px;
-    transform: translateY(-50%);
+    .toggle-password {
+        position: absolute;
+        top: 50%;
+        right: 10px;
+        transform: translateY(-50%);
+        cursor: pointer;
+    } */
+
+    /* Target the label element with the id 'confirm_password-error' and class 'error' */
+    label#error.confirm_password-error {
+        color: red;
+        /* Sets the text color to red */
+        font-weight: bold;
+        /* Optional: Makes the text bold */
+        /* You can add more styles as needed */
+    }
+
+
+
+
+
+
+
+    /* Style for the eye icons */
+.fa-eye,
+.fa-eye-slash {
     cursor: pointer;
+    position: relative;
+    top: 2px; /* Adjust vertical alignment as needed */
 }
 
-/* Target the label element with the id 'confirm_password-error' and class 'error' */
-label#error.confirm_password-error {
-    color: red; /* Sets the text color to red */
-    font-weight: bold; /* Optional: Makes the text bold */
-    /* You can add more styles as needed */
+/* Style for the eye icon when it's not showing the password */
+.fa-eye-slash {
+    color: #777; /* Adjust color as needed */
 }
 
-    </style>
-    <div class="row w-100" style="height: 100vh;">
-        <div class=" col-md-6 m-auto h-100 d-flex flex-column align-itms-center justify-content-center"
-            style="background-color: #05244D;">
-            <div class="d-flex justify-content-center">
-                <img src="{{ asset('public/assets/img/seasons_logo.png') }}" width="150" height="150" alt="">
-            </div>
-        </div>
-        <div class=" col-md-6 h-100 d-flex justify-content-center align-items-center login-background-img"
-            style="background-image: url(public/assets/img/login_screen_background.png);">
-            <div class="row d-flex flex-column justify-content-center align-items-center m-auto"
-                style="width: 60%; z-index: 999;">
-                <h3 class="text-start font-weight-bold mb-3 text-white">RESET PASSWORD</h3>
-                <form id="password_reset_form">
-                    <div class="col-md-12">
-                        <div class="mb-3 input-parent">
-                            <i class="fa fa-lock" aria-hidden="true"></i>
-                            <input type="hidden" id="admin_otp_id" name="reset_id"
-                                value="{{ session('admin_data.principal_xid') }}">
-                            <input type="password" class="form-control" name="password" placeholder="Password" >
-                        </div>
-                    </div>
-                    <div class="col-md-12">
-                        <div class="mb-3 input-parent">
-                            <i class="fa fa-lock" aria-hidden="true"></i>
-                            <input type="password" class="form-control" name="confirm_password" id="confirm_password"
-                                placeholder="Confirm Password">
-                        </div>
-                    </div>
-                    <div class="col-md-12">
-                        <div>
-                            <button type="submit" id="password_reset" class="p-0 download-btn w-100">Login</button>
-                        </div>
-                    </div>
-                </form>
-  
-          
-            </div>
+/* Transition effect for smooth icon change */
+.fa-eye,
+.fa-eye-slash {
+    transition: color 0.3s ease;
+}
+
+/* Style for the eye icons */
+.fa-eye,
+.fa-eye-slash {
+    cursor: pointer;
+    position: absolute;
+    right: 10px; /* Adjust horizontal alignment as needed */
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1; /* Ensure the icon is above the input */
+}
+
+/* Style for the eye icon when it's not showing the password */
+.fa-eye-slash {
+    color: #777; /* Adjust color as needed */
+}
+
+/* Transition effect for smooth icon change */
+.fa-eye,
+.fa-eye-slash {
+    transition: color 0.3s ease;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+</style>
+<div class="row w-100" style="height: 100vh;">
+    <div class=" col-md-6 m-auto h-100 d-flex flex-column align-itms-center justify-content-center" style="background-color: #05244D;">
+        <div class="d-flex justify-content-center">
+            <img src="{{ asset('public/assets/img/seasons_logo.png') }}" width="150" height="150" alt="">
         </div>
     </div>
+    <div class=" col-md-6 h-100 d-flex justify-content-center align-items-center login-background-img" style="background-image: url(public/assets/img/login_screen_background.png);">
+        <div class="row d-flex flex-column justify-content-center align-items-center m-auto" style="width: 60%; z-index: 999;">
+            <h3 class="text-start font-weight-bold mb-3 text-white">RESET PASSWORD</h3>
+            <form id="password_reset_form">
+                <div class="col-md-12">
+                    <!-- <div class="mb-3 input-parent">
+                        <i class="fa fa-lock" aria-hidden="true"></i>
+                        <input type="hidden" id="admin_otp_id" name="reset_id" value="{{ session('admin_data.principal_xid') }}">
+                        <input type="password" class="form-control" name="password" placeholder="Password">
+
+
+                    </div> -->
+                    <div class="mb-3 input-parent">
+                        <i class="fa fa-lock" aria-hidden="true"></i>
+                        <input type="password" class="form-control" name="password" id="password" placeholder="Password">
+                        <i class="fa fa-eye-slash" aria-hidden="true" id="togglePassword"></i>
+                    </div>
+                </div>
+                <!-- <div class="col-md-12">
+                    <div class="mb-3 input-parent">
+                        <i class="fa fa-lock" aria-hidden="true"></i>
+                        <input type="password" class="form-control" name="confirm_password" id="confirm_password" placeholder="Confirm Password">
+
+
+                    </div>
+                </div> -->
+                <div class="col-md-12">
+                    <div class="mb-3 input-parent">
+                        <i class="fa fa-lock" aria-hidden="true"></i>
+                        <input type="password" class="form-control" name="confirm_password" id="confirm_password" placeholder="Confirm Password">
+                        <i class="fa fa-eye-slash" aria-hidden="true" id="toggleConfirmPassword"></i>
+                    </div>
+                </div>
+                <div class="col-md-12">
+                    <div>
+                        <button type="submit" id="password_reset" class="p-0 download-btn w-100">Login</button>
+                    </div>
+                </div>
+            </form>
+
+
+
+
+
+        </div>
+    </div>
+</div>
 
 @endsection
 
 @section('scripts')
-    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
-    <script src="{{ asset('public/assets/js/admin/auth/login.js')}}"></script>
-
-<script>
-    $(document).ready(function() {
-        // Password visibility toggle
-        $('#passwordToggle').click(function() {
-            var passwordInput = $('#password');
-            var eyeIcon = $('#passwordToggle');
-
-            if (passwordInput.attr('type') === 'password') {
-                passwordInput.attr('type', 'text');
-                eyeIcon.removeClass('fa-eye-slash').addClass('fa-eye');
-            } else {
-                passwordInput.attr('type', 'password');
-                eyeIcon.removeClass('fa-eye').addClass('fa-eye-slash');
-            }
-        });
+<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
+<script src="{{ asset('public/assets/js/admin/auth/login.js')}}"></script>
+<!-- <script>
+    document.getElementById('togglePassword').addEventListener('click', function () {
+        var passwordField = document.getElementById('password');
+        if (passwordField.type === 'password') {
+            passwordField.type = 'text';
+        } else {
+            passwordField.type = 'password';
+        }
     });
 
-        // Form validation and submission
-        // $('#password_reset_form').validate({
-        //     rules: {
-        //         password: {
-        //             required: true,
-        //             minlength: 8
-        //         },
-        //         confirm_password: {
-        //             required: true,
-        //             equalTo: "#password"
-        //         },
-        //     },
-        //     messages: {
-        //         password: {
-        //             required: "Please enter a password.",
-        //             minlength: "The password field must be at least 8 characters."
-        //         },
-        //         confirm_password: {
-        //             required: "Please Confirm Your Password",
-        //             equalTo: "Your Password Do Not Match"
-        //         },
-        //     },
-        //     // invalidHandler: function(event, validator) {
-        //     //     var errors = validator.errorList;
-        //     //     $.each(errors, function(index, error) {
-        //     //         toastr.error(error.message);
-        //     //     });
-        //     // },
-        //     submitHandler: function(form) {
-        //         let base_url = url_path;
-        //         var formData = new FormData(form);
+    document.getElementById('toggleConfirmPassword').addEventListener('click', function () {
+        var confirmPasswordField = document.getElementById('confirm_password');
+        if (confirmPasswordField.type === 'password') {
+            confirmPasswordField.type = 'text';
+        } else {
+            confirmPasswordField.type = 'password';
+        }
+    });
+</script> -->
 
-        //         $.ajaxSetup({
-        //             headers: {
-        //                 "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
-        //             },
-        //         });
+<script>
+    document.getElementById('togglePassword').addEventListener('click', function () {
+        var passwordField = document.getElementById('password');
+        var icon = document.getElementById('togglePassword');
+        if (passwordField.type === 'password') {
+            passwordField.type = 'text';
+            icon.classList.remove('fa-eye-slash');
+            icon.classList.add('fa-eye');
+        } else {
+            passwordField.type = 'password';
+            icon.classList.remove('fa-eye');
+            icon.classList.add('fa-eye-slash');
+        }
+    });
 
-        //         $('#password_reset').prop('disabled', true).text('Processing...');
+    document.getElementById('toggleConfirmPassword').addEventListener('click', function () {
+        var confirmPasswordField = document.getElementById('confirm_password');
+        var icon = document.getElementById('toggleConfirmPassword');
+        if (confirmPasswordField.type === 'password') {
+            confirmPasswordField.type = 'text';
+            icon.classList.remove('fa-eye-slash');
+            icon.classList.add('fa-eye');
+        } else {
+            confirmPasswordField.type = 'password';
+            icon.classList.remove('fa-eye');
+            icon.classList.add('fa-eye-slash');
+        }
+    });
+</script>
 
-        //         $.ajax({
-        //             url: base_url + '/password_update',
-        //             type: 'POST',
-        //             data: formData,
-        //             processData: false,
-        //             contentType: false,
-        //             success: function(response) {
-        //                 if (response.status_code == 200) {
-        //                     toastr.success(response.message);
-        //                     window.location.href = base_url + "/";
-        //                 } else if (response.status_code == 404) {
-        //                     toastr.error(response.message);
-        //                     form.reset();
-        //                 }
-        //                 $('#password_reset').prop('disabled', false).text('Sign In');
-        //             },
-        //             error: function(xhr) {
-        //                 if (xhr.status === 422) {
-        //                     var errors = xhr.responseJSON.message;
-        //                     $.each(errors, function(index, value) {
-        //                         toastr.error(value);
-        //                     });
-        //                 } else {
-        //                     toastr.error('An unexpected error occurred. Please try again.');
-        //                 }
-        //                 $('#password_reset').prop('disabled', false).text('Sign In');
-        //             }
-        //         });
-        //     }
-        // });
+<script>
+    // $(document).ready(function() {
+    //     // Password visibility toggle
+    //     $('#passwordToggle').click(function() {
+    //         var passwordInput = $('#password');
+    //         var eyeIcon = $('#passwordToggle');
+
+    //         if (passwordInput.attr('type') === 'password') {
+    //             passwordInput.attr('type', 'text');
+    //             eyeIcon.removeClass('fa-eye-slash').addClass('fa-eye');
+    //         } else {
+    //             passwordInput.attr('type', 'password');
+    //             eyeIcon.removeClass('fa-eye').addClass('fa-eye-slash');
+    //         }
+    //     });
+    // });
+
+
+
+
+
+
+
+    // Form validation and submission
+    // $('#password_reset_form').validate({
+    //     rules: {
+    //         password: {
+    //             required: true,
+    //             minlength: 8
+    //         },
+    //         confirm_password: {
+    //             required: true,
+    //             equalTo: "#password"
+    //         },
+    //     },
+    //     messages: {
+    //         password: {
+    //             required: "Please enter a password.",
+    //             minlength: "The password field must be at least 8 characters."
+    //         },
+    //         confirm_password: {
+    //             required: "Please Confirm Your Password",
+    //             equalTo: "Your Password Do Not Match"
+    //         },
+    //     },
+    //     // invalidHandler: function(event, validator) {
+    //     //     var errors = validator.errorList;
+    //     //     $.each(errors, function(index, error) {
+    //     //         toastr.error(error.message);
+    //     //     });
+    //     // },
+    //     submitHandler: function(form) {
+    //         let base_url = url_path;
+    //         var formData = new FormData(form);
+
+    //         $.ajaxSetup({
+    //             headers: {
+    //                 "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
+    //             },
+    //         });
+
+    //         $('#password_reset').prop('disabled', true).text('Processing...');
+
+    //         $.ajax({
+    //             url: base_url + '/password_update',
+    //             type: 'POST',
+    //             data: formData,
+    //             processData: false,
+    //             contentType: false,
+    //             success: function(response) {
+    //                 if (response.status_code == 200) {
+    //                     toastr.success(response.message);
+    //                     window.location.href = base_url + "/";
+    //                 } else if (response.status_code == 404) {
+    //                     toastr.error(response.message);
+    //                     form.reset();
+    //                 }
+    //                 $('#password_reset').prop('disabled', false).text('Sign In');
+    //             },
+    //             error: function(xhr) {
+    //                 if (xhr.status === 422) {
+    //                     var errors = xhr.responseJSON.message;
+    //                     $.each(errors, function(index, value) {
+    //                         toastr.error(value);
+    //                     });
+    //                 } else {
+    //                     toastr.error('An unexpected error occurred. Please try again.');
+    //                 }
+    //                 $('#password_reset').prop('disabled', false).text('Sign In');
+    //             }
+    //         });
+    //     }
+    // });
 
     //     $(document).on("click", "#password_reset", function(e) {
     //         e.preventDefault();
@@ -167,4 +297,7 @@ label#error.confirm_password-error {
 </script>
 
 
-@endsection
+
+
+
+@endsection
\ No newline at end of file