laravel - update - usuario php captcha en el componente vuejs

spa con laravel y vue

Question

En Laravel 5.4.20 y VueJS. Quiero usar un simple código de captcha en mi propio componente modal (no quiero usar reCaptcha). ¿Cómo puedo hacer esto?

Estoy usando Mewebstudio Captcha de esta manera:

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;
});

Pero solo funciona en documentos PHP (necesito el componente Vue).

Answer 1

Para lograr eso, tu route será así:

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

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

y su componente Vue, como este:

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>