255 lines
12 KiB
PHP
255 lines
12 KiB
PHP
|
@extends('theme::layouts.app')
|
||
|
|
|
||
|
|
@section('content')
|
||
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||
|
|
|
||
|
|
<div class="flex flex-col justify-center py-20 px-2 sm:px-6 lg:px-8 min-h-screen main-wrapper login-signup-page" style="background-image: url({{ asset('themes/tailwind/images/login-bg.png') }})">
|
||
|
|
<div class="form-steps" data-step="1">
|
||
|
|
<div class="mx-auto login-signup-card">
|
||
|
|
<form action="{{ route('forgot-password.send-otp') }}" method="POST" id="sendOtpFrm">
|
||
|
|
@csrf
|
||
|
|
|
||
|
|
<img class="logo mb-6 mx-auto" src="{{ asset('themes/tailwind/images/Lock.png') }}">
|
||
|
|
<h3 class="form-title mb-6">Recover Your Password</h3>
|
||
|
|
|
||
|
|
<div class="form-group mb-6">
|
||
|
|
<label for="email">Email</label>
|
||
|
|
<input id="email" type="email" name="email" required class="w-full form-input no-radius" autofocus>
|
||
|
|
|
||
|
|
@if ($errors->has('email'))
|
||
|
|
<div class="mt-1 text-red-500">
|
||
|
|
{{ $errors->first('email') }}
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-6">
|
||
|
|
<span class="block w-full rounded-md shadow-sm">
|
||
|
|
<button type="submit" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button change-form-step submit-btn" data-target="2">
|
||
|
|
Recover Password
|
||
|
|
</button>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="bottom-desc">
|
||
|
|
Go back to <a href="{{ route('login') }}" class="blue-link d-inline-block">Sign in</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="mx-auto bottom-links-wrapper pb-0" style="bottom: 30px;">
|
||
|
|
<a href="{{ route('user-terms-and-conditions') }}" class="link">Terms and Conditions</a>
|
||
|
|
<a href="{{ route('user-privacy-policy') }}" class="link">Privacy Policy</a>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-steps" data-step="2" style="display: none;">
|
||
|
|
<div class="mx-auto login-signup-card">
|
||
|
|
<form action="{{ route('forgot-password.submit-otp') }}" method="POST" id="submitOtpFrm">
|
||
|
|
@csrf
|
||
|
|
|
||
|
|
<img class="logo mb-6 mx-auto" src="{{ asset('themes/tailwind/images/Lock.png') }}">
|
||
|
|
<h3 class="form-title mb-6">OTP sent to your email</h3>
|
||
|
|
|
||
|
|
<div class="form-group mb-6">
|
||
|
|
<label for="otp">OTP</label>
|
||
|
|
<input id="otp" type="password" name="otp" required class="w-full form-input no-radius" autofocus>
|
||
|
|
|
||
|
|
@if ($errors->has('otp'))
|
||
|
|
<div class="mt-1 text-red-500">
|
||
|
|
{{ $errors->first('otp') }}
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-6">
|
||
|
|
<span class="block w-full rounded-md shadow-sm">
|
||
|
|
<button type="submit" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button change-form-step submit-btn" data-target="3">
|
||
|
|
Recover Password
|
||
|
|
</button>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="bottom-desc">
|
||
|
|
Go back to <a href="{{ route('login') }}" class="blue-link d-inline-block">Sign in</a>
|
||
|
|
</p>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mx-auto bottom-links-wrapper">
|
||
|
|
<a href="{{ route('user-terms-and-conditions') }}" class="link">Terms and Conditions</a>
|
||
|
|
<a href="{{ route('user-privacy-policy') }}" class="link">Privacy Policy</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-steps" data-step="3" style="display: none;">
|
||
|
|
<div class="mx-auto login-signup-card">
|
||
|
|
<form action="{{ route('forgot-password.reset-password') }}" method="POST" id="submitResetPasswordFrm">
|
||
|
|
@csrf
|
||
|
|
<input type="hidden" name="user_id" id="user_id">
|
||
|
|
|
||
|
|
<img class="logo mb-6 mx-auto" src="{{ asset('themes/tailwind/images/Lock.png') }}">
|
||
|
|
<h3 class="form-title mb-6">Reset Your Password</h3>
|
||
|
|
|
||
|
|
<div class="form-group mb-6">
|
||
|
|
<label for="password">
|
||
|
|
New Password
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<div class="password-wrapper">
|
||
|
|
<input id="password" type="password" name="password" required class="w-full form-input no-radius">
|
||
|
|
<img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@if ($errors->has('password'))
|
||
|
|
<div class="mt-1 text-red-500">
|
||
|
|
{{ $errors->first('password') }}
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group mb-6">
|
||
|
|
<label for="password_confirmation">
|
||
|
|
Confirm Password
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<div class="password-wrapper">
|
||
|
|
<input id="password_confirmation" type="password" name="password_confirmation" required class="w-full form-input no-radius">
|
||
|
|
<img class="mx-auto password-hide-show" src="{{ asset('themes/tailwind/images/password-hide-show.png') }}">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
@if ($errors->has('password_confirmation'))
|
||
|
|
<div class="mt-1 text-red-500">
|
||
|
|
{{ $errors->first('password_confirmation') }}
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mb-6">
|
||
|
|
<span class="block w-full rounded-md shadow-sm">
|
||
|
|
<button type="submit" class="flex justify-center w-full px-4 py-3 text-sm font-medium text-black transition duration-150 ease-in-out border primary-button submit-btn">
|
||
|
|
Reset Password
|
||
|
|
</button>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="bottom-desc">
|
||
|
|
Go back to <a href="{{ route('login') }}" class="blue-link d-inline-block">Sign in</a>
|
||
|
|
</p>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mx-auto bottom-links-wrapper">
|
||
|
|
<a href="{{ route('user-terms-and-conditions') }}" class="link">Terms and Conditions</a>
|
||
|
|
<a href="{{ route('user-privacy-policy') }}" class="link">Privacy Policy</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{-- Validation Modal --}}
|
||
|
|
<div class="modal fade validation-modal style2" id="validationModal" tabindex="-1" aria-labelledby="validationModalLabel" aria-hidden="true">
|
||
|
|
<div class="modal-dialog modal-dialog-centered">
|
||
|
|
<div class="modal-content mx-auto w-100">
|
||
|
|
<div class="modal-body p-0">
|
||
|
|
<p class="text-center error-message">Account Not Excise</p>
|
||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{-- Success Modal --}}
|
||
|
|
<div class="modal fade validation-modal style1" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
||
|
|
<div class="modal-dialog modal-dialog-centered">
|
||
|
|
<div class="modal-content mx-auto w-100">
|
||
|
|
<div class="modal-body p-0">
|
||
|
|
<p class="text-center error-message">Password has successfully reset</p>
|
||
|
|
<a href="{{ route('login') }}" class="btn btn-secondary">Sign in</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endsection
|
||
|
|
|
||
|
|
@section('script')
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
$('.password-hide-show').click(function() {
|
||
|
|
var type = $(this).parent().find('input').attr('type');
|
||
|
|
|
||
|
|
if (type == 'password') {
|
||
|
|
$(this).parent().find('input').attr('type', 'text');
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$(this).parent().find('input').attr('type', 'password');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('form').submit(function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
var button = $(this).find('button[type="submit"]');
|
||
|
|
var buttonHtml = button.html();
|
||
|
|
var action = $(this).attr('action');
|
||
|
|
var frmId = $(this).attr('id');
|
||
|
|
|
||
|
|
if (!button.is(':disabled') && action) {
|
||
|
|
button.attr('disabled', 'disabled');
|
||
|
|
button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: action,
|
||
|
|
type:"post",
|
||
|
|
data:$(this).serialize(),
|
||
|
|
dataType:'json',
|
||
|
|
success:function(data) {
|
||
|
|
button.removeAttr('disabled');
|
||
|
|
button.html(buttonHtml);
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
if (frmId == 'submitOtpFrm') {
|
||
|
|
$('#submitResetPasswordFrm #user_id').val(data.user_id);
|
||
|
|
}
|
||
|
|
|
||
|
|
var target = button.attr('data-target');
|
||
|
|
|
||
|
|
if (target) {
|
||
|
|
$('.form-steps').hide();
|
||
|
|
$('.form-steps[data-step="' + target + '"]').show();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$('#successModal .error-message').html(data.message);
|
||
|
|
$('#successModal').modal('show');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$('#validationModal .error-message').html(data.message);
|
||
|
|
$('#validationModal').modal('show');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(data) {
|
||
|
|
var errors = data.responseJSON.errors;
|
||
|
|
var errorMessage = '<ul>';
|
||
|
|
$.each(errors, function(index, error) {
|
||
|
|
console.log(error);
|
||
|
|
errorMessage += '<li>' + error[0] + '</li>';
|
||
|
|
});
|
||
|
|
errorMessage += '</ul>';
|
||
|
|
|
||
|
|
$('#validationModal .error-message').html(errorMessage);
|
||
|
|
$('#validationModal').modal('show');
|
||
|
|
button.removeAttr('disabled');
|
||
|
|
button.html(buttonHtml);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// $('.change-form-step').click(function() {
|
||
|
|
// var target = $(this).attr('data-target');
|
||
|
|
|
||
|
|
// if (target) {
|
||
|
|
// $('.form-steps').hide();
|
||
|
|
// $('.form-steps[data-step="' + target + '"]').show();
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
@endsection
|