@govuk-pay/pay-js-commons - npm Package Compare versions

Comparing version 1.1.0 to 1.3.0

lib/browsered/field-validation/field-validation.js

@@ -1,8 +0,6 @@
-'use strict';
+'use strict'; // NPM Dependencies
 
-// NPM Dependencies
+var every = require('lodash/every'); // Local Dependencies
 
-var every = require('lodash/every');
 
-// Local Dependencies
 var checks = require('../../utils/field-validation-checks');
@@ -12,3 +10,2 @@
   var allForms = Array.prototype.slice.call(document.getElementsByTagName('form'));
-
   allForms.filter(function (form) {
@@ -25,3 +22,2 @@ return form.hasAttribute('data-validate');
   clearPreviousErrors();
-
   var validatedFields = findFields(form).map(function (field) {
@@ -41,3 +37,2 @@ return validateField(form, field);
   var previousErrorsFields = Array.prototype.slice.call(document.querySelectorAll('.form-group.error'));
-
   previousErrorsMessages.map(function (error) {
@@ -53,3 +48,2 @@ return error.remove();
   var formFields = Array.prototype.slice.call(form.querySelectorAll('input, textarea, select'));
-
   return formFields.filter(function (field) {
@@ -61,5 +55,4 @@ return field.hasAttribute('data-validate');
 function validateField(form, field) {
-  var result = void 0;
+  var result;
   var validationTypes = field.getAttribute('data-validate').split(' ');
-
   validationTypes.forEach(function (validationType) {
@@ -70,26 +63,35 @@ switch (validationType) {
         break;
+
       case 'currency':
         result = checks.isCurrency(field.value);
         break;
+
       case 'email':
         result = checks.isValidEmail(field.value);
         break;
+
       case 'phone':
         result = checks.isPhoneNumber(field.value);
         break;
+
       case 'https':
         result = checks.isHttps(field.value);
         break;
+
       case 'belowMaxAmount':
         result = checks.isAboveMaxAmount(field.value);
         break;
+
       case 'passwordLessThanTenChars':
         result = checks.isPasswordLessThanTenChars(field.value);
         break;
+
       case 'isFieldGreaterThanMaxLengthChars':
         result = checks.isFieldGreaterThanMaxLengthChars(field.value, field.getAttribute('data-validate-max-length'));
         break;
+
       case 'isNaxsiSafe':
         result = checks.isNaxsiSafe(field.value);
         break;
+
       default:
@@ -99,2 +101,3 @@ result = false;
     }
+
     if (result) {
@@ -104,3 +107,2 @@ applyErrorMessaging(form, field, result);
   });
-
   return !field.closest('.form-group').classList.contains('error');
@@ -111,2 +113,3 @@ }
   var formGroup = field.closest('.form-group');
+
   if (!formGroup.classList.contains('error')) {
@@ -123,9 +126,11 @@ formGroup.classList.add('error');
     var label = field.innerHTML.split('<')[0].trim();
-    return { label: label, id: id };
+    return {
+      label: label,
+      id: id
+    };
   });
-
-  form.parentNode.insertAdjacentHTML('afterbegin', '<div id="error-summary" class="error-summary" role="group" aria-labelledby="error-summary-heading" tabindex="-1">\n      <h2 class="heading-medium error-summary-heading" id="error-summary-heading">\n        There was a problem with the details you gave for:\n      </h2>\n      <ul class="error-summary-list">\n        ' + errorMessages.map(function (message) {
-    return '<li class="error-' + message.id + '"><a href="#' + message.id + '">' + message.label + '</a></li>';
-  }).join('') + '\n      </ul>\n    </div>');
+  form.parentNode.insertAdjacentHTML('afterbegin', "<div id=\"error-summary\" class=\"error-summary\" role=\"group\" aria-labelledby=\"error-summary-heading\" tabindex=\"-1\">\n      <h2 class=\"heading-medium error-summary-heading\" id=\"error-summary-heading\">\n        There was a problem with the details you gave for:\n      </h2>\n      <ul class=\"error-summary-list\">\n        ".concat(errorMessages.map(function (message) {
+    return "<li class=\"error-".concat(message.id, "\"><a href=\"#").concat(message.id, "\">").concat(message.label, "</a></li>");
+  }).join(''), "\n      </ul>\n    </div>"));
   window.scroll(0, 0);
 }

lib/index.js

 'use strict';
 
 var browsered = require('./browsered');
+
 var utils = require('./utils');
 
-// Add to window.GOVUKPAY if in browser context
+var nunjucksFilters = require('./nunjucks-filters'); // Add to window.GOVUKPAY if in browser context
+
+
 if (typeof window !== 'undefined') {
   window.GOVUKPAY = window.GOVUKPAY || {};
-  window.GOVUKPAY = { browsered: browsered };
+  window.GOVUKPAY = {
+    browsered: browsered
+  };
 }
 
-module.exports.browsered = browsered;
-module.exports.utils = utils;
+module.exports = {
+  browsered: browsered,
+  utils: utils,
+  nunjucksFilters: nunjucksFilters
+};

lib/utils/field-validation-checks.js

@@ -1,14 +0,11 @@
-'use strict';
+'use strict'; // NPM dependencies
 
-// NPM dependencies
+var parseInt = require('lodash/parseInt'); // Local dependencies
 
-var parseInt = require('lodash/parseInt');
 
-// Local dependencies
-var emailValidator = require('./is-valid-email');
+var emailValidator = require('./is-valid-email'); // Constants
 
-// Constants
+
 var NUMBERS_ONLY = /^\d+$/;
 var MAX_AMOUNT = 100000;
-
 var validationErrors = {
@@ -20,3 +17,3 @@ required: 'This field cannot be blank',
   isHttps: 'URL must begin with https://',
-  isAboveMaxAmount: 'Choose an amount under \xA3' + MAX_AMOUNT.toLocaleString(),
+  isAboveMaxAmount: "Choose an amount under \xA3".concat(MAX_AMOUNT.toLocaleString()),
   isPasswordLessThanTenChars: 'Choose a Password of 10 characters or longer',
@@ -31,2 +28,3 @@ isGreaterThanMaxLengthChars: 'The text is too long',
   }
+
   return false;
@@ -39,2 +37,3 @@ };
   }
+
   return false;
@@ -47,2 +46,3 @@ };
   }
+
   return false;
@@ -53,5 +53,7 @@ };
   var trimmedTelephoneNumber = value.replace(/\s/g, '');
+
   if (trimmedTelephoneNumber.length < 11 || !NUMBERS_ONLY.test(trimmedTelephoneNumber)) {
     return validationErrors.phoneNumber;
   }
+
   return false;
@@ -64,2 +66,3 @@ };
   }
+
   return false;
@@ -72,2 +75,3 @@ };
   }
+
   return false;
@@ -89,3 +93,4 @@ };
   }
+
   return false;
 };

lib/utils/is-valid-email.js

@@ -1,5 +0,3 @@
-'use strict';
+'use strict'; // NPM dependencies
 
-// NPM dependencies
-
 var rfc822Validator = require('rfc822-validate');
@@ -12,3 +10,4 @@
   }
+
   return false;
 };

package.json

 {
   "name": "@govuk-pay/pay-js-commons",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Reusable js scripts for GOV.UK Pay Node.js projects",
@@ -8,7 +8,12 @@ "main": "lib/index.js",
     "clean": "rm -rf lib",
-    "precommit": "lint-staged",
-    "transpile": "npm run clean && ./node_modules/babel-cli/bin/babel.js src --out-dir lib",
+    "copy": "cp -R src/data lib/data",
+    "transpile": "npm run clean && babel src --out-dir lib && npm run copy",
     "prepare": "npm run transpile",
-    "test": "./node_modules/karma/bin/karma start"
+    "test": "karma start"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
   "repository": {
@@ -43,3 +48,13 @@ "type": "git",
       "lib"
-    ]
+    ],
+    "globals": [
+      "describe",
+      "it"
+    ],
+    "rules": {
+      "object-curly-spacing": [
+        2,
+        "always"
+      ]
+    }
   },
@@ -55,3 +70,3 @@ "lint-staged": {
       [
-        "env",
+        "@babel/preset-env",
         {
@@ -70,16 +85,16 @@ "targets": {
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babelify": "^8.0.0",
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "babelify": "^10.0.0",
     "browser-env": "^3.2.5",
-    "browserify": "^16.1.1",
-    "chai": "^4.1.2",
-    "eslint-plugin-import": "^2.10.0",
-    "eslint-plugin-promise": "^3.7.0",
-    "husky": "^0.14.3",
-    "jsdom": "^11.7.0",
+    "browserify": "^16.2.3",
+    "chai": "^4.2.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-promise": "^4.0.1",
+    "husky": "^1.3.1",
+    "jsdom": "^13.1.0",
     "jsdom-global": "^3.0.2",
-    "karma": "^2.0.0",
-    "karma-browserify": "^5.2.0",
+    "karma": "^3.1.4",
+    "karma-browserify": "^6.0.0",
     "karma-chrome-launcher": "^2.2.0",
@@ -89,9 +104,9 @@ "karma-mocha": "^1.3.0",
     "karma-source-map-support": "^1.2.0",
-    "lint-staged": "^7.0.3",
+    "lint-staged": "^8.1.0",
     "mocha": "^5.0.5",
     "rfc822-validate": "^1.0.0",
-    "sinon": "^4.5.0",
+    "sinon": "^7.2.2",
     "uglify-js": "^3.3.18",
     "watchify": "^3.11.0",
-    "xo": "^0.20.3"
+    "xo": "^0.23.0"
   },
@@ -102,4 +117,6 @@ "directories": {
   "dependencies": {
-    "lodash": "^4.17.5"
+    "lodash": "^4.17.11",
+    "moment-timezone": "^0.5.23",
+    "slugify": "^1.3.4"
   }
 }

README.md

@@ -1,2 +0,168 @@
-# pay-js-commons
+[![Build Status](https://travis-ci.org/alphagov/pay-js-commons.svg?branch=master)](https://travis-ci.org/alphagov/pay-js-commons)
+
+
+# GOV.UK Pay JS Commons
 Reusable js scripts for GOV.UK Pay Node.js projects
+
+- [Browsered scripts](#browsered-scripts)
+- [Utilities](#utilities)
+- [Nunjucks filters](#nunjucks-filters)
+
+## Browsered scripts
+This is a colection of client side scripts we use throught the GOV.UK 
+Pay in the browser. We call it browsered because they are written in 
+Node.js and _browsered_ by Browserify to make them safe for all our 
+browsers. We browserify [within the microservice when it’s compiled](https://github.com/alphagov/pay-selfservice/blob/master/Gruntfile.js#L128).
+
+#### List of scripts
+- [Field validation](#field-validation)
+
+### Field Validation
+This is a collection of validators that can be applied to inputs that
+will check the values and display errors using the [GOV.UK elements styling](https://govuk-elements.herokuapp.com/errors/#summarise-errors).
+
+Validators:
+- [required](#required)
+- [currency](#currency)
+- [email](#email)
+- [phone](#phone)
+- [https](#https)
+- [belowMaxAmount](#number-is-less-than-maximum-value)
+- [passwordLessThanTenChars](#password)
+- [isFieldGreaterThanMaxLengthChars](#maximum-character-limit)
+- [isNaxsiSafe](#naxsi)
+
+#### Required
+This requires a value from a given input
+
+```html
+<form data-validate>
+  <div class="govuk-form-group">
+    <label for="name">Your name</label>
+    <input name="name" data-validate="required" value="" />
+  </div>
+</form>
+```
+
+#### Currency
+This requires the value is a valid currency amount i.e. “10” or ”9.99”.
+
+```html
+<form data-validate>
+  <div class="govuk-form-group">
+    <label for="amount">Amount</label>
+    <input name="amount" data-validate="required currency" value="" />
+  </div>
+</form>
+```
+
+#### Email
+This requires the value is a valid email address with a [TLD](https://en.wikipedia.org/wiki/Top-level_domain) on the end (as [technically](https://www.ietf.org/rfc/rfc822.txt) an email doesn’t need one).
+
+```html
+<form data-validate>
+  <div class="govuk-form-group">
+    <label for="email">Your email address</label>
+    <input name="email" data-validate="email" value="" />
+  </div>
+</form>
+```
+
+#### Phone
+This requires the value is a 11 digit phone number, it isn’t concerned
+with spacing, so `077 777 777 77` and `07777777777` are both valid.
+
+```html
+<form data-validate>
+  <div class="govuk-form-group">
+    <label for="phone">Phone number</label>
+    <input name="phone" data-validate="phone" value="" />
+  </div>
+</form>
+```
+
+#### HTTPS
+This requires a link to begin with https://
+
+```html
+<form data-validate>
+  <div class="govuk-form-group">
+    <label for="url">Return URL</label>
+    <input name="url" data-validate="https" value="" />
+  </div>
+</form>
+```
+
+#### Number is less than maximum value
+This requires the value is less than £100,000 as that has been deemed sensible…
+
+```html
+<form data-validate>
+  <div class="govuk-form-group">
+    <label for="price">Amount</label>
+    <input name="price" data-validate="belowMaxAmount" value="" />
+  </div>
+</form>
+```
+
+#### Password
+This requires a password be at least 10 chars
+
+```html
+<form data-validate>
+  <div class="govuk-form-group">
+    <label for="password">Password</label>
+    <input name="password" data-validate="passwordLessThanTenChars" value="" />
+  </div>
+</form>
+```
+
+#### Maximum character limit
+This requires a value be less than a certain number of characters. This limit
+is set within a `data-attribute`
+
+```html
+<form data-validate>
+  <div class="govuk-form-group">
+    <label for="title">Title</label>
+    <input name="title" data-validate="isFieldGreaterThanMaxLengthChars" data-validate-max-length="255" value="" />
+  </div>
+</form>
+```
+
+#### NAXSI
+This checks whether a field contains characters than would cause NAXSI to get upset,
+meaning characters that look like code injection
+i.e. ``< > ; : ` ( ) " \' = | , ~ [ ]``
+
+```html
+<form data-validate>
+  <div class="govuk-form-group">
+    <label for="title">Title</label>
+    <input name="title" data-validate="isNaxsiSafe" value="" />
+  </div>
+</form>
+```
+
+## Utilities
+
+These are small functions that power the nunjucks filters but can also be used for server side stuff too.
+
+## Nunjucks filters
+
+These get loaded in to the Nunjucks environment and then can apply changes to variables in templates.
+
+For example if a country comes in as ISO code `EN` it can be converted to it’s name like so
+
+```html
+  <p>{{ countryCode | countryISOtoName }}</p>
+```
+
+Or a pence value can be converted to GBP
+
+```html
+  <dl>
+    <dt>Amount:</dt>
+    <dd>{{ amount | penceToPounds }}</dd>
+  </dl>
+```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48224

increased by349.93%

Number of package files

18

increased by100%

Lines of code

2306

increased by1101.04%

Number of lines in readme file

169

increased by5533.33%

Worsened metrics

Dependency count

3

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmoment-timezone@^0.5.23

• + Addedslugify@^1.3.4

• + Addedmoment@2.30.1(transitive)

• + Addedmoment-timezone@0.5.47(transitive)

• + Addedslugify@1.6.6(transitive)

• Updatedlodash@^4.17.11