dashboard/frontend/src/components/login/createAccount.js

import React from 'react';
import { Link } from "react-router-dom";
import { makeStyles, withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import Logo from "../../img/logo.png";
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import { Redirect } from "react-router-dom";
import LoginFeedback from './loginfeedback';

const url = "/simcompanies/API/user/create"

const useStyles = makeStyles(theme => ({
    card: {
        backgroundColor: "#0B1929",
        display: "flex"
    },
    logo: {
        maxWidth: "50%",
        height: "auto"
    },
    input: {
        color: "#9daac1"
    },
    grid: {
        display: "flex"
    }
}));

const CssTextField = withStyles({
    root: {
        '& label.Mui-focused': {
            color: '#FFC800',
        },
        '&:hover label': {
            color: '#FFC800',
        },
        '& label': {
            color: 'white',
        },
        '& .MuiOutlinedInput-root': {
            '& input': {
                color: "white"
            },
            '& fieldset': {
                borderColor: 'white',
                color: "white"
            },
            '&:hover fieldset': {
                borderColor: "#FFC800",
            },
            '&.Mui-focused fieldset': {
                borderColor: '#FFC800',
            },
        },
    },
})(TextField);

export default function CreateAccount() {
    const classes = useStyles();
    const [username, setUsername] = React.useState("");
    const [password, setPassword] = React.useState("");
    const [login, setLogin] = React.useState(true);
    const [status, setStatus] = React.useState(null);
    const [statusText, setStatusText] = React.useState(null);
    const [disabled, setDisabled] = React.useState(false);

    const putCreateAccount = async (url, data) => {
        const response = await fetch(url, {
            method: 'PUT',
            mode: 'cors',
            cache: 'no-cache',
            headers: {
                'Content-Type': 'application/json'
            },
            redirect: 'follow',
            referrerPolicy: 'no-referrer',
            body: JSON.stringify(data)
        });
        const text = await response.text()
        await setStatusText(text)
        setStatus(response.status)
        if (response.status == "200") {
            setTimeout(() => { setLogin(false) }, 2000)
        }
        setDisabled(false)
        setTimeout(() => { setStatus(null) }, 2000)
    }
    const handleClick = (e) => {
        if (username !== "" && password !== "") {
            setDisabled(true)
            putCreateAccount(url, { email: username, password: password })

            setUsername("")
            setPassword("")
        }
    }

    const handleKeyDown = (e) => {
        if (e.key === "Enter") {
            if (username !== "" && password !== "") {
                setDisabled(true)
                putCreateAccount(url, { email: username, password: password })

                setUsername("")
                setPassword("")
            }
        }
    }
    const handleChangeUSR = (e) => {
        setUsername(e.target.value)
    }
    const handleChangePW = (e) => {
        setPassword(e.target.value)
    }

    return (
        login === true ?
            <Box className="loginBackground" display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
                <Card className={classes.card} raised>
                    <CardContent>
                        <Box display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
                            <img src={Logo} alt="SC Dashboard Logo" className={classes.logo} />
                        </Box >
                        <form>
                            <Box display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
                                <Grid container spacing={2} >
                                    <Grid item xs={12} >
                                        <Box display="flex" justifyContent="center"  >
                                            <Typography variant="h4" color="secondary">
                                                Create new Account
                                        </Typography>
                                        </Box >
                                    </Grid>
                                    <Grid item xs={12} >
                                        <Box display="flex" justifyContent="center"  >
                                            <CssTextField
                                                error={status != null && status != "200"}
                                                id="usernameInput"
                                                label="Username"
                                                variant="outlined"
                                                onChange={handleChangeUSR}
                                                value={username}
                                                className={classes.input}
                                                onKeyDown={handleKeyDown}
                                                disabled={disabled}
                                            />
                                        </Box >
                                    </Grid>
                                    <Grid item xs={12}>
                                        <Box display="flex" justifyContent="center"  >
                                            <CssTextField
                                                error={status != null && status != "200"}
                                                id="passwordInput"
                                                type="password"
                                                label="Password"
                                                autoComplete="current-password"
                                                variant="outlined"
                                                value={password}
                                                onChange={handleChangePW}
                                                className={classes.input}
                                                onKeyDown={handleKeyDown}
                                                disabled={disabled}
                                            />
                                        </Box >
                                    </Grid>
                                    <Grid item xs={12}>
                                        <Box display="flex" justifyContent="center"  >
                                            <Button disabled={disabled} variant="contained" color="secondary" onClick={handleClick} >
                                                Create Account
                                    </Button>
                                        </Box >
                                    </Grid>
                                </Grid>
                            </Box >
                        </form>
                    </CardContent>
                </Card>
                <LoginFeedback login={status} text={statusText}></LoginFeedback>
            </Box > : <Redirect to={"/login"} />
    )

}