Added crude example of captcha usage

.gitignore

@@ -5,10 +5,10 @@ Homestead.yaml
 .idea
 npm-debug.log
 yarn-error.log
-/public/dist/*.map
+/public/dist
 /public/plugins
-/public/css/*.map
-/public/js/*.map
+/public/css
+/public/js
 /public/bower
 /public/build/
 /storage/images

app/Http/Controllers/Auth/RegisterController.php

@@ -13,6 +13,7 @@ use BookStack\Exceptions\SocialSignInException;
 use BookStack\Exceptions\UserRegistrationException;
 use BookStack\Http\Controllers\Controller;
 use Exception;
+use GuzzleHttp\Client;
 use Illuminate\Foundation\Auth\RegistersUsers;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
@@ -115,6 +116,20 @@ class RegisterController extends Controller
         $this->checkRegistrationAllowed();
         $this->validator($request->all())->validate();
 
+        $captcha = $request->get('g-recaptcha-response');
+        $resp = (new Client())->post('https://www.google.com/recaptcha/api/siteverify', [
+            'form_params' => [
+                'response' => $captcha,
+                'secret' => '%%secret_key%%',
+            ]
+        ]);
+        $respBody = json_decode($resp->getBody());
+        if (!$respBody->success) {
+            return redirect()->back()->withInput()->withErrors([
+                'g-recaptcha-response' => 'Did not pass captcha',
+            ]);
+        }
+
         $userData = $request->all();
         return $this->registerUser($userData);
     }

public/dist/print-styles.css

@@ -1,36 +0,0 @@
-:root {
-  --color-primary: #206ea7;
-  --color-primary-light: rgba(32,110,167,0.15);
-  --color-page: #206ea7;
-  --color-page-draft: #7e50b1;
-  --color-chapter: #af4d0d;
-  --color-book: #077b70;
-  --color-bookshelf: #a94747; }
-
-header {
-  display: none; }
-
-html, body {
-  font-size: 12px;
-  background-color: #FFF; }
-
-.page-content {
-  margin: 0 auto; }
-
-.print-hidden {
-  display: none !important; }
-
-.tri-layout-container {
-  grid-template-columns: 1fr;
-  grid-template-areas: "b";
-  margin-left: 0;
-  margin-right: 0;
-  display: block; }
-
-.card {
-  box-shadow: none; }
-
-.content-wrap.card {
-  padding-left: 0;
-  padding-right: 0; }
-

resources/assets/js/components/page-comments.js

@@ -26,12 +26,10 @@ class PageComments {
 
     handleAction(event) {
         let actionElem = event.target.closest('[action]');
-
         if (event.target.matches('a[href^="#"]')) {
             const id = event.target.href.split('#')[1];
             scrollAndHighlightElement(document.querySelector('#' + id));
         }
-
         if (actionElem === null) return;
         event.preventDefault();
 

resources/assets/js/services/animations.js

@@ -1,10 +1,3 @@
-/**
- * Used in the function below to store references of clean-up functions.
- * Used to ensure only one transitionend function exists at any time.
- * @type {WeakMap<object, any>}
- */
-const animateStylesCleanupMap = new WeakMap();
-
 /**
  * Fade out the given element.
  * @param {Element} element
@@ -12,7 +5,6 @@ const animateStylesCleanupMap = new WeakMap();
  * @param {Function|null} onComplete
  */
 export function fadeOut(element, animTime = 400, onComplete = null) {
-    cleanupExistingElementAnimation(element);
     animateStyles(element, {
         opacity: ['1', '0']
     }, animTime, () => {
@@ -27,7 +19,6 @@ export function fadeOut(element, animTime = 400, onComplete = null) {
  * @param {Number} animTime
  */
 export function slideUp(element, animTime = 400) {
-    cleanupExistingElementAnimation(element);
     const currentHeight = element.getBoundingClientRect().height;
     const computedStyles = getComputedStyle(element);
     const currentPaddingTop = computedStyles.getPropertyValue('padding-top');
@@ -50,7 +41,6 @@ export function slideUp(element, animTime = 400) {
  * @param {Number} animTime - Animation time in ms
  */
 export function slideDown(element, animTime = 400) {
-    cleanupExistingElementAnimation(element);
     element.style.display = 'block';
     const targetHeight = element.getBoundingClientRect().height;
     const computedStyles = getComputedStyle(element);
@@ -66,6 +56,13 @@ export function slideDown(element, animTime = 400) {
     animateStyles(element, animStyles, animTime);
 }
 
+/**
+ * Used in the function below to store references of clean-up functions.
+ * Used to ensure only one transitionend function exists at any time.
+ * @type {WeakMap<object, any>}
+ */
+const animateStylesCleanupMap = new WeakMap();
+
 /**
  * Animate the css styles of an element using FLIP animation techniques.
  * Styles must be an object where the keys are style properties, camelcase, and the values
@@ -87,28 +84,23 @@ function animateStyles(element, styles, animTime = 400, onComplete = null) {
         }
         element.style.transition = null;
         element.removeEventListener('transitionend', cleanup);
-        animateStylesCleanupMap.delete(element);
         if (onComplete) onComplete();
     };
 
     setTimeout(() => {
-        element.style.transition = `all ease-in-out ${animTime}ms`;
-        for (let style of styleNames) {
-            element.style[style] = styles[style][1];
-        }
+        requestAnimationFrame(() => {
+            element.style.transition = `all ease-in-out ${animTime}ms`;
+            for (let style of styleNames) {
+                element.style[style] = styles[style][1];
+            }
 
-        element.addEventListener('transitionend', cleanup);
-        animateStylesCleanupMap.set(element, cleanup);
-    }, 15);
-}
+            if (animateStylesCleanupMap.has(element)) {
+                const oldCleanup = animateStylesCleanupMap.get(element);
+                element.removeEventListener('transitionend', oldCleanup);
+            }
 
-/**
- * Run the active cleanup action for the given element.
- * @param {Element} element
- */
-function cleanupExistingElementAnimation(element) {
-    if (animateStylesCleanupMap.has(element)) {
-        const oldCleanup = animateStylesCleanupMap.get(element);
-        oldCleanup();
-    }
+            element.addEventListener('transitionend', cleanup);
+            animateStylesCleanupMap.set(element, cleanup);
+        });
+    }, 10);
 }

resources/assets/sass/styles.scss

@@ -253,8 +253,7 @@ $btt-size: 40px;
   .list-sort {
     display: inline-grid;
     margin-left: $-s;
-    grid-template-columns: minmax(120px, max-content) 40px;
-    font-size: 0.9rem;
+    grid-template-columns: 120px 40px;
     border: 2px solid #DDD;
     border-radius: 4px;
   }

resources/views/auth/register.blade.php

@@ -26,6 +26,14 @@
                     @include('form.password', ['name' => 'password', 'placeholder' => trans('auth.password_hint')])
                 </div>
 
+                <div class="form-group">
+                    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+                    <div class="g-recaptcha" data-sitekey="%%site_key%%"></div>
+                    @if($errors->has('g-recaptcha-response'))
+                        <div class="text-neg text-small">{{ $errors->first('g-recaptcha-response') }}</div>
+                    @endif
+                </div>
+
                 <div class="grid half collapse-xs gap-xl v-center mt-m">
                     <div class="text-small">
                         <a href="{{ url('/login') }}">{{ trans('auth.already_have_account') }}</a>

resources/views/comments/comment.blade.php

@@ -31,7 +31,7 @@
                         <button type="button" dropdown-toggle aria-haspopup="true" aria-expanded="false" class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
                         <ul class="dropdown-menu" role="menu">
                             <li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
-                            <li><button action="delete" type="button" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</button></li>
+                            <li><a action="delete" href="#" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
                         </ul>
                     </div>
                 @endif

version

@@ -1 +1 @@
-v0.27.5
+v0.27-dev