WIP: Forgot senha

src/components/RedeForgotEmail/RedeForgotEmail.css

+.rede-forgot-email .content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 40px;
+}
+
+.rede-forgot-email .content * {
+  color: #00273F;
+}
+
+.rede-forgot-email .content>.close-icon>img {
+  transform: rotateZ(45deg);
+}
+
+.rede-forgot-email .content>.close-icon:focus {
+  box-shadow: 0 0 5px rgba(0, 39, 63, 0.5);
+  border: none;
+  outline: none;
+}
+
+.rede-forgot-email .content>.close-icon {
+  position: absolute;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  top: 10px;
+  right: 10px;
+  background-color: transparent;
+  border: none;
+  outline: none !important;
+  border-radius: 5px;
+  box-sizing: border-box;
+  transition: box-shadow 0.4s ease;
+}
+
+.rede-forgot-email .content>.titulo {
+  font-size: 2.3em;
+  font-weight: 600;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.rede-forgot-email .content>.centro {
+  padding: 20px 0;
+}
\ No newline at end of file

src/components/RedeForgotEmail/RedeForgotEmail.jsx

+import React, { useRef, useEffect } from 'react';
+import { string, func, bool } from 'prop-types';
+import { Dialog } from '@material-ui/core';
+import './RedeForgotEmail.css';
+import plus from '../../assets/plus.png';
+import RedeButton from '../RedeButton/RedeButton';
+import RedeTextField from '../RedeTextField/RedeTextField';
+
+const RedeForgotEmail = ({
+  email, onChangeEmail, onConfirm, opened, onClose,
+  // descricao, onClick, desabilitado, cancelar, claro, loading,
+}) => {
+  const confirm = () => {
+    onClose();
+    onConfirm({
+      email,
+    });
+  };
+
+  const keyPress = (evt) => {
+    if (opened && evt.key === 'Enter') {
+      confirm();
+    }
+  };
+
+  return (
+    <Dialog open={opened} onClose={onClose} className="rede-forgot-email" onKeyPress={keyPress}>
+      <div className="content">
+        <button type="button" className="close-icon" onClick={onClose}>
+          <img src={plus} alt="fechar" />
+        </button>
+        <div className="titulo">
+          REDEFINIÇÃO DE SENHA
+        </div>
+        <div className="centro">
+          <RedeTextField
+            valor={email}
+            onChange={onChangeEmail}
+            descricao="Email"
+          />
+        </div>
+        <div className="botao">
+          <RedeButton
+            descricao="REDEFINIR SENHA"
+            onClick={confirm}
+            desabilitado={!email}
+          />
+        </div>
+      </div>
+    </Dialog>
+  );
+};
+
+RedeForgotEmail.propTypes = {
+  opened: bool.isRequired,
+  onClose: func.isRequired,
+  onChangeEmail: func.isRequired,
+  email: string,
+  onConfirm: func,
+};
+
+RedeForgotEmail.defaultProps = {
+  email: '',
+  onConfirm: () => { },
+};
+
+export default RedeForgotEmail;
+
+// <Button
+//   onClick={onClick}
+//   disabled={desabilitado || loading}
+//   cancelar={cancelar}
+//   claro={claro}
+//   loading={loading}
+// >
+//   {loading && (
+//   <>
+//     <RefreshIcon />
+//   </>
+//   )}
+//   {descricao}
+// </Button>

src/components/RedeForgotEmail/RedeForgotEmail.stories.js

+import React from 'react';
+import RedeForgotEmail from './RedeForgotEmail';
+
+export default {
+  title: 'RedeForgotEmail',
+  component: RedeForgotEmail,
+};
+
+export const Default = () => {
+  const [open, setOpen] = React.useState(false);
+  const [email, setEmail] = React.useState('');
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>Abrir Modal</button>
+      <RedeForgotEmail
+        email={email}
+        onChangeEmail={(evt) => setEmail(evt.target.value)}
+        opened={open}
+        onClose={() => setOpen(false)}
+      />
+    </>
+  );
+};

src/components/RedeHeader/RedeHeader.jsx

@@ -9,7 +9,7 @@ import standartPhoto from '../../assets/account.png';
 import { userTypes } from '../../utils/userType.constants';
 
 // const getTitle = () => sessionStorage.getItem('headerTitle');
-const excludedPaths = ['/', '/register', '/cadastro-mentor', '/cadastro-mentorado'];
+const excludedPaths = ['/', '/register', '/cadastro-mentor', '/cadastro-mentorado', '/nova-senha'];
 
 const RedeHeader = (props) => {
   const [tkn, setTkn] = useState(null);
@@ -27,7 +27,9 @@ const RedeHeader = (props) => {
   useEffect(() => { // ComponentDidMount
     setTitle(''); // TODO: Tirar esse setTitle();
     const tknValue = sessionStorage.getItem('token');
-    if (!tknValue && excludedPaths.indexOf(props.location.pathname) === -1) {
+    console.log('aqui>', props);
+    const path = props.location.pathname;
+    if (!tknValue && excludedPaths.indexOf(path) === -1 && !String(path).match(/(nova-senha\/.*)/)) {
       history.push('/');
     }
   }, []);

src/pages/login/Login.jsx

@@ -3,17 +3,20 @@ import { Link, useHistory } from 'react-router-dom';
 import { useSnackbar } from 'notistack';
 import logo from '../../assets/logo.png';
 import Container from './StyledComponents';
-import { login, profile } from '../../services/user';
+import { login, profile, esqueceuSenha } from '../../services/user';
 import RedeButton from '../../components/RedeButton/RedeButton';
 import RedeSeparator from '../../components/RedeSeparator/RedeSeparator';
 import RedeTextField from '../../components/RedeTextField/RedeTextField';
 import pushIfNecessary from '../../utils/HTMLUtils';
+import RedeForgotEmail from '../../components/RedeForgotEmail/RedeForgotEmail';
 
 function Login() {
   const history = useHistory();
   const [loading, setLoading] = useState(false);
-  const [email, setEmail] = useState();
-  const [password, setPassword] = useState();
+  const [loadingForgot, setLoadingForgot] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [forgotOpen, setForgotOpen] = useState(false);
   const { enqueueSnackbar } = useSnackbar();
 
   useEffect(() => { // componentDidMount
@@ -61,8 +64,30 @@ function Login() {
     }
   };
 
+  const sendForgotRequest = (data) => {
+    setLoadingForgot(true);
+    esqueceuSenha(data)
+      .then((resp) => {
+        if (resp.status === 200) {
+          enqueueSnackbar(resp.data, { variant: 'success', autoHideDuration: 3000 });
+        }
+      })
+      .catch((error) => {
+        enqueueSnackbar(error.response.data, { variant: 'error', autoHideDuration: 3000 });
+      }).finally(() => {
+        setLoadingForgot(false);
+      });
+  };
+
   return (
     <Container>
+      <RedeForgotEmail
+        email={email}
+        onChangeEmail={(evt) => setEmail(evt.target.value)}
+        opened={forgotOpen}
+        onClose={() => setForgotOpen(false)}
+        onConfirm={sendForgotRequest}
+      />
       <Container.SideImage />
       <Container.SideLogin>
         <Container.Logo src={logo} />
@@ -74,7 +99,12 @@ function Login() {
             valor={password}
             onChange={(evt) => setPassword(evt.target.value)}
           />
-          <Container.ForgotPassword> Esqueci minha senha </Container.ForgotPassword>
+          <Container.ForgotPassword onClick={() => {
+            if (!loadingForgot) setForgotOpen(true);
+          }}
+          >
+            Esqueci minha senha
+          </Container.ForgotPassword>
           <RedeButton descricao="Entrar" onClick={attemptLogin} loading={loading} />
           <RedeSeparator descricao="Novo na Rede ?"> </RedeSeparator>
           <Link to="/register">

src/pages/mentoria/Mentoria.jsx

@@ -5,7 +5,6 @@ import Caminho from '../mentorias/StyledComponents/Caminho';
 import CaminhoTitle from '../mentorias/StyledComponents/CaminhoTitle';
 import CaminhoTitleDesabilitado from '../mentorias/StyledComponents/CaminhoTitleDesabilitado';
 import CaminhoAp from '../mentorias/StyledComponents/CaminhoAp';
-import RedeHeader from '../../components/RedeHeader/RedeHeader';
 import Card from '../../components/RedeCard/RedeCard';
 import RedeHorarioCard from '../../components/RedeHorarioCard/RedeHorarioCard';
 
@@ -13,8 +12,8 @@ function Mentoria() {
   const [redirectTo, setRedirectTo] = useState('');
   const mentoria = JSON.parse(sessionStorage.getItem('mentoriaSelected'));
   const areaConhecimento = sessionStorage.getItem('areaSelected');
-  
-  //Http.put(`/mentoria/choice/${mentoria.idMentoria}`, data, headers);
+
+  // Http.put(`/mentoria/choice/${mentoria.idMentoria}`, data, headers);
 
   console.log(mentoria);
   return (redirectTo) ? <Redirect to={redirectTo} /> : (

src/pages/novaSenha/StyledComponents/index.jsx

+import styled from 'styled-components';
+
+const StyledContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  flex-direction: column;
+  height: calc(100vh - 75px);
+`;
+
+export default StyledContainer;

src/pages/novaSenha/novaSenha.jsx

+import React from 'react';
+import { useParams } from 'react-router';
+import { Container } from '@material-ui/core';
+import StyledContainer from './StyledComponents';
+
+function NovaSenha() {
+  const { id } = useParams();
+
+  return (
+    <Container>
+      <StyledContainer>
+        ID:
+        {id}
+      </StyledContainer>
+    </Container>
+  );
+}
+
+export default NovaSenha;

src/routes.js

@@ -12,6 +12,7 @@ import Mentoria from './pages/mentoria/Mentoria';
 import Administrador from './pages/adm/Adm';
 import Mentorado from './pages/mentorado/Mentorado';
 import RedeHeader from './components/RedeHeader/RedeHeader';
+import NovaSenha from './pages/novaSenha/novaSenha';
 
 export default function Routes() {
   return (
@@ -31,6 +32,7 @@ export default function Routes() {
         <Route path="/mentorias-disponiveis" component={MentoriasDisponiveis} />
         <Route path="/administrador" component={Administrador} />
         <Route path="/mentorado" component={Mentorado} />
+        <Route path="/nova-senha/:id" component={NovaSenha} />
       </Switch>
     </BrowserRouter>
   );

src/services/user.js

@@ -2,5 +2,6 @@ import { client as Http } from './http';
 
 export const login = (data) => Http.post('/login', data);
 export const cadastrarUsuario = (data) => Http.post('/users', data);
+export const esqueceuSenha = (data) => Http.post('/passwordRecuperationLink', data);
 export const editarUsuario = (data, headers) => Http.put('/users', data, headers);
 export const profile = (headers) => Http.get('/users', headers);