added change username and pw close #68

frontend/src/components/profile/changePassword.js

@@ -0,0 +1,148 @@
+import React, { useEffect } 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 ChangePassword(props) {
+    const url = "/simcompanies/API/user/setpassword"
+    const [password, setPassword] = React.useState("");
+    const [passwordNew, setPasswordNew] = React.useState("");
+    const [passwordNew2, setPasswordNew2] = React.useState("");
+    const [disabled, setDisabled] = React.useState(false);
+    const [error, setError] = React.useState(false);
+    const [statusText, setStatusText] = React.useState(null);
+    const [status, setStatus] = React.useState(null);
+
+    const postSetPassword = 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)
+        setDisabled(false)
+        setTimeout(() => { setStatus(null) }, 2000)
+    }
+
+    const handleClick = (e) => {
+
+        if (passwordNew !== "" && password !== "" && passwordNew2 === passwordNew) {
+            setDisabled(true)
+            postSetPassword(url, { oldpassword: password, newpassword: passwordNew })
+
+            setPassword("")
+            setPasswordNew("")
+            setPasswordNew2("")
+        }
+    }
+
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            if (passwordNew !== "" && password !== "" && passwordNew2 === passwordNew) {
+                setDisabled(true)
+                postSetPassword(url, { oldpassword: password, newpassword: passwordNew })
+
+                setPassword("")
+                setPasswordNew("")
+                setPasswordNew2("")
+            }
+        }
+    }
+    useEffect(() => {
+        if (passwordNew2 === passwordNew) {
+            setError(false)
+        } else {
+            setError(true)
+        }
+    }, [passwordNew, passwordNew2, setError])
+
+    const handleChangePWNew = (e) => {
+        setPasswordNew(e.target.value)
+    }
+    const handleChangePWNew2 = (e) => {
+        setPasswordNew2(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 Password
+                    </Typography>
+                </Box>
+            </Grid>
+            <Grid item xs={12}>
+                <Box display="flex" justifyContent="center">
+                    <TextField
+                        error={status != null && status !== 200}
+                        id="oldPasswordInput"
+                        type="password"
+                        label="Old 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">
+                    <TextField
+                        error={(status != null && status !== 200) || error}
+                        id="NewPasswordInput"
+                        type="password"
+                        label="New Password"
+                        autoComplete="current-password"
+                        variant="outlined"
+                        value={passwordNew}
+                        onChange={handleChangePWNew}
+                        onKeyDown={handleKeyDown}
+                        disabled={disabled}
+                    />
+                </Box>
+            </Grid>
+            <Grid item xs={12}>
+                <Box display="flex" justifyContent="center">
+                    <TextField
+                        error={(status != null && status !== 200) || error}
+                        id="NewPasswordRepeatInput"
+                        type="password"
+                        label="Repeat New Password"
+                        autoComplete="current-password"
+                        variant="outlined"
+                        value={passwordNew2}
+                        onChange={handleChangePWNew2}
+                        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 Password
+                    </Button>
+                </Box>
+            </Grid>
+            <LoginFeedback login={status} text={statusText}></LoginFeedback>
+        </Grid>
+    );
+}

frontend/src/components/profile/changeUsername.js

@@ -0,0 +1,117 @@
+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 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)
+        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>
+    );
+}

frontend/src/components/profile/profile.js

@@ -1,12 +1,47 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import ChangeUsername from './changeUsername';
+import ChangePassword from './changePassword';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+    },
+    card: {
+        padding: 20
+    }
+}));
 
 export default function Profile(props) {
+    const classes = useStyles();
+
     return (
-        <div>
-            <Typography variant="h4">
-                Profile Page
-            </Typography>
+        <div className={classes.root}>
+            <Grid container spacing={2}>
+                <Grid item xs={12}>
+                    <Typography variant="h4">
+                        Profile Page
+                    </Typography>
+                </Grid>
+                <Grid item xs={12} md={6}>
+                    <Card className={classes.card}>
+                        <CardContent style={{ padding: 0 }}>
+                            <ChangeUsername></ChangeUsername>
+                        </CardContent>
+                    </Card>
+                </Grid>
+                <Grid item xs={12} md={6}>
+                    <Card className={classes.card}>
+                        <CardContent style={{ padding: 0 }}>
+                            <ChangePassword></ChangePassword>
+                        </CardContent>
+                    </Card>
+                </Grid>
+            </Grid>
         </div>
     );
 }