textinput updates

client/src/components/ui/TextInput/index.tsx

-import React, { ChangeEvent, Dispatch } from "react";
+import React, { ChangeEvent, Dispatch, FocusEvent, useState } from "react";
 
 import './text-input.scss';
 
@@ -7,17 +7,28 @@ interface Props {
     name: string,
     color?: 'dark'
     type?: 'password' | 'textarea' | 'text',
-    valueSetter?: Dispatch<string>,
-    error?: string
+    onChange: Dispatch<string>,
+    validateFn: (arg0: string) => string | null;
 }
 
-export default function TextInput({ label, name, type, color, valueSetter, error }: Props) {
+export default function TextInput({ label, name, type, color, onChange, validateFn }: Props) {
+    const [error, setError] = useState('');
 
     type = type ?? 'text';
 
     const setValue = (e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>): void => {
-        if (valueSetter)
-            valueSetter(e.target.value);
+        onChange(e.target.value);
+    }
+
+    const validateField = (e: FocusEvent<HTMLTextAreaElement | HTMLInputElement>): void => {
+        if (validateFn) {
+            let error = validateFn(e.target.value);
+            
+            if (error)
+                setError(error);
+            else
+                setError('');
+        }
     }
 
     const errorTag = error ? (<div className="error">{error}</div>) : null;
@@ -28,8 +39,8 @@ export default function TextInput({ label, name, type, color, valueSetter, error
                 <label htmlFor={name}>{label}</label>
                 {
                     type === 'textarea' ?
-                        (<textarea onChange={(e) => setValue(e)} name={name} id={name}></textarea>)
-                        : (<input onChange={(e) => setValue(e)} type={type} name={name} id={name} />)
+                        (<textarea onChange={setValue} name={name} id={name} onBlur={validateField}></textarea>)
+                        : (<input onChange={setValue} type={type} name={name} id={name} onBlur={validateField} />)
                 }
             </div >
             {errorTag}

client/src/components/ui/TextInput/text-input.scss

@@ -6,7 +6,8 @@
 
     .error {
         color: s.$error-color;
-        margin-top: 5px;
+        margin-top: 10px;
+        padding-left: 15px;
     }
 
     .input-field {

client/src/pages/Home/index.tsx

 import Project from 'components/ui/Project';
 import ButtonLink from 'components/ui/ButtonLink';
 import Button from 'components/ui/Button';
-import TextInput from 'components/ui/TextInput';
+//import TextInput from 'components/ui/TextInput';
 import Page from 'components/ui/Page';
 import './home.scss';
 
@@ -150,11 +150,11 @@ export default function Home() {
                         to help you resolve the issue.
                     </p>
                     <form className="contact-form" action="mailto:dplanoetscher@unibz.it" method="GET">
-                        <TextInput label="Fistname" name="firstname" />
+                        {/*                        <TextInput label="Fistname" name="firstname" />
                         <TextInput label="Lastname" name="lastname" />
                         <TextInput label="Email" name="email" />
                         <TextInput label="Subject" name="subject" />
-                        <TextInput label="Message" name="message" type="textarea" />
+    <TextInput label="Message" name="message" type="textarea" />*/}
                         <div className="button-container">
                             <Button type="submit">Send</Button>
                         </div>

client/src/pages/Register/index.tsx

@@ -7,20 +7,17 @@ import { registerUser } from 'adapters/api';
 import './register.scss';
 
 function usernameIsValid(username: string) {
-    return (username && username.length > 3);
+    return (username && username.length > 3) ? null : 'Username has to be at least 4 characters long.';
 }
 
 function passwordIsValid(password: string) {
-    return (password && password.length > 5);
+    return (password && password.length > 5) ? null : 'Password has to be at least 6 characters long';
 }
 
 export default function Register() {
     const [username, setUsername] = useState<string>('');
-    const [usernameError, setUsernameError] = useState<string>('');
-
     const [password, setPassword] = useState<string>('');
-    const [passwordError, setPasswordError] = useState<string>('');
-    
+
     const history = useHistory();
 
 
@@ -28,28 +25,11 @@ export default function Register() {
         e.preventDefault();
 
         if (usernameIsValid(username) && passwordIsValid(password)) {
-            setPasswordError('');
-            setUsernameError('');
-
-            
             await registerUser(username, password).then((data) => {
-                console.log(data);
-                
                 history.push('/tasks');
             }).catch(() => {
-                setUsernameError('This username is already used.');
             });
 
-        } else {
-            if (!usernameIsValid(username))
-                setUsernameError('Your username has to be at least 4 characters long');
-            else
-                setUsernameError('');
-
-            if (!passwordIsValid(password))
-                setPasswordError('Your password has to be at least 6 characters long');
-            else
-                setPasswordError('');
         }
     }
 
@@ -62,16 +42,16 @@ export default function Register() {
                         label="Username"
                         name="username"
                         color="dark"
-                        valueSetter={setUsername}
-                        error={usernameError}
+                        onChange={setUsername}
+                        validateFn={usernameIsValid}
                     />
                     <TextInput
                         label="Password"
                         name="password"
                         color="dark"
                         type="password"
-                        valueSetter={setPassword}
-                        error={passwordError}
+                        onChange={setPassword}
+                        validateFn={passwordIsValid}
                     />
                     <Button type="submit">
                         Register now