1
import { useState } from "react";
2
import "./App.css";
3

4
const InputItem = ({ handleInput, title, placeholder, error, isError }) => {
5
  return (
6
    <>
7
      <p className="entry-name">{title}</p>
8
      <input
9
        className="input"
10
        type="text"
11
        placeholder={placeholder}
12
        onBlur={(e) => {
13
          handleInput(e.target.value, title);
14
        }}
15
      />
16
      <p className="error">{isError && error}</p>
17
    </>
18
  );
19
};
20

21
export default function App() {
22
  const [username, setUsername] = useState("");
23
  const [email, setEmail] = useState("");
24
  const [password, setPassword] = useState("");
25
  const [confirm, setConfirm] = useState("");
26

27
  const [usernameError, setUsernameError] = useState(false);
28
  const [emailError, setEmailError] = useState(false);
29
  const [passwordError, setPasswordError] = useState(false);
30
  const [confirmError, setConfirmError] = useState(false);
31

32
  const handleInput = (value, title) => {
33
    if (title === "Username") {
34
      if (value && value.length >= 3) {
35
        setUsernameError(false);
36
        setUsername(value);
37
      } else setUsernameError(true);
38
    } else if (title === "Email") {
39
      const emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
40
      if (value && emailReg.test(value)) {
41
        setEmailError(false);
42
        setEmail(value);
43
      } else setEmailError(true);
44
    } else if (title === "Password") {
45
      if (value && value.length >= 6) {
46
        setPasswordError(false);
47
        setPassword(value);
48
      } else setPasswordError(true);
49
    } else {
50
      if (value && value === password) setConfirmError(false);
51
      else {
52
        setConfirmError(true);
53
        setConfirm(true);
54
      }
55
    }
56
  };
57
  const handleClick = () => {
58
    if (username === "") setUsernameError(true);
59
    if (email === "") setEmailError(true);
60
    if (password === "") setPasswordError(true);
61
    if (confirm === "") setConfirmError(true);
62

63
    if (
64
      username !== "" &&
65
      !usernameError &&
66
      !emailError &&
67
      !passwordError &&
68
      !confirmError
69
    ) {
70
      alert("Register succeeded.");
71
    }
72
  };
73

74
  return (
75
    <div className="App">
76
      <h2 className="title">Register With Us</h2>
77
      <InputItem
78
        handleInput={handleInput}
79
        title="Username"
80
        placeholder="Enter username"
81
        isError={usernameError}
82
        error="Username must be at least 3 characters"
83
      />
84
      <InputItem
85
        handleInput={handleInput}
86
        title="Email"
87
        placeholder="Enter email"
88
        isError={emailError}
89
        error="Email is not valid"
90
      />
91
      <InputItem
92
        handleInput={handleInput}
93
        title="Password"
94
        placeholder="Enter password"
95
        isError={passwordError}
96
        error="Password must be at least 6 characters"
97
      />
98
      <InputItem
99
        handleInput={handleInput}
100
        title="Confirm Password"
101
        placeholder="Enter password again"
102
        isError={confirmError}
103
        error="Passwords are not the same"
104
      />
105
      <button className="submit" onClick={handleClick}>
106
        Submit
107
      </button>
108
    </div>
109
  );
110
}