[WIP] Feat/ajaxforgot

cypress/integration/pages/Forgot/index.test.js

@@ -0,0 +1,21 @@
+
+describe("Forgot", () => {
+
+  it.only("should show success message when ApiForgot return 200", () => {
+    cy.visit("/auth/forgot")
+
+    cy.server()
+    cy.route({
+      method: 'POST',      // Route all GET requests
+      url: '/api/forgot_password',
+      response: []
+    }).as("ApiForgot")
+
+    cy.get("input[name=email]").type("brunooomelo")
+    cy.contains("Enviar").click()
+    cy.wait("@ApiForgot")
+    cy.get("span#success").contains("Por favor, verifique seu e-mail.")
+    cy.get("input[name=email]").should("have.value", "")
+  })
+
+})

src/components/MessageCollab/index.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+import { Message } from "./styles";
+
+function MessageCollab(props) {
+  return <Message {...props}>{props.content}</Message>;
+}
+
+export default MessageCollab;

src/components/MessageCollab/styles.js

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+import { _h6 } from "../../styles/tools/Typography";
+
+export const Message = styled.span`
+  ${_h6};
+  display: flex;
+  flex: 1;
+  height: 50px;
+  background: #75daad;
+  color: white;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  margin-top: 50px;
+  border-radius: var(--radius-big);
+`

src/components/SubmitCollab/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Button, Content } from "./styles";
+
+function ButtonCollab(props) {
+  return (
+    <Button {...props}>
+      <Content>{props.content}</Content>
+    </Button>
+  );
+}
+
+export default ButtonCollab;

src/components/SubmitCollab/styles.js

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+import { _h6 } from "../../styles/tools/Typography";
+
+export const Button = styled.button`
+  ${_h6};
+  box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
+  width: 100%;
+  height: 42px;
+  margin-top: var(--gap-bigger);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  text-decoration: none;
+  border: none;
+  border-radius: var(--radius-big);
+  background-color: var(--color-fiery-rose);
+  color: var(--color-floral-white);
+  opacity: 0.9;
+  transition: opacity 100ms linear, transform 50ms linear;
+  z-index: 1;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+
+  &:active {
+    transform: translateY(2px);
+  }
+`;
+
+export const Content = styled.span``;

src/containers/FormForgot/index.js

@@ -1,25 +1,43 @@
-import React from "react";
+import React, {useState} from "react";
 
 import TitleCollab from "../../components/TitleCollab";
 import FieldCollab from "../../components/FieldCollab";
-import ButtonCollab from "../../components/ButtonCollab";
+import SubmitCollab from "../../components/SubmitCollab";
 
 import FormAuth from "../../containers/FormAuth";
 import LabelCollab from "../../components/LabelCollab";
 
+import AuthService from "../../services/AuthService";
+import MessageCollab from "../../components/MessageCollab";
+
 function FormForgot() {
+  const [email, setEmail] = useState("")
+  const [success, setSuccess] = useState(false)
+
+  function onChange(e) {
+    setEmail(e.target.value)
+  }
+
+  async function onSubmit(e) {
+    e.preventDefault()
+
+    return AuthService.forgot(email).then(() => setSuccess(true)).then(() => setEmail(""));
+  }
+
+
   return (
-    <FormAuth>
+    <FormAuth onSubmit={onSubmit}>
       <TitleCollab content="Esqueci minha senha" />
 
       <LabelCollab
         content="Informe seu e-mail para alterar a sua senha"
         warning={true}
       />
 
-      <FieldCollab content="E-mail:" htmlFor="email" id="email" />
+      <FieldCollab content="E-mail:" htmlFor="email" id="email" name="email" onChange={onChange} value={email} />
 
-      <ButtonCollab content="Enviar" to="/dashboard" />
+      <SubmitCollab content="Enviar" />
+      { success && <MessageCollab id="success" content="Por favor, verifique seu e-mail." /> }
     </FormAuth>
   );
 }

src/services/AuthService.js

@@ -9,4 +9,13 @@ function signup(user) {
     .send(user);
 }
 
-export default { signup };
+function forgot(email) {
+  const { REACT_APP_API_AUTH } = process.env;
+
+  return request
+    .post(`${REACT_APP_API_AUTH}/api/forgot_password`)
+    .set("Content-Type", "application/json")
+    .send(email)
+}
+
+export default { signup, forgot };