More twiddles (#1892)

* Make these sections a tougher meal.

Post #944 #1867 *(not optional atm)*

Auto-merge

Author: Martii

README.md

@@ -36,6 +36,7 @@ Repository | Reference | Recent Version
 [express-minify][express-minifyGHUrl] | [Documentation][express-minifyDOCUrl] | [![NPM version][express-minifyNPMVersionImage]][express-minifyNPMUrl]
 [express-rate-limit][express-rate-limitGHUrl] | [Documentation][express-rate-limitDOCUrl] | [![NPM version][express-rate-limitNPMVersionImage]][express-rate-limitNPMUrl]
 [express-session][express-sessionGHUrl] | [Documentation][express-sessionDOCUrl] | [![NPM version][express-sessionNPMVersionImage]][express-sessionNPMUrl]
+[express-svg-captcha][express-svg-captchaGHUrl] | [Documentation][express-svg-captchaDOCUrl] | [![NPM version][express-svg-captchaNPMVersionImage]][express-svg-captchaNPMUrl]
 [font-awesome][font-awesomeGHUrl] | [Documentation][font-awesomeDOCUrl] | [![NPM version][font-awesomeNPMVersionImage]][font-awesomeNPMUrl]
 [formidable][formidableGHUrl] | [Documentation][formidableDOCUrl] | [![NPM version][formidableNPMVersionImage]][formidableNPMUrl]
 [git-rev][git-revGHUrl] | [Documentation][git-revDOCUrl] | [![NPM version][git-revNPMVersionImage]][git-revNPMUrl]
@@ -204,6 +205,11 @@ Outdated dependencies list can be achieved with `$ npm outdated` from the termin
 [express-sessionNPMUrl]: https://www.npmjs.com/package/express-session
 [express-sessionNPMVersionImage]: https://img.shields.io/npm/v/express-session.svg?style=flat
 
+[express-svg-captchaGHUrl]: https://github.com/cmd430/express-svg-captcha
+[express-svg-captchaDOCUrl]: https://github.com/cmd430/express-svg-captcha/blob/master/README.md
+[express-svg-captchaNPMUrl]: https://www.npmjs.com/package/express-svg-captcha
+[express-svg-captchaNPMVersionImage]: https://img.shields.io/npm/v/express-svg-captcha.svg?style=flat
+
 [font-awesomeGHUrl]: https://github.com/FortAwesome/Font-Awesome
 [font-awesomeDOCUrl]: https://fontawesome.com/
 [font-awesomeNPMUrl]: https://www.npmjs.com/package/font-awesome

controllers/user.js

@@ -15,6 +15,7 @@ var async = require('async');
 var _ = require('underscore');
 var util = require('util');
 var rfc2047 = require('rfc2047');
+var expressCaptcha = require('express-svg-captcha');
 
 var SPDX = require('spdx-license-ids');
 
@@ -941,6 +942,25 @@ exports.userSyncListPage = function (aReq, aRes, aNext) {
   });
 };
 
+var captcha = new expressCaptcha({
+  isMath: true,           // if true will be a simple math equation
+  useFont: null,          // Can be path to ttf/otf font file
+  size: 4,                // number of characters for string capthca
+  ignoreChars: '0o1i',    // characters to not include in string capthca
+  noise: 3,               // number of noise lines
+  color: true,            // if true noise lines and captcha characters will be randomly colored
+                          // (is set to true if background is set)
+  background: null,       // HEX or RGB(a) value for background set to null for transparent
+  width: 200,             // width of captcha
+  height: 50,             // height of captcha
+  fontSize: 56,           // font size for captcha
+  charPreset: null        // string of characters for use with string captcha set to null for default aA-zZ
+});
+
+exports.userEditProfilePageCaptcha = function (aReq, aRes, aNext) {
+  (captcha.generate())(aReq, aRes, aNext);
+}
+
 exports.userEditProfilePage = function (aReq, aRes, aNext) {
   var authedUser = aReq.session.user;
 
@@ -2059,16 +2079,56 @@ exports.update = function (aReq, aRes, aNext) {
   var authedUser = aReq.session.user;
 
   // Update the about section of a user's profile
-  User.findOneAndUpdate({ _id: authedUser._id }, { about: aReq.body.about },
-    function (aErr, aUser) {
+  User.findOne({ _id: authedUser._id }, function (aErr, aUser) {
+    if (aErr) {
+      aRes.redirect('/');
+      return;
+    }
+
+    if (!aUser) {
+      msg = 'No user found.'
+      statusCodePage(aReq, aRes, aNext, {
+        statusCode: 500,
+        statusMessage: msg
+      });
+      return;
+    }
+
+    if (!captcha.validate(aReq, aReq.body.captcha)) {
+      aRes.redirect('/users/' + encodeURIComponent(aUser.name));
+      return;
+    }
+
+    // Update DB
+    aUser.about = aReq.body.about;
+    aUser.save(function (aErr, aUser) {
+      var msg = null;
+
       if (aErr) {
-        aRes.redirect('/');
+        msg = 'Unknown error when saving Profile.';
+        statusCodePage(aReq, aRes, aNext, {
+          statusCode: 500,
+          statusMessage: [msg, 'Please contact Development'].join(' ')
+        });
+        console.error(aErr);
+        return;
+      }
+      if (!aUser) {
+        msg = 'No user handle when saving Profile.';
+        statusCodePage(aReq, aRes, aNext, {
+          statusCode: 500,
+          statusMessage: [msg, 'Please contact Development'].join(' ')
+        });
+        console.error(msg)
         return;
       }
 
+      // Update session
       authedUser.about = aUser.about;
+
       aRes.redirect('/users/' + encodeURIComponent(aUser.name));
     });
+  });
 };
 
 // Submit a script through the web editor

libs/modelParser.js

@@ -726,6 +726,9 @@ var parseUser = function (aUser) {
   // Dates
   parseDateProperty(user, 'created');
 
+  // Misc
+  user.hasCaptcha = true;
+
   return user;
 };
 parseModelFnMap.User = parseUser;

package.json

@@ -21,6 +21,7 @@
     "express-minify": "1.0.0",
     "express-rate-limit": "5.5.1",
     "express-session": "1.17.2",
+    "express-svg-captcha": "1.0.1",
     "font-awesome": "4.7.0",
     "formidable": "1.2.2",
     "git-rev": "0.2.1",

routes.js

@@ -149,6 +149,7 @@ module.exports = function (aApp) {
   aApp.route('/users/:username/github/import').post(authentication.validateUser, user.userGitHubImportScriptPage);
 
   aApp.route('/users/:username/profile/edit').get(authentication.validateUser, user.userEditProfilePage).post(authentication.validateUser, user.update);
+  aApp.route('/users/:username/profile/captcha').get(authentication.validateUser, user.userEditProfilePageCaptcha);
   aApp.route('/users/:username/update').post(authentication.validateUser, admin.adminUserUpdate);
   // NOTE: Some below inconsistent with priors
   aApp.route('/user/preferences').get(authentication.validateUser, user.userEditPreferencesPage);

views/includes/scripts/markdownCopy.html

@@ -0,0 +1,46 @@
+<script type="text/javascript">
+  (function () {
+    var textareaContent = null;
+
+    function show() {
+      var textarea = document.querySelector('.user-content textarea[name=about]');
+      if (textarea) {
+        textarea.setAttribute('readonly', 'readonly');
+        textareaContent = textarea.value;
+      } else {
+        textareaContent = '';
+      }
+
+      var submit = document.querySelector('#captchaModal button[type=submit]');
+      if (submit) {
+        document.addEventListener('click', click, { capture: true, passive: true });
+      }
+    }
+
+    function hide() {
+      var textarea = document.querySelector('.user-content textarea[name=about]');
+      if (textarea) {
+        textarea.removeAttribute('readonly', 'readonly');
+        textareaContent = null;
+      }
+    }
+
+    function click() {
+      var textarea = document.querySelector('.user-content textarea[name=about]');
+      var input = document.querySelector('#captchaModal input[name=about]');
+      var submit = document.querySelector('#captchaModal button[type=submit]');
+
+      if (input && textarea && textarea.value === textareaContent) {
+        input.value = textareaContent;
+      }
+      if (submit) {
+        submit.removeEventListener('click', click, { capture: true, passive: true });
+      }
+    }
+
+    // WARNING: jQuery required for event capture with *bootstrap*@3.x events
+    $('#captchaModal').on('show.bs.modal', show);
+    $('#captchaModal').on('hide.bs.modal', hide);
+
+  })();
+</script>

views/includes/siteModals.html

@@ -18,3 +18,38 @@ <h4 class="modal-title"><i class="fa fa-fw fa-money"></i> Donate for the site Op
     </div>
   </div>
 </div>
+{{#user.hasCaptcha}}
+<div class="modal fade" id="captchaModal">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title"><i class="fa fa-fw fa-user"></i> I am human</h4>
+      </div>
+      <div class="modal-body text-center d-block">
+        <p>Please solve this.</p>
+      </div>
+      <div class="form-group has-feedback has-clear text-center">
+        <img class="" src="/users/{{user.slugUrl}}/profile/captcha"/>
+      </div>
+      <form action="" method="post">
+        <div class="modal-footer">
+          <input type="hidden" name="about">
+          <div class="input-group col-xs-12">
+            <span class="input-group-btn">
+              <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-fw fa-close"></i> Close</button>
+            </span>
+            <input class="form-control text-center" type="text" name="captcha" placeholder="Type solution here" autocomplete="off"/>
+            <span class="input-group-btn">
+              <button type="submit" class="btn btn-success" title="Submit solution">
+                <i class="fa fa-fw fa-check"></i><span > Submit</span>
+              </button>
+            </span>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+{{> includes/scripts/markdownCopy.html }}
+{{/user.hasCaptcha}}

views/pages/userEditProfilePage.html

@@ -13,18 +13,16 @@
         <div class="row">
           <div class="col-xs-12">
             {{> includes/userPageHeader.html }}
-            <form action="" method="post">
               <div class="user-content">
                 <textarea name="about" data-provide="markdown" data-iconlibrary="fa" rows="28" class="col-xs-12" placeholder="Type Profile here using Markdown.">{{user.about}}</textarea>
               </div>
               <div class="btn-toolbar">
                 <a href="/about/Frequently-Asked-Questions"><i class="fa fa-question-circle" title="FAQ"></i></a>
                 <a href="https://guides.github.com/features/mastering-markdown/" title="GitHub Flavor Markdown compatible"><i class="octicon octicon-markdown"></i></a>
-                <button type="submit" class="btn btn-sm btn-success pull-right" title="Save Profile changes">
+                <a rel="bookmark" referrerpolicy="same-origin" href="#" data-toggle="modal" data-target="#captchaModal" class="btn btn-sm btn-success pull-right" title="Save Profile changes">
                   <i class="fa fa-fw fa-save"></i><span class="hidden-xs"> Save</span>
-                </button>
+                </a>
               </div>
-            </form>
           </div>
         </div>
       </div>