From 4489d4e946a25b4e6bdfdbd7783e1f8b6eb3ff27 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Thu, 10 Dec 2020 11:14:26 -0300
Subject: [PATCH] added error message if user input wrong info
---
src/Components/SignUpModal.js | 78 ++++++++++++++++++++++++-----------
1 file changed, 55 insertions(+), 23 deletions(-)
diff --git a/src/Components/SignUpModal.js b/src/Components/SignUpModal.js
index b4c156af..26f6fc54 100644
--- a/src/Components/SignUpModal.js
+++ b/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>
)
}
--
GitLab