Merge pull request #313 from FuelRats/develop

.eslintignore

@@ -2,8 +2,12 @@
 !.*
 
 # Compiled sources
-dist
-deploy_dist
-node_modules
+.github
 .vscode/blueprints
 .yarn
+deploy_dist
+dist
+docs
+node_modules
+public
+scripts

.stylelintignore

@@ -1,6 +1,12 @@
-dist
+.github
+.vscode
+.yarn
 deploy_dist
+dist
+docs
 node_modules
+public
+scripts
 **/*.js
 **/*.mjs
 **/*.json

.stylelintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
   extends: '@fuelrats/stylelint-config',
+  rules: {
+    'media-query-list-comma-space-after': 'always-single-line',
+  },
 }

.vscode/settings.json

@@ -1,15 +1,21 @@
 {
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true,
+    },
+  },
   "[javascriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
+      "source.fixAll.eslint": true,
     },
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   "[scss]": {
+    "editor.defaultFormatter": "stylelint.vscode-stylelint",
     "editor.codeActionsOnSave": {
       "source.fixAll.stylelint": true
-    },
-    "editor.defaultFormatter": "stylelint.vscode-stylelint"
+    }
   },
   "blueprint.templatesPath": [
     "./.vscode/blueprints"
@@ -22,14 +28,14 @@
   ],
   "editor.tabSize": 2,
   "editor.wordWrapColumn": 180,
-  "eslint.format.enable": true,
   "eslint.lintTask.enable": true,
   "eslint.packageManager": "yarn",
   "files.associations": {
     "*.js": "javascriptreact",
     "*.mjs": "javascript",
     ".all-contributorsrc": "json",
-    ".stylelintrc": "json"
+    ".stylelintrc": "json",
+    "yarn.lock": "yaml",
   },
   "files.eol": "\n",
   "files.insertFinalNewline": true,
@@ -54,5 +60,5 @@
   },
   "stylelint.packageManager": "yarn",
   "stylelint.reportNeedlessDisables": true,
-  "cSpell.language": "en,en-US"
+  "cSpell.language": "en,en-US",
 }

CHANGELOG.md

@@ -25,7 +25,25 @@ For detailed rules of this file, see  [Changelog Rules](#changelog-rules)
 
 
 [#303]: https://github.com/fuelRats/fuelrats.com/pull/303
-[Unreleased]: https://github.com/FuelRats/fuelrats.com/compare/v2.12.8...HEAD
+[Unreleased]: https://github.com/FuelRats/fuelrats.com/compare/v2.12.9...HEAD
+
+
+
+
+
+## [2.12.9][] - 2021-03-10
+
+### ✨ Added
+* Add asterisk icon to inputs when they are required, but empty. - [#312][]
+
+
+### ⚡ Changed
+* Tightened security on donation session creation (again) - [#312][]
+* Move fuelrats API routes to `/api/fr` to free up the api directory for other things. - [#312][]
+
+
+[#312]: https://github.com/fuelRats/fuelrats.com/pull/312
+[2.12.9]: https://github.com/FuelRats/fuelrats.com/compare/v2.12.8...v2.12.9
 
 
 

next.config.js

@@ -55,7 +55,7 @@ module.exports = {
     },
     apis: {
       fuelRats: {
-        local: `${FINAL_PUBLIC_URL}/api`,
+        local: `${FINAL_PUBLIC_URL}/api/fr`,
         server: FRDC_API_URL || 'http://localhost:8080',
         socket: FRDC_SOCKET_URL || 'wss://localhost:8080',
       },

src/components/AuthDependantLink.js

@@ -0,0 +1,52 @@
+import Link from 'next/link'
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+
+import { selectCurrentUserId } from '~/store/selectors'
+
+/**
+ * Links to a different page or external URL dependant on the user's login state.
+ * @param {*} props React Props
+ * @returns {Element}
+ */
+function AuthDependantLink (props) {
+  const {
+    children,
+    elseExternal,
+    elseHref,
+    external,
+    href,
+  } = props
+
+  const userId = useSelector(selectCurrentUserId)
+
+  const destination = userId ? href : elseHref
+
+  if ((userId && external) || (!userId && elseExternal)) {
+    return (
+      <a href={destination}>
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <Link href={destination}>
+      <a>
+        {children}
+      </a>
+    </Link>
+  )
+}
+
+
+AuthDependantLink.propTypes = {
+  children: PropTypes.node,
+  elseExternal: PropTypes.bool,
+  elseHref: PropTypes.string.isRequired,
+  external: PropTypes.bool,
+  href: PropTypes.string.isRequired,
+}
+
+
+export default AuthDependantLink

src/components/DonateForm.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { createStructuredSelector } from 'reselect'
 
+import getFingerprint from '~/helpers/getFingerprint'
 import getMoney from '~/helpers/getMoney'
 import { connect } from '~/store'
 import { withCurrentUserId, selectUserById } from '~/store/selectors'
@@ -130,9 +131,12 @@ class DonateForm extends React.Component {
       currency,
     } = this.state
 
+    const fingerprint = await getFingerprint()
+
     const sessionData = {
       amount: this.stripeAmount,
       currency,
+      fingerprint,
     }
 
     if (user) {

src/components/Fieldsets/InputFieldset/InputFieldset.js

@@ -86,6 +86,8 @@ const InputFieldset = React.forwardRef((props, forwardRef) => {
     handleChange,
   } = useField(props.name, { onValidate: handleValidate, onChange, validateOpts })
 
+  const hideMessages = !messages?.validatedValue?.length || !messages?.hasMessages || validating || !isFocused
+
   return (
     <fieldset>
 
@@ -109,12 +111,12 @@ const InputFieldset = React.forwardRef((props, forwardRef) => {
           onFocus={onFocus} />
         {children}
         <ValidityIcon
-          className={{ [styles.hidden]: !value.length }}
           hasMessages={messages?.hasMessages}
+          required={props.required && !value.length}
           valid={messages?.valid}
           validating={validating} />
         <InputSuggestions
-          className={{ dark, [styles.hidden]: !messages?.validatedValue?.length || !messages?.hasMessages || validating || !isFocused }}
+          className={{ dark, [styles.hidden]: hideMessages }}
           messages={messages} />
       </div>
     </fieldset>

src/components/Fieldsets/InputFieldset/InputFieldset.module.scss

@@ -8,8 +8,6 @@
 .validityIconGroup {
   composes: validityIconGroup from global;
 
-  pointer-events: none;
-
   position: absolute;
   top: 1px;
   right: 1px;

src/components/Fieldsets/InputFieldset/ValidityIcon.js

@@ -1,63 +1,93 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import PropTypes from 'prop-types'
+import { useMemo } from 'react'
 
 import styles from './InputFieldset.module.scss'
 
 
 
 
-
+/**
+ *
+ * @param {*} props component props
+ * @param {boolean} props.required When the input is invalid, should the required asterisk be displayed.
+ * @returns {Element}
+ */
 function ValidityIcon (props) {
   const {
     className,
+    hasMessages,
+    invalidTitle = 'This input is invalid',
+    required,
+    requiredTitle = 'This input is required',
     valid,
     validating,
-    hasMessages,
+    validatingTitle = 'validating...',
+    validTitle = 'This input is valid!',
+    validWithMessageTitle = 'This input is valid, however something may be improved.',
     ...restProps
   } = props
 
-  const iconProps = {
-    ...restProps,
-    icon: 'check',
-    title: 'This input is valid!',
-  }
-
-  if (validating) {
-    iconProps.icon = 'sync'
-    iconProps.spin = true
-    iconProps.title = 'validating...'
-  } else if (!valid) {
-    iconProps.icon = 'exclamation-triangle'
-    iconProps.title = 'This input is invalid'
-  } else if (hasMessages) {
-    iconProps.title = 'This input is valid, however something may be improved.'
-  }
+
+  const iconProps = useMemo(() => {
+    const nextProps = {
+      icon: 'check',
+      title: validTitle,
+    }
+
+    if (validating) {
+      nextProps.icon = 'sync'
+      nextProps.spin = true
+      nextProps.title = validatingTitle
+    } else if (!valid) {
+      if (required) {
+        nextProps.icon = 'asterisk'
+        nextProps.title = requiredTitle
+      } else {
+        nextProps.icon = 'exclamation-triangle'
+        nextProps.title = invalidTitle
+      }
+    } else if (hasMessages) {
+      nextProps.title = validWithMessageTitle
+    }
+
+    return nextProps
+  }, [hasMessages, invalidTitle, required, requiredTitle, valid, validTitle, validWithMessageTitle, validating, validatingTitle])
+
+
 
   return (
     <div className={[styles.validityIconGroup, className]}>
       <FontAwesomeIcon
+        {...restProps}
         {...iconProps}
         fixedWidth
         className={[styles.validityIcon, { [styles.valid]: valid && !validating }]} />
 
       {
-          Boolean(valid && hasMessages) && (
-            <FontAwesomeIcon
-              fixedWidth
-              className={[styles.warningIcon, className]}
-              icon="exclamation-circle"
-              title="This input is valid, however something may be improved." />
-          )
-        }
+        Boolean(valid && hasMessages) && (
+          <FontAwesomeIcon
+            fixedWidth
+            className={[styles.warningIcon, className]}
+            icon="exclamation-circle"
+            title={validWithMessageTitle} />
+        )
+      }
     </div>
   )
 }
 
 ValidityIcon.propTypes = {
   className: PropTypes.string,
   hasMessages: PropTypes.any,
+  invalidTitle: PropTypes.string,
+  required: PropTypes.bool,
+  requiredTitle: PropTypes.string,
   valid: PropTypes.any,
   validating: PropTypes.any,
+  validatingTitle: PropTypes.string,
+  validTitle: PropTypes.string,
+  validWithMessageTitle: PropTypes.string,
 }