Fix: Add validation to URLs

package.json

@@ -166,7 +166,8 @@
     "fix-path": "^2.1.0",
     "fs-extra": "^8.1.0",
     "moment": "^2.24.0",
-    "split2": "^2.2.0"
+    "split2": "^2.2.0",
+    "validator": "^13.5.2"
   },
   "optionalDependencies": {
     "fsevents": "1.2.9"

renderer/components/dashboard/URL.js

@@ -64,7 +64,7 @@ const URL = ({ idx, url, error, onUpdate, onRemove, onKeyEnter }) => {
 
   const onKeyPress = useCallback((e) => {
     if (e.key === 'Enter') {
-      onKeyEnter(idx)
+      onKeyEnter(idx, e.target.value)
     }
   }, [idx, onKeyEnter])
 
@@ -111,7 +111,7 @@ const URL = ({ idx, url, error, onUpdate, onRemove, onKeyEnter }) => {
         onChange={onChange}
         onBlur={onBlur}
         onKeyPress={onKeyPress}
-        error={error}
+        // error={error}
       />
       <label htmlFor={idx}>
         <FormattedMessage id='Settings.Websites.CustomURL.URL' />

renderer/components/dashboard/UrlList.js

@@ -1,9 +1,10 @@
-import React, { useCallback, useEffect, useReducer } from 'react'
+import React, { useCallback, useEffect, useReducer, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useRouter } from 'next/router'
 import { Flex, Box, Button } from 'ooni-components'
 import { ipcRenderer } from 'electron'
 import { FormattedMessage } from 'react-intl'
+import isURL from 'validator/lib/isURL'
 // import debounce from 'lodash.debounce'
 
 const inputFileRequest = 'fs.write.request'
@@ -46,6 +47,26 @@ const init = (incomingList) => {
 const UrlList = ({ incomingList = [] }) => {
   const router = useRouter()
   const [testList, dispatch] = useReducer(listReducer, incomingList, init)
+  const [isError,setError] = useState(false);
+
+  // options for checking url using validator
+  let options = {
+    protocols: [
+        'http',
+        'https',
+        'ftp'
+    ],
+    require_tld: true,
+    require_protocol: true,
+    require_host: true,
+    require_valid_protocol: true,
+    allow_underscores: false,
+    host_whitelist: false,
+    host_blacklist: false,
+    allow_trailing_dot: false,
+    allow_protocol_relative_urls: false,
+    disallow_auth: false
+  }
 
   const runTest = useCallback(() => {
     // generate file
@@ -95,10 +116,14 @@ const UrlList = ({ incomingList = [] }) => {
     dispatch({type: 'remove', value: idx })
   }, [dispatch])
 
-  const onKeyEnter = useCallback((idx) => {
+  const onKeyEnter = useCallback((idx, url) => {
     // if pressed in the last entry, then add a new entry
-    if (idx === testList.length - 1) {
+    if (idx === testList.length - 1 && isURL(url, options)) {
       dispatch({ type: 'add', value: '' })
+      setError(false)
+    }
+    else{
+      setError(true)
     }
     // else send focus to the next one
     // .focus() needs refs which aren't passed down well by [email protected]
@@ -121,6 +146,7 @@ const UrlList = ({ incomingList = [] }) => {
           />
         ))}
       </Box>
+      {isError? <span style={{color: "red"}}>Please enter a valid URL</span>: <span> </span>}
       <Box my={4}>
         <MzAddUrlButton onClick={onAddUrl} />
       </Box>

yarn.lock

@@ -14684,6 +14684,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+validator@^13.5.2:
+  version "13.5.2"
+  resolved "https://registry.yarnpkg.com/validator/-/validator-13.5.2.tgz#c97ae63ed4224999fb6f42c91eaca9567fe69a46"
+  integrity sha512-mD45p0rvHVBlY2Zuy3F3ESIe1h5X58GPfAtslBjY7EtTqGquZTj+VX/J4RnHWN8FKq0C9WRVt1oWAcytWRuYLQ==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"