From 73127962a6d219d99b49160e8cd0a9794feab7c0 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Sat, 17 Apr 2021 13:21:01 +0200
Subject: [PATCH] textinput updates
---
client/src/components/ui/TextInput/index.tsx | 27 ++++++++++-----
.../components/ui/TextInput/text-input.scss | 3 +-
client/src/pages/Home/index.tsx | 6 ++--
client/src/pages/Register/index.tsx | 34 ++++---------------
4 files changed, 31 insertions(+), 39 deletions(-)
diff --git a/client/src/components/ui/TextInput/index.tsx b/client/src/components/ui/TextInput/index.tsx
index 0fef646..af65199 100644
--- a/client/src/components/ui/TextInput/index.tsx
+++ b/client/src/components/ui/TextInput/index.tsx
@@ -1,4 +1,4 @@
-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}
diff --git a/client/src/components/ui/TextInput/text-input.scss b/client/src/components/ui/TextInput/text-input.scss
index bdfb8fd..772b9c2 100644
--- a/client/src/components/ui/TextInput/text-input.scss
+++ b/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 {
diff --git a/client/src/pages/Home/index.tsx b/client/src/pages/Home/index.tsx
index 7067e9b..24b23ef 100644
--- a/client/src/pages/Home/index.tsx
+++ b/client/src/pages/Home/index.tsx
@@ -1,7 +1,7 @@
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>
diff --git a/client/src/pages/Register/index.tsx b/client/src/pages/Register/index.tsx
index 5f38639..0878157 100644
--- a/client/src/pages/Register/index.tsx
+++ b/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
--
GitLab