isandeepkadam / kanban-software Goto Github PK

import "./styles.css";
import { useState } from "react";
import { Box, TextField, Button } from "@mui/material";

export default function App() {
  const [formData, setFormData] = useState({
    username: {
      value: "",
      err: false,
      errMsg: "User should be at least 4 chars long",
      validate: (value: string) => {
        const regex = /^[A-Za-z]{4,}$/;
        return regex.test(value);
      }
    },
    password: {
      value: "",
      err: false,
      errMsg: "Password should be at least 6 chars long",
      validate: (value: string) => {
        const regex = /^[A-Za-z0-9_]{6,}$/;
        return regex.test(value);
      }
    }
  });

  function handleChange(
    evt: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
  ) {
    const { name, value } = evt.target;
    setFormData((prevData) => {
      const newData = { ...prevData };

      const key: keyof typeof newData = name;
      newData[key].value = value;

      return newData;
    });
  }
  function handleSubmit(evt: React.FormEvent<HTMLFormElement>) {
    evt.preventDefault();
    setFormData((prevData) => {
      const newData = { ...prevData };
      for (let key in newData) {
        // const input = newData[key];
        const value = newData[key].value;
        newData[key].err = !newData[key].validate(value);
      }
      console.log(newData);
      return newData;
    });
  }
  return (
    <>
      <Box
        component="form"
        noValidate
        onSubmit={handleSubmit}
        sx={{ display: "flex" }}
        flexDirection="column"
        gap={2}
      >
        <TextField
          label="Username"
          name="username"
          onChange={handleChange}
          value={formData.username.value}
          error={formData.username.err}
          helperText="Username should be at least 2 chars long"
        />
        <TextField
          label="Password"
          name="password"
          onChange={handleChange}
          value={formData.password.value}
          error={formData.password.err}
          helperText="Password should be at least 2 chars long"
        />
        <Button type="submit" variant="contained">
          Submit
        </Button>
      </Box>
    </>
  );
}