Added client-side regex validation of domains in Domain Lists (whitelist and blacklist)

Signed-off-by: Slava Bezgachev <bezgachev@gmail.com>

src/components/list/DomainInput.js

@@ -11,21 +11,34 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { translate } from 'react-i18next';
-import { api } from "../../utils";
+import { api, validate } from "../../utils";
 
 class DomainInput extends Component {
   state = {
-    domain: ""
+    domain: "",
+    isValid: true
+  };
+
+  handleChange = (e) => {
+    const domain = e.target.value;
+    this.setState({ domain });
+    const isValid = validate.domain(domain);
+    this.setState({ domain, isValid });
+    if (isValid){
+      this.props.onInputValidate(null);
+    } else {
+      this.props.onInputValidate("Not valid domain format (use example.com or sub.example.com")
+    }
   };
 
-  handleChange = (e) =>
-    this.setState({ domain: e.target.value });
 
   onAdd = () => {
     if(this.state.domain.length > 0) {
-      this.props.onEnter(this.state.domain);
+      if (this.state.isValid) {
+        this.props.onEnter(this.state.domain);
 
-      this.setState({ domain: "" });
+        this.setState({ domain: "" });
+      }
     }
   };
 
@@ -35,7 +48,7 @@ class DomainInput extends Component {
     return (
       <div className="form-group input-group">
         <input
-          type="text" className="form-control" placeholder={this.props.placeholder}
+          type="text" className={`form-control ${(this.state.isValid) ? "" : "is-invalid"}`} placeholder={this.props.placeholder}
           value={this.state.domain}
           onKeyPress={e => e.key === 'Enter' ? this.onAdd() : null}
           onChange={this.handleChange}
@@ -44,7 +57,12 @@ class DomainInput extends Component {
         <span className="btn-group input-group-append">
           {
             api.loggedIn ?
-              <button onClick={this.onAdd} className="btn border-secondary" type="button">
+              <button
+                onClick={this.onAdd}
+                className="btn border-secondary"
+                type="button"
+                disabled={!this.state.isValid}
+              >
                 {t("Add")}
               </button>
               : null
@@ -61,7 +79,8 @@ class DomainInput extends Component {
 DomainInput.propTypes = {
   placeholder: PropTypes.string,
   onEnter: PropTypes.func.isRequired,
-  onRefresh: PropTypes.func.isRequired
+  onRefresh: PropTypes.func.isRequired,
+  onInputValidate: PropTypes.func.isRequired
 };
 
 DomainInput.defaultProps = {

src/components/list/ListPage.js

@@ -98,6 +98,12 @@ class ListPage extends Component {
       .catch(ignoreCancel);
   };
 
+  handleInput = err => {
+    this.setState({
+      errorMsg: err
+    });
+  };
+
   componentDidMount() {
     this.onRefresh();
   }
@@ -121,7 +127,8 @@ class ListPage extends Component {
         <DomainInput
           placeholder={this.props.placeholder}
           onEnter={this.onEnter}
-          onRefresh={this.onRefresh}/>
+          onRefresh={this.onRefresh}
+          onInputValidate={this.handleInput}/>
         { this.props.note }
         {
           this.state.infoMsg

src/utils.js

@@ -165,7 +165,7 @@ export const api = {
   },
   getDHCPInfo() {
     return api.get("settings/dhcp")
-  }, 
+  },
   /**
    * If the user is logged in, check if the user's session has lapsed.
    * If so, log them out and refresh the page.
@@ -208,3 +208,13 @@ export const api = {
     return config.developmentMode ? "include" : "same-origin";
   }
 };
+
+export const validate = {
+  domain(domain) {
+    try {
+      return !!domain.match(/([a-zA-Z0-9]+(-[a-zA-Z0-9]+)*)+(\.([a-zA-Z0-9]+(-[a-zA-Z0-9]+)*))*$/);
+    } catch (err) {
+      return false;
+    }
+  }
+};