tbg-ecomm-nextjs/pages/yamaha/login.js

import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import InputAdornment from "@material-ui/core/InputAdornment";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Email from "@material-ui/icons/Email";
import People from "@material-ui/icons/People";
// core components
import Header from "components/Header/Header.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import Grid from "@material-ui/core/Grid";

import styles from "assets/jss/nextjs-material-kit/pages/loginPage.js";

import image from "assets/img/bgtbg.jpg";
import Carousel from "react-slick";

import Collapse from "@material-ui/core/Collapse";
import Alert from "@material-ui/lab/Alert";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import { useRouter } from "next/router";
const useStyles = makeStyles(styles);

export default function LoginPage(props) {
  const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
  const [email, setEmail] = React.useState("");
  const [pass, setPass] = React.useState("");
  const [open, setOpen] = React.useState(false);
  const [error, setError] = React.useState("");
  const router = useRouter();
  setTimeout(function () {
    setCardAnimation("");
  }, 700);
  const classes = useStyles();
  const { ...rest } = props;

  const submitHandler = async (event) => {
    event.preventDefault();
    setEmail(event.target.email.value);
    setPass(event.target.pass.value);
    const res = await fetch("../api/auth/login", {
      body: JSON.stringify({
        partner: "yamaha",
        email: email,
        pass: pass,
      }),
      headers: {
        "Content-Type": "application/json",
      },
      method: "POST",
    });
    // console.log("res", res.S);
    if (res.ok) {
      router.push("/yamaha/home");
    } else {
      setError(await res.text());
      setOpen(true);
    }
  };

  return (
    <div>
      <Collapse className={classes.collapsible} in={open}>
        <Alert
          severity="error"
          action={
            <IconButton
              aria-label="close"
              color="inherit"
              size="small"
              onClick={() => {
                setOpen(false);
              }}
            >
              <CloseIcon fontSize="inherit" />
            </IconButton>
          }
        >
          {error}
        </Alert>
      </Collapse>
      {/* <Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} /> */}
      <div
        className={classes.pageHeader}
        style={{
          backgroundImage: "url(" + image + ")",
          backgroundSize: "cover",
          backgroundPosition: "top center",
        }}
      >
        <div className={classes.container}>
          <Grid container>
            <GridItem className={classes.marginAuto}>
              <Carousel>
                <Card className={classes[cardAnimaton]}>
                  <form onSubmit={submitHandler} className={classes.form}>
                    <CardHeader color="info" className={classes.cardHeader}>
                      <h4>
                        <b>Login</b>
                      </h4>
                    </CardHeader>
                    <h4 className={classes.divider}>
                      <b>Selamat Datang di Halaman Login Thamrin Brothers</b>
                    </h4>
                    <CardBody>
                      <CustomInput
                        labelText="Email..."
                        id="email"
                        value={email}
                        formControlProps={{
                          fullWidth: true,
                        }}
                        inputProps={{
                          type: "email",
                          name: "email",
                          onChange: (event) => setEmail(event.target.value),
                          endAdornment: (
                            <InputAdornment position="end">
                              <Email className={classes.inputIconsColor} />
                            </InputAdornment>
                          ),
                        }}
                      />
                      <CustomInput
                        labelText="Password"
                        id="pass"
                        value={pass}
                        formControlProps={{
                          fullWidth: true,
                        }}
                        inputProps={{
                          name: "pass",
                          onChange: (event) => setPass(event.target.value),
                          type: "password",
                          endAdornment: (
                            <InputAdornment position="end">
                              <Icon className={classes.inputIconsColor}>
                                lock_outline
                              </Icon>
                            </InputAdornment>
                          ),
                          autoComplete: "off",
                        }}
                      />
                    </CardBody>
                    <CardFooter className={classes.cardFooter}>
                      <Button type="submit" color="info" size="lg">
                        Login
                      </Button>
                      <Button href="/yamaha/register" color="info" size="lg">
                        Register
                      </Button>
                    </CardFooter>
                  </form>
                </Card>
              </Carousel>
            </GridItem>
          </Grid>
        </div>
      </div>
    </div>
  );
}