Develop

src/Pages/ChangePasswordPage.js

-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