add validation if number is really a number

scm-ui/public/locales/en/config.json

@@ -55,5 +55,11 @@
     "login-attempt-limit-timeout": "Login Attempt Limit Timeout",
     "enabled-xsrf-protection": "Enabled XSRF Protection",
     "default-namespace-strategy": "Default Namespace Strategy"
+  },
+  "validation": {
+    "date-format-invalid": "The date format is not valid",
+    "login-attempt-limit-timeout-invalid": "This is not a number",
+    "login-attempt-limit-invalid": "This is not a number",
+    "plugin-url-invalid": "This is not a valid url"
   }
 }

scm-ui/src/components/validation.js

@@ -10,3 +10,21 @@ const mailRegex = /^[A-z0-9][\w.-]*@[A-z0-9][\w\-.]*\.[A-z0-9][A-z0-9-]+$/;
 export const isMailValid = (mail: string) => {
   return mailRegex.test(mail);
 };
+
+export const isNumberValid = (number: string) => {
+  return !isNaN(number);
+};
+
+const urlRegex = new RegExp(
+  "^(https?:\\/\\/)?" + // protocol
+  "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|" + // domain name
+  "((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
+  "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
+  "(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
+    "(\\#[-a-z\\d_]*)?$",
+  "i"
+); // fragment locator
+
+export const isUrlValid = (url: string) => {
+  return urlRegex.test(url);
+};

scm-ui/src/config/components/form/GeneralSettings.js

@@ -2,6 +2,7 @@
 import React from "react";
 import { translate } from "react-i18next";
 import { Checkbox, InputField } from "../../../components/forms/index";
+import * as validator from "../../../components/validation";
 
 type Props = {
   realmDescription: string,
@@ -20,7 +21,23 @@ type Props = {
   hasUpdatePermission: boolean
 };
 
-class GeneralSettings extends React.Component<Props> {
+type State = {
+  loginAttemptLimitError: boolean,
+  loginAttemptLimitTimeoutError: boolean
+};
+
+class GeneralSettings extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      loginAttemptLimitError: false,
+      loginAttemptLimitTimeoutError: false,
+      baseUrlError: false,
+      pluginUrlError: false
+    };
+  }
+
   render() {
     const {
       t,
@@ -75,12 +92,16 @@ class GeneralSettings extends React.Component<Props> {
           onChange={this.handleLoginAttemptLimitChange}
           value={loginAttemptLimit}
           disabled={!hasUpdatePermission}
+          validationError={this.state.loginAttemptLimitError}
+          errorMessage={t("validation.login-attempt-limit-invalid")}
         />
         <InputField
           label={t("general-settings.login-attempt-limit-timeout")}
           onChange={this.handleLoginAttemptLimitTimeoutChange}
           value={loginAttemptLimitTimeout}
           disabled={!hasUpdatePermission}
+          validationError={this.state.loginAttemptLimitTimeoutError}
+          errorMessage={t("validation.login-attempt-limit-timeout-invalid")}
         />
         <Checkbox
           checked={skipFailedAuthenticators}
@@ -126,6 +147,10 @@ class GeneralSettings extends React.Component<Props> {
     this.props.onChange(true, value, "anonymousAccessEnabled");
   };
   handleLoginAttemptLimitChange = (value: string) => {
+    this.setState({
+      ...this.state,
+      loginAttemptLimitError: !validator.isNumberValid(value)
+    });
     this.props.onChange(true, value, "loginAttemptLimit");
   };
   handleSkipFailedAuthenticatorsChange = (value: string) => {
@@ -135,6 +160,10 @@ class GeneralSettings extends React.Component<Props> {
     this.props.onChange(true, value, "pluginUrl");
   };
   handleLoginAttemptLimitTimeoutChange = (value: string) => {
+    this.setState({
+      ...this.state,
+      loginAttemptLimitTimeoutError: !validator.isNumberValid(value)
+    });
     this.props.onChange(true, value, "loginAttemptLimitTimeout");
   };
   handleEnabledXsrfProtectionChange = (value: boolean) => {