added captcha to donate form

Reviewed-on: oyd/bagis#2

app/Http/Controllers/DonationController.php

@@ -20,8 +20,8 @@ class DonationController extends Controller
 
     public function donate(Request $request)
     {
-        // dd($request);
         $request->validate([
+            'captcha' => 'required|captcha_api:' . request('captcha_key') . ',math',
             "amount" => 'required|numeric',
             "currency" => 'required|in:USD,EUR,TL',
             "frequency" => 'required|in:once,monthly,annually',
@@ -39,6 +39,8 @@ class DonationController extends Controller
             "billing_city" => 'required|string',
             "billing_country" => 'required|string',
             "billing_zipcode" => 'nullable|string',
+        ], [
+            "captcha.captcha_api" => "Wrong captcha answer."
         ]);
 
         $iyzipayCurrencies = [
@@ -129,7 +131,7 @@ class DonationController extends Controller
             $randomPassword = Str::random(8);
             $user->password = Hash::make($randomPassword);
             $user->save();
-			Mail::to($user)->send(new UserCreated($user,$randomPassword));
+            Mail::to($user)->send(new UserCreated($user, $randomPassword));
         }
 
         $donation = new Donation;
@@ -170,7 +172,6 @@ class DonationController extends Controller
         $donation->save();
         Mail::to($donation)->send(new SuccessfulPayment($donation));
         return redirect()->route('donation.success', $donation->conversation_id);
-
     }
 
     public function success($conversation_id, Request $request)

composer.json

@@ -15,7 +15,8 @@
         "iyzico/iyzipay-php": "^2.0",
         "laravel/framework": "^7.0",
         "laravel/tinker": "^2.0",
-        "laravel/ui": "^2.0"
+        "laravel/ui": "^2.0",
+        "mews/captcha": "^3.2"
     },
     "require-dev": {
         "facade/ignition": "^2.0",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "3c8c87be7e4bc22d08441bd151d1521b",
+    "content-hash": "758f6c8d5f7d18f90310d3fcbfda6541",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -725,6 +725,90 @@
             ],
             "time": "2019-07-01T23:21:34+00:00"
         },
+        {
+            "name": "intervention/image",
+            "version": "2.7.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/Intervention/image.git",
+                "reference": "04be355f8d6734c826045d02a1079ad658322dad"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/Intervention/image/zipball/04be355f8d6734c826045d02a1079ad658322dad",
+                "reference": "04be355f8d6734c826045d02a1079ad658322dad",
+                "shasum": ""
+            },
+            "require": {
+                "ext-fileinfo": "*",
+                "guzzlehttp/psr7": "~1.1 || ^2.0",
+                "php": ">=5.4.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "~0.9.2",
+                "phpunit/phpunit": "^4.8 || ^5.7 || ^7.5.15"
+            },
+            "suggest": {
+                "ext-gd": "to use GD library based image processing.",
+                "ext-imagick": "to use Imagick based image processing.",
+                "intervention/imagecache": "Caching extension for the Intervention Image library"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.4-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Intervention\\Image\\ImageServiceProvider"
+                    ],
+                    "aliases": {
+                        "Image": "Intervention\\Image\\Facades\\Image"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Intervention\\Image\\": "src/Intervention/Image"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Oliver Vogel",
+                    "email": "oliver@intervention.io",
+                    "homepage": "https://intervention.io/"
+                }
+            ],
+            "description": "Image handling and manipulation library with support for Laravel integration",
+            "homepage": "http://image.intervention.io/",
+            "keywords": [
+                "gd",
+                "image",
+                "imagick",
+                "laravel",
+                "thumbnail",
+                "watermark"
+            ],
+            "support": {
+                "issues": "https://github.com/Intervention/image/issues",
+                "source": "https://github.com/Intervention/image/tree/2.7.2"
+            },
+            "funding": [
+                {
+                    "url": "https://paypal.me/interventionio",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/Intervention",
+                    "type": "github"
+                }
+            ],
+            "time": "2022-05-21T17:30:32+00:00"
+        },
         {
             "name": "iyzico/iyzipay-php",
             "version": "v2.0.48",
@@ -1238,6 +1322,79 @@
             ],
             "time": "2020-05-12T20:33:44+00:00"
         },
+        {
+            "name": "mews/captcha",
+            "version": "3.2.8",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/mewebstudio/captcha.git",
+                "reference": "29444eb2699ab32a4b065422375a85b75c0ac51f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/mewebstudio/captcha/zipball/29444eb2699ab32a4b065422375a85b75c0ac51f",
+                "reference": "29444eb2699ab32a4b065422375a85b75c0ac51f",
+                "shasum": ""
+            },
+            "require": {
+                "ext-gd": "*",
+                "illuminate/config": "~5|^6|^7|^8|^9",
+                "illuminate/filesystem": "~5|^6|^7|^8|^9",
+                "illuminate/hashing": "~5|^6|^7|^8|^9",
+                "illuminate/session": "~5|^6|^7|^8|^9",
+                "illuminate/support": "~5|^6|^7|^8|^9",
+                "intervention/image": "~2.5",
+                "php": "^7.2|^8.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.0",
+                "phpunit/phpunit": "^8.5|^9.0"
+            },
+            "type": "package",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Mews\\Captcha\\CaptchaServiceProvider"
+                    ],
+                    "aliases": {
+                        "Captcha": "Mews\\Captcha\\Facades\\Captcha"
+                    }
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/helpers.php"
+                ],
+                "psr-4": {
+                    "Mews\\Captcha\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Muharrem ERİN",
+                    "email": "me@mewebstudio.com",
+                    "homepage": "https://github.com/mewebstudio",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Laravel 5 & 6 Captcha Package",
+            "homepage": "https://github.com/mewebstudio/captcha",
+            "keywords": [
+                "captcha",
+                "laravel5 Security",
+                "laravel6 Captcha",
+                "laravel6 Security"
+            ],
+            "support": {
+                "issues": "https://github.com/mewebstudio/captcha/issues",
+                "source": "https://github.com/mewebstudio/captcha/tree/3.2.8"
+            },
+            "time": "2022-07-20T12:11:44+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "2.0.2",
@@ -5927,5 +6084,5 @@
         "php": "^7.2.5"
     },
     "platform-dev": [],
-    "plugin-api-version": "1.1.0"
+    "plugin-api-version": "2.3.0"
 }

config/app.php

@@ -161,6 +161,7 @@ return [
         Illuminate\Translation\TranslationServiceProvider::class,
         Illuminate\Validation\ValidationServiceProvider::class,
         Illuminate\View\ViewServiceProvider::class,
+        Mews\Captcha\CaptchaServiceProvider::class,
 
         /*
          * Package Service Providers...
@@ -226,6 +227,7 @@ return [
         'URL' => Illuminate\Support\Facades\URL::class,
         'Validator' => Illuminate\Support\Facades\Validator::class,
         'View' => Illuminate\Support\Facades\View::class,
+        'Captcha' => Mews\Captcha\Facades\Captcha::class,
 
     ],
 

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=7ae1ff303438afdbd8bb",
+    "/js/app.js": "/js/app.js?id=750208dadef409a48074",
     "/css/app.css": "/css/app.css?id=36412c9f34a08f26af3c"
 }

resources/js/components/DonationCard.vue

@@ -4,12 +4,17 @@
       <div class="form-group row mb-0">
         <div class="col-12">
           <h1>Donate</h1>
-          <p>Özgür Yazılım Derneği is a registered association in İstanbul, Turkey with the number 34-242-113</p>
+          <p>
+            Özgür Yazılım Derneği is a registered association in İstanbul,
+            Turkey with the number 34-242-113
+          </p>
         </div>
       </div>
       <form method="POST" action="/make-donation">
         <div class="form-group row">
-          <label for="currency" class="col-md-4 col-form-label text-md-right">Donation currency</label>
+          <label for="currency" class="col-md-4 col-form-label text-md-right"
+            >Donation currency</label
+          >
 
           <div class="col-md-8">
             <div class="row">
@@ -21,15 +26,22 @@
                 <button
                   type="button"
                   class="btn btn-block mb-2"
-                  :class="{'btn-primary':currency==currencyItem.code, 'btn-outline-primary':currency!=currencyItem.code}"
+                  :class="{
-                  @click="currency=currencyItem.code"
+                    'btn-primary': currency == currencyItem.code,
-                >{{currencyItem.symbol}} | {{currencyItem.name}}</button>
+                    'btn-outline-primary': currency != currencyItem.code,
+                  }"
+                  @click="currency = currencyItem.code"
+                >
+                  {{ currencyItem.symbol }} | {{ currencyItem.name }}
+                </button>
               </div>
             </div>
           </div>
         </div>
         <div class="form-group row">
-          <label for="frequency" class="col-md-4 col-form-label text-md-right">Donation frequency</label>
+          <label for="frequency" class="col-md-4 col-form-label text-md-right"
+            >Donation frequency</label
+          >
 
           <div class="col-md-8">
             <div class="row">
@@ -41,15 +53,24 @@
                 <button
                   type="button"
                   class="btn btn-block mb-2"
-                  :class="{'btn-primary':frequency==frequencyItem.code, 'btn-outline-primary':frequency!=frequencyItem.code}"
+                  :class="{
+                    'btn-primary': frequency == frequencyItem.code,
+                    'btn-outline-primary': frequency != frequencyItem.code,
+                  }"
                   @click="setFrequency(frequencyItem.code)"
-                >{{frequencyItem.name}}</button>
+                >
+                  {{ frequencyItem.name }}
+                </button>
               </div>
             </div>
           </div>
         </div>
         <div class="form-group row">
-          <label for="donationPackage" class="col-md-4 col-form-label text-md-right">Donation amount</label>
+          <label
+            for="donationPackage"
+            class="col-md-4 col-form-label text-md-right"
+            >Donation amount</label
+          >
 
           <div class="col-md-8">
             <div class="row">
@@ -61,25 +82,36 @@
                 <button
                   type="button"
                   class="btn btn-block mb-2"
-                  :class="{'btn-primary':donationPackage==donationPackageItem.id, 'btn-outline-primary':donationPackage!=donationPackageItem.id}"
+                  :class="{
+                    'btn-primary': donationPackage == donationPackageItem.id,
+                    'btn-outline-primary':
+                      donationPackage != donationPackageItem.id,
+                  }"
                   @click="setDonationPackage(donationPackageItem.id)"
                 >
-                  <span>{{activeCurrency.symbol}}</span>
+                  <span>{{ activeCurrency.symbol }}</span>
-                  <span v-if="frequency=='once'">{{donationPackageItem.once_amount}}</span>
+                  <span v-if="frequency == 'once'">{{
-                  <span v-else-if="frequency=='monthly'">{{donationPackageItem.monthly_amount}} /mo</span>
+                    donationPackageItem.once_amount
-                  <span
+                  }}</span>
-                    v-else-if="frequency=='annually'"
+                  <span v-else-if="frequency == 'monthly'"
-                  >{{donationPackageItem.annually_amount}} /yr</span>
+                    >{{ donationPackageItem.monthly_amount }} /mo</span
+                  >
+                  <span v-else-if="frequency == 'annually'"
+                    >{{ donationPackageItem.annually_amount }} /yr</span
+                  >
 
                   <br />
-                  <small>{{donationPackageItem.name}}</small>
+                  <small>{{ donationPackageItem.name }}</small>
                 </button>
               </div>
               <div class="col-12 col-md-6">
                 <button
                   type="button"
                   class="btn btn-block mb-2"
-                  :class="{'btn-primary':donationPackage==null, 'btn-outline-primary':donationPackage!=null}"
+                  :class="{
+                    'btn-primary': donationPackage == null,
+                    'btn-outline-primary': donationPackage != null,
+                  }"
                   @click="setDonationPackage(null)"
                 >
                   <small>other</small>
@@ -87,7 +119,9 @@
 
                   <div class="input-group mb-3">
                     <div class="input-group-prepend">
-                      <span class="input-group-text">{{activeCurrency.symbol}}</span>
+                      <span class="input-group-text">{{
+                        activeCurrency.symbol
+                      }}</span>
                     </div>
                     <input
                       type="number"
@@ -98,10 +132,18 @@
                     />
                     <div
                       class="input-group-append"
-                      v-if="frequency=='monthly' || frequency=='annually'"
+                      v-if="frequency == 'monthly' || frequency == 'annually'"
+                    >
+                      <span
+                        v-if="frequency == 'monthly'"
+                        class="input-group-text"
+                        >/mo</span
+                      >
+                      <span
+                        v-else-if="frequency == 'annually'"
+                        class="input-group-text"
+                        >/yr</span
                       >
-                      <span v-if="frequency=='monthly'" class="input-group-text">/mo</span>
-                      <span v-else-if="frequency=='annually'" class="input-group-text">/yr</span>
                     </div>
                   </div>
                 </button>
@@ -116,35 +158,39 @@
           </div>
         </div>
         <div class="form-group row">
-          <label for="first_name" class="col-md-4 col-form-label text-md-right">First Name</label>
+          <label for="first_name" class="col-md-4 col-form-label text-md-right"
+            >First Name</label
+          >
 
           <div class="col-md-6">
             <input
               id="first_name"
               type="text"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="first_name"
               required
             />
-            <span class="invalid-feedback" role="alert" v-if="1==0">
+            <span class="invalid-feedback" role="alert" v-if="1 == 0">
               <strong>Sample error</strong>
             </span>
           </div>
         </div>
         <div class="form-group row">
-          <label for="last_name" class="col-md-4 col-form-label text-md-right">Last Name</label>
+          <label for="last_name" class="col-md-4 col-form-label text-md-right"
+            >Last Name</label
+          >
 
           <div class="col-md-6">
             <input
               id="last_name"
               type="text"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="last_name"
               required
             />
-            <span class="invalid-feedback" role="alert" v-if="1==0">
+            <span class="invalid-feedback" role="alert" v-if="1 == 0">
               <strong>Sample error</strong>
             </span>
           </div>
@@ -159,12 +205,16 @@
                 id="show_name"
                 value="1"
               />
-              <label class="form-check-label" for="show_name">Show my name on donors list</label>
+              <label class="form-check-label" for="show_name"
+                >Show my name on donors list</label
+              >
             </div>
           </div>
         </div>
         <div class="form-group row">
-          <label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
+          <label for="email" class="col-md-4 col-form-label text-md-right"
+            >E-Mail Address</label
+          >
 
           <div class="col-md-6">
             <input
@@ -187,31 +237,34 @@
           <label
             for="card_holder_name"
             class="col-md-4 col-form-label text-md-right"
-          >Card Holder Name</label>
+            >Card Holder Name</label
+          >
 
           <div class="col-md-6">
             <input
               id="card_holder_name"
               type="text"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="card_holder_name"
               required
             />
-            <span class="invalid-feedback" role="alert" v-if="1==0">
+            <span class="invalid-feedback" role="alert" v-if="1 == 0">
               <strong>Sample error</strong>
             </span>
           </div>
         </div>
         <div class="form-group row">
-          <label for="card_number" class="col-md-4 col-form-label text-md-right">Credit Card Number</label>
+          <label for="card_number" class="col-md-4 col-form-label text-md-right"
+            >Credit Card Number</label
+          >
 
           <div class="col-md-6">
             <input
               id="card_number"
               type="tel"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="card_number"
               required
               minlength="15"
@@ -220,7 +273,7 @@
               placeholder="################"
               v-cardformat:restrictNumeric
             />
-            <span class="invalid-feedback" role="alert" v-if="1==0">
+            <span class="invalid-feedback" role="alert" v-if="1 == 0">
               <strong>Sample error</strong>
             </span>
           </div>
@@ -229,14 +282,15 @@
           <label
             for="card_expire_month"
             class="col-md-4 col-form-label text-md-right"
-          >Credit Card Expiration</label>
+            >Credit Card Expiration</label
+          >
 
           <div class="col-3">
             <input
               id="card_expire_month"
               type="tel"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="card_expire_month"
               required
               autocomplete="card_expire_month"
@@ -251,7 +305,7 @@
               id="card_expire_year"
               type="tel"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="card_expire_year"
               required
               autocomplete="card_expire_year"
@@ -263,14 +317,16 @@
           </div>
         </div>
         <div class="form-group row">
-          <label for="card_cvc" class="col-md-4 col-form-label text-md-right">Credit Card CVC</label>
+          <label for="card_cvc" class="col-md-4 col-form-label text-md-right"
+            >Credit Card CVC</label
+          >
 
           <div class="col-3">
             <input
               id="card_cvc"
               type="tel"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="card_cvc"
               required
               autocomplete="card_cvc"
@@ -291,75 +347,91 @@
           <label
             for="billing_contact_name"
             class="col-md-4 col-form-label text-md-right"
-          >Contact Name</label>
+            >Contact Name</label
+          >
 
           <div class="col-md-6">
             <input
               id="billing_contact_name"
               type="text"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="billing_contact_name"
               required
             />
-            <span class="invalid-feedback" role="alert" v-if="1==0">
+            <span class="invalid-feedback" role="alert" v-if="1 == 0">
               <strong>Sample error</strong>
             </span>
           </div>
         </div>
         <div class="form-group row">
-          <label for="billing_address" class="col-md-4 col-form-label text-md-right">Address</label>
+          <label
+            for="billing_address"
+            class="col-md-4 col-form-label text-md-right"
+            >Address</label
+          >
 
           <div class="col-md-6">
             <input
               id="billing_address"
               type="text"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="billing_address"
               required
             />
-            <span class="invalid-feedback" role="alert" v-if="1==0">
+            <span class="invalid-feedback" role="alert" v-if="1 == 0">
               <strong>Sample error</strong>
             </span>
           </div>
         </div>
         <div class="form-group row">
-          <label for="billing_city" class="col-md-4 col-form-label text-md-right">City</label>
+          <label
+            for="billing_city"
+            class="col-md-4 col-form-label text-md-right"
+            >City</label
+          >
 
           <div class="col-md-6">
             <input
               id="billing_city"
               type="text"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="billing_city"
               required
             />
-            <span class="invalid-feedback" role="alert" v-if="1==0">
+            <span class="invalid-feedback" role="alert" v-if="1 == 0">
               <strong>Sample error</strong>
             </span>
           </div>
         </div>
         <div class="form-group row">
-          <label for="billing_country" class="col-md-4 col-form-label text-md-right">Country</label>
+          <label
+            for="billing_country"
+            class="col-md-4 col-form-label text-md-right"
+            >Country</label
+          >
 
           <div class="col-md-6">
             <input
               id="billing_country"
               type="text"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="billing_country"
               required
             />
-            <span class="invalid-feedback" role="alert" v-if="1==0">
+            <span class="invalid-feedback" role="alert" v-if="1 == 0">
               <strong>Sample error</strong>
             </span>
           </div>
         </div>
         <div class="form-group row">
-          <label for="billing_zipcode" class="col-md-4 col-form-label text-md-right">
+          <label
+            for="billing_zipcode"
+            class="col-md-4 col-form-label text-md-right"
+          >
             Zip Code
             <small>optional</small>
           </label>
@@ -369,18 +441,39 @@
               id="billing_zipcode"
               type="text"
               class="form-control"
-              :class="{'is-invalid':1==0}"
+              :class="{ 'is-invalid': 1 == 0 }"
               name="billing_zipcode"
             />
-            <span class="invalid-feedback" role="alert" v-if="1==0">
+            <span class="invalid-feedback" role="alert" v-if="1 == 0">
               <strong>Sample error</strong>
             </span>
           </div>
         </div>
+        <div class="form-group row">
+          <label for="captcha" class="col-md-4 col-form-label text-md-right">
+            <img :src="captcha_src" />
+          </label>
 
+          <div class="col-md-3">
+            <input
+              id="captcha"
+              type="text"
+              placeholder="Captcha"
+              class="form-control"
+              :class="{ 'is-invalid': 1 == 0 }"
+              name="captcha"
+            />
+            <input type="hidden" name="captcha_key" :value="captcha_key" />
+            <span class="invalid-feedback" role="alert" v-if="1 == 0">
+              <strong>Sample error</strong>
+            </span>
+          </div>
+        </div>
         <div class="form-group row mb-0">
           <div class="col-md-8 offset-md-4">
-            <button type="submit" class="btn btn-primary btn-lg">Donate {{amountText}}</button>
+            <button type="submit" class="btn btn-primary btn-lg">
+              Donate {{ amountText }}
+            </button>
 
             <!-- <a class="btn btn-link" href="#">Forgot Your Password?</a> -->
           </div>
@@ -398,6 +491,8 @@
 export default {
   data() {
     return {
+      captcha_src: null,
+      captcha_key: null,
       card_number: null,
       card_expire_month: null,
       card_expire_year: null,
@@ -408,12 +503,12 @@ export default {
       currencies: [
         { name: "USD", code: "USD", symbol: "$" },
         { name: "EUR", code: "EUR", symbol: "€" },
-        { name: "TRY", code: "TL", symbol: "₺" }
+        { name: "TRY", code: "TL", symbol: "₺" },
       ],
       frequencies: [
         { name: "once", code: "once" },
         { name: "monthly", code: "monthly" },
-        { name: "annually", code: "annually" }
+        { name: "annually", code: "annually" },
       ],
       donationPackages: [
         {
@@ -421,50 +516,50 @@ export default {
           name: "Super Major Donor",
           once_amount: 2500,
           monthly_amount: 250,
-          annually_amount: 2500
+          annually_amount: 2500,
         },
         {
           id: 2,
           name: "Major Donor",
           once_amount: 1000,
           monthly_amount: 100,
-          annually_amount: 1000
+          annually_amount: 1000,
         },
         {
           id: 3,
           name: "Rare Earths Level",
           once_amount: 500,
           monthly_amount: 50,
-          annually_amount: 500
+          annually_amount: 500,
         },
         {
           id: 4,
           name: "Titanium Level",
           once_amount: 250,
           monthly_amount: 25,
-          annually_amount: 250
+          annually_amount: 250,
         },
         {
           id: 5,
           name: "Gold Level",
           once_amount: 100,
           monthly_amount: 20,
-          annually_amount: 100
+          annually_amount: 100,
         },
         {
           id: 6,
           name: "Copper Level",
           once_amount: 50,
           monthly_amount: 10,
-          annually_amount: 50
+          annually_amount: 50,
-        }
+        },
-      ]
+      ],
     };
   },
   computed: {
     activeCurrency() {
       const itemIndex = this.currencies.findIndex(
-        item => item.code === this.currency
+        (item) => item.code === this.currency
       );
       if (itemIndex === -1) return false;
       return this.currencies[itemIndex];
@@ -482,7 +577,7 @@ export default {
       return document
         .querySelector('meta[name="csrf-token"]')
         .getAttribute("content");
-    }
+    },
   },
   methods: {
     setFrequency(code) {
@@ -495,7 +590,7 @@ export default {
     },
     setAmountByPackage() {
       const itemIndex = this.donationPackages.findIndex(
-        item => item.id === this.donationPackage
+        (item) => item.id === this.donationPackage
       );
       if (itemIndex !== -1) {
         if (this.frequency == "once") {
@@ -514,14 +609,20 @@ export default {
         // 46 is dot
         $event.preventDefault();
       }
-    }
+    },
   },
   watch: {
     amount() {
       if (this.amount < 1) {
         this.amount = 5;
       }
-    }
+    },
-  }
+  },
+  mounted() {
+    axios.get("/captcha/api/math").then((response) => {
+      this.captcha_src = response.data.img;
+      this.captcha_key = response.data.key;
+    });
+  },
 };
 </script>