tbg-ecomm-nextjs/pages/yamaha/register.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 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 styles from "assets/jss/nextjs-material-kit/pages/loginPage.js";

import image from "assets/img/bgtbg.jpg";

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 RegisterPage(props) {
    const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
    const [first_name] = React.useState("");
    const [last_name] = React.useState("");
    const [username] = React.useState("");
    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();
        const res = await fetch("../api/auth/login", {
        body: JSON.stringify({
            partner: "yamaha",
            first_name: first_name,
            last_name: last_name,
            username: username,
            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}>
            <GridContainer justify="center">
                <GridItem xs={6}>
                <Card className={classes[cardAnimaton]}>
                    <form onSubmit={submitHandler} className={classes.form}>
                    <CardHeader color="info" className={classes.cardHeader}>
                        <h4>Register</h4>
                    </CardHeader>
                    <p className={classes.divider}>Selamat Datang di Halaman Register Thamrin Brothers</p>
                    <CardBody>
                        <CustomInput
                            labelText="Nama Depan"
                            id="first_name"
                            value={first_name}
                            formControlProps={{
                                fullWidth: true,
                            }}
                            inputProps={{
                                type: "text",
                                endAdornment: (
                                <InputAdornment position="end">
                                    <People className={classes.inputIconsColor} />
                                </InputAdornment>
                                ),
                            }}
                        />
                        <CustomInput
                            labelText="Nama Belakang"
                            id="last_name"
                            value={last_name}
                            formControlProps={{
                                fullWidth: true,
                            }}
                            inputProps={{
                                type: "text",
                                endAdornment: (
                                <InputAdornment position="end">
                                    <People className={classes.inputIconsColor} />
                                </InputAdornment>
                                ),
                            }}
                        />
                        <CustomInput
                            labelText="Username"
                            id="username"
                            value={username}
                            formControlProps={{
                                fullWidth: true,
                            }}
                            inputProps={{
                                type: "text",
                                endAdornment: (
                                <InputAdornment position="end">
                                    <People className={classes.inputIconsColor} />
                                </InputAdornment>
                                ),
                            }}
                        />
                        <CustomInput
                            labelText="Email..."
                            id="email"
                            value={email}
                            formControlProps={{
                                fullWidth: true,
                            }}
                            inputProps={{
                                type: "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={{
                                onChange: (event) => setPass(event.target.value),
                                type: "password",
                                endAdornment: (
                                <InputAdornment position="end">
                                    <Icon className={classes.inputIconsColor}>
                                    lock_outline
                                    </Icon>
                                </InputAdornment>
                                ),
                                autoComplete: "off",
                            }}
                        />
                    </CardBody>
                    <div align="center">
                        <a href="/yamaha/login">Sudah Punya Akun ? Silahkan Login</a>
                    </div><br></br>
                    <CardFooter className={classes.cardFooter}>
                        <Button type="submit" color="info" size="lg">
                        Register
                        </Button>
                    </CardFooter>
                    </form>
                </Card>
                </GridItem>
            </GridContainer>
            </div>
        </div>
        </div>
    );
}