text: import { useState } from "react";
  import { useFormik } from "formik";
  import axios from "axios";
  import Alert from "@material-ui/lab/Alert";
  import { Button, Grid, TextField, InputAdornment } from "@material-ui/core";
  import { Link } from "react-router-dom";
  import { AccountCircleRounded, Lock, Email } from "@material-ui/icons";
  import "./register.css";
  
  export default function Register() {
    let [api, setApi] = useState("");
    let passSalah, UserTersedia, passRequirement;
  
    const formik = useFormik({
      initialValues: {
        id: "",
        email: "",
        password: "",
        rePassword: "",
      },
      onSubmit: (value) => {
        axios
          .post("http://localhost:5000/user/register", value)
          .then((response) => {
            setApi((api = response.data));
          });
      },
    });
  
    let reqPass = formik.values.password.split("");
    let reqRePass = formik.values.rePassword.split("");
  
    if (reqPass.length < 6 && reqPass.length > 0) {
      passRequirement = (
        <Grid container alignItems="flex-start" justifyContent="flex-end">
          <Grid item>
            <span>Minimal 6 karakter</span>
          </Grid>
        </Grid>
      );
    }
  
    if (
      formik.values.rePassword !== formik.values.password &&
      reqRePass.length > 0
    ) {
      passSalah = (
        <Grid
          container
          justifyContent="flex-end"
          alignItems="flex-start"
          style={{ color: "red" }}
        >
          <span>Password tidak sesuai</span>
        </Grid>
      );
    }
  
    if (api.pesan === "user ada") {
      UserTersedia = <Alert severity="error">{api.pesan}</Alert>;
    } else if (api.pesan === "nis atau nip tidak ada") {
      UserTersedia = <Alert severity="error">{api.pesan}</Alert>;
    } else if (api.pesan === "user ditabahkan") {
      window.location.assign("/");
    }
  
    const Btn = () => {
      return (
        <Grid
          container
          direction="row"
          spacing={2}
          justifyContent="center"
          alignItems="center"
        >
          <Grid item>
            <Button
              variant="outlined"
              style={{
                color: "rgb(49, 177, 49)",
                borderColor: "rgb(49, 177, 49)",
                border: "1px solid",
              }}
              onClick={formik.handleSubmit}
            >
              Register
            </Button>
          </Grid>
  
          <Grid item container justifyContent="center" alignItems="flex-end">
            <Grid
              container
              justifyContent="center"
              alignItems="flex-end"
              style={{ fontSize: "14px" }}
            >
              <Link to="/login">
                <span>Memiliki Akun</span>
              </Link>
            </Grid>
          </Grid>
        </Grid>
      );
    };
  
    return (
      <form className="register-form">
        <Grid
          container
          direction="column"
          spacing={3}
          justifyContent="center"
          alignItems="center"
        >
          <Grid item xs={12}>
            <h1>Register</h1>
          </Grid>
  
          <Grid item xs={12}>
            {UserTersedia}
          </Grid>
  
          <Grid item xs={12}>
            <TextField
              required
              id="id"
              name="id"
              type="text"
              onChange={formik.handleChange}
              value={formik.values.id}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <AccountCircleRounded />
                  </InputAdornment>
                ),
              }}
            />
          </Grid>
  
          <Grid item xs={12}>
            <TextField
              required
              id="email"
              name="email"
              type="text"
              onChange={formik.handleChange}
              value={formik.values.email}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Email />
                  </InputAdornment>
                ),
              }}
            />
          </Grid>
  
          <Grid item xs={12}>
            <TextField
              required
              id="password"
              name="password"
              type="password"
              onChange={formik.handleChange}
              value={formik.values.password}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Lock />
                  </InputAdornment>
                ),
              }}
            />
  
            {passRequirement}
          </Grid>
  
          <Grid item xs={12}>
            <TextField
              required
              id="rePassword"
              name="rePassword"
              type="password"
              onChange={formik.handleChange}
              value={formik.values.rePassword}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Lock />
                  </InputAdornment>
                ),
              }}
            />
  
            {passSalah}
          </Grid>
  
          <Grid item xs={12}>
            <Btn />
          </Grid>
        </Grid>
      </form>
    );
  }
  