Verification failed and Tinymce

[StrangerGithuber]

Hi
No idea what is the problem but the input data is not marked as spam and the security part is disabled all of them for checking if the verification will be valid. That didn't help.

Data:

I checked in "Verification simulation" but it doesn't say much:

So it doesn't say exactly what is the problem, it just gives "Field not valid."

What can be the problem?
Another question, how I can send the Tinymce data to mosparo?

[zepich]

Hi @StrangerGithuber

Thank you very much for your post.

Verification simulation

The verification simulation shows you which values you should have sent or received, if you directly contacted the API (not with the API client), so that you can build your integration. If you use the mosparo API client, you do not really need the verification simulation.

Failed validation

That's an excellent question. It looks like the verification does not send the form data to the API. I guess the API request to verify is done, but not with the form data. Is this done with the Livewire form? Can you share the code you used to verify the submission?

TinyMCE field

You have to store the value of the TinyMCE editor in the original textarea field so that mosparo can process it. For this, you have to use either the onBeforeGetFormData or onGetFieldValue event handlers in the mosparo frontend script and save the TinyMCE editor value:

m = new mosparo('captcha-box', 'https://{{ env('CAPTCHA_DOMAIN', 'captcha') }}', '{{ env('CAPTCHA_UUID', 'captcha') }}', '{{ env('CAPTCHA_PUBLIC', 'captcha') }}', {
        loadCssResource: true,
...
        onBeforeGetFormData: function (formElement) {
            console.log('onBeforeGetFormData', formElement);

            tinymce.triggerSave();
        },
....

For more information, see the TinyMCE documentation here: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.root/#triggerSave

I'm looking forward to your feedback.

Kind regards,

zepich

[StrangerGithuber]

Hi
This didn't do anything because the text is not showed in mosparo:

        onBeforeGetFormData: function (formElement) {
            console.log('onBeforeGetFormData', formElement);

            tinymce.triggerSave();
        },

Frontend livewire:

<div>
    <section>
        <div class="bannerimg cover-image" style="background: url({{ asset('assets/img/bar.png') }}) center center;">
            <div class="header-text mb-0">
                <div class="container">
                    <div class="row text-white">
                        <div class="col">
                            <h1 class="mb-0">{{ lang('Open Guest Ticket', 'tickets') }}</h1>
                        </div>
                        <div class="col-auto">
                            <nav class="navbar navbar-expand-md" aria-label="breadcrumb"
                                 style="--bs-breadcrumb-divider: '>';--bs-breadcrumb-divider-color: #ff0000f;"
                                 data-bs-theme="dark">
                                <div class="container-fluid">
                                    <ol class="text-center d-flex justify-content-center align-items-center breadcrumb">
                                        <li class="breadcrumb-item"><a class="link-warning"
                                                                       href="{{ route('welcome', ['lang' => app()->getLocale() ]) }}">{{ lang('Home', 'tickets') }}</a>
                                        </li>
                                        <li class="breadcrumb-item active" aria-current="page">
                                            <a href="{{ route('guest/open-ticket', ['lang' => app()->getLocale() ]) }}"
                                               class="text-white">{{ lang('Open Guest Ticket', 'tickets') }}</a>
                                        </li>
                                    </ol>
                                </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section data-select2-id="select2-data-32-nb1c">
        <div class="cover-image sptb" data-select2-id="select2-data-31-kuf3">
            <div class="container" data-select2-id="select2-data-30-38hp">
                <div class="row justify-content-center " data-select2-id="select2-data-29-ytsc">
                    <div class="col-xl-9" data-select2-id="select2-data-28-42jz">

                        <div class="card" data-select2-id="select2-data-27-n75k">
                            <div class="card-header  border-0">
                                <h4 class="card-title">{{ lang('Guest Ticket', 'tickets') }}</h4>
                            </div>
                            <form wire:submit.prevent="submit">
                                <div class="card-body pb-0">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <label class="form-label mb-0 mt-2">Email <span
                                                        class="text-red">*</span></label>
                                            </div>
                                            <div class="col-md-9">
                                                <input type="email" class="form-control" placeholder="Email"
                                                       name="email" autocomplete="off" wire:model="form.email" required>
                                                @error('form.email')
                                                <div class="text-danger alert-message">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group ">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <label class="form-label mb-0 mt-2">Subject <span
                                                        class="text-red">*</span></label>
                                            </div>
                                            <div class="col-md-9">
                                                <input type="text" id="subject" maxlength="25" class="form-control "
                                                       placeholder="Subject" name="subject" value="" autocomplete="off"
                                                       wire:model="form.subject" required>
                                                <small class="text-muted float-end mt-1" id="subjectmaxtext">
                                                    Maximum <b>10</b> Characters
                                                </small>
                                                <div>
                                                    @error('form.subject')
                                                    <div class="text-danger alert-message">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @if (!is_null($this->form->categories))
                                        @if (count($this->form->categories) > 0)
                                            <div class="form-group">
                                                <div class="row">
                                                    <div class="col-md-3">
                                                        <label class="form-label mb-0 mt-2">
                                                            {{ lang('Category') }}
                                                            <span class="text-red">*</span>
                                                        </label>
                                                    </div>
                                                    <div class="col-md-9">
                                                        <select class="form-control"
                                                                required
                                                                wire:model.defer="form.selectedCategory"
                                                                name="categories"
                                                                id="categories">
                                                            <option value="0"
                                                                    style="display: none;">{{ lang('Select Category') }}</option>
                                                            @foreach ($this->form->categorytrans as $category)
                                                                <option value="{{ $category['id'] }}">
                                                                    {{ $category['text'] }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @error('form.selectedCategory')
                                                        <div class="text-danger alert-message">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                    @if (!is_null($this->form->projects))
                                        @if (count($this->form->projects) > 0)
                                            @if (!is_null($this->form->categoryproject))
                                                @if (count($this->form->categoryproject) > 0)
                                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-md-3">
                                                                <label class="form-label mb-0 mt-2">
                                                                    {{ lang('Project') }}
                                                                    <span class="text-red">*</span>
                                                                </label>
                                                            </div>
                                                            <div class="col-md-9">
                                                                <div class="preproj">
                                                                    <select class="form-control"
                                                                            required
                                                                            name="projects"
                                                                            id="projects"
                                                                            wire:model.defer="form.selectedproject">
                                                                        <option value="0"
                                                                                style="display: none;">{{ lang('Select Project') }}</option>
                                                                        @foreach ($this->form->categoryproject as $project)
                                                                            <option
                                                                                value="{{ Crypt::encryptString($project->id) }}">
                                                                                {{ $project->name }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                                @error('form.selectedproject')
                                                                <div
                                                                    class="text-danger alert-message">{{ $message }}</div>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endif
                                        @endif
                                    @endif

                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-3"><label class="form-label mb-0 mt-2">Message <span
                                                        class="text-red">*</span></label>
                                            </div>
                                            <div class="col-md-9">
                                                <div wire:ignore>
                                                    <textarea id="public_editor" name="public_editor"
                                                              wire:model.defer="form.description"></textarea>
                                                </div>
                                                @error('form.description')
                                                <div class="text-danger alert-message">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-around">
                                        <div class="form-group">
                                            <label class="custom-control form-checkbox">
                                                <input type="checkbox" class="custom-control-input " value="agreed"
                                                       id="agree_terms" name="agree_terms" autocomplete="off" wire.model="form.termsaccepted">
                                                <span class="custom-control-label">I agree with
                                                <a href="#" class="text-primary"
                                                   target="_blank">Terms &amp; Services</a> and
                                                <a href="#" class="text-primary" target="_blank">Privacy Policy</a>
                                            </span>
                                            </label>
                                            @error('form.termsaccepted')
                                            <div class="text-danger alert-message">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-around">
                                        <div class="form-group" wire:ignore>
                                            <div id="captcha-box"></div>
                                            @error('termsaccepted')
                                            <div class="text-danger alert-message">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="card-footer card-block d-flex flex-column">
                                        <div class="align-self-center mt-2">
                                            <button type="submit" class="btn btn-danger btn-lg" id="createticketbtn">
                                                Create
                                                Ticket
                                            </button>

                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
</section>
@push('scripts')
    @script
    <script>
        window.onload = function () {
            var m;
            m = new mosparo('captcha-box', 'https://{{ env('CAPTCHA_DOMAIN', 'captcha') }}', '{{ env('CAPTCHA_UUID', 'captcha') }}', '{{ env('CAPTCHA_PUBLIC', 'captcha') }}', {
                loadCssResource: true,
                onCheckForm: function (valid) {
                    console.log('onCheckForm', valid);

                    //  Replace the `mosparoSubmitToken` and `mosparoValidationToken` with the names of your properties in the component
                    @this.set('form.mosparoSubmitToken', document.querySelector('input[name="_mosparo_submitToken"]').value);
                    @this.set('form.mosparoValidationToken', document.querySelector('input[name="_mosparo_validationToken"]').value);
                },

                onBeforeGetFormData: function (formElement) {
                    console.log('onBeforeGetFormData', formElement);

                    tinymce.triggerSave();
                },
            });
        };

        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('categories').addEventListener('change', function () {
                processOption(this.value, 'categories');
            });
        });

        waitForElm('#categories').then((elm) => {
            if (elm.length > 2) {
                document.getElementById('categories').addEventListener('change', function () {
                    console.log('Category Selected: ' + $(this).val());
                    Livewire.dispatch('selected-category', {value: $(this).val()});
                });
            }
        });

        waitForElm('#projects').then((elm) => {
            if (elm.length > 2) {
                document.getElementById('projects').addEventListener('change', function () {
                    console.log('Project Selected: ' + $(this).val());
                    Livewire.dispatch('selected-project', {value: $(this).val()});
                });
            }
        });

        /* // Get value using .val()
         $('#categories').on('change', function () {
             var selectedValue = $(this).val();
             console.log('Change: ' + selectedValue);
             //  $wire.dispatch('selected-category', {
             //      value: `${selectedValue}`
             //  });
             //Livewire.dispatch('selected-category', { value: selectedValue });
         });

         $('#categories').on('select2:select', function (e) {
             var data = e.params.data;
             console.log('Select: ' + data.id);

             var selectedValue = $(this).val();
             Livewire.dispatch('selected-category', { value: data.id });

             setTimeout(() => {
                  $('#projects').select2();
             }, 500);

             /!*waitForElm('#projects').then((elm) => {
                 if(elm.length > 2){
                     setTimeout(() => {
                         $('#projects').on('select2:select', function (e) {
                             var data = e.params.data;
                             console.log('Select project: ' + data.id);
                             Livewire.dispatch('selected-project', { value: data.id })
                             $('#projects').select2({
                 placeholder: 'Select Project',
             });
                         });
                     }, 1000);
                 }
             });*!/
         });*/
    </script>
    @endscript
@endpush
</div>

Backend Livewire:

<?php

namespace App\Livewire\Guest;

use App\Livewire\Forms\Guest\OpenTicketGuest;
use App\Models\Category;
use App\Models\Project;
use App\Rules\CheckIfEncrypted;
use Illuminate\Contracts\Encryption\DecryptException;
use Illuminate\Support\Facades\Crypt;
use Illuminate\Support\Facades\Route;
use Livewire\Attributes\On;
use Livewire\Attributes\Validate;
use Livewire\Component;
use Illuminate\Support\Facades\Log;
use Livewire\Livewire;
use Mosparo\ApiClient\Exception;
use Traversable;
use Illuminate\Validation\Rule;
use Mosparo\ApiClient\Client;

class OpenTicket extends Component
{
    public OpenTicketGuest $form;
    public function mount()
    {
        //Log::info('OpenTicket is loaded');
        //Log::warning('OpenTicket is a warning message.');
        //Log::error('OpenTicket is an error message.');

        $this->form->categories = Category::where('type', 'tickets')->get();
        $this->form->projects = Project::all();

        if ($this->form->categories->count() > 0) {
            $categorytrans = [];

            foreach ($this->form->categories as $category) {
                if (isset($category->id)) {
                    $categorytrans[] = [
                        'id' => Crypt::encryptString($category->id),
                        'text' => cat_trans($category->id)
                    ];
                } else {
                    Log::error('UUID not set for category: ' . $category->id);
                }
            }

            $collection = collect($categorytrans);

            $sorted = $collection->sortBy('text', SORT_LOCALE_STRING);

            $this->form->categorytrans = $sorted->values()->toArray();

            if (is_array($this->form->categorytrans) || $this->form->categorytrans instanceof Traversable) {
                // Proceed with array operations
            } else {
                Log::error('categorytrans is not an array or Traversable');
            }

        } else {
            Log::error('No categories found for tickets.');
        }
    }

    #[On('selected-category')]
    public function selectedCategory()
    {
        //echo $this->form->selectedCategory;
        //Log::info('This is an informational message.');
        //Log::warning('This is a warning message.');
        //Log::error('This is an error message.');
        Log::info('Selected category encrypted updated to: ' . $this->form->selectedCategory);
        $id = $this->form->selectedCategory;

        try {
            $id = Crypt::decryptString($id);
        } catch (DecryptException $e) {
            $id = null;
        }

        Log::info('Selected category decrypted updated to: ' . $id);

       $this->form->reset(['categoryproject', 'projects']);
        $this->form->projects = Project::all();
        Log::info('Reset?: ' . $this->form->categoryproject);
        if (!is_null($this->form->projects)) {
            if (count($this->form->projects) > 0 && count($this->form->categories) > 0) {
                $selectedcat = Category::where('id', $id)->get();

                if ($selectedcat) {
                   // $this->form->selectedCategory = $id;
                    foreach ($selectedcat as $category) {
                        $this->form->categoryproject = $category->projects()->wherePivot('type', 'Tickets')->orderBy('name', 'ASC')->get();
                    }
                    Log::info('Adatok: ' . $this->form->categoryproject);
                }
            }
        }
    }

    #[On('selected-project')]
    public function selectedProject($value)
    {
        //echo $this->form->selectedCategory;
        //Log::info('This is an informational message.');
        //Log::warning('This is a warning message.');
        //Log::error('This is an error message.');
        Log::info('Selected project updated to: ' . $value);
        $id = null;

        try {
            $id = Crypt::decryptString($value);
        } catch (DecryptException $e) {
            $id = null;
        }


        $this->form->selectedproject = $id;
    }

    public function submit(){
        $client = new Client('https://' . env('CAPTCHA_DOMAIN', 'captcha'), env('CAPTCHA_PUBLIC', 'captcha'), env('CAPTCHA_PRIVATE', 'captcha'), [ /* Options for Guzzle */ ]);

        try {
            $result = $client->verifySubmission($this->form->all(), $this->form->mosparoSubmitToken, $this->form->mosparoValidationToken);
        } catch (Exception $e) {
            dd($this->form->all());
        }

        if ($result->isSubmittable()) {
            dd('Success');
        } else {
            dd($this->form->all());
        }
        $this->resetErrorBag();
        $this->validate();


    }

    public function render()
    {
        return view('livewire.guest.open-ticket');
    }
}

Livewire form:

<?php

namespace App\Livewire\Forms\Guest;

use App\Rules\CheckIfEncrypted;
use Livewire\Attributes\Validate;
use Livewire\Form;
use Mosparo\ApiClient\Client;
use Mosparo\ApiClient\Exception;

class OpenTicketGuest extends Form
{
    public $categories;
    public $projects;
    public $categoryproject;
    public $categorytrans;

    public $selectedCategory;

    public $selectedproject;

    public $email;

    public $subject;

    public $description;

    public $termsaccepted;
    public $mosparoSubmitToken = '';

    public $mosparoValidationToken = '';

    /*  protected function messages(): array {
          return RuleMessages('en');
      }*/

    protected function rules()
    {
        return [
            'selectedCategory' => [
                'required',
                new CheckIfEncrypted,
            ],
            'selectedproject' => [
                'required',
                new CheckIfEncrypted,
            ],
            'email' => 'required|email:rfc,dns',
            'subject' => 'required|string|max:24|min:4',
            'description' => 'required|string|max:2500|min:12',
        ];
    }

    protected function messages(){
        return RuleMessages();
    }

    protected function validationAttributes()
    {
        return [
            'selectedCategory' => lang('category', 'other'),
            'selectedproject' => lang('project', 'other'),
            'email' => lang('email', 'other'),
            'subject' => lang('subject', 'other'),
            'description' => lang('message', 'other'),
        ];
    }
}

Big mess in the code but hopefully you will understand. The public_editor element is tinymce part.
I am using https://github.com/mosparo/php-api-client in the backend.

UPDATE: Tinymce works after I ran the php artisan optimize:clear however stays to not be valid the values.
UPDATE 2: Ok now I get the data while debug the models. However I get error to this: "$result = $client->verifySubmission($this->form->all(), $this->form->mosparoSubmitToken, $this->form->mosparoValidationToken);"

The error message: "Mosparo\ApiClient\RequestHelper::cleanupFormData(): Argument #1 ($formData) must be of type array, Illuminate\Database\Eloquent\Collection given, called in C:\laragon\www\help\vendor\mosparo\php-api-client\src\RequestHelper.php on line 107"

However $this->form->all() is array and not collection.

[zepich]

Hi @StrangerGithuber

Thank you very much for your post with all the details.

The problem with the array issue is that $this->form->all() is an array. But in this array, somewhere, is an object of type Illuminate\Database\Eloquent\Collection stored. Can you dump the data and see what is in there? You have to convert that to an array too (probably with ->toArray()?).

Please let me know if you find such an object in that array.

Kind regards,

zepich

[StrangerGithuber]

Hi @zepich
->toArray() didn't help because the form->all() is array already.
The problem was that for example projects and categories models have their own array because I list all of the projects and categories in them and when I check "Mosparo\ApiClient\RequestHelper::cleanupFormData()" line 107 then I see double arrays are not proceeded but just 1 main array. Array within array is not array according that cleanupFormData() function. Maybe I am saying wrong however that didn't work. So what I did is I moved these models to Livewire backend from Livewire form:

    public $categories;
    public $projects;
    public $categoryproject;
    public $categorytrans;

This way mosparo will not checking those models and just checking the form livewire. which are in the $this->form->all().

Now the validation is almost full however not fully:

When I debug what is in form then everything is filled but in mosparo is empty the public_editor (which I guess I need to fix from livewire side because now it stopped to show the text), not sent the "projects" and it thinks the "categories" is 0.

[zepich]

Hi @StrangerGithuber

Okay, great, thank you for the update!

Let's discuss the TinyMCE first. I guess you see an error message in the JavaScript console after you click on the mosparo box, right? I think tinymce is unavailable, and that will show an error message.

If so, add the required code to the file where you initialize TinyMCE. There, you should have the tinymce object

For that, you can use something like this:

document.addEventListener('before-get-form-data', function (ev) {
    tinymce.triggerSave();
});

Kind regards,

zepich

[StrangerGithuber]

Alright figured out. Thanks for the help.
So important stuff with Livewire and mosparo that the model name and the html part the "name" part should be the same or creating new array for that. In my case in html are these which need to check: subject, email, public_editor (which is for me $this->tinymce because I will add dynamic way the name to different livewire component where the tinymce will appear), projects, categories.

So I created new array before I will submit to verify:

$prepdata = [
          'subject' => $this->form->subject,
          'email' => $this->form->email,
          $this->tinymce => $this->form->description,
          'projects' => $this->form->selectedproject,
          'categories' => $this->form->selectedCategory
        ];

Sending with php api client:

$result = $client->verifySubmission($prepdata, $this->form->mosparoSubmitToken, $this->form->mosparoValidationToken);

Now the verification is correct.

Yeah this code helped:

 onBeforeGetFormData: function (formElement) {
                tinymce.triggerSave();
 },

So full javascript looks like this:

let m = new mosparo('captcha-box', 'https://{{ env('CAPTCHA_DOMAIN', 'captcha') }}', '{{ env('CAPTCHA_UUID', 'captcha') }}', '{{ env('CAPTCHA_PUBLIC', 'captcha') }}', {
            loadCssResource: true,
            onCheckForm: function (valid) {
                console.log('onCheckForm', valid);

                //  Replace the `mosparoSubmitToken` and `mosparoValidationToken` with the names of your properties in the component
                @this.set('form.mosparoSubmitToken', document.querySelector('input[name="_mosparo_submitToken"]').value);
                @this.set('form.mosparoValidationToken', document.querySelector('input[name="_mosparo_validationToken"]').value);
            },

            onBeforeGetFormData: function (formElement) {
                tinymce.triggerSave();
            },
        });

It was big challenge but I learned a lot. Thanks again for the help. :)

[zepich]

Hi @StrangerGithuber

Thank you very much for your feedback and for sharing the solution! I'm happy that you were able to manage it to work.

This kind of experience is the best to learn new things!

Kind regards,

zepich