343 add validation to user signup form

client/package.json

@@ -24,7 +24,7 @@
 		"react-dom": "^18.2.0",
 		"react-hook-form": "^7.34.0",
 		"react-input-mask": "^3.0.0-alpha.2",
-		"react-query": "^3.35.0",
+		"react-query": "^3.39.3",
 		"react-router-dom": "^5.2.0",
 		"socket.io-client": "^4.5.1",
 		"tss-react": "^4.8.4",

client/src/components/Users/Auth/EmailInput.tsx

@@ -27,6 +27,10 @@ const useStyles = makeStyles()((theme: Theme) => {
       textAlign: 'left',
       marginTop: '20px',
     },
+    error: {
+      marginBottom: 0,
+      border: '2px solid red',
+    },
   };
 });
 interface Props {
@@ -35,19 +39,32 @@ interface Props {
   placeholder: string;
   showStartAdornment?: boolean;
   error: string | null;
+  onBlur?: React.ChangeEventHandler<HTMLInputElement> | null;
 }
 
-function EmailInput({ onChange, value, placeholder, showStartAdornment = false, error }: Props) {
+function EmailInput({
+  value,
+  error,
+  onChange,
+  placeholder,
+  onBlur = null,
+  showStartAdornment = false,
+}: Props) {
   const { classes } = useStyles();
 
+  let additionalProps: { [key: string]: any } = {};
+
+  if (onBlur) {
+    additionalProps['onBlur'] = onBlur;
+  }
+
   return (
     <FormControl fullWidth error={Boolean(error)}>
       <label className={classes.label} htmlFor="email">
         Email
       </label>
-      {error && <FormHelperText error>{error}</FormHelperText>}
       <Input
-        className={classes.input}
+        className={`${classes.input} ${Boolean(error) && classes.error}`}
         type="email"
         id="email"
         name="email"
@@ -66,7 +83,9 @@ function EmailInput({ onChange, value, placeholder, showStartAdornment = false,
             </InputAdornment>
           )
         }
+        {...additionalProps}
       />
+      {error && <FormHelperText error>{error}</FormHelperText>}
     </FormControl>
   );
 }

client/src/components/Users/Auth/NameInput.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import FormControl from '@mui/material/FormControl';
+import Input from '@mui/material/Input';
+import FormHelperText from '@mui/material/FormHelperText';
+import type { Theme } from '@mui/material/styles';
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme: Theme) => {
+  return {
+    input: {
+      height: 44,
+      border: '1px solid #C4C4C4',
+      borderRadius: 10,
+      boxSizing: 'border-box',
+      padding: theme.spacing(1),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      fontSize: 14,
+      marginBottom: 20,
+    },
+    label: {
+      color: '#000000',
+      fontWeight: 'bold',
+      textAlign: 'left',
+    },
+    sublabel: {
+      color: '#6E6E6E',
+      fontSize: 14,
+      fontWeight: 300,
+      marginLeft: 5,
+    },
+    error: {
+      border: '2px solid red',
+      marginBottom: 0,
+    },
+  };
+});
+
+type TNameInputProps = {
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  value: string;
+  error?: string | null;
+  showStartAdornment?: boolean;
+  showForgot?: boolean;
+  placeholder?: string;
+  label?: string | null;
+  id?: string | null;
+  name?: string | null;
+  onBlur?: React.FocusEventHandler<HTMLInputElement> | null;
+  sublabel?: string | null;
+};
+
+export default function NameInput({
+  value,
+  error,
+  onBlur,
+  onChange,
+  id = null,
+  name = null,
+  placeholder,
+  label = null,
+  sublabel = null,
+}: TNameInputProps) {
+  const { classes } = useStyles();
+
+  const getAdditionalProps = () => {
+    let additionalProps: { [key: string]: any } = {};
+
+    if (onBlur) {
+      additionalProps['onBlur'] = onBlur;
+    }
+
+    return additionalProps;
+  };
+
+  return (
+    <FormControl fullWidth error={Boolean(error)}>
+      <label className={classes.label} htmlFor={id || 'name'}>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <div>
+            {label || 'Name'}
+            {sublabel && <span className={classes.sublabel}>{sublabel}</span>}
+          </div>
+        </div>
+      </label>
+      <Input
+        className={`${classes.input} ${Boolean(error) && classes.error}`}
+        id={id || 'name'}
+        placeholder={placeholder || 'Jane'}
+        name={name || 'name'}
+        value={value}
+        onChange={onChange}
+        disableUnderline
+        error={Boolean(error)}
+        required
+        {...getAdditionalProps()}
+      />
+      {error && <FormHelperText error>{error}</FormHelperText>}
+    </FormControl>
+  );
+}

client/src/components/Users/Auth/PasswordInput.tsx

@@ -38,6 +38,10 @@ const useStyles = makeStyles()((theme: Theme) => {
       fontWeight: 300,
       marginLeft: 5,
     },
+    error: {
+      border: '2px solid red',
+      marginBottom: 0,
+    },
   };
 });
 
@@ -53,6 +57,7 @@ interface Props {
   name?: string | null;
   onBlur?: React.FocusEventHandler<HTMLInputElement> | null;
   sublabel?: string | null;
+  required?: boolean | null;
 }
 
 function PasswordInput({
@@ -67,6 +72,7 @@ function PasswordInput({
   id = null,
   name = null,
   sublabel = null,
+  required = false,
 }: Props) {
   const { classes } = useStyles();
 
@@ -84,6 +90,10 @@ function PasswordInput({
       additionalProps['onBlur'] = onBlur;
     }
 
+    if (required) {
+      additionalProps['required'] = true;
+    }
+
     return additionalProps;
   };
 
@@ -99,9 +109,8 @@ function PasswordInput({
           {showForgot && <StyledLink to={routes.ForgotPassword.path}>Forgot Password?</StyledLink>}
         </div>
       </label>
-      {error && <FormHelperText error>{error}</FormHelperText>}
       <Input
-        className={classes.input}
+        className={`${classes.input} ${Boolean(error) && classes.error}`}
         id={id || 'password'}
         placeholder={placeholder || 'oooooo'}
         name={name || 'password'}
@@ -133,6 +142,7 @@ function PasswordInput({
         }
         {...getAdditionalProps()}
       />
+      {error && <FormHelperText error>{error}</FormHelperText>}
     </FormControl>
   );
 }