مشاهدة ملف: create.blade.php

@extends('layouts.customer')

@section('title','Sending Domain Create')

@section('extra-css')
    <link rel="stylesheet" href="{{asset('plugins/select2/css/select2.min.css')}}">
    <style>
        .select2-container--default .select2-selection--single {
            min-height: 38px;
            border-radius: 4px 0 0 4px;
        }
        #dnsKey{
            background: #d3d3d36b;
            padding: 3px 8px;
            border-radius: 5px;
            margin: 6px 5px;
        }
        #pubKey{
            background: #d3d3d36b;
            padding: 3px 8px;
            border-radius: 5px;
            margin: 6px 5px;
            line-break: anywhere;
        }
        #dkim_key{
            background: #d3d3d36b;
            padding: 3px 8px;
            border-radius: 5px;
            margin: 6px 5px;
            line-break: anywhere;
            overflow-y: scroll;
            height: 100px;
            width: 100%;
        }
        #spf_key{
            background: #d3d3d36b;
            padding: 3px 8px;
            border-radius: 5px;
            margin: 6px 5px;
            line-break: anywhere;
            width: 100%;
        }
        .desc-section{
            line-height: 27px;
        }
        .modal-dialog {
            max-width: 960px!important;
        }
    </style>
@endsection

@section('content')
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-12 mx-auto col-sm-10 mt-3">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">@lang('New Domain')</h2>
                        <a class="btn btn-info float-right" href="{{route('customer.domain.index')}}">@lang('customer.back')</a>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form method="post" role="form" id="contactForm" action="{{route('customer.domain.store')}}">
                        @csrf
                        <div class="card-body">
                            @include('customer.domain.form')
                        </div>
                        <!-- /.card-body -->

                        <div class="card-footer">
                            <button type="button" id="continue" class="btn btn-primary">{{trans('customer.continue')}}</button>
                            <button type="submit" class="btn btn-primary d-none">@lang('customer.submit')</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.card -->
        </div>
        <!-- /.row -->
    </section>
    <button type="button" class="btn btn-primary d-none" id="authorizeDomainButton" data-toggle="modal" data-target="#authorizeDomainModal"></button>
    <div class="modal fade" id="authorizeDomainModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title text-center-domain-title" id="exampleModalLabel">Authorize this domain</h5>
                    <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fas fa-times"></i></span>
                    </button>
                </div>
                <p class="text-center-domain-title">@lang('customer.authorize_your_domain')</p>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="dkim_key">1. @lang('customer.dkim_key') "<span id="domain_name_sector"></span>" @lang('customer.to_small')</label>
                        <p id="dkim_key"></p>
                        <button type="button" class="btn btn-primary ml-2 mt-2 mb-4 float-right verify_btn" id="dkim_key_verify_btn">Verify</button>
                    </div>
                    <div class="form-group">
                        <label for="spf_key">2. @lang('customer.spf_key') "<span class="domain_name"></span>" @lang('customer.to_small')</label>
                        <p id="spf_key"></p>
                        <button type="button" class="btn btn-primary ml-2 mt-2 mb-4 float-right verify_btn" id="spf_key_verify_btn">Verify</button>
                    </div>

                    <div class="form-group">
                        <label for="dnsKey">3. @lang('customer.text') "<span class="domain_name"></span>" @lang('customer.to_small')</label>
                        <p id="dnsKey"></p>
                        <button type="button" class="btn btn-primary ml-2 mt-2 mb-4 float-right verify_btn" id="text_verify_btn">Verify</button>
                    </div>

                    <div class="form-group">
                        <label for="pubKey">4. @lang('customer.dmarc_key') "_dmarc.<span class="domain_name"></span>" @lang('customer.to_small')</label>
                        <p id="pubKey"></p>
                        <button type="button" class="btn btn-primary ml-2 mt-2 mb-2 float-right verify_btn" id="dmarc_key_verify_btn">Verify</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('extra-scripts')
    <script>

        $(document).on('click', '#continue', function(e){
            e.preventDefault();
            const url = window.location.href;
            const arr = url.split("/");
            const domain = arr[2];
            const name = $('input[name="name"]').val();

            $.ajax({
                type:'POST',
                url:'{{route('customer.dkim.generator')}}',
                data:{
                    "_token":'{{csrf_token()}}',
                    name:name,
                    domain:domain,
                },

                success:function(res){
                    if(res.status=='success'){
                        console.log(res)
                        $('.ssh_key_section').removeClass('d-none');
                        $('#continue').addClass('d-none');
                        $('.domain_name').text(name);
                        $('#dkim_key_verify_btn').attr('key', res.dkim_key).attr('name', 'dkim_key').attr('domain_key',res.dnskey).attr('data-id',res.id);
                        $('#spf_key_verify_btn').attr('key', res.spf_key).attr('name', 'spf_key').attr('domain_key',name).attr('data-id',res.id);
                        $('#text_verify_btn').attr('key', res.mail_code).attr('name', 'text').attr('domain_key',name).attr('data-id',res.id);
                        $('#dmarc_key_verify_btn').attr('key', res.dmarc_key).attr('name', 'dmarc_key').attr('domain_key','_dmarc.'+name).attr('data-id',res.id);

                        $('#domain_name_sector').text(res.dnskey);
                        $('#spf_key').text(res.spf_key);
                        $('#dkim_key').text(res.dkim_key);
                        $('#dnsKey').removeClass('d-none').text(res.mail_code);
                        $('#pubKey').removeClass('d-none').text(res.dmarc_key);
                        $('#authorizeDomainButton').trigger('click');
                    }else{
                        toastr.error(res.message, {timeOut: 9000});
                    }
                }
            })
        });

        $(document).on('click', '.verify_btn', function (e){
            e.preventDefault();
            const key = $(this).attr('key');
            const name = $(this).attr('name');
            const domain_key = $(this).attr('domain_key');
            const id = $(this).attr('data-id');
            const that = this;
            $(this).addClass('disabled').attr('disabled','true');

            $.ajax({
                type:'POST',
                url:'{{route('customer.domain.verification')}}',
                data:{
                    key:key,
                    name:name,
                    domain_key:domain_key,
                    id:id,
                    _token:'{{csrf_token()}}'
                },
                success:function (res){
                    if(res.status=='success'){
                        toastr.success(res.message, {timeOut: 9000});
                    }else{
                        $(that).removeClass('disabled').removeAttr('disabled');
                        toastr.error(res.message, {timeOut: 9000});

                    }
                }
            })
        })
    </script>
@endsection