1 files changed, 59 insertions, 7 deletions
diff --git a/src/containers/Registration/Registration.tsx b/src/containers/Registration/Registration.tsx
index c681329..9bcea8e 100644
--- a/src/containers/Registration/Registration.tsx
+++ b/src/containers/Registration/Registration.tsx
@@ -3,6 +3,8 @@ import { useHistory } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
+import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import InputAdornment from '@material-ui/core/InputAdornment';
 import { post } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
 
@@ -33,8 +35,19 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+const inputStyle = { WebkitBoxShadow: '0 0 0 1000px snow inset' };
+
+
 const Registration: React.FC = () => {
-  const [error, setError] = useState<boolean>(false);
+  const errorOutputs = {
+    usernameError: 'Username is required',
+    emailError: 'Invalid email address',
+    passwordError: 'Should be at least 6 characters'
+  };
+  const [errorPassword, setErrorPassword] = useState<boolean>(false);
+  const [errorEmail, setErrorEmail] = useState<boolean>(false);
+  const [errorUsername, setErrorUsername] = useState<boolean>(false);
+
   const classes = useStyles();
   const usernameRef = useRef<HTMLInputElement>();
   const emailRef = useRef<HTMLInputElement>();
@@ -50,13 +63,23 @@ const Registration: React.FC = () => {
       post('/users', { username, password, email })
         .then(() => login(username, password))
         .then(() => history.push(`/profile/${username}`));
-    } else setError(true);
+    }
   };
 
   const handleLogin = () => {
     history.push('/login');
   };
 
+  const handleLoginChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setErrorUsername(e.currentTarget.value.length === 0);
+  };
+  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setErrorEmail(!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(e.currentTarget.value));
+  };
+  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setErrorPassword(e.currentTarget.value.length < 6);
+  };
+
   return (
     <>
       <div className={classes.formHeader}>Sign Up</div>
@@ -64,18 +87,47 @@ const Registration: React.FC = () => {
         <TextField
           inputRef={usernameRef}
           label="Username"
-          error={error}
-          helperText={error && 'This field is required!'}
+          error={errorUsername}
+          helperText={errorUsername && errorOutputs.usernameError}
           required
+          onChange={handleLoginChange}
+          inputProps={{ style: inputStyle }}
+        />
+        <TextField
+          inputRef={emailRef}
+          label="Email"
+          error={errorEmail}
+          helperText={errorEmail && errorOutputs.emailError}
+          onChange={handleEmailChange}
+          InputProps={errorEmail ? {} : {
+            endAdornment: (
+              <InputAdornment position="end">
+                <CheckCircleIcon color="primary" />
+              </InputAdornment>
+            ),
+            inputProps: {
+              style: inputStyle
+            }
+          }}
         />
-        <TextField inputRef={emailRef} label="Email" />
         <TextField
           inputRef={passwordRef}
           label="Password"
           type="password"
           required
-          error={error}
-          helperText={error && 'This field is required!'}
+          error={errorPassword}
+          helperText={errorPassword && errorOutputs.passwordError}
+          onChange={handlePasswordChange}
+          InputProps={errorPassword ? {} : {
+            endAdornment: (
+              <InputAdornment position="end">
+                <CheckCircleIcon color="primary" />
+              </InputAdornment>
+            ),
+            inputProps: {
+              style: inputStyle
+            }
+          }}
         />
         <Button variant="contained" onClick={handleSubmit}>submit</Button>
       </form>