Captcha for Laravel 5/6/7/8

Overview

Captcha for Laravel 5/6/7

Build Status Scrutinizer Code Quality Latest Stable Version Latest Unstable Version License Total Downloads

A simple Laravel 5/6 service provider for including the Captcha for Laravel.

for Laravel 4 Captcha for Laravel Laravel 4

Preview

Preview

Installation

The Captcha Service Provider can be installed via Composer by requiring the mews/captcha package and setting the minimum-stability to dev (required for Laravel 5) in your project's composer.json.

{
    "require": {
        "laravel/framework": "5.0.*",
        "mews/captcha": "~2.0"
    },
    "minimum-stability": "dev"
}

or

Require this package with composer:

composer require mews/captcha

Update your packages with composer update or install with composer install.

In Windows, you'll need to include the GD2 DLL php_gd2.dll in php.ini. And you also need include php_fileinfo.dll and php_mbstring.dll to fit the requirements of mews/captcha's dependencies.

Usage

To use the Captcha Service Provider, you must register the provider when bootstrapping your Laravel application. There are essentially two ways to do this.

Find the providers key in config/app.php and register the Captcha Service Provider.

    'providers' => [
        // ...
        'Mews\Captcha\CaptchaServiceProvider',
    ]

for Laravel 5.1+

    'providers' => [
        // ...
        Mews\Captcha\CaptchaServiceProvider::class,
    ]

Find the aliases key in config/app.php.

    'aliases' => [
        // ...
        'Captcha' => 'Mews\Captcha\Facades\Captcha',
    ]

for Laravel 5.1+

    'aliases' => [
        // ...
        'Captcha' => Mews\Captcha\Facades\Captcha::class,
    ]

Configuration

To use your own settings, publish config.

$ php artisan vendor:publish

config/captcha.php

return [
    'default'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
        'math'      => true,  //Enable Math Captcha
        'expire'    => 60,    //Stateless/API captcha expiration
    ],
    // ...
];

Example Usage

Session Mode:

    // [your site path]/Http/routes.php
    Route::any('captcha-test', function() {
        if (request()->getMethod() == 'POST') {
            $rules = ['captcha' => 'required|captcha'];
            $validator = validator()->make(request()->all(), $rules);
            if ($validator->fails()) {
                echo '<p style="color: #ff0000;">Incorrect!</p>';
            } else {
                echo '<p style="color: #00ff30;">Matched :)</p>';
            }
        }
    
        $form = '<form method="post" action="captcha-test">';
        $form .= '<input type="hidden" name="_token" value="' . csrf_token() . '">';
        $form .= '<p>' . captcha_img() . '</p>';
        $form .= '<p><input type="text" name="captcha"></p>';
        $form .= '<p><button type="submit" name="check">Check</button></p>';
        $form .= '</form>';
        return $form;
    });

Stateless Mode:

You get key and img from this url http://localhost/captcha/api/math and verify the captcha using this method:

    //key is the one that you got from json response
    // fix validator
    // $rules = ['captcha' => 'required|captcha_api:'. request('key')];
    $rules = ['captcha' => 'required|captcha_api:'. request('key') . ',default'];
    $validator = validator()->make(request()->all(), $rules);
    if ($validator->fails()) {
        return response()->json([
            'message' => 'invalid captcha',
        ]);

    } else {
        //do the job
    }

Return Image

captcha();

or

Captcha::create();

Return URL

captcha_src();

or

Captcha::src('default');

Return HTML

captcha_img();

or

Captcha::img();

To use different configurations

captcha_img('flat');

Captcha::img('inverse');

etc.

Based on Intervention Image

^_^

Links

Comments
  • Captcha image not displaying

    Captcha image not displaying

    Hello,

    Just trying this for the first time and can't get it to work in my dev environment. The image is just not rendering. After the page loads, the source of the image is: http://localhost/site/public/captcha?454234

    When going to the image URL the error the browser throws is: "The image cannot be displayed because it contains errors"

    I'm working on a Windows dev environment, already checked to make sure the necessary dlls were installed. Also published my site to a staging Unix environment and still having the same results.

    Is this a bug or something I'm missing?

    opened by danboh 9
  • 1.0.5 development updates

    1.0.5 development updates

    Over on my side, I released fork versions for my own use: 1.0.2, 1.0.3, 1.0.4, 1.0.5.

    I hope to merge 1.0.5 into the main repository. These are the changelog:

    • removed vendor from repository
    • added Travis CI config
    • updated PHPUnit config
    • PSR-2 compliance update
    • updated dependency stability in composer to Stable (instead of dev)
    • removed static properties and methods in Captcha, as singleton has already been used (for testability)
    • added improved random string generator, removed characters that can cause homoglyphs
    • added 3 more backgrounds
    • added new font: FreckleFace with license
    • replaced rand() with either mt_rand() or array_rand()
    • updated default configurations
      • 6 characters instead of 5
      • spacing between characters are randomized (from config selection)
    • improved validation loading, plus added default error message for captcha
    • added Response making (as proposed by @splinter89 but slightly different)
    • added documentation to config
    • used Config::get('app.key') in the hash process (app-specific hashes)
    • Forget sessionhash on check to prevent replay attacks
    • option for numeric captcha (idea by @j0an)
    • captcha hash are form specific / referrer specific
    • updated PSR-0 to PSR-4 autoloader
    opened by mauris 9
  • Support for Laravel 7.0

    Support for Laravel 7.0

    Problem 1 - Conclusion: remove laravel/framework v7.0.2 - Conclusion: don't install laravel/framework v7.0.2 - mews/captcha 3.0.0 requires illuminate/session ~5.0|^6.0 -> satisfiable by laravel/framework[6.x-dev], illuminate/session[5.0.x-dev, 5.1.x-dev, 5.2.x-dev, 5.3.x-dev, 5.4.x-dev, 5.5.x-dev, 5.6.x-dev, 5.7.17, 5.7.18, 5.7.19, 5.7.x-dev, 5.8.x-dev, 6.x-dev, v5.0.0, v5.0.22, v5.0.25, v5.0.26, v5.0.28, v5.0.33, v5.0.4, v5.1.1, v5.1.13, v5.1.16, v5.1.2, v5.1.20, v5.1.22, v5.1.25, v5.1.28, v5.1.30, v5.1.31, v5.1.41, v5.1.6, v5.1.8, v5.2.0, v5.2.19, v5.2.21, v5.2.24, v5.2.25, v5.2.26, v5.2.27, v5.2.28, v5.2.31, v5.2.32, v5.2.37, v5.2.43, v5.2.45, v5.2.6, v5.2.7, v5.3.0, v5.3.16, v5.3.23, v5.3.4, v5.4.0, v5.4.13, v5.4.17, v5.4.19, v5.4.27, v5.4.36, v5.4.9, v5.5.0, v5.5.16, v5.5.17, v5.5.2, v5.5.28, v5.5.33, v5.5.34, v5.5.35, v5.5.36, v5.5.37, v5.5.39, v5.5.40, v5.5.41, v5.5.43, v5.5.44, v5.6.0, v5.6.1, v5.6.10, v5.6.11, v5.6.12, v5.6.13, v5.6.14, v5.6.15, v5.6.16, v5.6.17, v5.6.19, v5.6.2, v5.6.20, v5.6.21, v5.6.22, v5.6.23, v5.6.24, v5.6.25, v5.6.26, v5. 6.27, v5.6.28, v5.6.29, v5.6.3, v5.6.30, v5.6.31, v5.6.32, v5.6.33, v5.6.34, v5.6.35, v5.6.36, v5.6.37, v5.6.38, v5.6.39, v5.6.4, v5.6.5, v5.6.6, v5.6.7, v5.6.8, v5.6.9, v5.7.0, v5.7.1, v5.7.10, v5.7.11, v5.7.15, v5.7.2, v5.7.20, v5.7.21, v5.7.22, v5.7.23, v5.7.26, v5.7.27, v5.7.28, v5.7.3, v5.7.4, v5.7.5, v5.7.6, v5.7.7, v5.7.8, v5.7.9, v5.8.0, v5.8.11, v5.8.12, v5.8.14, v5.8.15, v5.8.17, v5.8.18, v5.8.19, v5.8.2, v5.8.20, v5.8.22, v5.8.24, v5.8.27, v5.8.28, v5.8.29, v5.8.3, v5.8.30, v5.8.31, v5.8.32, v5.8.33, v5.8.34, v5.8.35, v5.8.36, v5.8.4, v5.8.8, v5.8.9, v6.0.0, v6.0.1, v6.0.2, v6.0.3, v6.0.4, v6.1.0, v6.10.0, v6.11.0, v6.12.0, v6.13.0, v6.13.1, v6.14.0, v6.15.0, v6.15.1, v6.16.0, v6.17.0, v6.17.1, v6.18.0, v6.2.0, v6.3.0, v6.4.1, v6.5.0, v6.5.1, v6.5.2, v6.6.0, v6.6.1, v6.6.2, v6.7.0, v6.8.0]. - mews/captcha 3.0.1 requires illuminate/session ~5.0|^6.0 -> satisfiable by laravel/framework[6.x-dev], illuminate/session[5.0.x-dev, 5.1.x-dev, 5.2.x-dev, 5.3.x-dev, 5.4.x-dev, 5.5.x-dev, 5.6.x-dev, 5.7.17, 5.7.18, 5.7.19, 5.7.x-dev, 5.8.x-dev, 6.x-dev, v5.0.0, v5.0.22, v5.0.25, v5.0.26, v5.0.28, v5.0.33, v5.0.4, v5.1.1, v5.1.13, v5.1.16, v5.1.2, v5.1.20, v5.1.22, v5.1.25, v5.1.28, v5.1.30, v5.1.31, v5.1.41, v5.1.6, v5.1.8, v5.2.0, v5.2.19, v5.2.21, v5.2.24, v5.2.25, v5.2.26, v5.2.27, v5.2.28, v5.2.31, v5.2.32, v5.2.37, v5.2.43, v5.2.45, v5.2.6, v5.2.7, v5.3.0, v5.3.16, v5.3.23, v5.3.4, v5.4.0, v5.4.13, v5.4.17, v5.4.19, v5.4.27, v5.4.36, v5.4.9, v5.5.0, v5.5.16, v5.5.17, v5.5.2, v5.5.28, v5.5.33, v5.5.34, v5.5.35, v5.5.36, v5.5.37, v5.5.39, v5.5.40, v5.5.41, v5.5.43, v5.5.44, v5.6.0, v5.6.1, v5.6.10, v5.6.11, v5.6.12, v5.6.13, v5.6.14, v5.6.15, v5.6.16, v5.6.17, v5.6.19, v5.6.2, v5.6.20, v5.6.21, v5.6.22, v5.6.23, v5.6.24, v5.6.25, v5.6.26, v5. 6.27, v5.6.28, v5.6.29, v5.6.3, v5.6.30, v5.6.31, v5.6.32, v5.6.33, v5.6.34, v5.6.35, v5.6.36, v5.6.37, v5.6.38, v5.6.39, v5.6.4, v5.6.5, v5.6.6, v5.6.7, v5.6.8, v5.6.9, v5.7.0, v5.7.1, v5.7.10, v5.7.11, v5.7.15, v5.7.2, v5.7.20, v5.7.21, v5.7.22, v5.7.23, v5.7.26, v5.7.27, v5.7.28, v5.7.3, v5.7.4, v5.7.5, v5.7.6, v5.7.7, v5.7.8, v5.7.9, v5.8.0, v5.8.11, v5.8.12, v5.8.14, v5.8.15, v5.8.17, v5.8.18, v5.8.19, v5.8.2, v5.8.20, v5.8.22, v5.8.24, v5.8.27, v5.8.28, v5.8.29, v5.8.3, v5.8.30, v5.8.31, v5.8.32, v5.8.33, v5.8.34, v5.8.35, v5.8.36, v5.8.4, v5.8.8, v5.8.9, v6.0.0, v6.0.1, v6.0.2, v6.0.3, v6.0.4, v6.1.0, v6.10.0, v6.11.0, v6.12.0, v6.13.0, v6.13.1, v6.14.0, v6.15.0, v6.15.1, v6.16.0, v6.17.0, v6.17.1, v6.18.0, v6.2.0, v6.3.0, v6.4.1, v6.5.0, v6.5.1, v6.5.2, v6.6.0, v6.6.1, v6.6.2, v6.7.0, v6.8.0]. - mews/captcha 3.0.2 requires illuminate/session ~5.0|^6.0 -> satisfiable by laravel/framework[6.x-dev], illuminate/session[5.0.x-dev, 5.1.x-dev, 5.2.x-dev, 5.3.x-dev, 5.4.x-dev, 5.5.x-dev, 5.6.x-dev, 5.7.17, 5.7.18, 5.7.19, 5.7.x-dev, 5.8.x-dev, 6.x-dev, v5.0.0, v5.0.22, v5.0.25, v5.0.26, v5.0.28, v5.0.33, v5.0.4, v5.1.1, v5.1.13, v5.1.16, v5.1.2, v5.1.20, v5.1.22, v5.1.25, v5.1.28, v5.1.30, v5.1.31, v5.1.41, v5.1.6, v5.1.8, v5.2.0, v5.2.19, v5.2.21, v5.2.24, v5.2.25, v5.2.26, v5.2.27, v5.2.28, v5.2.31, v5.2.32, v5.2.37, v5.2.43, v5.2.45, v5.2.6, v5.2.7, v5.3.0, v5.3.16, v5.3.23, v5.3.4, v5.4.0, v5.4.13, v5.4.17, v5.4.19, v5.4.27, v5.4.36, v5.4.9, v5.5.0, v5.5.16, v5.5.17, v5.5.2, v5.5.28, v5.5.33, v5.5.34, v5.5.35, v5.5.36, v5.5.37, v5.5.39, v5.5.40, v5.5.41, v5.5.43, v5.5.44, v5.6.0, v5.6.1, v5.6.10, v5.6.11, v5.6.12, v5.6.13, v5.6.14, v5.6.15, v5.6.16, v5.6.17, v5.6.19, v5.6.2, v5.6.20, v5.6.21, v5.6.22, v5.6.23, v5.6.24, v5.6.25, v5.6.26, v5. 6.27, v5.6.28, v5.6.29, v5.6.3, v5.6.30, v5.6.31, v5.6.32, v5.6.33, v5.6.34, v5.6.35, v5.6.36, v5.6.37, v5.6.38, v5.6.39, v5.6.4, v5.6.5, v5.6.6, v5.6.7, v5.6.8, v5.6.9, v5.7.0, v5.7.1, v5.7.10 , v5.7.11, v5.7.15, v5.7.2, v5.7.20, v5.7.21, v5.7.22, v5.7.23, v5.7.26, v5.7.27, v5.7.28, v5.7.3, v5.7.4, v5.7.5, v5.7.6, v5.7.7, v5.7.8, v5.7.9, v5.8.0, v5.8.11, v5.8.12, v5.8.14, v5.8.15, v5 .8.17, v5.8.18, v5.8.19, v5.8.2, v5.8.20, v5.8.22, v5.8.24, v5.8.27, v5.8.28, v5.8.29, v5.8.3, v5.8.30, v5.8.31, v5.8.32, v5.8.33, v5.8.34, v5.8.35, v5.8.36, v5.8.4, v5.8.8, v5.8.9, v6.0.0, v6. 0.1, v6.0.2, v6.0.3, v6.0.4, v6.1.0, v6.10.0, v6.11.0, v6.12.0, v6.13.0, v6.13.1, v6.14.0, v6.15.0, v6.15.1, v6.16.0, v6.17.0, v6.17.1, v6.18.0, v6.2.0, v6.3.0, v6.4.1, v6.5.0, v6.5.1, v6.5.2, v6.6.0, v6.6.1, v6.6.2, v6.7.0, v6.8.0]. - Can only install one of: laravel/framework[6.x-dev, v7.0.2].

    opened by Bantes 8
  • session keeps regenerating on every request for 5.2

    session keeps regenerating on every request for 5.2

    Newbie to laravel. While digging into the problem of session()->flash failure, I found the "for Laravel 5.2+ Add \Illuminate\Session\Middleware\StartSession::class to $middleware in Kernel.php" is the culprit. Session files keep regenerating after doing that.

    opened by KailZhang 8
  • The image cannot be displayed because it contains errors

    The image cannot be displayed because it contains errors

    Hello, I've tested it with L 5.1 and 5.3. I'm not getting any captcha image. Tried switching imagick and gd in Intervention Image. But no luck.

    Pls help.

    Regards

    opened by almamund 6
  • No image display with BOM utf8

    No image display with BOM utf8

    Laravel 5.1 , xampp, windows system, the image can't display. At the end, found the php file in window is format utf8 with bom, hope this will be help with other people.

    99eb152e-40ec-11e5-9cd9-4df886b73fe0

    opened by tienhsu 6
  • Issues with Laravel 5.2 - Session

    Issues with Laravel 5.2 - Session

    Laravel 5.2 removes important global middleware and introduces middleware groups.

    This is great but also brought a "bug" to my app. All captchas were invalid since \Illuminate\Session\Middleware\StartSession::class wasn't used for the captcha image url.

    Workarounds:

    Add \Illuminate\Session\Middleware\StartSession::class to $middleware in Kernel.php

    or

    Change line 26 in CaptchaServiceProvider to:

    $this->app['router']->get('captcha/{config?}', '\Mews\Captcha\CaptchaController@getCaptcha')->middleware('web');
    

    My question:

    Is there any other way to fix this "issue" (if it is one).

    Regards, Andre

    opened by bugwelle 6
  • Captcha validation always return invalid captcha

    Captcha validation always return invalid captcha

    As shown in documentation I have setup captcha package and set my /captcha-test

    I am able to see captcha and textbox but whenever I submit form I always getting error "validation.captcha" even if its not matter that captcha texts is right or wrong

    am using laravel 5.0, please help, below is the form I setup in routes.php file

    Route::any('captcha-test', function()
    {
        if (Request::getMethod() == 'POST')
        {
            $rules = ['captcha' => 'required|captcha'];
            $validator = Validator::make(Input::all(), $rules);
            if ($validator->fails())
            {
                echo '<p style="color: #ff0000;">Incorrect!</p>';
            }
            else
            {
                echo '<p style="color: #00ff30;">Matched :)</p>';
            }
        }
    
        $form = '<form method="post" action="captcha-test">';
        $form .= '<input type="hidden" name="_token" value="' . csrf_token() . '">';
        //$form .= '<p>' . captcha_img() . '</p>';
        $form .= '<img src="'. Captcha::src('inverse') .'" id="register-captcha-image">';
        $form .= '<p><input type="text" name="captcha"></p>';
        $form .= '<p><button type="submit" name="check">Check</button></p>';
        $form .= '</form>';
        return $form;
    });
    
    //For setting captcha route
    Route::get('/captcha/{config?}', function (\Mews\Captcha\Captcha $captcha, $config = 'default') {
        return $captcha->src($config);
    });
    
    opened by rupal-javiya 6
  • No Image Displayed

    No Image Displayed

    Installed package and pasted demo code in routes.php. Only the image placeholder, text field, and button are displayed - no image and no errors when hitting the route (http://satest.dev/captcha-test). Environment is Yosemite, Laravel 5.1, apache 2.4.1, php 5.6.11 with gd library. Any suggestions? Here is a screenshot of the page:

    image

    opened by geauxtigers 6
  • Method validateCaptcha does not exist.

    Method validateCaptcha does not exist.

    I have following issue: Method [validateCaptcha] does not exist.BadMethodCallException in Validator.php line 2615:

    use Illuminate\Support\Facades\Input;
    use Illuminate\Support\Facades\Validator;
    use Illuminate\Http\Request;
    use Mews\Captcha;
    ....
     protected $rules = array(
            'name'     => 'required',
            'captcha'  => 'required|captcha');
    .....
     $validation = Validator::make($data, $this->rules);
    ......
    
    
    opened by wiyfn 6
  • Cannot see characters properly - padding around text required

    Cannot see characters properly - padding around text required

    Hi,

    Thanks for plugin.

    I am struggling to display captcha image with fully visible characters. Please see the image below: Screenshot 2021-02-02 at 12 38 45

    As you can see both 'gg' letters gets cut, so captcha images has text pushed to the right. I edited Captcha.php file in vendor folder and set marginTop = 0 in the following function

        protected function text(): void
        {
            //$marginTop = $this->image->height() / $this->length;
            $marginTop = 0;
    
            $text = $this->text;
            if (is_string($text)) {
                $text = str_split($text);
            }
    
            foreach ($text as $key => $char) {
                $marginLeft = $this->textLeftPadding + ($key * ($this->image->width() - $this->textLeftPadding) / $this->length);
    
                $this->image->text($char, $marginLeft, $marginTop, function ($font) {
                    /* @var Font $font */
                    $font->file($this->font());
                    $font->size($this->fontSize());
                    $font->color($this->fontColor());
                    $font->align('left');
                    $font->align('top');
                    $font->angle($this->angle());
                });
            }
        }
    

    I think textLeftPadding and marginTop values are incorrect and padding around characters could be increased from all sides.

    Captcha config:

        'default' => [
            'length' => 6,
            'width' => 216,
            'height' => 72,
            'quality' => 90,
            'math' => false,
            'expire' => 60,
            'encrypt' => false,
        ],
    

    Thanks

    opened by bachras 5
  • Captcha validation issue on server

    Captcha validation issue on server

    Laravel : 8 PHP ; 7.4

    Captcha validation working fine on local but when i pushed code on server then i entered correct captcha still it shows wrong captcha , refresh is working also fine

    opened by dipakratnani08 2
  • Validation is always successful regardless of the entered text

    Validation is always successful regardless of the entered text

    I used code from documentation

    `Session Mode: // [your site path]/Http/routes.php Route::any('captcha-test', function() { if (request()->getMethod() == 'POST') { $rules = ['captcha' => 'required|captcha']; $validator = validator()->make(request()->all(), $rules); if ($validator->fails()) { echo '

    Incorrect!

    '; } else { echo '

    Matched :)

    '; } }

        $form = '<form method="post" action="captcha-test">';
        $form .= '<input type="hidden" name="_token" value="' . csrf_token() . '">';
        $form .= '<p>' . captcha_img() . '</p>';
        $form .= '<p><input type="text" name="captcha"></p>';
        $form .= '<p><button type="submit" name="check">Check</button></p>';
        $form .= '</form>';
        return $form;
    });`
    

    Validation is always successful regardless of the entered text.

    opened by vaskomichal 6
  • 404 Error!

    404 Error!

    I use Laravel 9.34 and livewire 2.10 and mews/captcha 3.2.9 My site worked correctly in local but in server I get 404 error for captcha image.

    return <<<'blade' <div> {!! captcha_img('flat') !!} <svg style="cursor: pointer;" wire:click="refreshCaptcha" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/> <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/> </svg> </div> blade;

    opened by javadzanguei 0
  • validation error in ajax form

    validation error in ajax form

    I can use captcha in a simple form, but in ajax form I always see validation error wrong captcha. I cannot understand how to fix it.

    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>
    
            <!-- captcha -->
            <div class="mt-4 captcha flex">
                <div class="w-32 mr-4 img">{!! captcha_img() !!}</div>
                <x-modules.svg type="refresh" class="w-6 h-6 mr-1 reload cursor-pointer" id="reload"/>
            </div>
            <div class="mt-4">
                <x-modules.input id="captcha" class="block mt-1 w-full" type="text" name="captcha" placeholder="Enter Captcha" x-model="formData.captcha" required />
            </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: '',
                  captcha: '',
                  _token: '{{ csrf_token() }}'
                },
    
                message: '',
                responseData: [],
                errorStates: {
                  name: false,
                  phone: false,
                  email: false,
                  address: false,
                  message: false,
                  captcha: 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.captcha = ''
                },
    
    
                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());
    
            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',
                'captcha'   => 'required|captcha',
            ];
        }
    }
    
    opened by schel4ok 0
  • PlainJS: Validation fails after refresh image in Laravel 9

    PlainJS: Validation fails after refresh image in Laravel 9

    Submits successfully on first load but when I use the refresh image function the validation fails ("no match"). Any plans for documentation additions for this feature?

    page.blade.php

    ...
    <span id="captchaimg">{!! captcha_img() !!}</span>
    <button type="button" id="refreshcaptcha" class="btn btn-success"><i class="fas fa-sync-alt"></i></button>
    <input id="captcha" name=" class="form-control mt-2 @error('captcha') is-invalid @enderror"/>
    ...
    
        <script type="text/javascript">
            function addEvent(el, type, handler) {
                if (el.attachEvent) el.attachEvent('on' + type, handler); else el.addEventListener(type, handler);
            }
    
            function getAjax(url, success) {
                var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
                xhr.open('GET', url);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState > 3 && xhr.status === 200) success(JSON.parse(xhr.responseText));
                };
                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                xhr.send();
                return xhr;
            }
    
            var refreshCap = function () {
                getAjax('/refreshcaptcha', function (data) {
                    document.getElementById('captchaimg').innerHTML = data.captcha;
                })
            }
    
            addEvent(document.getElementById('refreshcaptcha'), 'click', refreshCap);
        </script>
    

    PageController.php

    ...
            $this->validate($request, [
                ...
                'captcha' => 'required|captcha'
            ], $messages);
    ...
        public function refreshCaptcha()
        {
            return response()->json(['captcha' => captcha_img()]);
        }
    

    Do I need to do something special to pass the new key? I don't understand what the documentation means by session/stateless.

    Cheers,

    Dan

    opened by Dhermann27 0
Releases(3.2.10)
Owner
MeWebStudio - Muharrem ERİN
MeWebStudio - Muharrem ERİN
⚡ Laravel Charts — Build charts using laravel. The laravel adapter for Chartisan.

What is laravel charts? Charts is a Laravel library used to create Charts using Chartisan. Chartisan does already have a PHP adapter. However, this li

Erik C. Forés 31 Dec 18, 2022
Laravel Kickstart is a Laravel starter configuration that helps you build Laravel websites faster.

Laravel Kickstart What is Laravel Kickstart? Laravel Kickstart is a Laravel starter configuration that helps you build Laravel websites faster. It com

Sam Rapaport 46 Oct 1, 2022
Laravel User Activity Log - a package for Laravel 8.x that provides easy to use features to log the activities of the users of your Laravel app

Laravel User Activity Log - a package for Laravel 8.x that provides easy to use features to log the activities of the users of your Laravel app

null 9 Dec 14, 2022
Laravel Segment is an opinionated, approach to integrating Segment into your Laravel application.

Laravel Segment Laravel Segment is an opinionated, approach to integrating Segment into your Laravel application. Installation You can install the pac

Octohook 13 May 16, 2022
Laravel Sanctum support for Laravel Lighthouse

Lighthouse Sanctum Add Laravel Sanctum support to Lighthouse Requirements Installation Usage Login Logout Register Email Verification Forgot Password

Daniël de Wit 43 Dec 21, 2022
Bring Laravel 8's cursor pagination to Laravel 6, 7

Laravel Cursor Paginate for laravel 6,7 Installation You can install the package via composer: composer require vanthao03596/laravel-cursor-paginate U

Pham Thao 9 Nov 10, 2022
A package that uses blade templates to control how markdown is converted to HTML inside Laravel, as well as providing support for markdown files to Laravel views.

Install Install via composer. $ composer require olliecodes/laravel-etched-blade Once installed you'll want to publish the config. $ php artisan vendo

Ollie Codes 19 Jul 5, 2021
A light weight laravel package that facilitates dealing with arabic concepts using a set of classes and methods to make laravel speaks arabic

A light weight laravel package that facilitates dealing with arabic concepts using a set of classes and methods to make laravel speaks arabic! concepts like , Hijri Dates & Arabic strings and so on ..

Adnane Kadri 49 Jun 22, 2022
Jetstrap is a lightweight laravel 8 package that focuses on the VIEW side of Jetstream / Breeze package installed in your Laravel application

A Laravel 8 package to easily switch TailwindCSS resources generated by Laravel Jetstream and Breeze to Bootstrap 4.

null 686 Dec 28, 2022
Laravel Jetstream is a beautifully designed application scaffolding for Laravel.

Laravel Jetstream is a beautifully designed application scaffolding for Laravel. Jetstream provides the perfect starting point for your next Laravel application and includes login, registration, email verification, two-factor authentication, session management, API support via Laravel Sanctum, and optional team management.

The Laravel Framework 3.5k Jan 8, 2023
Laravel Larex lets you translate your whole Laravel application from a single CSV file.

Laravel Larex Translate Laravel Apps from a CSV File Laravel Larex lets you translate your whole Laravel application from a single CSV file. You can i

Luca Patera 68 Dec 12, 2022
A Laravel package that adds a simple image functionality to any Laravel model

Laraimage A Laravel package that adds a simple image functionality to any Laravel model Introduction Laraimage served four use cases when using images

Hussein Feras 52 Jul 17, 2022
A Laravel extension for using a laravel application on a multi domain setting

Laravel Multi Domain An extension for using Laravel in a multi domain setting Description This package allows a single Laravel installation to work wi

null 658 Jan 6, 2023
Example of using abrouter/abrouter-laravel-bridge in Laravel

ABRouter Laravel Example It's a example of using (ABRouter Laravel Client)[https://github.com/abrouter/abrouter-laravel-bridge] Set up locally First o

ABRouter 1 Oct 14, 2021
Laravel router extension to easily use Laravel's paginator without the query string

?? THIS PACKAGE HAS BEEN ABANDONED ?? We don't use this package anymore in our own projects and cannot justify the time needed to maintain it anymore.

Spatie 307 Sep 23, 2022
Laravel application project as Sheina Online Store backend to be built with Laravel and VueJS

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Boas Aditya Christian 1 Jan 11, 2022
Postgis extensions for laravel. Aims to make it easy to work with geometries from laravel models.

Laravel Wrapper for PostgreSQL's Geo-Extension Postgis Features Work with geometry classes instead of arrays. $model->myPoint = new Point(1,2); //lat

Max 340 Jan 6, 2023
laravel - Potion is a pure PHP asset manager for Laravel 5 based off of Assetic.

laravel-potion Potion is a pure PHP asset manager for Laravel based off of Assetic. Description Laravel 5 comes with a great asset manager called Elix

Matthew R. Miller 61 Mar 1, 2022
Llum illuminates your Laravel projects speeding up your Github/Laravel development workflow

Llum illuminates your Laravel projects speeding up your Github/Laravel development workflow

Sergi Tur Badenas 110 Dec 25, 2022