diff --git a/src/Pages/ChangePasswordPage.js b/src/Pages/ChangePasswordPage.js
index a2d3a68907365fbb265fe2a43ffa10a8b97b5472..2ffab35e8b6642818138cc576f51043b0236cf5d 100644
--- a/src/Pages/ChangePasswordPage.js
+++ b/src/Pages/ChangePasswordPage.js
@@ -1,42 +1,66 @@
-import React, {useState} from "react";
-import {BackgroundDiv} from '../Components/TabPanels/StyledComponents.js'
-import Paper from '@material-ui/core/Paper';
+import React, { useState } from "react";
+import { BackgroundDiv } from '../Components/TabPanels/StyledComponents.js'
+import Paper from '@material-ui/core/Paper'
import styled from 'styled-components'
import FormInput from "../Components/FormInput.js"
-import {CompletarCadastroButton} from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
+import { CompletarCadastroButton } from '../Components/TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import ValidateUserInput from '../Components/HelperFunctions/FormValidationFunction.js'
import CustomizedBreadcrumbs from '../Components/TabPanels/Breadcrumbs.js'
-import {putRequest} from '../Components/HelperFunctions/getAxiosConfig'
+import { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
+import Snackbar from '@material-ui/core/Snackbar'
+import MuiAlert from '@material-ui/lab/Alert'
+import Grid from '@material-ui/core/Grid'
+import IconButton from '@material-ui/core/IconButton'
+import VisibilityIcon from '@material-ui/icons/Visibility'
+import VisibilityOffIcon from '@material-ui/icons/VisibilityOff'
-export default function ChangePasswordPage (props) {
+function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+export default function ChangePasswordPage(props) {
+
+ const [error, setError] = useState(false)
+ const [success, setSuccess] = useState(false)
+ const [time, setTime] = useState(5)
const [formPassword, setPassword] = useState(
{
- key : false,
- value : ""
+ key: false,
+ hidePass: true,
+ value: ""
}
)
const [formPasswordConfirmation, setPasswordConfirmation] = useState(
{
- key : false,
- value : ""
+ key: false,
+ hidePass: true,
+ value: ""
}
)
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: "",
+ severity: "",
+ });
+
const handleChange = (e, field) => {
const userInput = e.target.value;
const flag = ValidateUserInput('password', userInput);
if (field === "password") {
- setPassword({...formPassword,
- key : flag,
- value : userInput
+ setPassword({
+ ...formPassword,
+ key: flag,
+ value: userInput
})
} else {
- setPasswordConfirmation({...formPasswordConfirmation,
- key : flag,
- value : userInput
+ setPasswordConfirmation({
+ ...formPasswordConfirmation,
+ key: flag,
+ value: userInput
})
}
@@ -46,8 +70,12 @@ export default function ChangePasswordPage (props) {
const flag = ValidateUserInput('confirmation', formPassword.value, formPasswordConfirmation.value);
if (flag === true) {
- //throw error to user - ### arrumar
- console.log("senha não bate");
+ const snackInfo = {
+ open: true,
+ text: "As senhas inseridas não são iguais",
+ severity: "warning",
+ }
+ handleSnackInfo(snackInfo)
} else {
//console.log("senha bate");
if (!formPassword.key && !formPasswordConfirmation.key) {
@@ -64,69 +92,244 @@ export default function ChangePasswordPage (props) {
const url = `/auth/password`
const payload = {
- "password" : formPassword.value,
- "password_confirmation" : formPasswordConfirmation.value,
- "client" : clientId,
- "config" : config,
- "expiry" : expiry,
- "reset_password" : resetPassword,
- "access-token" : token,
- "uid" : uid
+ "password": formPassword.value,
+ "password_confirmation": formPasswordConfirmation.value,
+ "client": clientId,
+ "config": config,
+ "expiry": expiry,
+ "reset_password": resetPassword,
+ "access-token": token,
+ "uid": uid
}
- putRequest(url, payload, () => { window.location.href="/" }, (error) => {console.log(error)}) // ### arrumar
+
+ putRequest(
+ url,
+ payload,
+ () => {
+ setSuccess(true)
+ let count = 0;
+ const snackInfo = {
+ open: true,
+ text: "Sua senha foi atualizada!",
+ severity: "success",
+ }
+ handleSnackInfo(snackInfo)
+ const intervalId = setInterval(() => {
+ count++;
+ setTime((previousTime) => previousTime - 1)
+ if (count === 5) {
+ window.location.href = "/"
+ clearInterval(intervalId)
+ }
+ }, 1000)
+ },
+ (error) => {
+ setError(true)
+ let count = 0;
+ const snackInfo = {
+ open: true,
+ text: "Houve um erro durante a requisição de troca de senha",
+ severity: "error",
+ }
+ handleSnackInfo(snackInfo)
+ const intervalId = setInterval(() => {
+ count++;
+ setTime((previousTime) => previousTime - 1)
+ if (count === 5) {
+ window.location.href = "/"
+ clearInterval(intervalId)
+ }
+ }, 1000)
+ }
+ )
}
}
}
- return (
- <BackgroundDiv>
- <div>
- <CustomizedBreadcrumbs
- values={["Recuperar senha", "Alterar senha"]}
- />
- </div>
- <div style={{justifyContent:"center", textAlign:"center", maxWidth:"600px", margin:"auto"}}>
- <Paper elevation={3}>
- <CardDiv>
- <div style={{overflow:"hidden", display:"inline-block"}}>
- <h2 style={{fontSize:"32px", fontWeight:"200", marginBottom:"20px"}}>Confirme a nova senha</h2>
- <form onSubmit={(e) => { e.preventDefault(); onSubmit(e); }}>
- <FormInput
- inputType={"password"}
- name={"senha"}
- value={formPassword.value}
- placeholder={"Senha"}
- handleChange={e => handleChange(e, 'password')}
- required={true}
- error = {formPassword.key}
- help = {formPassword.key ? (formPassword.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
- />
- <br/>
- <FormInput
- inputType={"password"}
- name={"confirme a senha"}
- value={formPasswordConfirmation.value}
- placeholder={"Confirme a senha"}
- handleChange={e => handleChange(e, 'confirmation')}
- required={true}
- error = {formPasswordConfirmation.key}
- help = {formPasswordConfirmation.key ? (formPasswordConfirmation.value.length === 0 ? "Faltou confirmar sua senha." : "A confirmação precisa ter no mÃnimo 8 caracteres e ser igual a senha.") : ""}
- />
- <div style={{display:"flex", justifyContent:"center"}}>
- <CompletarCadastroButton type="submit" >ATUALIZAR SENHA</CompletarCadastroButton>
- </div>
- </form>
- </div>
- </CardDiv>
- </Paper>
- </div>
- </BackgroundDiv>
- )
+ const handleSnackInfo = (info) => {
+ setSnackInfo({ ...info })
+ }
+
+ const handleCloseSnack = () => {
+ const snackInfo = {
+ open: false,
+ text: "",
+ severity: "",
+ }
+ handleSnackInfo(snackInfo)
+ }
+
+ const handleStateHideFormPass = () => {
+ setPassword({
+ ...formPassword,
+ hidePass: !formPassword.hidePass
+ })
+ }
+
+ const handleStateHideConfFormPass = () => {
+ setPasswordConfirmation({
+ ...formPasswordConfirmation,
+ hidePass: !formPasswordConfirmation.hidePass
+ })
+ }
+
+ if (error)
+ return (
+ <BackgroundDiv>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <div>
+ <CustomizedBreadcrumbs
+ values={["Recuperar senha", "Alterar senha"]}
+ />
+ </div>
+ <div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
+ <Paper elevation={3}>
+ <CardDiv>
+ <div style={{ overflow: "hidden", display: "inline-block" }}>
+ <h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px", lineHeight: '35px' }}>
+ Ocorreu um erro. Por favor, tente novamente mais tarde. Você será redireciona para a home em... <StyledTimer>{time}</StyledTimer>
+ </h2>
+ </div>
+ </CardDiv>
+ </Paper>
+ </div>
+ </BackgroundDiv>
+ )
+ else if (success)
+ return (
+ <BackgroundDiv>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <div>
+ <CustomizedBreadcrumbs
+ values={["Recuperar senha", "Alterar senha"]}
+ />
+ </div>
+ <div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
+ <Paper elevation={3}>
+ <CardDiv>
+ <div style={{ overflow: "hidden", display: "inline-block" }}>
+ <h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px", lineHeight: '35px' }}>
+ Sua senha foi alterada com sucesso. Você será redireciona para a home em... <StyledTimer>{time}</StyledTimer>
+ </h2>
+ </div>
+ </CardDiv>
+ </Paper>
+ </div>
+ </BackgroundDiv>
+ )
+ else
+ return (
+ <BackgroundDiv>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <div>
+ <CustomizedBreadcrumbs
+ values={["Recuperar senha", "Alterar senha"]}
+ />
+ </div>
+ <div style={{ justifyContent: "center", textAlign: "center", maxWidth: "600px", margin: "auto" }}>
+ <Paper elevation={3}>
+ <CardDiv>
+ <div style={{ overflow: "hidden", display: "inline-block" }}>
+ <h2 style={{ fontSize: "32px", fontWeight: "200", marginBottom: "20px" }}>Confirme a nova senha</h2>
+ <form onSubmit={(e) => { e.preventDefault(); onSubmit(e); }}>
+ <Grid container direction='row' alignItems='center' spacing={1}>
+ <Grid item xs={10}>
+ <FormInput
+ inputType={formPassword.hidePass ? "password" : ""}
+ name={"senha"}
+ value={formPassword.value}
+ placeholder={"Senha"}
+ handleChange={e => handleChange(e, 'password')}
+ required={true}
+ error={formPassword.key}
+ help={formPassword.key ? (formPassword.value.length === 0 ? "Faltou digitar sua senha." : "A senha precisa ter no mÃnimo 8 caracteres.") : ""}
+ />
+ </Grid>
+ <Grid item xs={2}>
+ {
+ formPassword.hidePass ?
+ <IconButton onClick={handleStateHideFormPass}>
+ <VisibilityIcon />
+ </IconButton>
+ :
+ <IconButton onClick={handleStateHideFormPass}>
+ <VisibilityOffIcon />
+ </IconButton>
+ }
+ </Grid>
+ </Grid>
+ <br />
+ <Grid container direction='row' alignItems='center' spacing={1}>
+ <Grid item xs={10}>
+ <FormInput
+ inputType={formPasswordConfirmation.hidePass ? "password" : ""}
+ name={"confirme a senha"}
+ value={formPasswordConfirmation.value}
+ placeholder={"Confirme a senha"}
+ handleChange={e => handleChange(e, 'confirmation')}
+ required={true}
+ error={formPasswordConfirmation.key}
+ help={formPasswordConfirmation.key ? (formPasswordConfirmation.value.length === 0 ? "Faltou confirmar sua senha." : "A confirmação precisa ter no mÃnimo 8 caracteres e ser igual a senha.") : ""}
+ />
+ </Grid>
+ <Grid item xs={2}>
+ {
+ formPasswordConfirmation.hidePass ?
+ <IconButton onClick={handleStateHideConfFormPass}>
+ <VisibilityIcon />
+ </IconButton>
+ :
+ <IconButton onClick={handleStateHideConfFormPass}>
+ <VisibilityOffIcon />
+ </IconButton>
+ }
+ </Grid>
+ </Grid>
+ <div style={{ display: "flex", justifyContent: "center" }}>
+ <CompletarCadastroButton type="submit" >ATUALIZAR SENHA</CompletarCadastroButton>
+ </div>
+ </form>
+ </div>
+ </CardDiv>
+ </Paper>
+ </div>
+ </BackgroundDiv>
+ )
}
const CardDiv = styled.div`
background-color : #fff;
box-shadow : 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
- padding : 30px 60px;
+ padding : 20px 30px;
margin : 50px 0;
+`
+const StyledTimer = styled.span`
+ color: #00bcd4;
`
\ No newline at end of file
diff --git a/src/Pages/PasswordRecoveryPage.js b/src/Pages/PasswordRecoveryPage.js
index 6093d37d466df7f639be04ee52dcefde77a36db7..4a6b25728b3353b725ab5ad31287d67b3baf7abc 100644
--- a/src/Pages/PasswordRecoveryPage.js
+++ b/src/Pages/PasswordRecoveryPage.js
@@ -42,7 +42,7 @@ export default function PasswordRecoveryPage (props) {
handleChangeSwitch((data.success ? "success" : "error"))
}
const onSubmit = (e) => {
- e.stopPropagation()
+ e.preventDefault()
const url = `/auth/password`