added error message if user input wrong info

src/Components/SignUpModal.js

@@ -15,7 +15,7 @@ GNU Affero General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
-import React, {useContext} from 'react';
+import React, {useContext, useState} from 'react';
 import { makeStyles } from '@material-ui/styles';
 import { Button } from '@material-ui/core';
 import Modal from '@material-ui/core/Modal';
@@ -26,6 +26,8 @@ import SignUpContainer from './SignUpContainerFunction.js'
 import {Store} from '../Store.js'
 import axios from 'axios'
 import {apiUrl} from '../env';
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
 
 const StyledModalSignUp = styled(Modal)`
     .djXaxP{
@@ -41,11 +43,28 @@ const StyledModalSignUp = styled(Modal)`
 
 `
 
+export function Alert(props) {
+  return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
 
 
 export default function SignUpModal (props) {
     const { state, dispatch } = useContext(Store)
 
+    const [snackbarOpened, handleSnackbar] = useState(false)
+
+    const handleCloseSnackbar = (event, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+
+        handleSnackbar(false);
+    }
+
+    let [errorMessage, setErrorMessage] = useState("Ocorreu um erro, tente novamente.")
+
+    let [triggerLimpaCamposForm, toggleTriggerLimpaCamposForm] = useState(false)
+
     const handleLoginInfo = (newLogin) => {
         {/*console.log(state.currentUser)*/}
         axios.post(`${apiUrl}/auth`,
@@ -78,9 +97,14 @@ export default function SignUpModal (props) {
             localStorage.setItem('@portalmec/username', response.data.data.name)
             localStorage.setItem('@portalmec/uid', response.data.data.uid)
             console.log(state.currentUser)
+            toggleTriggerLimpaCamposForm(true)
             props.handleClose()
             }, (error) => {
-                console.log(':(')
+                if (error.response.data.errors) {
+                    setErrorMessage(error.response.data.errors.full_messages[0])
+                }
+                {handleSnackbar(true)}
+
             }
         )
     }
@@ -88,26 +112,34 @@ export default function SignUpModal (props) {
     //useEffect(()=>{console.log(state.currentUser)},[state.currentUser])
 
     return (
-        <StyledModalSignUp
-            aria-labelledby="transition-modal-title"
-            aria-describedby="transition-modal-description"
-            open={props.open}
-             
-            centered="true"
-            onClose={props.handleClose}
-            closeAfterTransition
-            BackdropComponent={Backdrop}
-            BackdropProps={{
-                timeout: 500,
-            }}
-        >
-            <Fade in={props.open}>
-                <SignUpContainer
-                 handleClose={props.handleClose}
-                 openLogin={props.openLogin}
-                 handleLoginInfo = {handleLoginInfo}
-                />
-            </Fade>
-        </StyledModalSignUp>
+        <React.Fragment>
+            <Snackbar open={snackbarOpened} autoHideDuration={1000} onClose={handleCloseSnackbar}
+            anchorOrigin = {{ vertical:'top', horizontal:'right' }}
+            >
+                <Alert severity="error">{errorMessage}</Alert>
+            </Snackbar>
+            <StyledModalSignUp
+                aria-labelledby="transition-modal-title"
+                aria-describedby="transition-modal-description"
+                open={props.open}
+
+                centered="true"
+                onClose={props.handleClose}
+                closeAfterTransition
+                BackdropComponent={Backdrop}
+                BackdropProps={{
+                    timeout: 500,
+                }}
+            >
+                <Fade in={props.open}>
+                    <SignUpContainer
+                     handleClose={props.handleClose}
+                     openLogin={props.openLogin}
+                     handleLoginInfo = {handleLoginInfo}
+                     triggerLimpaCamposForm={triggerLimpaCamposForm}
+                    />
+                </Fade>
+            </StyledModalSignUp>
+        </React.Fragment>
     )
 }