user php captcha in vuejs component

Question

In Laravel 5.4.20 and VueJS. I want to use a simple code captcha in my ue modal component (I don't want to use reCaptcha). How can I do this?

I'm using Mewebstudio Captcha like this:

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 .= '<p><input type="text" name="captcha"></p>';
    $form .= '<p><button type="submit" name="check">Check</button></p>';
    $form .= '</form>';
    return $form;
});

But it just work in PHP documents (I need in Vue component).

Answer 1

To achieve that, your route will be like this:

Route::post('captcha-test', function() {
    $validator = Validator::make(Input::all(), [
        'captcha' => 'required|captcha'
    ])->validate();

    return response(['status' => 'ok'], 200);
});

and your Vue component, like this:

Vue.component('captcha', {
  props: ['image'],
  
  data: function () {
    return {
      form: {
        captcha: null
      },
      isWorking: false
    }
  },
  
  methods: {
    check: function () {
      var self = this
      self.isWorking = true
      
      axios.post('/captcha-test', {
        captcha: self.form.captcha
      })
      .then(function (response) {
        // valid captcha...
        console.log(response);
        
        // reset the form
        self.form.captcha = null
        // now, is not working
        self.isWorking = false
      })
      .catch(function (err) {
        // invalid captch..
        console.log(err);
        
        // reset the form
        self.form.captcha = null
        // now, is not working
        self.isWorking = false
      });
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css" rel="stylesheet"/>


<div id="app" class="section">

  <captcha image="<img src='https://c22blog.files.wordpress.com/2010/10/input-black.gif' style='width: 150px;'>" inline-template>
    <div class="box">
      <div v-html="image"></div>

      <form @submit.prevent="check">
        <div class="field">
          <div class="control">
            <input class="input" type="text" placeholder="Captcha" v-model="form.captcha" required>
          </div>
        </div>

        <div class="field">
          <div class="control">
            <button type="submit" class="button is-primary" :class="{'is-loading': isWorking}" :disabled="isWorking">Check</button>
          </div>
        </div>
      </form>
    </div>
  </captcha>
  
</div>