elic-dev/laravel-math-captcha

A simple math captcha for Laravel form validation.

laravel-math-captcha's Issues

vendor:publish doesn't work

I receive too many spam during 2 days - about 60 messages and I decided to make it a little bit stronger, but none of this working.

php artisan vendor:publish --provider="ElicDev\MathCaptcha\MathCaptchaServiceProvider" --tag=config
php artisan vendor:publish --provider="ElicDev\MathCaptcha\MathCaptchaServiceProvider" --tag=lang

usually vendor:publish creates new file under config folder, but I see nothing.

captcha reset with delay

I use your captcha in ajax form. All is working, except that after successfull POST request I still see old captcha and if I try to send message again with the same captcha I got validation error.
It is changed only when I refresh the page after successfull POST request.
What is wrong?
And how to make button for manual captcha reset?

blade view

  <form method="POST" action="/modalform" method="POST" @submit.prevent="submitData()">
    @csrf

  <div class="bg-white">
    <div class="modalheader flex place-items-center text-center border-b cursor-pointer text-lg leading-6 font-medium text-gray-900">
        <h3 class="p-2 hover:bg-blue-500 hover:text-white"    
            @click="$dispatch('callback')"
            :class="callback ? 'bg-blue-500 text-white' : ''"
            >
            Перезвоните мне
        </h3>
        <h3 class="p-2 hover:bg-blue-500 hover:text-white"    
            @click="$dispatch('zamer')"
            :class="zamer ? 'bg-blue-500 text-white' : ''"
            >
            Записаться на замер
        </h3>
        <h3 class="p-2 hover:bg-blue-500 hover:text-white"    
            @click="$dispatch('eskiz')"
            :class="eskiz ? 'bg-blue-500 text-white' : ''"
            >
            Отправить эскиз
        </h3>
        <div class="p-2 place-self-stretch hover:bg-blue-500 hover:text-white" @click="closeModal()" >
            <span class="text-3xl">&times;</span>
        </div>
    </div>


    <div class="modalbody flex items-center w-full h-full p-5" 
        x-show="sent"
        x-text="message"
        x-transition:enter="transition ease-out duration-500"
        x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 "
        x-transition:leave-end="opacity-0 "
        >
    </div>


    <div class="modalbody flex items-start flex-wrap p-5" 
        x-show="!sent"
        x-transition:enter="transition ease-out duration-500"
        x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-200"
        >

      <div class="text-left w-full">

        <div class="mt-2 grid grid-cols-2 gap-x-4 gap-y-2 mb-2">

            <!-- Name --> 
            <div class="name" 
                :class="errorData.name ? 'text-red-500' : ''" 
                >
                <x-modules.label for="name" :value="__('auth.user.name')" />
                <div class="relative text-gray-400 focus-within:text-gray-800">
                    <div class="absolute flex border border-transparent left-0 top-0 h-full w-10" >
                        <x-modules.svg type="user-solid" class="flex items-center justify-center rounded-l bg-gray-100 h-full w-full px-0.5"/>
                    </div>
                    <x-modules.input id="name" class="block w-full pl-12" type="text" name="name" :value="old('name')" x-model="formData.name" placeholder="Введите имя" autofocus />
                </div>
                <span x-text="errorData.name" class="text-red-500 text-xs"> </span>
            </div>

            <!-- Phone -->
            <div class="phone" 
                :class="errorData.phone ? 'text-red-500' : ''"
                    >
                <x-modules.label for="phone" :value="__('auth.user.phone')" />
                <div class="relative text-gray-400 focus-within:text-gray-800">
                    <div class="absolute flex border border-transparent left-0 top-0 h-full w-10 ">
                        <x-modules.svg type="phone-ringing-outline" class="flex items-center justify-center rounded-l bg-gray-100 h-full w-full px-0.5"/>
                    </div>
                    <x-modules.input id="phone" class="block w-full pl-12" type="text" name="phone" :value="old('phone')" x-model="formData.phone" placeholder="Введите телефон" required autofocus />
                </div>
                <span x-text="errorData.phone" class="text-red-500 text-xs"> </span>
            </div>

            <!-- Email Address -->
            <div class="email" 
                x-show="zamer || eskiz" 
                :class="errorData.email ? 'text-red-500' : ''" 
                    >                
                <x-modules.label for="email" :value="__('email')" />
                <div class="relative text-gray-400 focus-within:text-gray-800">
                    <div class="absolute flex border border-transparent left-0 top-0 h-full w-10 ">
                        <x-modules.svg type="envelope-outline" class="flex items-center justify-center rounded-l bg-gray-100 h-full w-full px-0.5"/>
                    </div>
                    <x-modules.input id="email" class="block w-full pl-12" type="email" name="email" :value="old('email')" x-model="formData.email"  autofocus />
                </div>
                <span x-text="errorData.email" class="text-red-500 text-xs"> </span>
            </div>

            <!-- Address -->
            <div class="address" 
                x-show="zamer || eskiz" 
                :class="errorData.address ? 'text-red-500' : ''"
                    >
                <x-modules.label for="address" :value="__('auth.user.address')" />
                <div class="relative text-gray-400 focus-within:text-gray-800">
                    <div class="absolute flex border border-transparent left-0 top-0 h-full w-10 ">
                        <x-modules.svg type="facade" class="flex items-center justify-center rounded-l bg-gray-100 h-full w-full px-0.5"/>
                    </div>
                    <x-modules.input id="address" class="block w-full pl-12" type="text" name="address" :value="old('address')" x-model="formData.address" autofocus />
                </div>
                <span x-text="errorData.address" class="text-red-500 text-xs"> </span>
            </div>

            <!-- Upload field -->
            <div class="upload" x-show="eskiz">
                <label class="flex items-center justify-evenly p-2 bg-white text-gray-700 rounded-lg shadow-lg border border-gray-300 cursor-pointer hover:bg-blue-500 hover:text-white">
                    <x-modules.svg type="upload" class="w-8 h-8"/>
                    <span>Выберите файл</span>
                    <input type="file" class="hidden" multiple />
                </label>
            </div>

        </div>

        <!-- Message -->
        <div class="message">
            <x-modules.label for="message" :value="__('auth.user.message')" />
            <x-modules.textarea rows="2" id="message" class="block w-full" name="message" x-model="formData.message" placeholder="Кратко опишите ваш вопрос"/></textarea>
            <span x-text="errorData.message" class="text-red-500 text-xs"> </span>
        </div>

        <div class="mathcaptcha" :class="errorData.mathcaptcha ? 'text-red-500' : ''">
            <label class="" for="mathcaptcha">Введите результат функции:  {{ app('mathcaptcha')->label() }}</label>
            <div class="relative text-gray-400 focus-within:text-gray-800">
                <div class="absolute flex border border-transparent left-0 top-0 h-full w-10 ">
                    <x-modules.svg type="refresh" class="flex items-center justify-center rounded-l bg-gray-100 h-full w-full px-0.5" id="reload"/>
                </div>
                {!! app('mathcaptcha')->input(['class' => 'appearance-none rounded-md shadow-sm border-gray-300 placeholder-gray-400 focus:border-sky-500 focus:ring-1 focus:ring-sky-500 focus:outline-none valid:border-green-500 invalid:border-red-500 block w-full pl-12', 'id' => 'mathcaptcha', 'type' => 'text', 'name' => 'mathcaptcha', 'x-model' => 'formData.mathcaptcha']) !!}
            </div>
            <span x-text="errorData.mathcaptcha" class="text-red-500 text-xs"> </span>
        </div>   

        
      </div>
    </div>

    <div class="modalfooter bg-gray-50 px-4 py-3 sm:px-6 flex justify-between ">
      <x-modules.button text="Отмена" style="black-outline" class="px-4" @click.prevent="closeModal()" />
      <x-modules.button x-text="buttonLabel" style="blue-solid" class="px-4" @click.prevent="submitData()" />
    </div>

  </div>

  </form>


<script>

    function topbar() {
        return {
            mailTooltip: false,
            instagramTooltip: false,
            openModal: false,
            callback: true,
            zamer: false,
            eskiz: false,

            formData: {
              name: '',
              phone: '',
              email: '',
              address: '',
              message: '',
              mathcaptcha: '',
              _token: '{{ csrf_token() }}'
            },

            message: '',
            responseData: [],
            errorStates: {
              name: false,
              phone: false,
              email: false,
              address: false,
              message: false,
              mathcaptcha: false
            },
            errorData: [],
            loading: false,
            sent: false,
            buttonLabel: 'Отправить',


            resetFields() {
                this.formData.name = '',
                this.formData.phone = '',
                this.formData.email = '',
                this.formData.address = '',
                this.formData.message = '',
                this.formData.mathcaptcha = ''
            },


            closeModal() {
                this.openModal = false;
                this.callback = false;
                this.zamer = false;
                this.eskiz = false;
            },


            submitData() {

                axios.post('/modalform', this.formData)
                .then( (response) => {
                    this.buttonLabel = 'Отправляем...';
                    this.loading = true;
                    console.log(response);
                    this.resetFields();
                    this.sent = true;
                    this.message = 'Сообщение успешно отправлено!';
                    this.responseData = response.data;
                })

                .then( () => {
                    this.loading = false;
                    this.sent = false;
                    this.closeModal();
                    this.buttonLabel = 'Отправить';
                    this.message = '';
                })

                .catch( (error) => {
                    console.log(error);
                    this.message = 'Ooops! Что-то пошло не так!'
                    this.errorData = error.response.data.errors;
                    this.isErrorName();
                });
            },

            isErrorName() {
                if (error.response.data.errors.name === 'undefined') {
                    this.errorStates.name = false;
                } else {
                    this.errorStates.name = true;
                }
            },


        }

    }

</script>

routes/web.php

Route::post('/modalform',    'MainController@modalform')->name('modalform');

app/Http/Controllers/MainController.php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use App\Mail\Modalform;
use App\Http\Requests\ModalformRequest;

class MainController extends Controller
{
   
    public function modalform(ModalformRequest $request) {
        
        Mail::to( config('mail.to.address') )->send(new Modalform());
        app('mathcaptcha')->reset();

        return response()->json([
            'status'            => 'success',
            'messageHeader'     => 'Ваш вопрос отправлен!', 
            'messageContent'    => 'В ближайшее время мы свяжемся с вами.',
            ]);

    }

}

app/Mail/Modalform.php

use Illuminate\Http\Request;
use App\Http\Requests\ModalformRequest;
use Illuminate\Mail\Mailable;

class Modalform extends Mailable
{

    public function build(ModalformRequest $request)
    {
        $this->from( config('mail.from.address') )
             ->view('emails.modalform')
             ->withRequest($request);
    }
}

App/Http/Requests/ModalformRequest.php

<?php

use Illuminate\Foundation\Http\FormRequest;

class ModalformRequest extends FormRequest
{
    public function rules()
    {
        return [
            'name'      => 'bail|required|string|between:2,20',        
            'phone'     => 'bail|required',
            'email'     => 'bail|email:rfc|nullable',
            'address'   => 'bail|string|max:100|nullable',
            'message'   => 'bail|string|max:500|nullable',
            'mathcaptcha'   => 'required|mathcaptcha',
        ];
    }
}

Ajax Implementation Failed

I'm trying to implemented this package using ajax. But every ajax posted to the controller, the controller validator always return false.

This is my ajax
$.ajax({ url: 'front/anonauth', data: { mathcaptcha: $("#frmCreateAnon").serializeArray() }, dataType: 'json', method: 'post' }).done(function (response) { // the rest of the code....

My controller
public function validateCaptcha(Request $request) { return $this->validate($request, [ 'mathcaptcha' => 'required|mathcaptcha' ]); }

Any helps would be appreciated. Thank you

Method random does not exist

laravel-math-captcha/src/MathCaptcha.php

Line 86 in 41768ea

Arr::random(config('math-captcha.operands'))

Arr::random()
this function was added only in the laravel >= 5.5

Class mathcaptcha does not exist

Hi there,

I used your excellent package in one project of mine based on Laravel 5.5. No problem at all.

After that I tried to use it in another project of mine based on Laravel 5.4.
As explained in the guidelines, I have added the ServiceProvider to the providers array in app/config/app.php. ElicDev\MathCaptcha\MathCaptchaServiceProvider::class,

But still each time I try to use the package, like fo instance calling: app('mathcaptcha')->reset();
I get the same error: ReflectionException - Class mathcaptcha does not exist

Would you have any solution for that?

( I of course did composer update and composer dump-autoload already)

Thanks!

config settings explanation

What is the meaning of settings rand-min and rand-max?
From short description in comments I quessed that it should be min and max values of captcha result, but it is no like that.

I adjust like this

'rand-min' => 2,
'rand-max' => 100,
'text' => true,

And I see this on webpage mathcaptcha::math-captcha.numbers.169 plus mathcaptcha::math-captcha.numbers.72 Result will be more than 100.

Redirected to 404 page after a successful login

Hi,

I'm getting redirected to 404 page after login and when I go to the home page I find that I logged in correctly which means the captcha redirects to a wrong page which doesn't exist how can I solve this?

http://127.0.0.1:9500/404

Always get redirected to 404 but if captcha code is wrong I get redirected back to the login page with the label of wrong code which is fine.

when I stop the login process from AuthenticatesUsers like this

die($this->sendLoginResponse($request));

I get

HTTP/1.0 302 Found Cache-Control: no-cache, private Date: Wed, 10 Oct 2018 13:01:35 GMT Location: http://127.0.0.1:9500/404 Redirecting to http://127.0.0.1:9500/404.