Untitled

import React, { useState } from "react";
import Checkbox from "@mui/material/Checkbox";
import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@mui/material/CircularProgress";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
import InputAdornment from "@mui/material/InputAdornment";
import IconButton from "@mui/material/IconButton";
import SignupLogo from "../../assets/icons/signup.png";
import buchAssistLogo from "../../assets/icons/buchAssistLogo.png";
import GoogleIcon from "../../assets/icons/google.svg";
import FacebookIcon from "../../assets/icons/facebook.svg";
import Divider from "@mui/material/Divider";
import Alert from "../../components/alerts/Alert";
import "../../assets/stylesheets/styles.css";

const Login = () => {
  const [showPassword, setShowPassword] = useState(false);
  const handleClickShowPassword = () => setShowPassword(!showPassword);
  const handleMouseDownPassword = () => setShowPassword(!showPassword);

  //utils
  const [loading, setLoading] = useState(false);
  const [isAlert, setIsAlert] = useState({
    open: false,
    severity: "",
    message: "",
  });

  const [fullName, setFullName] = useState("");
  const [email, setEmail] = useState("");
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
  const [password_confirmation, setPasswordConfirmation] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();

    setLoading(true);

    var myHeaders = new Headers();

    myHeaders.append("Content-Type", "application/json");

    var raw = JSON.stringify({
      user: {
        email: "myemail@email.com",
        password: "mypassword",
      },
    });

    var requestOptions = {
      method: "POST",
      headers: myHeaders,
      body: raw,
      redirect: "follow",
    };

    fetch("http://95.179.165.212:3001/users/sign_in", requestOptions)
      .then((response) => {
        console.log(response.headers.get("content-type"));
      })

      .catch((error) => console.log("error", error));
  };

  return (
    <>
      <form onSubmit={handleSubmit} className="vh-100">
        <div className="container-fluid">
          <div className="row">
            <div className="col-sm-4" style={{ background: "white" }}>
              <div className="mt-3 px-5 text-center">
                <img
                  src={buchAssistLogo}
                  alt="buchAssistLogo"
                  style={{ width: "60px", height: "50px" }}
                />
                <h3 className="fw-bold">BuchAssist</h3>
                <h5 className="fw-bold">Devisen</h5>
                <h5 className="fw-bold">Sign Up</h5>
              </div>

              <div className="d-flex align-items-center px-5 mt-3 pt-5 pt-xl-0 mt-xl-n5">
                <form onSubmit={handleSubmit}>
                  <div className="row">
                    <div className="col">
                      <TextField
                        value={fullName}
                        onChange={(e) => setFullName(e.target.value)}
                        style={{ width: "100%" }}
                        label={"Full Name"}
                      />

                      <br />
                      <br />

                      <TextField
                        required
                        type="text"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        placeholder="name@domain.com"
                        style={{ width: "100%" }}
                        label={"Email Address"}
                      />

                      <br />
                      <br />

                      <TextField
                        type="text"
                        value={userName}
                        onChange={(e) => setUserName(e.target.value)}
                        placeholder="BuchAssist 90"
                        style={{ width: "100%" }}
                        label={"Userame"}
                      />

                      <br />
                      <br />

                      <TextField
                        required
                        type={showPassword ? "text" : "password"}
                        onChange={(e) => setPassword(e.target.value)}
                        placeholder="At least 6 characters"
                        style={{ width: "100%" }}
                        label={"Password"}
                        InputProps={{
                          endAdornment: (
                            <InputAdornment position="end">
                              <IconButton
                                aria-label="toggle password visibility"
                                onClick={handleClickShowPassword}
                                onMouseDown={handleMouseDownPassword}
                              >
                                {showPassword ? (
                                  <Visibility />
                                ) : (
                                  <VisibilityOff />
                                )}
                              </IconButton>
                            </InputAdornment>
                          ),
                        }}
                      />
                    </div>
                  </div>

                  <div className="mt-2 text-center normal-text">
                    <Checkbox
                      defaultChecked
                      color="primary"
                      inputProps={{ "aria-label": "secondary checkbox" }}
                      style={{ color: "#605BFF" }}
                    />
                    <span>
                      By creating an account you agree to the{" "}
                      <a target="_blank" href="" className="main-link">
                        terms of use
                      </a>{" "}
                      and our{" "}
                      <a target="_blank" href="" className="main-link">
                        privacy policy.
                      </a>
                    </span>
                  </div>

                  <Button
                    type="submit"
                    onClick={handleSubmit}
                    className="mt-3 mb-3 main-button"
                    style={{ width: "100%" }}
                  >
                    Create account
                  </Button>

                  <p className="normal-text text-center">
                    Already have an account?{" "}
                    <span
                      onClick={() => (window.location.href = "/")}
                      className="main-link"
                      style={{ cursor: "pointer" }}
                    >
                      Log in
                    </span>
                  </p>
                </form>
              </div>
            </div>

            <div className="col-sm-8 px-0 d-none d-sm-block">
              <img
                src={SignupLogo}
                alt="Signup BuchAssist"
                className="w-90 vh-100"
                style={{
                  objectFit: "scale-down",
                  backgroundRepeat: "no-repeat",
                  backgroundSize: "contain",
                }}
              />
            </div>
          </div>
        </div>

        {isAlert.open && (
          <Alert
            isAlert={isAlert}
            setIsAlert={setIsAlert}
            severity={isAlert.severity}
            message={isAlert.message}
          />
        )}
      </form>
      <Backdrop
        sx={{ color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={loading}
      >
        <CircularProgress color="inherit" />
      </Backdrop>
    </>
  );
};

export default Login;