CodewithSayali
GitHub
@@ -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;
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user