From f6408e0c2fa1c577e9b3e22311799980b75a5b44 Mon Sep 17 00:00:00 2001
From: Richard Bishop <rick@richardbishop.me>
Date: Sat, 24 Mar 2018 18:36:08 +0000
Subject: [PATCH] Add recaptcha component to render it in the thread modal

---
 resources/assets/js/app.js                   |  1 +
 resources/assets/js/components/Recaptcha.vue | 24 ++++++++
 resources/views/modals/new-thread.blade.php  |  2 +-
 resources/views/threads/create.blade.php     | 64 --------------------
 4 files changed, 26 insertions(+), 65 deletions(-)
 create mode 100644 resources/assets/js/components/Recaptcha.vue
 delete mode 100644 resources/views/threads/create.blade.php

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index cb42bb4..e8f3895 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -25,6 +25,7 @@ Vue.component("activity-favorite", require("./components/ActivityFavorite"));
 Vue.component("activity-reply", require("./components/ActivityReply"));
 Vue.component("activity-thread", require("./components/ActivityThread"));
 Vue.component("wysiwyg", require("./components/Wysiwyg.vue"));
+Vue.component("recaptcha", require("./components/Recaptcha.vue"));
 Vue.component("dropdown", require("./components/Dropdown.vue"));
 Vue.component("channel-dropdown", require("./components/ChannelDropdown.vue"));
 Vue.component("logout-button", require("./components/LogoutButton"));
diff --git a/resources/assets/js/components/Recaptcha.vue b/resources/assets/js/components/Recaptcha.vue
new file mode 100644
index 0000000..49c2831
--- /dev/null
+++ b/resources/assets/js/components/Recaptcha.vue
@@ -0,0 +1,24 @@
+<template>
+    <div id="g-recaptcha" class="g-recaptcha" :data-sitekey="sitekey"></div>
+</template>
+
+<script>
+    export default {
+        props: [ 'sitekey' ],
+
+        mounted () {
+            if (window.grecaptcha) {
+                this.widgetId = window.grecaptcha.render('g-recaptcha', {
+                    sitekey: this.sitekey
+                })
+            }
+        },
+
+        data () {
+            return {
+                widgetId: 0
+            }
+        }
+    }
+</script>
+
diff --git a/resources/views/modals/new-thread.blade.php b/resources/views/modals/new-thread.blade.php
index 3a2891c..e345f7d 100644
--- a/resources/views/modals/new-thread.blade.php
+++ b/resources/views/modals/new-thread.blade.php
@@ -29,7 +29,7 @@
             </div>
 
             <div class="mb-6">
-                <div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.key') }}"></div>
+                <recaptcha ref="recaptcha" sitekey="{{ config('services.recaptcha.key') }}"></recaptcha>
             </div>
 
             <div class="flex justify-end">
diff --git a/resources/views/threads/create.blade.php b/resources/views/threads/create.blade.php
deleted file mode 100644
index f6ffcd3..0000000
--- a/resources/views/threads/create.blade.php
+++ /dev/null
@@ -1,64 +0,0 @@
-@extends('layouts.app')
-
-@section ('head')
-    <script src='https://www.google.com/recaptcha/api.js'></script>
-@endsection
-
-@section('content')
-    <div class="container">
-        <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-                <div class="panel panel-default">
-                    <div class="panel-heading">Create a New Thread</div>
-
-                    <div class="panel-body">
-                        <form method="POST" action="/threads">
-                            {{ csrf_field() }}
-
-                            <div class="form-group">
-                                <label for="channel_id">Choose a Channel:</label>
-                                <select name="channel_id" id="channel_id" class="form-control" required>
-                                    <option value="">Choose One...</option>
-
-                                    @foreach ($channels as $channel)
-                                        <option value="{{ $channel->id }}" {{ old('channel_id') == $channel->id ? 'selected' : '' }}>
-                                            {{ $channel->name }}
-                                        </option>
-                                    @endforeach
-                                </select>
-                            </div>
-
-                            <div class="form-group">
-                                <label for="title">Title:</label>
-                                <input type="text" class="form-control" id="title" name="title"
-                                       value="{{ old('title') }}" required>
-                            </div>
-
-                            <div class="form-group">
-                                <label for="body">Body:</label>
-                                <wysiwyg name="body" value="{{ old('body') }}"></wysiwyg>
-                            </div>
-
-                            <div class="form-group">
-                                <div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.key') }}"></div>
-                            </div>
-
-                            <div class="form-group">
-                                <button type="submit" class="btn btn-primary">Publish</button>
-                            </div>
-
-                            @if (count($errors))
-                                <ul class="alert alert-danger">
-                                    @foreach ($errors->all() as $error)
-                                        <li>{{ $error }}</li>
-                                    @endforeach
-                                </ul>
-                            @endif
-                        </form>
-
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-@endsection