dashboard/frontend/src/components/profile/changeUsername.js

import React from 'react';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import LoginFeedback from '../login/loginfeedback';
import Box from '@material-ui/core/Box';

export default function ChangeUsername(props) {
    const url = "/simcompanies/API/user/setname"
    const [username, setUsername] = React.useState("");
    const [password, setPassword] = React.useState("");
    const [disabled, setDisabled] = React.useState(false);
    const [statusText, setStatusText] = React.useState(null);
    const [status, setStatus] = React.useState(null);

    const logout = async () => {
        await fetch(`/simcompanies/API/user/logout`, {
            method: 'DELETE',
            mode: 'cors',
            cache: 'no-cache',
            headers: {
                'Content-Type': 'application/json'
            },
            redirect: 'follow',
            referrerPolicy: 'no-referrer'
        }).then(
            () => { window.location.reload() }
        )
    }

    const postSetName = async (url, data) => {

        const response = await fetch(url, {
            method: 'POST',
            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(() => { logout() }, 2000)
        }
        setDisabled(false)
        setTimeout(() => { setStatus(null) }, 2000)
    }

    const handleClick = (e) => {

        if (username !== "" && password !== "") {
            setDisabled(true)
            postSetName(url, { email: username, password: password })

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

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

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

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

    return (
        <Grid container spacing={2} >
            <Grid item xs={12} >
                <Box display="flex" justifyContent="center">
                    <Typography variant="h5">
                        Change Username
                    </Typography>
                </Box>
            </Grid>
            <Grid item xs={12} >
                <Box display="flex" justifyContent="center">
                    <TextField
                        error={status != null && status !== 200}
                        id="newUsernameInput"
                        label="New Username"
                        variant="outlined"
                        value={username}
                        onChange={handleChangeUSR}
                        onKeyDown={handleKeyDown}
                        disabled={disabled}
                    />
                </Box>
            </Grid>
            <Grid item xs={12}>
                <Box display="flex" justifyContent="center">
                    <TextField
                        error={status != null && status !== 200}
                        id="passwordInput"
                        type="password"
                        label="Password"
                        autoComplete="current-password"
                        variant="outlined"
                        value={password}
                        onChange={handleChangePW}
                        onKeyDown={handleKeyDown}
                        disabled={disabled}
                    />
                </Box>
            </Grid>
            <Grid item xs={12}>
                <Box display="flex" justifyContent="center">
                    <Button disabled={disabled} variant="contained" color="secondary" onClick={handleClick}>
                        Change Username
                    </Button>
                </Box>
            </Grid>
            <LoginFeedback login={status} text={statusText}></LoginFeedback>
        </Grid>
    );
}