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>