Merge pull request #142 from WDI-Ideas/sayli

Sayli
This commit is contained in:
Sayli Raut
2024-06-14 11:50:08 +05:30
committed by GitHub
2 changed files with 210 additions and 199 deletions

View File

@@ -204,12 +204,15 @@ $(document).on("click", "#password_reset", function (e) {
processData: false,
contentType: false,
success: function (response) {
if (response.status == 200) {
if (response.status_code == 200) {
$("#password_reset").prop("disabled", false);
$("#password_reset").text("Login");
window.location.href = base_url + "/";
toastr.success(response.message);
setTimeout(function () {
window.location.href = base_url + "/";
}, 1000);
}
if (response.status == 401) {
if (response.status_code == 401) {
toastr.error(response.message);
form.reset();
$("#password_reset").prop("disabled", false);

View File

@@ -1,234 +1,242 @@
@extends('Admin.layouts.app_login')
@section('title', 'Cheers To Season - Password Reset')
@section('content')
<style>
/* 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 */
}
<style>
/* 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 for the eye icons */
.fa-eye,
.fa-eye-slash {
cursor: pointer;
position: relative;
top: 2px;
/* Adjust vertical alignment as needed */
}
/* Transition effect for smooth icon change */
.fa-eye,
.fa-eye-slash {
transition: color 0.3s ease;
}
/* Style for the eye icon when it's not showing the password */
.fa-eye-slash {
color: #777;
/* Adjust color as needed */
}
/* 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 */
}
/* Transition effect for smooth icon change */
.fa-eye,
.fa-eye-slash {
transition: color 0.3s ease;
}
/* Style for the eye icon when it's not showing the password */
.fa-eye-slash {
color: #777;
/* Adjust color as needed */
}
/* 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 */
}
/* 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="">
/* 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>
<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 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="hidden" id="admin_otp_id" name="reset_id"
value="{{ session('admin_data.principal_xid') }}">
<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="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 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>
<!-- <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 class="col-md-12">
<div>
<button type="submit" id="password_reset" class="p-0 download-btn w-100">Login</button>
</div>
</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>
</form>
</div>
</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 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');
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');
}
});
<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');
}
});
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>
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>
<script>
// 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);
<script>
// 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"),
// },
// });
// $.ajaxSetup({
// headers: {
// "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
// },
// });
// $('#password_reset').prop('disabled', true).text('Processing...');
// $('#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');
// }
// });
// }
// });
// $.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();
// $('#password_reset_form').submit();
// });
// });
</script>
// $(document).on("click", "#password_reset", function(e) {
// e.preventDefault();
// $('#password_reset_form').submit();
// });
// });
</script>
@endsection
@endsection