elic-dev / laravel-math-captcha Goto Github PK
View Code? Open in Web Editor NEWA simple math captcha for Laravel form validation.
License: MIT License
A simple math captcha for Laravel form validation.
License: MIT License
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
laravel-math-captcha/src/MathCaptcha.php
Line 86 in 41768ea
Arr::random()
this function was added only in the laravel >= 5.5
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">×</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',
];
}
}
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.
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!
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.