Edit File - File Manager

Edit File: sendVerification.blade.php

@extends('layouts.delegate_join_request_layout')

@section('style')

@endsection

@section('content')
<div class="w-md-50  m-auto round10 p-3 form-cont">
    <form id="verification" class="container ">
        {{csrf_field()}}
        <h6 class="bold border-bottom pt-3 pb-3 mb-3">{{awtTrans(' كود التحقق ')}}</h6>
        <div class="p-5 text-center">
            <img src="{{URL::to('site/imgs/icons/code.png')}}" alt="">
        </div>
        <div class="form-group">
            <div style="direction: ltr;flex-wrap: nowrap;" class="row justify-content-center">
                <div class="pt-1 d-inline-block code-input pb-1 pl-0 pr-2">
                    <input name='code[]'  type='number' class='code-input form-control code' required/>
                </div>
                <div class="pt-1 d-inline-block code-input pb-1 pl-0 pr-2">
                    <input name='code[]' type='number' class='code-input form-control code' required/>
                </div>
                <div class="pt-1 d-inline-block code-input pb-1 pl-0 pr-2">
                    <input name='code[]' type='number' class='code-input form-control code' required/>
                </div>
                <div class="pt-1 d-inline-block code-input pb-1 pl-0 pr-2">
                    <input name='code[]' type='number' class='code-input form-control code' required/>
                </div>
            </div>
        </div>
        <div class="font12 text-center">
            <p> {{awtTrans('  لم تستلم الكود؟ ')}}  <a class="resend" href="#"> {{awtTrans(' إعادة الارسال ')}}  </a></p>
        </div>
        <button class="verification button1 w-100 mt-3">{{awtTrans('ارسال كود التحقق ')}}
            <i class="spinner-ajax fa fa-spinner fa-spin"></i>
        </button>
    </form>

</div>
@endsection

@section('scripts')
    <script>
        $(document).on('click','.verification',function (e) {
            e.preventDefault();

//get form data
            var form = $('#verification').get(0);
            var formData = new FormData(form);

//disable the submitted button and show he spinner
            $(this).prop('disabled', true).css({opacity: '0.5'});
            $('.spinner-ajax').css({display: 'inline-block'});

$.ajax({
                url: "{{route('user.verification.post')}}",
                type: "POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success: function (data) {
                    // undisable the submitted button and hide the spinner
                    $('.verification').removeAttr("disabled").css({opacity: '1'});
                    $('.spinner-ajax').css({display: 'none'});
                    //got a resposne?
                    if (data.key == 'success') {
                        swal({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'success',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                        location.assign(data.url);
                    } else {
                        swal({
                            title: data.msg,
                            type: 'error',
                            timer: 3000,
                            showCloseButton: true,
                            showConfirmButton: false,
                            animation: true,
                        }).catch(swal.noop);
                    }
                }
            });
        });
    </script>
    <script>
            const inputElements = [...document.querySelectorAll('input.code-input')]
            inputElements.forEach((ele,index)=>{
            ele.addEventListener('keydown',(e)=>{
                if(e.keyCode === 8 && e.target.value==='') inputElements[Math.max(0,index-1)].focus()
            })
            ele.addEventListener('input',(e)=>{
                const [first,...rest] = e.target.value
                e.target.value = first ?? ''
                if(index!==inputElements.length-1 && first!==undefined) {
                inputElements[index+1].focus()
                inputElements[index+1].value = rest.join('')
                inputElements[index+1].dispatchEvent(new Event('input'))
                }
            })
            })
            function onSubmit(e){
            e.preventDefault()
            const code = [...document.getElementsByTagName('input')]
                .filter(({name})=>name)
                .map(({value})=>value)
                .join('')
            }
    </script>
    <script>
        $('.resend').on('click',function(e){
            e.preventDefault();

$.ajax({
                url:"{{route('user.resend')}}",
                type:"GET",
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    if(data.key =='success') {
                        swal({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'success',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                        location.assign(data.location);
                    }else{
                        swal({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
    </script>
@endsection

Back to File Manager