added fixes

frontend/src/components/login/createAccount.js

@@ -34,7 +34,7 @@ const useStyles = makeStyles(theme => ({
 const CssTextField = withStyles({
     root: {
         '& label.Mui-focused': {
-            color: 'white',
+            color: '#FFC800',
         },
         '&:hover label': {
             color: '#FFC800',
@@ -54,7 +54,7 @@ const CssTextField = withStyles({
                 borderColor: "#FFC800",
             },
             '&.Mui-focused fieldset': {
-                borderColor: 'white',
+                borderColor: '#FFC800',
             },
         },
     },
@@ -83,9 +83,9 @@ export default function CreateAccount() {
         if (response.status == "200") {
             setLogin(false)
         }
+        setTimeout(() => { setStatus(null) }, 5000)
     }
     const handleClick = (e) => {
-
         if (username !== "" && password !== "") {
             putCreateAccount(url, { email: username, password: password })
 
@@ -93,6 +93,17 @@ export default function CreateAccount() {
             setPassword("")
         }
     }
+
+    const handleKeyDown = (e) => {
+        if (e.keyCode == 13) {
+            if (username !== "" && password !== "") {
+                putCreateAccount(url, { email: username, password: password })
+
+                setUsername("")
+                setPassword("")
+            }
+        }
+    }
     const handleChangeUSR = (e) => {
         setUsername(e.target.value)
     }
@@ -121,18 +132,21 @@ export default function CreateAccount() {
                                     <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}
                                             />
                                         </Box >
                                     </Grid>
                                     <Grid item xs={12}>
                                         <Box display="flex" justifyContent="center"  >
                                             <CssTextField
+                                                error={status != null && status != "200"}
                                                 id="passwordInput"
                                                 type="password"
                                                 label="Password"
@@ -141,12 +155,13 @@ export default function CreateAccount() {
                                                 value={password}
                                                 onChange={handleChangePW}
                                                 className={classes.input}
+                                                onKeyDown={handleKeyDown}
                                             />
                                         </Box >
                                     </Grid>
                                     <Grid item xs={12}>
                                         <Box display="flex" justifyContent="center"  >
-                                            <Button variant="contained" color="secondary" onClick={handleClick}>
+                                            <Button variant="contained" color="secondary" onClick={handleClick} >
                                                 Create Account
                                     </Button>
                                         </Box >

frontend/src/components/login/login.js

@@ -70,6 +70,7 @@ export default function Login() {
     const [status, setStatus] = React.useState(null);
 
     const postLogin = async (url, data) => {
+
         const response = await fetch(url, {
             method: 'POST',
             mode: 'cors',
@@ -85,6 +86,8 @@ export default function Login() {
         if (response.status == "200") {
             setLogin(false)
         }
+
+        setTimeout(() => { setStatus(null) }, 5000)
     }
 
     const handleClick = (e) => {
@@ -96,6 +99,18 @@ export default function Login() {
             setPassword("")
         }
     }
+
+    const handleKeyDown = (e) => {
+        if (e.keyCode == 13) {
+            if (username !== "" && password !== "") {
+                postLogin(url, { email: username, password: password })
+
+                setUsername("")
+                setPassword("")
+            }
+        }
+    }
+
     const handleChangeUSR = (e) => {
         setUsername(e.target.value)
     }
@@ -126,18 +141,21 @@ export default function Login() {
                                     <Grid item xs={12} >
                                         <Box display="flex" justifyContent="center"  >
                                             <CssTextField
+                                                error={status != null && status != "200"}
                                                 id="usernameInput"
                                                 label="Username"
                                                 variant="outlined"
                                                 value={username}
                                                 onChange={handleChangeUSR}
                                                 className={classes.input}
+                                                onKeyDown={handleKeyDown}
                                             />
                                         </Box >
                                     </Grid>
                                     <Grid item xs={12}>
                                         <Box display="flex" justifyContent="center"  >
                                             <CssTextField
+                                                error={status != null && status != "200"}
                                                 id="passwordInput"
                                                 type="password"
                                                 label="Password"
@@ -146,6 +164,7 @@ export default function Login() {
                                                 value={password}
                                                 onChange={handleChangePW}
                                                 className={classes.input}
+                                                onKeyDown={handleKeyDown}
                                             />
                                         </Box >
                                     </Grid>

frontend/src/components/login/loginfeedback.js

@@ -10,12 +10,20 @@ export default function LoginFeedback(props) {
     const [login, setLogin] = React.useState(null);
     const [open, setOpen] = React.useState(true);
     const [open1, setOpen1] = React.useState(true);
+    const [output, setOutput] = React.useState(null);
+    const [change, setChange] = React.useState(false);
+
     useEffect(() => {
         if (login != props.login) {
+            setChange(true)
+            setOpen(true)
+            setOpen1(true)
             setLogin(props.login)
         }
     }, [login, setLogin, props.login]);
+
     const handleClose = (event, reason) => {
+
         setOpen(false);
     };
     const handleClose1 = (event, reason) => {
@@ -24,26 +32,33 @@ export default function LoginFeedback(props) {
 
     const snack = (login) => {
         if (login == "200") {
-            return (
+            setOutput(
                 <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
                     <Alert onClose={handleClose} severity="success">
                         {props.successText}
                     </Alert>
                 </Snackbar>)
         } else if (login != null) {
-            return (
+            setOutput(
                 <Snackbar open={open1} autoHideDuration={3000} onClose={handleClose1}>
                     <Alert onClose={handleClose1} severity="error">
                         {props.errorText}
                     </Alert>
                 </Snackbar>
             )
+        } else {
+            setOutput(null)
         }
+        setChange(false)
+    }
+
+    if (change == true) {
+        snack(login)
     }
 
     return (
         <React.Fragment>
-            {snack(login)}
+            {output}
         </React.Fragment>
 
     )