reset_password.blade.php 4.19 KB
<div id="reset-password" class="modal">
    <div class="modal__body">
        <div class="modal__title left">Сбросить пароль</div>
        <div class="modal__text left">Введите новый пароль</div>
        <form id="reset-password-form" class="modal__sign" action="{{ route('reset_password') }}">
            <input type="hidden" name="email" value="{{request()->get('email')}}">
            <input type="hidden" name="token" value="{{request()->get('token')}}">

            <div class="modal__reg-item form-group">
                <label class="form-group__label">Пароль *</label>
                <div class="form-group__item">
                    <input type="password" name="password" class="input"
                           placeholder="**********">
                    <button type="button" class="eye">
                        <svg class="js-password-show">
                            <use xlink:href="{{ asset('images/sprite.svg#eye') }}"></use>
                        </svg>
                        <svg class="js-password-hide">
                            <use xlink:href="{{ asset('images/sprite.svg#eye-2') }}"></use>
                        </svg>
                    </button>
                    <span id="reset_password_error" class="employer_error-message"></span>
                </div>
            </div>
            <div class="modal__reg-item form-group">
                <label class="form-group__label">Подтвердить пароль *</label>
                <div class="form-group__item">
                    <input type="password" name="password_confirmation"
                           class="input" placeholder="**********">
                    <button type="button" class="eye">
                        <svg class="js-password-show">
                            <use xlink:href="{{ asset('images/sprite.svg#eye') }}"></use>
                        </svg>
                        <svg class="js-password-hide">
                            <use xlink:href="{{ asset('images/sprite.svg#eye-2') }}"></use>
                        </svg>
                    </button>
                </div>
                <span id="reset_password_confirmation_error" class="employer_error-message"></span>
            </div>

            <div class="modal__sign-item">
                <button id="reset-password-btn" type="submit" class="button">Сохранить</button>
            </div>
        </form>
    </div>
</div>
@include('modals.successful_reset_password')
<script>
    $(document).on('click', '#reset-password-btn', function (e) {
        e.preventDefault();
        const btnElm = $(this)
        const form = $('#reset-password-form');
        $.ajax({
            url: form.attr('action'),
            method: form.attr('method'),
            data: form.serialize(),
            beforeSend() {
                btnElm.attr('disabled', true)
            },
            success: function (response) {
                btnElm.attr('disabled', false)
                $.fancybox.close(true);
                $.fancybox.open({
                    src: '#reset-password-success',
                    type: 'inline',
                    opts: {touch: false}
                });

                const url = window.location.origin + window.location.pathname;
                window.history.replaceState({}, document.title, url);
            },
            error: function (jqXHR) {
                btnElm.attr('disabled', false)
                if (jqXHR.status === 422) {
                    let errors = jqXHR.responseJSON.errors;
                    for (let field in errors) {
                        if (errors.hasOwnProperty(field)) {
                            $(`#reset_${field}_error`).text(errors[field][0]);
                        }
                    }
                } else {
                    alert('Произошла ошибка. Попробуйте снова.');
                }
            }
        });
    }).ready(function () {
        if (window.location.hash === '#reset') {
            $.fancybox.open({
                src: '#reset-password',
                type: 'inline',
                opts: {
                    touch: false
                }
            });
        }
    })
</script>