Updated client-side input validations (#1282)

* added email validation utils
, added input validation for login page
;
'

* updated login page input validation

* added signup page input validation

* added forgotpassword page input validation

* updated reset-password page input validation

* updated input validation for invitations page

frontend/src/ForgotPassword/ForgotPasswordPage.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import config from 'config';
+import { validateEmail } from "../_helpers/utils"
 
 class ForgotPassword extends React.Component {
   constructor(props) {
@@ -25,6 +26,11 @@ class ForgotPassword extends React.Component {
   handleClick = (event) => {
     event.preventDefault();
 
+    if(!validateEmail(this.state.email)) {
+      toast.error('Invalid email', { toastId: 'toast-forgot-password-email-error' });
+      return
+    }
+
     fetch(`${config.apiUrl}/forgot_password`, {
       method: 'POST',
       headers: {

frontend/src/InvitationPage/InvitationPage.jsx

@@ -21,10 +21,21 @@ class InvitationPage extends React.Component {
     e.preventDefault();
 
     const token = this.props.match.params.token;
-    const { password, organization, newSignup, firstName, lastName } = this.state;
-
+    const { password, organization, newSignup, firstName, lastName, password_confirmation } = this.state;
     this.setState({ isLoading: true });
 
+    if(!password || !password_confirmation || !password.trim() || !password_confirmation.trim()) {
+      this.setState({ isLoading: false });
+      toast.error("Password shouldn't be empty or contain white space(s)", { hideProgressBar: true, position: 'top-center' });
+      return;
+    }
+
+    if(password !== password_confirmation) {
+      this.setState({ isLoading: false });
+      toast.error("Passwords don't match", { hideProgressBar: true, position: 'top-center' });
+      return;
+    }
+
     userService
       .setPasswordFromToken({ token, password, organization, newSignup, firstName, lastName })
       .then(() => {

frontend/src/LoginPage/LoginPage.jsx

@@ -3,6 +3,7 @@ import { authenticationService } from '@/_services';
 import { toast } from 'react-toastify';
 import { Link } from 'react-router-dom';
 import queryString from 'query-string';
+import { validateEmail } from "../_helpers/utils";
 
 class LoginPage extends React.Component {
   constructor(props) {
@@ -34,6 +35,16 @@ class LoginPage extends React.Component {
 
     const { email, password } = this.state;
 
+    if(!validateEmail(email) || !password || !password.trim()) {
+      toast.error('Invalid email or password', {
+        toastId: 'toast-login-auth-error',
+        hideProgressBar: true,
+        position: 'top-center',
+      });
+      this.setState({ isLoading: false });
+      return;
+    }
+
     authenticationService.login(email, password).then(
       () => {
         const params = queryString.parse(this.props.location.search);

frontend/src/ResetPassword/ResetPasswordPage.jsx

@@ -21,8 +21,10 @@ class ResetPassword extends React.Component {
 
   handleClick = (event) => {
     event.preventDefault();
-    const { password, password_confirmation } = this.state;
-    if (password !== password_confirmation) {
+    const { token, password, password_confirmation } = this.state;
+    if(!token || !password || !password_confirmation) {
+      toast.error("Please fill all field(s)");
+    } else if (password !== password_confirmation) {
       toast.error("Password don't match");
       this.setState({
         password: '',

frontend/src/SignupPage/SignupPage.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { authenticationService } from '@/_services';
 import { toast } from 'react-toastify';
 import { Link } from 'react-router-dom';
+import { validateEmail } from "../_helpers/utils";
 
 class SignupPage extends React.Component {
   constructor(props) {
@@ -23,6 +24,16 @@ class SignupPage extends React.Component {
 
     const { email } = this.state;
 
+    if(!validateEmail(email)) {
+      toast.error('Invalid email', {
+        toastId: 'toast-login-auth-error',
+        hideProgressBar: true,
+        position: 'top-center',
+      });
+      this.setState({ isLoading: false });
+      return;
+    }
+
     authenticationService.signup(email).then(
       () => {
         // eslint-disable-next-line no-unused-vars

frontend/src/_helpers/utils.js

@@ -230,3 +230,8 @@ export function validateWidget({ validationObject, widgetValue, currentState, cu
     validationError,
   };
 }
+
+export function validateEmail(email) {
+  const emailRegex =  /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
+  return emailRegex.test(email)
+}